Fonts served via server

CHANGELOG.MD

@@ -1,5 +1,31 @@
 # Changelog
 
+## Version v0.1.2
+### Features
+ * Users can edit or delete labels created by themselves on the labels page
+ * Administrators can edit labels from the admin interface
+ * Filter label visibility so logged-in users only see default/admin-created labels and their own
+ * Grandfather tags with unknown ownership as default/admin interface labels
+ * Ability to minimize settings panels to only show headers in the Admin and Profile interfaces for easy navigation
+ * Styled settings panel headers with distinct theme accent colors for visual distinction
+ * Settings panels are collapsed by default when opening the Admin and Profile pages
+ * Show checked-by-default Mastodon publishing on New Entry only for configured users
+ * Made every web header logo link to the home page
+ * Added a high-contrast Red color theme
+ * Brightened the Red theme surfaces and deepened its crimson accents
+ * Allow every user to filter the feed using every available tag or label
+ * Bundle required web fonts during Docker image builds and serve them from LinkLog
+ ### Fixed
+ * Fixed element ID conflict on the Admin page so Available Themes load correctly
+ * Positioned new-entry tag checkboxes after their label text
+ * Kept new-entry tag checkboxes immediately left of their labels at all viewport sizes
+ * Prevented the new-entry form grid from placing tag checkboxes above their labels
+ * Kept unconfigured New Entry Mastodon publishing controls hidden
+ * Restored the home-page header layout, keeping the action controls above the filter toolbar
+ * Made the tag filter refresh the feed directly when its selection changes
+ * Cache-busted the feed script to ensure browsers load the responsive tag filter
+ * Fixed feed initialization so tag filtering does not receive promise results as a selected tag [Still no complete fix]
+
 ## Version v0.1.1 
 ### Features
  * Ability to add new logs through the web interface

Dockerfile

@@ -13,6 +13,8 @@ RUN pip install --no-cache-dir -r backend/requirements.txt
 
 COPY backend ./backend
 COPY frontend ./frontend
+COPY scripts/download_fonts.py ./scripts/download_fonts.py
+RUN python scripts/download_fonts.py
 RUN useradd --create-home --uid 10001 linklog \
     && mkdir -p /app/backend/data \
     && chown -R linklog:linklog /app

README.md

@@ -76,7 +76,7 @@ Open these URLs:
 The browser extension requires a backend URL to be entered during setup; it does not assume a default server.
 
 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.
+The visible LinkLog brand text uses the Google Foundry `Asset` font. Docker image builds download and bundle Asset, DM Sans, and Space Grotesk under `/static/fonts`, so the web frontend loads fonts from the LinkLog server rather than Google. The Firefox extension uses its bundled assets and local fallback fonts without requesting Google Fonts.
 
 ## Regenerate Logo Assets
 

VIBE/CHAT_LOG.md

@@ -1274,3 +1274,153 @@ Update the VIBE directory with what you have done.
 
 ### Assistant outcome
 Appended the release workflow changes and this VIBE update request to `VIBE/PROMPTS.md` and `VIBE/CHAT_LOG.md` in the existing append-only format.
+
+### User
+I want that the users is able to edit or delete labels(tags) that were created by the user itself. Also validate that any logged in user will only see the labels created by default, in the admin panel, and those by themselves, not by any other user. If this leads to an update in the database then if ownership of labels is unknown they may be grandfathered as-if created in the admin interface
+
+### Assistant outcome
+Implemented creator edit/delete rights for user labels on `/labels` and `/api/user/labels/{label_id}`, isolated label visibility so logged-in users only see default/admin labels and their own created labels, dynamically set `created_by` when new tags are saved from links, grandfathered existing tags with `NULL` ownership as default/admin labels, added `frontend/static/labels.js`, and expanded unit test coverage.
+
+### User
+Make sure that in the admin interface the labels can be edited
+
+### Assistant outcome
+Added `PUT /api/admin/labels/{label_id}` for administrator label renaming, updated `update_label` service function to accept `is_admin=True`, added inline edit controls to `frontend/static/admin.js` for administrator label management, and added regression test coverage.
+
+### User
+Make sure that the logs in VIBE are updated
+
+### Assistant outcome
+Updated `VIBE/PROMPTS.md` and `VIBE/CHAT_LOG.md` with the recent user prompts and assistant outcomes.
+
+### User
+Update Changelog too
+
+### Assistant outcome
+Updated `CHANGELOG.MD` with the recent feature additions (user label CRUD, label visibility isolation, grandfathering unknown label ownership, and administrator label editing), and updated `VIBE/PROMPTS.md` and `VIBE/CHAT_LOG.md`.
+
+### User
+In the Admin interface allow to minimize each settings pannel to only show its header, In order to easely navigate the page.
+
+### Assistant outcome
+Added collapsible minimize/expand toggle buttons to all settings panels (`.settings-panel`) in the Admin interface. Clicking a panel header toggles its `.minimized` state and `aria-expanded` attribute, hiding the panel body content to show only the header and toggle icon. Added CSS rules and updated tests.
+
+### User
+Clicking on the collapse button doesn't toggle
+
+### Assistant outcome
+Fixed panel toggle initialization in `admin.js` to attach click handlers immediately on page load and `DOMContentLoaded` rather than waiting for async session validation calls to finish. Added `pointer-events: none` to button child elements in `style.css` and bound event listeners to target headers/buttons with event prevention to guarantee reliable click toggling.
+
+### User
+Give the header of each setting-panel a somewhat differing color
+
+### Assistant outcome
+Applied distinct theme accent colors (`var(--mauve)`, `var(--teal)`, `var(--peach)`, `var(--blue)`, `var(--lavender)`) to settings panel headers via `:nth-of-type` CSS rules, allowing panel toggle buttons to inherit the accent colors cleanly across all themes.
+
+### User
+change the background of the header too
+
+### Assistant outcome
+Added soft, translucent accent backgrounds (`color-mix` with `var(--surface-1)`) and accent left borders to each settings panel header in `style.css`. Updated `admin.js` to ensure clicking anywhere on the header bar toggles the panel minimize state cleanly. Passed all 55 tests.
+
+### User
+Make sure all setting-panels are collapsed when opening the page
+
+### Assistant outcome
+Updated `admin.html` and `admin.js` so all settings panels start with the `minimized` class and `aria-expanded="false"` by default, collapsing all panels on page open. Passed all 55 tests.
+
+### User
+Apply exactly the same functionality to the profile page
+
+### Assistant outcome
+Applied collapsible minimizable settings panels to the profile page (`user_profile.html` and `profile.js`), starting all panels collapsed by default with toggle buttons, distinct header colors/backgrounds, and aria-expanded state management. Passed all 55 tests.
+
+### User
+On the admin page under Available Themes, the page does not load available themes
+
+### Assistant outcome
+Fixed element ID conflict on `admin.html` where both the header theme submenu and the admin form container used `id="theme-options"`. Renamed the admin form container to `id="admin-theme-options"` and updated `admin.js` to target `#admin-theme-options`. Available themes now load correctly on the admin page. Passed all 55 tests.
+
+### User
+on the new-entry page the checkbox should be following the labels - now they are positioned above.
+
+### Assistant outcome
+Reordered the new-entry tag control markup so each label is followed by its checkbox. JavaScript syntax validation and the focused API test module passed with 35 tests.
+
+### User
+The checkboxes should be immediately to the left of the label not below left
+
+### Assistant outcome
+Restored checkbox-before-label ordering and added a scoped compact-sizing rule for new-entry tag checkboxes. This prevents the mobile global input-width rule from placing a checkbox on its own line. JavaScript syntax validation and the focused API test module passed with 35 tests.
+
+### User
+The checkbox takes the full width of the grid which forces the label to be printed underneath instead of directly next to it.
+
+### Assistant outcome
+Fixed the actual layout conflict: `.form-section label` uses a grid layout whose selector overrode the tag label's flex layout. Added the more specific `.form-section label.tag-checkbox` inline-flex rule and reset its checkbox margin, keeping each checkbox directly left of its tag text. The focused API test module passed with 35 tests and `git diff --check` passed.
+
+### User
+Only show the Mastodon publishing on new page if the user has Mastodon posting configured. Then default the checkbox to yes
+
+### Assistant outcome
+Added a safe `configured` status to the authenticated Mastodon configuration response. New Entry now hides its Mastodon publishing section unless the current user has both an instance and access token configured; when shown, its checkbox defaults to checked. Link creation accepts `post_to_mastodon`, allowing an unchecked control to skip Mastodon while preserving dispatch of other plugins. Added posting and configuration regression coverage.
+
+### User
+In the currently running contaier the user olaf has no mastodon configured but the mastodon checkbox is still visible
+
+### Assistant outcome
+Found that `.form-section { display: grid; }` appeared later in the stylesheet than `.hidden { display: none; }`, overriding the initial hidden state of the Mastodon fieldset. Added `.form-section.hidden { display: none; }`, so the publishing control stays hidden until the authenticated configuration check explicitly reveals it.
+
+### User
+When clicking on the logo always go to the home page
+
+### Assistant outcome
+Wrapped the header logo in each web template with an accessible home-page link. Extended the heading font selector for the new logo-link wrapper, preserving existing header styling. Confirmed all eight templates contain exactly one home-linked logo and the focused API test module passed with 36 tests.
+
+### User
+Add a red collor theme
+
+### Assistant outcome
+Added a Red theme to the theme catalog with a high-contrast crimson palette in the frontend stylesheet. It is enabled by default on new installations and is available to select under Admin > Available themes. Extended the theme-selection regression test to verify the public theme API returns it when enabled.
+
+### User
+Make the theme brighter and darker red
+
+### Assistant outcome
+Refined the Red theme palette with brighter white and red-tinted surfaces, plus deeper saturated crimson accents, borders, and shadows while preserving dark high-contrast text. The focused theme API test and whitespace validation passed.
+
+### User
+Since checkin d433a305f5cd8ccdafde8a0f7764462e8c167162 on the home page the filter toolbar moved so that the menu button and new entry are not in the top left anylonger - revert to the previous layout
+
+### Assistant outcome
+Confirmed the referenced commit did not change the feed header, then identified the current template had the toolbar outside its `.header-tools` wrapper. Restored the prior header structure: the New Entry and menu controls remain grouped above the filter toolbar on the right side of the home-page header. Added a rendered-page regression assertion for `.header-tools`.
+
+### User
+I want every user to filter on every available tag/label
+
+### Assistant outcome
+Separated feed filtering from label management: `/api/tags` now returns every tag/label to all callers, allowing complete filtering of the public feed. `/api/user/labels` remains ownership-scoped, so users still cannot manage other users' labels. Updated tag visibility regression coverage for authenticated and anonymous callers.
+
+### User
+tag filter doesn't seem to respond when pressed
+
+### Assistant outcome
+Updated the tag-filter change handler to pass the newly selected tag directly to the feed refresh instead of relying on the browser to persist and immediately reread the preference cookie. This makes filtering work even when cookie persistence is unavailable or delayed. Cache-busted the feed script to `feed.js?v=10` and added a regression assertion for the direct refresh path.
+
+### User
+The tag filter still does not allow me to select tags, even though the raw html contains the correct content. Also the user filter and the sort functionality work too
+
+### Assistant outcome
+Verified the live running container with Chromium and Playwright: selecting `#AI` changes the tag dropdown value, writes the preference cookie, and renders only matching feed entries. The deployed script already contains the direct-refresh handler, so cache-busted it again to `feed.js?v=11` and rebuilt the Compose service. Confirmed the live page serves the new asset version.
+
+### User
+I believe tag selection was still working for v0.1.0 - it is still broken
+
+### Assistant outcome
+Found the actual regression in the direct-refresh update: `Promise.all([loadUsers(), loadTags()]).then(loadFeed)` passed its results array into the new `selectedTag` parameter. The feed then attempted to call `toLowerCase()` on that array during initialization. Restored the v0.1.0 callback shape with `.then(() => loadFeed())`, retained direct selected-tag refreshes, added a regression assertion, and cache-busted the feed asset to `feed.js?v=12`.
+
+### User
+Don't let the frontend and plugin pull from the google foundry but make sure any necessary fonts are served from the linklog server. I would prefer the fonts to be updated at docker image building time.
+
+### Assistant outcome
+Removed the web frontend's Google Fonts import and added a Docker build-time font bundling script. Image builds now download pinned Asset, DM Sans, and Space Grotesk files into `frontend/static/fonts`, generate a local `fonts.css`, and serve them through LinkLog at `/static/fonts`. The Firefox extension did not make Google Font requests and continues to use bundled assets with local fallback fonts. A clean image build confirmed all nine local font assets are present.

