tools / commit
reworked documentation and added ai docs
separator-page/.github/copilot-instructions.md | 90 +++++++++++++++++++++++++ separator-page/bookmark.png | Bin 0 -> 80288 bytes separator-page/default-edit.png | Bin 34600 -> 0 bytes separator-page/default-view.png | Bin 100209 -> 0 bytes separator-page/readme.md | 21 ++---- separator-page/usage.png | Bin 61904 -> 366906 bytes 6 files changed, 97 insertions(+), 14 deletions(-) diff --git a/separator-page/.github/copilot-instructions.md b/separator-page/.github/copilot-instructions.md new file mode 100644 index 0000000..03e7365 --- /dev/null +++ b/separator-page/.github/copilot-instructions.md @@ -0,0 +1,90 @@ +# Separator Page - AI Coding Instructions + +## Project Overview +A self-contained browser tab organizer that creates customizable separator pages. The entire application lives in a single HTML file (`index.html`) with embedded CSS and JavaScript. + +## Architecture Patterns + +### Single-File Web App +- Everything embedded in `index.html`: HTML structure, CSS styles, JavaScript logic +- No build process, bundlers, or external dependencies beyond CDN libraries +- Uses `showdown.js` from CDN for Markdown rendering + +### Dual Storage Pattern +- **Per-tab data**: `localStorage['separator-tab-${tabId}']` stores individual separator content (title, description, icon) +- **Global shared data**: `localStorage['separator-previous-icons']` stores icon history across all tabs +- Tab ID generation: URL param `?tab=X` or timestamp-based fallback + +### State Management +- No frameworks - direct DOM manipulation with cached element references +- Save-on-change pattern: every user action triggers `saveTabData()` +- URL params control initial state: `?name=X` sets title, `?tab=X` sets storage key + +## Icon System Architecture + +### Three-Tier Icon Management +1. **Current icon**: Synced between preview, favicon, and localStorage +2. **Previous icons**: Global history with deduplication and 100-item limit +3. **Default icons**: Static array from `./icons/template-icon-*.png` files + +### Multi-Modal Icon Input +- Drag & drop image files (converts to data URLs) +- Paste images from clipboard +- URL input field +- Click selection from previous icons grid + +### Icon Interaction Patterns +```javascript +// Standard pattern for icon click handling +iconElement.addEventListener("click", async (event) => { + if (event.shiftKey) { + removePreviousIcon(iconUrl); // Remove from history + } else if (event.ctrlKey || event.metaKey) { + await downloadImageAsFile(iconUrl, filename); // Download individual + } else { + handleIconChange(iconUrl); // Set as current + } +}); +``` + +## Key Conventions + +### Element Selection Pattern +All DOM elements cached as typed constants at script start: +```javascript +/** @type {HTMLElement} */ +const iconPreview = document.getElementById("icon-preview"); +``` + +### Background Image Styling +- **Preview icons**: Use `background-size: contain` to show full image +- **Grid icons**: Use `background-size: cover` for consistent thumbnails +- Always set `background-position: center` and `background-repeat: no-repeat` + +### Data URL Handling +- Skip `data:image/x-icon` URLs in icon history (default favicon) +- Convert external images to data URLs for persistence +- Use Canvas API for cross-format PNG conversion + +## Development Workflows + +### Local Testing +- Open `index.html` directly in browser - no server required +- Default icons load from `./icons/` directory (14 template icons) +- Uses relative paths - deploy anywhere that serves static files + +### Icon Management +- Export: Downloads all current icons as `template-icon-1.png`, `template-icon-2.png`, etc. +- Reset: Restores to default icon set from `./icons/` folder +- Individual download: Ctrl/Cmd+click any icon for single file download + +### Debugging State +- Check `localStorage['separator-tab-${tabId}']` for current tab data +- Check `localStorage['separator-previous-icons']` for global icon history +- Console logs with `console.debug()` for major state changes + +## External Integration +- Designed for browser bookmark usage - bookmark the URL for instant separator creation +- Works with tab tree extensions (Firefox Tree Style Tab shown in screenshots) +- Markdown content rendered via Showdown.js with default settings +- All links in rendered content open in new tabs (`target="_blank"`) diff --git a/separator-page/bookmark.png b/separator-page/bookmark.png new file mode 100644 index 0000000..7370ade Binary files /dev/null and b/separator-page/bookmark.png differ diff --git a/separator-page/default-edit.png b/separator-page/default-edit.png deleted file mode 100644 index 3bec6d1..0000000 Binary files a/separator-page/default-edit.png and /dev/null differ diff --git a/separator-page/default-view.png b/separator-page/default-view.png deleted file mode 100644 index 639f0a0..0000000 Binary files a/separator-page/default-view.png and /dev/null differ diff --git a/separator-page/readme.md b/separator-page/readme.md index 256dc35..6cbbf73 100644 --- a/separator-page/readme.md +++ b/separator-page/readme.md @@ -4,22 +4,15 @@ This page can be used as a separator. Simply open the page, enter a title (and o ## Screenshots -This screenshot shows the separator page being used to organize trees of tabs in Firefox. The separator page has the + (plus) icon on the left side. The tree-like structure is provided by the [Tree Style Tab extension](https://github.com/piroor/treestyletab/blob/trunk/README.md). +This screenshot shows the separator page being used to organize trees of tabs in Firefox. The separator page has a custom favicon. The tree-like structure is provided by the [Tree Style Tab extension](https://github.com/piroor/treestyletab/blob/trunk/README.md). >  -This is the default view that comes up for a new separator page. +This screenshot shows how to add the separator page to your bookmarks, so you can quickly create new separator pages with custom titles. +>  ->  +## Usage -This is the edit-mode of the default view. Double-click on the title and then again on the contents to start editing them. - ->  - -## Installation - -1. Navigate to [this page](https://pavelsafronov.gitlab.io/tools/separator-page/index.html) -2. Bookmark it -3. Edit the bookmark and remove the text after `index.html` - - Or just replace the whole thing with `https://pavelsafronov.gitlab.io/tools/separator-page/index.html` -4. Start using the bookmark as a separator +1. Create a bookmark to this page in your browser: `https://pavelsafronov.gitlab.io/tools/separator-page/index.html?name=%s` +2. Assign the bookmark a Keyword, for example `~` +3. Navigate to `~ Project` in your browser to get a new separator page with the title "Project" diff --git a/separator-page/usage.png b/separator-page/usage.png index 253a6d4..b3f3cb0 100644 Binary files a/separator-page/usage.png and b/separator-page/usage.png differ