fix: fully remove react-router now that it is unused (#1317)

ui/desktop/src/components/BottomMenu.tsx

@@ -3,8 +3,6 @@ import { useModel } from './settings/models/ModelContext';
 import { useRecentModels } from './settings/models/RecentModels'; // Hook for recent models
 import { Sliders } from 'lucide-react';
 import { ModelRadioList } from './settings/models/ModelRadioList';
-// Remove react-router-dom usage
-// import { useNavigate } from 'react-router-dom';
 import { Document, ChevronUp, ChevronDown } from './icons';
 import type { View } from '../ChatWindow';
 
@@ -13,7 +11,7 @@ export default function BottomMenu({
   setView,
 }: {
   hasMessages: boolean;
-  setView?: (view: View) => void;
+  setView: (view: View) => void;
 }) {
   const [isModelMenuOpen, setIsModelMenuOpen] = useState(false);
   const { currentModel } = useModel();
@@ -133,8 +131,7 @@ export default function BottomMenu({
                   border-t border-borderSubtle mt-2"
                 onClick={() => {
                   setIsModelMenuOpen(false);
-                  // Instead of navigate('/settings'), call setView('settings').
-                  setView?.('settings');
+                  setView('settings');
                 }}
               >
                 <span className="text-sm">Tools and Settings</span>

ui/desktop/src/components/MoreMenu.tsx

@@ -1,12 +1,6 @@
 import { Popover, PopoverContent, PopoverTrigger, PopoverPortal } from '@radix-ui/react-popover';
 import React, { useEffect, useState } from 'react';
-import { FaMoon, FaSun } from 'react-icons/fa';
-import VertDots from './ui/VertDots';
-// Removed react-router-dom import
-// import { useNavigate } from 'react-router-dom';
 import { More } from './icons';
-import { Settings, Grid, MessageSquare } from 'lucide-react';
-import { Button } from './ui/button';
 import type { View } from '../../ChatWindow';
 
 interface VersionInfo {
@@ -15,7 +9,7 @@ interface VersionInfo {
 }
 
 // Accept setView as a prop from the parent (e.g. ChatContent)
-export default function MoreMenu({ setView }: { setView?: (view: View) => void }) {
+export default function MoreMenu({ setView }: { setView: (view: View) => void }) {
   const [open, setOpen] = useState(false);
   const [versions, setVersions] = useState<VersionInfo | null>(null);
   const [showVersions, setShowVersions] = useState(false);
@@ -231,8 +225,7 @@ export default function MoreMenu({ setView }: { setView?: (view: View) => void }
             <button
               onClick={() => {
                 setOpen(false);
-                // Instead of navigate('/settings'), call setView to switch.
-                setView?.('settings');
+                setView('settings');
               }}
               className="w-full text-left p-2 text-sm hover:bg-bgSubtle transition-colors"
             >

ui/desktop/src/components/pages/ConfigPage.tsx

@@ -1,162 +0,0 @@
-import React, { useEffect, useState } from 'react';
-import { Button } from '../ui/button';
-import { Input } from '../ui/input';
-import { Label } from '../ui/label';
-import { Card } from '../ui/card';
-import { useNavigate } from 'react-router-dom';
-import BackButton from '../ui/BackButton';
-import { useConfig } from '../../hooks/useConfig';
-import type { View } from '@/src/ChatWindow';
-
-interface ConfigItem {
-  key: string;
-  value: any;
-}
-
-export function ConfigPage({
-  onClose,
-  setView,
-}: {
-  onClose: () => void;
-  setView?: (view: View) => void;
-}) {
-  const [configs, setConfigs] = useState<Record<string, any>>({});
-  const [newKey, setNewKey] = useState('');
-  const [newValue, setNewValue] = useState('');
-  const navigate = useNavigate();
-
-  const { loading, error, loadConfigs, addConfig, removeConfig } = useConfig();
-
-  // Fetch all configs on component mount
-  useEffect(() => {
-    const fetchConfigs = async () => {
-      const result = await loadConfigs();
-      setConfigs(result);
-    };
-    fetchConfigs();
-  }, [loadConfigs]);
-
-  const handleAddConfig = async () => {
-    if (!newKey || !newValue) {
-      return;
-    }
-
-    let parsedValue = newValue;
-    // Try to parse as JSON if it looks like JSON
-    if (newValue.trim().startsWith('{') || newValue.trim().startsWith('[')) {
-      try {
-        parsedValue = JSON.parse(newValue);
-      } catch (e) {
-        // If parsing fails, use the original string value
-        console.log('Value is not valid JSON, using as string');
-      }
-    }
-
-    const success = await addConfig(newKey, parsedValue);
-    if (success) {
-      setNewKey('');
-      setNewValue('');
-      const updatedConfigs = await loadConfigs();
-      setConfigs(updatedConfigs);
-    }
-  };
-
-  const handleRemoveConfig = async (key: string) => {
-    const success = await removeConfig(key);
-    if (success) {
-      const updatedConfigs = await loadConfigs();
-      setConfigs(updatedConfigs);
-    }
-  };
-
-  return (
-    <div className="h-screen w-full">
-      <div className="relative flex items-center h-[36px] w-full bg-bgSubtle"></div>
-
-      <div className="flex flex-col pb-24">
-        <div className="px-8 pt-6 pb-4">
-          <BackButton onClick={() => navigate('/settings')} />
-          <h1 className="text-3xl font-medium text-textStandard mt-1">Configuration</h1>
-        </div>
-
-        <div className="flex-1 py-8 pt-[20px] px-8">
-          <div className="space-y-8 max-w-2xl">
-            {/* Add new config form */}
-            <Card className="p-6">
-              <h2 className="text-xl font-semibold mb-4">Add New Configuration</h2>
-              <div className="grid gap-4">
-                <div>
-                  <Label htmlFor="configKey">Key</Label>
-                  <Input
-                    id="configKey"
-                    value={newKey}
-                    onChange={(e) => setNewKey(e.target.value)}
-                    placeholder="Enter config key"
-                    className="mt-1"
-                  />
-                </div>
-                <div>
-                  <Label htmlFor="configValue">Value</Label>
-                  <Input
-                    id="configValue"
-                    value={newValue}
-                    onChange={(e) => setNewValue(e.target.value)}
-                    placeholder="Enter config value (string or JSON)"
-                    className="mt-1"
-                  />
-                </div>
-                <Button onClick={handleAddConfig} disabled={loading}>
-                  {loading ? 'Adding...' : 'Add Configuration'}
-                </Button>
-              </div>
-            </Card>
-
-            {/* Error display */}
-            {error && (
-              <div className="bg-red-100 border border-red-400 text-red-700 px-4 py-3 rounded">
-                {error.message}
-              </div>
-            )}
-
-            {/* Config list */}
-            <Card className="p-6">
-              <h2 className="text-xl font-semibold mb-4">Current Configurations</h2>
-              <div className="grid gap-4">
-                {loading ? (
-                  <div className="text-center text-gray-500">Loading configurations...</div>
-                ) : Object.keys(configs).length === 0 ? (
-                  <div className="text-center text-gray-500">No configurations found</div>
-                ) : (
-                  Object.entries(configs).map(([key, value]) => (
-                    <div
-                      key={key}
-                      className="flex justify-between items-center p-3 bg-gray-50 dark:bg-gray-800 rounded"
-                    >
-                      <div className="break-all">
-                        <span className="font-medium">{key}:</span>{' '}
-                        <span className="text-gray-600 dark:text-gray-300">
-                          {typeof value === 'object'
-                            ? JSON.stringify(value, null, 2)
-                            : String(value)}
-                        </span>
-                      </div>
-                      <Button
-                        variant="destructive"
-                        onClick={() => handleRemoveConfig(key)}
-                        size="sm"
-                        className="ml-4 shrink-0"
-                        disabled={loading}
-                      >
-                        {loading ? '...' : 'Remove'}
-                      </Button>
-                    </div>
-                  ))
-                )}
-              </div>
-            </Card>
-          </div>
-        </div>
-      </div>
-    </div>
-  );
-}

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

@@ -56,7 +56,6 @@ export default function Settings({
   onClose: () => void;
   setView: (view: View) => void;
 }) {
-  // We'll read query params from window.location instead of react-router's useLocation
   const [searchParams] = useState(() => new URLSearchParams(window.location.search));
 
   const [settings, setSettings] = React.useState<SettingsType>(() => {
@@ -181,8 +180,6 @@ export default function Settings({
     return BUILT_IN_EXTENSIONS.some((builtIn) => builtIn.id === extensionId);
   };
 
-  function navigate(s: string) {}
-
   return (
     <div className="h-screen w-full">
       <div className="relative flex items-center h-[36px] w-full bg-bgSubtle"></div>
@@ -190,12 +187,7 @@ export default function Settings({
       <ScrollArea className="h-full w-full">
         <div className="flex flex-col pb-24">
           <div className="px-8 pt-6 pb-4">
-            <BackButton
-              onClick={() => {
-                // Instead of navigate('/chat/1', { replace: true });
-                onClose();
-              }}
-            />
+            <BackButton onClick={() => onClose()} />
             <h1 className="text-3xl font-medium text-textStandard mt-1">Settings</h1>
           </div>
 
@@ -207,7 +199,6 @@ export default function Settings({
                   <h2 className="text-xl font-medium text-textStandard">Models</h2>
                   <button
                     onClick={() => {
-                      // Instead of navigate('/settings/more-models'):
                       setView('moreModels');
                     }}
                     className="text-indigo-500 hover:text-indigo-600 text-sm"
@@ -261,27 +252,6 @@ export default function Settings({
                   )}
                 </div>
               </section>
-
-              <section id="configuration">
-                <div className="flex justify-between items-center mb-6 border-b border-borderSubtle px-8">
-                  <h2 className="text-xl font-semibold text-textStandard">Configuration</h2>
-                  <div className="flex gap-4">
-                    <button
-                      onClick={() => navigate('/settings/config')}
-                      className="text-indigo-500 hover:text-indigo-600 text-sm"
-                    >
-                      Manage
-                    </button>
-                  </div>
-                </div>
-
-                <div className="px-8">
-                  <p className="text-sm text-textStandard mb-4">
-                    Manage application configuration and settings. You can view, add, edit, and
-                    remove configuration values.
-                  </p>
-                </div>
-              </section>
             </div>
           </div>
         </div>

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

@@ -1,13 +1,10 @@
 import React from 'react';
-import { Button } from '../../ui/button';
 import { RecentModels } from './RecentModels';
 import { ProviderButtons } from './ProviderButtons';
 import BackButton from '../../ui/BackButton';
 import { SearchBar } from './Search';
 import { useModel } from './ModelContext';
 import { AddModelInline } from './AddModelInline';
-// Removed react-router-dom usage
-// import { useNavigate } from 'react-router-dom';
 import { ScrollArea } from '../../ui/scroll-area';
 import type { View } from '../../../ChatWindow';
 

ui/desktop/src/components/welcome_screen/ProviderGrid.tsx

@@ -1,5 +1,4 @@
 import React from 'react';
-import { Button } from '../ui/button';
 import {
   supported_providers,
   required_keys,
@@ -15,7 +14,6 @@ import { initializeSystem } from '../../utils/providerUtils';
 import { getApiUrl, getSecretKey } from '../../config';
 import { toast } from 'react-toastify';
 import { getActiveProviders, isSecretKey } from '../settings/api_keys/utils';
-import { useNavigate } from 'react-router-dom';
 import { BaseProviderGrid, getProviderDescription } from '../settings/providers/BaseProviderGrid';
 
 interface ProviderGridProps {
@@ -28,7 +26,6 @@ export function ProviderGrid({ onSubmit }: ProviderGridProps) {
   const [showSetupModal, setShowSetupModal] = React.useState(false);
   const { switchModel } = useModel();
   const { addRecentModel } = useRecentModels();
-  const navigate = useNavigate();
 
   const providers = React.useMemo(() => {
     return supported_providers.map((providerName) => {