plugin settings and eyecandy

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
 

VIBE/CHAT_LOG.md

@@ -439,3 +439,15 @@ Refine the Plugins Settings page. When the user is logged in it shows all "<user
 
 ### Assistant outcome
 Updated the Firefox extension settings page to restore valid stored sessions, show `<username> logged in at <backend URL>` 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://<host>/<user>)
+
+### Assistant outcome
+Added a `LinkLog` link next to the Firefox popup logo. It uses the configured backend origin and authenticated username to target `/<user>/`, 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.

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 "<user> logged in at <url>" 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://<host>/<user>)
+76. Use the Asset Font from google foundry as font for the LinkLog text
 
 ## Future entries
 

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;

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;

webextension/popup.html

@@ -9,6 +9,7 @@
     <main class="popup-shell">
       <header>
         <img class="extension-logo" src="logo.svg" alt="LinkLog" />
+        <a id="feed-link" class="feed-link hidden" href="/" target="_blank" rel="noopener noreferrer">LinkLog</a>
       </header>
 
       <div id="status" class="status hidden" aria-live="polite"></div>

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();