refactor(habits-widget): add tabs to switch between counters and history

- Replace static counters and history sections with tabbed interface
- Add buttons to switch tabs and style active/inactive states
- Create switchHabitsTab function to toggle tab visibility and update styles
- Update DOM utils to support multiple class removals
- Expose switchHabitsTab function on global window object for event handling

Author: EndyKaufman

web/src/server/utils/dom-utils.ts

@@ -101,10 +101,10 @@ export function addClass(
  */
 export function removeClass(
   element: HTMLElement | null,
-  className: string
+  ...classNames: string[]
 ): void {
   if (element && element.classList) {
-    element.classList.remove(className);
+    element.classList.remove(...classNames);
   }
 }
 

web/src/server/widgets/habits-widget.ts

@@ -321,15 +321,32 @@ export class HabitsWidgetRender implements WidgetRender<HabitsWidgetType> {
             </button>
           </div>
           
-          <div class="grid grid-cols-2 sm:grid-cols-4 gap-4 mb-8" id="${modalId}-tracking-items-container">
-            <!-- Dynamic items will be inserted here by JavaScript -->
+          <!-- Tabs -->
+          <div class="flex border-b border-gray-200 mb-6">
+            <button class="tab-button py-2 px-4 font-medium text-gray-700 border-b-2 border-transparent hover:text-pastel-blue hover:border-pastel-blue focus:outline-none" 
+                    onclick="switchHabitsTab('${modalId}', 'counters')">
+              Counters
+            </button>
+            <button class="tab-button py-2 px-4 font-medium text-gray-700 border-b-2 border-transparent hover:text-pastel-blue hover:border-pastel-blue focus:outline-none" 
+                    onclick="switchHabitsTab('${modalId}', 'history')">
+              History
+            </button>
+          </div>
+          
+          <!-- Tab Content -->
+          <div id="${modalId}-counters-tab" class="tab-content">
+            <div class="grid grid-cols-2 sm:grid-cols-4 gap-4 mb-8" id="${modalId}-tracking-items-container">
+              <!-- Dynamic items will be inserted here by JavaScript -->
+            </div>
           </div>
           
-          <div class="border-t border-gray-100 pt-4">
-            <h3 class="text-lg font-bold text-gray-800 mb-3">History</h3>
-            <div id="${modalId}-consumption-list" class="max-h-60 overflow-y-auto pr-2">
-              <!-- Items will be added dynamically -->
-              <p class="text-gray-500 text-center py-4" id="${modalId}-no-consumption-message">No records</p>
+          <div id="${modalId}-history-tab" class="tab-content hidden">
+            <div class="border-t border-gray-100 pt-4">
+              <h3 class="text-lg font-bold text-gray-800 mb-3">History</h3>
+              <div id="${modalId}-consumption-list" class="max-h-60 overflow-y-auto pr-2">
+                <!-- Items will be added dynamically -->
+                <p class="text-gray-500 text-center py-4" id="${modalId}-no-consumption-message">No records</p>
+              </div>
             </div>
           </div>
         </div>

web/src/server/widgets/habits-widget.utils.ts

@@ -582,6 +582,64 @@ export function hideHabitsModal(
   }
 }
 
+/**
+ * Switches between tabs in the habits modal
+ * @param modalId - ID of the modal element
+ * @param tabName - Name of the tab to switch to ('counters' or 'history')
+ * @param scope - Document or element scope for DOM operations
+ */
+function switchHabitsTab(
+  modalId: string,
+  tabName: 'counters' | 'history',
+  scope: Document | HTMLElement = document
+): void {
+  // Hide all tab contents
+  const countersTab = getElementById(scope, `${modalId}-counters-tab`);
+  const historyTab = getElementById(scope, `${modalId}-history-tab`);
+
+  if (countersTab) {
+    if (tabName === 'counters') {
+      removeClass(countersTab, 'hidden');
+    } else {
+      addClass(countersTab, 'hidden');
+    }
+  }
+
+  if (historyTab) {
+    if (tabName === 'history') {
+      removeClass(historyTab, 'hidden');
+    } else {
+      addClass(historyTab, 'hidden');
+    }
+  }
+
+  // Update tab button styles
+  const tabButtons = scope.querySelectorAll('.tab-button');
+  tabButtons.forEach(button => {
+    removeClass(
+      button as HTMLElement,
+      'text-pastel-blue',
+      'border-pastel-blue'
+    );
+    addClass(button as HTMLElement, 'text-gray-700', 'border-transparent');
+  });
+
+  // Highlight active tab button
+  const activeButton = scope.querySelector(`button[onclick*="'${tabName}'"]`);
+  if (activeButton) {
+    removeClass(
+      activeButton as HTMLElement,
+      'text-gray-700',
+      'border-transparent'
+    );
+    addClass(
+      activeButton as HTMLElement,
+      'text-pastel-blue',
+      'border-pastel-blue'
+    );
+  }
+}
+
 export const linkFunctionsToWindow = (): void => {
   // Export all utility functions
   if (WINDOW) {
@@ -595,5 +653,6 @@ export const linkFunctionsToWindow = (): void => {
     WINDOW.initTrackingItems = initTrackingItems;
     WINDOW.showHabitsModal = showHabitsModal;
     WINDOW.hideHabitsModal = hideHabitsModal;
+    WINDOW.switchHabitsTab = switchHabitsTab; // Add the new function
   }
 };