flowchart TB
    USER([User]) --> HOME["HomePage<br/>Post feed with search/sort"]
    HOME --> |Click post| DETAIL["DetailPage<br/>Full post + comments"]
    HOME --> |Click Create| CREATE["CreatePage<br/>(Protected)"]
    HOME --> |Click avatar| PROFILE["ProfilePage<br/>User activity tabs"]

    DETAIL --> |Upvote| RPC[("Supabase RPC<br/>toggle_upvote")]
    DETAIL --> |Comment| COMMENTS[("comments table")]
    DETAIL --> |Edit| EDIT["EditPage<br/>(Protected, Owner only)"]
    DETAIL --> |Delete| DELETE["Confirm Modal"]
    DELETE --> |Confirm| SUPA_DEL[("DELETE posts")]

    CREATE --> |Submit| SUPA_INS[("INSERT posts")]
    CREATE --> |Upload image| STORAGE[("Supabase Storage<br/>post-images bucket")]
    EDIT --> |Submit| SUPA_UPD[("UPDATE posts")]
    EDIT --> |Upload image| STORAGE

    USER --> |Not logged in| LOGIN["LoginPage"]
    LOGIN --> |Google OAuth| AUTH[("Supabase Auth")]
    AUTH --> |Success| HOME

    PROFILE --> |Overview| POSTS_TAB["User's Posts"]
    PROFILE --> |Comments| COMMENTS_TAB["User's Comments"]
    PROFILE --> |Upvoted| UPVOTED_TAB["Upvoted Posts"]

graph TD
    subgraph External
        SUPA["Supabase<br/>PostgreSQL + Auth + Storage"]
        GOOGLE["Google OAuth<br/>Authentication provider"]
        BOOTSTRAP["Bootstrap 5.3<br/>CSS framework"]
        ICONS["Bootstrap Icons 1.13<br/>Icon font"]
        MOTION["Motion<br/>Animation library"]
    end

    subgraph "Build Tools"
        VITE["Vite 7<br/>Dev server + bundler"]
        REACT_PLUGIN["@vitejs/plugin-react<br/>Fast refresh"]
        ESLINT["ESLint 9<br/>Linting"]
    end

    subgraph "React App"
        MAIN["main.jsx<br/>Entry point"]
        PROVIDERS["AuthProvider → ToastProvider<br/>→ BrowserRouter"]
        APP["App.jsx<br/>Layout + navbar"]
        ROUTES["Route Components<br/>HomePage, DetailPage, etc."]
        COMPONENTS["Shared Components<br/>Post, CommentThread, Spinner,<br/>ImageDropZone, ProtectedRoute"]
    end

    subgraph "Utilities"
        CLIENT["client.js<br/>Supabase singleton"]
        HELPERS["helpers.js<br/>fetchWithRetry, formatTime,<br/>uploadImage, buildCommentTree,<br/>isEdited, isPostOwner"]
        CACHE["profileCache.js<br/>LRU tab cache"]
    end

    MAIN --> PROVIDERS
    PROVIDERS --> APP
    APP --> ROUTES
    ROUTES --> COMPONENTS
    ROUTES --> HELPERS
    HELPERS --> CLIENT
    CLIENT --> SUPA
    APP --> SUPA
    PROVIDERS --> GOOGLE

graph LR
    main["main.jsx"] --> AuthProvider
    AuthProvider --> ToastProvider
    ToastProvider --> Router["BrowserRouter"]
    Router --> App

    App -->|"URL search params"| HomePage
    App -->|"useAuth()"| AuthCtx["AuthContext"]

    HomePage -->|"props"| Post["Post.jsx"]
    HomePage -->|"SELECT posts<br/>+ profiles join"| DB[(Supabase)]

    DetailPage -->|"buildCommentTree()"| CommentThread["CommentThread.jsx<br/>(recursive)"]
    DetailPage -->|"RPC toggle_upvote"| DB
    DetailPage -->|"comments CRUD"| DB

    CommentThread -->|"Spinner"| Spinner["Spinner.jsx<br/>Motion rotate"]
    Post -->|"motion.div"| MotionLib["Motion for React<br/>hover/tap animations"]

    CreatePage -->|"INSERT posts"| DB
    CreatePage -->|"upload"| Storage[(Storage)]

    EditPage -->|"UPDATE posts"| DB
    EditPage -->|"upload"| Storage

    ProfilePage -->|"SELECT posts,<br/>comments, upvotes"| DB

    LoginPage -->|"signInWithOAuth"| Auth[(Supabase Auth)]

erDiagram
    profiles ||--o{ posts : "creates"
    profiles ||--o{ comments : "writes"
    profiles ||--o{ upvotes : "gives"
    posts ||--o{ comments : "has"
    posts ||--o{ upvotes : "receives"
    profiles {
        uuid id PK "User ID from Supabase Auth"
        text username "Display name from Google"
        text avatar_url "Profile picture URL"
        timestamptz created_at "Account creation timestamp"
    }
    posts {
        text slug PK "Random generated post ID"
        text title "Post title (required)"
        text content "Post body text (optional)"
        text imageUrl "Image URL or Storage path"
        int upvotes "Upvote count (default 0)"
        uuid author_id FK "References profiles.id (nullable)"
        timestamptz created_at "Post creation timestamp"
        timestamptz updated_at "Last edit timestamp (nullable)"
    }
    comments {
        int id PK "Auto-increment comment ID"
        text post_id FK "References posts.slug"
        text comment "Comment text content"
        uuid author_id FK "References profiles.id (nullable)"
        int parent_id FK "References comments.id for threading"
        bool is_deleted "Soft delete preserves thread structure"
        timestamptz created_at "Comment timestamp"
    }
    upvotes {
        uuid user_id FK "References profiles.id"
        text post_id FK "References posts.slug"
        timestamptz created_at "Upvote timestamp"
    }

flowchart TD
    subgraph "Data Layer"
        DB[(comments table)]
        DB -->|"SELECT with parent_id"| FLAT["Flat comment array"]
    end
    subgraph "Transformation"
        FLAT -->|"buildCommentTree()"| TREE["Nested tree structure"]
        TREE -->|"Each node has"| NODE["{ ...comment, children[], depth }"]
    end
    subgraph "Rendering"
        NODE --> CT1["CommentThread depth 0"]
        CT1 -->|"recursive"| CT2["CommentThread depth 1"]
        CT2 -->|"recursive"| CT3["...up to depth 5"]
    end

sequenceDiagram
    participant U as User
    participant LP as LoginPage
    participant AP as AuthProvider
    participant SA as Supabase Auth
    participant SP as profiles table

    U->>LP: Click "Sign in with Google"
    LP->>AP: signInWithGoogle()
    AP->>SA: signInWithOAuth({ provider: 'google' })
    SA-->>U: Redirect to Google OAuth
    U-->>SA: Authorize & redirect back
    SA->>AP: onAuthStateChange(session)
    AP->>SP: SELECT profile WHERE id = user.id
    SP-->>AP: { username, avatar_url }
    AP-->>LP: Redirect to HomePage