From 72a9ac225747a985d03044b960c04f995c344d13 Mon Sep 17 00:00:00 2001
From: lars-berger <lars.berger@yahoo.com>
Date: Wed, 27 Nov 2024 22:39:29 +0800
Subject: [PATCH] feat: add count of how many widgets are open to settings UI
 sidebar

---
 .../src/configs/WidgetConfigSidebar.tsx       | 38 ++++++++++++++++---
 .../settings-ui/src/configs/WidgetConfigs.tsx |  1 +
 2 files changed, 33 insertions(+), 6 deletions(-)

diff --git a/packages/settings-ui/src/configs/WidgetConfigSidebar.tsx b/packages/settings-ui/src/configs/WidgetConfigSidebar.tsx
index bed659fa..d2e6fcd4 100644
--- 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,6 +35,17 @@ 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>
@@ -40,9 +53,9 @@ export function WidgetConfigSidebar(props: WidgetConfigSidebarProps) {
         <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>
@@ -50,7 +63,7 @@ export function WidgetConfigSidebar(props: WidgetConfigSidebarProps) {
                   {([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
index 780023cf..31ba7a9a 100644
--- 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}