first color revision

src/renderer/globals.css

@@ -50,73 +50,113 @@
 
 :root {
   --radius: 0.625rem;
-  --background: oklch(1 0 0);
-  --foreground: oklch(0.141 0.005 285.823);
-  --card: oklch(1 0 0);
-  --card-foreground: oklch(0.141 0.005 285.823);
-  --popover: oklch(1 0 0);
-  --popover-foreground: oklch(0.141 0.005 285.823);
-  --primary: oklch(0.21 0.006 285.885);
-  --primary-foreground: oklch(0.985 0 0);
-  --secondary: oklch(0.967 0.001 286.375);
-  --secondary-foreground: oklch(0.21 0.006 285.885);
-  --muted: oklch(0.967 0.001 286.375);
-  --muted-foreground: oklch(0.552 0.016 285.938);
-  --accent: oklch(0.967 0.001 286.375);
-  --accent-foreground: oklch(0.21 0.006 285.885);
+  
+  /* #f4edf3 - Light Pinkish-White Canvas */
+  --background: oklch(0.945 0.012 328.5);
+  /* #040404 - Almost Black Text */
+  --foreground: oklch(0.145 0 0);
+  
+  --card: oklch(0.945 0.012 328.5);
+  --card-foreground: oklch(0.145 0 0);
+  --popover: oklch(0.945 0.012 328.5);
+  --popover-foreground: oklch(0.145 0 0);
+  
+  /* #fbc881 - Golden Yellow Accent */
+  --primary: oklch(0.838 0.117 76.8);
+  --primary-foreground: oklch(0.145 0 0);
+  
+  /* #8a8ea9 - Slate Blue/Gray */
+  --secondary: oklch(0.627 0.041 274.5);
+  --secondary-foreground: oklch(0.945 0.012 328.5);
+  
+  /* #c8c3cd - Light Gray/Purple */
+  --muted: oklch(0.811 0.014 300.2);
+  --muted-foreground: oklch(0.627 0.041 274.5);
+  
+  --accent: oklch(0.811 0.014 300.2);
+  --accent-foreground: oklch(0.145 0 0);
+  
   --destructive: oklch(0.577 0.245 27.325);
   --destructive-foreground: oklch(0.985 0 0);
-  --border: oklch(0.92 0.004 286.32);
-  --input: oklch(0.92 0.004 286.32);
-  --ring: oklch(0.705 0.015 286.067);
+  
+  --border: oklch(0.811 0.014 300.2);
+  --input: oklch(0.811 0.014 300.2);
+  --ring: oklch(0.838 0.117 76.8);
+  
+  /* Kept your original chart colors */
   --chart-1: oklch(0.646 0.222 41.116);
   --chart-2: oklch(0.6 0.118 184.704);
   --chart-3: oklch(0.398 0.07 227.392);
   --chart-4: oklch(0.828 0.189 84.429);
   --chart-5: oklch(0.769 0.188 70.08);
-  --sidebar: oklch(0.985 0 0);
-  --sidebar-foreground: oklch(0.141 0.005 285.823);
-  --sidebar-primary: oklch(0.21 0.006 285.885);
-  --sidebar-primary-foreground: oklch(0.985 0 0);
-  --sidebar-accent: oklch(0.967 0.001 286.375);
-  --sidebar-accent-foreground: oklch(0.21 0.006 285.885);
-  --sidebar-border: oklch(0.92 0.004 286.32);
-  --sidebar-ring: oklch(0.705 0.015 286.067);
+  
+  /* Sidebar uses the custom palette */
+  --sidebar: oklch(0.945 0.012 328.5);
+  --sidebar-foreground: oklch(0.145 0 0);
+  --sidebar-primary: oklch(0.838 0.117 76.8);
+  --sidebar-primary-foreground: oklch(0.145 0 0);
+  --sidebar-accent: oklch(0.811 0.014 300.2);
+  --sidebar-accent-foreground: oklch(0.145 0 0);
+  --sidebar-border: oklch(0.811 0.014 300.2);
+  --sidebar-ring: oklch(0.838 0.117 76.8);
 }
 
 .dark {
-  --background: oklch(0.141 0.005 285.823);
+  /* #0c0c0c - Deepest black for the main canvas */
+  --background: oklch(0.15 0 0);
+  /* #fbfbfb - Crisp white for primary text */
   --foreground: oklch(0.985 0 0);
-  --card: oklch(0.21 0.006 285.885);
+  
+  /* Cards use the main background but are defined by borders */
+  --card: oklch(0.15 0 0);
   --card-foreground: oklch(0.985 0 0);
-  --popover: oklch(0.21 0.006 285.885);
+  --popover: oklch(0.15 0 0);
   --popover-foreground: oklch(0.985 0 0);
-  --primary: oklch(0.92 0.004 286.32);
-  --primary-foreground: oklch(0.21 0.006 285.885);
-  --secondary: oklch(0.274 0.006 286.033);
+  
+  /* #fbfbfb - Primary actions (like the active white circle menu item) */
+  --primary: oklch(0.985 0 0);
+  /* #0c0c0c - Dark text/icons inside primary buttons */
+  --primary-foreground: oklch(0.15 0 0);
+  
+  /* #323232 - Dark gray for secondary surfaces and button backgrounds */
+  --secondary: oklch(0.335 0 0);
+  /* #fbfbfb - White text on secondary surfaces */
   --secondary-foreground: oklch(0.985 0 0);
-  --muted: oklch(0.274 0.006 286.033);
-  --muted-foreground: oklch(0.705 0.015 286.067);
-  --accent: oklch(0.274 0.006 286.033);
+  
+  /* #323232 - Dark gray for muted backgrounds */
+  --muted: oklch(0.335 0 0);
+  /* #77797b - Mid gray for muted/secondary text (like "ELEVATE YOUR...") */
+  --muted-foreground: oklch(0.555 0 0);
+  
+  /* #323232 - Hover states */
+  --accent: oklch(0.335 0 0);
   --accent-foreground: oklch(0.985 0 0);
-  --destructive: oklch(0.704 0.191 22.216);
+  
+  --destructive: oklch(0.704 0.191 22.216); /* Kept original dark red */
   --destructive-foreground: oklch(0.985 0 0);
-  --border: oklch(1 0 0 / 10%);
-  --input: oklch(1 0 0 / 15%);
-  --ring: oklch(0.552 0.016 285.938);
+  
+  /* #323232 - Distinct dark gray borders for the cards/panels */
+  --border: oklch(0.335 0 0);
+  --input: oklch(0.335 0 0);
+  /* #bab7ba - Lighter gray for focus rings to stand out against dark borders */
+  --ring: oklch(0.765 0 0);
+  
+  /* Kept your original chart colors */
   --chart-1: oklch(0.488 0.243 264.376);
   --chart-2: oklch(0.696 0.17 162.48);
   --chart-3: oklch(0.769 0.188 70.08);
   --chart-4: oklch(0.627 0.265 303.9);
   --chart-5: oklch(0.645 0.246 16.439);
-  --sidebar: oklch(0.21 0.006 285.885);
+  
+  /* Sidebar mapped to the new sleek dark palette */
+  --sidebar: oklch(0.15 0 0);
   --sidebar-foreground: oklch(0.985 0 0);
-  --sidebar-primary: oklch(0.488 0.243 264.376);
-  --sidebar-primary-foreground: oklch(0.985 0 0);
-  --sidebar-accent: oklch(0.274 0.006 286.033);
+  --sidebar-primary: oklch(0.985 0 0);
+  --sidebar-primary-foreground: oklch(0.15 0 0);
+  --sidebar-accent: oklch(0.335 0 0);
   --sidebar-accent-foreground: oklch(0.985 0 0);
-  --sidebar-border: oklch(1 0 0 / 10%);
-  --sidebar-ring: oklch(0.552 0.016 285.938);
+  --sidebar-border: oklch(0.335 0 0);
+  --sidebar-ring: oklch(0.765 0 0);
 }
 
 @layer base {

src/renderer/hooks/useAIChat.ts

@@ -1,130 +0,0 @@
-import { useState, useCallback, useRef } from 'react';
-import { trpc } from '@/lib/trpc';
-
-export interface ChatMessage {
-  id: string;
-  role: 'user' | 'assistant';
-  content: string;
-  error?: boolean;
-}
-
-export interface ChatContext {
-  type: 'global' | 'project';
-  projectId?: string;
-  uiContext?: string;
-}
-
-export interface UseAIChatReturn {
-  messages: ChatMessage[];
-  input: string;
-  setInput: (v: string) => void;
-  isStreaming: boolean;
-  streamingContent: string;
-  handleSend: (overrideMessage?: string, overrideContext?: ChatContext) => void;
-  clearMessages: () => void;
-}
-
-export function useAIChat(defaultContext: ChatContext): UseAIChatReturn {
-  const [messages, setMessages] = useState<ChatMessage[]>([]);
-  const [input, setInput] = useState('');
-  const [isStreaming, setIsStreaming] = useState(false);
-  const [streamingContent, setStreamingContent] = useState('');
-
-  const streamingContentRef = useRef('');
-  const chatMutation = trpc.ai.chat.useMutation();
-
-  const clearMessages = useCallback(() => {
-    setMessages([]);
-    setStreamingContent('');
-    streamingContentRef.current = '';
-  }, []);
-
-  const handleSend = useCallback(
-    (overrideMessage?: string, overrideContext?: ChatContext) => {
-      const trimmed = (overrideMessage ?? input).trim();
-      if (!trimmed || isStreaming) return;
-
-      const userMsg: ChatMessage = {
-        id: crypto.randomUUID(),
-        role: 'user',
-        content: trimmed,
-      };
-
-      setMessages((prev) => [...prev, userMsg]);
-      if (!overrideMessage) setInput('');
-      setIsStreaming(true);
-      setStreamingContent('');
-      streamingContentRef.current = '';
-
-      const unsubscribe = window.electronAI.onStreamChunk(({ token, done }) => {
-        if (done) {
-          const finalContent = streamingContentRef.current;
-          setMessages((prev) => [
-            ...prev,
-            { id: crypto.randomUUID(), role: 'assistant', content: finalContent },
-          ]);
-          setStreamingContent('');
-          streamingContentRef.current = '';
-          setIsStreaming(false);
-          unsubscribe();
-          return;
-        }
-        streamingContentRef.current += token;
-        setStreamingContent(streamingContentRef.current);
-      });
-
-      const ctx = overrideContext ?? defaultContext;
-
-      chatMutation.mutate(
-        {
-          message: trimmed,
-          context: {
-            type: ctx.type,
-            ...(ctx.type === 'project' && ctx.projectId ? { projectId: ctx.projectId } : {}),
-            ...(ctx.uiContext ? { uiContext: ctx.uiContext } : {}),
-          },
-        },
-        {
-          onSuccess: (data) => {
-            if (data.error) {
-              unsubscribe();
-              setMessages((prev) => [
-                ...prev,
-                { id: crypto.randomUUID(), role: 'assistant', content: data.error!, error: true },
-              ]);
-              setStreamingContent('');
-              streamingContentRef.current = '';
-              setIsStreaming(false);
-            }
-          },
-          onError: (err) => {
-            unsubscribe();
-            setMessages((prev) => [
-              ...prev,
-              {
-                id: crypto.randomUUID(),
-                role: 'assistant',
-                content: err.message || 'An unexpected error occurred.',
-                error: true,
-              },
-            ]);
-            setStreamingContent('');
-            streamingContentRef.current = '';
-            setIsStreaming(false);
-          },
-        },
-      );
-    },
-    [input, isStreaming, defaultContext, chatMutation],
-  );
-
-  return {
-    messages,
-    input,
-    setInput,
-    isStreaming,
-    streamingContent,
-    handleSend,
-    clearMessages,
-  };
-}