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>
This commit is contained in:
ryan
2026-03-11 09:22:34 -04:00
parent 53b2b3b366
commit d1cb55ff1a
17 changed files with 2439 additions and 3327 deletions
@@ -0,0 +1,19 @@
import { cn } from "../../lib/utils";
export interface InputProps
extends React.InputHTMLAttributes<HTMLInputElement> {}
export const Input = ({ className, ...props }: InputProps) => {
return (
<input
className={cn(
"flex h-8 w-full rounded-lg border border-sand bg-cream px-3 py-1",
"text-sm text-charcoal placeholder:text-warm-gray/50",
"focus:outline-none focus:ring-2 focus:ring-amber-soft/60",
"disabled:cursor-not-allowed disabled:opacity-50",
className,
)}
{...props}
/>
);
};