feat: add count of how many widgets are open to settings UI sidebar

glzr-io · Nov 27, 2024 · 72a9ac2 · 72a9ac2
1 parent 901c6b6
commit 72a9ac2
Show file tree

Hide file tree

Showing 2 changed files with 33 additions and 6 deletions.
diff --git a/packages/settings-ui/src/configs/WidgetConfigSidebar.tsx b/packages/settings-ui/src/configs/WidgetConfigSidebar.tsx
@@ -1,15 +1,17 @@
 import {
+  Badge,
   cn,
   Collapsible,
   CollapsibleContent,
   CollapsibleTrigger,
 } from '@glzr/components';
 import { IconChevronDown, IconDiamonds } from '@tabler/icons-solidjs';
-import { createMemo, For } from 'solid-js';
-import { WidgetConfig } from 'zebar';
+import { createMemo, For, Show } from 'solid-js';
+import { Widget, WidgetConfig } from 'zebar';
 
 export interface WidgetConfigSidebarProps {
   configs: Record<string, WidgetConfig>;
+  widgetStates: Record<string, Widget>;
   selectedConfig: WidgetConfig | null;
   selectedConfigPath: string | null;
   onSelect: (configPath: string) => void;
@@ -33,24 +35,35 @@ export function WidgetConfigSidebar(props: WidgetConfigSidebarProps) {
     return tree;
   });
 
+  const widgetCounts = createMemo(() => {
+    const counts = new Map<string, number>();
+
+    Object.values(props.widgetStates).forEach(state => {
+      const current = counts.get(state.configPath) ?? 0;
+      counts.set(state.configPath, current + 1);
+    });
+
+    return counts;
+  });
+
   return (
     <div class="border-r p-4 h-full w-[clamp(200px,20vw,300px)]">
       <h2 class="text-lg font-semibold mb-2">Widget configs</h2>
       <div class="space-y-1">
         <For each={Object.entries(configTree())}>
           {([folder, configs]) => (
             <Collapsible defaultOpen>
-              <CollapsibleTrigger class="flex items-center space-x-2 py-1 w-full text-left">
-                <IconChevronDown class="size-3" />
-                <span class="truncate">{folder}</span>
+              <CollapsibleTrigger class="flex items-center space-x-2 py-2 w-full text-left">
+                <IconChevronDown class="size-3.5" />
+                <span class="font-medium truncate">{folder}</span>
               </CollapsibleTrigger>
 
               <CollapsibleContent>
                 <For each={Object.entries(configs)}>
                   {([configPath]) => (
                     <div
                       class={cn(
-                        'flex items-center pl-3 py-1 space-x-2 rounded-sm cursor-pointer',
+                        'flex items-center pl-3 py-1 space-x-2 rounded-sm cursor-pointer hover:bg-accent transition-colors',
                         props.selectedConfigPath === configPath &&
                           'bg-accent',
                       )}
@@ -62,6 +75,19 @@ export function WidgetConfigSidebar(props: WidgetConfigSidebarProps) {
                           .split(/[/\\]/)
                           .at(-1)
                           .replace('.zebar.json', '')}
+
+                        <Show when={widgetCounts().get(configPath)}>
+                          <Badge
+                            variant={
+                              props.selectedConfigPath === configPath
+                                ? 'outline'
+                                : 'secondary'
+                            }
+                            class="ml-1.5"
+                          >
+                            {widgetCounts().get(configPath)}
+                          </Badge>
+                        </Show>
                       </span>
                     </div>
                   )}

diff --git a/packages/settings-ui/src/configs/WidgetConfigs.tsx b/packages/settings-ui/src/configs/WidgetConfigs.tsx
@@ -172,6 +172,7 @@ export function WidgetConfigs() {
       {/* Sidebar. */}
       <WidgetConfigSidebar
         configs={configs()}
+        widgetStates={widgetStates()}
         selectedConfig={selectedConfig()}
         selectedConfigPath={selectedConfigPath()}
         onSelect={setSelectedConfigPath}