From d80553136997f5ad42e23636c93e051ae9d1ae26 Mon Sep 17 00:00:00 2001 From: Jose Henrique Date: Fri, 20 Mar 2026 23:11:52 -0300 Subject: [PATCH] changing lf --- .gitignore | 0 App.tsx | 0 GEMINI.md | 39 ++++++++++++++++++++++++ README.md | 0 components/WebsiteTile.tsx | 0 constants.tsx | 0 icon.png | Bin index.html | 0 index.tsx | 0 notes-widget-plan.md | 57 ++++++++++++++++++++++++++++++++++++ package.json | 0 public/favicon.ico | Bin scripts/check_virustotal.sh | 0 tsconfig.json | 0 types.ts | 0 vite.config.ts | 0 16 files changed, 96 insertions(+) mode change 100755 => 100644 .gitignore mode change 100755 => 100644 App.tsx create mode 100644 GEMINI.md mode change 100755 => 100644 README.md mode change 100755 => 100644 components/WebsiteTile.tsx mode change 100755 => 100644 constants.tsx mode change 100755 => 100644 icon.png mode change 100755 => 100644 index.html mode change 100755 => 100644 index.tsx create mode 100644 notes-widget-plan.md mode change 100755 => 100644 package.json mode change 100755 => 100644 public/favicon.ico mode change 100755 => 100644 scripts/check_virustotal.sh mode change 100755 => 100644 tsconfig.json mode change 100755 => 100644 types.ts mode change 100755 => 100644 vite.config.ts diff --git a/.gitignore b/.gitignore old mode 100755 new mode 100644 diff --git a/App.tsx b/App.tsx old mode 100755 new mode 100644 diff --git a/GEMINI.md b/GEMINI.md new file mode 100644 index 0000000..76c0d9c --- /dev/null +++ b/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 + + ``` + +## 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`. diff --git a/README.md b/README.md old mode 100755 new mode 100644 diff --git a/components/WebsiteTile.tsx b/components/WebsiteTile.tsx old mode 100755 new mode 100644 diff --git a/constants.tsx b/constants.tsx old mode 100755 new mode 100644 diff --git a/icon.png b/icon.png old mode 100755 new mode 100644 diff --git a/index.html b/index.html old mode 100755 new mode 100644 diff --git a/index.tsx b/index.tsx old mode 100755 new mode 100644 diff --git a/notes-widget-plan.md b/notes-widget-plan.md new file mode 100644 index 0000000..b5f4856 --- /dev/null +++ b/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 \ No newline at end of file diff --git a/package.json b/package.json old mode 100755 new mode 100644 diff --git a/public/favicon.ico b/public/favicon.ico old mode 100755 new mode 100644 diff --git a/scripts/check_virustotal.sh b/scripts/check_virustotal.sh old mode 100755 new mode 100644 diff --git a/tsconfig.json b/tsconfig.json old mode 100755 new mode 100644 diff --git a/types.ts b/types.ts old mode 100755 new mode 100644 diff --git a/vite.config.ts b/vite.config.ts old mode 100755 new mode 100644