Move out app init (#4185)

Co-authored-by: Douwe Osinga <douwe@squareup.com>

ui/desktop/src/components/BaseChat.tsx

@@ -56,7 +56,7 @@ import {
   ChatContextManagerProvider,
   useChatContextManager,
 } from './context_management/ChatContextManager';
-import { type View, ViewOptions } from '../App';
+import { View, ViewOptions } from '../utils/navigationUtils';
 import { MainPanelLayout } from './Layout/MainPanelLayout';
 import ChatInput from './ChatInput';
 import { ScrollArea, ScrollAreaHandle } from './ui/scroll-area';

ui/desktop/src/components/ChatInput.tsx

@@ -2,7 +2,7 @@ import React, { useRef, useState, useEffect, useMemo } from 'react';
 import { FolderKey, ScrollText } from 'lucide-react';
 import { Tooltip, TooltipContent, TooltipTrigger } from './ui/Tooltip';
 import { Button } from './ui/button';
-import type { View } from '../App';
+import type { View } from '../utils/navigationUtils';
 import Stop from './ui/Stop';
 import { Attach, Send, Close, Microphone } from './icons';
 import { ChatState } from '../types/chatState';
@@ -107,7 +107,9 @@ export default function ChatInput({
   // Derived state - chatState != Idle means we're in some form of loading state
   const isLoading = chatState !== ChatState.Idle;
   const { alerts, addAlert, clearAlerts } = useAlerts();
-  const dropdownRef = useRef<HTMLDivElement | null>(null);
+  const dropdownRef: React.RefObject<HTMLDivElement> = useRef<HTMLDivElement>(
+    null
+  ) as React.RefObject<HTMLDivElement>;
   const toolCount = useToolCount();
   const { isLoadingCompaction, handleManualCompaction } = useChatContextManager();
   const { getProviders, read } = useConfig();

ui/desktop/src/components/GooseSidebar/AppSidebar.tsx

@@ -12,7 +12,7 @@ import {
   SidebarSeparator,
 } from '../ui/sidebar';
 import { ChatSmart, Gear } from '../icons';
-import { ViewOptions, View } from '../../App';
+import { ViewOptions, View } from '../../utils/navigationUtils';
 import { useChatContext } from '../../contexts/ChatContext';
 import { DEFAULT_CHAT_TITLE } from '../../contexts/ChatContext';
 

ui/desktop/src/components/Layout/AppLayout.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import { Outlet, useNavigate, useLocation } from 'react-router-dom';
 import AppSidebar from '../GooseSidebar/AppSidebar';
-import { View, ViewOptions } from '../../App';
+import { View, ViewOptions } from '../../utils/navigationUtils';
 import { AppWindowMac, AppWindow } from 'lucide-react';
 import { Button } from '../ui/button';
 import { Sidebar, SidebarInset, SidebarProvider, SidebarTrigger, useSidebar } from '../ui/sidebar';

ui/desktop/src/components/conversation/SearchBar.tsx

@@ -20,7 +20,7 @@ interface SearchBarProps {
     currentIndex: number;
   };
   /** Optional ref for the search input element */
-  inputRef?: React.RefObject<HTMLInputElement | null>;
+  inputRef?: React.RefObject<HTMLInputElement>;
   /** Initial search term */
   initialSearchTerm?: string;
 }

ui/desktop/src/components/conversation/SearchView.tsx

@@ -44,7 +44,9 @@ export const SearchView: React.FC<PropsWithChildren<SearchViewProps>> = ({
     count: number;
   } | null>(null);
 
-  const searchInputRef = useRef<HTMLInputElement | null>(null);
+  const searchInputRef: React.RefObject<HTMLInputElement> = React.useRef<HTMLInputElement>(
+    null
+  ) as React.RefObject<HTMLInputElement>;
   const highlighterRef = React.useRef<SearchHighlighter | null>(null);
   const containerRef = React.useRef<SearchContainerElement | null>(null);
   const lastSearchRef = React.useRef<{ term: string; caseSensitive: boolean }>({

ui/desktop/src/components/extensions/ExtensionsView.tsx

@@ -1,4 +1,4 @@
-import { View, ViewOptions } from '../../App';
+import { View, ViewOptions } from '../../utils/navigationUtils';
 import ExtensionsSection from '../settings/extensions/ExtensionsSection';
 import { ExtensionConfig } from '../../api';
 import { MainPanelLayout } from '../Layout/MainPanelLayout';

ui/desktop/src/components/hub.tsx

@@ -21,7 +21,7 @@
 
 import { useState } from 'react';
 import FlappyGoose from './FlappyGoose';
-import { type View, ViewOptions } from '../App';
+
 import { SessionInsights } from './sessions/SessionsInsights';
 import ChatInput from './ChatInput';
 import { generateSessionId } from '../sessions';
@@ -31,6 +31,7 @@ import 'react-toastify/dist/ReactToastify.css';
 
 import { ChatType } from '../types/chat';
 import { DEFAULT_CHAT_TITLE } from '../contexts/ChatContext';
+import { View, ViewOptions } from '../utils/navigationUtils';
 
 export default function Hub({
   chat: _chat,

ui/desktop/src/components/pair.tsx

@@ -26,7 +26,7 @@
 
 import { useEffect, useState } from 'react';
 import { useLocation } from 'react-router-dom';
-import { type View, ViewOptions } from '../App';
+import { View, ViewOptions } from '../utils/navigationUtils';
 import BaseChat from './BaseChat';
 import { useRecipeManager } from '../hooks/useRecipeManager';
 import { useIsMobile } from '../hooks/use-mobile';

ui/desktop/src/components/sessions/SessionListView.tsx

@@ -4,7 +4,7 @@ import { fetchSessions, updateSessionMetadata, type Session } from '../../sessio
 import { Card } from '../ui/card';
 import { Button } from '../ui/button';
 import { ScrollArea } from '../ui/scroll-area';
-import { View, ViewOptions } from '../../App';
+import { View, ViewOptions } from '../../utils/navigationUtils';
 import { formatMessageTimestamp } from '../../utils/timeUtils';
 import { SearchView } from '../conversation/SearchView';
 import { SearchHighlighter } from '../../utils/searchHighlighter';

ui/desktop/src/components/sessions/SessionsView.tsx

@@ -1,5 +1,5 @@
 import React, { useState, useEffect, useCallback } from 'react';
-import { View, ViewOptions } from '../../App';
+import { View, ViewOptions } from '../../utils/navigationUtils';
 import { fetchSessionDetails, type SessionDetails } from '../../sessions';
 import SessionListView from './SessionListView';
 import SessionHistoryView from './SessionHistoryView';

ui/desktop/src/components/settings/SettingsView.tsx

@@ -1,6 +1,6 @@
 import { ScrollArea } from '../ui/scroll-area';
 import { Tabs, TabsContent, TabsList, TabsTrigger } from '../ui/tabs';
-import type { View, ViewOptions } from '../../App';
+import { View, ViewOptions } from '../../utils/navigationUtils';
 import ModelsSection from './models/ModelsSection';
 import SessionSharingSection from './sessions/SessionSharingSection';
 import AppSettingsSection from './app/AppSettingsSection';

ui/desktop/src/components/settings/models/ModelsSection.tsx

@@ -1,5 +1,5 @@
 import { useEffect, useState, useCallback, useRef } from 'react';
-import type { View } from '../../../App';
+import { View } from '../../../utils/navigationUtils';
 import ModelSettingsButtons from './subcomponents/ModelSettingsButtons';
 import { useConfig } from '../../ConfigContext';
 import {

ui/desktop/src/components/settings/models/bottom_bar/ModelsBottomBar.tsx

@@ -3,7 +3,7 @@ import React, { useEffect, useState } from 'react';
 import { useModelAndProvider } from '../../../ModelAndProviderContext';
 import { AddModelModal } from '../subcomponents/AddModelModal';
 import { LeadWorkerSettings } from '../subcomponents/LeadWorkerSettings';
-import { View } from '../../../../App';
+import { View } from '../../../../utils/navigationUtils';
 import {
   DropdownMenu,
   DropdownMenuContent,
@@ -22,12 +22,13 @@ import { toastSuccess, toastError } from '../../../../toasts';
 import ViewRecipeModal from '../../../ViewRecipeModal';
 
 interface ModelsBottomBarProps {
-  dropdownRef: React.RefObject<HTMLDivElement | null>;
+  dropdownRef: React.RefObject<HTMLDivElement>;
   setView: (view: View) => void;
   alerts: Alert[];
   recipeConfig?: Recipe | null;
   hasMessages?: boolean; // Add prop to know if there are messages to create a recipe from
 }
+
 export default function ModelsBottomBar({
   dropdownRef,
   setView,

ui/desktop/src/components/settings/models/subcomponents/AddModelModal.tsx

@@ -15,7 +15,7 @@ import { Input } from '../../../ui/input';
 import { Select } from '../../../ui/Select';
 import { useConfig } from '../../../ConfigContext';
 import { useModelAndProvider } from '../../../ModelAndProviderContext';
-import type { View } from '../../../../App';
+import type { View } from '../../../../utils/navigationUtils';
 import Model, { getProviderMetadata } from '../modelInterface';
 import { getPredefinedModelsFromEnv, shouldShowPredefinedModels } from '../predefinedModelsUtils';
 

ui/desktop/src/components/settings/models/subcomponents/ModelSettingsButtons.tsx

@@ -1,7 +1,7 @@
 import { useState } from 'react';
 import { Button } from '../../../ui/button';
 import { AddModelModal } from './AddModelModal';
-import type { View } from '../../../../App';
+import type { View } from '../../../../utils/navigationUtils';
 import { shouldShowPredefinedModels } from '../predefinedModelsUtils';
 
 interface ConfigureModelButtonsProps {

ui/desktop/src/components/settings/reset_provider/ResetProviderSection.tsx

@@ -1,7 +1,7 @@
 import { Button } from '../../ui/button';
 import { RefreshCw } from 'lucide-react';
 import { useConfig } from '../../ConfigContext';
-import { View, ViewOptions } from '../../../App';
+import { View, ViewOptions } from '../../../utils/navigationUtils';
 
 interface ResetProviderSectionProps {
   setView: (view: View, viewOptions?: ViewOptions) => void;