From 1cba4e8649f4822b0fa94ccbebda3974c2000776 Mon Sep 17 00:00:00 2001 From: Olaf Date: Tue, 25 Aug 2026 08:12:39 +0200 Subject: [PATCH] plugin settings and eyecandy --- README.md | 1 + VIBE/CHAT_LOG.md | 12 ++++++++++++ VIBE/PROMPTS.md | 2 ++ frontend/static/style.css | 7 ++++++- webextension/popup.css | 22 +++++++++++++++++++++- webextension/popup.html | 3 ++- webextension/popup.js | 14 ++++++++++++++ 7 files changed, 58 insertions(+), 3 deletions(-) diff --git a/README.md b/README.md index 1155777..81a6c9a 100644 --- a/README.md +++ b/README.md @@ -79,6 +79,7 @@ Open these URLs: The browser extension defaults to `http://localhost:8000`. The supplied `Logo.svg` is bundled as `frontend/static/logo.svg` for web pages and `webextension/logo.svg` for the Firefox popup and settings page. +The visible LinkLog brand text uses the Google Foundry `Asset` font when available, with local fallbacks in the Firefox extension. ## Regenerate Logo Assets diff --git a/VIBE/CHAT_LOG.md b/VIBE/CHAT_LOG.md index 5b40432..a05d127 100644 --- a/VIBE/CHAT_LOG.md +++ b/VIBE/CHAT_LOG.md @@ -439,3 +439,15 @@ Refine the Plugins Settings page. When the user is logged in it shows all " logged in at ` with a sign-out button, and show the original login form when signed out or when token validation fails. Sign-out revokes the token when possible, clears stored credentials, and returns to the form. Extension and backend validation passed. + +### User +On the plugin, next to the logo, create a link of the form: [LinkLog](https:///) + +### Assistant outcome +Added a `LinkLog` link next to the Firefox popup logo. It uses the configured backend origin and authenticated username to target `//`, preserving HTTP or HTTPS from the configured backend. Popup HTML, scripts, manifest, and backend regression validation passed. + +### User +Use the Asset Font from google foundry as font for the LinkLog text + +### Assistant outcome +Applied the Google Foundry `Asset` font to visible LinkLog branding on the web and Firefox popup, retaining graceful local fallbacks for restricted or offline extension contexts. Font declarations, branding references, extension scripts, whitespace checks, and the strict backend suite passed. diff --git a/VIBE/PROMPTS.md b/VIBE/PROMPTS.md index 4b9b8ef..13439ad 100644 --- a/VIBE/PROMPTS.md +++ b/VIBE/PROMPTS.md @@ -76,6 +76,8 @@ 72. Make sure the addon conforms to Firefox guidelines 73. How come when te container starts after docker compose down -v the database is still populated with old links 74. Refine the Plugins Settings page. When the user is logged in it shows all " logged in at " and a sign-out button. If the user is not logged in it shows the form as is now. +75. On the plugin, next to the logo, create a link of the form: [LinkLog](https:///) +76. Use the Asset Font from google foundry as font for the LinkLog text ## Future entries diff --git a/frontend/static/style.css b/frontend/static/style.css index 8d0576f..b92113c 100644 --- a/frontend/static/style.css +++ b/frontend/static/style.css @@ -1,4 +1,4 @@ -@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Space+Grotesk:wght@500;600;700&display=swap'); +@import url('https://fonts.googleapis.com/css2?family=Asset&family=DM+Sans:wght@400;500;600;700&family=Space+Grotesk:wght@500;600;700&display=swap'); :root { --base: #1e1e2e; @@ -93,6 +93,11 @@ body::selection { object-position: left center; } +.site-header .site-logo + h1, +.feed-link { + font-family: 'Asset', 'Space Grotesk', sans-serif; +} + .site-header p { max-width: 34rem; margin: 14px 0 0; diff --git a/webextension/popup.css b/webextension/popup.css index 9242ab8..9d68959 100644 --- a/webextension/popup.css +++ b/webextension/popup.css @@ -16,15 +16,35 @@ header h1 { font-size: 1.2rem; } +header { + display: flex; + align-items: center; + gap: 12px; + margin-bottom: 14px; +} + .extension-logo { display: block; width: 150px; height: 42px; - margin-bottom: 14px; + margin-bottom: 0; object-fit: contain; object-position: left center; } +.feed-link { + color: #b4befe; + font-family: 'Asset', 'Avenir Next', sans-serif; + font-size: 0.95rem; + font-weight: 700; + text-decoration: none; +} + +.feed-link:hover { + color: #cba6f7; + text-decoration: underline; +} + label { display: block; margin-bottom: 12px; diff --git a/webextension/popup.html b/webextension/popup.html index 0480fb3..f9cebf2 100644 --- a/webextension/popup.html +++ b/webextension/popup.html @@ -8,7 +8,8 @@
- + +
diff --git a/webextension/popup.js b/webextension/popup.js index c8f6187..95c293a 100644 --- a/webextension/popup.js +++ b/webextension/popup.js @@ -6,6 +6,7 @@ const commentInput = document.getElementById('comment'); const openSettingsButton = document.getElementById('open-settings'); const existingTags = document.getElementById('existing-tags'); const newTagsInput = document.getElementById('new-tags'); +const feedLink = document.getElementById('feed-link'); function setStatus(message, isError = false) { statusEl.textContent = message; @@ -23,6 +24,18 @@ async function getSettings() { return result; } +async function updateFeedLink() { + const settings = await browser.storage.local.get(['backendUrl', 'username', 'accessToken']); + if (!settings.backendUrl || !settings.username || !settings.accessToken) return; + try { + const backend = new URL(settings.backendUrl); + feedLink.href = `${backend.origin}/${encodeURIComponent(settings.username)}/`; + feedLink.classList.remove('hidden'); + } catch (error) { + feedLink.classList.add('hidden'); + } +} + async function loadExistingTags() { const settings = await getSettings(); if (!settings.backendUrl || !settings.accessToken) { @@ -128,3 +141,4 @@ openSettingsButton.addEventListener('click', () => browser.runtime.openOptionsPa form.addEventListener('submit', handleSubmit); populateCurrentTab(); loadExistingTags(); +updateFeedLink();