Update documentation with new features and requirements

PLAN.md

@@ -11,7 +11,7 @@ To build "OpenChat Overlay"—a free, open-source alternative to StreamElements,
 
 ## Architecture
 
-### Next.js Folder Structure (Proposed)
+### Next.js Folder Structure
 ```
 src/
 ├── app/
@@ -25,8 +25,10 @@ src/
 │   ├── api/                # API Routes
 │   │   ├── auth/           # NextAuth handlers
 │   │   │   └── [...nextauth]/route.ts
-│   │   └── overlay/        # Overlay configuration endpoints
-│   │       └── [token]/route.ts
+│   │   ├── overlay/        # Overlay configuration endpoints
+│   │   │   └── [token]/route.ts
+│   │   └── twitch/         # Twitch API proxy
+│   │       └── status/     # Check stream status
 │   ├── overlay/            # The public overlay view
 │   │   └── [token]/        # Dynamic route for user overlay
 │   │       ├── layout.tsx  # Transparent background layout
@@ -35,13 +37,15 @@ src/
 ├── components/
 │   ├── dashboard/          # Dashboard-specific components
 │   │   ├── PreviewFrame.tsx # Live preview iframe/component
-│   │   └── StyleControls.tsx # Form for editing styles
+│   │   ├── StyleControls.tsx # Form for editing styles
+│   │   └── SupportModule.tsx # Sidebar support & social module
 │   ├── overlay/            # Overlay-specific components
 │   │   ├── ChatContainer.tsx
 │   │   └── Message.tsx
 │   └── ui/                 # Reusable UI components (buttons, inputs)
 ├── lib/
 │   ├── supabase.ts         # Supabase client
+│   ├── twitch.ts           # Twitch API helpers
 │   ├── utils.ts            # Helper functions
 │   └── types.ts            # TypeScript interfaces
 └── hooks/                  # Custom React hooks (useChat, useSettings)
@@ -55,7 +59,11 @@ src/
 
 ### 2. The "Style Creator"
 - **Left Panel:** Controls for font family, size, colors, opacity, badge toggles, and 7TV/BTTV emote toggles.
+- **Enhanced Settings:**
+    - Resolution Selection (720p/1080p).
+    - Quick "Copy Overlay URL" button.
 - **Right Panel:** Live preview component rendering mock chat messages with the current settings applied.
+- **Support Module:** Sidebar widget showing developer's live status (via Twitch API) and social/donation links.
 - **State:** React state manages unsaved changes; "Save" pushes to Supabase.
 
 ### 3. The "Secret Sauce" URL (`/overlay/[token]`)
@@ -78,10 +86,11 @@ src/
 - **Environment:** The development machine is exclusively for coding; the service will never be hosted on the dev machine.
 
 ## Implementation Phases
-1.  **Project Initialization:** Scaffolding Next.js, Tailwind, and Supabase client.
-2.  **Authentication:** Implementing NextAuth with Twitch.
+1.  **Project Initialization:** Scaffolding Next.js, Tailwind, and Supabase client. [Completed]
+2.  **Authentication:** Implementing NextAuth with Twitch. [In Progress]
 3.  **Database:** Designing the Schema and connecting Supabase.
-4.  **Dashboard UI:** Building the Style Creator and Preview.
+4.  **Dashboard UI:** Building the Style Creator and Preview. [Completed]
+    - *Added:* Support Module, Resolution settings, Copy Link.
 5.  **Overlay Logic:** Creating the standalone overlay page and chat connection.
 6.  **Deployment:** Docker/LXC containerization.
 
@@ -97,10 +106,11 @@ src/
     "backgroundColor": "#000000",
     "backgroundOpacity": 0.5,
     "showBadges": true,
+    "resolution": "1080p", 
     "emotes": {
       "bttv": true,
       "seventv": true
     }
   }
 }
-```
+```