first test

Others/browser-extension/README.md

@@ -0,0 +1,288 @@
+# Trackeep Saver Browser Extension
+
+This folder contains a WebExtension (Manifest v3) that lets you:
+
+- **Save the current page or video** as a **Trackeep bookmark**.
+- **Upload a local file** directly to Trackeep.
+- **Right‑click** any page, link, selection, image, or video and choose **“Save to Trackeep”** from the context menu.
+
+It is designed to work in **Chrome**, **Microsoft Edge**, and **Firefox** (Manifest v3 where available).
+
+---
+
+## Folder structure
+
+- `manifest.json` – WebExtension manifest (v3) with background service worker and context menu.
+- `popup.html` / `popup.js` – Popup UI and logic to save bookmarks and upload files.
+- `options.html` / `options.js` – Options page to configure API URL and auth token.
+- `background.js` – Service worker that creates and handles the context menu.
+- `icons/` – Placeholder icon files (copied from the repo favicon).
+- `README.md` – This documentation.
+
+> Note: For store publishing you will likely want custom icon PNG files. See the publishing section.
+
+---
+
+## What the extension does
+
+### Popup (toolbar icon)
+
+- Reads the **active tab’s title and URL** and lets you save it as a Trackeep bookmark.
+- Lets you add an optional **description**, **tags** (comma-separated), and mark a bookmark as **public**.
+- Lets you pick a local **file** and upload it to Trackeep with an optional description.
+
+### Right‑click context menu
+
+- Right‑click any page, link, selection, image, or video and choose **“Save to Trackeep”**.
+- The popup opens with:
+  - URL pre‑filled (link URL, image/video source, or current page URL).
+  - Title pre‑filled (tab title).
+  - Description pre‑filled with the selected text (if any).
+- Works even if you right‑click a link on another site; the popup will open with that link’s details.
+
+### Auto‑detect Trackeep domain
+
+- When you open the popup or options page on a Trackeep domain (e.g. `https://app.trackeep.example`), the extension automatically:
+  - Pre‑fills the **API base URL** to `https://app.trackeep.example/api/v1`.
+  - Falls back to `http://localhost:8080/api/v1` if nothing is set and you’re not on a Trackeep domain.
+- This reduces manual setup for most users.
+
+---
+
+## Configuration (Options page)
+
+1. **Open the extension options**
+   - After loading the extension (see below), right-click its icon → **Options**.
+   - Or click **Open Options** in the popup.
+
+2. **Set the API base URL**
+   - Usually auto‑detected if you’re on a Trackeep domain.
+   - Example for local dev:
+     - `http://localhost:8080/api/v1`
+   - Example for production:
+     - `https://your-trackeep-domain.example.com/api/v1`
+
+3. **Get your Trackeep auth token**
+   - Log into Trackeep in your browser.
+   - Open **DevTools → Application → Local Storage**.
+   - Select your Trackeep origin (e.g. `http://localhost:5173` or your production domain).
+   - Find the key `trackeep_token` and copy its **value**.
+   - Paste this value into the **Auth token** field in the options page.
+
+4. **Save settings**
+   - Click **Save settings**.
+   - The popup will now use these values to call the API.
+
+> Keep your auth token private. Treat it like a password.
+
+---
+
+## Loading the extension during development
+
+### Chrome (and Brave, Vivaldi, etc.)
+
+1. Open `chrome://extensions/`.
+2. Enable **Developer mode** (top-right toggle).
+3. Click **Load unpacked**.
+4. Select the `browser-extension` folder from this repository.
+5. The extension should appear with the name **Trackeep Saver**.
+
+### Microsoft Edge
+
+1. Open `edge://extensions/`.
+2. Enable **Developer mode**.
+3. Click **Load unpacked**.
+4. Select the `browser-extension` folder.
+
+### Firefox (Manifest v3)
+
+Firefox support for Manifest v3 is still evolving, but this extension uses only basic APIs:
+
+1. Open `about:debugging#/runtime/this-firefox`.
+2. Click **Load Temporary Add-on…**.
+3. Select the `manifest.json` file inside the `browser-extension` folder.
+4. The extension will be installed temporarily (until you restart Firefox).
+
+If you hit MV3-specific issues in Firefox, you can either:
+
+- Switch to a Firefox version with MV3 enabled, or
+- Port this to a MV2 manifest (same JS/HTML, different `manifest.json`).
+
+---
+
+## Using the extension
+
+### Popup (toolbar icon)
+
+1. Make sure you configured **API base URL** and **auth token** in the options.
+2. Navigate to any page or video (e.g. a YouTube video, article, docs page).
+3. Click the **Trackeep Saver** icon in the toolbar.
+4. In the popup:
+   - Adjust **Title**, **URL**, **Description**, and **Tags** as needed.
+   - Optionally tick **Public**.
+   - Click **Save bookmark** to create a Trackeep bookmark.
+5. To upload a file:
+   - Use the **Upload file to Trackeep** section.
+   - Pick a file, optionally add a description, then click **Upload file**.
+
+### Context menu (right‑click)
+
+1. Right‑click any page, link, selection, image, or video.
+2. Choose **“Save to Trackeep”**.
+3. The popup opens with the relevant data pre‑filled.
+4. Edit as desired and click **Save bookmark**.
+
+If anything fails, an error message from the Trackeep API is shown in the popup.
+
+---
+
+## CORS and backend configuration
+
+The backend uses a CORS middleware that primarily targets browser frontends.
+Because this is a browser extension, requests are made from an extension context and usually do **not** require the same CORS headers as a regular web page.
+
+If you run into network errors:
+
+- Make sure your Trackeep backend is reachable at the URL you configured.
+- Check the browser extension console (in `chrome://extensions` → **Inspect views** → **Service worker / popup**).
+- If needed, relax or adjust the `CORS_ALLOWED_ORIGINS` env variable on the backend to include your frontend origin for normal web use. The extension itself generally should not require changes.
+
+---
+
+## Publishing to browser stores
+
+The high-level process is similar across Chrome, Edge, and Firefox:
+
+### 1. Prepare assets
+
+- Make sure `manifest.json`, `popup.*`, `options.*`, and `background.js` are all present and working.
+- Add icon PNG files (required for store publishing):
+  - The `icons/` folder contains placeholder files copied from the repo favicon.
+  - For production, replace them with custom icons at sizes 16, 32, 48, and 128 pixels.
+  - Update `manifest.json` with an `icons` section (already present).
+
+### 2. Chrome Web Store (Chrome and most Chromium browsers)
+
+1. Go to the **Chrome Web Store Developer Dashboard**.
+2. Create a new item.
+3. Zip the **contents of `browser-extension/`** (do not zip the parent folder twice).
+4. Upload the ZIP.
+5. Fill out listing details (name, description, screenshots, categories, privacy policy).
+6. Submit for review.
+
+Once published, Chrome, Brave, and other Chromium-based browsers can install it from the store.
+
+### 3. Microsoft Edge Add-ons
+
+1. Go to the **Microsoft Edge Add-ons** developer dashboard.
+2. You can often upload the same ZIP you used for Chrome.
+3. Fill in the listing information and submit.
+
+Edge is also Chromium-based, so Manifest v3 and the `chrome.*` APIs are supported.
+
+### 4. Firefox Add-ons (AMO)
+
+1. Go to **https://addons.mozilla.org/developers/**.
+2. Create a new add-on and upload the ZIP built from `browser-extension/`.
+3. If Firefox flags MV3-specific issues, follow its guidance – usually this involves:
+   - Ensuring the manifest is valid for the current Firefox MV3 implementation.
+   - Optionally adding `browser_specific_settings` in `manifest.json` with a Firefox-specific `gecko` ID.
+
+Example snippet you may add for Firefox (Chrome will ignore this block):
+
+```json
+"browser_specific_settings": {
+  "gecko": {
+    "id": "trackeep-saver@example.com",
+    "strict_min_version": "120.0"
+  }
+}
+```
+
+Use your own ID and version constraints as recommended by Mozilla.
+
+---
+
+## How to publish to extension stores
+
+### Quick checklist before you publish
+
+- [ ] Test the extension locally in Chrome/Edge/Firefox.
+- [ ] Ensure the API URL and auth token work with your Trackeep backend.
+- [ ] Replace placeholder icons with production assets (optional; `trackeepfavi_bg.png` is already used).
+- [ ] Write a short description and prepare screenshots for the store listings.
+- [ ] Decide on a publisher name and privacy policy URL (required by most stores).
+
+### Step‑by‑step publishing
+
+#### Chrome Web Store (and Chromium browsers)
+
+1. **Prepare a ZIP**
+   - Zip the **contents of `browser-extension/`** (not the folder itself).
+   - Ensure `manifest.json`, `popup.*`, `options.*`, `background.js`, and `icons/` are included.
+
+2. **Developer Dashboard**
+   - Go to the [Chrome Web Store Developer Dashboard](https://chrome.google.com/webstore/developer/dashboard).
+   - Click **Add new item**.
+   - Upload the ZIP.
+
+3. **Listing details**
+   - **Name**: Trackeep Saver
+   - **Description**: Save pages, videos, and files to your Trackeep account.
+   - **Category**: Productivity
+   - **Screenshots**: 1280x800 or 640x400 PNGs.
+   - **Icon**: 128x128 PNG (already in `icons/icon128.png`).
+   - **Privacy policy**: Required; you can host a simple page on GitHub Pages or your site.
+
+4. **Permissions review**
+   - The manifest requests `storage`, `tabs`, `activeTab`, `contextMenus`, and `<all_urls>` host permissions.
+   - Be prepared to explain why each is needed (bookmarking, uploading files, right‑click menu).
+
+5. **Submit**
+   - Review and submit. Google will review for compliance and security.
+
+#### Microsoft Edge Add-ons
+
+1. Go to the [Microsoft Edge Add-ons Developer Dashboard](https://partner.microsoft.com/dashboard/microsoftedge).
+2. Upload the same ZIP you used for Chrome.
+3. Fill out the listing (similar to Chrome).
+4. Submit. Edge’s review is usually fast.
+
+#### Firefox Add-ons (AMO)
+
+1. Go to the [Firefox Add-on Developer Hub](https://addons.mozilla.org/developers/).
+2. Click **Submit a New Add‑on** and upload the ZIP.
+3. Firefox may ask for a `browser_specific_settings.gecko.id` in `manifest.json`. If you want a fixed ID, add:
+   ```json
+   "browser_specific_settings": {
+     "gecko": {
+       "id": "trackeep-saver@example.com",
+       "strict_min_version": "120.0"
+     }
+   }
+   ```
+   Replace `example.com` with your own domain.
+4. Provide listing details and privacy policy.
+5. Submit. Mozilla’s review focuses on privacy and security.
+
+---
+
+## What you can do next
+
+- **Test thoroughly**:
+  - Save bookmarks from different sites (articles, YouTube videos, GitHub repos).
+  - Upload various file types (PDFs, images, docs).
+  - Try the right‑click context menu on links, images, and selected text.
+- **Improve UX**:
+  - Auto‑tag YouTube videos as `video`.
+  - Add a keyboard shortcut to quick‑save the current page.
+  - Sync the auth token automatically from the Trackeep web app.
+- **Prepare for stores**:
+  - Write a concise privacy policy and host it publicly.
+  - Take clean screenshots of the popup and options page.
+  - Consider a custom icon set if you want a distinct brand look.
+- **Maintain**:
+  - Keep the extension compatible with Trackeep API changes.
+  - Update the manifest version when you release updates.
+
+For now, the extension is fully functional for bookmarking pages/videos and uploading files to Trackeep, with a convenient right‑click menu and smart domain auto‑detection.

Others/browser-extension/background.js

@@ -0,0 +1,33 @@
+/* global chrome */
+
+// Create context menu when extension is installed
+chrome.runtime.onInstalled.addListener(() => {
+  chrome.contextMenus.create({
+    id: 'save-to-trackeep',
+    title: 'Save to Trackeep',
+    contexts: ['page', 'link', 'selection', 'image', 'video']
+  });
+});
+
+// Handle context menu click
+chrome.contextMenus.onClicked.addListener(async (info, tab) => {
+  if (info.menuItemId !== 'save-to-trackeep') return;
+
+  // Open popup with pre-filled data based on context
+  const url = info.linkUrl || info.srcUrl || tab?.url || '';
+  const title = tab?.title || '';
+  const selection = info.selectionText || '';
+
+  // Store temporary data for popup to read
+  chrome.storage.local.set({
+    contextMenuData: {
+      url,
+      title,
+      selection,
+      timestamp: Date.now()
+    }
+  }, () => {
+    // Open the popup (or focus it if already open)
+    chrome.action.openPopup();
+  });
+});

Others/browser-extension/manifest.json

@@ -0,0 +1,29 @@
+{
+  "manifest_version": 3,
+  "name": "Trackeep Saver",
+  "version": "0.1.0",
+  "description": "Save the current page or a file to your Trackeep account as a bookmark or upload.",
+  "action": {
+    "default_popup": "popup.html",
+    "default_title": "Save to Trackeep"
+  },
+  "options_page": "options.html",
+  "background": {
+    "service_worker": "background.js"
+  },
+  "permissions": [
+    "storage",
+    "tabs",
+    "activeTab",
+    "contextMenus"
+  ],
+  "host_permissions": [
+    "<all_urls>"
+  ],
+  "icons": {
+    "16": "icons/icon16.png",
+    "32": "icons/icon32.png",
+    "48": "icons/icon48.png",
+    "128": "icons/icon128.png"
+  }
+}

Others/browser-extension/options.html

@@ -0,0 +1,264 @@
+<!DOCTYPE html>
+<html lang="en" data-kb-theme="dark">
+<head>
+  <meta charset="UTF-8" />
+  <title>Trackeep Saver – Options</title>
+  <style>
+    /* Complete Inter Font Faces - Exact Papra */
+    @font-face {
+      font-family: Inter;
+      font-style: normal;
+      font-weight: 400;
+      font-stretch: 100%;
+      font-display: swap;
+      src: url(https://fonts.bunny.net/inter/files/inter-latin-400-normal.woff2) format("woff2"),url(https://fonts.bunny.net/inter/files/inter-latin-400-normal.woff) format("woff");
+      unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD
+    }
+    @font-face {
+      font-family: Inter;
+      font-style: normal;
+      font-weight: 500;
+      font-stretch: 100%;
+      font-display: swap;
+      src: url(https://fonts.bunny.net/inter/files/inter-latin-500-normal.woff2) format("woff2"),url(https://fonts.bunny.net/inter/files/inter-latin-500-normal.woff) format("woff");
+      unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD
+    }
+    @font-face {
+      font-family: Inter;
+      font-style: normal;
+      font-weight: 600;
+      font-stretch: 100%;
+      font-display: swap;
+      src: url(https://fonts.bunny.net/inter/files/inter-latin-600-normal.woff2) format("woff2"),url(https://fonts.bunny.net/inter/files/inter-latin-600-normal.woff) format("woff");
+      unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD
+    }
+    @font-face {
+      font-family: Inter;
+      font-style: normal;
+      font-weight: 700;
+      font-stretch: 100%;
+      font-display: swap;
+      src: url(https://fonts.bunny.net/inter/files/inter-latin-700-normal.woff2) format("woff2"),url(https://fonts.bunny.net/inter/files/inter-latin-700-normal.woff) format("woff");
+      unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD
+    }
+
+    /* Exact Papra CSS variables and dark theme (hex fallbacks for clarity) */
+    :root {
+      --background: 26 26 26;
+      --foreground: 250 250 250;
+      --card: 32 32 32;
+      --card-foreground: 250 250 250;
+      --popover: 32 32 32;
+      --popover-foreground: 250 250 250;
+      --primary: 217 70.2% 91.2%;
+      --primary-foreground: 250 250 250;
+      --secondary: 39 39 42;
+      --secondary-foreground: 250 250 250;
+      --muted: 39 39 42;
+      --muted-foreground: 163 163 163;
+      --accent: 39 39 42;
+      --accent-foreground: 250 250 250;
+      --destructive: 0 62.8% 30.6%;
+      --destructive-foreground: 250 250 250;
+      --border: 39 39 42;
+      --input: 39 39 42;
+      --ring: 217 70.2% 91.2%;
+      --radius: 0.5rem;
+      /* Hex fallbacks for readability */
+      --bg-hex: #1a1a1a;
+      --card-hex: #202020;
+      --input-hex: #27272a;
+      --border-hex: #27272a;
+      --muted-hex: #27272a;
+      --text-hex: #fafafa;
+      --muted-text-hex: #a3a3a3;
+      --primary-hex: #60a5fa;
+    }
+
+    body {
+      font-family: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
+      margin: 0;
+      padding: 20px;
+      max-width: 640px;
+      background: var(--bg-hex);
+      color: var(--text-hex);
+      line-height: 1.6;
+      color-scheme: dark;
+    }
+
+    h1 {
+      font-size: 24px;
+      font-weight: 600;
+      margin: 0 0 8px 0;
+      display: flex;
+      align-items: center;
+      gap: 10px;
+    }
+
+    .logo {
+      width: 32px;
+      height: 32px;
+      border-radius: calc(var(--radius) * 0.5);
+      background: var(--primary-hex);
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      color: var(--text-hex);
+      font-weight: bold;
+      font-size: 16px;
+    }
+
+    p {
+      font-size: 14px;
+      color: var(--muted-text-hex);
+      margin: 0 0 24px 0;
+    }
+
+    .section {
+      background: var(--card-hex);
+      border-radius: var(--radius);
+      padding: 20px;
+      border: 1px solid var(--border-hex);
+      margin-bottom: 20px;
+    }
+
+    .section-title {
+      font-size: 16px;
+      font-weight: 600;
+      margin: 0 0 16px 0;
+      color: var(--text-hex);
+    }
+
+    label {
+      display: block;
+      font-size: 14px;
+      font-weight: 500;
+      margin: 0 0 6px 0;
+      color: var(--muted-text-hex);
+    }
+
+    input[type="text"],
+    input[type="url"],
+    input[type="password"] {
+      width: 100%;
+      box-sizing: border-box;
+      padding: 10px 14px;
+      border-radius: var(--radius);
+      border: 1px solid var(--border-hex);
+      background: var(--input-hex);
+      color: var(--text-hex);
+      font-size: 14px;
+      font-family: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
+      font-weight: 400;
+      transition: border-color 0.15s, background 0.15s;
+    }
+
+    input:focus {
+      outline: none;
+      border-color: var(--primary-hex);
+      background: var(--card-hex);
+    }
+
+    button {
+      cursor: pointer;
+      border-radius: var(--radius);
+      border: none;
+      padding: 10px 18px;
+      font-size: 14px;
+      font-weight: 500;
+      font-family: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
+      background: var(--primary-hex);
+      color: var(--text-hex);
+      transition: all 0.2s;
+    }
+
+    button:hover {
+      opacity: 0.9;
+      transform: translateY(-1px);
+    }
+
+    button:disabled {
+      opacity: 0.5;
+      cursor: default;
+      transform: none;
+    }
+
+    .status {
+      margin-top: 12px;
+      font-size: 13px;
+      padding: 8px 12px;
+      border-radius: calc(var(--radius) * 0.5);
+      background: var(--muted-hex);
+      border: 1px solid var(--border-hex);
+    }
+
+    .status.success {
+      color: var(--primary-hex);
+      border-color: var(--primary-hex);
+      background: color-mix(in srgb, var(--primary-hex) 10%, transparent);
+    }
+
+    .status.error {
+      color: #ef4444;
+      border-color: #ef4444;
+      background: color-mix(in srgb, #ef4444 10%, transparent);
+    }
+
+    code {
+      background: var(--input-hex);
+      padding: 2px 6px;
+      border-radius: calc(var(--radius) * 0.5);
+      font-size: 13px;
+      color: var(--text-hex);
+      border: 1px solid var(--border-hex);
+    }
+
+    .instructions {
+      font-size: 13px;
+      color: var(--muted-text-hex);
+      margin-top: 6px;
+      line-height: 1.5;
+    }
+
+    .instructions strong {
+      color: var(--text-hex);
+    }
+  </style>
+</head>
+<body>
+  <h1>
+    <div class="logo">T</div>
+    Trackeep Saver – Options
+  </h1>
+  <p>Configure how the extension connects to your Trackeep backend.</p>
+
+  <div class="section">
+    <div class="section-title">API Configuration</div>
+    <label for="apiBaseUrl">Trackeep API base URL (must include <code>/api/v1</code>)</label>
+    <input
+      id="apiBaseUrl"
+      type="url"
+      placeholder="https://your-domain.example.com/api/v1 or http://localhost:8080/api/v1"
+    />
+
+    <label for="authToken">Auth token (JWT)</label>
+    <input
+      id="authToken"
+      type="password"
+      placeholder="Paste your Trackeep token (trackeep_token) here"
+    />
+    <div class="instructions">
+      <strong>How to get your token:</strong><br>
+      1. Log into Trackeep in your browser.<br>
+      2. Open DevTools → Application → Local Storage.<br>
+      3. Find the key <code>trackeep_token</code> and copy its value.<br>
+      4. Paste it above. Never share this token publicly.
+    </div>
+
+    <button id="saveBtn" style="margin-top:20px;">💾 Save settings</button>
+    <div id="status" class="status"></div>
+  </div>
+
+  <script src="options.js"></script>
+</body>
+</html>

Others/browser-extension/options.js

@@ -0,0 +1,104 @@
+/* global chrome */
+
+const apiBaseUrlInput = document.getElementById('apiBaseUrl');
+const authTokenInput = document.getElementById('authToken');
+const saveBtn = document.getElementById('saveBtn');
+const statusEl = document.getElementById('status');
+
+function setStatus(message, type) {
+  statusEl.textContent = message || '';
+  statusEl.classList.remove('success', 'error');
+  if (type) {
+    statusEl.classList.add(type);
+  }
+}
+
+function detectAndPrefillApiBaseUrl(callback) {
+  chrome.tabs.query({ active: true, currentWindow: true }, (tabs) => {
+    const tab = tabs && tabs[0];
+    if (!tab || !tab.url) {
+      if (callback) callback();
+      return;
+    }
+
+    try {
+      const url = new URL(tab.url);
+      const isTrackeepDomain = url.hostname.includes('trackeep') || url.hostname === 'localhost';
+      if (isTrackeepDomain && (url.protocol === 'https:' || url.protocol === 'http:')) {
+        const candidate = `${url.origin}/api/v1`;
+        chrome.storage.sync.get(['trackeepApiBaseUrl'], (items) => {
+          if (!items.trackeepApiBaseUrl) {
+            apiBaseUrlInput.value = candidate;
+          }
+          if (callback) callback();
+        });
+      } else {
+        // Fallback to localhost if nothing set
+        chrome.storage.sync.get(['trackeepApiBaseUrl'], (items) => {
+          if (!items.trackeepApiBaseUrl) {
+            apiBaseUrlInput.value = 'http://localhost:8080/api/v1';
+          }
+          if (callback) callback();
+        });
+      }
+    } catch (e) {
+      if (callback) callback();
+    }
+  });
+}
+
+function loadSettings() {
+  chrome.storage.sync.get(['trackeepApiBaseUrl', 'trackeepAuthToken'], (items) => {
+    if (items.trackeepApiBaseUrl) {
+      apiBaseUrlInput.value = items.trackeepApiBaseUrl;
+    }
+    if (items.trackeepAuthToken) {
+      authTokenInput.value = items.trackeepAuthToken;
+    }
+  });
+}
+
+function saveSettings() {
+  const apiBaseUrl = apiBaseUrlInput.value.trim();
+  const authToken = authTokenInput.value.trim();
+
+  if (!apiBaseUrl) {
+    setStatus('API base URL is required.', 'error');
+    return;
+  }
+
+  if (!authToken) {
+    setStatus('Auth token is required.', 'error');
+    return;
+  }
+
+  saveBtn.disabled = true;
+  setStatus('Saving…', null);
+
+  chrome.storage.sync.set(
+    {
+      trackeepApiBaseUrl: apiBaseUrl,
+      trackeepAuthToken: authToken
+    },
+    () => {
+      saveBtn.disabled = false;
+      if (chrome.runtime.lastError) {
+        setStatus(`Failed to save: ${chrome.runtime.lastError.message}`, 'error');
+      } else {
+        setStatus('Settings saved. You can now use the popup to save bookmarks and files.', 'success');
+      }
+    }
+  );
+}
+
+// Init
+
+document.addEventListener('DOMContentLoaded', () => {
+  detectAndPrefillApiBaseUrl(() => {
+    loadSettings();
+    saveBtn.addEventListener('click', (e) => {
+      e.preventDefault();
+      saveSettings();
+    });
+  });
+});

Others/browser-extension/popup.html

@@ -0,0 +1,314 @@
+<!DOCTYPE html>
+<html lang="en" data-kb-theme="dark">
+<head>
+  <meta charset="UTF-8" />
+  <title>Trackeep Saver</title>
+  <style>
+    /* Complete Inter Font Faces - Exact Papra */
+    @font-face {
+      font-family: Inter;
+      font-style: normal;
+      font-weight: 400;
+      font-stretch: 100%;
+      font-display: swap;
+      src: url(https://fonts.bunny.net/inter/files/inter-latin-400-normal.woff2) format("woff2"),url(https://fonts.bunny.net/inter/files/inter-latin-400-normal.woff) format("woff");
+      unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD
+    }
+    @font-face {
+      font-family: Inter;
+      font-style: normal;
+      font-weight: 500;
+      font-stretch: 100%;
+      font-display: swap;
+      src: url(https://fonts.bunny.net/inter/files/inter-latin-500-normal.woff2) format("woff2"),url(https://fonts.bunny.net/inter/files/inter-latin-500-normal.woff) format("woff");
+      unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD
+    }
+    @font-face {
+      font-family: Inter;
+      font-style: normal;
+      font-weight: 600;
+      font-stretch: 100%;
+      font-display: swap;
+      src: url(https://fonts.bunny.net/inter/files/inter-latin-600-normal.woff2) format("woff2"),url(https://fonts.bunny.net/inter/files/inter-latin-600-normal.woff) format("woff");
+      unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD
+    }
+    @font-face {
+      font-family: Inter;
+      font-style: normal;
+      font-weight: 700;
+      font-stretch: 100%;
+      font-display: swap;
+      src: url(https://fonts.bunny.net/inter/files/inter-latin-700-normal.woff2) format("woff2"),url(https://fonts.bunny.net/inter/files/inter-latin-700-normal.woff) format("woff");
+      unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD
+    }
+
+    /* Exact Papra CSS variables and dark theme (hex fallbacks for clarity) */
+    :root {
+      --background: 26 26 26;
+      --foreground: 250 250 250;
+      --card: 32 32 32;
+      --card-foreground: 250 250 250;
+      --popover: 32 32 32;
+      --popover-foreground: 250 250 250;
+      --primary: 217 70.2% 91.2%;
+      --primary-foreground: 250 250 250;
+      --secondary: 39 39 42;
+      --secondary-foreground: 250 250 250;
+      --muted: 39 39 42;
+      --muted-foreground: 163 163 163;
+      --accent: 39 39 42;
+      --accent-foreground: 250 250 250;
+      --destructive: 0 62.8% 30.6%;
+      --destructive-foreground: 250 250 250;
+      --border: 39 39 42;
+      --input: 39 39 42;
+      --ring: 217 70.2% 91.2%;
+      --radius: 0.5rem;
+      /* Hex fallbacks for readability */
+      --bg-hex: #1a1a1a;
+      --card-hex: #202020;
+      --input-hex: #27272a;
+      --border-hex: #27272a;
+      --muted-hex: #27272a;
+      --text-hex: #fafafa;
+      --muted-text-hex: #a3a3a3;
+      --primary-hex: #60a5fa;
+    }
+
+    body {
+      font-family: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
+      margin: 0;
+      padding: 16px;
+      min-width: 380px;
+      max-width: 420px;
+      background: var(--bg-hex);
+      color: var(--text-hex);
+      line-height: 1.6;
+      color-scheme: dark;
+    }
+
+    h1 {
+      font-size: 18px;
+      font-weight: 600;
+      margin: 0 0 12px 0;
+      display: flex;
+      align-items: center;
+      gap: 8px;
+    }
+
+    .logo {
+      width: 24px;
+      height: 24px;
+      border-radius: calc(var(--radius) * 0.5);
+      background: var(--primary-hex);
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      color: var(--text-hex);
+      font-weight: bold;
+      font-size: 14px;
+    }
+
+    .hint {
+      font-size: 12px;
+      color: var(--muted-text-hex);
+      margin-bottom: 12px;
+      padding: 6px 10px;
+      background: var(--muted-hex);
+      border-radius: calc(var(--radius) * 0.5);
+      border: 1px solid var(--border-hex);
+    }
+
+    .section-title {
+      font-size: 13px;
+      font-weight: 600;
+      margin: 16px 0 6px;
+      color: var(--muted-text-hex);
+      text-transform: uppercase;
+      letter-spacing: 0.05em;
+    }
+
+    label {
+      display: block;
+      font-size: 13px;
+      font-weight: 500;
+      margin-bottom: 4px;
+      color: var(--muted-text-hex);
+    }
+
+    input[type="text"],
+    input[type="url"],
+    input[type="file"],
+    textarea {
+      width: 100%;
+      box-sizing: border-box;
+      padding: 8px 12px;
+      border-radius: var(--radius);
+      border: 1px solid var(--border-hex);
+      background: var(--input-hex);
+      color: var(--text-hex);
+      font-size: 13px;
+      font-family: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
+      font-weight: 400;
+      transition: border-color 0.15s, background 0.15s;
+    }
+
+    input:focus,
+    textarea:focus {
+      outline: none;
+      border-color: var(--primary-hex);
+      background: var(--card-hex);
+    }
+
+    textarea {
+      resize: vertical;
+      min-height: 56px;
+    }
+
+    button {
+      cursor: pointer;
+      border-radius: var(--radius);
+      border: none;
+      padding: 8px 16px;
+      font-size: 13px;
+      font-weight: 500;
+      font-family: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
+      background: var(--primary-hex);
+      color: var(--text-hex);
+      transition: all 0.2s;
+    }
+
+    button:hover {
+      opacity: 0.9;
+      transform: translateY(-1px);
+    }
+
+    button.secondary {
+      background: var(--muted-hex);
+      color: var(--text-hex);
+    }
+
+    button.secondary:hover {
+      background: var(--border-hex);
+      color: var(--text-hex);
+      opacity: 1;
+    }
+
+    button:disabled {
+      opacity: 0.5;
+      cursor: default;
+      transform: none;
+    }
+
+    .row {
+      display: flex;
+      gap: 10px;
+      align-items: center;
+    }
+
+    .row > * {
+      flex: 1;
+    }
+
+    .checkbox-row {
+      display: flex;
+      align-items: center;
+      gap: 8px;
+      font-size: 13px;
+      color: var(--muted-text-hex);
+    }
+
+    .checkbox-row input[type="checkbox"] {
+      width: auto;
+      margin: 0;
+    }
+
+    .status {
+      font-size: 12px;
+      margin-top: 12px;
+      min-height: 18px;
+      padding: 6px 10px;
+      border-radius: calc(var(--radius) * 0.5);
+      background: var(--muted-hex);
+      border: 1px solid var(--border-hex);
+    }
+
+    .status.error {
+      color: #ef4444;
+      border-color: #ef4444;
+      background: color-mix(in srgb, #ef4444 10%, transparent);
+    }
+
+    .status.success {
+      color: var(--primary-hex);
+      border-color: var(--primary-hex);
+      background: color-mix(in srgb, var(--primary-hex) 10%, transparent);
+    }
+
+    hr {
+      border: none;
+      border-top: 1px solid var(--border-hex);
+      margin: 16px 0;
+    }
+
+    .form-section {
+      background: var(--card-hex);
+      border-radius: var(--radius);
+      padding: 14px;
+      border: 1px solid var(--border-hex);
+      margin-bottom: 12px;
+    }
+  </style>
+</head>
+<body>
+  <h1>
+    <div class="logo">T</div>
+    Trackeep Saver
+  </h1>
+  <div class="hint" id="configHint"></div>
+
+  <button id="openOptions" class="secondary" style="width:100%; margin-bottom:12px;">⚙️ Open Options</button>
+
+  <div class="form-section">
+    <div class="section-title">Save current page / video</div>
+    <label for="bookmarkTitle">Title</label>
+    <input id="bookmarkTitle" type="text" />
+
+    <label for="bookmarkUrl">URL</label>
+    <input id="bookmarkUrl" type="url" required />
+
+    <label for="bookmarkDescription">Description (optional)</label>
+    <textarea id="bookmarkDescription" placeholder="Why is this page or video important?"></textarea>
+
+    <label for="bookmarkTags">Tags (comma-separated, optional)</label>
+    <input id="bookmarkTags" type="text" placeholder="reading, video, dev" />
+
+    <div class="row" style="margin-top:12px; justify-content: space-between;">
+      <div class="checkbox-row">
+        <input id="bookmarkPublic" type="checkbox" />
+        <label for="bookmarkPublic" style="margin:0; font-weight:400;">Public</label>
+      </div>
+      <button type="submit" id="saveBookmarkBtn">💾 Save bookmark</button>
+    </div>
+  </div>
+
+  <hr />
+
+  <div class="form-section">
+    <div class="section-title">Upload file to Trackeep</div>
+    <label for="fileInput">File</label>
+    <input id="fileInput" type="file" />
+
+    <label for="fileDescription">Description (optional)</label>
+    <textarea id="fileDescription" placeholder="Short description for this file"></textarea>
+
+    <div style="margin-top:12px; text-align:right;">
+      <button type="submit" id="uploadFileBtn">📤 Upload file</button>
+    </div>
+  </div>
+
+  <div id="status" class="status"></div>
+
+  <script src="popup.js"></script>
+</body>
+</html>

Others/browser-extension/popup.js

@@ -0,0 +1,284 @@
+/* global chrome */
+
+const statusEl = document.getElementById('status');
+const configHintEl = document.getElementById('configHint');
+const openOptionsBtn = document.getElementById('openOptions');
+
+const bookmarkTitleInput = document.getElementById('bookmarkTitle');
+const bookmarkUrlInput = document.getElementById('bookmarkUrl');
+const bookmarkDescriptionInput = document.getElementById('bookmarkDescription');
+const bookmarkTagsInput = document.getElementById('bookmarkTags');
+const bookmarkPublicInput = document.getElementById('bookmarkPublic');
+const saveBookmarkBtn = document.getElementById('saveBookmarkBtn');
+
+const fileInput = document.getElementById('fileInput');
+const fileDescriptionInput = document.getElementById('fileDescription');
+const uploadFileBtn = document.getElementById('uploadFileBtn');
+
+let trackeepConfig = {
+  apiBaseUrl: '',
+  authToken: ''
+};
+
+function setStatus(message, type) {
+  statusEl.textContent = message || '';
+  statusEl.classList.remove('error', 'success');
+  if (type) {
+    statusEl.classList.add(type);
+  }
+}
+
+function disableForms(disabled) {
+  [bookmarkTitleInput, bookmarkUrlInput, bookmarkDescriptionInput, bookmarkTagsInput, bookmarkPublicInput, saveBookmarkBtn,
+   fileInput, fileDescriptionInput, uploadFileBtn].forEach((el) => {
+    if (!el) return;
+    el.disabled = disabled;
+  });
+}
+
+function loadConfig(callback) {
+  chrome.storage.sync.get(['trackeepApiBaseUrl', 'trackeepAuthToken'], (items) => {
+    const apiBaseUrl = (items.trackeepApiBaseUrl || '').trim();
+    const authToken = (items.trackeepAuthToken || '').trim();
+
+    trackeepConfig = { apiBaseUrl, authToken };
+
+    if (!apiBaseUrl || !authToken) {
+      configHintEl.textContent = 'Configure API URL and token in Options to enable saving.';
+      disableForms(true);
+    } else {
+      configHintEl.textContent = `Using API: ${apiBaseUrl}`;
+      disableForms(false);
+    }
+
+    if (typeof callback === 'function') {
+      callback();
+    }
+  });
+}
+
+function detectTrackeepDomain(callback) {
+  chrome.tabs.query({ active: true, currentWindow: true }, (tabs) => {
+    const tab = tabs && tabs[0];
+    if (!tab || !tab.url) {
+      if (callback) callback();
+      return;
+    }
+
+    try {
+      const url = new URL(tab.url);
+      // Common Trackeep domains: localhost, trackeep.*, etc.
+      const isTrackeepDomain = url.hostname.includes('trackeep') || url.hostname === 'localhost';
+      if (isTrackeepDomain && url.protocol === 'https:') {
+        const candidate = `${url.origin}/api/v1`;
+        // Only pre-fill if not already set
+        chrome.storage.sync.get(['trackeepApiBaseUrl'], (items) => {
+          if (!items.trackeepApiBaseUrl) {
+            chrome.storage.sync.set({ trackeepApiBaseUrl: candidate }, () => {
+              console.log('Auto-detected Trackeep API URL:', candidate);
+              if (callback) callback();
+            });
+          } else {
+            if (callback) callback();
+          }
+        });
+      } else {
+        if (callback) callback();
+      }
+    } catch (e) {
+      if (callback) callback();
+    }
+  });
+}
+
+function initActiveTab() {
+  chrome.tabs.query({ active: true, currentWindow: true }, (tabs) => {
+    const tab = tabs && tabs[0];
+    if (!tab) return;
+
+    // Check for context menu data first
+    chrome.storage.local.get(['contextMenuData'], (items) => {
+      const ctx = items.contextMenuData;
+      if (ctx && ctx.timestamp && Date.now() - ctx.timestamp < 5000) {
+        // Use context menu data if recent
+        if (ctx.url && !bookmarkUrlInput.value) {
+          bookmarkUrlInput.value = ctx.url;
+        }
+        if (ctx.title && !bookmarkTitleInput.value) {
+          bookmarkTitleInput.value = ctx.title;
+        }
+        if (ctx.selection && !bookmarkDescriptionInput.value) {
+          bookmarkDescriptionInput.value = ctx.selection;
+        }
+        // Clear after using
+        chrome.storage.local.remove(['contextMenuData']);
+      } else {
+        // Fallback to active tab
+        if (tab.title && !bookmarkTitleInput.value) {
+          bookmarkTitleInput.value = tab.title;
+        }
+        if (tab.url && !bookmarkUrlInput.value) {
+          bookmarkUrlInput.value = tab.url;
+        }
+      }
+    });
+  });
+}
+
+async function saveBookmark(event) {
+  event.preventDefault();
+  setStatus('', null);
+
+  const { apiBaseUrl, authToken } = trackeepConfig;
+  if (!apiBaseUrl || !authToken) {
+    setStatus('Missing API URL or auth token. Open options first.', 'error');
+    return;
+  }
+
+  const url = bookmarkUrlInput.value.trim();
+  if (!url) {
+    setStatus('URL is required.', 'error');
+    return;
+  }
+
+  const title = bookmarkTitleInput.value.trim() || url;
+  const description = bookmarkDescriptionInput.value.trim();
+  const tagsRaw = bookmarkTagsInput.value.trim();
+  const isPublic = !!bookmarkPublicInput.checked;
+
+  const tags = tagsRaw
+    ? tagsRaw.split(',').map((t) => t.trim()).filter(Boolean)
+    : [];
+
+  const payload = {
+    title,
+    url,
+    description,
+    tags,
+    is_public: isPublic
+  };
+
+  saveBookmarkBtn.disabled = true;
+  setStatus('Saving bookmark…', null);
+
+  try {
+    const base = apiBaseUrl.replace(/\/$/, '');
+    const response = await fetch(`${base}/bookmarks`, {
+      method: 'POST',
+      headers: {
+        'Content-Type': 'application/json',
+        'Authorization': `Bearer ${authToken}`
+      },
+      body: JSON.stringify(payload)
+    });
+
+    if (!response.ok) {
+      let errorMessage = `Failed to save bookmark (status ${response.status})`;
+      try {
+        const data = await response.json();
+        if (data && data.error) {
+          errorMessage = data.error;
+        }
+      } catch (_) {
+        // ignore JSON parse errors
+      }
+      throw new Error(errorMessage);
+    }
+
+    setStatus('Bookmark saved to Trackeep.', 'success');
+  } catch (err) {
+    console.error('Error saving bookmark', err);
+    setStatus(err && err.message ? err.message : 'Failed to save bookmark.', 'error');
+  } finally {
+    saveBookmarkBtn.disabled = false;
+  }
+}
+
+async function uploadFile(event) {
+  event.preventDefault();
+  setStatus('', null);
+
+  const { apiBaseUrl, authToken } = trackeepConfig;
+  if (!apiBaseUrl || !authToken) {
+    setStatus('Missing API URL or auth token. Open options first.', 'error');
+    return;
+  }
+
+  const file = fileInput.files && fileInput.files[0];
+  if (!file) {
+    setStatus('Please choose a file to upload.', 'error');
+    return;
+  }
+
+  const description = fileDescriptionInput.value.trim();
+
+  const formData = new FormData();
+  formData.append('file', file, file.name);
+  if (description) {
+    formData.append('description', description);
+  }
+
+  uploadFileBtn.disabled = true;
+  setStatus('Uploading file…', null);
+
+  try {
+    const base = apiBaseUrl.replace(/\/$/, '');
+    const response = await fetch(`${base}/files/upload`, {
+      method: 'POST',
+      headers: {
+        'Authorization': `Bearer ${authToken}`
+      },
+      body: formData
+    });
+
+    if (!response.ok) {
+      let errorMessage = `Failed to upload file (status ${response.status})`;
+      try {
+        const data = await response.json();
+        if (data && data.error) {
+          errorMessage = data.error;
+        }
+      } catch (_) {
+        // ignore JSON parse errors
+      }
+      throw new Error(errorMessage);
+    }
+
+    setStatus('File uploaded to Trackeep.', 'success');
+    fileInput.value = '';
+    fileDescriptionInput.value = '';
+  } catch (err) {
+    console.error('Error uploading file', err);
+    setStatus(err && err.message ? err.message : 'Failed to upload file.', 'error');
+  } finally {
+    uploadFileBtn.disabled = false;
+  }
+}
+
+function openOptions() {
+  if (chrome.runtime.openOptionsPage) {
+    chrome.runtime.openOptionsPage();
+  } else {
+    window.open(chrome.runtime.getURL('options.html'));
+  }
+}
+
+// Init
+
+document.addEventListener('DOMContentLoaded', () => {
+  openOptionsBtn.addEventListener('click', openOptions);
+  saveBookmarkBtn.addEventListener('click', (e) => {
+    e.preventDefault();
+    saveBookmark(e);
+  });
+  uploadFileBtn.addEventListener('click', (e) => {
+    e.preventDefault();
+    uploadFile(e);
+  });
+
+  detectTrackeepDomain(() => {
+    loadConfig(() => {
+      initActiveTab();
+    });
+  });
+});