StickyTabs 📌

Distraction-free, always-on-top floating browser tabs managed entirely from the Windows system tray. Features a single-window native dragging layout, a persistent bottom controls bar, a visual drag handle, an isolated cheatsheet popover, and custom launch presets.

StickyTabs is a premium companion browser tool designed specifically for developers. It spawns highly compact, borderless, resizable, and movable web view windows that float on top of your fullscreen code editor or IDE. It is the perfect sidekick for chatting with AI assistants (ChatGPT, Claude, Gemini) or following side-by-side coding courses and video tutorials without window-switching.

It is tray-managed, running quietly in your Windows system tray area (similar to OpenVPN-GUI) to keep your main workspace clean.

---

🌟 Features

• Unified Single-Window Architecture: Bypasses programmatic window movement lags and rounding drifts entirely. Dragging and positioning are handled natively by the Windows OS window manager, guaranteeing zero jitter and zero DPI resize drift.
• Persistent Bottom Controls: The webpage and bottom controls are split inside a single parent frame. The webpage is permanently docked above the controls, ensuring the web content never resizes, pushes, or pulls when interacting with the bottom controls bar.
• Branded Web Favicon: Left side of the controls bar displays the actual loaded website's circular favicon (ChatGPT's icon, YouTube's icon, etc.), updating dynamically as you navigate.
• Six-Dot Drag Grip Handle: Sits in the center-right of the bar, providing a dedicated and visual draggable region to easily reposition the window.
• Safe Sizing Constraints: Enforces a physical minWidth limit of 210px natively, ensuring controls (Favicon, Help, Pin) and native drag spaces are always visible and accessible.
• Isolated Cheatsheet Popover: Hovering or clicking the Help button spawns a dedicated, transparent child window (helpWin) containing the shortcuts cheatsheet directly above the button. Features 8px edge safety padding to prevent glows and drop-shadows from clipping.
• Reboot with System (Start on Boot): Includes a toggle setting inside the tray preferences to easily configure StickyTabs to launch automatically on system boot.
• System-wide Floating Spawn Hotkey: Spawns a floating browser tab instantly at any time via a global system-wide shortcut (Ctrl+Alt+T), even when StickyTabs is running in the background.
• Preset Manager & Preset Removal: Easily add or delete custom presets from the tray context menu via New Floating Tab -> Remove Preset or Add Custom Preset....

---

⌨️ Keyboard Shortcuts Reference

Shortcuts are designed to be comfortable and intuitive. Shift keys are reserved strictly for critical actions (reload, close) to keep standard navigation easy to reach:

Shortcut	Action	Description
Ctrl + L	Focus Omnibox	Highlights all address bar text ready for typing.
Ctrl + P	Toggle Always-On-Top	Pins or unpins the window on top of other editors.
Ctrl + O	Swap Window Layout	Swaps window dimensions between Portrait sidebar and Landscape video.
Ctrl + + / =	Zoom In	Increases web page scale and text by 10% (up to 300%).
Ctrl + -	Zoom Out	Decreases web page scale and text by 10% (down to 50%).
Ctrl + 0	Reset Zoom	Instantly restores scaling back to standard 100%.
Ctrl + M	Minimize Window	Minimizes the active tab to your desktop background.
Ctrl + Shift + R	Reload Webview (Critical)	Refreshes the active web page (requires Shift to avoid accidental reloads).
Ctrl + Shift + W	Close Active Tab (Critical)	Closes and destroys the active floating window (requires Shift to prevent accidental closures).
Ctrl + Alt + T	New Tab (Global)	Global hotkey to spawn a new floating browser tab from anywhere.
Ctrl + C / V / X	Clipboard Actions	Standard clipboard support for copying and pasting code.

---

🛠️ Tech Stack & Architecture

• Framework: Electron (Chromium & Node.js V8 Engine)
• Frontend: HTML5, Vanilla CSS3 (custom glassmorphic theme styling), and ES6 JavaScript.
• Architecture:
  • Uses a Dual-API View Adapter supporting both standard WebContentsView (Electron 30+) and BrowserView (Legacy Electron) to bypass X-Frame-Options and CSP blockades.
  • Local trusted window loads titlebar/titlebar.html (with -webkit-app-region: drag for native, hardware-accelerated movement).

---

🚀 Getting Started

Prerequisites

You only need Node.js (v16.0 or higher) and npm installed on your machine.

Installation

1. Clone or download this project to your local directory:

   git clone https://github.com/sameer7in7/StickyTabs.git
   cd StickyTabs

2. Install the required Node.js package dependencies (Electron):

   npm install

3. Launch the application:

   npm start

---

⚙️ Configuration & Customization

All configurations are persisted in a JSON file stored automatically inside your system's User Data directory (e.g. AppData\Roaming\StickyTabs\settings.json).

You can configure default launch coordinates, presets, and customized window dimensions inside the settings file:

• Portrait Sidebar dimensions: 390px width by 720px height (ideal size for modern mobile chatbot responsive pages).
• Landscape Video dimensions: 850px width by 500px height (ideal aspect ratio for 16:9 tutorial videos and course documentation).

---

📂 Project Structure

StickyTabs/
├── assets/
│   ├── icon.png        # Transparent 32x32 raster PNG icon for Windows System Tray
│   └── icon.svg        # Clean high-fidelity vector source asset
├── titlebar/
│   ├── titlebar.html   # HTML structure for Favicon, omnibox, and action triggers
│   ├── titlebar.css    # Premium glassmorphic footer styles and native drag areas
│   ├── titlebar.js     # Renderer IPC events, focus bindings, and hotkeys
│   ├── help.html       # HTML structure for keyboard shortcuts cheatsheet popover
│   └── help.css        # Premium glassmorphic styles for shortcuts cheatsheet
├── prompt/
│   ├── prompt.html     # Custom Launch Presets dialog box markup
│   ├── prompt.css      # Dark modal styles with glowing electric blue borders
│   └── prompt.js       # Form validation and presets dispatcher
├── main.js             # Electron main process orchestrator (lifecycle, tray, IPC)
├── preload.js          # Sandboxed page injection capturing hotkeys and scrollbars
├── settings.js         # Settings manager reading/writing AppData configurations
├── package.json        # Manifest file specifying start scripts and devDependencies
└── README.md           # This comprehensive documentation file

---

📄 License & Dual-Licensing

This project is dual-licensed:

1. Open Source: Licensed under the GNU GPL v3 License. Anyone can use, modify, and distribute this software for free under the copyleft terms of the GPL (meaning any derivative work or proprietary integration must also be fully open-source under GPL v3).
2. Commercial & Proprietary Use: If you want to use this code in a closed-source commercial application, or distribute it without copyleft restrictions, you must acquire a Commercial License from the author.

For inquiries regarding commercial licensing, custom branding, or revenue-sharing partnerships, please contact the repository owner.