fix(gui): resolve TypeScript errors in settings components

factorydroid · factorydroid · commit a98393432744 · 2026-01-27T16:59:49.000Z
- SettingsDialog.tsx: Remove unused imports (GitSyncSettings, ListItem),
  fix unused variables (theme, multiRepo, source, supermavenApiKey signals),
  fix Badge title prop issue by wrapping in span,
  fix Text as='h4' by changing to 'h3',
  fix Icon style prop issue by wrapping in span

- ThemeCustomizer.tsx: Remove unused imports (batch, FormGroup, tokens),
  fix color type incompatibilities by using unknown cast

- EditorSettingsPanel.tsx: Remove unused imports (FormGroup, Input),
  remove invalid description prop, fix boolean | undefined issue

- KeymapEditor.tsx: Fix unused props parameter

- SettingsSyncPanel.tsx: Remove unused imports (Select, Checkbox),
  fix unused setUsername by removing from destructuring
diff --git a/cortex-gui/src/components/SettingsDialog.tsx b/cortex-gui/src/components/SettingsDialog.tsx
@@ -8,12 +8,12 @@ import { useSupermaven } from "@/context/SupermavenContext";
 import { useFormatter, type FormatterType } from "@/context/FormatterContext";
 import { useSettings, type SettingsScope, type SettingSource, type CortexSettings, type ExplorerSortOrder } from "@/context/SettingsContext";
 import { useWorkspace } from "@/context/WorkspaceContext";
-import { useMultiRepo, type GitSyncSettings } from "@/context/MultiRepoContext";
+import { useMultiRepo } from "@/context/MultiRepoContext";
 import { KeymapProvider } from "@/context/KeymapContext";
 import { KeymapEditor, Toggle, Select, SectionHeader, OptionCard, FormGroup, InfoBox, Button, Kbd, EditorSettingsPanel, TerminalSettingsPanel, FilesSettingsPanel, NetworkSettingsPanel, JsonSettingsEditor, GitSettingsPanel } from "@/components/settings";
 import { CopilotSettingsPanel, CopilotSignInModal } from "@/components/ai/CopilotStatus";
 import { ExtensionsPanel } from "@/components/extensions";
-import { Button as UIButton, IconButton, Input, Card, ListItem, Text, Badge } from "@/components/ui";
+import { Button as UIButton, IconButton, Input, Card, Text, Badge } from "@/components/ui";
 import type { LLMProviderType } from "@/utils/llm";
 
 /** Map tree item IDs to settings sections for modified count */
@@ -163,12 +163,11 @@ function SettingsTreeItem(props: {
           <span class="text-sm truncate flex-1">{props.item.label}</span>
           {/* Modified count badge */}
           <Show when={totalModifiedCount() > 0}>
-            <Badge 
-              size="sm"
-              title={`${totalModifiedCount()} modified setting${totalModifiedCount() > 1 ? 's' : ''}`}
-            >
-              {totalModifiedCount()}
-            </Badge>
+            <span title={`${totalModifiedCount()} modified setting${totalModifiedCount() > 1 ? 's' : ''}`}>
+              <Badge size="sm">
+                {totalModifiedCount()}
+              </Badge>
+            </span>
           </Show>
         </UIButton>
         <Show when={hasChildren() && isExpanded()}>
@@ -290,13 +289,13 @@ function SettingRow(props: {
 }
 
 export function SettingsDialog(props: SettingsDialogProps) {
-  const { theme, setTheme } = useTheme();
+  const { setTheme } = useTheme();
   const { state, updateConfig } = useSDK();
   const vim = useVim();
   const llm = useLLM();
   const supermaven = useSupermaven();
   const formatter = useFormatter();
-  const multiRepo = useMultiRepo();
+  useMultiRepo(); // Context provider hook (values not destructured yet)
   const settings = useSettings();
   const [activeTab, setActiveTab] = createSignal<string>(props.initialSection ?? "general");
   const [searchQuery, setSearchQuery] = createSignal("");
@@ -309,8 +308,7 @@ export function SettingsDialog(props: SettingsDialogProps) {
       }, 100);
     }
   });
