Initial commit: Folder Bookmark Tray
Windows tray app for bookmarking folders with quick-action buttons (Explorer, Terminal, Claude, Visual Studio, Redeploy). Features: - Tabs containing columns of bookmarks - Per-row launcher buttons configurable from a header settings panel - Optional auto-start on Windows login - In-app confirm dialogs for destructive actions - Dark theme, frameless tray-anchored popup, pinnable
This commit is contained in:
David
+12
@@ -0,0 +1,12 @@
|
|||||||
|
node_modules/
|
||||||
|
dist/
|
||||||
|
build/
|
||||||
|
.vite/
|
||||||
|
*.log
|
||||||
|
.DS_Store
|
||||||
|
Thumbs.db
|
||||||
|
|
||||||
|
# Editor
|
||||||
|
.vscode/
|
||||||
|
.idea/
|
||||||
|
.claude/
|
||||||
@@ -0,0 +1,55 @@
|
|||||||
|
# Folder Bookmark Tray — initial brief
|
||||||
|
|
||||||
|
A Windows system tray app for **bookmarking folder paths** with **quick-action buttons**. Spawned as a sibling of `claude-usage-tray` (`E:\Personal Repo\PersonalProjects\ClaudeTracker`) and intended to look and feel similar.
|
||||||
|
|
||||||
|
## What it does
|
||||||
|
|
||||||
|
A persistent tray icon. Left-click → popup window listing the user's saved folders. Each saved folder is a row with:
|
||||||
|
- An **alias** (display name) + the underlying path
|
||||||
|
- A row of **quick-action buttons**, e.g.:
|
||||||
|
- **Explorer** — open the folder in File Explorer
|
||||||
|
- **Terminal** — open a new Windows Terminal / cmd in that directory
|
||||||
|
- **VS Code** — `code <path>`
|
||||||
|
- **Claude** — `cmd /K claude` started in that directory (mirrors `launchClaude` in ClaudeTracker)
|
||||||
|
- **Copy path** — copy the path string to the clipboard
|
||||||
|
- An **edit/remove** affordance
|
||||||
|
|
||||||
|
Right-click tray menu mirrors the action set: each saved folder appears as a submenu with the same actions, plus "Browse for folder…" and "Manage…".
|
||||||
|
|
||||||
|
## Look and feel
|
||||||
|
|
||||||
|
Match `claude-usage-tray`:
|
||||||
|
- **Electron + React + Vite** stack (see its `package.json`, `electron/main.js`, `vite.config.mjs`)
|
||||||
|
- Frameless, non-resizable popup, tray-anchored (~360px wide), dark theme
|
||||||
|
- Pin-to-keep-open toggle that persists window position (see `popupWindow.on('moved', ...)` debounce in ClaudeTracker)
|
||||||
|
- Saved-paths persistence via `app.getPath('userData')/config.json` — same pattern ClaudeTracker uses for `savedPaths`
|
||||||
|
- IPC architecture: `contextBridge` in `preload.js` exposing `window.bookmarks` (or similar), main-process handlers for folder picker, launcher, clipboard, etc.
|
||||||
|
- NSIS installer via `electron-builder`
|
||||||
|
|
||||||
|
## Reference reading (do this before planning)
|
||||||
|
|
||||||
|
Skim these in `E:\Personal Repo\PersonalProjects\ClaudeTracker\` to match conventions:
|
||||||
|
- `README.md` — project layout summary
|
||||||
|
- `package.json` — scripts (`dev`, `build`, `dist`), electron-builder config
|
||||||
|
- `electron/main.js` — tray creation, popup window, context-menu structure, `launchClaude`, `pickFolder`, `add-saved-path` / `remove-saved-path` IPC handlers, config read/write helpers
|
||||||
|
- `electron/preload.js` — contextBridge surface
|
||||||
|
- `src/styles/index.css` — color tokens, popup chrome, button styles (dark theme baseline)
|
||||||
|
- `src/components/` — popup layout, list-row composition (especially how ChatList renders detail rows with action buttons)
|
||||||
|
|
||||||
|
## Non-goals (v1)
|
||||||
|
|
||||||
|
- macOS / Linux support
|
||||||
|
- Cloud sync of bookmarks
|
||||||
|
- Tagging / folder grouping
|
||||||
|
- Drag-to-reorder (nice-to-have, not required v1)
|
||||||
|
|
||||||
|
## What I want from you next
|
||||||
|
|
||||||
|
Produce a step-by-step plan that:
|
||||||
|
1. Confirms the directory layout (mirroring ClaudeTracker's structure)
|
||||||
|
2. Lists the IPC surface with handler signatures
|
||||||
|
3. Describes the config schema (saved bookmarks shape)
|
||||||
|
4. Outlines components and their props
|
||||||
|
5. Calls out anything you want to deviate from ClaudeTracker's patterns and why
|
||||||
|
|
||||||
|
Don't write code yet — plan first.
|
||||||
@@ -0,0 +1,92 @@
|
|||||||
|
# Folder Bookmark Tray
|
||||||
|
|
||||||
|
A Windows system-tray app for bookmarking folder paths with quick-action buttons (Explorer, Terminal, Claude, Visual Studio).
|
||||||
|
|
||||||
|
Personal utility, Windows-only.
|
||||||
|
|
||||||
|
## Screenshots
|
||||||
|
|
||||||
|
_TBD — drop popup + context-menu screenshots in `assets/` and link them here._
|
||||||
|
|
||||||
|
## Install / dev / build
|
||||||
|
|
||||||
|
```sh
|
||||||
|
npm install # also runs `npm run icon` to generate the tray PNG
|
||||||
|
npm run dev # Vite (5173) + Electron, hot reload
|
||||||
|
npm run build # vite build → dist/
|
||||||
|
npm run start # run Electron against built dist/
|
||||||
|
npm run dist # build + electron-builder NSIS installer → build/
|
||||||
|
npm run icon # regenerate assets/tray-icon.png
|
||||||
|
```
|
||||||
|
|
||||||
|
## Usage
|
||||||
|
|
||||||
|
- **Left-click** the tray icon → popup with the bookmark list. Each row shows alias + path + four action buttons and a `⋯` overflow menu (Copy path / Edit / Remove).
|
||||||
|
- **Right-click** the tray icon → native context menu. Each bookmark is a submenu with the same actions, plus **Browse for folder…** (quick-add via folder picker) and **Manage…** (opens the popup).
|
||||||
|
- **Pin toggle** in the popup header keeps it open after focus loss; pinned position is persisted across runs.
|
||||||
|
- **Auto-fitting popup**: width is fixed at 360px; height grows with content from 180px up to a 600px cap, then scrolls internally.
|
||||||
|
|
||||||
|
## Action buttons
|
||||||
|
|
||||||
|
| Button | Behavior |
|
||||||
|
|---|---|
|
||||||
|
| 📁 Explorer | `shell.openPath(path)` |
|
||||||
|
| `>_` Terminal | `wt.exe -d <path>` (Windows Terminal); falls back to `cmd.exe` on `ENOENT` |
|
||||||
|
| `C` Claude | `cmd.exe /c start "" /D <path> cmd.exe /K claude` (detached, ignored stdio, unref'd) |
|
||||||
|
| `VS` Visual Studio | Finds the first `*.sln` in the folder and opens it via shell association — uses whichever VS the user has registered for `.sln`. Disabled with a tooltip when no `.sln` is present. |
|
||||||
|
| Copy path | `clipboard.writeText(path)` |
|
||||||
|
|
||||||
|
## Config file
|
||||||
|
|
||||||
|
Persisted to `app.getPath('userData')/config.json`. On Windows that's:
|
||||||
|
|
||||||
|
```
|
||||||
|
%APPDATA%\Folder Bookmark Tray\config.json
|
||||||
|
```
|
||||||
|
|
||||||
|
Schema:
|
||||||
|
|
||||||
|
```ts
|
||||||
|
{
|
||||||
|
bookmarks: [
|
||||||
|
{ id: "uuid", alias: "string", path: "string", createdAt: "ISO8601" }
|
||||||
|
],
|
||||||
|
pinned: false,
|
||||||
|
pinnedBounds?: { x, y }, // remembered drag position when pinned
|
||||||
|
popupHeight?: number // last auto-fit height, clamped 180..600
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
## Layout
|
||||||
|
|
||||||
|
```
|
||||||
|
electron/
|
||||||
|
main.js tray + popup window + IPC handlers + context menu
|
||||||
|
preload.js contextBridge → window.bookmarks
|
||||||
|
launchers.js Explorer / Terminal / Claude / Visual Studio / clipboard / folder inspect
|
||||||
|
src/
|
||||||
|
main.jsx, App.jsx
|
||||||
|
components/
|
||||||
|
Popup.jsx ResizeObserver auto-fits Electron window height
|
||||||
|
BookmarkList.jsx
|
||||||
|
BookmarkRow.jsx view + inline edit, ⋯ menu, VS-disabled-when-no-sln
|
||||||
|
AddBookmarkForm.jsx
|
||||||
|
styles/index.css
|
||||||
|
scripts/generate-icon.js produces assets/tray-icon.png at install time
|
||||||
|
assets/tray-icon.png orange folder pictogram, 32×32
|
||||||
|
```
|
||||||
|
|
||||||
|
## Stack
|
||||||
|
|
||||||
|
Electron 33, React 18, Vite 5. NSIS installer via `electron-builder` (`appId: com.dbeuttel.folder-bookmark-tray`). No native deps.
|
||||||
|
|
||||||
|
## Non-goals
|
||||||
|
|
||||||
|
- macOS / Linux support
|
||||||
|
- Cloud sync of bookmarks
|
||||||
|
- Drag-to-reorder
|
||||||
|
- Tagging or folder grouping
|
||||||
|
|
||||||
|
## Why this exists
|
||||||
|
|
||||||
|
Sibling utility to [`claude-usage-tray`](../ClaudeTracker) — same window chrome, same dark-theme tokens, same `userData/config.json` persistence pattern, same tray-anchored popup behavior. Where ClaudeTracker is a usage dashboard with a saved-paths side feature, this app makes folder bookmarks the whole point: a fast keyboard-free way to jump from the tray into Explorer, a terminal, Claude, or Visual Studio at a known directory.
|
||||||
Binary file not shown.
|
After Width: | Height: | Size: 122 B |
@@ -0,0 +1,166 @@
|
|||||||
|
# find-tab.ps1
|
||||||
|
# Searches every running Windows Terminal / OpenConsole window for a tab whose
|
||||||
|
# title matches -Title (case-insensitive, with whitespace-stripped fuzzy
|
||||||
|
# fallback). On match, brings the host window to the foreground and selects
|
||||||
|
# the tab via UIA, mirroring focus-window.ps1's selection-fallback chain.
|
||||||
|
#
|
||||||
|
# Adapted from claude-usage-tray's focus-window.ps1, but inverted: that script
|
||||||
|
# walks UP from a known PID to find a windowed ancestor; this one searches
|
||||||
|
# DOWN across all WT windows by tab title.
|
||||||
|
#
|
||||||
|
# Usage:
|
||||||
|
# powershell -NoProfile -ExecutionPolicy Bypass -File find-tab.ps1 -Title 'MyAlias'
|
||||||
|
#
|
||||||
|
# Always exits 0 (unless catastrophic). Emits a single JSON line:
|
||||||
|
# { "found": true, "hostPid": 12345, "tabName": "MyAlias",
|
||||||
|
# "tabSelected": true, "selectionError": null }
|
||||||
|
# { "found": false }
|
||||||
|
|
||||||
|
param(
|
||||||
|
[Parameter(Mandatory=$true)][string]$Title
|
||||||
|
)
|
||||||
|
|
||||||
|
$ErrorActionPreference = 'Stop'
|
||||||
|
|
||||||
|
$winSig = @'
|
||||||
|
[DllImport("user32.dll")] public static extern bool SetForegroundWindow(IntPtr h);
|
||||||
|
[DllImport("user32.dll")] public static extern bool ShowWindowAsync(IntPtr h, int n);
|
||||||
|
[DllImport("user32.dll")] public static extern bool IsIconic(IntPtr h);
|
||||||
|
[DllImport("user32.dll")] public static extern IntPtr GetForegroundWindow();
|
||||||
|
[DllImport("user32.dll")] public static extern uint GetWindowThreadProcessId(IntPtr h, out uint pid);
|
||||||
|
[DllImport("user32.dll")] public static extern bool AttachThreadInput(uint idAttach, uint idAttachTo, bool attach);
|
||||||
|
[DllImport("kernel32.dll")] public static extern uint GetCurrentThreadId();
|
||||||
|
'@
|
||||||
|
Add-Type -MemberDefinition $winSig -Name W -Namespace U -ErrorAction SilentlyContinue | Out-Null
|
||||||
|
|
||||||
|
# SetForegroundWindow has anti-focus-stealing rules; the AttachThreadInput
|
||||||
|
# dance is the standard workaround when the calling process is not foreground.
|
||||||
|
function Set-Foreground {
|
||||||
|
param([IntPtr]$Handle)
|
||||||
|
if ([U.W]::IsIconic($Handle)) { [U.W]::ShowWindowAsync($Handle, 9) | Out-Null }
|
||||||
|
$fgHwnd = [U.W]::GetForegroundWindow()
|
||||||
|
$fgPid = 0
|
||||||
|
$fgThread = [U.W]::GetWindowThreadProcessId($fgHwnd, [ref]$fgPid)
|
||||||
|
$myThread = [U.W]::GetCurrentThreadId()
|
||||||
|
if ($fgThread -ne 0 -and $fgThread -ne $myThread) {
|
||||||
|
[U.W]::AttachThreadInput($fgThread, $myThread, $true) | Out-Null
|
||||||
|
}
|
||||||
|
$ok = [U.W]::SetForegroundWindow($Handle)
|
||||||
|
if ($fgThread -ne 0 -and $fgThread -ne $myThread) {
|
||||||
|
[U.W]::AttachThreadInput($fgThread, $myThread, $false) | Out-Null
|
||||||
|
}
|
||||||
|
return $ok
|
||||||
|
}
|
||||||
|
|
||||||
|
try {
|
||||||
|
Add-Type -AssemblyName UIAutomationClient,UIAutomationTypes -ErrorAction SilentlyContinue | Out-Null
|
||||||
|
} catch { }
|
||||||
|
|
||||||
|
function Norm([string]$s) {
|
||||||
|
if (-not $s) { return '' }
|
||||||
|
return ($s -replace '\s+','').ToLowerInvariant()
|
||||||
|
}
|
||||||
|
|
||||||
|
$root = [System.Windows.Automation.AutomationElement]::RootElement
|
||||||
|
$wtHosts = @(Get-Process | Where-Object { 'WindowsTerminal','OpenConsole' -contains $_.ProcessName })
|
||||||
|
|
||||||
|
if ($wtHosts.Count -eq 0) {
|
||||||
|
[pscustomobject]@{ found = $false; reason = 'no-wt-running' } | ConvertTo-Json -Compress
|
||||||
|
exit 0
|
||||||
|
}
|
||||||
|
|
||||||
|
$matchedTab = $null
|
||||||
|
$matchedIndex = -1
|
||||||
|
$matchedName = $null
|
||||||
|
$matchedHostPid = 0
|
||||||
|
$matchedHwnd = [IntPtr]::Zero
|
||||||
|
|
||||||
|
$titleNorm = Norm $Title
|
||||||
|
$titleLower = $Title.ToLowerInvariant()
|
||||||
|
|
||||||
|
foreach ($h in $wtHosts) {
|
||||||
|
try {
|
||||||
|
$procCond = New-Object System.Windows.Automation.PropertyCondition([System.Windows.Automation.AutomationElement]::ProcessIdProperty, [int]$h.Id)
|
||||||
|
$window = $root.FindFirst([System.Windows.Automation.TreeScope]::Children, $procCond)
|
||||||
|
if (-not $window) { continue }
|
||||||
|
$tabCond = New-Object System.Windows.Automation.PropertyCondition([System.Windows.Automation.AutomationElement]::ControlTypeProperty, [System.Windows.Automation.ControlType]::TabItem)
|
||||||
|
$tabs = @($window.FindAll([System.Windows.Automation.TreeScope]::Descendants, $tabCond))
|
||||||
|
|
||||||
|
# Pass 1: case-insensitive equality.
|
||||||
|
for ($i = 0; $i -lt $tabs.Count; $i++) {
|
||||||
|
$name = $tabs[$i].Current.Name
|
||||||
|
if (-not $name) { continue }
|
||||||
|
if ($name.ToLowerInvariant() -eq $titleLower) {
|
||||||
|
$matchedTab = $tabs[$i]; $matchedIndex = $i; $matchedName = $name
|
||||||
|
$matchedHostPid = $h.Id; $matchedHwnd = $h.MainWindowHandle
|
||||||
|
break
|
||||||
|
}
|
||||||
|
}
|
||||||
|
if ($matchedTab) { break }
|
||||||
|
|
||||||
|
# Pass 2: whitespace/case-insensitive substring match.
|
||||||
|
for ($i = 0; $i -lt $tabs.Count; $i++) {
|
||||||
|
$name = $tabs[$i].Current.Name
|
||||||
|
if (-not $name) { continue }
|
||||||
|
$nameNorm = Norm $name
|
||||||
|
if ($titleNorm -and $nameNorm.Contains($titleNorm)) {
|
||||||
|
$matchedTab = $tabs[$i]; $matchedIndex = $i; $matchedName = $name
|
||||||
|
$matchedHostPid = $h.Id; $matchedHwnd = $h.MainWindowHandle
|
||||||
|
break
|
||||||
|
}
|
||||||
|
}
|
||||||
|
if ($matchedTab) { break }
|
||||||
|
} catch { }
|
||||||
|
}
|
||||||
|
|
||||||
|
if (-not $matchedTab) {
|
||||||
|
[pscustomobject]@{ found = $false } | ConvertTo-Json -Compress
|
||||||
|
exit 0
|
||||||
|
}
|
||||||
|
|
||||||
|
# Foreground first; UIA Select frequently no-ops when host is in background.
|
||||||
|
[void](Set-Foreground -Handle $matchedHwnd)
|
||||||
|
Start-Sleep -Milliseconds 200
|
||||||
|
|
||||||
|
$tabSelected = $false
|
||||||
|
$selectionError = $null
|
||||||
|
|
||||||
|
# Strategy 1: SelectionItemPattern.Select
|
||||||
|
try {
|
||||||
|
$sel = $matchedTab.GetCurrentPattern([System.Windows.Automation.SelectionItemPattern]::Pattern)
|
||||||
|
if ($sel) { $sel.Select(); $tabSelected = $true }
|
||||||
|
} catch { $selectionError = "Select: $($_.Exception.Message)" }
|
||||||
|
|
||||||
|
# Strategy 2: InvokePattern.Invoke (acts like a click)
|
||||||
|
if (-not $tabSelected) {
|
||||||
|
try {
|
||||||
|
$inv = $matchedTab.GetCurrentPattern([System.Windows.Automation.InvokePattern]::Pattern)
|
||||||
|
if ($inv) { $inv.Invoke(); $tabSelected = $true; $selectionError = $null }
|
||||||
|
} catch {
|
||||||
|
if (-not $selectionError) { $selectionError = "Invoke: $($_.Exception.Message)" }
|
||||||
|
else { $selectionError = "$selectionError; Invoke: $($_.Exception.Message)" }
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
# Strategy 3: SendKeys Ctrl+<N> — WT's built-in tab-by-position keybind.
|
||||||
|
if (-not $tabSelected -and $matchedIndex -ge 0 -and $matchedIndex -lt 9) {
|
||||||
|
try {
|
||||||
|
Add-Type -AssemblyName System.Windows.Forms -ErrorAction SilentlyContinue | Out-Null
|
||||||
|
$key = '^{0}' -f ($matchedIndex + 1)
|
||||||
|
[System.Windows.Forms.SendKeys]::SendWait($key)
|
||||||
|
$tabSelected = $true; $selectionError = $null
|
||||||
|
} catch {
|
||||||
|
if (-not $selectionError) { $selectionError = "SendKeys: $($_.Exception.Message)" }
|
||||||
|
else { $selectionError = "$selectionError; SendKeys: $($_.Exception.Message)" }
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
[pscustomobject]@{
|
||||||
|
found = $true
|
||||||
|
hostPid = $matchedHostPid
|
||||||
|
tabName = $matchedName
|
||||||
|
tabIndex = $matchedIndex
|
||||||
|
tabSelected = $tabSelected
|
||||||
|
selectionError = $selectionError
|
||||||
|
} | ConvertTo-Json -Compress -Depth 4
|
||||||
|
exit 0
|
||||||
Binary file not shown.
@@ -0,0 +1,765 @@
|
|||||||
|
const { app, BrowserWindow, Tray, Menu, ipcMain, nativeImage, screen, dialog } = require('electron');
|
||||||
|
const path = require('path');
|
||||||
|
const fs = require('fs');
|
||||||
|
const crypto = require('crypto');
|
||||||
|
const launchers = require('./launchers');
|
||||||
|
|
||||||
|
// 60% of the original 360px slot, rounded to a clean number.
|
||||||
|
const POPUP_COLUMN_WIDTH = 216;
|
||||||
|
const POPUP_MIN_WIDTH = POPUP_COLUMN_WIDTH;
|
||||||
|
const POPUP_MIN_HEIGHT = 180;
|
||||||
|
const POPUP_MAX_HEIGHT = 600;
|
||||||
|
const POPUP_DEFAULT_HEIGHT = 360;
|
||||||
|
const DEV_URL = 'http://localhost:5174';
|
||||||
|
const isDev = !app.isPackaged;
|
||||||
|
|
||||||
|
let tray = null;
|
||||||
|
let popupWindow = null;
|
||||||
|
let configCache = null;
|
||||||
|
let pinned = false;
|
||||||
|
let saveBoundsDebounce = null;
|
||||||
|
|
||||||
|
function configPath() {
|
||||||
|
return path.join(app.getPath('userData'), 'config.json');
|
||||||
|
}
|
||||||
|
|
||||||
|
function readConfig() {
|
||||||
|
if (configCache) return configCache;
|
||||||
|
try {
|
||||||
|
configCache = JSON.parse(fs.readFileSync(configPath(), 'utf8'));
|
||||||
|
} catch {
|
||||||
|
configCache = {};
|
||||||
|
}
|
||||||
|
return configCache;
|
||||||
|
}
|
||||||
|
|
||||||
|
function writeConfig(patch) {
|
||||||
|
const next = { ...readConfig(), ...patch };
|
||||||
|
fs.mkdirSync(path.dirname(configPath()), { recursive: true });
|
||||||
|
fs.writeFileSync(configPath(), JSON.stringify(next, null, 2));
|
||||||
|
configCache = next;
|
||||||
|
return next;
|
||||||
|
}
|
||||||
|
|
||||||
|
function getIconPath() {
|
||||||
|
return path.join(__dirname, '..', 'assets', 'tray-icon.png');
|
||||||
|
}
|
||||||
|
|
||||||
|
function getTabs() {
|
||||||
|
const cfg = readConfig();
|
||||||
|
return Array.isArray(cfg.tabs) ? cfg.tabs.filter((t) => t && t.id && t.name) : [];
|
||||||
|
}
|
||||||
|
|
||||||
|
function getColumns() {
|
||||||
|
const cfg = readConfig();
|
||||||
|
return Array.isArray(cfg.columns) ? cfg.columns.filter((c) => c && c.id && c.name) : [];
|
||||||
|
}
|
||||||
|
|
||||||
|
function getBookmarks() {
|
||||||
|
const cfg = readConfig();
|
||||||
|
return Array.isArray(cfg.bookmarks) ? cfg.bookmarks.filter((b) => b && b.id && b.alias && b.path) : [];
|
||||||
|
}
|
||||||
|
|
||||||
|
function getActiveTabId() {
|
||||||
|
const cfg = readConfig();
|
||||||
|
const tabs = getTabs();
|
||||||
|
if (!tabs.length) return null;
|
||||||
|
const stored = cfg.activeTabId;
|
||||||
|
if (stored && tabs.find((t) => t.id === stored)) return stored;
|
||||||
|
return tabs[0].id;
|
||||||
|
}
|
||||||
|
|
||||||
|
// Per-button visibility for the row action bar. Defaults to true so existing
|
||||||
|
// installs see no behavior change.
|
||||||
|
function getButtonVisibility() {
|
||||||
|
const cfg = readConfig();
|
||||||
|
const v = cfg.buttonVisibility || {};
|
||||||
|
return {
|
||||||
|
claude: v.claude !== false,
|
||||||
|
terminal: v.terminal !== false,
|
||||||
|
redeploy: v.redeploy !== false,
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
||||||
|
// Default-on autostart. Honor an explicit `false` so users can opt out.
|
||||||
|
function getAutoStart() {
|
||||||
|
const cfg = readConfig();
|
||||||
|
return cfg.autoStart !== false;
|
||||||
|
}
|
||||||
|
|
||||||
|
// Sync the OS login-item state to config. Skipped in dev so the running
|
||||||
|
// devtools/electron build never gets registered against Windows logon.
|
||||||
|
function applyAutoStart() {
|
||||||
|
if (process.platform !== 'win32') return;
|
||||||
|
if (isDev) return;
|
||||||
|
try {
|
||||||
|
app.setLoginItemSettings({
|
||||||
|
openAtLogin: getAutoStart(),
|
||||||
|
// Hide the popup window on auto-launch — the app is tray-resident.
|
||||||
|
args: ['--hidden'],
|
||||||
|
});
|
||||||
|
} catch {
|
||||||
|
// Setting login items can fail under restricted policies; ignore so the
|
||||||
|
// app still launches even if startup registration is blocked.
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// One-time migration when loading older configs:
|
||||||
|
// 1. Ensure `columns` and `tabs` are arrays.
|
||||||
|
// 2. If bookmarks exist but no columns, create a default "Bookmarks" column
|
||||||
|
// and assign every existing bookmark to it.
|
||||||
|
// 3. Reassign any orphan bookmarks (referencing a missing columnId) to the
|
||||||
|
// first column.
|
||||||
|
// 4. If columns exist but no tabs, create a default "Main" tab and assign
|
||||||
|
// every existing column to it.
|
||||||
|
// 5. Reassign any orphan columns (referencing a missing tabId) to the first
|
||||||
|
// tab.
|
||||||
|
function migrateConfigIfNeeded() {
|
||||||
|
const cfg = readConfig();
|
||||||
|
let mutated = false;
|
||||||
|
let columns = Array.isArray(cfg.columns) ? cfg.columns.slice() : [];
|
||||||
|
let bookmarks = Array.isArray(cfg.bookmarks) ? cfg.bookmarks.slice() : [];
|
||||||
|
let tabs = Array.isArray(cfg.tabs) ? cfg.tabs.slice() : [];
|
||||||
|
let activeTabId = cfg.activeTabId;
|
||||||
|
|
||||||
|
if (!Array.isArray(cfg.columns)) mutated = true;
|
||||||
|
if (!Array.isArray(cfg.tabs)) mutated = true;
|
||||||
|
|
||||||
|
if (bookmarks.length > 0 && columns.length === 0) {
|
||||||
|
const defaultCol = { id: crypto.randomUUID(), name: 'Bookmarks' };
|
||||||
|
columns = [defaultCol];
|
||||||
|
bookmarks = bookmarks.map((b) => (b && !b.columnId ? { ...b, columnId: defaultCol.id } : b));
|
||||||
|
mutated = true;
|
||||||
|
} else if (bookmarks.length > 0 && columns.length > 0) {
|
||||||
|
const validIds = new Set(columns.map((c) => c.id));
|
||||||
|
const firstId = columns[0].id;
|
||||||
|
bookmarks = bookmarks.map((b) => {
|
||||||
|
if (!b) return b;
|
||||||
|
if (!b.columnId || !validIds.has(b.columnId)) {
|
||||||
|
mutated = true;
|
||||||
|
return { ...b, columnId: firstId };
|
||||||
|
}
|
||||||
|
return b;
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
if (columns.length > 0 && tabs.length === 0) {
|
||||||
|
const defaultTab = { id: crypto.randomUUID(), name: 'Main' };
|
||||||
|
tabs = [defaultTab];
|
||||||
|
columns = columns.map((c) => (c && !c.tabId ? { ...c, tabId: defaultTab.id } : c));
|
||||||
|
activeTabId = defaultTab.id;
|
||||||
|
mutated = true;
|
||||||
|
} else if (columns.length > 0 && tabs.length > 0) {
|
||||||
|
const validTabIds = new Set(tabs.map((t) => t.id));
|
||||||
|
const firstTabId = tabs[0].id;
|
||||||
|
columns = columns.map((c) => {
|
||||||
|
if (!c) return c;
|
||||||
|
if (!c.tabId || !validTabIds.has(c.tabId)) {
|
||||||
|
mutated = true;
|
||||||
|
return { ...c, tabId: firstTabId };
|
||||||
|
}
|
||||||
|
return c;
|
||||||
|
});
|
||||||
|
if (!activeTabId || !validTabIds.has(activeTabId)) {
|
||||||
|
activeTabId = firstTabId;
|
||||||
|
mutated = true;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
if (mutated) writeConfig({ columns, bookmarks, tabs, activeTabId });
|
||||||
|
}
|
||||||
|
|
||||||
|
function getCurrentHeight() {
|
||||||
|
const cfg = readConfig();
|
||||||
|
const stored = Number(cfg.popupHeight);
|
||||||
|
if (Number.isFinite(stored) && stored > 0) {
|
||||||
|
return Math.max(POPUP_MIN_HEIGHT, Math.min(POPUP_MAX_HEIGHT, stored));
|
||||||
|
}
|
||||||
|
return POPUP_DEFAULT_HEIGHT;
|
||||||
|
}
|
||||||
|
|
||||||
|
// Cap the popup width at the screen's work area minus a small margin so it
|
||||||
|
// never overflows. With many columns the user gets internal horizontal
|
||||||
|
// scroll instead of the window pushing off-screen.
|
||||||
|
function getMaxWidth() {
|
||||||
|
try {
|
||||||
|
return Math.max(POPUP_MIN_WIDTH, screen.getPrimaryDisplay().workArea.width - 8);
|
||||||
|
} catch {
|
||||||
|
return POPUP_MIN_WIDTH * 6;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
function getCurrentWidth() {
|
||||||
|
const cfg = readConfig();
|
||||||
|
const stored = Number(cfg.popupWidth);
|
||||||
|
const max = getMaxWidth();
|
||||||
|
if (Number.isFinite(stored) && stored > 0) {
|
||||||
|
return Math.max(POPUP_MIN_WIDTH, Math.min(max, stored));
|
||||||
|
}
|
||||||
|
return POPUP_COLUMN_WIDTH;
|
||||||
|
}
|
||||||
|
|
||||||
|
function createPopupWindow() {
|
||||||
|
popupWindow = new BrowserWindow({
|
||||||
|
width: getCurrentWidth(),
|
||||||
|
height: getCurrentHeight(),
|
||||||
|
show: false,
|
||||||
|
frame: false,
|
||||||
|
resizable: false,
|
||||||
|
skipTaskbar: true,
|
||||||
|
alwaysOnTop: true,
|
||||||
|
fullscreenable: false,
|
||||||
|
webPreferences: {
|
||||||
|
preload: path.join(__dirname, 'preload.js'),
|
||||||
|
contextIsolation: true,
|
||||||
|
nodeIntegration: false,
|
||||||
|
sandbox: false,
|
||||||
|
},
|
||||||
|
});
|
||||||
|
|
||||||
|
if (isDev) {
|
||||||
|
popupWindow.loadURL(DEV_URL);
|
||||||
|
} else {
|
||||||
|
popupWindow.loadFile(path.join(__dirname, '..', 'dist', 'index.html'));
|
||||||
|
}
|
||||||
|
|
||||||
|
popupWindow.on('blur', () => {
|
||||||
|
if (pinned) return;
|
||||||
|
if (!popupWindow.webContents.isDevToolsOpened()) popupWindow.hide();
|
||||||
|
});
|
||||||
|
|
||||||
|
popupWindow.on('close', (e) => {
|
||||||
|
if (!app.isQuitting) {
|
||||||
|
e.preventDefault();
|
||||||
|
popupWindow.hide();
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
// Persist drag position only when pinned. 300ms debounce because Electron
|
||||||
|
// fires 'moved' on every pixel during a drag — writing config that often
|
||||||
|
// would thrash the disk and produce a stale position if the drag is
|
||||||
|
// interrupted mid-flight.
|
||||||
|
popupWindow.on('moved', () => {
|
||||||
|
if (!pinned) return;
|
||||||
|
if (saveBoundsDebounce) clearTimeout(saveBoundsDebounce);
|
||||||
|
saveBoundsDebounce = setTimeout(() => {
|
||||||
|
const b = popupWindow.getBounds();
|
||||||
|
writeConfig({ pinnedBounds: { x: b.x, y: b.y } });
|
||||||
|
}, 300);
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
function positionPopup() {
|
||||||
|
const trayBounds = tray.getBounds();
|
||||||
|
const display = screen.getDisplayNearestPoint({ x: trayBounds.x, y: trayBounds.y });
|
||||||
|
const workArea = display.workArea;
|
||||||
|
const width = getCurrentWidth();
|
||||||
|
const height = getCurrentHeight();
|
||||||
|
let x = Math.round(trayBounds.x + trayBounds.width / 2 - width / 2);
|
||||||
|
let y = Math.round(trayBounds.y - height - 8);
|
||||||
|
x = Math.max(workArea.x + 4, Math.min(x, workArea.x + workArea.width - width - 4));
|
||||||
|
if (y < workArea.y + 4) y = trayBounds.y + trayBounds.height + 4;
|
||||||
|
popupWindow.setBounds({ x, y, width, height });
|
||||||
|
}
|
||||||
|
|
||||||
|
function togglePopup() {
|
||||||
|
if (!popupWindow) return;
|
||||||
|
if (popupWindow.isVisible()) {
|
||||||
|
popupWindow.hide();
|
||||||
|
} else {
|
||||||
|
if (pinned) {
|
||||||
|
const saved = readConfig().pinnedBounds;
|
||||||
|
const width = getCurrentWidth();
|
||||||
|
const height = getCurrentHeight();
|
||||||
|
if (saved && Number.isFinite(saved.x) && Number.isFinite(saved.y)) {
|
||||||
|
popupWindow.setBounds({ x: saved.x, y: saved.y, width, height });
|
||||||
|
} else {
|
||||||
|
positionPopup();
|
||||||
|
}
|
||||||
|
} else {
|
||||||
|
positionPopup();
|
||||||
|
}
|
||||||
|
popupWindow.show();
|
||||||
|
popupWindow.focus();
|
||||||
|
// Tell the renderer to re-inspect folders. Rows mount once and stay
|
||||||
|
// mounted while the window is hidden, so without this the redeploy/sln
|
||||||
|
// detection won't notice files added between popup opens.
|
||||||
|
if (popupWindow.webContents) popupWindow.webContents.send('popup-shown');
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
function truncatePath(p) {
|
||||||
|
if (!p) return '';
|
||||||
|
if (p.length <= 38) return p;
|
||||||
|
return p.slice(0, 18) + '…' + p.slice(-18);
|
||||||
|
}
|
||||||
|
|
||||||
|
function broadcastConfig() {
|
||||||
|
if (popupWindow && !popupWindow.isDestroyed()) {
|
||||||
|
popupWindow.webContents.send('config-updated', {
|
||||||
|
tabs: getTabs(),
|
||||||
|
columns: getColumns(),
|
||||||
|
bookmarks: getBookmarks(),
|
||||||
|
activeTabId: getActiveTabId(),
|
||||||
|
buttonVisibility: getButtonVisibility(),
|
||||||
|
autoStart: getAutoStart(),
|
||||||
|
});
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
function buildContextMenu() {
|
||||||
|
const bookmarks = getBookmarks();
|
||||||
|
const items = [
|
||||||
|
{ label: 'Open', click: togglePopup },
|
||||||
|
{ type: 'separator' },
|
||||||
|
];
|
||||||
|
|
||||||
|
if (bookmarks.length === 0) {
|
||||||
|
items.push({ label: 'No bookmarks yet', enabled: false });
|
||||||
|
} else {
|
||||||
|
for (const b of bookmarks) {
|
||||||
|
const inspected = launchers.inspectFolder(b.path);
|
||||||
|
const submenu = [
|
||||||
|
{ label: 'Open in Explorer', click: () => launchers.openInExplorer(b.path) },
|
||||||
|
{
|
||||||
|
label: 'Open Terminal here',
|
||||||
|
click: () => launchers.openTerminal({ targetPath: b.path, alias: b.alias, color: b.color }),
|
||||||
|
},
|
||||||
|
];
|
||||||
|
// Network shares hide Claude / VS — neither is meaningful there.
|
||||||
|
if (!inspected.isNetwork) {
|
||||||
|
submenu.push({
|
||||||
|
label: 'Open Claude here',
|
||||||
|
click: () => launchers.openClaude({ targetPath: b.path, alias: b.alias, color: b.color }),
|
||||||
|
});
|
||||||
|
submenu.push({
|
||||||
|
label: inspected.slnPath ? 'Open in Visual Studio' : 'Open in Visual Studio (no .sln)',
|
||||||
|
enabled: !!inspected.slnPath,
|
||||||
|
click: () => launchers.openVisualStudio(b.path),
|
||||||
|
});
|
||||||
|
}
|
||||||
|
if (inspected.redeployPath && !b.hideDeploy) {
|
||||||
|
submenu.push({
|
||||||
|
label: 'Run 1ReDeploy.bat',
|
||||||
|
click: () => launchers.runRedeploy(b.path),
|
||||||
|
});
|
||||||
|
}
|
||||||
|
submenu.push({ type: 'separator' });
|
||||||
|
submenu.push({ label: 'Copy path', click: () => launchers.copyPath(b.path) });
|
||||||
|
items.push({
|
||||||
|
label: `${b.alias} — ${truncatePath(b.path)}`,
|
||||||
|
submenu,
|
||||||
|
});
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
items.push({ type: 'separator' });
|
||||||
|
items.push({
|
||||||
|
label: 'Browse for folder…',
|
||||||
|
click: async () => {
|
||||||
|
const picked = await launchers.pickFolder();
|
||||||
|
if (!picked) return;
|
||||||
|
const alias = lastSegment(picked);
|
||||||
|
addBookmarkInternal({ alias, path: picked });
|
||||||
|
},
|
||||||
|
});
|
||||||
|
items.push({
|
||||||
|
label: 'Manage…',
|
||||||
|
click: () => {
|
||||||
|
if (!popupWindow.isVisible()) togglePopup();
|
||||||
|
},
|
||||||
|
});
|
||||||
|
items.push({ type: 'separator' });
|
||||||
|
items.push({
|
||||||
|
label: 'Quit',
|
||||||
|
click: () => {
|
||||||
|
app.isQuitting = true;
|
||||||
|
app.quit();
|
||||||
|
},
|
||||||
|
});
|
||||||
|
|
||||||
|
return Menu.buildFromTemplate(items);
|
||||||
|
}
|
||||||
|
|
||||||
|
function rebuildContextMenu() {
|
||||||
|
if (tray) tray.setContextMenu(buildContextMenu());
|
||||||
|
}
|
||||||
|
|
||||||
|
function lastSegment(p) {
|
||||||
|
if (!p) return '';
|
||||||
|
const parts = p.replace(/[\\/]+$/, '').split(/[\\/]/).filter(Boolean);
|
||||||
|
return parts[parts.length - 1] || p;
|
||||||
|
}
|
||||||
|
|
||||||
|
// Internal helper used by both the tray "Browse for folder…" item and the
|
||||||
|
// add-bookmark IPC handler so they share creation logic.
|
||||||
|
function addBookmarkInternal({ id, alias, path: pathValue, color, columnId, hideDeploy }) {
|
||||||
|
if (!alias || !pathValue) return getBookmarks();
|
||||||
|
const cleanColor = (typeof color === 'string' && /^#[0-9a-fA-F]{6}$/.test(color)) ? color : null;
|
||||||
|
// Treat undefined as "don't touch" (so add-without-flag preserves prior value
|
||||||
|
// on edit). Only true / false explicitly modify the field.
|
||||||
|
const cleanHideDeploy = typeof hideDeploy === 'boolean' ? hideDeploy : undefined;
|
||||||
|
const cfg = readConfig();
|
||||||
|
const cols = Array.isArray(cfg.columns) ? cfg.columns : [];
|
||||||
|
const tabs = Array.isArray(cfg.tabs) ? cfg.tabs : [];
|
||||||
|
let firstColId = cols.length > 0 ? cols[0].id : null;
|
||||||
|
|
||||||
|
// Auto-create a "Main" tab + "Bookmarks" column if none exist yet so new
|
||||||
|
// entries always have somewhere to live.
|
||||||
|
let columnsToWrite = null;
|
||||||
|
let tabsToWrite = null;
|
||||||
|
let activeTabIdToWrite = null;
|
||||||
|
let firstTabId = tabs.length > 0 ? tabs[0].id : null;
|
||||||
|
if (!firstTabId) {
|
||||||
|
const defaultTab = { id: crypto.randomUUID(), name: 'Main' };
|
||||||
|
tabsToWrite = [defaultTab];
|
||||||
|
firstTabId = defaultTab.id;
|
||||||
|
activeTabIdToWrite = defaultTab.id;
|
||||||
|
}
|
||||||
|
if (!firstColId) {
|
||||||
|
const defaultCol = { id: crypto.randomUUID(), name: 'Bookmarks', tabId: firstTabId };
|
||||||
|
columnsToWrite = [defaultCol];
|
||||||
|
firstColId = defaultCol.id;
|
||||||
|
}
|
||||||
|
|
||||||
|
const finalColId = columnId && cols.find((c) => c.id === columnId) ? columnId : firstColId;
|
||||||
|
const list = Array.isArray(cfg.bookmarks) ? cfg.bookmarks.slice() : [];
|
||||||
|
|
||||||
|
if (id) {
|
||||||
|
const idx = list.findIndex((b) => b && b.id === id);
|
||||||
|
if (idx >= 0) {
|
||||||
|
const merged = { ...list[idx], alias, path: pathValue };
|
||||||
|
if (cleanColor) merged.color = cleanColor; else delete merged.color;
|
||||||
|
// Only overwrite columnId when the caller explicitly supplied one.
|
||||||
|
if (columnId !== undefined) merged.columnId = finalColId;
|
||||||
|
if (cleanHideDeploy === true) merged.hideDeploy = true;
|
||||||
|
else if (cleanHideDeploy === false) delete merged.hideDeploy;
|
||||||
|
list[idx] = merged;
|
||||||
|
} else {
|
||||||
|
const entry = {
|
||||||
|
id, alias, path: pathValue,
|
||||||
|
createdAt: new Date().toISOString(),
|
||||||
|
columnId: finalColId,
|
||||||
|
};
|
||||||
|
if (cleanColor) entry.color = cleanColor;
|
||||||
|
if (cleanHideDeploy === true) entry.hideDeploy = true;
|
||||||
|
list.push(entry);
|
||||||
|
}
|
||||||
|
} else {
|
||||||
|
const entry = {
|
||||||
|
id: crypto.randomUUID(),
|
||||||
|
alias,
|
||||||
|
path: pathValue,
|
||||||
|
createdAt: new Date().toISOString(),
|
||||||
|
columnId: finalColId,
|
||||||
|
};
|
||||||
|
if (cleanColor) entry.color = cleanColor;
|
||||||
|
if (cleanHideDeploy === true) entry.hideDeploy = true;
|
||||||
|
list.push(entry);
|
||||||
|
}
|
||||||
|
|
||||||
|
const patch = { bookmarks: list };
|
||||||
|
if (columnsToWrite) patch.columns = columnsToWrite;
|
||||||
|
if (tabsToWrite) patch.tabs = tabsToWrite;
|
||||||
|
if (activeTabIdToWrite) patch.activeTabId = activeTabIdToWrite;
|
||||||
|
writeConfig(patch);
|
||||||
|
rebuildContextMenu();
|
||||||
|
broadcastConfig();
|
||||||
|
return getBookmarks();
|
||||||
|
}
|
||||||
|
|
||||||
|
function createTray() {
|
||||||
|
const image = nativeImage.createFromPath(getIconPath());
|
||||||
|
tray = new Tray(image.isEmpty() ? nativeImage.createEmpty() : image);
|
||||||
|
tray.setToolTip('Folder Bookmark Tray');
|
||||||
|
tray.setContextMenu(buildContextMenu());
|
||||||
|
tray.on('click', togglePopup);
|
||||||
|
}
|
||||||
|
|
||||||
|
// ---- IPC handlers ----
|
||||||
|
|
||||||
|
ipcMain.handle('get-config', () => {
|
||||||
|
const cfg = readConfig();
|
||||||
|
return {
|
||||||
|
...cfg,
|
||||||
|
tabs: getTabs(),
|
||||||
|
columns: getColumns(),
|
||||||
|
bookmarks: getBookmarks(),
|
||||||
|
activeTabId: getActiveTabId(),
|
||||||
|
buttonVisibility: getButtonVisibility(),
|
||||||
|
autoStart: getAutoStart(),
|
||||||
|
};
|
||||||
|
});
|
||||||
|
|
||||||
|
ipcMain.handle('set-auto-start', (_event, value) => {
|
||||||
|
const next = !!value;
|
||||||
|
writeConfig({ autoStart: next });
|
||||||
|
applyAutoStart();
|
||||||
|
broadcastConfig();
|
||||||
|
return getAutoStart();
|
||||||
|
});
|
||||||
|
|
||||||
|
ipcMain.handle('set-button-visibility', (_event, payload) => {
|
||||||
|
if (!payload || typeof payload !== 'object') return getButtonVisibility();
|
||||||
|
const current = getButtonVisibility();
|
||||||
|
const next = {
|
||||||
|
claude: typeof payload.claude === 'boolean' ? payload.claude : current.claude,
|
||||||
|
terminal: typeof payload.terminal === 'boolean' ? payload.terminal : current.terminal,
|
||||||
|
redeploy: typeof payload.redeploy === 'boolean' ? payload.redeploy : current.redeploy,
|
||||||
|
};
|
||||||
|
writeConfig({ buttonVisibility: next });
|
||||||
|
broadcastConfig();
|
||||||
|
return getButtonVisibility();
|
||||||
|
});
|
||||||
|
|
||||||
|
ipcMain.handle('set-config', (_event, patch) => {
|
||||||
|
return writeConfig(patch || {});
|
||||||
|
});
|
||||||
|
|
||||||
|
ipcMain.handle('add-bookmark', (_event, payload) => {
|
||||||
|
if (!payload) return getBookmarks();
|
||||||
|
return addBookmarkInternal(payload);
|
||||||
|
});
|
||||||
|
|
||||||
|
ipcMain.handle('remove-bookmark', (_event, id) => {
|
||||||
|
const cfg = readConfig();
|
||||||
|
const list = (cfg.bookmarks || []).filter((b) => b && b.id !== id);
|
||||||
|
writeConfig({ bookmarks: list });
|
||||||
|
rebuildContextMenu();
|
||||||
|
broadcastConfig();
|
||||||
|
return getBookmarks();
|
||||||
|
});
|
||||||
|
|
||||||
|
ipcMain.handle('reorder-bookmarks', (_event, ids) => {
|
||||||
|
if (!Array.isArray(ids)) return getBookmarks();
|
||||||
|
const current = getBookmarks();
|
||||||
|
const byId = new Map(current.map((b) => [b.id, b]));
|
||||||
|
const reordered = ids.map((id) => byId.get(id)).filter(Boolean);
|
||||||
|
for (const b of current) if (!ids.includes(b.id)) reordered.push(b);
|
||||||
|
writeConfig({ bookmarks: reordered });
|
||||||
|
rebuildContextMenu();
|
||||||
|
broadcastConfig();
|
||||||
|
return getBookmarks();
|
||||||
|
});
|
||||||
|
|
||||||
|
ipcMain.handle('add-column', (_event, payload) => {
|
||||||
|
const name = payload && typeof payload.name === 'string' ? payload.name.trim() : '';
|
||||||
|
if (!name) return getColumns();
|
||||||
|
const cfg = readConfig();
|
||||||
|
const cols = Array.isArray(cfg.columns) ? cfg.columns.slice() : [];
|
||||||
|
const tabs = Array.isArray(cfg.tabs) ? cfg.tabs.slice() : [];
|
||||||
|
const patch = {};
|
||||||
|
// Auto-create a tab if none exists yet so the new column has a parent.
|
||||||
|
let tabId = payload && typeof payload.tabId === 'string' ? payload.tabId : null;
|
||||||
|
if (!tabId || !tabs.find((t) => t.id === tabId)) tabId = getActiveTabId();
|
||||||
|
if (!tabId) {
|
||||||
|
const defaultTab = { id: crypto.randomUUID(), name: 'Main' };
|
||||||
|
tabs.push(defaultTab);
|
||||||
|
tabId = defaultTab.id;
|
||||||
|
patch.tabs = tabs;
|
||||||
|
patch.activeTabId = defaultTab.id;
|
||||||
|
}
|
||||||
|
cols.push({ id: crypto.randomUUID(), name, tabId });
|
||||||
|
patch.columns = cols;
|
||||||
|
writeConfig(patch);
|
||||||
|
rebuildContextMenu();
|
||||||
|
broadcastConfig();
|
||||||
|
return getColumns();
|
||||||
|
});
|
||||||
|
|
||||||
|
ipcMain.handle('rename-column', (_event, payload) => {
|
||||||
|
const id = payload && payload.id;
|
||||||
|
const name = payload && typeof payload.name === 'string' ? payload.name.trim() : '';
|
||||||
|
if (!id || !name) return getColumns();
|
||||||
|
const cfg = readConfig();
|
||||||
|
const cols = (cfg.columns || []).map((c) => (c.id === id ? { ...c, name } : c));
|
||||||
|
writeConfig({ columns: cols });
|
||||||
|
rebuildContextMenu();
|
||||||
|
broadcastConfig();
|
||||||
|
return getColumns();
|
||||||
|
});
|
||||||
|
|
||||||
|
ipcMain.handle('remove-column', (_event, payload) => {
|
||||||
|
const id = payload && payload.id;
|
||||||
|
const reassignTo = payload && payload.reassignTo;
|
||||||
|
if (!id) return { columns: getColumns(), bookmarks: getBookmarks() };
|
||||||
|
const cfg = readConfig();
|
||||||
|
const cols = (cfg.columns || []).filter((c) => c.id !== id);
|
||||||
|
let bookmarks = cfg.bookmarks || [];
|
||||||
|
if (reassignTo && cols.find((c) => c.id === reassignTo)) {
|
||||||
|
bookmarks = bookmarks.map((b) => (b && b.columnId === id ? { ...b, columnId: reassignTo } : b));
|
||||||
|
} else {
|
||||||
|
bookmarks = bookmarks.filter((b) => b && b.columnId !== id);
|
||||||
|
}
|
||||||
|
writeConfig({ columns: cols, bookmarks });
|
||||||
|
rebuildContextMenu();
|
||||||
|
broadcastConfig();
|
||||||
|
return { columns: getColumns(), bookmarks: getBookmarks() };
|
||||||
|
});
|
||||||
|
|
||||||
|
ipcMain.handle('reorder-columns', (_event, ids) => {
|
||||||
|
if (!Array.isArray(ids)) return getColumns();
|
||||||
|
const cfg = readConfig();
|
||||||
|
const byId = new Map((cfg.columns || []).map((c) => [c.id, c]));
|
||||||
|
const reordered = ids.map((id) => byId.get(id)).filter(Boolean);
|
||||||
|
for (const c of (cfg.columns || [])) if (!ids.includes(c.id)) reordered.push(c);
|
||||||
|
writeConfig({ columns: reordered });
|
||||||
|
rebuildContextMenu();
|
||||||
|
broadcastConfig();
|
||||||
|
return getColumns();
|
||||||
|
});
|
||||||
|
|
||||||
|
ipcMain.handle('move-column-to-tab', (_event, payload) => {
|
||||||
|
const columnId = payload && payload.columnId;
|
||||||
|
const tabId = payload && payload.tabId;
|
||||||
|
if (!columnId || !tabId) return { tabs: getTabs(), columns: getColumns(), activeTabId: getActiveTabId() };
|
||||||
|
const cfg = readConfig();
|
||||||
|
const tabs = Array.isArray(cfg.tabs) ? cfg.tabs : [];
|
||||||
|
if (!tabs.find((t) => t.id === tabId)) {
|
||||||
|
return { tabs: getTabs(), columns: getColumns(), activeTabId: getActiveTabId() };
|
||||||
|
}
|
||||||
|
const cols = (cfg.columns || []).map((c) => (c && c.id === columnId ? { ...c, tabId } : c));
|
||||||
|
writeConfig({ columns: cols });
|
||||||
|
rebuildContextMenu();
|
||||||
|
broadcastConfig();
|
||||||
|
return { tabs: getTabs(), columns: getColumns(), activeTabId: getActiveTabId() };
|
||||||
|
});
|
||||||
|
|
||||||
|
ipcMain.handle('add-tab', (_event, payload) => {
|
||||||
|
const name = payload && typeof payload.name === 'string' ? payload.name.trim() : '';
|
||||||
|
if (!name) return { tabs: getTabs(), activeTabId: getActiveTabId() };
|
||||||
|
const cfg = readConfig();
|
||||||
|
const tabs = Array.isArray(cfg.tabs) ? cfg.tabs.slice() : [];
|
||||||
|
const newTab = { id: crypto.randomUUID(), name };
|
||||||
|
tabs.push(newTab);
|
||||||
|
// Switch to the freshly-created tab so the user sees their new (empty) workspace.
|
||||||
|
writeConfig({ tabs, activeTabId: newTab.id });
|
||||||
|
rebuildContextMenu();
|
||||||
|
broadcastConfig();
|
||||||
|
return { tabs: getTabs(), activeTabId: getActiveTabId() };
|
||||||
|
});
|
||||||
|
|
||||||
|
ipcMain.handle('rename-tab', (_event, payload) => {
|
||||||
|
const id = payload && payload.id;
|
||||||
|
const name = payload && typeof payload.name === 'string' ? payload.name.trim() : '';
|
||||||
|
if (!id || !name) return getTabs();
|
||||||
|
const cfg = readConfig();
|
||||||
|
const tabs = (cfg.tabs || []).map((t) => (t.id === id ? { ...t, name } : t));
|
||||||
|
writeConfig({ tabs });
|
||||||
|
rebuildContextMenu();
|
||||||
|
broadcastConfig();
|
||||||
|
return getTabs();
|
||||||
|
});
|
||||||
|
|
||||||
|
ipcMain.handle('remove-tab', (_event, payload) => {
|
||||||
|
const id = payload && payload.id;
|
||||||
|
const reassignTo = payload && payload.reassignTo;
|
||||||
|
if (!id) return { tabs: getTabs(), columns: getColumns(), bookmarks: getBookmarks(), activeTabId: getActiveTabId() };
|
||||||
|
const cfg = readConfig();
|
||||||
|
const remainingTabs = (cfg.tabs || []).filter((t) => t.id !== id);
|
||||||
|
let columns = cfg.columns || [];
|
||||||
|
let bookmarks = cfg.bookmarks || [];
|
||||||
|
if (reassignTo && remainingTabs.find((t) => t.id === reassignTo)) {
|
||||||
|
columns = columns.map((c) => (c && c.tabId === id ? { ...c, tabId: reassignTo } : c));
|
||||||
|
} else {
|
||||||
|
// Cascade: drop columns assigned to this tab, then drop bookmarks orphaned by that.
|
||||||
|
const droppedColIds = new Set(columns.filter((c) => c && c.tabId === id).map((c) => c.id));
|
||||||
|
columns = columns.filter((c) => c && c.tabId !== id);
|
||||||
|
bookmarks = bookmarks.filter((b) => b && !droppedColIds.has(b.columnId));
|
||||||
|
}
|
||||||
|
let activeTabId = cfg.activeTabId === id
|
||||||
|
? (remainingTabs[0] && remainingTabs[0].id) || null
|
||||||
|
: cfg.activeTabId;
|
||||||
|
writeConfig({ tabs: remainingTabs, columns, bookmarks, activeTabId });
|
||||||
|
rebuildContextMenu();
|
||||||
|
broadcastConfig();
|
||||||
|
return { tabs: getTabs(), columns: getColumns(), bookmarks: getBookmarks(), activeTabId: getActiveTabId() };
|
||||||
|
});
|
||||||
|
|
||||||
|
ipcMain.handle('reorder-tabs', (_event, ids) => {
|
||||||
|
if (!Array.isArray(ids)) return getTabs();
|
||||||
|
const cfg = readConfig();
|
||||||
|
const byId = new Map((cfg.tabs || []).map((t) => [t.id, t]));
|
||||||
|
const reordered = ids.map((id) => byId.get(id)).filter(Boolean);
|
||||||
|
for (const t of (cfg.tabs || [])) if (!ids.includes(t.id)) reordered.push(t);
|
||||||
|
writeConfig({ tabs: reordered });
|
||||||
|
rebuildContextMenu();
|
||||||
|
broadcastConfig();
|
||||||
|
return getTabs();
|
||||||
|
});
|
||||||
|
|
||||||
|
ipcMain.handle('set-active-tab', (_event, id) => {
|
||||||
|
const tabs = getTabs();
|
||||||
|
if (!id || !tabs.find((t) => t.id === id)) return getActiveTabId();
|
||||||
|
writeConfig({ activeTabId: id });
|
||||||
|
return getActiveTabId();
|
||||||
|
});
|
||||||
|
|
||||||
|
ipcMain.handle('pick-folder', () => launchers.pickFolder());
|
||||||
|
ipcMain.handle('inspect-folder', (_event, p) => launchers.inspectFolder(p));
|
||||||
|
|
||||||
|
ipcMain.handle('open-in-explorer', (_event, p) => launchers.openInExplorer(p));
|
||||||
|
ipcMain.handle('open-terminal', (_event, payload) => {
|
||||||
|
if (typeof payload === 'string') return launchers.openTerminal({ targetPath: payload });
|
||||||
|
return launchers.openTerminal(payload || {});
|
||||||
|
});
|
||||||
|
ipcMain.handle('open-claude', (_event, payload) => {
|
||||||
|
if (typeof payload === 'string') return launchers.openClaude({ targetPath: payload });
|
||||||
|
return launchers.openClaude(payload || {});
|
||||||
|
});
|
||||||
|
ipcMain.handle('open-visual-studio', (_event, p) => launchers.openVisualStudio(p));
|
||||||
|
ipcMain.handle('run-redeploy', (_event, p) => launchers.runRedeploy(p));
|
||||||
|
ipcMain.handle('copy-path', (_event, text) => launchers.copyPath(text));
|
||||||
|
ipcMain.handle('is-claude-available', () => launchers.isClaudeAvailable());
|
||||||
|
|
||||||
|
ipcMain.handle('set-pinned', (_event, value) => {
|
||||||
|
pinned = !!value;
|
||||||
|
writeConfig({ pinned });
|
||||||
|
if (pinned && popupWindow && popupWindow.isVisible()) {
|
||||||
|
popupWindow.focus();
|
||||||
|
}
|
||||||
|
return pinned;
|
||||||
|
});
|
||||||
|
|
||||||
|
ipcMain.handle('set-popup-height', (_event, h) => {
|
||||||
|
if (!popupWindow || popupWindow.isDestroyed()) return null;
|
||||||
|
const target = Math.max(POPUP_MIN_HEIGHT, Math.min(POPUP_MAX_HEIGHT, Math.round(Number(h) || 0)));
|
||||||
|
if (!Number.isFinite(target) || target <= 0) return null;
|
||||||
|
const bounds = popupWindow.getBounds();
|
||||||
|
popupWindow.setBounds({ x: bounds.x, y: bounds.y, width: bounds.width, height: target });
|
||||||
|
writeConfig({ popupHeight: target });
|
||||||
|
return target;
|
||||||
|
});
|
||||||
|
|
||||||
|
ipcMain.handle('set-popup-width', (_event, w) => {
|
||||||
|
if (!popupWindow || popupWindow.isDestroyed()) return null;
|
||||||
|
const bounds = popupWindow.getBounds();
|
||||||
|
const display = screen.getDisplayNearestPoint({ x: bounds.x, y: bounds.y });
|
||||||
|
const workArea = display.workArea;
|
||||||
|
const maxWidth = Math.max(POPUP_MIN_WIDTH, workArea.width - 8);
|
||||||
|
const target = Math.max(POPUP_MIN_WIDTH, Math.min(maxWidth, Math.round(Number(w) || 0)));
|
||||||
|
if (!Number.isFinite(target) || target <= 0) return null;
|
||||||
|
// Re-clamp x against the work area so a wider popup doesn't fall off-screen.
|
||||||
|
let x = bounds.x;
|
||||||
|
if (x + target > workArea.x + workArea.width - 4) x = workArea.x + workArea.width - target - 4;
|
||||||
|
if (x < workArea.x + 4) x = workArea.x + 4;
|
||||||
|
popupWindow.setBounds({ x, y: bounds.y, width: target, height: bounds.height });
|
||||||
|
writeConfig({ popupWidth: target });
|
||||||
|
return target;
|
||||||
|
});
|
||||||
|
|
||||||
|
app.whenReady().then(() => {
|
||||||
|
if (process.platform === 'win32') {
|
||||||
|
app.setAppUserModelId('com.dbeuttel.folder-bookmark-tray');
|
||||||
|
}
|
||||||
|
migrateConfigIfNeeded();
|
||||||
|
pinned = !!readConfig().pinned;
|
||||||
|
applyAutoStart();
|
||||||
|
createTray();
|
||||||
|
createPopupWindow();
|
||||||
|
});
|
||||||
|
|
||||||
|
app.on('window-all-closed', (e) => e.preventDefault());
|
||||||
|
app.on('before-quit', () => {
|
||||||
|
app.isQuitting = true;
|
||||||
|
});
|
||||||
@@ -0,0 +1,61 @@
|
|||||||
|
const { contextBridge, ipcRenderer } = require('electron');
|
||||||
|
|
||||||
|
contextBridge.exposeInMainWorld('bookmarks', {
|
||||||
|
// Config
|
||||||
|
getConfig: () => ipcRenderer.invoke('get-config'),
|
||||||
|
setConfig: (patch) => ipcRenderer.invoke('set-config', patch),
|
||||||
|
|
||||||
|
// Bookmarks CRUD
|
||||||
|
addBookmark: ({ id, alias, path, color, columnId, hideDeploy }) =>
|
||||||
|
ipcRenderer.invoke('add-bookmark', { id, alias, path, color, columnId, hideDeploy }),
|
||||||
|
removeBookmark: (id) => ipcRenderer.invoke('remove-bookmark', id),
|
||||||
|
reorderBookmarks: (ids) => ipcRenderer.invoke('reorder-bookmarks', ids),
|
||||||
|
|
||||||
|
// Columns CRUD
|
||||||
|
addColumn: (name, tabId) => ipcRenderer.invoke('add-column', { name, tabId }),
|
||||||
|
renameColumn: (id, name) => ipcRenderer.invoke('rename-column', { id, name }),
|
||||||
|
removeColumn: (id, reassignTo) => ipcRenderer.invoke('remove-column', { id, reassignTo }),
|
||||||
|
reorderColumns: (ids) => ipcRenderer.invoke('reorder-columns', ids),
|
||||||
|
moveColumnToTab: (columnId, tabId) => ipcRenderer.invoke('move-column-to-tab', { columnId, tabId }),
|
||||||
|
|
||||||
|
// Tabs CRUD
|
||||||
|
addTab: (name) => ipcRenderer.invoke('add-tab', { name }),
|
||||||
|
renameTab: (id, name) => ipcRenderer.invoke('rename-tab', { id, name }),
|
||||||
|
removeTab: (id, reassignTo) => ipcRenderer.invoke('remove-tab', { id, reassignTo }),
|
||||||
|
reorderTabs: (ids) => ipcRenderer.invoke('reorder-tabs', ids),
|
||||||
|
setActiveTab: (id) => ipcRenderer.invoke('set-active-tab', id),
|
||||||
|
|
||||||
|
// Folder picking + inspection
|
||||||
|
pickFolder: () => ipcRenderer.invoke('pick-folder'),
|
||||||
|
inspectFolder: (path) => ipcRenderer.invoke('inspect-folder', path),
|
||||||
|
|
||||||
|
// Launchers
|
||||||
|
openInExplorer: (path) => ipcRenderer.invoke('open-in-explorer', path),
|
||||||
|
openTerminal: (payload) => ipcRenderer.invoke('open-terminal', payload),
|
||||||
|
openClaude: (payload) => ipcRenderer.invoke('open-claude', payload),
|
||||||
|
openVisualStudio: (path) => ipcRenderer.invoke('open-visual-studio', path),
|
||||||
|
runRedeploy: (path) => ipcRenderer.invoke('run-redeploy', path),
|
||||||
|
copyPath: (text) => ipcRenderer.invoke('copy-path', text),
|
||||||
|
isClaudeAvailable: () => ipcRenderer.invoke('is-claude-available'),
|
||||||
|
|
||||||
|
// Window
|
||||||
|
setPinned: (value) => ipcRenderer.invoke('set-pinned', value),
|
||||||
|
setPopupHeight: (height) => ipcRenderer.invoke('set-popup-height', height),
|
||||||
|
setPopupWidth: (width) => ipcRenderer.invoke('set-popup-width', width),
|
||||||
|
|
||||||
|
// Settings
|
||||||
|
setButtonVisibility: (payload) => ipcRenderer.invoke('set-button-visibility', payload),
|
||||||
|
setAutoStart: (value) => ipcRenderer.invoke('set-auto-start', value),
|
||||||
|
|
||||||
|
// Events from main → renderer
|
||||||
|
onConfigUpdated: (cb) => {
|
||||||
|
const handler = (_event, payload) => cb(payload);
|
||||||
|
ipcRenderer.on('config-updated', handler);
|
||||||
|
return () => ipcRenderer.removeListener('config-updated', handler);
|
||||||
|
},
|
||||||
|
onPopupShown: (cb) => {
|
||||||
|
const handler = () => cb();
|
||||||
|
ipcRenderer.on('popup-shown', handler);
|
||||||
|
return () => ipcRenderer.removeListener('popup-shown', handler);
|
||||||
|
},
|
||||||
|
});
|
||||||
+12
@@ -0,0 +1,12 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8" />
|
||||||
|
<meta http-equiv="Content-Security-Policy" content="default-src 'self'; script-src 'self'; style-src 'self' 'unsafe-inline'; connect-src 'self' http://localhost:5174 ws://localhost:5174" />
|
||||||
|
<title>Folder Bookmark Tray</title>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<div id="root"></div>
|
||||||
|
<script type="module" src="/src/main.jsx"></script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
Generated
+7163
File diff suppressed because it is too large
Load Diff
@@ -0,0 +1,50 @@
|
|||||||
|
{
|
||||||
|
"name": "folder-bookmark-tray",
|
||||||
|
"version": "0.1.0",
|
||||||
|
"description": "Windows system tray app for bookmarking folders with quick-action buttons (Explorer, Terminal, Claude, Visual Studio).",
|
||||||
|
"main": "electron/main.js",
|
||||||
|
"author": "dbeuttel",
|
||||||
|
"license": "MIT",
|
||||||
|
"scripts": {
|
||||||
|
"icon": "node scripts/generate-icon.js",
|
||||||
|
"dev:vite": "vite",
|
||||||
|
"dev:electron": "wait-on http://localhost:5174 && electron .",
|
||||||
|
"dev": "concurrently -k \"npm:dev:vite\" \"npm:dev:electron\"",
|
||||||
|
"build": "vite build",
|
||||||
|
"start": "electron .",
|
||||||
|
"dist": "npm run build && electron-builder",
|
||||||
|
"postinstall": "node scripts/generate-icon.js"
|
||||||
|
},
|
||||||
|
"dependencies": {
|
||||||
|
"react": "^18.3.1",
|
||||||
|
"react-dom": "^18.3.1"
|
||||||
|
},
|
||||||
|
"devDependencies": {
|
||||||
|
"@vitejs/plugin-react": "^4.3.4",
|
||||||
|
"concurrently": "^9.1.2",
|
||||||
|
"electron": "^33.2.1",
|
||||||
|
"electron-builder": "^25.1.8",
|
||||||
|
"vite": "^5.4.11",
|
||||||
|
"wait-on": "^8.0.1"
|
||||||
|
},
|
||||||
|
"build": {
|
||||||
|
"appId": "com.dbeuttel.folder-bookmark-tray",
|
||||||
|
"productName": "Folder Bookmark Tray",
|
||||||
|
"files": [
|
||||||
|
"electron/**/*",
|
||||||
|
"dist/**/*",
|
||||||
|
"assets/**/*"
|
||||||
|
],
|
||||||
|
"win": {
|
||||||
|
"target": "nsis",
|
||||||
|
"icon": "assets/tray-icon.png"
|
||||||
|
},
|
||||||
|
"nsis": {
|
||||||
|
"oneClick": false,
|
||||||
|
"allowToChangeInstallationDirectory": true
|
||||||
|
},
|
||||||
|
"directories": {
|
||||||
|
"output": "build"
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
@@ -0,0 +1,97 @@
|
|||||||
|
// Generates assets/tray-icon.png — a 32x32 folder pictogram in orange on a
|
||||||
|
// transparent background. No external image deps; raw PNG bytes via zlib.
|
||||||
|
// Replace with a designer asset when one is available.
|
||||||
|
|
||||||
|
const fs = require('fs');
|
||||||
|
const path = require('path');
|
||||||
|
const zlib = require('zlib');
|
||||||
|
|
||||||
|
const SIZE = 32;
|
||||||
|
const OUT = path.join(__dirname, '..', 'assets', 'tray-icon.png');
|
||||||
|
|
||||||
|
const ORANGE = [217, 119, 87, 255];
|
||||||
|
const ORANGE_DARK = [180, 92, 64, 255];
|
||||||
|
const TRANSPARENT = [0, 0, 0, 0];
|
||||||
|
|
||||||
|
function colorAt(x, y) {
|
||||||
|
// Folder tab (top): smaller rectangle on the left
|
||||||
|
const tabLeft = 4, tabRight = 13, tabTop = 7, tabBottom = 11;
|
||||||
|
// Folder body: larger rectangle below
|
||||||
|
const bodyLeft = 3, bodyRight = 28, bodyTop = 11, bodyBottom = 25;
|
||||||
|
|
||||||
|
const inTab = x >= tabLeft && x <= tabRight && y >= tabTop && y <= tabBottom;
|
||||||
|
const inBody = x >= bodyLeft && x <= bodyRight && y >= bodyTop && y <= bodyBottom;
|
||||||
|
|
||||||
|
if (!inTab && !inBody) return TRANSPARENT;
|
||||||
|
|
||||||
|
// Soft top edge on body where the tab steps down — paints a single-row
|
||||||
|
// shadow line to give the folder some dimension at small sizes.
|
||||||
|
if (inBody && y === bodyTop && x > tabRight + 1) return ORANGE_DARK;
|
||||||
|
|
||||||
|
return ORANGE;
|
||||||
|
}
|
||||||
|
|
||||||
|
function buildRawImage() {
|
||||||
|
const rowLen = SIZE * 4 + 1;
|
||||||
|
const raw = Buffer.alloc(rowLen * SIZE);
|
||||||
|
for (let y = 0; y < SIZE; y++) {
|
||||||
|
raw[y * rowLen] = 0;
|
||||||
|
for (let x = 0; x < SIZE; x++) {
|
||||||
|
const [r, g, b, a] = colorAt(x, y);
|
||||||
|
const off = y * rowLen + 1 + x * 4;
|
||||||
|
raw[off] = r;
|
||||||
|
raw[off + 1] = g;
|
||||||
|
raw[off + 2] = b;
|
||||||
|
raw[off + 3] = a;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
return raw;
|
||||||
|
}
|
||||||
|
|
||||||
|
function crc32(buf) {
|
||||||
|
let c;
|
||||||
|
const table = crc32.table || (crc32.table = (() => {
|
||||||
|
const t = new Uint32Array(256);
|
||||||
|
for (let n = 0; n < 256; n++) {
|
||||||
|
let v = n;
|
||||||
|
for (let k = 0; k < 8; k++) v = (v & 1) ? (0xedb88320 ^ (v >>> 1)) : (v >>> 1);
|
||||||
|
t[n] = v >>> 0;
|
||||||
|
}
|
||||||
|
return t;
|
||||||
|
})());
|
||||||
|
c = 0xffffffff;
|
||||||
|
for (let i = 0; i < buf.length; i++) c = table[(c ^ buf[i]) & 0xff] ^ (c >>> 8);
|
||||||
|
return (c ^ 0xffffffff) >>> 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
function chunk(type, data) {
|
||||||
|
const len = Buffer.alloc(4);
|
||||||
|
len.writeUInt32BE(data.length, 0);
|
||||||
|
const typeBuf = Buffer.from(type, 'ascii');
|
||||||
|
const crcBuf = Buffer.alloc(4);
|
||||||
|
crcBuf.writeUInt32BE(crc32(Buffer.concat([typeBuf, data])), 0);
|
||||||
|
return Buffer.concat([len, typeBuf, data, crcBuf]);
|
||||||
|
}
|
||||||
|
|
||||||
|
function buildPng() {
|
||||||
|
const sig = Buffer.from([137, 80, 78, 71, 13, 10, 26, 10]);
|
||||||
|
const ihdr = Buffer.alloc(13);
|
||||||
|
ihdr.writeUInt32BE(SIZE, 0);
|
||||||
|
ihdr.writeUInt32BE(SIZE, 4);
|
||||||
|
ihdr[8] = 8; // bit depth
|
||||||
|
ihdr[9] = 6; // color type RGBA
|
||||||
|
ihdr[10] = 0; // compression
|
||||||
|
ihdr[11] = 0; // filter
|
||||||
|
ihdr[12] = 0; // interlace
|
||||||
|
const idat = zlib.deflateSync(buildRawImage());
|
||||||
|
return Buffer.concat([
|
||||||
|
sig,
|
||||||
|
chunk('IHDR', ihdr),
|
||||||
|
chunk('IDAT', idat),
|
||||||
|
chunk('IEND', Buffer.alloc(0)),
|
||||||
|
]);
|
||||||
|
}
|
||||||
|
|
||||||
|
fs.mkdirSync(path.dirname(OUT), { recursive: true });
|
||||||
|
fs.writeFileSync(OUT, buildPng());
|
||||||
|
console.log(`Wrote ${OUT}`);
|
||||||
+232
@@ -0,0 +1,232 @@
|
|||||||
|
import React, { useEffect, useState, useCallback, useMemo } from 'react';
|
||||||
|
import Popup from './components/Popup.jsx';
|
||||||
|
|
||||||
|
export default function App() {
|
||||||
|
const [tabs, setTabs] = useState([]);
|
||||||
|
const [activeTabId, setActiveTabId] = useState(null);
|
||||||
|
const [columns, setColumns] = useState([]);
|
||||||
|
const [bookmarks, setBookmarks] = useState([]);
|
||||||
|
const [pinned, setPinned] = useState(false);
|
||||||
|
const [loading, setLoading] = useState(true);
|
||||||
|
const [claudeAvailable, setClaudeAvailable] = useState(true);
|
||||||
|
const [buttonVisibility, setButtonVisibility] = useState({ claude: true, terminal: true, redeploy: true });
|
||||||
|
const [autoStart, setAutoStart] = useState(true);
|
||||||
|
// Bumped on each popup show so BookmarkRow re-runs its folder inspect.
|
||||||
|
// Rows stay mounted across hide/show cycles, so without a revision tick
|
||||||
|
// they'd never notice newly-added .sln or 1ReDeploy.bat files.
|
||||||
|
const [inspectRevision, setInspectRevision] = useState(0);
|
||||||
|
|
||||||
|
const loadConfig = useCallback(async () => {
|
||||||
|
const [cfg, hasClaude] = await Promise.all([
|
||||||
|
window.bookmarks.getConfig(),
|
||||||
|
window.bookmarks.isClaudeAvailable(),
|
||||||
|
]);
|
||||||
|
setTabs(Array.isArray(cfg.tabs) ? cfg.tabs : []);
|
||||||
|
setActiveTabId(cfg.activeTabId || null);
|
||||||
|
setColumns(Array.isArray(cfg.columns) ? cfg.columns : []);
|
||||||
|
setBookmarks(Array.isArray(cfg.bookmarks) ? cfg.bookmarks : []);
|
||||||
|
setPinned(!!cfg.pinned);
|
||||||
|
setClaudeAvailable(!!hasClaude);
|
||||||
|
if (cfg.buttonVisibility) {
|
||||||
|
setButtonVisibility({
|
||||||
|
claude: cfg.buttonVisibility.claude !== false,
|
||||||
|
terminal: cfg.buttonVisibility.terminal !== false,
|
||||||
|
redeploy: cfg.buttonVisibility.redeploy !== false,
|
||||||
|
});
|
||||||
|
}
|
||||||
|
setAutoStart(cfg.autoStart !== false);
|
||||||
|
setLoading(false);
|
||||||
|
}, []);
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
loadConfig();
|
||||||
|
const offConfig = window.bookmarks.onConfigUpdated((payload) => {
|
||||||
|
if (!payload) return;
|
||||||
|
if (Array.isArray(payload.tabs)) setTabs(payload.tabs);
|
||||||
|
if (Array.isArray(payload.columns)) setColumns(payload.columns);
|
||||||
|
if (Array.isArray(payload.bookmarks)) setBookmarks(payload.bookmarks);
|
||||||
|
if (typeof payload.activeTabId === 'string' || payload.activeTabId === null) {
|
||||||
|
setActiveTabId(payload.activeTabId);
|
||||||
|
}
|
||||||
|
if (payload.buttonVisibility) {
|
||||||
|
setButtonVisibility({
|
||||||
|
claude: payload.buttonVisibility.claude !== false,
|
||||||
|
terminal: payload.buttonVisibility.terminal !== false,
|
||||||
|
redeploy: payload.buttonVisibility.redeploy !== false,
|
||||||
|
});
|
||||||
|
}
|
||||||
|
if (typeof payload.autoStart === 'boolean') setAutoStart(payload.autoStart);
|
||||||
|
});
|
||||||
|
const offShown = window.bookmarks.onPopupShown(() => {
|
||||||
|
setInspectRevision((r) => r + 1);
|
||||||
|
});
|
||||||
|
return () => { offConfig(); offShown(); };
|
||||||
|
}, [loadConfig]);
|
||||||
|
|
||||||
|
const handleAdd = useCallback(async ({ alias, path, color, columnId }) => {
|
||||||
|
const next = await window.bookmarks.addBookmark({ alias, path, color, columnId });
|
||||||
|
setBookmarks(next || []);
|
||||||
|
}, []);
|
||||||
|
|
||||||
|
const handleEdit = useCallback(async ({ id, alias, path, color, columnId, hideDeploy }) => {
|
||||||
|
const next = await window.bookmarks.addBookmark({ id, alias, path, color, columnId, hideDeploy });
|
||||||
|
setBookmarks(next || []);
|
||||||
|
}, []);
|
||||||
|
|
||||||
|
const handleRemove = useCallback(async (id) => {
|
||||||
|
const next = await window.bookmarks.removeBookmark(id);
|
||||||
|
setBookmarks(next || []);
|
||||||
|
}, []);
|
||||||
|
|
||||||
|
const handleMoveBookmark = useCallback(async (id, delta) => {
|
||||||
|
const target = bookmarks.find((b) => b.id === id);
|
||||||
|
if (!target) return;
|
||||||
|
const colMates = bookmarks.filter((b) => b.columnId === target.columnId);
|
||||||
|
const idx = colMates.findIndex((b) => b.id === id);
|
||||||
|
const swapIdx = idx + delta;
|
||||||
|
if (idx < 0 || swapIdx < 0 || swapIdx >= colMates.length) return;
|
||||||
|
const aId = colMates[idx].id;
|
||||||
|
const bId = colMates[swapIdx].id;
|
||||||
|
const newIds = bookmarks.map((b) => {
|
||||||
|
if (b.id === aId) return bId;
|
||||||
|
if (b.id === bId) return aId;
|
||||||
|
return b.id;
|
||||||
|
});
|
||||||
|
const next = await window.bookmarks.reorderBookmarks(newIds);
|
||||||
|
setBookmarks(next || []);
|
||||||
|
}, [bookmarks]);
|
||||||
|
|
||||||
|
const handleAddColumn = useCallback(async (name) => {
|
||||||
|
const next = await window.bookmarks.addColumn(name, activeTabId);
|
||||||
|
setColumns(next || []);
|
||||||
|
}, [activeTabId]);
|
||||||
|
|
||||||
|
const handleRenameColumn = useCallback(async (id, name) => {
|
||||||
|
const next = await window.bookmarks.renameColumn(id, name);
|
||||||
|
setColumns(next || []);
|
||||||
|
}, []);
|
||||||
|
|
||||||
|
const handleRemoveColumn = useCallback(async (id, reassignTo) => {
|
||||||
|
const res = await window.bookmarks.removeColumn(id, reassignTo);
|
||||||
|
if (res && Array.isArray(res.columns)) setColumns(res.columns);
|
||||||
|
if (res && Array.isArray(res.bookmarks)) setBookmarks(res.bookmarks);
|
||||||
|
}, []);
|
||||||
|
|
||||||
|
const handleReorderColumns = useCallback(async (ids) => {
|
||||||
|
const next = await window.bookmarks.reorderColumns(ids);
|
||||||
|
setColumns(next || []);
|
||||||
|
}, []);
|
||||||
|
|
||||||
|
const handleMoveColumnToTab = useCallback(async (columnId, tabId) => {
|
||||||
|
const res = await window.bookmarks.moveColumnToTab(columnId, tabId);
|
||||||
|
if (res && Array.isArray(res.columns)) setColumns(res.columns);
|
||||||
|
if (res && Array.isArray(res.tabs)) setTabs(res.tabs);
|
||||||
|
}, []);
|
||||||
|
|
||||||
|
const handleAddTab = useCallback(async (name) => {
|
||||||
|
const res = await window.bookmarks.addTab(name);
|
||||||
|
if (res && Array.isArray(res.tabs)) setTabs(res.tabs);
|
||||||
|
if (res && res.activeTabId) setActiveTabId(res.activeTabId);
|
||||||
|
}, []);
|
||||||
|
|
||||||
|
const handleRenameTab = useCallback(async (id, name) => {
|
||||||
|
const next = await window.bookmarks.renameTab(id, name);
|
||||||
|
setTabs(next || []);
|
||||||
|
}, []);
|
||||||
|
|
||||||
|
const handleRemoveTab = useCallback(async (id, reassignTo) => {
|
||||||
|
const res = await window.bookmarks.removeTab(id, reassignTo);
|
||||||
|
if (res && Array.isArray(res.tabs)) setTabs(res.tabs);
|
||||||
|
if (res && Array.isArray(res.columns)) setColumns(res.columns);
|
||||||
|
if (res && Array.isArray(res.bookmarks)) setBookmarks(res.bookmarks);
|
||||||
|
if (res && (typeof res.activeTabId === 'string' || res.activeTabId === null)) {
|
||||||
|
setActiveTabId(res.activeTabId);
|
||||||
|
}
|
||||||
|
}, []);
|
||||||
|
|
||||||
|
const handleReorderTabs = useCallback(async (ids) => {
|
||||||
|
const next = await window.bookmarks.reorderTabs(ids);
|
||||||
|
setTabs(next || []);
|
||||||
|
}, []);
|
||||||
|
|
||||||
|
const handleSelectTab = useCallback(async (id) => {
|
||||||
|
setActiveTabId(id);
|
||||||
|
await window.bookmarks.setActiveTab(id);
|
||||||
|
}, []);
|
||||||
|
|
||||||
|
const handleTogglePin = useCallback(async () => {
|
||||||
|
const next = await window.bookmarks.setPinned(!pinned);
|
||||||
|
setPinned(!!next);
|
||||||
|
}, [pinned]);
|
||||||
|
|
||||||
|
const handleSetButtonVisibility = useCallback(async (patch) => {
|
||||||
|
// Optimistic update so the checkbox flips immediately even before main responds.
|
||||||
|
setButtonVisibility((prev) => ({ ...prev, ...patch }));
|
||||||
|
const next = await window.bookmarks.setButtonVisibility(patch);
|
||||||
|
if (next) setButtonVisibility({
|
||||||
|
claude: next.claude !== false,
|
||||||
|
terminal: next.terminal !== false,
|
||||||
|
redeploy: next.redeploy !== false,
|
||||||
|
});
|
||||||
|
}, []);
|
||||||
|
|
||||||
|
const handleSetAutoStart = useCallback(async (value) => {
|
||||||
|
setAutoStart(value);
|
||||||
|
const next = await window.bookmarks.setAutoStart(value);
|
||||||
|
if (typeof next === 'boolean') setAutoStart(next);
|
||||||
|
}, []);
|
||||||
|
|
||||||
|
const recentColors = useMemo(() => {
|
||||||
|
const seen = new Set();
|
||||||
|
const ordered = [];
|
||||||
|
for (const b of bookmarks) {
|
||||||
|
if (b && typeof b.color === 'string' && /^#[0-9a-fA-F]{6}$/.test(b.color)) {
|
||||||
|
const c = b.color.toLowerCase();
|
||||||
|
if (!seen.has(c)) { seen.add(c); ordered.push(c); }
|
||||||
|
}
|
||||||
|
}
|
||||||
|
return ordered;
|
||||||
|
}, [bookmarks]);
|
||||||
|
|
||||||
|
if (loading) {
|
||||||
|
return (
|
||||||
|
<div className="app loading">
|
||||||
|
<div className="spinner" />
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="app">
|
||||||
|
<Popup
|
||||||
|
tabs={tabs}
|
||||||
|
activeTabId={activeTabId}
|
||||||
|
columns={columns}
|
||||||
|
bookmarks={bookmarks}
|
||||||
|
pinned={pinned}
|
||||||
|
claudeAvailable={claudeAvailable}
|
||||||
|
inspectRevision={inspectRevision}
|
||||||
|
recentColors={recentColors}
|
||||||
|
buttonVisibility={buttonVisibility}
|
||||||
|
onSetButtonVisibility={handleSetButtonVisibility}
|
||||||
|
autoStart={autoStart}
|
||||||
|
onSetAutoStart={handleSetAutoStart}
|
||||||
|
onTogglePin={handleTogglePin}
|
||||||
|
onAdd={handleAdd}
|
||||||
|
onEdit={handleEdit}
|
||||||
|
onRemove={handleRemove}
|
||||||
|
onMoveBookmark={handleMoveBookmark}
|
||||||
|
onAddColumn={handleAddColumn}
|
||||||
|
onRenameColumn={handleRenameColumn}
|
||||||
|
onRemoveColumn={handleRemoveColumn}
|
||||||
|
onReorderColumns={handleReorderColumns}
|
||||||
|
onMoveColumnToTab={handleMoveColumnToTab}
|
||||||
|
onAddTab={handleAddTab}
|
||||||
|
onRenameTab={handleRenameTab}
|
||||||
|
onRemoveTab={handleRemoveTab}
|
||||||
|
onReorderTabs={handleReorderTabs}
|
||||||
|
onSelectTab={handleSelectTab}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
@@ -0,0 +1,67 @@
|
|||||||
|
import React, { useState } from 'react';
|
||||||
|
import { ColorPicker } from './BookmarkRow.jsx';
|
||||||
|
|
||||||
|
export default function AddBookmarkForm({ columnId, recentColors, onAdd, onCancel }) {
|
||||||
|
const [alias, setAlias] = useState('');
|
||||||
|
const [pathValue, setPathValue] = useState('');
|
||||||
|
const [color, setColor] = useState('');
|
||||||
|
const [busy, setBusy] = useState(false);
|
||||||
|
|
||||||
|
const handleBrowse = async () => {
|
||||||
|
const picked = await window.bookmarks.pickFolder();
|
||||||
|
if (!picked) return;
|
||||||
|
setPathValue(picked);
|
||||||
|
if (!alias.trim()) {
|
||||||
|
const parts = picked.replace(/[\\/]+$/, '').split(/[\\/]/).filter(Boolean);
|
||||||
|
setAlias(parts[parts.length - 1] || picked);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleAdd = async () => {
|
||||||
|
if (!alias.trim() || !pathValue.trim()) return;
|
||||||
|
setBusy(true);
|
||||||
|
try {
|
||||||
|
await onAdd({
|
||||||
|
alias: alias.trim(),
|
||||||
|
path: pathValue.trim(),
|
||||||
|
color: color || null,
|
||||||
|
columnId,
|
||||||
|
});
|
||||||
|
setAlias('');
|
||||||
|
setPathValue('');
|
||||||
|
setColor('');
|
||||||
|
} finally {
|
||||||
|
setBusy(false);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
const canAdd = alias.trim() && pathValue.trim() && !busy;
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="add-bookmark">
|
||||||
|
<div className="add-bookmark-label">Add bookmark</div>
|
||||||
|
<input
|
||||||
|
className="api-key-input small"
|
||||||
|
value={alias}
|
||||||
|
onChange={(e) => setAlias(e.target.value)}
|
||||||
|
placeholder="Alias (also used as terminal tab title)"
|
||||||
|
/>
|
||||||
|
<div className="add-path-row">
|
||||||
|
<input
|
||||||
|
className="api-key-input small"
|
||||||
|
value={pathValue}
|
||||||
|
onChange={(e) => setPathValue(e.target.value)}
|
||||||
|
placeholder="Folder path"
|
||||||
|
/>
|
||||||
|
<button className="secondary" onClick={handleBrowse} disabled={busy}>Browse</button>
|
||||||
|
</div>
|
||||||
|
<ColorPicker value={color} onChange={setColor} recentColors={recentColors} />
|
||||||
|
<div className="add-actions">
|
||||||
|
<button className="primary" onClick={handleAdd} disabled={!canAdd}>Add</button>
|
||||||
|
{onCancel && (
|
||||||
|
<button className="secondary" onClick={onCancel} disabled={busy}>Cancel</button>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
@@ -0,0 +1,335 @@
|
|||||||
|
import React, { useEffect, useRef, useState } from 'react';
|
||||||
|
|
||||||
|
export default function BookmarkRow({
|
||||||
|
bookmark,
|
||||||
|
columns,
|
||||||
|
claudeAvailable,
|
||||||
|
inspectRevision,
|
||||||
|
recentColors,
|
||||||
|
buttonVisibility,
|
||||||
|
canMoveUp,
|
||||||
|
canMoveDown,
|
||||||
|
onEdit,
|
||||||
|
onRemove,
|
||||||
|
onMoveUp,
|
||||||
|
onMoveDown,
|
||||||
|
}) {
|
||||||
|
const showClaude = !buttonVisibility || buttonVisibility.claude !== false;
|
||||||
|
const showTerminal = !buttonVisibility || buttonVisibility.terminal !== false;
|
||||||
|
const showRedeploy = !buttonVisibility || buttonVisibility.redeploy !== false;
|
||||||
|
const [mode, setMode] = useState('view');
|
||||||
|
const [menuOpen, setMenuOpen] = useState(false);
|
||||||
|
const [inspect, setInspect] = useState({
|
||||||
|
checked: false,
|
||||||
|
slnPath: null,
|
||||||
|
redeployPath: null,
|
||||||
|
isNetwork: false,
|
||||||
|
});
|
||||||
|
const [status, setStatus] = useState(null);
|
||||||
|
const menuRef = useRef(null);
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
let cancelled = false;
|
||||||
|
setInspect({ checked: false, slnPath: null, redeployPath: null, isNetwork: false });
|
||||||
|
window.bookmarks.inspectFolder(bookmark.path).then((res) => {
|
||||||
|
if (cancelled) return;
|
||||||
|
setInspect({
|
||||||
|
checked: true,
|
||||||
|
slnPath: res ? res.slnPath : null,
|
||||||
|
redeployPath: res ? res.redeployPath : null,
|
||||||
|
isNetwork: !!(res && res.isNetwork),
|
||||||
|
});
|
||||||
|
});
|
||||||
|
return () => { cancelled = true; };
|
||||||
|
}, [bookmark.path, inspectRevision]);
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
if (!menuOpen) return undefined;
|
||||||
|
const onClick = (e) => {
|
||||||
|
if (menuRef.current && !menuRef.current.contains(e.target)) setMenuOpen(false);
|
||||||
|
};
|
||||||
|
document.addEventListener('mousedown', onClick);
|
||||||
|
return () => document.removeEventListener('mousedown', onClick);
|
||||||
|
}, [menuOpen]);
|
||||||
|
|
||||||
|
const flash = (kind, text) => {
|
||||||
|
setStatus({ kind, text });
|
||||||
|
setTimeout(() => setStatus(null), 2200);
|
||||||
|
};
|
||||||
|
|
||||||
|
const runPathAction = async (fn, label) => {
|
||||||
|
const res = await fn(bookmark.path);
|
||||||
|
if (res && res.ok === false) {
|
||||||
|
flash('error', `${label}: ${res.error || 'failed'}`);
|
||||||
|
} else {
|
||||||
|
flash('info', `${label} ✓`);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
const runTabAction = async (fn, label) => {
|
||||||
|
const res = await fn({
|
||||||
|
targetPath: bookmark.path,
|
||||||
|
alias: bookmark.alias,
|
||||||
|
color: bookmark.color,
|
||||||
|
});
|
||||||
|
if (res && res.ok === false) {
|
||||||
|
flash('error', `${label}: ${res.error || 'failed'}`);
|
||||||
|
} else if (res && res.focused) {
|
||||||
|
flash('info', `${label}: focused existing tab`);
|
||||||
|
} else {
|
||||||
|
flash('info', `${label}: opened new tab`);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleCopy = async () => {
|
||||||
|
setMenuOpen(false);
|
||||||
|
const res = await window.bookmarks.copyPath(bookmark.path);
|
||||||
|
if (res && res.ok === false) flash('error', res.error || 'Copy failed');
|
||||||
|
else flash('info', 'Path copied');
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleRemove = () => {
|
||||||
|
setMenuOpen(false);
|
||||||
|
if (window.confirm(`Remove bookmark "${bookmark.alias}"?`)) onRemove(bookmark.id);
|
||||||
|
};
|
||||||
|
|
||||||
|
const startEdit = () => {
|
||||||
|
setMenuOpen(false);
|
||||||
|
setMode('edit');
|
||||||
|
};
|
||||||
|
|
||||||
|
if (mode === 'edit') {
|
||||||
|
return (
|
||||||
|
<EditForm
|
||||||
|
bookmark={bookmark}
|
||||||
|
columns={columns}
|
||||||
|
recentColors={recentColors}
|
||||||
|
redeployPath={inspect.redeployPath}
|
||||||
|
onCancel={() => setMode('view')}
|
||||||
|
onSave={async ({ alias, path, color, columnId, hideDeploy }) => {
|
||||||
|
await onEdit({ id: bookmark.id, alias, path, color, columnId, hideDeploy });
|
||||||
|
setMode('view');
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
const stripeStyle = bookmark.color ? { borderLeftColor: bookmark.color } : undefined;
|
||||||
|
|
||||||
|
return (
|
||||||
|
<li className={`bookmark-row${bookmark.color ? ' has-color' : ''}`} style={stripeStyle}>
|
||||||
|
<div className="bookmark-row-head">
|
||||||
|
<div className="bookmark-meta">
|
||||||
|
<strong className="bookmark-alias">{bookmark.alias}</strong>
|
||||||
|
<span className="bookmark-path" title={bookmark.path}>{bookmark.path}</span>
|
||||||
|
</div>
|
||||||
|
<div className="bookmark-overflow" ref={menuRef}>
|
||||||
|
<button
|
||||||
|
className="icon-button"
|
||||||
|
title="More"
|
||||||
|
onClick={() => setMenuOpen((v) => !v)}
|
||||||
|
>⋯</button>
|
||||||
|
{menuOpen && (
|
||||||
|
<div className="bookmark-menu">
|
||||||
|
<button
|
||||||
|
onClick={() => { setMenuOpen(false); onMoveUp(); }}
|
||||||
|
disabled={!canMoveUp}
|
||||||
|
>Move up</button>
|
||||||
|
<button
|
||||||
|
onClick={() => { setMenuOpen(false); onMoveDown(); }}
|
||||||
|
disabled={!canMoveDown}
|
||||||
|
>Move down</button>
|
||||||
|
<button onClick={handleCopy}>Copy path</button>
|
||||||
|
<button onClick={startEdit}>Edit</button>
|
||||||
|
<button className="danger" onClick={handleRemove}>Remove</button>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div className="bookmark-actions">
|
||||||
|
<button
|
||||||
|
className="icon-button"
|
||||||
|
title={inspect.isNetwork ? 'Open network share in Explorer' : 'Open in Explorer'}
|
||||||
|
onClick={() => runPathAction(window.bookmarks.openInExplorer, 'Explorer')}
|
||||||
|
>📁</button>
|
||||||
|
{showTerminal && (
|
||||||
|
<button
|
||||||
|
className="icon-button"
|
||||||
|
title={`Open Terminal for "${bookmark.alias}" (focuses existing tab if found)`}
|
||||||
|
onClick={() => runTabAction(window.bookmarks.openTerminal, 'Terminal')}
|
||||||
|
>>_</button>
|
||||||
|
)}
|
||||||
|
{!inspect.isNetwork && (
|
||||||
|
<>
|
||||||
|
{showClaude && (
|
||||||
|
<button
|
||||||
|
className="icon-button"
|
||||||
|
title={
|
||||||
|
claudeAvailable
|
||||||
|
? `Open Claude for "${bookmark.alias}" (focuses existing tab if found)`
|
||||||
|
: 'Claude CLI not found on PATH — install @anthropic-ai/claude-code'
|
||||||
|
}
|
||||||
|
disabled={!claudeAvailable}
|
||||||
|
onClick={() => runTabAction(window.bookmarks.openClaude, 'Claude')}
|
||||||
|
>C</button>
|
||||||
|
)}
|
||||||
|
<button
|
||||||
|
className="icon-button"
|
||||||
|
title={
|
||||||
|
!inspect.checked ? 'Checking for .sln…'
|
||||||
|
: inspect.slnPath ? `Open ${inspect.slnPath.split(/[\\/]/).pop()} in Visual Studio`
|
||||||
|
: 'No .sln found in this folder'
|
||||||
|
}
|
||||||
|
disabled={!inspect.checked || !inspect.slnPath}
|
||||||
|
onClick={() => runPathAction(window.bookmarks.openVisualStudio, 'Visual Studio')}
|
||||||
|
>VS</button>
|
||||||
|
</>
|
||||||
|
)}
|
||||||
|
{showRedeploy && inspect.redeployPath && !bookmark.hideDeploy && (
|
||||||
|
<button
|
||||||
|
className="icon-button"
|
||||||
|
title={`Run ${inspect.redeployPath.split(/[\\/]/).pop()}`}
|
||||||
|
onClick={() => runPathAction(window.bookmarks.runRedeploy, 'Deploy')}
|
||||||
|
>▶</button>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
{status && (
|
||||||
|
<div className={`row-status ${status.kind === 'error' ? 'error' : 'info'}`}>
|
||||||
|
{status.text}
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</li>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
function EditForm({ bookmark, columns, recentColors, redeployPath, onSave, onCancel }) {
|
||||||
|
const [alias, setAlias] = useState(bookmark.alias);
|
||||||
|
const [pathValue, setPathValue] = useState(bookmark.path);
|
||||||
|
const [color, setColor] = useState(bookmark.color || '');
|
||||||
|
const [columnId, setColumnId] = useState(bookmark.columnId || (columns[0] && columns[0].id) || '');
|
||||||
|
const [hideDeploy, setHideDeploy] = useState(!!bookmark.hideDeploy);
|
||||||
|
const [busy, setBusy] = useState(false);
|
||||||
|
|
||||||
|
const handleBrowse = async () => {
|
||||||
|
const picked = await window.bookmarks.pickFolder();
|
||||||
|
if (picked) setPathValue(picked);
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleSave = async () => {
|
||||||
|
if (!alias.trim() || !pathValue.trim()) return;
|
||||||
|
setBusy(true);
|
||||||
|
try {
|
||||||
|
await onSave({
|
||||||
|
alias: alias.trim(),
|
||||||
|
path: pathValue.trim(),
|
||||||
|
color: color || null,
|
||||||
|
columnId: columnId || null,
|
||||||
|
hideDeploy,
|
||||||
|
});
|
||||||
|
} finally {
|
||||||
|
setBusy(false);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
return (
|
||||||
|
<li className="bookmark-row editing" style={color ? { borderLeftColor: color } : undefined}>
|
||||||
|
<div className="bookmark-edit">
|
||||||
|
<label className="edit-label">Alias</label>
|
||||||
|
<input
|
||||||
|
className="api-key-input small"
|
||||||
|
value={alias}
|
||||||
|
onChange={(e) => setAlias(e.target.value)}
|
||||||
|
placeholder="Display name (also used as terminal tab title)"
|
||||||
|
/>
|
||||||
|
<label className="edit-label">Path</label>
|
||||||
|
<div className="edit-path-row">
|
||||||
|
<input
|
||||||
|
className="api-key-input small"
|
||||||
|
value={pathValue}
|
||||||
|
onChange={(e) => setPathValue(e.target.value)}
|
||||||
|
placeholder="C:\\path\\to\\folder"
|
||||||
|
/>
|
||||||
|
<button className="secondary" onClick={handleBrowse}>Browse</button>
|
||||||
|
</div>
|
||||||
|
<ColorPicker value={color} onChange={setColor} recentColors={recentColors} />
|
||||||
|
{columns.length > 1 && (
|
||||||
|
<ColumnPicker columns={columns} value={columnId} onChange={setColumnId} />
|
||||||
|
)}
|
||||||
|
{redeployPath && (
|
||||||
|
<label className="edit-toggle">
|
||||||
|
<input
|
||||||
|
type="checkbox"
|
||||||
|
checked={hideDeploy}
|
||||||
|
onChange={(e) => setHideDeploy(e.target.checked)}
|
||||||
|
/>
|
||||||
|
<span>Hide deploy button</span>
|
||||||
|
</label>
|
||||||
|
)}
|
||||||
|
<div className="edit-actions">
|
||||||
|
<button
|
||||||
|
className="primary"
|
||||||
|
onClick={handleSave}
|
||||||
|
disabled={busy || !alias.trim() || !pathValue.trim()}
|
||||||
|
>Save</button>
|
||||||
|
<button className="secondary" onClick={onCancel} disabled={busy}>Cancel</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</li>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
function ColorPicker({ value, onChange, recentColors = [] }) {
|
||||||
|
const valueLower = value ? value.toLowerCase() : '';
|
||||||
|
return (
|
||||||
|
<div className="color-picker-row">
|
||||||
|
<label className="edit-label">Tab color</label>
|
||||||
|
<div className="color-picker-controls">
|
||||||
|
<input
|
||||||
|
type="color"
|
||||||
|
className="color-swatch"
|
||||||
|
value={value || '#d97757'}
|
||||||
|
onChange={(e) => onChange(e.target.value)}
|
||||||
|
aria-label="Pick tab color"
|
||||||
|
/>
|
||||||
|
<span className="color-hex">{value || '(none)'}</span>
|
||||||
|
{value && (
|
||||||
|
<button className="link-button" type="button" onClick={() => onChange('')}>Clear</button>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
{recentColors.length > 0 && (
|
||||||
|
<div className="color-recent-row" role="listbox" aria-label="Previously used colors">
|
||||||
|
{recentColors.map((c) => (
|
||||||
|
<button
|
||||||
|
key={c}
|
||||||
|
type="button"
|
||||||
|
className={`recent-swatch${valueLower === c ? ' active' : ''}`}
|
||||||
|
style={{ background: c }}
|
||||||
|
title={c}
|
||||||
|
aria-label={`Use ${c}`}
|
||||||
|
onClick={() => onChange(c)}
|
||||||
|
/>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
function ColumnPicker({ columns, value, onChange }) {
|
||||||
|
return (
|
||||||
|
<div className="column-picker-row">
|
||||||
|
<label className="edit-label">Column</label>
|
||||||
|
<select
|
||||||
|
className="api-key-input small"
|
||||||
|
value={value || ''}
|
||||||
|
onChange={(e) => onChange(e.target.value)}
|
||||||
|
>
|
||||||
|
{columns.map((c) => (
|
||||||
|
<option key={c.id} value={c.id}>{c.name}</option>
|
||||||
|
))}
|
||||||
|
</select>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
export { ColorPicker };
|
||||||
@@ -0,0 +1,215 @@
|
|||||||
|
import React, { useEffect, useRef, useState, useCallback } from 'react';
|
||||||
|
import BookmarkRow from './BookmarkRow.jsx';
|
||||||
|
import AddBookmarkForm from './AddBookmarkForm.jsx';
|
||||||
|
|
||||||
|
export default function Column({
|
||||||
|
column,
|
||||||
|
columns,
|
||||||
|
tabs,
|
||||||
|
bookmarks,
|
||||||
|
claudeAvailable,
|
||||||
|
inspectRevision,
|
||||||
|
recentColors,
|
||||||
|
buttonVisibility,
|
||||||
|
canMoveLeft,
|
||||||
|
canMoveRight,
|
||||||
|
onAdd,
|
||||||
|
onEdit,
|
||||||
|
onRemove,
|
||||||
|
onMoveBookmark,
|
||||||
|
onRenameColumn,
|
||||||
|
onRemoveColumn,
|
||||||
|
onMoveColumnToTab,
|
||||||
|
onMoveLeft,
|
||||||
|
onMoveRight,
|
||||||
|
onRequestConfirm,
|
||||||
|
}) {
|
||||||
|
const [renaming, setRenaming] = useState(false);
|
||||||
|
const [draftName, setDraftName] = useState(column.name);
|
||||||
|
const [menuOpen, setMenuOpen] = useState(false);
|
||||||
|
const [moveTabOpen, setMoveTabOpen] = useState(false);
|
||||||
|
const [addOpen, setAddOpen] = useState(false);
|
||||||
|
const menuRef = useRef(null);
|
||||||
|
|
||||||
|
const handleAddSubmitted = useCallback(async (payload) => {
|
||||||
|
await onAdd(payload);
|
||||||
|
setAddOpen(false);
|
||||||
|
}, [onAdd]);
|
||||||
|
|
||||||
|
useEffect(() => { setDraftName(column.name); }, [column.name]);
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
if (!menuOpen) return undefined;
|
||||||
|
const onClick = (e) => {
|
||||||
|
if (menuRef.current && !menuRef.current.contains(e.target)) {
|
||||||
|
setMenuOpen(false);
|
||||||
|
setMoveTabOpen(false);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
document.addEventListener('mousedown', onClick);
|
||||||
|
return () => document.removeEventListener('mousedown', onClick);
|
||||||
|
}, [menuOpen]);
|
||||||
|
|
||||||
|
const submitRename = async () => {
|
||||||
|
const name = draftName.trim();
|
||||||
|
if (!name || name === column.name) { setRenaming(false); setDraftName(column.name); return; }
|
||||||
|
await onRenameColumn(column.id, name);
|
||||||
|
setRenaming(false);
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleDelete = () => {
|
||||||
|
setMenuOpen(false);
|
||||||
|
const count = bookmarks.length;
|
||||||
|
const otherCols = columns.filter((c) => c.id !== column.id);
|
||||||
|
const ask = onRequestConfirm || ((opts) => { if (window.confirm(`${opts.title}\n\n${opts.message || ''}`)) opts.onConfirm(); });
|
||||||
|
if (count === 0) {
|
||||||
|
ask({
|
||||||
|
title: `Delete column "${column.name}"?`,
|
||||||
|
message: 'This column has no bookmarks. It will be removed.',
|
||||||
|
confirmLabel: 'Delete column',
|
||||||
|
confirmKind: 'danger',
|
||||||
|
onConfirm: () => onRemoveColumn(column.id),
|
||||||
|
});
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
if (otherCols.length === 0) {
|
||||||
|
const word = count === 1 ? 'bookmark' : 'bookmarks';
|
||||||
|
ask({
|
||||||
|
title: `Delete column "${column.name}"?`,
|
||||||
|
message: `This will permanently delete ${count} ${word}.`,
|
||||||
|
confirmLabel: 'Delete everything',
|
||||||
|
confirmKind: 'danger',
|
||||||
|
onConfirm: () => onRemoveColumn(column.id),
|
||||||
|
});
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
const target = otherCols[0];
|
||||||
|
const word = count === 1 ? 'bookmark' : 'bookmarks';
|
||||||
|
ask({
|
||||||
|
title: `Delete column "${column.name}"?`,
|
||||||
|
message: `This column has ${count} ${word}. Move them to "${target.name}", or delete everything?`,
|
||||||
|
confirmLabel: `Move to "${target.name}"`,
|
||||||
|
confirmKind: 'primary',
|
||||||
|
extraActions: [
|
||||||
|
{
|
||||||
|
label: 'Delete with bookmarks',
|
||||||
|
kind: 'danger',
|
||||||
|
onClick: () => onRemoveColumn(column.id),
|
||||||
|
},
|
||||||
|
],
|
||||||
|
onConfirm: () => onRemoveColumn(column.id, target.id),
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
|
const otherTabs = (tabs || []).filter((t) => t.id !== column.tabId);
|
||||||
|
|
||||||
|
return (
|
||||||
|
<section className="column">
|
||||||
|
<header className="column-header">
|
||||||
|
{!renaming ? (
|
||||||
|
<h2
|
||||||
|
className="column-title"
|
||||||
|
title="Click to rename"
|
||||||
|
onClick={() => setRenaming(true)}
|
||||||
|
>{column.name}</h2>
|
||||||
|
) : (
|
||||||
|
<input
|
||||||
|
autoFocus
|
||||||
|
className="api-key-input small column-rename-input"
|
||||||
|
value={draftName}
|
||||||
|
onChange={(e) => setDraftName(e.target.value)}
|
||||||
|
onBlur={submitRename}
|
||||||
|
onKeyDown={(e) => {
|
||||||
|
if (e.key === 'Enter') submitRename();
|
||||||
|
else if (e.key === 'Escape') { setRenaming(false); setDraftName(column.name); }
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
)}
|
||||||
|
<div className="column-overflow" ref={menuRef}>
|
||||||
|
<button
|
||||||
|
className="icon-button"
|
||||||
|
title="Column options"
|
||||||
|
onClick={() => { setMenuOpen((v) => !v); setMoveTabOpen(false); }}
|
||||||
|
>⋯</button>
|
||||||
|
{menuOpen && (
|
||||||
|
<div className="bookmark-menu">
|
||||||
|
<button onClick={() => { setMenuOpen(false); setRenaming(true); }}>Rename</button>
|
||||||
|
<button
|
||||||
|
onClick={() => { setMenuOpen(false); onMoveLeft(); }}
|
||||||
|
disabled={!canMoveLeft}
|
||||||
|
>Move left</button>
|
||||||
|
<button
|
||||||
|
onClick={() => { setMenuOpen(false); onMoveRight(); }}
|
||||||
|
disabled={!canMoveRight}
|
||||||
|
>Move right</button>
|
||||||
|
{otherTabs.length > 0 && onMoveColumnToTab && (
|
||||||
|
moveTabOpen ? (
|
||||||
|
<div className="bookmark-submenu">
|
||||||
|
<div className="bookmark-submenu-label">Move to tab</div>
|
||||||
|
{otherTabs.map((t) => (
|
||||||
|
<button
|
||||||
|
key={t.id}
|
||||||
|
onClick={() => {
|
||||||
|
setMoveTabOpen(false);
|
||||||
|
setMenuOpen(false);
|
||||||
|
onMoveColumnToTab(column.id, t.id);
|
||||||
|
}}
|
||||||
|
>{t.name}</button>
|
||||||
|
))}
|
||||||
|
<button
|
||||||
|
className="submenu-back"
|
||||||
|
onClick={() => setMoveTabOpen(false)}
|
||||||
|
>← Back</button>
|
||||||
|
</div>
|
||||||
|
) : (
|
||||||
|
<button onClick={() => setMoveTabOpen(true)}>Move to tab ▸</button>
|
||||||
|
)
|
||||||
|
)}
|
||||||
|
<button className="danger" onClick={handleDelete}>Delete column</button>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
</header>
|
||||||
|
|
||||||
|
{bookmarks.length === 0 ? (
|
||||||
|
<div className="empty-state column-empty">No bookmarks here yet.</div>
|
||||||
|
) : (
|
||||||
|
<ul className="bookmark-list">
|
||||||
|
{bookmarks.map((b, idx) => (
|
||||||
|
<BookmarkRow
|
||||||
|
key={b.id}
|
||||||
|
bookmark={b}
|
||||||
|
columns={columns}
|
||||||
|
claudeAvailable={claudeAvailable}
|
||||||
|
inspectRevision={inspectRevision}
|
||||||
|
recentColors={recentColors}
|
||||||
|
buttonVisibility={buttonVisibility}
|
||||||
|
canMoveUp={idx > 0}
|
||||||
|
canMoveDown={idx < bookmarks.length - 1}
|
||||||
|
onEdit={onEdit}
|
||||||
|
onRemove={onRemove}
|
||||||
|
onMoveUp={() => onMoveBookmark(b.id, -1)}
|
||||||
|
onMoveDown={() => onMoveBookmark(b.id, 1)}
|
||||||
|
/>
|
||||||
|
))}
|
||||||
|
</ul>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{addOpen ? (
|
||||||
|
<AddBookmarkForm
|
||||||
|
columnId={column.id}
|
||||||
|
recentColors={recentColors}
|
||||||
|
onAdd={handleAddSubmitted}
|
||||||
|
onCancel={() => setAddOpen(false)}
|
||||||
|
/>
|
||||||
|
) : (
|
||||||
|
<button
|
||||||
|
type="button"
|
||||||
|
className="add-bookmark-trigger"
|
||||||
|
title="Add bookmark"
|
||||||
|
onClick={() => setAddOpen(true)}
|
||||||
|
>+</button>
|
||||||
|
)}
|
||||||
|
</section>
|
||||||
|
);
|
||||||
|
}
|
||||||
@@ -0,0 +1,57 @@
|
|||||||
|
import React, { useEffect } from 'react';
|
||||||
|
|
||||||
|
export default function ConfirmDialog({
|
||||||
|
title,
|
||||||
|
message,
|
||||||
|
confirmLabel = 'Confirm',
|
||||||
|
confirmKind = 'primary',
|
||||||
|
cancelLabel = 'Cancel',
|
||||||
|
extraActions = [],
|
||||||
|
onConfirm,
|
||||||
|
onCancel,
|
||||||
|
}) {
|
||||||
|
// Esc cancels; Enter confirms unless focus is on a different action.
|
||||||
|
useEffect(() => {
|
||||||
|
const onKey = (e) => {
|
||||||
|
if (e.key === 'Escape') {
|
||||||
|
e.preventDefault();
|
||||||
|
onCancel();
|
||||||
|
} else if (e.key === 'Enter') {
|
||||||
|
e.preventDefault();
|
||||||
|
onConfirm();
|
||||||
|
}
|
||||||
|
};
|
||||||
|
document.addEventListener('keydown', onKey);
|
||||||
|
return () => document.removeEventListener('keydown', onKey);
|
||||||
|
}, [onConfirm, onCancel]);
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="confirm-overlay" onClick={onCancel}>
|
||||||
|
<div className="confirm-dialog" onClick={(e) => e.stopPropagation()}>
|
||||||
|
<div className="confirm-title">{title}</div>
|
||||||
|
{message && <div className="confirm-message">{message}</div>}
|
||||||
|
<div className="confirm-actions">
|
||||||
|
<button
|
||||||
|
className="secondary"
|
||||||
|
onClick={onCancel}
|
||||||
|
type="button"
|
||||||
|
>{cancelLabel}</button>
|
||||||
|
{extraActions.map((a, idx) => (
|
||||||
|
<button
|
||||||
|
key={idx}
|
||||||
|
className={a.kind === 'danger' ? 'primary danger-button' : 'secondary'}
|
||||||
|
onClick={() => { a.onClick(); onCancel(); }}
|
||||||
|
type="button"
|
||||||
|
>{a.label}</button>
|
||||||
|
))}
|
||||||
|
<button
|
||||||
|
autoFocus
|
||||||
|
className={confirmKind === 'danger' ? 'primary danger-button' : 'primary'}
|
||||||
|
onClick={() => { onConfirm(); onCancel(); }}
|
||||||
|
type="button"
|
||||||
|
>{confirmLabel}</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
@@ -0,0 +1,308 @@
|
|||||||
|
import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
|
||||||
|
import Column from './Column.jsx';
|
||||||
|
import TabBar from './TabBar.jsx';
|
||||||
|
import ConfirmDialog from './ConfirmDialog.jsx';
|
||||||
|
|
||||||
|
const COLUMN_WIDTH = 216;
|
||||||
|
// Padding budget so the popup doesn't clip the tab strip: popup-inner has
|
||||||
|
// 14px each side and the tab-bar adds 2px breathing room on either side.
|
||||||
|
const TAB_STRIP_PADDING = 32;
|
||||||
|
|
||||||
|
export default function Popup({
|
||||||
|
tabs,
|
||||||
|
activeTabId,
|
||||||
|
columns,
|
||||||
|
bookmarks,
|
||||||
|
pinned,
|
||||||
|
claudeAvailable,
|
||||||
|
inspectRevision,
|
||||||
|
recentColors,
|
||||||
|
buttonVisibility,
|
||||||
|
onSetButtonVisibility,
|
||||||
|
autoStart,
|
||||||
|
onSetAutoStart,
|
||||||
|
onTogglePin,
|
||||||
|
onAdd,
|
||||||
|
onEdit,
|
||||||
|
onRemove,
|
||||||
|
onMoveBookmark,
|
||||||
|
onAddColumn,
|
||||||
|
onRenameColumn,
|
||||||
|
onRemoveColumn,
|
||||||
|
onReorderColumns,
|
||||||
|
onMoveColumnToTab,
|
||||||
|
onAddTab,
|
||||||
|
onRenameTab,
|
||||||
|
onRemoveTab,
|
||||||
|
onReorderTabs,
|
||||||
|
onSelectTab,
|
||||||
|
}) {
|
||||||
|
const rootRef = useRef(null);
|
||||||
|
const heightDebounceRef = useRef(null);
|
||||||
|
const settingsRef = useRef(null);
|
||||||
|
const tabStripRef = useRef(null);
|
||||||
|
const [creatingColumn, setCreatingColumn] = useState(false);
|
||||||
|
const [draftColumnName, setDraftColumnName] = useState('');
|
||||||
|
const [settingsOpen, setSettingsOpen] = useState(false);
|
||||||
|
const [confirmRequest, setConfirmRequest] = useState(null);
|
||||||
|
const [tabStripScrollWidth, setTabStripScrollWidth] = useState(0);
|
||||||
|
|
||||||
|
const requestConfirm = useCallback((opts) => {
|
||||||
|
setConfirmRequest(opts);
|
||||||
|
}, []);
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
if (!settingsOpen) return undefined;
|
||||||
|
const onClick = (e) => {
|
||||||
|
if (settingsRef.current && !settingsRef.current.contains(e.target)) setSettingsOpen(false);
|
||||||
|
};
|
||||||
|
document.addEventListener('mousedown', onClick);
|
||||||
|
return () => document.removeEventListener('mousedown', onClick);
|
||||||
|
}, [settingsOpen]);
|
||||||
|
|
||||||
|
// Columns belonging to the active tab. Keep stable order from the global
|
||||||
|
// columns array so cross-tab moves don't shuffle siblings.
|
||||||
|
const visibleColumns = useMemo(
|
||||||
|
() => columns.filter((c) => c.tabId === activeTabId),
|
||||||
|
[columns, activeTabId],
|
||||||
|
);
|
||||||
|
|
||||||
|
// Auto-fit window height to inner content (capped in main).
|
||||||
|
useEffect(() => {
|
||||||
|
if (!rootRef.current) return;
|
||||||
|
const observer = new ResizeObserver((entries) => {
|
||||||
|
for (const entry of entries) {
|
||||||
|
const h = entry.target.offsetHeight;
|
||||||
|
if (heightDebounceRef.current) clearTimeout(heightDebounceRef.current);
|
||||||
|
heightDebounceRef.current = setTimeout(() => {
|
||||||
|
window.bookmarks.setPopupHeight(h);
|
||||||
|
}, 100);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
observer.observe(rootRef.current);
|
||||||
|
return () => {
|
||||||
|
observer.disconnect();
|
||||||
|
if (heightDebounceRef.current) clearTimeout(heightDebounceRef.current);
|
||||||
|
};
|
||||||
|
}, []);
|
||||||
|
|
||||||
|
// Watch the tab strip's scrollWidth so renames or new tabs widen the popup.
|
||||||
|
// ResizeObserver picks up both layout changes (window width changes) and
|
||||||
|
// content changes (a tab rename growing the strip).
|
||||||
|
useEffect(() => {
|
||||||
|
if (!tabStripRef.current) return undefined;
|
||||||
|
const update = () => {
|
||||||
|
const el = tabStripRef.current;
|
||||||
|
if (!el) return;
|
||||||
|
setTabStripScrollWidth(el.scrollWidth);
|
||||||
|
};
|
||||||
|
update();
|
||||||
|
const observer = new ResizeObserver(update);
|
||||||
|
observer.observe(tabStripRef.current);
|
||||||
|
// Re-measure after children mutate (tabs added / renamed) so growth shows
|
||||||
|
// up even when the strip element itself hasn't resized yet.
|
||||||
|
const mutation = new MutationObserver(update);
|
||||||
|
mutation.observe(tabStripRef.current, { childList: true, subtree: true, characterData: true });
|
||||||
|
return () => { observer.disconnect(); mutation.disconnect(); };
|
||||||
|
}, []);
|
||||||
|
|
||||||
|
// Resize window width to max(columns-required, tabs-required). Main clamps
|
||||||
|
// to the screen's work area, so wide tab strips either fit (most monitors)
|
||||||
|
// or scroll horizontally inside the popup once they would push it off-screen.
|
||||||
|
useEffect(() => {
|
||||||
|
const colsWidth = Math.max(1, visibleColumns.length || 1) * COLUMN_WIDTH;
|
||||||
|
const tabsWidth = tabStripScrollWidth > 0 ? tabStripScrollWidth + TAB_STRIP_PADDING : 0;
|
||||||
|
window.bookmarks.setPopupWidth(Math.max(colsWidth, tabsWidth));
|
||||||
|
}, [visibleColumns.length, tabStripScrollWidth]);
|
||||||
|
|
||||||
|
const submitNewColumn = async () => {
|
||||||
|
const name = draftColumnName.trim();
|
||||||
|
if (!name) { setCreatingColumn(false); setDraftColumnName(''); return; }
|
||||||
|
await onAddColumn(name);
|
||||||
|
setCreatingColumn(false);
|
||||||
|
setDraftColumnName('');
|
||||||
|
};
|
||||||
|
|
||||||
|
const moveColumn = (id, delta) => {
|
||||||
|
// Reorder within the active tab only — convert local delta into a global
|
||||||
|
// ids array that preserves all other tabs' columns in place.
|
||||||
|
const visibleIds = visibleColumns.map((c) => c.id);
|
||||||
|
const idx = visibleIds.indexOf(id);
|
||||||
|
const target = idx + delta;
|
||||||
|
if (idx < 0 || target < 0 || target >= visibleIds.length) return;
|
||||||
|
const swappedVisible = visibleIds.slice();
|
||||||
|
[swappedVisible[idx], swappedVisible[target]] = [swappedVisible[target], swappedVisible[idx]];
|
||||||
|
const visibleSet = new Set(visibleIds);
|
||||||
|
let visiblePtr = 0;
|
||||||
|
const next = columns.map((c) => {
|
||||||
|
if (visibleSet.has(c.id)) {
|
||||||
|
const replacementId = swappedVisible[visiblePtr++];
|
||||||
|
return replacementId;
|
||||||
|
}
|
||||||
|
return c.id;
|
||||||
|
});
|
||||||
|
onReorderColumns(next);
|
||||||
|
};
|
||||||
|
|
||||||
|
const hasNoTabs = tabs.length === 0;
|
||||||
|
const hasNoColumns = !hasNoTabs && visibleColumns.length === 0;
|
||||||
|
const canAddColumn = !hasNoTabs && !!activeTabId;
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="popup">
|
||||||
|
<div className="popup-inner" ref={rootRef}>
|
||||||
|
<div className="popup-header drag-region">
|
||||||
|
<h1>Folder Bookmarks</h1>
|
||||||
|
<div className="header-actions">
|
||||||
|
{!creatingColumn ? (
|
||||||
|
<button
|
||||||
|
className="icon-button"
|
||||||
|
onClick={() => setCreatingColumn(true)}
|
||||||
|
title={canAddColumn ? 'Add a new column to this tab' : 'Add a tab first'}
|
||||||
|
disabled={!canAddColumn}
|
||||||
|
>+</button>
|
||||||
|
) : (
|
||||||
|
<div className="header-add-column">
|
||||||
|
<input
|
||||||
|
autoFocus
|
||||||
|
className="api-key-input small"
|
||||||
|
value={draftColumnName}
|
||||||
|
onChange={(e) => setDraftColumnName(e.target.value)}
|
||||||
|
placeholder="Column name"
|
||||||
|
onKeyDown={(e) => {
|
||||||
|
if (e.key === 'Enter') submitNewColumn();
|
||||||
|
else if (e.key === 'Escape') {
|
||||||
|
setCreatingColumn(false);
|
||||||
|
setDraftColumnName('');
|
||||||
|
}
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
<button className="icon-button" onClick={submitNewColumn} title="Add">✓</button>
|
||||||
|
<button
|
||||||
|
className="icon-button"
|
||||||
|
onClick={() => { setCreatingColumn(false); setDraftColumnName(''); }}
|
||||||
|
title="Cancel"
|
||||||
|
>×</button>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
<div className="popup-settings" ref={settingsRef}>
|
||||||
|
<button
|
||||||
|
className={`icon-button ${settingsOpen ? 'active' : ''}`}
|
||||||
|
onClick={() => setSettingsOpen((v) => !v)}
|
||||||
|
title="Display settings"
|
||||||
|
>⚙</button>
|
||||||
|
{settingsOpen && (
|
||||||
|
<div className="settings-panel">
|
||||||
|
<div className="settings-panel-label">Row buttons</div>
|
||||||
|
<label className="edit-toggle">
|
||||||
|
<input
|
||||||
|
type="checkbox"
|
||||||
|
checked={buttonVisibility.claude !== false}
|
||||||
|
onChange={(e) => onSetButtonVisibility({ claude: e.target.checked })}
|
||||||
|
/>
|
||||||
|
<span>Show Claude button</span>
|
||||||
|
</label>
|
||||||
|
<label className="edit-toggle">
|
||||||
|
<input
|
||||||
|
type="checkbox"
|
||||||
|
checked={buttonVisibility.terminal !== false}
|
||||||
|
onChange={(e) => onSetButtonVisibility({ terminal: e.target.checked })}
|
||||||
|
/>
|
||||||
|
<span>Show Terminal button</span>
|
||||||
|
</label>
|
||||||
|
<label className="edit-toggle">
|
||||||
|
<input
|
||||||
|
type="checkbox"
|
||||||
|
checked={buttonVisibility.redeploy !== false}
|
||||||
|
onChange={(e) => onSetButtonVisibility({ redeploy: e.target.checked })}
|
||||||
|
/>
|
||||||
|
<span>Quick Run Redeploy</span>
|
||||||
|
</label>
|
||||||
|
<div className="settings-panel-label">Startup</div>
|
||||||
|
<label className="edit-toggle">
|
||||||
|
<input
|
||||||
|
type="checkbox"
|
||||||
|
checked={autoStart !== false}
|
||||||
|
onChange={(e) => onSetAutoStart(e.target.checked)}
|
||||||
|
/>
|
||||||
|
<span>Start with Windows</span>
|
||||||
|
</label>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
<button
|
||||||
|
className={`icon-button ${pinned ? 'active' : ''}`}
|
||||||
|
onClick={onTogglePin}
|
||||||
|
title={pinned ? 'Unpin (close on focus loss)' : 'Pin (keep open)'}
|
||||||
|
>
|
||||||
|
{pinned ? '📌' : '📍'}
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<TabBar
|
||||||
|
tabs={tabs}
|
||||||
|
activeTabId={activeTabId}
|
||||||
|
columns={columns}
|
||||||
|
stripRef={tabStripRef}
|
||||||
|
onSelect={onSelectTab}
|
||||||
|
onAdd={onAddTab}
|
||||||
|
onRename={onRenameTab}
|
||||||
|
onRemove={onRemoveTab}
|
||||||
|
onReorder={onReorderTabs}
|
||||||
|
onRequestConfirm={requestConfirm}
|
||||||
|
/>
|
||||||
|
|
||||||
|
{hasNoTabs ? (
|
||||||
|
<div className="empty-state">
|
||||||
|
No tabs yet — click <strong>+</strong> in the tab bar to create your first.
|
||||||
|
</div>
|
||||||
|
) : hasNoColumns ? (
|
||||||
|
<div className="empty-state">
|
||||||
|
No columns in this tab — click <strong>+</strong> in the header to add one.
|
||||||
|
</div>
|
||||||
|
) : (
|
||||||
|
<div className="columns-row">
|
||||||
|
{visibleColumns.map((col, idx) => (
|
||||||
|
<Column
|
||||||
|
key={col.id}
|
||||||
|
column={col}
|
||||||
|
columns={visibleColumns}
|
||||||
|
tabs={tabs}
|
||||||
|
index={idx}
|
||||||
|
bookmarks={bookmarks.filter((b) => b.columnId === col.id)}
|
||||||
|
claudeAvailable={claudeAvailable}
|
||||||
|
inspectRevision={inspectRevision}
|
||||||
|
recentColors={recentColors}
|
||||||
|
buttonVisibility={buttonVisibility}
|
||||||
|
canMoveLeft={idx > 0}
|
||||||
|
canMoveRight={idx < visibleColumns.length - 1}
|
||||||
|
onAdd={onAdd}
|
||||||
|
onEdit={onEdit}
|
||||||
|
onRemove={onRemove}
|
||||||
|
onMoveBookmark={onMoveBookmark}
|
||||||
|
onRenameColumn={onRenameColumn}
|
||||||
|
onRemoveColumn={onRemoveColumn}
|
||||||
|
onMoveColumnToTab={onMoveColumnToTab}
|
||||||
|
onMoveLeft={() => moveColumn(col.id, -1)}
|
||||||
|
onMoveRight={() => moveColumn(col.id, 1)}
|
||||||
|
onRequestConfirm={requestConfirm}
|
||||||
|
/>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
{confirmRequest && (
|
||||||
|
<ConfirmDialog
|
||||||
|
{...confirmRequest}
|
||||||
|
onCancel={() => setConfirmRequest(null)}
|
||||||
|
onConfirm={() => {
|
||||||
|
const fn = confirmRequest.onConfirm;
|
||||||
|
setConfirmRequest(null);
|
||||||
|
if (typeof fn === 'function') fn();
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
@@ -0,0 +1,207 @@
|
|||||||
|
import React, { useEffect, useRef, useState } from 'react';
|
||||||
|
|
||||||
|
export default function TabBar({
|
||||||
|
tabs,
|
||||||
|
activeTabId,
|
||||||
|
columns,
|
||||||
|
stripRef,
|
||||||
|
onSelect,
|
||||||
|
onAdd,
|
||||||
|
onRename,
|
||||||
|
onRemove,
|
||||||
|
onReorder,
|
||||||
|
onRequestConfirm,
|
||||||
|
}) {
|
||||||
|
const [creating, setCreating] = useState(false);
|
||||||
|
const [draftName, setDraftName] = useState('');
|
||||||
|
|
||||||
|
const submitNew = async () => {
|
||||||
|
const name = draftName.trim();
|
||||||
|
if (!name) { setCreating(false); setDraftName(''); return; }
|
||||||
|
await onAdd(name);
|
||||||
|
setCreating(false);
|
||||||
|
setDraftName('');
|
||||||
|
};
|
||||||
|
|
||||||
|
const moveTab = (id, delta) => {
|
||||||
|
const ids = tabs.map((t) => t.id);
|
||||||
|
const idx = ids.indexOf(id);
|
||||||
|
const target = idx + delta;
|
||||||
|
if (idx < 0 || target < 0 || target >= ids.length) return;
|
||||||
|
const next = ids.slice();
|
||||||
|
[next[idx], next[target]] = [next[target], next[idx]];
|
||||||
|
onReorder(next);
|
||||||
|
};
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="tab-bar">
|
||||||
|
<div className="tab-strip" ref={stripRef}>
|
||||||
|
{tabs.map((t, idx) => (
|
||||||
|
<Tab
|
||||||
|
key={t.id}
|
||||||
|
tab={t}
|
||||||
|
active={t.id === activeTabId}
|
||||||
|
columnCount={columns.filter((c) => c.tabId === t.id).length}
|
||||||
|
tabs={tabs}
|
||||||
|
canMoveLeft={idx > 0}
|
||||||
|
canMoveRight={idx < tabs.length - 1}
|
||||||
|
onSelect={() => onSelect(t.id)}
|
||||||
|
onRename={(name) => onRename(t.id, name)}
|
||||||
|
onRemove={(reassignTo) => onRemove(t.id, reassignTo)}
|
||||||
|
onMoveLeft={() => moveTab(t.id, -1)}
|
||||||
|
onMoveRight={() => moveTab(t.id, 1)}
|
||||||
|
onRequestConfirm={onRequestConfirm}
|
||||||
|
/>
|
||||||
|
))}
|
||||||
|
{creating ? (
|
||||||
|
<div className="tab-add-input">
|
||||||
|
<input
|
||||||
|
autoFocus
|
||||||
|
className="api-key-input small"
|
||||||
|
value={draftName}
|
||||||
|
onChange={(e) => setDraftName(e.target.value)}
|
||||||
|
placeholder="Tab name"
|
||||||
|
onBlur={submitNew}
|
||||||
|
onKeyDown={(e) => {
|
||||||
|
if (e.key === 'Enter') submitNew();
|
||||||
|
else if (e.key === 'Escape') { setCreating(false); setDraftName(''); }
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
) : (
|
||||||
|
<button
|
||||||
|
type="button"
|
||||||
|
className="tab-add-trigger"
|
||||||
|
title="Add a new tab"
|
||||||
|
onClick={() => setCreating(true)}
|
||||||
|
>+</button>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
function Tab({ tab, active, columnCount, tabs, canMoveLeft, canMoveRight, onSelect, onRename, onRemove, onMoveLeft, onMoveRight, onRequestConfirm }) {
|
||||||
|
const [renaming, setRenaming] = useState(false);
|
||||||
|
const [draftName, setDraftName] = useState(tab.name);
|
||||||
|
const [menuOpen, setMenuOpen] = useState(false);
|
||||||
|
const menuRef = useRef(null);
|
||||||
|
|
||||||
|
useEffect(() => { setDraftName(tab.name); }, [tab.name]);
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
if (!menuOpen) return undefined;
|
||||||
|
const onClick = (e) => {
|
||||||
|
if (menuRef.current && !menuRef.current.contains(e.target)) setMenuOpen(false);
|
||||||
|
};
|
||||||
|
document.addEventListener('mousedown', onClick);
|
||||||
|
return () => document.removeEventListener('mousedown', onClick);
|
||||||
|
}, [menuOpen]);
|
||||||
|
|
||||||
|
const submitRename = async () => {
|
||||||
|
const name = draftName.trim();
|
||||||
|
if (!name || name === tab.name) { setRenaming(false); setDraftName(tab.name); return; }
|
||||||
|
await onRename(name);
|
||||||
|
setRenaming(false);
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleDelete = () => {
|
||||||
|
setMenuOpen(false);
|
||||||
|
const otherTabs = tabs.filter((t) => t.id !== tab.id);
|
||||||
|
if (columnCount === 0) {
|
||||||
|
onRequestConfirm({
|
||||||
|
title: `Delete tab "${tab.name}"?`,
|
||||||
|
message: 'This tab has no columns. It will be removed.',
|
||||||
|
confirmLabel: 'Delete tab',
|
||||||
|
confirmKind: 'danger',
|
||||||
|
onConfirm: () => onRemove(null),
|
||||||
|
});
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
if (otherTabs.length === 0) {
|
||||||
|
const colWord = columnCount === 1 ? 'column' : 'columns';
|
||||||
|
onRequestConfirm({
|
||||||
|
title: `Delete tab "${tab.name}"?`,
|
||||||
|
message: `This will permanently delete ${columnCount} ${colWord} and every bookmark inside.`,
|
||||||
|
confirmLabel: 'Delete everything',
|
||||||
|
confirmKind: 'danger',
|
||||||
|
onConfirm: () => onRemove(null),
|
||||||
|
});
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
const target = otherTabs[0];
|
||||||
|
const colWord = columnCount === 1 ? 'column' : 'columns';
|
||||||
|
onRequestConfirm({
|
||||||
|
title: `Delete tab "${tab.name}"?`,
|
||||||
|
message: `This tab has ${columnCount} ${colWord}. Move them to "${target.name}", or delete everything?`,
|
||||||
|
confirmLabel: `Move to "${target.name}"`,
|
||||||
|
confirmKind: 'primary',
|
||||||
|
extraActions: [
|
||||||
|
{
|
||||||
|
label: 'Delete with bookmarks',
|
||||||
|
kind: 'danger',
|
||||||
|
onClick: () => onRemove(null),
|
||||||
|
},
|
||||||
|
],
|
||||||
|
onConfirm: () => onRemove(target.id),
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
|
if (renaming) {
|
||||||
|
return (
|
||||||
|
<div className={`tab${active ? ' active' : ''} renaming`}>
|
||||||
|
<input
|
||||||
|
autoFocus
|
||||||
|
className="api-key-input small tab-rename-input"
|
||||||
|
value={draftName}
|
||||||
|
onChange={(e) => setDraftName(e.target.value)}
|
||||||
|
onBlur={submitRename}
|
||||||
|
onKeyDown={(e) => {
|
||||||
|
if (e.key === 'Enter') submitRename();
|
||||||
|
else if (e.key === 'Escape') { setRenaming(false); setDraftName(tab.name); }
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className={`tab${active ? ' active' : ''}`}>
|
||||||
|
<button
|
||||||
|
type="button"
|
||||||
|
className="tab-label"
|
||||||
|
title={`Switch to "${tab.name}"`}
|
||||||
|
onClick={onSelect}
|
||||||
|
onDoubleClick={() => setRenaming(true)}
|
||||||
|
>{tab.name}</button>
|
||||||
|
<span className="tab-overflow" ref={menuRef}>
|
||||||
|
<button
|
||||||
|
type="button"
|
||||||
|
className="tab-rename-btn"
|
||||||
|
title="Rename tab"
|
||||||
|
onClick={(e) => { e.stopPropagation(); setRenaming(true); }}
|
||||||
|
>✎</button>
|
||||||
|
<button
|
||||||
|
type="button"
|
||||||
|
className="tab-close-btn"
|
||||||
|
title="Delete tab"
|
||||||
|
onClick={(e) => { e.stopPropagation(); handleDelete(); }}
|
||||||
|
>×</button>
|
||||||
|
<button
|
||||||
|
type="button"
|
||||||
|
className="tab-menu-trigger"
|
||||||
|
title="More options"
|
||||||
|
onClick={(e) => { e.stopPropagation(); setMenuOpen((v) => !v); }}
|
||||||
|
>⋯</button>
|
||||||
|
{menuOpen && (
|
||||||
|
<div className="bookmark-menu tab-menu">
|
||||||
|
<button onClick={() => { setMenuOpen(false); setRenaming(true); }}>Rename</button>
|
||||||
|
<button onClick={() => { setMenuOpen(false); onMoveLeft(); }} disabled={!canMoveLeft}>Move left</button>
|
||||||
|
<button onClick={() => { setMenuOpen(false); onMoveRight(); }} disabled={!canMoveRight}>Move right</button>
|
||||||
|
<button className="danger" onClick={handleDelete}>Delete tab</button>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
@@ -0,0 +1,6 @@
|
|||||||
|
import React from 'react';
|
||||||
|
import { createRoot } from 'react-dom/client';
|
||||||
|
import App from './App.jsx';
|
||||||
|
import './styles/index.css';
|
||||||
|
|
||||||
|
createRoot(document.getElementById('root')).render(<App />);
|
||||||
@@ -0,0 +1,800 @@
|
|||||||
|
:root {
|
||||||
|
--bg: #1a1a1c;
|
||||||
|
--bg-elevated: #232327;
|
||||||
|
--bg-input: #2c2c30;
|
||||||
|
--border: #34343a;
|
||||||
|
--text: #f0f0f2;
|
||||||
|
--text-dim: #9a9aa3;
|
||||||
|
--accent: #d97757;
|
||||||
|
--accent-hover: #e08a6f;
|
||||||
|
--error: #ef6b6b;
|
||||||
|
--warn: #e6b450;
|
||||||
|
--ok: #7fc97f;
|
||||||
|
--radius: 6px;
|
||||||
|
}
|
||||||
|
|
||||||
|
* { box-sizing: border-box; }
|
||||||
|
|
||||||
|
html, body, #root {
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
background: var(--bg);
|
||||||
|
color: var(--text);
|
||||||
|
font-family: -apple-system, "Segoe UI", system-ui, Roboto, sans-serif;
|
||||||
|
font-size: 13px;
|
||||||
|
-webkit-user-select: none;
|
||||||
|
user-select: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
html, body { height: 100%; }
|
||||||
|
#root { min-height: 100%; }
|
||||||
|
|
||||||
|
.app {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
min-height: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.app.loading {
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
height: 100vh;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* --- Popup chrome --- */
|
||||||
|
|
||||||
|
/* Scroll container: clamps to window height. ResizeObserver listens on
|
||||||
|
.popup-inner so the auto-fit logic sees true content height even when
|
||||||
|
the popup is being scroll-clamped to the cap. */
|
||||||
|
.popup {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
height: 100vh;
|
||||||
|
overflow: auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
.popup-inner {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
padding: 12px 14px;
|
||||||
|
gap: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* --- Columns layout --- */
|
||||||
|
|
||||||
|
.columns-row {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: row;
|
||||||
|
gap: 12px;
|
||||||
|
align-items: flex-start;
|
||||||
|
/* When column count exceeds the visible cap, the popup width is fixed by
|
||||||
|
main and this row scrolls horizontally. */
|
||||||
|
overflow-x: auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
.column {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
gap: 8px;
|
||||||
|
flex: 0 0 auto;
|
||||||
|
/* 60% of the original 320px column. Tuned to fit inside the 216 / 432 /
|
||||||
|
648 popup widths after popup-inner's 28px horizontal padding. */
|
||||||
|
width: 188px;
|
||||||
|
min-width: 188px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.column-header {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: space-between;
|
||||||
|
gap: 6px;
|
||||||
|
padding: 4px 2px 6px 2px;
|
||||||
|
border-bottom: 1px solid var(--border);
|
||||||
|
}
|
||||||
|
|
||||||
|
.column-title {
|
||||||
|
margin: 0;
|
||||||
|
font-size: 12px;
|
||||||
|
font-weight: 600;
|
||||||
|
text-transform: uppercase;
|
||||||
|
letter-spacing: 0.6px;
|
||||||
|
color: var(--text-dim);
|
||||||
|
cursor: pointer;
|
||||||
|
flex: 1;
|
||||||
|
white-space: nowrap;
|
||||||
|
overflow: hidden;
|
||||||
|
text-overflow: ellipsis;
|
||||||
|
}
|
||||||
|
|
||||||
|
.column-title:hover { color: var(--text); }
|
||||||
|
|
||||||
|
.column-rename-input {
|
||||||
|
flex: 1;
|
||||||
|
font-size: 12px;
|
||||||
|
padding: 4px 6px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.column-overflow {
|
||||||
|
position: relative;
|
||||||
|
flex: 0 0 auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
.column-empty {
|
||||||
|
font-size: 11px;
|
||||||
|
padding: 10px 8px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.header-add-column {
|
||||||
|
display: flex;
|
||||||
|
gap: 4px;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.header-add-column .api-key-input {
|
||||||
|
width: 110px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.column-picker-row {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
gap: 4px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.column-picker-row select {
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
|
||||||
|
.edit-toggle {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 6px;
|
||||||
|
font-size: 11px;
|
||||||
|
color: var(--text-dim);
|
||||||
|
cursor: pointer;
|
||||||
|
user-select: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.edit-toggle input { cursor: pointer; }
|
||||||
|
|
||||||
|
.popup-header {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: space-between;
|
||||||
|
}
|
||||||
|
|
||||||
|
.popup-header h1 {
|
||||||
|
font-size: 14px;
|
||||||
|
font-weight: 600;
|
||||||
|
margin: 0;
|
||||||
|
letter-spacing: 0.2px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.header-actions {
|
||||||
|
display: flex;
|
||||||
|
gap: 6px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.icon-button {
|
||||||
|
background: transparent;
|
||||||
|
border: 1px solid var(--border);
|
||||||
|
color: var(--text);
|
||||||
|
width: 26px;
|
||||||
|
height: 26px;
|
||||||
|
border-radius: var(--radius);
|
||||||
|
cursor: pointer;
|
||||||
|
font-size: 13px;
|
||||||
|
display: inline-flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
padding: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.icon-button:hover:not(:disabled) {
|
||||||
|
background: var(--bg-elevated);
|
||||||
|
border-color: var(--accent);
|
||||||
|
}
|
||||||
|
|
||||||
|
.icon-button.active {
|
||||||
|
background: rgba(217, 119, 87, 0.18);
|
||||||
|
border-color: var(--accent);
|
||||||
|
color: var(--accent);
|
||||||
|
}
|
||||||
|
|
||||||
|
.icon-button:disabled {
|
||||||
|
opacity: 0.4;
|
||||||
|
cursor: default;
|
||||||
|
}
|
||||||
|
|
||||||
|
.drag-region { -webkit-app-region: drag; }
|
||||||
|
.drag-region .icon-button,
|
||||||
|
.drag-region .header-actions,
|
||||||
|
.drag-region button {
|
||||||
|
-webkit-app-region: no-drag;
|
||||||
|
}
|
||||||
|
|
||||||
|
button.primary, button.secondary {
|
||||||
|
padding: 7px 10px;
|
||||||
|
border-radius: var(--radius);
|
||||||
|
border: 1px solid var(--border);
|
||||||
|
font-size: 12px;
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
|
||||||
|
button.primary {
|
||||||
|
background: var(--accent);
|
||||||
|
color: #1a1a1c;
|
||||||
|
border-color: var(--accent);
|
||||||
|
font-weight: 600;
|
||||||
|
}
|
||||||
|
|
||||||
|
button.primary:hover:not(:disabled) { background: var(--accent-hover); }
|
||||||
|
|
||||||
|
button.secondary {
|
||||||
|
background: transparent;
|
||||||
|
color: var(--text);
|
||||||
|
}
|
||||||
|
|
||||||
|
button.secondary:hover:not(:disabled) { background: var(--bg-elevated); }
|
||||||
|
|
||||||
|
button:disabled { opacity: 0.5; cursor: default; }
|
||||||
|
|
||||||
|
.api-key-input {
|
||||||
|
width: 100%;
|
||||||
|
background: var(--bg-input);
|
||||||
|
border: 1px solid var(--border);
|
||||||
|
color: var(--text);
|
||||||
|
padding: 8px 10px;
|
||||||
|
border-radius: var(--radius);
|
||||||
|
font-family: ui-monospace, "Cascadia Code", Consolas, monospace;
|
||||||
|
font-size: 12px;
|
||||||
|
-webkit-user-select: text;
|
||||||
|
user-select: text;
|
||||||
|
}
|
||||||
|
|
||||||
|
.api-key-input:focus { outline: none; border-color: var(--accent); }
|
||||||
|
.api-key-input.small { font-size: 12px; padding: 6px 8px; }
|
||||||
|
|
||||||
|
.spinner {
|
||||||
|
width: 22px;
|
||||||
|
height: 22px;
|
||||||
|
border-radius: 50%;
|
||||||
|
border: 2px solid var(--border);
|
||||||
|
border-top-color: var(--accent);
|
||||||
|
animation: spin 0.9s linear infinite;
|
||||||
|
}
|
||||||
|
@keyframes spin { to { transform: rotate(360deg); } }
|
||||||
|
|
||||||
|
.empty-state {
|
||||||
|
color: var(--text-dim);
|
||||||
|
font-size: 12px;
|
||||||
|
padding: 16px 8px;
|
||||||
|
text-align: center;
|
||||||
|
background: var(--bg-elevated);
|
||||||
|
border: 1px dashed var(--border);
|
||||||
|
border-radius: var(--radius);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* --- Bookmark list & rows --- */
|
||||||
|
|
||||||
|
.bookmark-list {
|
||||||
|
list-style: none;
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
gap: 6px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.bookmark-row {
|
||||||
|
background: var(--bg-elevated);
|
||||||
|
border: 1px solid var(--border);
|
||||||
|
border-left: 4px solid var(--border);
|
||||||
|
border-radius: var(--radius);
|
||||||
|
padding: 8px 10px;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
gap: 6px;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* When a bookmark has a color set, BookmarkRow applies inline borderLeftColor;
|
||||||
|
.has-color is just a hook for future styling. */
|
||||||
|
.bookmark-row.has-color {
|
||||||
|
/* inline style sets borderLeftColor */
|
||||||
|
}
|
||||||
|
|
||||||
|
.bookmark-row-head {
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
align-items: flex-start;
|
||||||
|
gap: 8px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.bookmark-meta {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
min-width: 0;
|
||||||
|
flex: 1;
|
||||||
|
gap: 2px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.bookmark-alias {
|
||||||
|
font-size: 12px;
|
||||||
|
font-weight: 600;
|
||||||
|
white-space: nowrap;
|
||||||
|
overflow: hidden;
|
||||||
|
text-overflow: ellipsis;
|
||||||
|
}
|
||||||
|
|
||||||
|
.bookmark-path {
|
||||||
|
font-size: 10px;
|
||||||
|
color: var(--text-dim);
|
||||||
|
font-family: ui-monospace, "Cascadia Code", Consolas, monospace;
|
||||||
|
white-space: nowrap;
|
||||||
|
overflow: hidden;
|
||||||
|
text-overflow: ellipsis;
|
||||||
|
}
|
||||||
|
|
||||||
|
.bookmark-overflow {
|
||||||
|
position: relative;
|
||||||
|
flex: 0 0 auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
.bookmark-menu {
|
||||||
|
position: absolute;
|
||||||
|
right: 0;
|
||||||
|
top: 30px;
|
||||||
|
background: var(--bg-elevated);
|
||||||
|
border: 1px solid var(--border);
|
||||||
|
border-radius: var(--radius);
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
min-width: 120px;
|
||||||
|
z-index: 10;
|
||||||
|
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
.bookmark-menu button {
|
||||||
|
background: transparent;
|
||||||
|
border: none;
|
||||||
|
color: var(--text);
|
||||||
|
padding: 7px 10px;
|
||||||
|
font-size: 12px;
|
||||||
|
text-align: left;
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
|
||||||
|
.bookmark-menu button:hover { background: rgba(217, 119, 87, 0.12); }
|
||||||
|
.bookmark-menu button.danger { color: var(--error); }
|
||||||
|
.bookmark-menu button.danger:hover { background: rgba(239, 107, 107, 0.12); }
|
||||||
|
|
||||||
|
.bookmark-actions {
|
||||||
|
display: flex;
|
||||||
|
gap: 4px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.bookmark-actions .icon-button {
|
||||||
|
flex: 1;
|
||||||
|
width: auto;
|
||||||
|
height: 28px;
|
||||||
|
font-size: 12px;
|
||||||
|
font-weight: 600;
|
||||||
|
}
|
||||||
|
|
||||||
|
.row-status {
|
||||||
|
font-size: 11px;
|
||||||
|
padding: 4px 6px;
|
||||||
|
border-radius: 4px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.row-status.error {
|
||||||
|
background: rgba(239, 107, 107, 0.12);
|
||||||
|
color: var(--error);
|
||||||
|
}
|
||||||
|
|
||||||
|
.row-status.info {
|
||||||
|
background: rgba(127, 201, 127, 0.12);
|
||||||
|
color: var(--ok);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Edit form (in-row) */
|
||||||
|
|
||||||
|
.bookmark-row.editing {
|
||||||
|
border-color: var(--accent);
|
||||||
|
background: rgba(217, 119, 87, 0.06);
|
||||||
|
}
|
||||||
|
|
||||||
|
.bookmark-edit {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
gap: 6px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.edit-label {
|
||||||
|
font-size: 11px;
|
||||||
|
color: var(--text-dim);
|
||||||
|
font-weight: 500;
|
||||||
|
}
|
||||||
|
|
||||||
|
.edit-path-row {
|
||||||
|
display: flex;
|
||||||
|
gap: 6px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.edit-path-row .api-key-input { flex: 1; min-width: 0; }
|
||||||
|
.edit-path-row .secondary { flex: 0 0 auto; }
|
||||||
|
|
||||||
|
.edit-actions {
|
||||||
|
display: flex;
|
||||||
|
gap: 6px;
|
||||||
|
margin-top: 2px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.edit-actions button { flex: 1; }
|
||||||
|
|
||||||
|
/* Add bookmark form */
|
||||||
|
|
||||||
|
.add-bookmark {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
gap: 6px;
|
||||||
|
border: 1px dashed var(--border);
|
||||||
|
border-radius: var(--radius);
|
||||||
|
padding: 8px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.add-bookmark-label {
|
||||||
|
font-size: 11px;
|
||||||
|
color: var(--text-dim);
|
||||||
|
text-transform: uppercase;
|
||||||
|
letter-spacing: 0.4px;
|
||||||
|
font-weight: 600;
|
||||||
|
}
|
||||||
|
|
||||||
|
.add-path-row {
|
||||||
|
display: flex;
|
||||||
|
gap: 6px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.add-path-row .api-key-input { flex: 1; min-width: 0; }
|
||||||
|
.add-path-row .secondary { flex: 0 0 auto; }
|
||||||
|
|
||||||
|
.add-actions {
|
||||||
|
display: flex;
|
||||||
|
gap: 6px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.add-actions button { flex: 1; }
|
||||||
|
|
||||||
|
.add-bookmark-trigger {
|
||||||
|
background: transparent;
|
||||||
|
border: 1px dashed var(--border);
|
||||||
|
color: var(--text-dim);
|
||||||
|
border-radius: var(--radius);
|
||||||
|
padding: 8px 0;
|
||||||
|
font-size: 16px;
|
||||||
|
line-height: 1;
|
||||||
|
cursor: pointer;
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.add-bookmark-trigger:hover {
|
||||||
|
border-color: var(--accent);
|
||||||
|
color: var(--accent);
|
||||||
|
background: rgba(217, 119, 87, 0.08);
|
||||||
|
}
|
||||||
|
|
||||||
|
.color-picker-row {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
gap: 4px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.color-picker-controls {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 8px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.color-swatch {
|
||||||
|
width: 32px;
|
||||||
|
height: 24px;
|
||||||
|
border: 1px solid var(--border);
|
||||||
|
border-radius: 4px;
|
||||||
|
background: var(--bg-input);
|
||||||
|
cursor: pointer;
|
||||||
|
padding: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.color-hex {
|
||||||
|
font-family: ui-monospace, "Cascadia Code", Consolas, monospace;
|
||||||
|
font-size: 11px;
|
||||||
|
color: var(--text-dim);
|
||||||
|
}
|
||||||
|
|
||||||
|
.color-recent-row {
|
||||||
|
display: flex;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
gap: 4px;
|
||||||
|
margin-top: 4px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.recent-swatch {
|
||||||
|
width: 18px;
|
||||||
|
height: 18px;
|
||||||
|
border-radius: 4px;
|
||||||
|
border: 1px solid var(--border);
|
||||||
|
cursor: pointer;
|
||||||
|
padding: 0;
|
||||||
|
transition: transform 0.1s ease, border-color 0.1s ease;
|
||||||
|
}
|
||||||
|
|
||||||
|
.recent-swatch:hover {
|
||||||
|
border-color: var(--accent);
|
||||||
|
transform: scale(1.1);
|
||||||
|
}
|
||||||
|
|
||||||
|
.recent-swatch.active {
|
||||||
|
border-color: var(--text);
|
||||||
|
box-shadow: 0 0 0 1px var(--text);
|
||||||
|
}
|
||||||
|
|
||||||
|
.link-button {
|
||||||
|
background: transparent;
|
||||||
|
color: var(--accent);
|
||||||
|
border: none;
|
||||||
|
cursor: pointer;
|
||||||
|
font-size: 11px;
|
||||||
|
padding: 0;
|
||||||
|
text-decoration: underline;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* --- Tab bar --- */
|
||||||
|
|
||||||
|
.tab-bar {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
border-bottom: 1px solid var(--border);
|
||||||
|
margin: 0 -2px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tab-strip {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: row;
|
||||||
|
gap: 2px;
|
||||||
|
align-items: center;
|
||||||
|
flex: 1;
|
||||||
|
overflow-x: auto;
|
||||||
|
padding-bottom: 1px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tab {
|
||||||
|
display: inline-flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 2px;
|
||||||
|
padding: 0 2px 0 8px;
|
||||||
|
border: 1px solid var(--border);
|
||||||
|
border-bottom: none;
|
||||||
|
border-top-left-radius: var(--radius);
|
||||||
|
border-top-right-radius: var(--radius);
|
||||||
|
background: var(--bg);
|
||||||
|
color: var(--text-dim);
|
||||||
|
font-size: 12px;
|
||||||
|
height: 26px;
|
||||||
|
flex: 0 0 auto;
|
||||||
|
position: relative;
|
||||||
|
margin-bottom: -1px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tab:hover { color: var(--text); }
|
||||||
|
|
||||||
|
.tab.active {
|
||||||
|
background: var(--bg-elevated);
|
||||||
|
border-color: var(--accent);
|
||||||
|
color: var(--text);
|
||||||
|
z-index: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tab.renaming {
|
||||||
|
padding: 0 4px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tab-label {
|
||||||
|
background: transparent;
|
||||||
|
border: none;
|
||||||
|
color: inherit;
|
||||||
|
font: inherit;
|
||||||
|
cursor: pointer;
|
||||||
|
padding: 0 4px;
|
||||||
|
height: 100%;
|
||||||
|
max-width: 140px;
|
||||||
|
white-space: nowrap;
|
||||||
|
overflow: hidden;
|
||||||
|
text-overflow: ellipsis;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tab-rename-input {
|
||||||
|
height: 22px;
|
||||||
|
font-size: 12px;
|
||||||
|
width: 100px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tab-overflow {
|
||||||
|
position: relative;
|
||||||
|
display: inline-flex;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tab-rename-btn,
|
||||||
|
.tab-close-btn,
|
||||||
|
.tab-menu-trigger {
|
||||||
|
background: transparent;
|
||||||
|
border: none;
|
||||||
|
color: var(--text-dim);
|
||||||
|
cursor: pointer;
|
||||||
|
width: 20px;
|
||||||
|
height: 22px;
|
||||||
|
border-radius: 3px;
|
||||||
|
padding: 0;
|
||||||
|
font-size: 12px;
|
||||||
|
line-height: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tab-rename-btn:hover,
|
||||||
|
.tab-menu-trigger:hover {
|
||||||
|
background: rgba(217, 119, 87, 0.12);
|
||||||
|
color: var(--accent);
|
||||||
|
}
|
||||||
|
|
||||||
|
.tab-close-btn { font-size: 16px; }
|
||||||
|
|
||||||
|
.tab-close-btn:hover {
|
||||||
|
background: rgba(239, 107, 107, 0.18);
|
||||||
|
color: var(--error);
|
||||||
|
}
|
||||||
|
|
||||||
|
.tab-menu {
|
||||||
|
top: 26px;
|
||||||
|
right: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tab-add-trigger {
|
||||||
|
background: transparent;
|
||||||
|
border: 1px dashed var(--border);
|
||||||
|
border-bottom: none;
|
||||||
|
color: var(--text-dim);
|
||||||
|
border-top-left-radius: var(--radius);
|
||||||
|
border-top-right-radius: var(--radius);
|
||||||
|
height: 26px;
|
||||||
|
width: 26px;
|
||||||
|
font-size: 14px;
|
||||||
|
line-height: 1;
|
||||||
|
cursor: pointer;
|
||||||
|
flex: 0 0 auto;
|
||||||
|
margin-bottom: -1px;
|
||||||
|
padding: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tab-add-trigger:hover {
|
||||||
|
color: var(--accent);
|
||||||
|
border-color: var(--accent);
|
||||||
|
}
|
||||||
|
|
||||||
|
.tab-add-input {
|
||||||
|
display: inline-flex;
|
||||||
|
align-items: center;
|
||||||
|
height: 26px;
|
||||||
|
flex: 0 0 auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tab-add-input .api-key-input {
|
||||||
|
width: 110px;
|
||||||
|
height: 22px;
|
||||||
|
font-size: 12px;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* --- Settings panel (popup header gear) --- */
|
||||||
|
|
||||||
|
.popup-settings {
|
||||||
|
position: relative;
|
||||||
|
display: inline-flex;
|
||||||
|
}
|
||||||
|
|
||||||
|
.settings-panel {
|
||||||
|
position: absolute;
|
||||||
|
right: 0;
|
||||||
|
top: 30px;
|
||||||
|
background: var(--bg-elevated);
|
||||||
|
border: 1px solid var(--border);
|
||||||
|
border-radius: var(--radius);
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
gap: 6px;
|
||||||
|
min-width: 180px;
|
||||||
|
padding: 10px;
|
||||||
|
z-index: 20;
|
||||||
|
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
|
||||||
|
}
|
||||||
|
|
||||||
|
.settings-panel-label {
|
||||||
|
font-size: 10px;
|
||||||
|
text-transform: uppercase;
|
||||||
|
letter-spacing: 0.5px;
|
||||||
|
color: var(--text-dim);
|
||||||
|
font-weight: 600;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* --- Confirm dialog --- */
|
||||||
|
|
||||||
|
.confirm-overlay {
|
||||||
|
position: fixed;
|
||||||
|
inset: 0;
|
||||||
|
background: rgba(0, 0, 0, 0.55);
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
z-index: 100;
|
||||||
|
padding: 12px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.confirm-dialog {
|
||||||
|
background: var(--bg-elevated);
|
||||||
|
border: 1px solid var(--border);
|
||||||
|
border-radius: var(--radius);
|
||||||
|
padding: 14px;
|
||||||
|
max-width: 320px;
|
||||||
|
width: 100%;
|
||||||
|
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5);
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
gap: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.confirm-title {
|
||||||
|
font-size: 13px;
|
||||||
|
font-weight: 600;
|
||||||
|
}
|
||||||
|
|
||||||
|
.confirm-message {
|
||||||
|
font-size: 12px;
|
||||||
|
color: var(--text-dim);
|
||||||
|
line-height: 1.4;
|
||||||
|
}
|
||||||
|
|
||||||
|
.confirm-actions {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
gap: 6px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.confirm-actions button { width: 100%; }
|
||||||
|
|
||||||
|
button.danger-button {
|
||||||
|
background: var(--error);
|
||||||
|
color: #1a1a1c;
|
||||||
|
border-color: var(--error);
|
||||||
|
}
|
||||||
|
|
||||||
|
button.danger-button:hover:not(:disabled) {
|
||||||
|
background: #f78787;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* --- Submenu inside column overflow --- */
|
||||||
|
|
||||||
|
.bookmark-submenu {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
border-top: 1px solid var(--border);
|
||||||
|
}
|
||||||
|
|
||||||
|
.bookmark-submenu-label {
|
||||||
|
font-size: 10px;
|
||||||
|
text-transform: uppercase;
|
||||||
|
letter-spacing: 0.5px;
|
||||||
|
color: var(--text-dim);
|
||||||
|
padding: 6px 10px 2px 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.bookmark-submenu .submenu-back {
|
||||||
|
font-size: 11px;
|
||||||
|
color: var(--text-dim);
|
||||||
|
}
|
||||||
@@ -0,0 +1,17 @@
|
|||||||
|
import { defineConfig } from 'vite';
|
||||||
|
import react from '@vitejs/plugin-react';
|
||||||
|
|
||||||
|
export default defineConfig({
|
||||||
|
plugins: [react()],
|
||||||
|
base: './',
|
||||||
|
server: {
|
||||||
|
// 5174 instead of Vite's default 5173 so this app can run alongside the
|
||||||
|
// sibling claude-usage-tray dev server, which uses 5173.
|
||||||
|
port: 5174,
|
||||||
|
strictPort: true,
|
||||||
|
},
|
||||||
|
build: {
|
||||||
|
outDir: 'dist',
|
||||||
|
emptyOutDir: true,
|
||||||
|
},
|
||||||
|
});
|
||||||
Reference in New Issue
Block a user