From ae6a07e5a6c1199a30320d726f7b41e39fd181ef Mon Sep 17 00:00:00 2001 From: Che <30403707+Che-Zhu@users.noreply.github.com> Date: Thu, 29 Jan 2026 17:30:22 +0800 Subject: [PATCH 1/3] refactor: reorganize project structure - Move actions/ to lib/actions/ for better code organization - Move .claude/commands/ to docs/commands/ for documentation consolidation - Remove obsolete design_specification.md and style.md - Update import paths in components --- components/home-page.tsx | 2 +- .../terminal/toolbar/directory-selector.tsx | 2 +- {.claude => docs}/commands/changelog.md | 0 {.claude => docs}/commands/usecase.md | 0 docs/design_specification.md | 198 ------------------ docs/style.md | 163 -------------- {actions => lib/actions}/sandbox.ts | 0 {actions => lib/actions}/sealos-auth.ts | 0 {actions => lib/actions}/types.ts | 0 9 files changed, 2 insertions(+), 363 deletions(-) rename {.claude => docs}/commands/changelog.md (100%) rename {.claude => docs}/commands/usecase.md (100%) delete mode 100644 docs/design_specification.md delete mode 100644 docs/style.md rename {actions => lib/actions}/sandbox.ts (100%) rename {actions => lib/actions}/sealos-auth.ts (100%) rename {actions => lib/actions}/types.ts (100%) diff --git a/components/home-page.tsx b/components/home-page.tsx index 849eb21..e98d1c5 100644 --- a/components/home-page.tsx +++ b/components/home-page.tsx @@ -6,7 +6,7 @@ import Link from 'next/link'; import { useRouter } from 'next/navigation'; import { useSession } from 'next-auth/react'; -import { authenticateWithSealos } from '@/actions/sealos-auth'; +import { authenticateWithSealos } from '@/lib/actions/sealos-auth'; import { MatrixRain } from '@/components/MatrixRain'; import { Button } from '@/components/ui/button'; import { useSealos } from '@/provider/sealos'; diff --git a/components/terminal/toolbar/directory-selector.tsx b/components/terminal/toolbar/directory-selector.tsx index 0eeb864..f3b68fb 100644 --- a/components/terminal/toolbar/directory-selector.tsx +++ b/components/terminal/toolbar/directory-selector.tsx @@ -3,7 +3,7 @@ import { useEffect,useState } from 'react'; import { ChevronDown, Folder, Loader2 } from 'lucide-react'; -import { runCommand } from '@/actions/sandbox'; +import { runCommand } from '@/lib/actions/sandbox'; import { DropdownMenu, DropdownMenuContent, diff --git a/.claude/commands/changelog.md b/docs/commands/changelog.md similarity index 100% rename from .claude/commands/changelog.md rename to docs/commands/changelog.md diff --git a/.claude/commands/usecase.md b/docs/commands/usecase.md similarity index 100% rename from .claude/commands/usecase.md rename to docs/commands/usecase.md diff --git a/docs/design_specification.md b/docs/design_specification.md deleted file mode 100644 index 3bf49db..0000000 --- a/docs/design_specification.md +++ /dev/null @@ -1,198 +0,0 @@ -# Fulling Design Specification - -This document defines the visual design standards for the Fulling project. All pages and components must adhere to this specification. - ---- - -## Design Philosophy - -### Core Principles - -1. **VS Code-Inspired Dark Theme** — Familiar interface for developers -2. **Two-Section Sidebar Architecture** — Visual separation between navigation and project areas -3. **Semantic Naming** — CSS variables named by purpose for easy maintenance -4. **WCAG Accessibility** — Contrast ratios meet accessibility standards - -### Visual Hierarchy - -| Level | Background | Usage | -|-------|------------|-------| -| Main Background | `#1E1E1E` | Editor/content area | -| Panel Background | `#252526` | Cards, modals, tab containers | -| Sidebar Navigation | `#333333` | Primary navigation area | -| Sidebar Project | `#242426` | Project list area | - ---- - -## Color System - -### Primary Colors - -| Variable | Value | Usage | -|----------|-------|-------| -| `--primary` | `#10639D` | Brand color (buttons, links, accents) | -| `--primary-hover` | `#155a8a` | Primary hover state | -| `--primary-foreground` | `#FFFFFF` | Text on primary elements | - -### Functional Colors - -| Variable | Usage | -|----------|-------| -| `--destructive` | Delete actions, error states (red spectrum) | -| `--accent` | Hover states, highlights (`#2B2D2E`) | -| `--muted` | Supporting element backgrounds | -| `--muted-foreground` | Secondary text (`#808080`) | - -### Text Colors - -| Variable | Value | Usage | -|----------|-------|-------| -| `--foreground` | `#CCCCCC` | Primary text | -| `--muted-foreground` | `oklch(0.72 0 0)` | Secondary text, descriptions | -| `--card-foreground` | `#FFFFFF` | Card titles only | - -### Borders - -| Variable | Value | Usage | -|----------|-------|-------| -| `--border` | `#3E3E3E` | General borders | -| `--input` | `oklch(0.37 0 0)` | Input field borders | -| `--ring` | `oklch(0.62 0.19 259.76)` | Focus ring | - ---- - -## Theme Configuration - -The project supports two dark themes, switched via CSS class: - -### `.dark` (Default) -- Primary: `#10639D` (deep blue) -- Suitable for: General use - -### `.stealth` (Alternate) -- Primary: `#007acc` (VS Code blue) -- Suitable for: Pure VS Code experience - -> **Note**: Light theme (`:root`) definitions exist but are incomplete. Do not use. - ---- - -## Typography - -| Variable | Font | Usage | -|----------|------|-------| -| `--font-mono` | JetBrains Mono, monospace | Code, terminal | -| `--font-serif` | Source Serif 4, serif | Headings, emphasis | - ---- - -## Border Radius System - -| Variable | Computed Value | Usage | -|----------|---------------|-------| -| `--radius` | `0.375rem` | Base radius | -| `--radius-sm` | `calc(var(--radius) - 4px)` | Small elements | -| `--radius-md` | `calc(var(--radius) - 2px)` | Medium elements | -| `--radius-lg` | `var(--radius)` | Large elements | -| `--radius-xl` | `calc(var(--radius) + 4px)` | Cards, modals | - ---- - -## Shadow System - -Multi-level shadows optimized for dark theme: - -| Variable | Usage | -|----------|-------| -| `--shadow-xs` | Minimal shadow | -| `--shadow-sm` | Small shadow (default buttons) | -| `--shadow-md` | Medium shadow | -| `--shadow-lg` | Large shadow (modals) | -| `--shadow-xl` | Extra large shadow | - ---- - -## Component Specifications - -### Button - -**Variants:** - -| Variant | Style | Usage | -|---------|-------|-------| -| `default` | Primary background + white text | Primary actions | -| `secondary` | Secondary background + border | Secondary actions | -| `outline` | Transparent + border | Neutral actions | -| `ghost` | Transparent | Toolbar buttons | -| `destructive` | Red background | Dangerous actions | -| `link` | Link style | Text links | - -**Sizes:** - -| Size | Height | Usage | -|------|--------|-------| -| `sm` | `h-8` | Compact contexts | -| `default` | `h-9` | Standard buttons | -| `lg` | `h-10` | Emphasized buttons | -| `icon` | `size-9` | Icon buttons | -| `icon-sm` | `size-8` | Small icon buttons | -| `icon-lg` | `size-10` | Large icon buttons | - -### Card - -- Background: `bg-card` -- Border Radius: `rounded-xl` -- Padding: `py-6 px-6` -- Shadow: `shadow-sm` -- Border: `border` - -### Tabs - -| State | Background | Text | -|-------|------------|------| -| Container | `#252526` | — | -| Inactive | `#292929` | `#A0A0A0` | -| Active | `#1E1E1E` | `#FFFFFF` | -| Hover | `#363637` | — | - ---- - -## Sidebar Specifications - -### Primary Navigation - -| Variable | Value | -|----------|-------| -| `--sidebar-background` | `#333333` | -| `--sidebar-primary-foreground` | `#808080` | -| `--sidebar-primary-active` | `#FFFFFF` | -| `--sidebar-primary-hover` | `#2B2D2E` | - -### Project Section - -| Variable | Value | -|----------|-------| -| `--sidebar-project-background` | `#242426` | -| `--sidebar-project-foreground` | `#CCCCCC` | -| `--sidebar-project-active-background` | `#3A3D41` | - ---- - -## Chart Colors - -Sequential color palette for data visualization (blue-purple spectrum): - -| Variable | Usage | -|----------|-------| -| `--chart-1` | Primary chart color | -| `--chart-2` | Secondary chart color | -| `--chart-3` | Tertiary chart color | -| `--chart-4` | Quaternary chart color | -| `--chart-5` | Quinary chart color | - ---- - -## Related Files - -- [globals.css](file:///Users/che/Documents/GitHub/fulling/app/globals.css) — CSS variable definitions -- [style.md](file:///Users/che/Documents/GitHub/fulling/docs/style.md) — Detailed color reference diff --git a/docs/style.md b/docs/style.md deleted file mode 100644 index 6c2e784..0000000 --- a/docs/style.md +++ /dev/null @@ -1,163 +0,0 @@ -# FullstackAgent Color Scheme - -This document outlines the complete color scheme used by the FullstackAgent project, inspired by VS Code's Dark theme and based on CSS variables defined in `app/globals.css`. - -## Overview - -Fulling uses a modern CSS variable system with oklch color space, providing a complete dark theme color scheme that closely resembles VS Code's familiar developer-friendly interface. The design features a distinct two-section sidebar architecture with carefully crafted visual hierarchy for optimal user experience. - -### Technical Features -- **Color Space**: oklch (better perceptual uniformity) -- **CSS Variables**: Custom properties for easy theme switching -- **Semantic Naming**: Clear, usage-based naming conventions -- **Two-Section Sidebar**: Separated primary navigation and project content areas -- **Accessibility**: WCAG-compliant contrast ratios -- **VS Code Inspiration**: Familiar dark theme that developers recognize - -### Design Philosophy -- **Visual Hierarchy**: Clear distinction between navigation (`#333333`) and content (`#242426`) areas -- **State Management**: Dedicated colors for hover, active, and inactive states -- **Developer Familiarity**: Colors mapped to VS Code's established dark theme patterns - -## VS Code-Inspired Dark Theme - -### Core Color System - -| Variable | Hex Value | oklch Value | Usage | -|----------|-----------|-------------|-------| -| `--background` | `#1E1E1E` | - | Main application background (VS Code editor background) | -| `--foreground` | `#CCCCCC` | `oklch(0.92 0 0)` | Primary text color (VS Code default text) | -| `--content-background` | `#1E1E1E` | - | Content area background | - -### Container Colors - -| Variable | Hex Value | oklch Value | Usage | -|----------|-----------|-------------|-------| -| `--card` | `#252526` | - | Card and container backgrounds (VS Code panels) | -| `--card-foreground` | `#ffffff` | - | Card title text color (for card titles only) | -| `--popover` | `#252526` | - | Dialog and popup backgrounds | -| `--popover-foreground` | `#CCCCCC` | - | Dialog text color | - -### Brand Colors - -| Variable | Hex Value | oklch Value | Usage | -|----------|-----------|-------------|-------| -| `--primary` | `#10639D` | - | Primary brand color (buttons, links, accents) | -| `--primary-hover` | `#155a8a` | - | Primary brand hover state | -| `--primary-foreground` | `#FFFFFF` | - | Text on primary elements | -| `--ring` | - | `oklch(0.62 0.19 259.76)` | Focus ring color | - -### Secondary Colors - -| Variable | Hex Value | oklch Value | Usage | -|----------|-----------|-------------|-------| -| `--secondary` | - | `oklch(0.27 0 0)` | Secondary buttons, tags, badges | -| `--secondary-foreground` | - | `oklch(0.92 0 0)` | Text on secondary elements | - -### Functional Colors - -| Variable | Hex Value | oklch Value | Usage | -|----------|-----------|-------------|-------| -| `--muted` | - | `oklch(0.27 0 0)` | Supporting element backgrounds | -| `--muted-foreground` | - | `oklch(0.72 0 0)` | Secondary text, descriptions | -| `--accent` | `#2B2D2E` | - | Hover states, highlights (VS Code selection) | -| `--accent-foreground` | - | `oklch(0.88 0.06 254.63)` | Text on accent elements | -| `--destructive` | - | `oklch(0.64 0.21 25.39)` | Delete actions, error states | -| `--destructive-foreground` | - | `oklch(1.0000 0 0)` | Text on destructive elements | - -### Borders and Inputs - -| Variable | Hex Value | oklch Value | Usage | -|----------|-----------|-------------|-------| -| `--border` | - | `oklch(0.37 0 0)` | Border colors (VS Code widget borders) | -| `--input` | - | `oklch(0.37 0 0)` | Input field borders and backgrounds | - -## Sidebar Color Scheme - -The sidebar uses an independent color system with two distinct sections to create visual hierarchy, similar to VS Code's activity bar and sidebar: - -### Sidebar Primary Section - -| Variable | Hex Value | oklch Value | Usage | -|----------|-----------|-------------|-------| -| `--sidebar-primary-background` | `#333333` | - | Sidebar primary background (navigation area) | -| `--sidebar-primary-foreground` | `#808080` | - | Sidebar primary text color | -| `--sidebar-primary-accent` | - | `oklch(0.49 0.24 264.40)` | Sidebar primary accent elements | -| `--sidebar-primary-accent-foreground` | - | `oklch(0.99 0 0)` | Sidebar primary accent text | -| `--sidebar-primary-hover` | `#2B2D2E` | - | Sidebar primary hover backgrounds | -| `--sidebar-primary-hover-foreground` | - | `oklch(0.99 0 0)` | Sidebar primary hover text | -| `--sidebar-primary-active` | `#FFFFFF` | - | Sidebar primary active text color | -| `--sidebar-primary-border` | - | `oklch(1.00 0 0 / 10%)` | Sidebar primary borders | -| `--sidebar-primary-ring` | - | `oklch(0.55 0.02 285.93)` | Sidebar primary focus rings | - -### Sidebar Project Section - -| Variable | Hex Value | oklch Value | Usage | -|----------|-----------|-------------|-------| -| `--sidebar-project-background` | `#242426` | - | Project section background (project cards area) | -| `--sidebar-project-foreground` | `#CCCCCC` | - | Project section text color | -| `--sidebar-project-active-background` | `#3A3D41` | - | Project section active background | - -## Chart Color Scheme - -Sequential color palette for data visualization: - -| Variable | oklch Value | Description | -|----------|-------------|-------------| -| `--chart-1` | `oklch(0.71 0.14 254.69)` | Primary chart color (blue spectrum) | -| `--chart-2` | `oklch(0.62 0.19 259.76)` | Secondary chart color (deep blue) | -| `--chart-3` | `oklch(0.55 0.22 262.96)` | Tertiary chart color (blue-purple) | -| `--chart-4` | `oklch(0.49 0.22 264.43)` | Quaternary chart color (purple) | -| `--chart-5` | `oklch(0.42 0.18 265.55)` | Quinary chart color (deep purple) | - -## Shadow System - -Multi-level shadow effects optimized for dark theme: - -| Variable | CSS Value | Usage | -|----------|-----------|-------| -| `--shadow-2xs` | `0px 4px 8px -1px hsl(0 0% 0% / 0.05)` | Extra extra small shadow | -| `--shadow-xs` | `0px 4px 8px -1px hsl(0 0% 0% / 0.05)` | Extra small shadow | -| `--shadow-sm` | `0px 4px 8px -1px hsl(0 0% 0% / 0.10), 0px 1px 2px -2px hsl(0 0% 0% / 0.10)` | Small shadow | -| `--shadow` | `0px 4px 8px -1px hsl(0 0% 0% / 0.10), 0px 1px 2px -2px hsl(0 0% 0% / 0.10)` | Default shadow | -| `--shadow-md` | `0px 4px 8px -1px hsl(0 0% 0% / 0.10), 0px 2px 4px -2px hsl(0 0% 0% / 0.10)` | Medium shadow | -| `--shadow-lg` | `0px 4px 8px -1px hsl(0 0% 0% / 0.10), 0px 4px 6px -2px hsl(0 0% 0% / 0.10)` | Large shadow | -| `--shadow-xl` | `0px 4px 8px -1px hsl(0 0% 0% / 0.10), 0px 8px 10px -2px hsl(0 0% 0% / 0.10)` | Extra large shadow | -| `--shadow-2xl` | `0px 4px 8px -1px hsl(0 0% 0% / 0.25)` | Extra extra large shadow | - -## Typography and Border Radius - -### Font Families -- `--font-serif`: Source Serif 4, serif -- `--font-mono`: JetBrains Mono, monospace (developer-friendly) - -### Border Radius System -- `--radius`: `0.375rem` (base radius) -- `--radius-sm`: `calc(var(--radius) - 4px)` -- `--radius-md`: `calc(var(--radius) - 2px)` -- `--radius-lg`: `var(--radius)` -- `--radius-xl`: `calc(var(--radius) + 4px)` - -## Tabs Component Styling - -### Tab Container Colors - -| Variable | Hex Value | Usage | -|----------|-----------|-------| -| `--tabs-background` | `#252526` | Tab container background | - -### Tab Item States - -| Variable | Hex Value | Usage | -|----------|-----------|-------| -| `--tab-background` | `#292929` | Default/inactive tab background | -| `--tab-foreground` | `#A0A0A0` | Default/inactive tab text color | -| `--tab-active-background` | `#1E1E1E` | Active tab background | -| `--tab-active-foreground` | `#FFFFFF` | Active tab text color | -| `--tab-hover-background` | `#363637` | Hover background for tab buttons | - -### Implementation Notes - -- **Visual Hierarchy**: Active tabs use a darker background (`#1E1E1E`) with white text for maximum contrast -- **Inactive State**: Default tabs use a lighter background (`#292929`) with muted gray text (`#A0A0A0`) -- **Container**: Tab container uses a distinct purple-tinted background (`#252556`) to differentiate from main content \ No newline at end of file diff --git a/actions/sandbox.ts b/lib/actions/sandbox.ts similarity index 100% rename from actions/sandbox.ts rename to lib/actions/sandbox.ts diff --git a/actions/sealos-auth.ts b/lib/actions/sealos-auth.ts similarity index 100% rename from actions/sealos-auth.ts rename to lib/actions/sealos-auth.ts diff --git a/actions/types.ts b/lib/actions/types.ts similarity index 100% rename from actions/types.ts rename to lib/actions/types.ts From e105917a469549578bce2740bb100e9f4d5a1636 Mon Sep 17 00:00:00 2001 From: Che <30403707+Che-Zhu@users.noreply.github.com> Date: Thu, 29 Jan 2026 17:53:36 +0800 Subject: [PATCH 2/3] docs: humanize README and fix outdated information - Remove emoji decorations from section headings - Simplify Key Features section with concise descriptions - Update Next.js version from 15.5.4 to 16.0.10 - Fix repository URLs (FullstackAgent -> FullAgent) - Remove duplicate ENABLE_PASSWORD_AUTH env var - Fix installation step numbering (was 3,6,7 -> now 3,4,5) - Update project directory name to fulling - Remove API Documentation section - Fix grammar in Star section heading --- README.md | 115 ++++++++++++++---------------------------------------- 1 file changed, 29 insertions(+), 86 deletions(-) diff --git a/README.md b/README.md index 3efbd27..a7656b6 100644 --- a/README.md +++ b/README.md @@ -1,14 +1,14 @@ # Fulling - AI-Powered Full-Stack Development Platform