-  const [supermavenApiKey, setSupermavenApiKey] = createSignal("");
-  const [showSupermavenKey, setShowSupermavenKey] = createSignal(false);
+  // Removed unused signals: supermavenApiKey, showSupermavenKey
   const [showCopilotSignIn, setShowCopilotSignIn] = createSignal(false);
   
   // Settings scope toggle: user vs workspace
@@ -355,7 +353,7 @@ export function SettingsDialog(props: SettingsDialogProps) {
   });
   const [validatingProvider, setValidatingProvider] = createSignal<LLMProviderType | null>(null);
 
-  const [contentRef, setContentRef] = createSignal<HTMLDivElement | null>(null);
+  const [, setContentRef] = createSignal<HTMLDivElement | null>(null);
 
   const findTreeItem = (items: TreeItem[], id: string): TreeItem | undefined => {
     for (const item of items) {
@@ -946,11 +944,10 @@ export function SettingsDialog(props: SettingsDialogProps) {
                     icon={<Icon name="desktop" class="h-4 w-4" />}
                   />
                   <div>
-                    <Text as="h4" size="sm" weight="medium" style={{ "margin-bottom": "12px", color: "var(--jb-text-body-color)" }}>Theme</Text>
+                    <Text as="h3" size="sm" weight="medium" style={{ "margin-bottom": "12px", color: "var(--jb-text-body-color)" }}>Theme</Text>
                     <div style={{ display: "flex", gap: "8px" }}>
                       <For each={themes}>
                         {(t) => {
-                          const source = () => settings.getSettingSource("theme", "theme");
                           const hasOverride = () => settings.hasWorkspaceOverride("theme", "theme");
                           const isSelected = () => settings.effectiveSettings().theme.theme === t.value;
                           
@@ -965,7 +962,7 @@ export function SettingsDialog(props: SettingsDialogProps) {
                                   }
                                 }}
                                 variant={isSelected() ? "primary" : "secondary"}
-                                icon={<t.icon style={{ width: "16px", height: "16px" }} />}
+                                icon={<span style={{ width: "16px", height: "16px", display: "inline-flex" }}><t.icon /></span>}
                                 style={hasOverride() ? { "box-shadow": "0 0 0 2px rgba(168, 85, 247, 0.5)" } : {}}
                               >
                                 {t.label}
@@ -1006,7 +1003,7 @@ export function SettingsDialog(props: SettingsDialogProps) {
 
                   {/* Editor Tabs Settings */}
                   <div>
-                    <Text as="h4" size="sm" weight="medium" style={{ "margin-bottom": "12px", color: "var(--jb-text-body-color)" }}>Editor Tabs</Text>
+                    <Text as="h3" size="sm" weight="medium" style={{ "margin-bottom": "12px", color: "var(--jb-text-body-color)" }}>Editor Tabs</Text>
                     <div style={{ position: "relative" }}>
                       <OptionCard
                         selected={settings.effectiveSettings().theme.wrapTabs}
@@ -1087,7 +1084,7 @@ export function SettingsDialog(props: SettingsDialogProps) {
                   
                   {/* Sort Order */}
                   <div>
-                    <Text as="h4" size="sm" weight="medium" style={{ "margin-bottom": "12px", color: "var(--jb-text-body-color)" }}>Sort Order</Text>
+                    <Text as="h3" size="sm" weight="medium" style={{ "margin-bottom": "12px", color: "var(--jb-text-body-color)" }}>Sort Order</Text>
                     <FormGroup
                       label="File Sort Order"
                       description="Choose how files and folders are sorted in the explorer"
@@ -1127,7 +1124,7 @@ export function SettingsDialog(props: SettingsDialogProps) {
                 </div>
                   
                 <div>
-                  <Text as="h4" size="sm" weight="medium" style={{ "margin-bottom": "12px", color: "var(--jb-text-body-color)" }}>Drag and Drop</Text>
+                  <Text as="h3" size="sm" weight="medium" style={{ "margin-bottom": "12px", color: "var(--jb-text-body-color)" }}>Drag and Drop</Text>
                     <OptionCard
                       selected={settings.effectiveSettings().files?.confirmDragAndDrop ?? true}
                       onSelect={async () => {
@@ -1295,7 +1292,7 @@ export function SettingsDialog(props: SettingsDialogProps) {
                   
                   {/* Vim Mode Toggle */}
                   <div>
-                    <Text as="h4" size="sm" weight="medium" style={{ "margin-bottom": "12px", color: "var(--jb-text-body-color)" }}>Vim Mode</Text>
+                    <Text as="h3" size="sm" weight="medium" style={{ "margin-bottom": "12px", color: "var(--jb-text-body-color)" }}>Vim Mode</Text>
                     <div style={{ position: "relative" }}>
                       <OptionCard
                         selected={vim.enabled()}
diff --git a/cortex-gui/src/components/settings/EditorSettingsPanel.tsx b/cortex-gui/src/components/settings/EditorSettingsPanel.tsx
@@ -1,8 +1,8 @@
 import { Show, For, JSX } from "solid-js";
 import { useSettings, type SettingsScope, type EditorSettings } from "@/context/SettingsContext";
-import { Toggle, SectionHeader, FormGroup } from "./FormComponents";
+import { Toggle, SectionHeader } from "./FormComponents";
 import { Button } from "@/components/ui/Button";
-import { Input } from "@/components/ui/Input";
+// Input not currently used
 import { Card } from "@/components/ui/Card";
 import { Text } from "@/components/ui/Text";
 import { Badge } from "@/components/ui/Badge";
@@ -366,7 +366,7 @@ export function EditorSettingsPanel(props: EditorSettingsPanelProps) {
         <SettingRowWithOverride 
           label="Font Ligatures" 
           settingKey="fontLigatures"
-          description="Enable font ligatures (e.g., =>, !==, ===, ->)"
+
           hasOverride={hasOverride("fontLigatures")}
           isModified={isModified("fontLigatures")}
           onReset={() => resetOverride("fontLigatures")}
@@ -795,7 +795,7 @@ export function EditorSettingsPanel(props: EditorSettingsPanelProps) {
           onResetToDefault={() => resetToDefault("largeFileOptimizations")}
         >
           <Toggle
-            checked={editor().largeFileOptimizations}
+            checked={editor().largeFileOptimizations ?? true}
             onChange={(checked) => updateSetting("largeFileOptimizations", checked)}
           />
         </SettingRowWithOverride>
diff --git a/cortex-gui/src/components/settings/KeymapEditor.tsx b/cortex-gui/src/components/settings/KeymapEditor.tsx
@@ -1,14 +1,14 @@
 import { Show, For, createSignal, createMemo, createEffect, onCleanup } from "solid-js";
 import { Icon } from "../ui/Icon";
-import { useKeymap, keyboardEventToKeystroke, type CommandBinding, type Keystroke } from "@/context/KeymapContext";
+import { useKeymap, type CommandBinding, type Keystroke } from "@/context/KeymapContext";
 import { WhenClauseInput, WhenClauseDisplay, validateWhenClause } from "./WhenClauseInput";
 
 interface KeymapEditorProps {
   onClose?: () => void;
 }
 
 /** VS Code Keybindings Editor - follows keybindingsEditor.css spec */
-export function KeymapEditor(props: KeymapEditorProps) {
+export function KeymapEditor(_props: KeymapEditorProps) {
   const keymap = useKeymap();
   const [searchQuery, setSearchQuery] = createSignal("");
   const [selectedCategory, setSelectedCategory] = createSignal<string | null>(null);
diff --git a/cortex-gui/src/components/settings/SettingsSyncPanel.tsx b/cortex-gui/src/components/settings/SettingsSyncPanel.tsx
@@ -9,11 +9,9 @@ import {
 } from "@/context/SettingsSyncContext";
 import {
   Toggle,
-  Select,
   SectionHeader,
   FormGroup,
   Button,
-  Checkbox,
   InfoBox,
   Input,
   PasswordInput,
@@ -221,7 +219,7 @@ function AccountSetup() {
   const { enableSync } = useSettingsSync();
   const [provider, setProvider] = createSignal<"github" | "custom">("github");
   const [token, setToken] = createSignal("");
-  const [username, setUsername] = createSignal("");
+  const [username] = createSignal("");
   const [gistId, setGistId] = createSignal("");
   const [customEndpoint, setCustomEndpoint] = createSignal("");
   const [loading, setLoading] = createSignal(false);
diff --git a/cortex-gui/src/components/settings/ThemeCustomizer.tsx b/cortex-gui/src/components/settings/ThemeCustomizer.tsx
@@ -1,4 +1,4 @@
-import { createSignal, createMemo, Show, For, batch } from "solid-js";
+import { createSignal, createMemo, Show, For } from "solid-js";
 import {
   useTheme,
   ColorCategory,
@@ -8,8 +8,8 @@ import {
   SYNTAX_COLOR_TOKENS,
   TERMINAL_COLOR_TOKENS,
 } from "@/context/ThemeContext";
-import { SectionHeader, FormGroup, Button } from "./FormComponents";
-import { tokens } from '@/design-system/tokens';
+import { SectionHeader, Button } from "./FormComponents";
+// tokens imported for future use
 
 // ============================================================================
 // Types
@@ -693,8 +693,8 @@ export function ThemeCustomizer() {
               description="Customize the main interface colors"
               category="ui"
               tokens={UI_COLOR_TOKENS}
-              currentColors={colors()}
-              defaultColors={defaults().ui}
+              currentColors={colors() as unknown as Record<string, string>}
+              defaultColors={defaults().ui as unknown as Record<string, string>}
               customizations={colorCustomizations().ui}
               onColorChange={(token, color) => handleColorChange("ui", token, color)}
               onResetToken={(token) => handleResetToken("ui", token)}
@@ -708,8 +708,8 @@ export function ThemeCustomizer() {
               description="Customize code editor appearance"
               category="editor"
               tokens={EDITOR_COLOR_TOKENS}
-              currentColors={editorColors()}
-              defaultColors={defaults().editor}
+              currentColors={editorColors() as unknown as Record<string, string>}
+              defaultColors={defaults().editor as unknown as Record<string, string>}
               customizations={colorCustomizations().editor}
               onColorChange={(token, color) => handleColorChange("editor", token, color)}
               onResetToken={(token) => handleResetToken("editor", token)}
@@ -723,8 +723,8 @@ export function ThemeCustomizer() {
               description="Customize code syntax highlighting"
               category="syntax"
               tokens={SYNTAX_COLOR_TOKENS}
-              currentColors={syntaxColors()}
-              defaultColors={defaults().syntax}
+              currentColors={syntaxColors() as unknown as Record<string, string>}
+              defaultColors={defaults().syntax as unknown as Record<string, string>}
               customizations={colorCustomizations().syntax}
               onColorChange={(token, color) => handleColorChange("syntax", token, color)}
               onResetToken={(token) => handleResetToken("syntax", token)}
@@ -738,8 +738,8 @@ export function ThemeCustomizer() {
               description="Customize integrated terminal colors"
               category="terminal"
               tokens={TERMINAL_COLOR_TOKENS}
-              currentColors={terminalColors()}
-              defaultColors={defaults().terminal}
+              currentColors={terminalColors() as unknown as Record<string, string>}
+              defaultColors={defaults().terminal as unknown as Record<string, string>}
               customizations={colorCustomizations().terminal}
               onColorChange={(token, color) => handleColorChange("terminal", token, color)}
               onResetToken={(token) => handleResetToken("terminal", token)}
