changing lf

GEMINI.md

@@ -0,0 +1,39 @@
+# Vision Startpage Project
+
+## Overview
+
+This project is a highly customizable and stylish startpage built with React. The goal is to create a visually appealing and functional dashboard that serves as a user's entry point to the web.
+
+## Key Features & Design Principles
+
+*   **Technology Stack:** The project is built using React and TypeScript.
+*   **Aesthetics:** The user interface should have a modern, "glassy" or "frosted glass" look (neumorphism/glassmorphism). This involves using transparency, blur effects, and subtle shadows to create a sense of depth.
+*   **Typography:** Specific font families and types will be used to maintain a consistent and elegant design.
+*   **Modals:** All modals in the application should follow a specific and consistent design language, contributing to the overall user experience.
+*   **Production Quality Code:** All code must be written to production standards, with a strong emphasis on readability, maintainability, and performance.
+*   **Creative & Beautiful Code:** Code should not only be functional but also well-structured, elegant, and creative.
+
+*   **Dropdown Component:** A reusable dropdown component (`components/Dropdown.tsx`) has been created for consistent styling and functionality across the application. It features a dark, glassy look with a custom arrow icon.
+
+    **Usage Example:**
+    ```typescript jsx
+    import Dropdown from './components/Dropdown';
+
+    // ... inside a React component
+    <Dropdown
+      options={[
+        { value: 'option1', label: 'Option 1' },
+        { value: 'option2', label: 'Option 2' },
+      ]}
+      value={selectedValue}
+      onChange={handleSelectChange}
+      name="myDropdown"
+    />
+    ```
+
+## Development Guidelines
+
+* Follow the existing code style and conventions.
+* Ensure all new components and features align with the established design principles.
+* Write clean, commented, and reusable code.
+* DO NOT run `npm run dev`, and instead, run `npm run build`.

notes-widget-plan.md

@@ -0,0 +1,57 @@
+# Notes Widget Implementation Plan
+## Overview
+This document outlines the implementation plan for a Notes / Scratchpad Widget feature that:
+1. Provides a text area that saves content to local storage automatically
+2. Includes bold and italic formatting buttons
+3. Has a toggle icon to show/hide the widget
+4. Has a glassy/frosty design with strong blur
+## Implementation Steps
+### 1. Update Config Interface
+In `types.ts`, add a new `notesWidget` configuration object:
+```typescript
+notesWidget: {
+  enabled: boolean;
+}
+```
+### 2. Update ConfigurationModal Component
+In `components/ConfigurationModal.tsx`:
+- Add `notesWidget` to the config state initialization (lines 18-44)
+- Add a new "Notes" tab to the tab navigation (lines 259-284)
+- Add a toggle switch for notesWidget.enabled in the Notes tab (lines 552-560)
+- Add the Notes tab content with the toggle switch
+### 3. Create NotesWidget Component
+Create a new file `components/NotesWidget.tsx`:
+- Text area for notes input
+- Bold and italic formatting buttons
+- Toggle icon for showing/hiding the widget
+- Glassy/frosty design with strong blur
+- Auto-save to localStorage using `userNotes` key
+### 4. Update App Component
+In `App.tsx`:
+- Add notesWidget to the defaultConfig (lines 14-35)
+- Add the NotesWidget component to the render output when enabled in config (lines 250-251)
+- Add logic to save/load notes from localStorage
+## Technical Details
+### Configuration Structure
+The configuration will be stored in the same way as other widgets:
+```typescript
+config: {
+  notesWidget: {
+    enabled: boolean;
+  }
+}
+```
+### Local Storage Key
+All notes text will be saved to localStorage with the key `userNotes`.
+### UI Design
+- Widget will be positioned on the left side of the screen
+- Vertically centered using flexbox
+- Glassy/frosty design using backdrop-blur and background transparency
+- Strong blur effect (backdrop-blur-2xl or similar)
+- Toggle icon will be positioned on the left edge of the widget
+- When hidden, icon shows a "show" indicator
+- When open, icon shows a "hide" indicator
+### Formatting Buttons
+- Bold button (B)
+- Italic button (I)
+- These will use HTML formatting (bold/italic tags) or rich text approach