fix(gui): clean up unused imports and variables in UI components (#306)

echobt · factorydroid · web-flow · commit bfa60e71b645 · 2026-01-27T17:56:39.000+01:00
AGENT 7 Analysis - UI &amp; Extensions TypeScript Cleanup:

- FileIcon.tsx: Remove unused 'Show' import
- ExtensionCard.tsx: Remove unused 'formatNumber', 'StarRating' function, and 'For' import
- ExtensionMarketplace.tsx: Remove unused 'ViewportMode' import
- ExtensionsPanel.tsx: Remove unused 'setViewportMode' setter and 'hasUninstalledRecommendations'
- ComponentPreview.tsx: Remove unused 'Theme' type and 'colors' variable, replace 'key' prop with 'data-reset-key'
- MarkdownPreview.tsx: Remove unused 'batch' and 'JSX' imports, prefix unused '_ordered' param and '_exportToPdf' function

Co-authored-by: Droid Agent &lt;droid@factory.ai&gt;
diff --git a/cortex-gui/src/components/dev/ComponentPreview.tsx b/cortex-gui/src/components/dev/ComponentPreview.tsx
@@ -10,7 +10,7 @@ import {
   onMount,
 } from "solid-js";
 import { Icon } from "../ui/Icon";
-import { useTheme, Theme } from "@/context/ThemeContext";
+import { useTheme } from "@/context/ThemeContext";
 
 // Component metadata type
 interface ComponentMeta {
@@ -533,7 +533,7 @@ function getCategories(): string[] {
 
 // Component Preview Panel
 export function ComponentPreview() {
-  const { theme, setTheme, isDark, colors } = useTheme();
+  const { theme, setTheme, isDark } = useTheme();
   const [isOpen, setIsOpen] = createSignal(false);
   const [searchQuery, setSearchQuery] = createSignal("");
   const [selectedComponent, setSelectedComponent] = createSignal<ComponentMeta | null>(null);
@@ -1025,7 +1025,7 @@ export function ComponentPreview() {
                             style={{ "min-height": "inherit" }}
                           >
                             {/* Render component with current props */}
-                            <div key={resetKey()}>
+                            <div data-reset-key={resetKey()}>
                               {(() => {
                                 const Component = comp().component;
                                 return <Component {...componentProps()} />;
diff --git a/cortex-gui/src/components/extensions/ExtensionCard.tsx b/cortex-gui/src/components/extensions/ExtensionCard.tsx
@@ -1,4 +1,4 @@
-import { Component, Show, createSignal, For } from "solid-js";
+import { Component, Show, createSignal } from "solid-js";
 import { Extension, MarketplaceExtension, ExtensionUpdateInfo } from "../../context/ExtensionsContext";
 import { Card, Text, Button, Badge } from "@/components/ui";
 import { tokens } from "@/design-system/tokens";
@@ -109,82 +109,6 @@ export const ExtensionCard: Component<ExtensionCardProps> = (props) => {
   const hasUpdate = () => !!props.updateInfo;
   const isUpdating = () => !!props.isUpdating;
 
-  const formatNumber = (num: number): string => {
-    if (num >= 1000000) {
-      return (num / 1000000).toFixed(1) + "M";
-    }
-    if (num >= 1000) {
-      return (num / 1000).toFixed(1) + "K";
-    }
-    return num.toString();
-  };
-
-  // Star rating component - VS Code specifications
-  // 3px margin-left between stars, 0.75 opacity for empty stars
-  const StarRating = (rating: number) => {
-    const fullStars = Math.floor(rating);
-    const hasHalfStar = rating % 1 >= 0.5;
-    const emptyStars = 5 - fullStars - (hasHalfStar ? 1 : 0);
-    return (
-      <div class="extension-ratings" style={{ display: "flex", "align-items": "center" }}>
-        <For each={Array(fullStars).fill(0)}>
-          {(_, index) => (
-            <svg
-              class="star star-full"
-              width="12"
-              height="12"
-              viewBox="0 0 24 24"
-              fill={tokens.colors.semantic.warning}
-              stroke="none"
-              style={{ "margin-left": index() > 0 ? "3px" : "0" }}
-            >
-              <polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2" />
-            </svg>
-          )}
-        </For>
-        <Show when={hasHalfStar}>
-          <svg
-            class="star star-half"
-            width="12"
-            height="12"
-            viewBox="0 0 24 24"
-            style={{ "margin-left": fullStars > 0 ? "3px" : "0" }}
-          >
-            <defs>
-              <linearGradient id="half-star-small">
-                <stop offset="50%" stop-color={tokens.colors.semantic.warning} />
-                <stop offset="50%" stop-color={tokens.colors.surface.canvas} />
-              </linearGradient>
-            </defs>
-            <polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2" fill="url(#half-star-small)" />
-          </svg>
-        </Show>
-        <For each={Array(emptyStars).fill(0)}>
-          {(_, index) => (
-            <svg
-              class="star star-empty"
-              width="12"
-              height="12"
-              viewBox="0 0 24 24"
-              fill={tokens.colors.surface.canvas}
-              stroke={tokens.colors.text.muted}
-              stroke-width="1"
-              style={{
-                "margin-left": "3px",
-                opacity: 0.75  /* VS Code: empty stars at 0.75 opacity */
-              }}
-            >
-              <polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2" />
-            </svg>
-          )}
-        </For>
-        <span class="count" style={{ "font-size": "12px", color: tokens.colors.text.muted, "margin-left": "6px" }}>
-          {rating.toFixed(1)}
-        </span>
-      </div>
-    );
-  };
-
   // VS Code-style list view (60px height, compact)
   if (isListView()) {
     return (
diff --git a/cortex-gui/src/components/extensions/ExtensionMarketplace.tsx b/cortex-gui/src/components/extensions/ExtensionMarketplace.tsx
@@ -1,6 +1,6 @@
 import { Component, Show, For, createSignal, createMemo, onMount } from "solid-js";
 import { useExtensions, Extension, MarketplaceExtension } from "../../context/ExtensionsContext";
-import { ExtensionCard, ViewMode, ViewportMode } from "./ExtensionCard";
+import { ExtensionCard, ViewMode } from "./ExtensionCard";
 import { ExtensionDetail, ExtensionDetailData, MOCK_EXTENSION_DETAIL } from "./ExtensionDetail";
 import { tokens } from "@/design-system/tokens";
 import "../../styles/extensions.css";
diff --git a/cortex-gui/src/components/extensions/ExtensionsPanel.tsx b/cortex-gui/src/components/extensions/ExtensionsPanel.tsx
@@ -39,7 +39,6 @@ export const ExtensionsPanel: Component<ExtensionsPanelProps> = (props) => {
   const {
     recommendations,
     uninstalledRecommendations,
-    hasUninstalledRecommendations,
     loading: recommendationsLoading,
     installAllRecommendations,
     reloadRecommendations,
@@ -48,7 +47,7 @@ export const ExtensionsPanel: Component<ExtensionsPanelProps> = (props) => {
   const [searchQuery, setSearchQuery] = createSignal("");
   const [filter, setFilter] = createSignal<FilterType>("all");
   // VS Code responsive breakpoints: normal, narrow, mini
-  const [viewportMode, setViewportMode] = createSignal<ViewportMode>("normal");
+  const [viewportMode] = createSignal<ViewportMode>("normal");
   const [installingAll, setInstallingAll] = createSignal(false);
   const [updatingAll, setUpdatingAll] = createSignal(false);
 
diff --git a/cortex-gui/src/components/ui/FileIcon.tsx b/cortex-gui/src/components/ui/FileIcon.tsx
@@ -1,4 +1,4 @@
-import { createMemo, Show } from "solid-js";
+import { createMemo } from "solid-js";
 import { getFileIcon, getFolderIconExpanded } from "@/utils/fileIcons";
 
 interface FileIconProps {
diff --git a/cortex-gui/src/components/viewers/MarkdownPreview.tsx b/cortex-gui/src/components/viewers/MarkdownPreview.tsx
@@ -6,8 +6,6 @@ import {
   createMemo,
   onMount,
   onCleanup,
-  batch,
-  type JSX,
 } from "solid-js";
 import { marked, type Token, type Tokens } from "marked";
 import { Icon } from "../ui/Icon";
@@ -382,7 +380,7 @@ class MarkdownRenderer {
     </div>`;
   }
 
-  private async renderListItem(item: Tokens.ListItem, ordered: boolean): Promise<string> {
+  private async renderListItem(item: Tokens.ListItem, _ordered: boolean): Promise<string> {
     const checkbox = item.task
       ? `<input type="checkbox" class="md-task-checkbox" ${item.checked ? "checked" : ""} disabled />`
       : "";
@@ -624,7 +622,8 @@ export function MarkdownPreview(props: MarkdownPreviewProps) {
     URL.revokeObjectURL(url);
   }
 
-  async function exportToPdf(): Promise<void> {
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  async function _exportToPdf(): Promise<void> {
     const content = parsedContent();
     const printWindow = window.open("", "_blank");
     if (!printWindow) {

Original file line number	Diff line number	Diff line change
`@@ -1,4 +1,4 @@`
`1`		`-import { createMemo, Show } from "solid-js";`
	`1`	`+import { createMemo } from "solid-js";`
`2`	`2`	`import { getFileIcon, getFolderIconExpanded } from "@/utils/fileIcons";`
`3`	`3`
`4`	`4`	`interface FileIconProps {`