ui-v2 cleanup

.husky/pre-commit

@@ -5,3 +5,9 @@ if git diff --cached --name-only | grep -q "^ui/desktop/"; then
   . "$(dirname -- "$0")/_/husky.sh"
   cd ui/desktop && npx lint-staged
 fi
+
+# Only auto-format ui-v2 TS code if relevant files are modified
+if git diff --cached --name-only | grep -q "^ui-v2/"; then
+  . "$(dirname -- "$0")/_/husky.sh"
+  cd ui-v2 && npx lint-staged
+fi

ui-v2/.stylelintrc.json

@@ -4,9 +4,11 @@
     "at-rule-no-unknown": [
       true,
       {
-        "ignoreAtRules": ["tailwind", "apply", "variants", "responsive", "screen"]
+        "ignoreAtRules": ["tailwind", "apply", "variants", "responsive", "screen", "theme", "custom-variant"]
       }
     ],
+    "at-rule-no-deprecated": null,
+    "custom-property-pattern": null,
     "no-descending-specificity": null
   }
 }

ui-v2/electron/main.ts

@@ -27,7 +27,7 @@ async function createWindow() {
   // Create the browser window with headless options when needed
   const mainWindow = new BrowserWindow({
     titleBarStyle: process.platform === 'darwin' ? 'hidden' : 'default',
-    trafficLightPosition: process.platform === 'darwin' ? { x: 16, y: 10 } : undefined,
+    ...(process.platform === 'darwin' ? { trafficLightPosition: { x: 16, y: 10 } } : {}),
     frame: false,
     width: 1200,
     height: 800,

ui-v2/eslint.config.cjs

@@ -89,8 +89,18 @@ module.exports = [
         navigator: 'readonly',
         console: 'readonly',
         setTimeout: 'readonly',
-        Blob: 'readonly',
+        setInterval: 'readonly',
+        clearTimeout: 'readonly',
+        clearInterval: 'readonly',
+        requestAnimationFrame: 'readonly',
+        localStorage: 'readonly',
+        HTMLDivElement: 'readonly',
+        HTMLTextAreaElement: 'readonly',
+        HTMLFormElement: 'readonly',
         HTMLInputElement: 'readonly',
+        MutationObserver: 'readonly',
+        IntersectionObserver: 'readonly',
+        Blob: 'readonly',
         SVGSVGElement: 'readonly',
       },
     },
@@ -106,6 +116,15 @@ module.exports = [
       },
     },
   },