VIBE/PROMPTS.md

@@ -224,6 +224,35 @@
 211. Don't put new entry in the hamburger menu but present it as a seperate button next to the style selector
 212. Put the new entry button left of the hamburger menu
 213. The style selection should move into the hamburger menu - but in such a way that it becomes a submenu so that it doesn't clutter the menu structure
+214. I want that the users is able to edit or delete labels(tags) that were created by the user itself. Also validate that any logged in user will only see the labels created by default, in the admin panel, and those by themselves, not by any other user. If this leads to an update in the database then if ownership of labels is unknown they may be grandfathered as-if created in the admin interface
+215. Make sure that in the admin interface the labels can be edited
+216. Make sure that the logs in VIBE are updated
+217. Update Changelog too
+218. In the Admin interface allow to minimize each settings pannel to only show its header, In order to easely navigate the page.
+219. Make sure all setting-panels are collapsed when opening the page
+218. In the Admin interface allow to minimize each settings pannel to only show its header, In order to easely navigate the page.
+219. Give the header of each setting-panel a somewhat differing color.
+220. Change the background of the header too.
+221. Apply exactly the same functionality to the profile page
+222. On the admin page under Available Themes, the page does not load available themes
+218. Give the header of each setting-panel a somewhat differing color
+218. In the Admin interface allow to minimize each settings pannel to only show its header, In order to easely navigate the page.
+219. Clicking on the collapse button doesn't toggle
+218. In the Admin interface allow to minimize each settings pannel to only show its header, In order to easely navigate the page.
+223. On the new-entry page the checkbox should be following the labels - now they are positioned above.
+224. The checkboxes should be immediately to the left of the label not below left
+225. The checkbox takes the full width of the grid which forces the label to be printed underneath instead of directly next to it.
+226. Only show the Mastodon publishing on new page if the user has Mastodon posting configured. Then default the checkbox to yes
+227. In the currently running contaier the user olaf has no mastodon configured but the mastodon checkbox is still visible
+228. When clicking on the logo always go to the home page
+229. Add a red collor theme
+230. Make the theme brighter and darker red
+231. Since checkin d433a305f5cd8ccdafde8a0f7764462e8c167162 on the home page the filter toolbar moved so that the menu button and new entry are not in the top left anylonger - revert to the previous layout
+232. I want every user to filter on every available tag/label
+233. tag filter doesn't seem to respond when pressed
+234. The tag filter still does not allow me to select tags, even though the raw html contains the correct content. Also the user filter and the sort functionality work too
+235. I believe tag selection was still working for v0.1.0 - it is still broken
+236. Don't let the frontend and plugin pull from the google foundry but make sure any necessary fonts are served from the linklog server. I would prefer the fonts to be updated at docker image building time.
 
 ## Future entries
 

backend/app/api/admin.py

@@ -10,7 +10,7 @@ from pydantic import BaseModel
 
 from backend.app.api.dependencies import require_admin
 from backend.app.database import get_connection, hash_password
