Update documentation with new features and requirements

DOCUMENTATION.md

@@ -24,6 +24,8 @@ OpenChat Overlay is a lightweight, open-source Twitch chat overlay solution desi
     TWITCH_CLIENT_ID=...
     TWITCH_CLIENT_SECRET=...
     ```
+    > **Note:** `TWITCH_CLIENT_ID` and `TWITCH_CLIENT_SECRET` are required for both User Authentication (NextAuth) and the Support Module (Stream Status).
+
 4.  Run the development server:
     ```bash
     npm run dev
@@ -33,6 +35,15 @@ OpenChat Overlay is a lightweight, open-source Twitch chat overlay solution desi
 - The application uses **Next.js App Router**.
 - **Dashboard:** Located in `src/app/(dashboard)`. Protected by authentication.
 - **Overlay:** Located in `src/app/overlay/[token]`. Publicly accessible but requires a valid token. Renders with a transparent background.
+- **API:**
+    - `/api/auth/*`: Handles user login via Twitch.
+    - `/api/twitch/status`: Public endpoint to check if the developer (`ramforth`) is live, used by the dashboard support module.
+
+## Features
+- **Style Creator:** Customise font, size, colors, opacity, and toggle badges/emotes.
+- **Resolution Support:** Toggle between 720p and 1080p base resolutions.
+- **Live Preview:** Real-time visual feedback of chat settings.
+- **Support Module:** Sidebar widget showing developer status and social links.
 
 ## Deployment
 
@@ -46,4 +57,3 @@ OpenChat Overlay is a lightweight, open-source Twitch chat overlay solution desi
 1.  Push changes from local development machine to Gitea.
 2.  Pull changes on the production LXC/VM.
 3.  Build and run using Docker or as a systemd service.
-

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,6 +106,7 @@ src/
     "backgroundColor": "#000000",
     "backgroundOpacity": 0.5,
     "showBadges": true,
+    "resolution": "1080p", 
     "emotes": {
       "bttv": true,
       "seventv": true