Frontend revamp: Animal Crossing × Claude design with shadcn components

- New palette: deep nook green sidebar, sage user bubbles, warm cream answer cards
- shadcn-style UI primitives: Button (CVA variants), Textarea, Input, Badge, Table
- cn() utility (clsx + tailwind-merge)
- lucide-react icons throughout (no more text-only buttons)
- Simba mode: custom CSS toggle switch
- Send button: circular amber button with arrow icon
- AnswerBubble: amber gradient accent bar, loading dots animation
- QuestionBubble: sage green pill with rounded-3xl
- ToolBubble: centered leaf-green badge pill
- ConversationList: active item highlighting, proper selectedId prop
- Sidebar: collapsible with PanelLeftClose/Open icons, icon-only collapsed state
- LoginScreen: decorative background blobs, refined rounded card
- AdminPanel: proper icon buttons, leaf-green save confirmation
- Fonts: Playfair Display (brand) + Nunito 800 weight added

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

raggr-frontend/src/components/ConversationList.tsx

@@ -1,6 +1,8 @@
 import { useState, useEffect } from "react";
-
+import { Plus } from "lucide-react";
+import { cn } from "../lib/utils";
 import { conversationService } from "../api/conversationService";
+
 type Conversation = {
   title: string;
   id: string;
@@ -10,60 +12,72 @@ type ConversationProps = {
   conversations: Conversation[];
   onSelectConversation: (conversation: Conversation) => void;
   onCreateNewConversation: () => void;
+  selectedId?: string;
 };
 
 export const ConversationList = ({
   conversations,
   onSelectConversation,
   onCreateNewConversation,
+  selectedId,
 }: ConversationProps) => {
-  const [conservations, setConversations] = useState(conversations);
+  const [items, setItems] = useState(conversations);
 
   useEffect(() => {
-    const loadConversations = async () => {
+    const load = async () => {
       try {
-        let fetchedConversations =
-          await conversationService.getAllConversations();
-
-        if (conversations.length == 0) {
+        let fetched = await conversationService.getAllConversations();
+        if (fetched.length === 0) {
           await conversationService.createConversation();
-          fetchedConversations =
-            await conversationService.getAllConversations();
+          fetched = await conversationService.getAllConversations();
         }
-        setConversations(
-          fetchedConversations.map((conversation) => ({
-            id: conversation.id,
-            title: conversation.name,
-          })),
-        );
-      } catch (error) {
-        console.error("Failed to load messages:", error);
+        setItems(fetched.map((c) => ({ id: c.id, title: c.name })));
+      } catch (err) {
+        console.error("Failed to load conversations:", err);
       }
     };
-    loadConversations();
+    load();
   }, []);
 
+  // Keep in sync when parent updates conversations
+  useEffect(() => {
+    setItems(conversations);
+  }, [conversations]);
+
   return (
-    <div className="bg-stone-200 rounded-md p-3 sm:p-4 flex flex-col gap-1">
-      {conservations.map((conversation) => {
+    <div className="flex flex-col gap-1">
+      {/* New thread button */}
+      <button
+        onClick={onCreateNewConversation}
+        className={cn(
+          "flex items-center gap-2 w-full px-3 py-2 rounded-xl",
+          "text-sm text-cream/60 hover:text-cream hover:bg-white/8",
+          "transition-all duration-150 cursor-pointer mb-1",
+        )}
+      >
+        <Plus size={14} strokeWidth={2.5} />
+        <span>New thread</span>
+      </button>
+
+      {/* Conversation items */}
+      {items.map((conv) => {
+        const isActive = conv.id === selectedId;
         return (
-          <div
-            key={conversation.id}
-            className="bg-stone-200 hover:bg-stone-300 cursor-pointer rounded-md p-3 min-h-[44px] flex items-center"
-            onClick={() => onSelectConversation(conversation)}
+          <button
+            key={conv.id}
+            onClick={() => onSelectConversation(conv)}
+            className={cn(
+              "w-full px-3 py-2 rounded-xl text-left",
+              "text-sm truncate transition-all duration-150 cursor-pointer",
+              isActive
+                ? "bg-white/12 text-cream font-medium"
+                : "text-cream/60 hover:text-cream hover:bg-white/8",
+            )}
           >
-            <p className="text-sm sm:text-base truncate w-full">
-              {conversation.title}
-            </p>
-          </div>
+            {conv.title}
+          </button>
         );
       })}
-      <div
-        className="bg-stone-200 hover:bg-stone-300 cursor-pointer rounded-md p-3 min-h-[44px] flex items-center"
-        onClick={() => onCreateNewConversation()}
-      >
-        <p className="text-sm sm:text-base"> + Start a new thread</p>
-      </div>
     </div>
   );
 };