-from backend.app.services.link_service import delete_label
+from backend.app.services.link_service import delete_label, update_label
 from backend.app.services.email_service import (
     get_smtp_settings,
     save_smtp_settings,
@@ -35,6 +35,10 @@ class AdminPluginUpdate(BaseModel):
     config: dict | None = None
 
 
+class AdminLabelUpdate(BaseModel):
+    name: str
+
+
 class AdminUserCreate(BaseModel):
     username: str
     email: str
@@ -304,6 +308,18 @@ def admin_delete_label(label_id: str, current_user: dict = Depends(require_admin
     return {'status': 'deleted', 'id': label_id}
 
 
+@router.put('/labels/{label_id}')
+def admin_edit_label(label_id: str, payload: AdminLabelUpdate, current_user: dict = Depends(require_admin)):
+    try:
+        result = update_label(label_id, user_id=current_user['id'], name=payload.name, is_admin=True)
+    except ValueError as error:
+        raise HTTPException(status_code=409, detail=str(error)) from error
+    if result is None:
+        raise HTTPException(status_code=404, detail='Label not found')
+    record_audit_event(current_user['id'], 'label_updated', 'label', label_id)
+    return result
+
+
 @router.get('/labels')
 def admin_list_labels(_: dict = Depends(require_admin)):
     with get_connection() as conn:

backend/app/api/dependencies.py

@@ -38,6 +38,22 @@ def get_current_user(
     return dict(user)
 
 
+def get_optional_current_user(
+    credentials: HTTPAuthorizationCredentials | None = Depends(bearer_scheme),
+) -> dict | None:
+    if credentials is None or credentials.scheme.lower() != 'bearer':
+        return None
+    token_data = validate_token(credentials.credentials)
+    if token_data is None:
+        return None
+    with get_connection() as conn:
+        user = conn.execute(
+            'SELECT * FROM users WHERE id = ?',
+            (token_data['user_id'],),
+        ).fetchone()
+    return dict(user) if user else None
+
+
 def require_admin(user: dict = Depends(get_current_user)):
     if not user['is_admin']:
         raise HTTPException(status_code=status.HTTP_403_FORBIDDEN, detail='Administrator access required')

backend/app/api/links.py

@@ -2,7 +2,7 @@
 ## SPDX-License-Identifier: GPL-3.0-or-later
 
 import json
-from fastapi import APIRouter, Header, HTTPException, Response, status
+from fastapi import APIRouter, Depends, Header, HTTPException, Response, status
 import logging
 from pydantic import BaseModel
 
@@ -23,6 +23,7 @@ class LinkCreate(BaseModel):
     comment: str = ''
     timestamp: str | None = None
     tags: list[str] = []
+    post_to_mastodon: bool = True
 
 
 class LinkUpdate(BaseModel):
@@ -87,7 +88,11 @@ def create_link_endpoint(payload: LinkCreate, response: Response, authorization:
         raise HTTPException(status_code=422, detail=str(error)) from error
     if duplicate:
         response.status_code = status.HTTP_200_OK
-    plugin_results = plugin_manager.dispatch({'type': 'link_created', **record})
+    plugin_results = plugin_manager.dispatch({
+        'type': 'link_created',
+        'post_to_mastodon': payload.post_to_mastodon,
+        **record,
+    })
     mastodon_result = next((result for result in plugin_results if result.get('plugin') == 'mastodon'), None)
     if mastodon_result and mastodon_result.get('status') == 'posted':
         mark_mastodon_posted(record['id'], info['user_id'], mastodon_result.get('post_id'))

backend/app/api/user_config.py

@@ -390,6 +390,8 @@ def get_user_plugin_config(plugin_name: str, user: dict = Depends(get_current_us
         return {}
 
     config = json.loads(row['config']) if row['config'] else {}
+    if plugin_name == 'mastodon':
+        config['configured'] = bool(config.get('instance') and config.get('access_token'))
     if config.get('access_token'):
         config.pop('access_token')
     return config

backend/app/services/link_service.py

@@ -27,7 +27,7 @@ def normalize_tags(tags: list[str] | None) -> list[str]:
     return normalized
 
 
-def save_link_tags(conn, link_id: str, tags: list[str]) -> None:
+def save_link_tags(conn, link_id: str, tags: list[str], user_id: str | None = None) -> list[str]:
     canonical_tags = []
     for tag in tags:
         tag_row = conn.execute(
@@ -36,8 +36,8 @@ def save_link_tags(conn, link_id: str, tags: list[str]) -> None:
         ).fetchone()
         if tag_row is None:
             conn.execute(
-                'INSERT INTO tags (id, name) VALUES (?, ?)',
+                'INSERT INTO tags (id, name, created_by) VALUES (?, ?, ?)',
-                (str(uuid4()), tag),
+                (str(uuid4()), tag, user_id),
             )
             tag_row = conn.execute('SELECT id FROM tags WHERE name = ?', (tag,)).fetchone()
         conn.execute(
@@ -103,7 +103,7 @@ def create_link(
                 record['is_public'],
             ),
         )
-        stored_tags = save_link_tags(conn, record['id'], normalized_tags)
+        stored_tags = save_link_tags(conn, record['id'], normalized_tags, user_id=user_id)
         conn.commit()
     record['tags'] = stored_tags
     return record
@@ -173,7 +173,7 @@ def update_link(
         if cursor.rowcount == 0:
             return None
         conn.execute('DELETE FROM link_tags WHERE link_id = ?', (link_id,))
-        stored_tags = save_link_tags(conn, link_id, normalized_tags)
+        stored_tags = save_link_tags(conn, link_id, normalized_tags, user_id=user_id)
         conn.commit()
         row = conn.execute('SELECT * FROM links WHERE id = ?', (link_id,)).fetchone()
         record = dict(row)
@@ -242,7 +242,15 @@ def list_tags():
 def list_user_labels(user_id: str):
     with get_connection() as conn:
         rows = conn.execute(
-            'SELECT id, name, created_by FROM tags WHERE created_by = ? ORDER BY name',
+            '''
+            SELECT tags.id, tags.name, tags.created_by, users.username AS creator
+            FROM tags
+            LEFT JOIN users ON users.id = tags.created_by
+            WHERE tags.created_by IS NULL
+               OR tags.created_by = ?
+               OR users.is_admin = 1
+            ORDER BY tags.name
+            ''',
             (user_id,),
         ).fetchall()
     return [dict(row) for row in rows]
@@ -268,7 +276,7 @@ def create_label(user_id: str, name: str):
     return {'id': label_id, 'name': label, 'created_by': user_id}
 
 
-def update_label(label_id: str, user_id: str, name: str):
+def update_label(label_id: str, user_id: str | None = None, name: str = '', is_admin: bool = False):
     normalized = normalize_tags([name])
     if not normalized:
         raise ValueError('Label cannot be empty')
@@ -276,7 +284,7 @@ def update_label(label_id: str, user_id: str, name: str):
         current = conn.execute(
             'SELECT id, name, created_by FROM tags WHERE id = ?', (label_id,)
         ).fetchone()
-        if current is None or current['created_by'] != user_id:
+        if current is None or (not is_admin and current['created_by'] != user_id):
             return None
         duplicate = conn.execute(
             'SELECT id FROM tags WHERE lower(name) = lower(?) AND id != ?',
@@ -286,7 +294,7 @@ def update_label(label_id: str, user_id: str, name: str):
             raise ValueError('Label already exists')
         conn.execute('UPDATE tags SET name = ? WHERE id = ?', (normalized[0], label_id))
         conn.commit()
-    return {'id': label_id, 'name': normalized[0], 'created_by': user_id}
+    return {'id': label_id, 'name': normalized[0], 'created_by': current['created_by']}
 
 
 def delete_label(label_id: str, user_id: str | None = None, is_admin: bool = False):

backend/app/services/plugin_manager.py

@@ -34,6 +34,9 @@ class MastodonPlugin(BasePlugin):
         return True
 
     def handle_event(self, event):
+        if not event.get('post_to_mastodon', True):
+            return {'status': 'skipped', 'plugin': self.name, 'reason': 'not_requested'}
+
         config = dict(self.config)
         user_id = event.get('user_id')
         if user_id:

backend/app/services/theme_service.py

@@ -16,6 +16,7 @@ THEMES = {
     'dracula': {'label': 'Dracula', 'description': 'A vivid dark theme with high-contrast accents.'},
     'nord': {'label': 'Nord', 'description': 'A cool, muted blue-gray theme.'},
     'solarized': {'label': 'Solarized', 'description': 'A balanced theme available in a light style.'},
+    'red': {'label': 'Red', 'description': 'A warm crimson theme with high-contrast surfaces.'},
 }
 DEFAULT_ENABLED_THEMES = tuple(THEMES)
 

backend/tests/test_api.py

@@ -11,7 +11,7 @@ from unittest.mock import MagicMock, patch
 from fastapi.testclient import TestClient
 
 from backend.app.main import app
-from backend.app.database import get_connection
+from backend.app.database import get_connection, hash_password
 from backend.app.services.email_service import get_smtp_settings
 from backend.app.services.login_throttle import clear_login_failures
 from backend.app.services.otp_service import current_code
@@ -150,10 +150,10 @@ def test_configuration_requires_authentication_and_admin_role():
 def test_admin_can_select_multiple_themes():
     headers = login_headers()
     response = client.put('/api/admin/themes', headers=headers, json={
-        'themes': ['plain-day', 'plain-night', 'latte', 'frappe', 'macchiato', 'mocha', 'dracula', 'nord', 'solarized'],
+        'themes': ['plain-day', 'plain-night', 'latte', 'frappe', 'macchiato', 'mocha', 'dracula', 'nord', 'solarized', 'red'],
     })
     assert response.status_code == 200
-    assert response.json()['enabled'] == ['plain-day', 'plain-night', 'latte', 'frappe', 'macchiato', 'mocha', 'dracula', 'nord', 'solarized']
+    assert response.json()['enabled'] == ['plain-day', 'plain-night', 'latte', 'frappe', 'macchiato', 'mocha', 'dracula', 'nord', 'solarized', 'red']
     public_response = client.get('/api/public/themes')
     assert public_response.status_code == 200
     assert [theme['id'] for theme in public_response.json()] == response.json()['enabled']
@@ -490,25 +490,102 @@ def test_admin_can_toggle_privileges_without_removing_last_admin():
     assert last_admin.status_code == 400
 
 
-def test_users_manage_owned_labels_and_admin_can_delete_any_label():
+def test_users_manage_owned_labels_and_admin_can_edit_and_delete_any_label():
-    alice_headers = login_headers('alice')
+    alice_headers = login_headers('alice') # admin
-    created = client.post('/api/user/labels', headers=alice_headers, json={'name': 'My Label'})
+    bob_headers = login_headers('bob') # non-admin
+
+    created = client.post('/api/user/labels', headers=bob_headers, json={'name': 'Bob Label'})
     assert created.status_code == 201
     label = created.json()
-    assert label['name'] == '#My Label'
+    assert label['name'] == '#Bob Label'
 
-    edited = client.put(f"/api/user/labels/{label['id']}", headers=alice_headers, json={'name': '#Renamed'})
+    # Bob renames own label
+    edited = client.put(f"/api/user/labels/{label['id']}", headers=bob_headers, json={'name': '#RenamedByBob'})
     assert edited.status_code == 200
-    assert edited.json()['name'] == '#Renamed'
+    assert edited.json()['name'] == '#RenamedByBob'
 
-    denied = client.put(f"/api/user/labels/{label['id']}", headers=login_headers('bob'), json={'name': '#Nope'})
+    # Non-owner Alice can edit it via admin endpoint, but NOT user endpoint
-    assert denied.status_code == 404
+    user_denied = client.put(f"/api/user/labels/{label['id']}", headers=alice_headers, json={'name': '#NopeUser'})
-    assert client.delete(f"/api/user/labels/{label['id']}", headers=login_headers('bob')).status_code == 404
+    assert user_denied.status_code == 404
 
+    admin_edited = client.put(f"/api/admin/labels/{label['id']}", headers=alice_headers, json={'name': '#AdminRenamed'})
+    assert admin_edited.status_code == 200
+    assert admin_edited.json()['name'] == '#AdminRenamed'
+
+    # Non-admin Bob cannot access admin edit endpoint
+    bob_admin_denied = client.put(f"/api/admin/labels/{label['id']}", headers=bob_headers, json={'name': '#NopeAdmin'})
+    assert bob_admin_denied.status_code == 403
+
+    # Admin delete
     admin_delete = client.delete(f"/api/admin/labels/{label['id']}", headers=alice_headers)
     assert admin_delete.status_code == 200
 
 
+def test_label_visibility_isolation_and_grandfathering():
+    alice_headers = login_headers('alice')
+    bob_headers = login_headers('bob')
+
+    # Create non-admin user charlie
+    with get_connection() as conn:
+        conn.execute(
+            '''INSERT OR IGNORE INTO users (id, username, email, password_hash, is_admin, email_verified)
+               VALUES (?, ?, ?, ?, 0, 1)''',
+            ('user-3', 'charlie', 'charlie@example.com', hash_password('secret123')),
+        )
+        conn.commit()
+
+    charlie_headers = login_headers('charlie')
+
+    # Create Bob label (non-admin)
+    created_bob = client.post('/api/user/labels', headers=bob_headers, json={'name': 'BobOnlyLabel'}).json()
+    # Create Charlie label (non-admin)
+    created_charlie = client.post('/api/user/labels', headers=charlie_headers, json={'name': 'CharlieOnlyLabel'}).json()
+
+    # Grandfathered label in DB with NULL created_by
+    from uuid import uuid4
+    grandfathered_id = str(uuid4())
+    with get_connection() as conn:
+        conn.execute('INSERT INTO tags (id, name, created_by) VALUES (?, ?, NULL)', (grandfathered_id, '#GrandfatheredLabel'))
+        conn.commit()
+
+    # Bob views /api/user/labels: sees default tags, grandfathered tag, and Bob tag, NOT Charlie tag
+    bob_labels = client.get('/api/user/labels', headers=bob_headers).json()
+    bob_label_names = [l['name'] for l in bob_labels]
+    assert '#BobOnlyLabel' in bob_label_names
+    assert '#GrandfatheredLabel' in bob_label_names
+    assert '#Cybersecurity' in bob_label_names
+    assert '#CharlieOnlyLabel' not in bob_label_names
+
+    # Charlie views /api/user/labels: sees default tags, grandfathered tag, and Charlie tag, NOT Bob tag
+    charlie_labels = client.get('/api/user/labels', headers=charlie_headers).json()
+    charlie_label_names = [l['name'] for l in charlie_labels]
+    assert '#CharlieOnlyLabel' in charlie_label_names
+    assert '#GrandfatheredLabel' in charlie_label_names
+    assert '#Cybersecurity' in charlie_label_names
+    assert '#BobOnlyLabel' not in charlie_label_names
+
+    # Every user can filter by every available tag, including another user's label.
+    bob_tags = client.get('/api/tags', headers=bob_headers).json()
+    assert '#BobOnlyLabel' in bob_tags
+    assert '#GrandfatheredLabel' in bob_tags
+    assert '#CharlieOnlyLabel' in bob_tags
+
+    # The public feed filter has the same complete tag catalog.
+    anon_tags = client.get('/api/tags').json()
+    assert '#GrandfatheredLabel' in anon_tags
+    assert '#BobOnlyLabel' in anon_tags
+    assert '#CharlieOnlyLabel' in anon_tags
+
+    # Bob cannot edit or delete grandfathered label
+    assert client.put(f"/api/user/labels/{grandfathered_id}", headers=bob_headers, json={'name': '#RenamedGrandfathered'}).status_code == 404
+    assert client.delete(f"/api/user/labels/{grandfathered_id}", headers=bob_headers).status_code == 404
+
+    # Clean up created labels
+    client.delete(f"/api/user/labels/{created_bob['id']}", headers=bob_headers)
+    client.delete(f"/api/user/labels/{created_charlie['id']}", headers=charlie_headers)
+    client.delete(f"/api/admin/labels/{grandfathered_id}", headers=alice_headers)
+
+
 def test_labels_page_renders_authenticated_management_shell():
     page = client.get('/labels')
     assert page.status_code == 200
@@ -715,6 +792,7 @@ def test_public_and_admin_pages_render_html():
     assert 'alice' in user_page
     assert 'data-user-filter="alice"' in user_page
     assert 'profile-summary' in user_page
+    assert '<div class="header-tools">' in user_page
     feed_script = TestClient(app).get('/static/feed.js?v=4').text
     assert 'window.location.assign(selectedUser ? `/${encodeURIComponent(selectedUser)}/` : \'/\')' in feed_script
     assert client.get('/login').status_code == 200
@@ -738,12 +816,23 @@ def test_public_and_admin_pages_render_html():
     assert 'id="auth-menu" class="auth-menu hidden"' in admin_page
     assert 'id="auth-home-link" href="/">Home</a>' in admin_page
     assert '<a id="auth-username" class="user-name" href="/">' in admin_page
-    assert 'admin.js?v=5' in admin_page
+    assert 'class="panel-toggle-btn"' in admin_page
+    assert 'admin.js?v=7' in admin_page
+    assert client.get('/profile').status_code == 200
+    profile_page = client.get('/profile').text
+    assert 'Profile' in profile_page
+    assert 'class="link-item settings-panel minimized"' in profile_page
+    assert 'class="panel-toggle-btn"' in profile_page
+    assert 'profile.js?v=6' in profile_page
     feed_script = client.get('/static/feed.js?v=7').text
     assert 'if (item.is_owner && !showIdentity)' in feed_script
     assert 'deleteEntry(item, deleteButton)' in feed_script
     assert 'postToMastodon(item, mastodonButton)' in feed_script
-    assert 'tag.toLowerCase() === pref.tag.toLowerCase()' in feed_script
+    assert 'tag.toLowerCase() === activeTag.toLowerCase()' in feed_script
+    assert 'loadFeed(event.target.value)' in feed_script
+    assert 'Promise.all([loadUsers(), loadTags()]).then(() => loadFeed())' in feed_script
+    assert "fetch('/api/tags', {" in feed_script
+    assert 'Authorization: `Bearer ${accessToken}`' in feed_script
     assert 'return `${date.getFullYear()} ${months[date.getMonth()]} ${date.getDate()} - ${hours}:${minutes}`' in feed_script
     assert "entryMeta.className = 'entry-meta'" in feed_script
     assert "meta.className = 'meta'" in feed_script
@@ -752,6 +841,9 @@ def test_public_and_admin_pages_render_html():
     assert 'edit-tag-options' in feed_script
     assert 'new_tags' in feed_script
     assert 'A link can have at most 10 tags.' in feed_script
+    style_sheet = client.get('/static/style.css').text
+    assert "@import url('/static/fonts/fonts.css');" in style_sheet
+    assert 'fonts.googleapis.com' not in style_sheet
 
 
 def test_link_submission_posts_to_enabled_mastodon_plugin():
@@ -805,6 +897,18 @@ def test_link_submission_posts_to_enabled_mastodon_plugin():
         server.server_close()
 
 
+def test_link_submission_can_skip_mastodon_posting():
+    with patch('backend.app.api.links.plugin_manager.dispatch', return_value=[]) as dispatch:
+        response = client.post('/api/links', headers=login_headers(), json={
+            'title': 'Private share',
+            'url': 'https://example.com/private-share',
+            'post_to_mastodon': False,
+        })
+
+    assert response.status_code == 201
+    assert dispatch.call_args.args[0]['post_to_mastodon'] is False
+
+
 def test_mastodon_post_without_title_omits_source_line():
     from backend.app.services.plugin_manager import MastodonPlugin
 
@@ -838,6 +942,7 @@ def test_plugin_config_can_be_saved_for_mastodon():
     payload = client.get('/api/user/plugins/mastodon', headers=headers).json()
     assert payload['instance'] == 'mastodon.social'
     assert payload['post_prefix'] == 'From my #LinkLog: '
+    assert payload['configured'] is True
 
     admin_update = client.put('/api/admin/plugins/mastodon', headers=headers, json={
         'enabled': True,

frontend/static/admin.js

@@ -12,7 +12,7 @@ const smtpForm = document.querySelector('#smtp-form');
 const smtpTestButton = document.querySelector('#smtp-test-button');
 const smtpStatus = document.querySelector('#smtp-status');
 const themesForm = document.querySelector('#themes-form');
-const themeOptions = document.querySelector('#theme-options');
+const themeOptions = document.querySelector('#admin-theme-options');
 const themeStatus = document.querySelector('#theme-status');
 let smtpNextAllowedAt = null;
 let smtpTimerHandle = null;
@@ -57,21 +57,85 @@ function renderLabels(labels) {
   adminLabelList.replaceChildren(...labels.map((label) => {
     const row = document.createElement('div');
     row.className = 'plugin-row';
+
     const text = document.createElement('span');
     text.textContent = `${label.name}${label.creator ? ` (${label.creator})` : ' (default)'}`;
-    const button = document.createElement('button');
+
-    button.type = 'button';
+    const actions = document.createElement('div');
-    button.className = 'danger-button';
+    actions.style.display = 'flex';
-    button.textContent = 'Delete';
+    actions.style.gap = '8px';
-    button.addEventListener('click', async () => {
+
+    const editButton = document.createElement('button');
+    editButton.type = 'button';
+    editButton.textContent = 'Edit';
+    editButton.addEventListener('click', () => {
+      showAdminInlineLabelEdit(row, label);
+    });
+
+    const deleteButton = document.createElement('button');
+    deleteButton.type = 'button';
+    deleteButton.className = 'danger-button';
+    deleteButton.textContent = 'Delete';
+    deleteButton.addEventListener('click', async () => {
+      if (!confirm(`Are you sure you want to delete "${label.name}"?`)) return;
       const response = await fetch(`/api/admin/labels/${label.id}`, {method: 'DELETE', headers: authHeaders()});
       if (response.ok) loadLabels();
     });
-    row.append(text, button);
+
+    actions.append(editButton, deleteButton);
+    row.append(text, actions);
     return row;
   }));
 }
 
+function showAdminInlineLabelEdit(rowContainer, label) {
+  rowContainer.replaceChildren();
+
+  const editForm = document.createElement('form');
+  editForm.style.display = 'flex';
+  editForm.style.gap = '8px';
+  editForm.style.width = '100%';
+  editForm.style.alignItems = 'center';
+
+  const input = document.createElement('input');
+  input.type = 'text';
+  input.value = label.name;
+  input.required = true;
+  input.style.flex = '1';
+
+  const saveButton = document.createElement('button');
+  saveButton.type = 'submit';
+  saveButton.textContent = 'Save';
+
+  const cancelButton = document.createElement('button');
+  cancelButton.type = 'button';
+  cancelButton.textContent = 'Cancel';
+  cancelButton.addEventListener('click', () => {
+    loadLabels();
+  });
+
+  editForm.append(input, saveButton, cancelButton);
+
+  editForm.addEventListener('submit', async (e) => {
+    e.preventDefault();
+    const newName = input.value.trim();
+    if (!newName) return;
+    const response = await fetch(`/api/admin/labels/${label.id}`, {
+      method: 'PUT',
+      headers: authHeaders(true),
+      body: JSON.stringify({ name: newName }),
+    });
+    if (response.ok) {
+      loadLabels();
+    } else {
+      alert(await responseError(response, 'Could not update label'));
+    }
+  });
+
+  rowContainer.appendChild(editForm);
+  input.focus();
+}
+
 async function loadLabels() {
   const response = await fetch('/api/admin/labels', {headers: authHeaders()});
   if (!response.ok) throw new Error('Could not load labels');
@@ -195,9 +259,51 @@ async function loadUsers() {
   renderUsers(await response.json());
 }
 
+function initPanelToggles() {
+  const panels = document.querySelectorAll('#admin-controls .settings-panel');
+  panels.forEach((panel) => {
+    panel.classList.add('minimized');
+    const h2 = panel.querySelector('h2');
+    if (!h2) return;
+    let btn = h2.querySelector('.panel-toggle-btn');
+    if (!btn) {
+      const titleText = h2.textContent.trim();
+      h2.replaceChildren();
+      btn = document.createElement('button');
+      btn.type = 'button';
+      btn.className = 'panel-toggle-btn';
+      btn.setAttribute('aria-expanded', 'false');
+      const textSpan = document.createElement('span');
+      textSpan.textContent = titleText;
+      const iconSpan = document.createElement('span');
+      iconSpan.className = 'panel-toggle-icon';
+      iconSpan.setAttribute('aria-hidden', 'true');
+      iconSpan.textContent = '▼';
+      btn.append(textSpan, iconSpan);
+      h2.appendChild(btn);
+    } else {
+      btn.setAttribute('aria-expanded', 'false');
+    }
+
+    if (h2.dataset.initialized) return;
+    h2.dataset.initialized = 'true';
+
+    h2.addEventListener('click', (e) => {
+      e.preventDefault();
+      const isMinimized = panel.classList.toggle('minimized');
+      if (btn) {
+        btn.setAttribute('aria-expanded', String(!isMinimized));
+      }
+    });
+  });
+}
+
 function showAdminState(isAdmin) {
   adminControls.classList.toggle('hidden', !isAdmin);
   adminAuthNotice.classList.toggle('hidden', isAdmin);
+  if (isAdmin) {
+    initPanelToggles();
+  }
 }
 
 function showSignedOutState() {
@@ -382,4 +488,7 @@ loadAdminState().catch((error) => {
   smtpForm.reset();
   themesForm.reset();
 });
+
+document.addEventListener('DOMContentLoaded', initPanelToggles);
+initPanelToggles();
 })();

frontend/static/feed.js

@@ -73,7 +73,9 @@ async function loadUsers() {
 }
 
 async function loadTags() {
-  const response = await fetch('/api/tags');
+  const response = await fetch('/api/tags', {
+    headers: accessToken ? {Authorization: `Bearer ${accessToken}`} : {},
+  });
   if (!response.ok) throw new Error('Could not load tags');
   const tags = await response.json();
   availableTags = tags;
@@ -254,7 +256,7 @@ function showEditForm(article, item) {
   article.appendChild(form);
 }
 
-async function loadFeed() {
+async function loadFeed(selectedTag = null) {
   const routeUser = document.body.dataset.userFilter;
   const endpoint = routeUser
     ? `/api/public/feed/${encodeURIComponent(routeUser)}`
@@ -266,13 +268,14 @@ async function loadFeed() {
 
   let items = data || [];
   const pref = readPreferences();
+  const activeTag = selectedTag ?? pref.tag;
 
   if (pref.user && !routeUser) {
     items = items.filter((item) => (item.user?.username || '').toLowerCase() === pref.user.toLowerCase());
   }
 
-  if (pref.tag) {
+  if (activeTag) {
-    items = items.filter((item) => item.tags?.some((tag) => tag.toLowerCase() === pref.tag.toLowerCase()));
+    items = items.filter((item) => item.tags?.some((tag) => tag.toLowerCase() === activeTag.toLowerCase()));
   }
 
   if (pref.sort === 'oldest') {
@@ -304,9 +307,9 @@ function syncPreferences() {
   tagFilter.addEventListener('change', (event) => {
     const next = { ...readPreferences(), tag: event.target.value };
     writePreferences(next);
-    loadFeed();
+    loadFeed(event.target.value);
   });
 }
 
 syncPreferences();
-Promise.all([loadUsers(), loadTags()]).then(loadFeed).catch(() => loadFeed());
+Promise.all([loadUsers(), loadTags()]).then(() => loadFeed()).catch(() => loadFeed());

frontend/static/labels.js

@@ -0,0 +1,209 @@
+// Copyright © 2026 Olaf Kolkman
+// SPDX-License-Identifier: GPL-3.0-or-later
+
+(() => {
+const labelAuthNotice = document.querySelector('#label-auth-notice');
+const labelControls = document.querySelector('#label-controls');
+const labelForm = document.querySelector('#label-form');
+const labelNameInput = document.querySelector('#label-name');
+const labelStatus = document.querySelector('#label-status');
+const labelList = document.querySelector('#label-list');
+const accessToken = localStorage.getItem('linklogAccessToken');
+let currentUserId = null;
+
+function authHeaders(includeJson = false) {
+  return {
+    ...(includeJson ? {'Content-Type': 'application/json'} : {}),
+    ...(accessToken ? {Authorization: `Bearer ${accessToken}`} : {}),
+  };
+}
+
+function setStatus(message, isError = false) {
+  if (!labelStatus) return;
+  labelStatus.textContent = message;
+  labelStatus.style.color = isError ? '#b91c1c' : '#166534';
+}
+
+async function responseError(response, fallback) {
+  try {
+    const result = await response.json();
+    return result.detail || result.message || fallback;
+  } catch {
+    return fallback;
+  }
+}
+
+function renderLabels(labels) {
+  if (!labelList) return;
+  if (!labels || labels.length === 0) {
+    labelList.innerHTML = '<p>No labels found.</p>';
+    return;
+  }
+
+  labelList.replaceChildren(...labels.map((label) => {
+    const row = document.createElement('div');
+    row.className = 'plugin-row';
+
+    const isOwned = label.created_by === currentUserId;
+
+    const contentContainer = document.createElement('div');
+    contentContainer.style.display = 'flex';
+    contentContainer.style.alignItems = 'center';
+    contentContainer.style.justifySpaceBetween = 'space-between';
+    contentContainer.style.width = '100%';
+
+    const text = document.createElement('span');
+    text.textContent = `${label.name}${isOwned ? '' : (label.creator ? ` (${label.creator})` : ' (default)')}`;
+
+    contentContainer.appendChild(text);
+
+    if (isOwned) {
+      const actions = document.createElement('div');
+      actions.style.display = 'flex';
+      actions.style.gap = '8px';
+
+      const editButton = document.createElement('button');
+      editButton.type = 'button';
+      editButton.textContent = 'Edit';
+      editButton.addEventListener('click', () => {
+        showInlineEdit(row, label);
+      });
+
+      const deleteButton = document.createElement('button');
+      deleteButton.type = 'button';
+      deleteButton.className = 'danger-button';
+      deleteButton.textContent = 'Delete';
+      deleteButton.addEventListener('click', async () => {
+        if (!confirm(`Are you sure you want to delete "${label.name}"?`)) return;
+        setStatus('');
+        const response = await fetch(`/api/user/labels/${label.id}`, {
+          method: 'DELETE',
+          headers: authHeaders(),
+        });
+        if (response.ok) {
+          setStatus(`Deleted label ${label.name}`);
+          loadLabels();
+        } else {
+          setStatus(await responseError(response, 'Could not delete label'), true);
+        }
+      });
+
+      actions.append(editButton, deleteButton);
+      contentContainer.appendChild(actions);
+    }
+
+    row.appendChild(contentContainer);
+    return row;
+  }));
+}
+
+function showInlineEdit(rowContainer, label) {
+  rowContainer.replaceChildren();
+
+  const editForm = document.createElement('form');
+  editForm.style.display = 'flex';
+  editForm.style.gap = '8px';
+  editForm.style.width = '100%';
+  editForm.style.alignItems = 'center';
+
+  const input = document.createElement('input');
+  input.type = 'text';
+  input.value = label.name;
+  input.required = true;
+  input.style.flex = '1';
+
+  const saveButton = document.createElement('button');
+  saveButton.type = 'submit';
+  saveButton.textContent = 'Save';
+
+  const cancelButton = document.createElement('button');
+  cancelButton.type = 'button';
+  cancelButton.textContent = 'Cancel';
+  cancelButton.addEventListener('click', () => {
+    loadLabels();
+  });
+
+  editForm.append(input, saveButton, cancelButton);
+
+  editForm.addEventListener('submit', async (e) => {
+    e.preventDefault();
+    const newName = input.value.trim();
+    if (!newName) return;
+    setStatus('');
+    const response = await fetch(`/api/user/labels/${label.id}`, {
+      method: 'PUT',
+      headers: authHeaders(true),
+      body: JSON.stringify({ name: newName }),
+    });
+    if (response.ok) {
+      setStatus(`Updated label to ${newName}`);
+      loadLabels();
+    } else {
+      setStatus(await responseError(response, 'Could not update label'), true);
+    }
+  });
+
+  rowContainer.appendChild(editForm);
+  input.focus();
+}
+
+async function loadLabels() {
+  try {
+    const response = await fetch('/api/user/labels', { headers: authHeaders() });
+    if (!response.ok) throw new Error('Could not load labels');
+    const labels = await response.json();
+    renderLabels(labels);
+  } catch (error) {
+    setStatus('Error loading labels', true);
+  }
+}
+
+async function init() {
+  if (!accessToken) {
+    if (labelAuthNotice) labelAuthNotice.classList.remove('hidden');
+    if (labelControls) labelControls.classList.add('hidden');
+    return;
+  }
+
+  if (labelAuthNotice) labelAuthNotice.classList.add('hidden');
+  if (labelControls) labelControls.classList.remove('hidden');
+
+  try {
+    const meResponse = await fetch('/api/auth/me', { headers: authHeaders() });
+    if (meResponse.ok) {
+      const me = await meResponse.json();
+      currentUserId = me.id;
+    }
+  } catch {
+    // Proceed if me fails
+  }
+
+  await loadLabels();
+
+  if (labelForm) {
+    labelForm.addEventListener('submit', async (e) => {
+      e.preventDefault();
+      const name = labelNameInput.value.trim();
+      if (!name) return;
+      setStatus('');
+      const response = await fetch('/api/user/labels', {
+        method: 'POST',
+        headers: authHeaders(true),
+        body: JSON.stringify({ name }),
+      });
+      if (response.ok) {
+        labelNameInput.value = '';
+        setStatus(`Added label ${name}`);
+        loadLabels();
+      } else {
+        setStatus(await responseError(response, 'Could not add label'), true);
+      }
+    });
+  }
+}
+
+document.addEventListener('DOMContentLoaded', init);
+if (document.readyState !== 'loading') {
+  init();
+}
+})();

frontend/static/new-entry.js

@@ -9,6 +9,7 @@
   const commentInput = document.getElementById('comment-input');
   const newTagsInput = document.getElementById('new-tags-input');
   const existingTagsEl = document.getElementById('existing-tags');
+  const mastodonPublishing = document.getElementById('mastodon-publishing');
   const mastodonEnabledCheckbox = document.getElementById('mastodon-enabled');
   const scrapeButton = document.getElementById('scrape-button');
   const scrapeStatus = document.getElementById('scrape-status');
@@ -46,7 +47,7 @@
     .then((user) => {
       currentUser = user;
       entryForm.classList.remove('hidden');
-      loadTags();
+      Promise.all([loadTags(), loadMastodonPublishing()]);
     })
     .catch(() => {
       localStorage.removeItem('linklogAccessToken');
@@ -66,6 +67,20 @@
     }
   }
 
+  async function loadMastodonPublishing() {
+    try {
+      const response = await fetch('/api/user/plugins/mastodon', {
+        headers: { Authorization: `Bearer ${token}` },
+      });
+      if (!response.ok) return;
+      const config = await response.json();
+      mastodonEnabledCheckbox.checked = Boolean(config.configured);
+      mastodonPublishing.classList.toggle('hidden', !config.configured);
+    } catch (error) {
+      console.error('Could not load Mastodon configuration:', error);
+    }
+  }
+
   // Render tag checkboxes
   function renderTags() {
     existingTagsEl.innerHTML = '';
@@ -171,6 +186,7 @@
           url,
           comment,
           tags,
+          post_to_mastodon: mastodonEnabledCheckbox.checked,
         }),
       });
 

frontend/static/profile.js

@@ -310,6 +310,48 @@ passwordForm.addEventListener('submit', async (event) => {
   if (response.ok) passwordForm.reset();
 });
 
+function initPanelToggles() {
+  const panels = document.querySelectorAll('.settings-panel');
+  panels.forEach((panel) => {
+    panel.classList.add('minimized');
+    const h2 = panel.querySelector('h2');
+    if (!h2) return;
+    let btn = h2.querySelector('.panel-toggle-btn');
+    if (!btn) {
+      const titleText = h2.textContent.trim();
+      h2.replaceChildren();
+      btn = document.createElement('button');
+      btn.type = 'button';
+      btn.className = 'panel-toggle-btn';
+      btn.setAttribute('aria-expanded', 'false');
+      const textSpan = document.createElement('span');
+      textSpan.textContent = titleText;
+      const iconSpan = document.createElement('span');
+      iconSpan.className = 'panel-toggle-icon';
+      iconSpan.setAttribute('aria-hidden', 'true');
+      iconSpan.textContent = '▼';
+      btn.append(textSpan, iconSpan);
+      h2.appendChild(btn);
+    } else {
+      btn.setAttribute('aria-expanded', 'false');
+    }
+
+    if (h2.dataset.initialized) return;
+    h2.dataset.initialized = 'true';
+
+    h2.addEventListener('click', (e) => {
+      e.preventDefault();
+      const isMinimized = panel.classList.toggle('minimized');
+      if (btn) {
+        btn.setAttribute('aria-expanded', String(!isMinimized));
+      }
+    });
+  });
+}
+
+document.addEventListener('DOMContentLoaded', initPanelToggles);
+initPanelToggles();
+
 Promise.all([loadProfile(), loadMastodonConfig(), loadOtp(), loadEmailAddresses()]).catch((error) => {
   setStatus('#profile-status', accessToken ? error.message : 'Please sign in first.', true);
 });

frontend/static/style.css

@@ -1,7 +1,7 @@
 /* Copyright © 2026 Olaf Kolkman */
 /* SPDX-License-Identifier: GPL-3.0-or-later */
 
-@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');
+@import url('/static/fonts/fonts.css');
 
 :root {
   --base: #1e1e2e;
@@ -95,6 +95,15 @@
   --border: rgba(7, 54, 66, 0.18); --shadow: 0 18px 50px rgba(7, 54, 66, 0.14);
 }
 
+:root[data-theme='red'] {
+  --base: #fffafa; --mantle: #ffedef; --crust: #fbd6da;
+  --surface-0: #ffffff; --surface-1: #ffe2e6; --surface-2: #f4bbc4;
+  --text: #350810; --subtext: #5c1724; --muted: #8c4653;
+  --mauve: #9e1737; --lavender: #86132d; --blue: #216f91;
+  --teal: #087567; --peach: #b84324; --red: #a70d2d;
+  --border: rgba(83, 10, 25, 0.2); --shadow: 0 18px 50px rgba(122, 8, 33, 0.2);
+}
+
 *,
 *::before,
 *::after {
@@ -169,7 +178,7 @@ body::selection {
   object-position: left center;
 }
 
-.site-header .site-logo + h1,
+.site-header .site-logo-link + h1,
 .feed-link {
   font-family: 'Asset', 'Space Grotesk', sans-serif;
 }
@@ -451,6 +460,108 @@ main.container {
   margin-bottom: 0;
 }
 
+#admin-controls {
+  display: grid;
+  gap: 16px;
+}
+
+.settings-panel + .settings-panel {
+  margin-top: 16px;
+}
+
+.settings-panel h2 {
+  margin: 0 0 12px;
+  padding: 10px 14px;
+  border-radius: 8px;
+  cursor: pointer;
+  transition: background-color 0.2s ease, margin 0.2s ease;
+}
+
+.settings-panel h2:hover {
+  filter: brightness(1.08);
+}
+
+.settings-panel:nth-of-type(5n+1) h2 {
+  color: var(--mauve);
+  background: var(--surface-1);
+  background: color-mix(in srgb, var(--mauve) 14%, transparent);
+  border-left: 4px solid var(--mauve);
+}
+
+.settings-panel:nth-of-type(5n+2) h2 {
+  color: var(--teal);
+  background: var(--surface-1);
+  background: color-mix(in srgb, var(--teal) 14%, transparent);
+  border-left: 4px solid var(--teal);
+}
+
+.settings-panel:nth-of-type(5n+3) h2 {
+  color: var(--peach);
+  background: var(--surface-1);
+  background: color-mix(in srgb, var(--peach) 14%, transparent);
+  border-left: 4px solid var(--peach);
+}
+
+.settings-panel:nth-of-type(5n+4) h2 {
+  color: var(--blue);
+  background: var(--surface-1);
+  background: color-mix(in srgb, var(--blue) 14%, transparent);
+  border-left: 4px solid var(--blue);
+}
+
+.settings-panel:nth-of-type(5n+5) h2 {
+  color: var(--lavender);
+  background: var(--surface-1);
+  background: color-mix(in srgb, var(--lavender) 14%, transparent);
+  border-left: 4px solid var(--lavender);
+}
+
+.settings-panel.minimized h2 {
+  margin: 0;
+}
+
+.panel-toggle-btn {
+  display: flex !important;
+  align-items: center !important;
+  justify-content: space-between !important;
+  width: 100% !important;
+  min-width: 0 !important;
+  padding: 0 !important;
+  border: none !important;
+  background: transparent !important;
+  color: inherit !important;
+  font: inherit !important;
+  font-size: 1rem !important;
+  font-weight: inherit !important;
+  cursor: pointer !important;
+  text-align: left !important;
+  box-shadow: none !important;
+}
+
+.panel-toggle-btn > * {
+  pointer-events: none;
+}
+
+.panel-toggle-btn:focus-visible {
+  outline: 2px solid var(--lavender) !important;
+  outline-offset: 2px !important;
+}
+
+.panel-toggle-icon {
+  font-size: 0.75rem;
+  transition: transform 0.2s ease;
+  margin-left: 8px;
+  color: var(--subtext);
+}
+
+.settings-panel.minimized .panel-toggle-icon {
+  transform: rotate(-90deg);
+}
+
+.settings-panel.minimized > *:not(h2) {
+  display: none !important;
+}
+
 .toolbar label,
 .settings-panel label {
   display: grid;
@@ -904,6 +1015,10 @@ button:disabled {
   gap: 8px;
 }
 
+.form-section.hidden {
+  display: none;
+}
+
 .form-section label {
   display: grid;
   gap: 6px;
@@ -963,7 +1078,15 @@ button:disabled {
   user-select: none;
 }
 
+.form-section label.tag-checkbox {
+  display: inline-flex;
+}
+
 .tag-checkbox input {
+  width: auto;
+  min-width: 0;
+  flex: 0 0 auto;
+  margin: 0;
   cursor: pointer;
 }
 

frontend/templates/about.html

@@ -13,7 +13,7 @@
       <div class="container">
         <div class="header-row">
           <div>
-            <img class="site-logo" src="/static/logo.svg" alt="LinkLog" />
+            <a class="site-logo-link" href="/" aria-label="LinkLog home"><img class="site-logo" src="/static/logo.svg" alt="LinkLog" /></a>
             <h1>About</h1>
             <p>A quiet place for the links worth keeping.</p>
           </div>

frontend/templates/admin.html

@@ -13,7 +13,7 @@
       <div class="container">
         <div class="header-row">
           <div>
-            <img class="site-logo" src="/static/logo.svg" alt="LinkLog" />
+            <a class="site-logo-link" href="/" aria-label="LinkLog home"><img class="site-logo" src="/static/logo.svg" alt="LinkLog" /></a>
             <h1>Admin</h1>
             <p>Manage users and plugin configuration</p>
           </div>
@@ -44,8 +44,13 @@
     <main class="container">
       <p id="admin-auth-notice" class="auth-notice hidden"></p>
       <div id="admin-controls" class="hidden">
-      <section class="link-item settings-panel">
+      <section class="link-item settings-panel minimized">
-        <h2>Users</h2>
+        <h2>
+          <button type="button" class="panel-toggle-btn" aria-expanded="false">
+            <span>Users</span>
+            <span class="panel-toggle-icon" aria-hidden="true">▼</span>
+          </button>
+        </h2>
         <form id="user-form">
           <label>
             Username
@@ -69,16 +74,31 @@
         <div id="user-list" class="plugin-list" aria-live="polite">Loading users...</div>
       </section>
 
-      <section class="link-item settings-panel">
+      <section class="link-item settings-panel minimized">
-        <h2>Plugins</h2>
+        <h2>
+          <button type="button" class="panel-toggle-btn" aria-expanded="false">
+            <span>Plugins</span>
+            <span class="panel-toggle-icon" aria-hidden="true">▼</span>
+          </button>
+        </h2>
         <div id="plugin-list" class="plugin-list" aria-live="polite">Loading plugins...</div>
       </section>
-      <section class="link-item settings-panel">
+      <section class="link-item settings-panel minimized">
-        <h2>Labels</h2>
+        <h2>
+          <button type="button" class="panel-toggle-btn" aria-expanded="false">
+            <span>Labels</span>
+            <span class="panel-toggle-icon" aria-hidden="true">▼</span>
+          </button>
+        </h2>
         <div id="admin-label-list" class="plugin-list" aria-live="polite">Loading labels...</div>
       </section>
-      <section class="link-item settings-panel">
+      <section class="link-item settings-panel minimized">
-        <h2>SMTP settings</h2>
+        <h2>
+          <button type="button" class="panel-toggle-btn" aria-expanded="false">
+            <span>SMTP settings</span>
+            <span class="panel-toggle-icon" aria-hidden="true">▼</span>
+          </button>
+        </h2>
         <form id="smtp-form">
           <label>
             SMTP host
@@ -109,11 +129,16 @@
 
         </form>
       </section>
-      <section class="link-item settings-panel">
+      <section class="link-item settings-panel minimized">
-        <h2>Available themes</h2>
+        <h2>
+          <button type="button" class="panel-toggle-btn" aria-expanded="false">
+            <span>Available themes</span>
+            <span class="panel-toggle-icon" aria-hidden="true">▼</span>
+          </button>
+        </h2>
         <p>Choose the themes visitors may use.</p>
         <form id="themes-form">
-          <div id="theme-options" class="theme-options" aria-live="polite">Loading themes...</div>
+          <div id="admin-theme-options" class="theme-options" aria-live="polite">Loading themes...</div>
           <button type="submit">Save themes</button>
           <p id="theme-status" class="status" role="status"></p>
         </form>
@@ -124,6 +149,6 @@
     <script src="/static/auth-header.js?v=3"></script>
     <script src="/static/logout.js?v=2"></script>
     <script src="/static/theme.js?v=1"></script>
-    <script src="/static/admin.js?v=5"></script>
+    <script src="/static/admin.js?v=7"></script>
   </body>
 </html>

frontend/templates/feed.html

@@ -13,7 +13,7 @@
       <div class="container">
         <div class="header-row">
           <div>
-            <img class="site-logo" src="/static/logo.svg" alt="LinkLog" />
+            <a class="site-logo-link" href="/" aria-label="LinkLog home"><img class="site-logo" src="/static/logo.svg" alt="LinkLog" /></a>
             <p>Public link feed</p>
           </div>
           <div class="header-tools">
@@ -86,6 +86,6 @@
     <script src="/static/auth-header.js?v=3"></script>
     <script src="/static/logout.js?v=3"></script>
     <script src="/static/theme.js?v=1"></script>
-    <script src="/static/feed.js?v=9"></script>
+    <script src="/static/feed.js?v=12"></script>
   </body>
 </html>

frontend/templates/labels.html

@@ -13,7 +13,7 @@
       <div class="container">
         <div class="header-row">
           <div>
-            <img class="site-logo" src="/static/logo.svg" alt="LinkLog" />
+            <a class="site-logo-link" href="/" aria-label="LinkLog home"><img class="site-logo" src="/static/logo.svg" alt="LinkLog" /></a>
             <h1>Labels</h1>
             <p>Manage your link labels</p>
           </div>

frontend/templates/login.html

@@ -13,7 +13,7 @@
       <div class="container">
         <div class="header-row">
           <div>
-            <img class="site-logo" src="/static/logo.svg" alt="LinkLog" />
+            <a class="site-logo-link" href="/" aria-label="LinkLog home"><img class="site-logo" src="/static/logo.svg" alt="LinkLog" /></a>
             <p>Access your LinkLog settings</p>
           </div>
           <div class="header-actions">

frontend/templates/new-entry.html

@@ -13,11 +13,10 @@
       <div class="container">
         <div class="header-row">
           <div>
-            <img class="site-logo" src="/static/logo.svg" alt="LinkLog" />
+            <a class="site-logo-link" href="/" aria-label="LinkLog home"><img class="site-logo" src="/static/logo.svg" alt="LinkLog" /></a>
             <p>New Entry</p>
           </div>
-          <div class="header-tools">
+          <div class="header-actions">
-            <div class="header-actions">
               <button id="new-entry-button" class="new-entry-button hidden" type="button"><a href="/new-entry">New entry</a></button>
               <button class="menu-toggle" type="button" aria-expanded="false" aria-controls="auth-menu">Menu</button>
               <nav id="auth-menu" class="auth-menu hidden" aria-label="Account menu">
@@ -80,11 +79,11 @@
           </label>
         </fieldset>
 
-        <fieldset class="form-section">
+        <fieldset id="mastodon-publishing" class="form-section hidden">
           <legend>Mastodon Publishing</legend>
           <label>
-            <input id="mastodon-enabled" type="checkbox" />
+            <input id="mastodon-enabled" type="checkbox" checked />
-            Post to Mastodon (if configured)
+            Post to Mastodon
           </label>
         </fieldset>
 
@@ -102,6 +101,6 @@
     </footer>
 
     <script src="/static/auth-header.js"></script>
-    <script src="/static/new-entry.js"></script>
+    <script src="/static/new-entry.js?v=2"></script>
   </body>
 </html>

frontend/templates/setup.html

@@ -13,7 +13,7 @@
       <div class="container">
         <div class="header-row">
           <div>
-            <img class="site-logo" src="/static/logo.svg" alt="LinkLog" />
+            <a class="site-logo-link" href="/" aria-label="LinkLog home"><img class="site-logo" src="/static/logo.svg" alt="LinkLog" /></a>
             <h1>Configure LinkLog</h1>
             <p>Create the first administrator and test email delivery.</p>
           </div>

frontend/templates/user_profile.html

@@ -15,7 +15,7 @@
     <div class="container">
       <div class="header-row">
         <div>
-          <img class="site-logo" src="/static/logo.svg" alt="LinkLog" />
+          <a class="site-logo-link" href="/" aria-label="LinkLog home"><img class="site-logo" src="/static/logo.svg" alt="LinkLog" /></a>
           <h1>Profile</h1>
         </div>
         <div class="header-actions">
@@ -43,8 +43,13 @@
   </header>
 
   <main class="container">
-    <section class="link-item settings-panel">
+    <section class="link-item settings-panel minimized">
-      <h2>Profile Settings</h2>
+      <h2>
+        <button type="button" class="panel-toggle-btn" aria-expanded="false">
+          <span>Profile Settings</span>
+          <span class="panel-toggle-icon" aria-hidden="true">▼</span>
+        </button>
+      </h2>
       <form id="profile-form">
         <label>
           Username
@@ -69,8 +74,13 @@
       </form>
     </section>
 
-    <section class="link-item settings-panel">
+    <section class="link-item settings-panel minimized">
-      <h2>Email addresses</h2>
+      <h2>
+        <button type="button" class="panel-toggle-btn" aria-expanded="false">
+          <span>Email addresses</span>
+          <span class="panel-toggle-icon" aria-hidden="true">▼</span>
+        </button>
+      </h2>
       <div id="email-address-list" class="email-address-list" aria-live="polite">Loading email addresses...</div>
       <form id="additional-email-form">
         <label>
@@ -82,8 +92,13 @@
       </form>
     </section>
 
-    <section class="link-item settings-panel">
+    <section class="link-item settings-panel minimized">
-      <h2>Password</h2>
+      <h2>
+        <button type="button" class="panel-toggle-btn" aria-expanded="false">
+          <span>Password</span>
+          <span class="panel-toggle-icon" aria-hidden="true">▼</span>
+        </button>
+      </h2>
       <form id="password-form">
         <label>
           Current password
@@ -102,8 +117,13 @@
       </form>
     </section>
 
-    <section class="link-item settings-panel">
+    <section class="link-item settings-panel minimized">
-      <h2>One-time password</h2>
+      <h2>
+        <button type="button" class="panel-toggle-btn" aria-expanded="false">
+          <span>One-time password</span>
+          <span class="panel-toggle-icon" aria-hidden="true">▼</span>
+        </button>
+      </h2>
       <p>Use an authenticator app to add a second sign-in step.</p>
       <div id="otp-disabled">
         <button id="otp-setup" type="button">Set up one-time password</button>
@@ -131,8 +151,13 @@
       <p id="otp-status" class="status" role="status"></p>
     </section>
 
-    <section class="link-item settings-panel">
+    <section class="link-item settings-panel minimized">
-      <h2>Mastodon</h2>
+      <h2>
+        <button type="button" class="panel-toggle-btn" aria-expanded="false">
+          <span>Mastodon</span>
+          <span class="panel-toggle-icon" aria-hidden="true">▼</span>
+        </button>
+      </h2>
       <form id="mastodon-form">
         <label>
           Mastodon server
@@ -155,7 +180,7 @@
   <script src="/static/auth-header.js?v=3"></script>
   <script src="/static/logout.js?v=2"></script>
   <script src="/static/theme.js?v=1"></script>
-  <script src="/static/profile.js?v=5"></script>
+  <script src="/static/profile.js?v=6"></script>
 </body>
 
 </html>

scripts/download_fonts.py

@@ -0,0 +1,95 @@
+## Copyright © 2026 Olaf Kolkman
+## SPDX-License-Identifier: GPL-3.0-or-later
+
+from pathlib import Path
+from urllib.request import urlopen
+
+
+FONT_SOURCES = {
+    'Asset-Regular.ttf': 'https://fonts.gstatic.com/s/asset/v30/SLXGc1na-mM4cWIm.ttf',
+    'DMSans-Regular.ttf': 'https://fonts.gstatic.com/s/dmsans/v17/rP2tp2ywxg089UriI5-g4vlH9VoD8CmcqZG40F9JadbnoEwAopxhTg.ttf',
+    'DMSans-Medium.ttf': 'https://fonts.gstatic.com/s/dmsans/v17/rP2tp2ywxg089UriI5-g4vlH9VoD8CmcqZG40F9JadbnoEwAkJxhTg.ttf',
+    'DMSans-SemiBold.ttf': 'https://fonts.gstatic.com/s/dmsans/v17/rP2tp2ywxg089UriI5-g4vlH9VoD8CmcqZG40F9JadbnoEwAfJthTg.ttf',
+    'DMSans-Bold.ttf': 'https://fonts.gstatic.com/s/dmsans/v17/rP2tp2ywxg089UriI5-g4vlH9VoD8CmcqZG40F9JadbnoEwARZthTg.ttf',
+    'SpaceGrotesk-Medium.ttf': 'https://fonts.gstatic.com/s/spacegrotesk/v22/V8mQoQDjQSkFtoMM3T6r8E7mF71Q-gOoraIAEj7aUUsj.ttf',
+    'SpaceGrotesk-SemiBold.ttf': 'https://fonts.gstatic.com/s/spacegrotesk/v22/V8mQoQDjQSkFtoMM3T6r8E7mF71Q-gOoraIAEj42Vksj.ttf',
+    'SpaceGrotesk-Bold.ttf': 'https://fonts.gstatic.com/s/spacegrotesk/v22/V8mQoQDjQSkFtoMM3T6r8E7mF71Q-gOoraIAEj4PVksj.ttf',
+}
+
+FONT_CSS = """@font-face {
+  font-family: 'Asset';
+  font-style: normal;
+  font-weight: 400;
+  font-display: swap;
+  src: url('Asset-Regular.ttf') format('truetype');
+}
+
+@font-face {
+  font-family: 'DM Sans';
+  font-style: normal;
+  font-weight: 400;
+  font-display: swap;
+  src: url('DMSans-Regular.ttf') format('truetype');
+}
+
+@font-face {
+  font-family: 'DM Sans';
+  font-style: normal;
+  font-weight: 500;
+  font-display: swap;
+  src: url('DMSans-Medium.ttf') format('truetype');
+}
+
+@font-face {
+  font-family: 'DM Sans';
+  font-style: normal;
+  font-weight: 600;
+  font-display: swap;
+  src: url('DMSans-SemiBold.ttf') format('truetype');
+}
+
+@font-face {
+  font-family: 'DM Sans';
+  font-style: normal;
+  font-weight: 700;
+  font-display: swap;
+  src: url('DMSans-Bold.ttf') format('truetype');
+}
+
+@font-face {
+  font-family: 'Space Grotesk';
+  font-style: normal;
+  font-weight: 500;
+  font-display: swap;
+  src: url('SpaceGrotesk-Medium.ttf') format('truetype');
+}
+
+@font-face {
+  font-family: 'Space Grotesk';
+  font-style: normal;
+  font-weight: 600;
+  font-display: swap;
+  src: url('SpaceGrotesk-SemiBold.ttf') format('truetype');
+}
+
+@font-face {
+  font-family: 'Space Grotesk';
+  font-style: normal;
+  font-weight: 700;
+  font-display: swap;
+  src: url('SpaceGrotesk-Bold.ttf') format('truetype');
+}
+"""
+
+
+def main() -> None:
+    target_dir = Path('frontend/static/fonts')
+    target_dir.mkdir(parents=True, exist_ok=True)
+    for filename, url in FONT_SOURCES.items():
+        with urlopen(url, timeout=30) as response:
+            (target_dir / filename).write_bytes(response.read())
+    (target_dir / 'fonts.css').write_text(FONT_CSS, encoding='utf-8')
+
+
+if __name__ == '__main__':
+    main()