+  // UI components (shadcn/ui) - more relaxed rules
+  {
+    files: ['src/components/ui/**/*.{ts,tsx}'],
+    rules: {
+      '@typescript-eslint/explicit-module-boundary-types': 'off',
+      '@typescript-eslint/no-explicit-any': 'off',
+      'react/prop-types': 'off',
+    },
+  },
   // Test configuration
   {
     files: ['**/*.test.{ts,tsx}', 'src/test/**/*.{ts,tsx}'],

ui-v2/lib/utils.ts

@@ -1,6 +1,6 @@
-import { clsx, type ClassValue } from "clsx"
-import { twMerge } from "tailwind-merge"
+import { clsx, type ClassValue } from 'clsx';
+import { twMerge } from 'tailwind-merge';
 
-export function cn(...inputs: ClassValue[]) {
-  return twMerge(clsx(inputs))
+export function cn(...inputs: ClassValue[]): string {
+  return twMerge(clsx(inputs));
 }

ui-v2/package.json

@@ -29,11 +29,12 @@
     "prettier:fix": "prettier --write \"src/**/*.{ts,tsx,js,jsx,css}\" \"electron/**/*.{ts,tsx,js,jsx,css}\"",
     "format": "npm run prettier:fix && npm run lint:style:fix",
     "check-all": "npm run typecheck && npm run lint && npm run prettier",
-    "prepare": "cd ../.. && husky install"
+    "prepare": "cd .. && npx husky"
   },
   "dependencies": {
     "@radix-ui/react-tooltip": "^1.2.7",
     "@tanstack/react-router": "^1.120.5",
+    "@tanstack/react-router-devtools": "^1.120.11",
     "@tanstack/router": "^0.0.1-beta.53",
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",

ui-v2/src/components/BrandCard.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import { ReactElement } from 'react';
 
 interface BrandCardProps {
   date?: Date;
@@ -7,14 +7,14 @@ interface BrandCardProps {
 
 // Array of congratulatory messages for past days
 const pastDayMessages = [
-  { title: "Great work!", message: "You accomplished so much" },
-  { title: "Well done!", message: "Another successful day" },
-  { title: "Fantastic job!", message: "Making progress every day" },
-  { title: "Nice one!", message: "Another day in the books" },
-  { title: "Awesome work!", message: "Keep up the momentum" }
+  { title: 'Great work!', message: 'You accomplished so much' },
+  { title: 'Well done!', message: 'Another successful day' },
+  { title: 'Fantastic job!', message: 'Making progress every day' },
+  { title: 'Nice one!', message: 'Another day in the books' },
+  { title: 'Awesome work!', message: 'Keep up the momentum' },
 ];
 
-export default function BrandCard({ date, className = '' }: BrandCardProps) {
+export default function BrandCard({ date, className = '' }: BrandCardProps): ReactElement {
   const isToday = date ? new Date().toDateString() === date.toDateString() : true;
 
   // Get a consistent message for each date
@@ -28,15 +28,12 @@ export default function BrandCard({ date, className = '' }: BrandCardProps) {
   const pastMessage = date ? getPastDayMessage(date) : pastDayMessages[0];
 
   return (
-    <div 
+    <div
       className={`
         flex flex-col justify-between 
         p-4 
         w-[366px] h-[256px] 
-        ${isToday 
-          ? 'bg-textStandard dark:bg-white' 
-          : 'bg-gray-400/40 dark:bg-gray-400/40'
-        }
+        ${isToday ? 'bg-textStandard dark:bg-white' : 'bg-gray-400/40 dark:bg-gray-400/40'}
         rounded-[18px]
         relative
         overflow-hidden
@@ -49,13 +46,16 @@ export default function BrandCard({ date, className = '' }: BrandCardProps) {
       {/* Content */}
       <div className="relative z-10 w-full">
         {/* Logo */}
-        <div className={`
+        <div
+          className={`
           w-6 h-6 
-          ${isToday 
-            ? '[&_path]:fill-current text-white dark:text-gray-900'
-            : '[&_path]:fill-current text-white/60 dark:text-white/60'
+          ${
+            isToday
+              ? '[&_path]:fill-current text-white dark:text-gray-900'
+              : '[&_path]:fill-current text-white/60 dark:text-white/60'
           }
-        `}>
+        `}
+        >
           <svg width="24" height="23" viewBox="0 0 24 23" xmlns="http://www.w3.org/2000/svg">
             <g>
               <path d="M0.5 10.5733C0.5 8.19815 2.41385 6.27271 4.77471 6.27271H6.67984C9.04069 6.27271 10.9545 8.19816 10.9545 10.5733V18.6994C10.9545 21.0745 9.04069 23 6.67983 23H4.77471C2.41385 23 0.5 21.0745 0.5 18.6994V10.5733Z" />
@@ -79,7 +79,7 @@ export default function BrandCard({ date, className = '' }: BrandCardProps) {
         {isToday ? (
           <>
             {/* Today's content */}
-            <h2 
+            <h2
               className={`
                 font-['Cash_Sans'] font-semibold text-base
                 text-white dark:text-gray-600
@@ -91,7 +91,7 @@ export default function BrandCard({ date, className = '' }: BrandCardProps) {
               Good morning
             </h2>
 
-            <h1 
+            <h1
               style={{ fontWeight: 200 }}
               className={`
                 font-['Cash_Sans'] text-[32px]
@@ -101,13 +101,13 @@ export default function BrandCard({ date, className = '' }: BrandCardProps) {
                 transition-colors
               `}
             >
-              You've got 3 major updates this morning
+              You&apos;ve got 3 major updates this morning
             </h1>
           </>
         ) : (
           <>
             {/* Past/Future date content */}
-            <h2 
+            <h2
               className={`
                 font-['Cash_Sans'] font-semibold text-base
                 text-white/60 dark:text-white/60
@@ -119,7 +119,7 @@ export default function BrandCard({ date, className = '' }: BrandCardProps) {
               {pastMessage?.title || 'Hello'}
             </h2>
 
-            <h1 
+            <h1
               style={{ fontWeight: 200 }}
               className={`
                 font-['Cash_Sans'] text-[32px]