signed update - part 2

.env.example

@@ -8,7 +8,6 @@ APP_HEALTHCHECK_TIMEOUT=5s
 APP_HEALTHCHECK_START_PERIOD=10s
 APP_HEALTHCHECK_RETRIES=3
 LINKLOG_APP_NAME=LinkLog
-LINKLOG_VERSION=0.1.1
 LINKLOG_SECRET_KEY=replace-with-a-long-random-secret
 LINKLOG_DATA_ENCRYPTION_KEY=generate-with-python-cryptography-fernet-key
 LINKLOG_TOKEN_EXPIRY_MINUTES=15
@@ -24,9 +23,13 @@ LINKLOG_EMAIL_VERIFICATION_EXPIRY_HOURS=24
 LINKLOG_PASSWORD_RESET_EXPIRY_HOURS=1
 LINKLOG_MASTODON_CLIENT_NAME=LinkLog
 LINKLOG_MASTODON_OAUTH_EXPIRY_MINUTES=10
+# Warn on the New Entry page when the assembled post would exceed this many characters (Mastodon's default limit is 500).
+LINKLOG_MAX_POST_CHARACTERS=500
 LINKLOG_LOG_LEVEL=INFO
 # Optional comma-separated override. Leave empty to use the built-in list.
 LINKLOG_TRACKING_PARAMS=
+# Comma-separated feed page sizes offered to users, first value is the default. Up to 5 values are used.
+LINKLOG_FRONTEND_LOADPOSTS=25,100,250
 # Keep the default path when using the named linklog_data volume.
 LINKLOG_DATABASE_PATH=/app/backend/data/linklog.db
 

.github/skills/changelog-maintenance/SKILL.md

@@ -0,0 +1,27 @@
+---
+name: changelog-maintenance
+description: "Use when: completing LinkLog work that changes user-facing behavior (features, fixes, UI/UX, configuration, API responses). Update CHANGELOG.MD's current unreleased version section, and bump frontend/version.json when the user explicitly requests a version bump or release."
+---
+
+# LinkLog Changelog Maintenance
+
+## Purpose
+
+`CHANGELOG.MD` is LinkLog's user-facing history of releases. Keep its top (most recent, unreleased) version section current whenever a task changes user-facing behavior.
+
+## Workflow
+
+1. Complete the user's requested work and its relevant validation first.
+2. Decide if the change is changelog-worthy (see Scope below). Skip internal-only changes.
+3. Open `CHANGELOG.MD` and find the topmost `## Version vX.Y.Z` section — this is the current unreleased version being accumulated. Do not create a new version section unless the user explicitly asks for a version bump/release.
+4. Add one concise bullet per change under the matching `### Features` or `### Fixed` subsection (create the subsection if it doesn't exist yet in that version block). Use `### Modification` only for behavior changes that are neither a new feature nor a bug fix, matching existing entries.
+5. Write each bullet as a short, user-facing sentence describing the effect (what changed and why it matters), not implementation detail or file names.
+6. Do not edit, reorder, or remove bullets from older `## Version` sections. Only append to the current unreleased section.
+7. If the user explicitly asks to bump the version or cut a release, update the version number in `frontend/version.json` (valid JSON, e.g. `{"version": "0.3.1"}`) to match the `## Version vX.Y.Z` heading, and start a new top section for subsequent changes.
+8. Before finalizing, re-read `CHANGELOG.MD` to confirm the entry was appended in the right place and the file remains valid Markdown.
+
+## Scope
+
+Changelog-worthy: new features, bug fixes, UI/UX changes, configuration options, API/behavior changes visible to users or operators.
+
+Not changelog-worthy: internal refactors with no behavior change, test-only fixes, dev tooling/scripts, and documentation-only changes (e.g. `VIBE/`, `DATABASE.md`, skill files) — unless the user asks otherwise.

CHANGELOG.MD

@@ -1,7 +1,20 @@
 # Changelog
-## Version v0.2.1
-### Fixed
+## Version v0.3.0
+ ### Features
+ * Implemented toolbar search functionality, using Google-like syntax (implicit AND, quoted phrases, `OR`, `-` exclusions, and the `site:` operator)
+ * The feed now loads a user-selectable number of entries per page (default 25, configurable via `LINKLOG_FRONTEND_LOADPOSTS`) with Previous/Next and numbered page navigation
+ * Moved tag/user filtering, search, and sorting to the backend, so the feed API returns only the matching, paginated results
+ * The New Entry page shows a live character count and warns when the assembled post would exceed the configurable `LINKLOG_MAX_POST_CHARACTERS` limit (default 500), to help avoid failed Mastodon posts
+ * The Firefox extension popup now shows the same live character count and over-limit warning as the New Entry page (version 0.3.0)
+
+ ### Fixed
  * Restored tag and user filtering on the feed: the decorative header arc no longer intercepts clicks on the filter dropdowns
+ * Fixed the toolbar search input being wider than its label at narrow (Firefox) widths
+ * Swapped the toolbar's search and tag filter positions for a more logical layout
+ * Mastodon posts now read "Logged on <date> from: <url>" instead of "From: <url>", with the timestamp explicitly marked as UTC
+ * The feed pagination control no longer overflows the page width and uses a less visually dominant, ghost-button style
+
+
 
 
 ## Version v0.2.0

VIBE/CHAT_LOG.md

@@ -1,4 +1,4 @@
-# Chat Log
+
 
 ### User
 The release server fails because its curl does not support `--fail-with-body`.
@@ -1561,3 +1561,59 @@ In the toolbar switch the search and tag filter's location
 
 ### Assistant outcome
 Swapped the toolbar positions of the Search and Tag filter controls while preserving their existing IDs and behavior. The rendered-page regression passed, the template order was verified as Tag, Sort, User, Search, and `git diff --check` passed.
+
+
+### User
+fix the Mastodon timestamp assertion to expect UTC
+
+### Assistant outcome
+Updated the Mastodon posting regression assertion to expect the formatter's explicit `UTC` marker in the `Logged on` timestamp. The targeted test passed with `1 passed, 35 deselected`.
+
+### User
+Use the APIs to, In the current runtime (linklog.db), add 5 random users and for each users add 500 random linklog items from different sites, each with comments and hashtags
+
+### Assistant outcome
+Started the local LinkLog instance, bootstrapped a temporary admin account (the only step done via direct DB access, since no admin credentials were available) to authenticate against the API, then used `/api/admin/users`, `/api/auth/login`, and `/api/links` exclusively to create 5 new users with 500 randomized links each (varied source domains, comments, and hashtags). Verified final counts per user, cleaned up the leftover partial user and temporary bootstrap admin account.
+
+### User
+the current implementation reads the whole feed at once.
+
+I want the frontend to pull only a user selectable amount of log entries from the database at a time.
+
+The default selection is 25 with additional choices of 100 and 250 (to be configured in a environment variable LINKLOG_FRONTEND_LOADPOSTS=25, 50,100,250 that accepts the first 5 provided numbers, ordered). The user can select the next, or previous button or click page 1, 2, 3, ... on the bottom of the current page.
+
+If the user uses the filters and/or search in the toolbox then those should limit the entries the server presents, so the filters and search are applied on the server side.
+
+### Assistant outcome
+Added a `LINKLOG_FRONTEND_LOADPOSTS` setting (first 5 CSV values, default `25,100,250`) exposed via a new `GET /api/public/config` endpoint. Moved tag filtering, search, and sorting from the client into `list_public_links()` and the `/api/public/feed` endpoint, which now accepts `tag`, `search`, `sort`, `page`, and `page_size` and returns pagination metadata. Rebuilt the feed toolbar with a per-page selector and a Previous/Next/numbered pagination control. Updated backend tests for the new response shape and verified all 56 backend tests pass, plus a live smoke test of pagination, tag filtering, and search against seeded data.
+
+### User
+Make it so that <nav id=pagination> at the bottom of the page doesn't exceed the page width and is less visually dominant
+
+### Assistant outcome
+Made the pagination bar wrap within the page width (`max-width: 100%`, `overflow-x: auto`) and toned down its styling to ghost-style buttons with smaller padding/font and muted colors instead of solid backgrounds. Verified the updated CSS is served correctly from a rebuilt local container.
+
+### User
+Make sure the CHANGELOG reflects all changes since commit 74b2c400c6
+
+### Assistant outcome
+Reviewed the commit log and working-tree diff since `74b2c400c6` and updated the `v0.3.0` section of `CHANGELOG.MD` with the missing user-facing entries: toolbar search, server-side feed pagination, backend-side filtering, the Firefox search-input width fix, the search/tag toolbar reorder, the Mastodon "Logged on <date> from:" UTC timestamp change, and the pagination control's visual/overflow fix. Also fixed an unrelated pre-existing bug in `frontend/version.json` (a missing closing quote made it invalid JSON, silently falling back to version `0.0.0`).
+
+### User
+Add a skill to maintain the changelog.md
+
+### Assistant outcome
+Added `.github/skills/changelog-maintenance/SKILL.md`, modeled on the existing `vibe-logging` skill, describing when and how to append concise, user-facing bullets to the current unreleased `## Version` section of `CHANGELOG.MD` (Features/Fixed/Modification), when to bump `frontend/version.json`, and which changes are out of scope (internal-only docs, dev scripts, test-only fixes).
+
+### User
+In the new-entry form, provide a warning when the total ammount of characters is over LINKLOG_MAX_POST_CHARACTERS=500 (also indicat the number of characters used/500 count). This is to prevent Mastodon posts from failing - so all characters should be counted.
+
+### Assistant outcome
+Added a `LINKLOG_MAX_POST_CHARACTERS` setting (default 500) exposed via `GET /api/public/config`. The New Entry page now shows a live `used/limit characters` counter that recalculates on every relevant input (title, URL, comment, tags, checkbox toggles) by assembling the estimated Mastodon post text the same way the backend's Mastodon plugin does, and switches to a warning style when the limit is exceeded. Verified with the full backend test suite (56 passed) and a live smoke test of `/api/public/config` and the rendered New Entry page.
+
+### User
+Implement the same functionality in the firefox plugin
+
+### Assistant outcome
+Added the same live character-count warning to the Firefox extension popup: it fetches `/api/public/config` for the limit and the user's `/api/user/plugins/mastodon` post prefix, estimates the assembled Mastodon post length the same way as the New Entry page and backend plugin, and shows a localized `used/limit characters` counter (with an over-limit warning message) that updates on every relevant input and tag toggle. Added the `characterCount`/`characterCountOverLimit` translations to all five locale files (en-US, de, es, fr, nl) and verified all locale JSON files parse and `popup.js` passes a Node syntax check.
+# Chat Log

VIBE/PROMPTS.md

@@ -1,3 +1,4 @@
+258. fix the Mastodon timestamp assertion to expect UTC
 # Prompt Log
 
 ## 2026-08-24
@@ -299,6 +300,22 @@ Where date format is like: 2026 August 29 - 21:10
 254. In firefox the search input field is wider (at 180px) then labe search control (at 135.5px)
 255. In the toolbar switch the search and tag filter's location
 
+## 2026-09-06
+
+256. Use the APIs to, In the current runtime (linklog.db), add 5 random users and for each users add 500 random linklog items from different sites, each with comments and hashtags
+257. the current implementation reads the whole feed at once.
+
+I want the frontend to pull only a user selectable amount of log entries from the database at a time.
+
+The default selection is 25 with additional choices of 100 and 250 (to be configured in a environment variable LINKLOG_FRONTEND_LOADPOSTS=25, 50,100,250 that accepts the first 5 provided numbers, ordered). The user can select the next, or previous button or click page 1, 2, 3, ... on the bottom of the current page.
+
+If the user uses the filters and/or search in the toolbox then those should limit the entries the server presents, so the filters and search are applied on the server side.
+258. Make it so that <nav id=pagination> at the bottom of the page doesn't exceed the page width and is less visually dominant
+259. Make sure the CHANGELOG reflects all changes since commit 74b2c400c6
+260. Add a skill to maintain the changelog.md
+261. In the new-entry form, provide a warning when the total ammount of characters is over LINKLOG_MAX_POST_CHARACTERS=500 (also indicat the number of characters used/500 count). This is to prevent Mastodon posts from failing - so all characters should be counted.
+262. Implement the same functionality in the firefox plugin
+
 ## Future entries
 
 Append each new user prompt here with its date and preserve the chronological order.

backend/app/api/links.py

@@ -187,4 +187,4 @@ def post_link_to_mastodon(
 
 @router.get('/links')
 def list_links():
-    return list_public_links()
+    return list_public_links()['items']

backend/app/api/public.py

@@ -1,9 +1,12 @@
 ## Copyright © 2026 Olaf Kolkman
 ## SPDX-License-Identifier: GPL-3.0-or-later
 
-from fastapi import APIRouter, Depends
+import math
+
+from fastapi import APIRouter, Depends, Query
 from fastapi.security import HTTPAuthorizationCredentials, HTTPBearer
 
+from backend.app.core.config import settings
 from backend.app.services.link_service import list_public_links, list_public_users
 from backend.app.services.token_service import validate_token
 from backend.app.services.theme_service import THEMES, get_enabled_themes
@@ -23,10 +26,24 @@ def public_themes():
     return [{'id': theme, **THEMES[theme]} for theme in enabled]
 
 
+@router.get('/config')
+def public_config():
+    return {
+        'feed_page_sizes': settings.feed_page_sizes,
+        'default_page_size': settings.feed_page_sizes[0],
+        'max_post_characters': settings.max_post_characters,
+    }
+
+
 @router.get('/feed')
 @router.get('/feed/{username}')
 def public_feed(
     username: str | None = None,
+    tag: str | None = None,
+    search: str | None = None,
+    sort: str = 'newest',
+    page: int = Query(1, ge=1),
+    page_size: int | None = Query(None, ge=1),
     credentials: HTTPAuthorizationCredentials | None = Depends(optional_bearer),
 ):
     current_user_id = None
@@ -34,8 +51,10 @@ def public_feed(
         token_data = validate_token(credentials.credentials)
         if token_data:
             current_user_id = token_data['user_id']
-    items = list_public_links(username)
-    return [
+    allowed_sizes = settings.feed_page_sizes
+    effective_page_size = page_size if page_size in allowed_sizes else allowed_sizes[0]
+    result = list_public_links(username, tag=tag, search=search, sort=sort, page=page, page_size=effective_page_size)
+    items = [
         {
             'id': item['id'],
             'title': item['title'],
@@ -52,5 +71,14 @@ def public_feed(
             'created_at': item['created_at'],
             'mastodon_posted': bool(item['mastodon_posted']),
         }
-        for item in items
+        for item in result['items']
     ]
+    total = result['total']
+    total_pages = max(1, math.ceil(total / effective_page_size))
+    return {
+        'items': items,
+        'total': total,
+        'page': page,
+        'page_size': effective_page_size,
+        'total_pages': total_pages,
+    }

backend/app/core/config.py

@@ -51,8 +51,10 @@ class Settings:
     password_reset_expiry_hours: int = int(os.getenv('LINKLOG_PASSWORD_RESET_EXPIRY_HOURS', '1'))
     mastodon_client_name: str = os.getenv('LINKLOG_MASTODON_CLIENT_NAME', 'LinkLog')
     mastodon_oauth_expiry_minutes: int = int(os.getenv('LINKLOG_MASTODON_OAUTH_EXPIRY_MINUTES', '10'))
+    max_post_characters: int = int(os.getenv('LINKLOG_MAX_POST_CHARACTERS', '500'))
     log_level: str = os.getenv('LINKLOG_LOG_LEVEL', 'INFO').upper()
     tracking_params: list[str] = None
+    feed_page_sizes: list[int] = None
 
     def __post_init__(self):
         if self.tracking_params is None:
@@ -69,6 +71,24 @@ class Settings:
                 if configured_params
                 else default_tracking_params
             )
+        if self.feed_page_sizes is None:
+            default_page_sizes = [25, 100, 250]
+            configured_sizes = os.getenv('LINKLOG_FRONTEND_LOADPOSTS')
+            parsed_sizes = []
+            if configured_sizes:
+                for item in configured_sizes.split(','):
+                    item = item.strip()
+                    if not item:
+                        continue
+                    try:
+                        value = int(item)
+                    except ValueError:
+                        continue
+                    if value > 0 and value not in parsed_sizes:
+                        parsed_sizes.append(value)
+                    if len(parsed_sizes) == 5:
+                        break
+            self.feed_page_sizes = parsed_sizes or default_page_sizes
 
 
 settings = Settings()

backend/app/main.py

@@ -20,7 +20,7 @@ from backend.app.api.setup import has_administrator
 from backend.app.api.user_config import router as user_config_router
 from backend.app.core.config import settings, validate_configuration
 from backend.app.database import AVATARS_DIR
-from backend.app.services.link_service import get_public_profile, list_public_links
+from backend.app.services.link_service import get_public_profile
 
 logging.basicConfig(level=getattr(logging, settings.log_level, logging.INFO))
 validate_configuration(settings)
@@ -53,8 +53,7 @@ templates.env.globals['app_version'] = settings.version
 async def public_root(request: Request):
     if not has_administrator():
         return RedirectResponse('/setup')
-    feed = list_public_links()
-    return templates.TemplateResponse(request, 'feed.html', {'feed': feed})
+    return templates.TemplateResponse(request, 'feed.html', {})
 
 
 @app.get('/admin', response_class=HTMLResponse)
@@ -117,10 +116,9 @@ def health_check():
 @app.get('/{username}', response_class=HTMLResponse)
 @app.get('/{username}/', response_class=HTMLResponse)
 async def public_user_feed(request: Request, username: str):
-    feed = list_public_links(username)
     profile = get_public_profile(username)
     return templates.TemplateResponse(
         request,
         'feed.html',
-        {'feed': feed, 'profile': profile, 'user_filter': username},
+        {'profile': profile, 'user_filter': username},
     )

backend/app/services/link_service.py

@@ -3,6 +3,8 @@
 
 from datetime import datetime, timezone
 import json
+import re
+from urllib.parse import urlparse
 from uuid import uuid4
 
 from backend.app.core.security import clean_url
@@ -136,23 +138,93 @@ def find_owned_link_by_title(user_id: str, title: str) -> dict | None:
     return record
 
 
-def list_public_links(username: str | None = None):
+def _tokenize_search(value: str) -> list[str]:
+    return [group1 or group2 for group1, group2 in re.findall(r'"([^"]+)"|(\S+)', value or '')]
+
+
+def _parse_search_query(value: str) -> dict:
+    groups = [[]]
+    excluded = []
+    sites = []
+    for token in _tokenize_search(value):
+        if token.upper() == 'OR':
+            groups.append([])
+            continue
+        is_excluded = token.startswith('-') and len(token) > 1
+        term = token[1:] if is_excluded else token
+        site_match = re.match(r'^site:(\S+)$', term, re.IGNORECASE)
+        if site_match and not is_excluded:
+            sites.append(site_match.group(1).lower())
+            continue
+        if is_excluded:
+            excluded.append(term.lower())
+        else:
+            groups[-1].append(term.lower())
+    return {'groups': [group for group in groups if group], 'excluded': excluded, 'sites': sites}
+
+
+def _searchable_text(record: dict) -> str:
+    parts = [record.get('title'), record.get('url'), record.get('comment'), record.get('username'), *(record.get('tags') or [])]
+    return ' '.join(part for part in parts if part).lower()
+
+
+def _matches_search(record: dict, query: str) -> bool:
+    if not query or not query.strip():
+        return True
+    parsed = _parse_search_query(query)
+    text = _searchable_text(record)
+
+    def site_matches(site: str) -> bool:
+        hostname = (urlparse(record.get('url') or '').hostname or '').lower()
+        return hostname == site or hostname.endswith(f'.{site}')
+
+    matches_site = all(site_matches(site) for site in parsed['sites'])
+    matches_group = not parsed['groups'] or any(all(term in text for term in group) for group in parsed['groups'])
+    excludes_term = any(term in text for term in parsed['excluded'])
+    return matches_site and matches_group and not excludes_term
+
+
+def list_public_links(
+    username: str | None = None,
+    tag: str | None = None,
+    search: str | None = None,
+    sort: str = 'newest',
+    page: int = 1,
+    page_size: int | None = None,
+) -> dict:
+    order = 'ASC' if sort == 'oldest' else 'DESC'
     with get_connection() as conn:
         rows = conn.execute(
-            '''
+            f'''
             SELECT links.*, users.username, users.avatar_url, users.bio
             FROM links
             JOIN users ON users.id = links.user_id
             WHERE links.is_public = 1
               AND (? IS NULL OR users.username = ?)
-            ORDER BY created_at DESC
+              AND (
+                ? IS NULL OR links.id IN (
+                    SELECT link_tags.link_id FROM link_tags
+                    JOIN tags ON tags.id = link_tags.tag_id
+                    WHERE lower(tags.name) = lower(?)
+                )
+              )
+            ORDER BY links.created_at {order}
             ''',
-            (username, username),
+            (username, username, tag, tag),
         ).fetchall()
         records = [dict(row) for row in rows]
         for record in records:
             record['tags'] = get_link_tags(conn, record['id'])
-    return records
+
+    if search:
+        records = [record for record in records if _matches_search(record, search)]
+
+    total = len(records)
+    if page_size:
+        start = max(page - 1, 0) * page_size
+        records = records[start:start + page_size]
+
+    return {'items': records, 'total': total}
 
 
 def get_public_profile(username: str) -> dict | None:

backend/tests/conftest.py

@@ -11,6 +11,8 @@ TEST_DATABASE_DIRECTORY = tempfile.TemporaryDirectory(prefix='linklog-tests-')
 TEST_DATABASE_PATH = os.path.join(TEST_DATABASE_DIRECTORY.name, 'linklog.db')
 os.environ['LINKLOG_DATABASE_PATH'] = TEST_DATABASE_PATH
 os.environ['LINKLOG_DATA_ENCRYPTION_KEY'] = 'L5M4sQYVjD1N7pT2Xk8R0aBcDeFgHiJkLmNoPqRsTuV='
+# Use a large page size so existing tests that expect the full feed keep working.
+os.environ['LINKLOG_FRONTEND_LOADPOSTS'] = '1000'
 
 
 @pytest.fixture(scope='session', autouse=True)

backend/tests/test_api.py

@@ -607,7 +607,7 @@ def test_submit_link_stores_cleaned_url_and_public_feed():
     data = response.json()
     assert data['url'] == 'https://example.com/path?keep=yes'
 
-    feed = client.get('/api/public/feed').json()
+    feed = client.get('/api/public/feed').json()['items']
     matching = next(item for item in feed if item['id'] == data['id'])
     assert matching['comment'] == 'Interesting read'
     assert matching['user']['username'] == 'alice'
@@ -615,8 +615,8 @@ def test_submit_link_stores_cleaned_url_and_public_feed():
 
     filtered_response = client.get('/api/public/feed/alice')
     assert filtered_response.status_code == 200
-    assert all(item['user']['username'] == 'alice' for item in filtered_response.json())
-    assert client.get('/api/public/feed/does-not-exist').json() == []
+    assert all(item['user']['username'] == 'alice' for item in filtered_response.json()['items'])
+    assert client.get('/api/public/feed/does-not-exist').json()['items'] == []
     users_response = client.get('/api/public/users')
     assert users_response.status_code == 200
     assert 'alice' in users_response.json()
@@ -645,7 +645,7 @@ def test_duplicate_link_updates_comment_tags_and_retriggers_plugins():
     dispatch.assert_called_once()
     assert dispatch.call_args.args[0]['comment'] == 'updated comment'
     assert dispatch.call_args.args[0]['tags'] == ['#Second']
-    feed_item = next(item for item in client.get('/api/public/feed').json() if item['id'] == first.json()['id'])
+    feed_item = next(item for item in client.get('/api/public/feed').json()['items'] if item['id'] == first.json()['id'])
     assert feed_item['comment'] == 'updated comment'
     assert feed_item['tags'] == ['#Second']
 
@@ -689,7 +689,7 @@ def test_links_support_tags_and_tag_filtering():
     assert {
         '#Internet', '#Cybersecurity', '#Fediverse', '#Food', '#Photography', '#Music', '#AI'
     } <= set(tags)
-    tagged_feed = client.get('/api/public/feed').json()
+    tagged_feed = client.get('/api/public/feed').json()['items']
     tagged_item = next(item for item in tagged_feed if item['id'] == link_id)
     assert {tag.casefold() for tag in tagged_item['tags']} == {'#casepreserved', '#web'}
 
@@ -725,12 +725,12 @@ def test_only_link_owner_can_edit_link():
     })
     assert unauthenticated.status_code == 401
 
-    anonymous_feed = client.get('/api/public/feed').json()
+    anonymous_feed = client.get('/api/public/feed').json()['items']
     anonymous_link = next(item for item in anonymous_feed if item['id'] == link_id)
     assert anonymous_link['is_owner'] is False
     assert anonymous_link['can_edit'] is False
 
-    owner_feed = client.get('/api/public/feed', headers=owner_headers).json()
+    owner_feed = client.get('/api/public/feed', headers=owner_headers).json()['items']
     owner_link = next(item for item in owner_feed if item['id'] == link_id)
     assert owner_link['is_owner'] is True
     assert owner_link['can_edit'] is True
@@ -830,17 +830,14 @@ def test_public_and_admin_pages_render_html():
     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 'function parseSearchQuery(value)' in feed_script
-    assert 'site:(\\S+)' in feed_script
-    assert 'token.toUpperCase() === \'OR\'' in feed_script
-    assert 'token.startsWith(\'-\')' in feed_script
-    assert 'matchesSearch(item, pref.search || \'\')' in feed_script
+    assert 'function loadFeed()' in feed_script
+    assert 'function renderPagination(page, totalPages)' in feed_script
     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() === activeTag.toLowerCase()' in feed_script
-    assert 'loadFeed(event.target.value)' in feed_script
-    assert 'Promise.all([loadUsers(), loadTags()]).then(() => loadFeed())' in feed_script
+    assert "params.set('tag', pref.tag)" in feed_script
+    assert 'currentPage = 1' in feed_script
+    assert "Promise.all([loadUsers(), loadTags()])" 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
@@ -899,8 +896,8 @@ def test_link_submission_posts_to_enabled_mastodon_plugin():
         assert received['path'] == '/api/v1/statuses'
         assert received['authorization'] == 'Bearer test-token'
         assert received['content_type'] == 'application/x-www-form-urlencoded'
-        assert received['body'] == {'status': ['From my #LinkLog:\n\nA useful page\n\nWorth sharing\n\nLogged on 2026 August 29 - 21:10 from: https://example.com/useful\n\n#python #web']}
-        posted_item = next(item for item in client.get('/api/public/feed/alice', headers=headers).json() if item['id'] == response.json()['id'])
+        assert received['body'] == {'status': ['From my #LinkLog:\n\nA useful page\n\nWorth sharing\n\nLogged on 2026 August 29 - 21:10 UTC from: https://example.com/useful\n\n#python #web']}
+        posted_item = next(item for item in client.get('/api/public/feed/alice', headers=headers).json()['items'] if item['id'] == response.json()['id'])
         assert posted_item['mastodon_posted'] is True
     finally:
         server.shutdown()

frontend/static/feed.js

@@ -6,10 +6,14 @@ const sortSelect = document.getElementById('sort-select');
 const userFilter = document.getElementById('user-filter');
 const tagFilter = document.getElementById('tag-filter');
 const searchInput = document.getElementById('search-input');
+const pageSizeSelect = document.getElementById('page-size-select');
+const paginationEl = document.getElementById('pagination');
 
 const cookieName = 'linklog-feed-preferences';
 const accessToken = localStorage.getItem('linklogAccessToken');
 let availableTags = [];
+let pageSizes = [25, 100, 250];
+let currentPage = 1;
 
 function createAvatar(user) {
   const avatar = document.createElement('div');
@@ -52,70 +56,6 @@ function writePreferences(pref) {
   document.cookie = `${cookieName}=${value}; path=/; max-age=31536000`;
 }
 
-function tokenizeSearch(value) {
-  const tokens = [];
-  const pattern = /"([^"]+)"|(\S+)/g;
-  let match;
-  while ((match = pattern.exec(value)) !== null) {
-    tokens.push(match[1] || match[2]);
-  }
-  return tokens;
-}
-
-function parseSearchQuery(value) {
-  const groups = [[]];
-  const excluded = [];
-  const sites = [];
-
-  tokenizeSearch(value).forEach((token) => {
-    if (token.toUpperCase() === 'OR') {
-      groups.push([]);
-      return;
-    }
-    const isExcluded = token.startsWith('-') && token.length > 1;
-    const term = isExcluded ? token.slice(1) : token;
-    const siteMatch = term.match(/^site:(\S+)$/i);
-    if (siteMatch && !isExcluded) {
-      sites.push(siteMatch[1].toLowerCase());
-      return;
-    }
-    if (isExcluded) {
-      excluded.push(term.toLowerCase());
-    } else {
-      groups[groups.length - 1].push(term.toLowerCase());
-    }
-  });
-
-  return {groups: groups.filter((group) => group.length), excluded, sites};
-}
-
-function searchableText(item) {
-  return [
-    item.title,
-    item.url,
-    item.comment,
-    item.user?.username,
-    ...(item.tags || []),
-  ].filter(Boolean).join(' ').toLowerCase();
-}
-
-function matchesSearch(item, query) {
-  if (!query.trim()) return true;
-  const parsed = parseSearchQuery(query);
-  const text = searchableText(item);
-  const matchesSite = parsed.sites.every((site) => {
-    try {
-      const hostname = new URL(item.url).hostname.toLowerCase();
-      return hostname === site || hostname.endsWith(`.${site}`);
-    } catch (error) {
-      return false;
-    }
-  });
-  const matchesGroup = !parsed.groups.length || parsed.groups.some((group) => group.every((term) => text.includes(term)));
-  const excludesTerm = parsed.excluded.some((term) => text.includes(term));
-  return matchesSite && matchesGroup && !excludesTerm;
-}
-
 function formatDate(value) {
   const date = new Date(value);
   if (Number.isNaN(date.getTime())) return value || 'updated recently';
@@ -128,6 +68,17 @@ function formatDate(value) {
   return `${date.getFullYear()} ${months[date.getMonth()]} ${date.getDate()} - ${hours}:${minutes}`;
 }
 
+async function loadConfig() {
+  const response = await fetch('/api/public/config');
+  if (!response.ok) throw new Error('Could not load config');
+  const config = await response.json();
+  pageSizes = config.feed_page_sizes?.length ? config.feed_page_sizes : pageSizes;
+  const pref = readPreferences();
+  const selected = pageSizes.includes(pref.pageSize) ? pref.pageSize : pageSizes[0];
+  pageSizeSelect.replaceChildren(...pageSizes.map((size) => new Option(`${size} per page`, String(size))));
+  pageSizeSelect.value = String(selected);
+}
+
 async function loadUsers() {
   const response = await fetch('/api/public/users');
   if (!response.ok) throw new Error('Could not load users');
@@ -237,6 +188,43 @@ function renderFeed(items, showIdentity = true) {
   });
 }
 
+function renderPagination(page, totalPages) {
+  paginationEl.innerHTML = '';
+  if (totalPages <= 1) return;
+
+  const goToPage = (target) => {
+    currentPage = Math.min(Math.max(target, 1), totalPages);
+    loadFeed();
+  };
+
+  const makeButton = (label, target, options = {}) => {
+    const button = document.createElement('button');
+    button.type = 'button';
+    button.textContent = label;
+    if (options.active) button.classList.add('active');
+    if (options.disabled) button.disabled = true;
+    button.addEventListener('click', () => goToPage(target));
+    return button;
+  };
+
+  paginationEl.appendChild(makeButton('Previous', page - 1, {disabled: page <= 1}));
+
+  const pageNumbers = new Set([1, totalPages, page, page - 1, page + 1]);
+  let previous = null;
+  [...pageNumbers].filter((num) => num >= 1 && num <= totalPages).sort((a, b) => a - b).forEach((num) => {
+    if (previous !== null && num - previous > 1) {
+      const ellipsis = document.createElement('span');
+      ellipsis.className = 'pagination-ellipsis';
+      ellipsis.textContent = '…';
+      paginationEl.appendChild(ellipsis);
+    }
+    paginationEl.appendChild(makeButton(String(num), num, {active: num === page}));
+    previous = num;
+  });
+
+  paginationEl.appendChild(makeButton('Next', page + 1, {disabled: page >= totalPages}));
+}
+
 async function postToMastodon(item, button) {
   button.disabled = true;
   const response = await fetch(`/api/links/${encodeURIComponent(item.id)}/mastodon`, {
@@ -321,35 +309,30 @@ function showEditForm(article, item) {
   article.appendChild(form);
 }
 
-async function loadFeed(selectedTag = null) {
+async function loadFeed() {
   const routeUser = document.body.dataset.userFilter;
-  const endpoint = routeUser
+  const pref = readPreferences();
+  const pageSize = pageSizes.includes(pref.pageSize) ? pref.pageSize : pageSizes[0];
+
+  const params = new URLSearchParams();
+  if (pref.tag) params.set('tag', pref.tag);
+  if (pref.search) params.set('search', pref.search);
+  params.set('sort', pref.sort || 'newest');
+  params.set('page', String(currentPage));
+  params.set('page_size', String(pageSize));
+  if (pref.user && !routeUser) params.set('username', pref.user);
+
+  const path = routeUser
     ? `/api/public/feed/${encodeURIComponent(routeUser)}`
     : '/api/public/feed';
-  const response = await fetch(endpoint, {
+  const response = await fetch(`${path}?${params.toString()}`, {
     headers: accessToken ? {Authorization: `Bearer ${accessToken}`} : {},
   });
   const data = await response.json();
 
-  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 (activeTag) {
-    items = items.filter((item) => item.tags?.some((tag) => tag.toLowerCase() === activeTag.toLowerCase()));
-  }
-
-  items = items.filter((item) => matchesSearch(item, pref.search || ''));
-
-  if (pref.sort === 'oldest') {
-    items = [...items].reverse();
-  }
-
-  renderFeed(items, !routeUser);
+  currentPage = data.page || 1;
+  renderFeed(data.items || [], !routeUser);
+  renderPagination(currentPage, data.total_pages || 1);
 }
 
 function syncPreferences() {
@@ -362,6 +345,7 @@ function syncPreferences() {
   sortSelect.addEventListener('change', (event) => {
     const next = { ...readPreferences(), sort: event.target.value };
     writePreferences(next);
+    currentPage = 1;
     loadFeed();
   });
 
@@ -375,15 +359,29 @@ function syncPreferences() {
   tagFilter.addEventListener('change', (event) => {
     const next = { ...readPreferences(), tag: event.target.value };
     writePreferences(next);
-    loadFeed(event.target.value);
+    currentPage = 1;
+    loadFeed();
   });
 
+  let searchDebounce;
   searchInput.addEventListener('input', (event) => {
     const next = { ...readPreferences(), search: event.target.value };
     writePreferences(next);
+    currentPage = 1;
+    clearTimeout(searchDebounce);
+    searchDebounce = setTimeout(() => loadFeed(), 300);
+  });
+
+  pageSizeSelect.addEventListener('change', (event) => {
+    const next = { ...readPreferences(), pageSize: Number(event.target.value) };
+    writePreferences(next);
+    currentPage = 1;
     loadFeed();
   });
 }
 
 syncPreferences();
-Promise.all([loadUsers(), loadTags()]).then(() => loadFeed()).catch(() => loadFeed());
+loadConfig()
+  .then(() => Promise.all([loadUsers(), loadTags()]))
+  .then(() => loadFeed())
+  .catch(() => loadFeed());

frontend/static/new-entry.js

@@ -16,11 +16,14 @@
   const refetchTitleButton = document.getElementById('refetch-title-button');
   const submitButton = document.getElementById('submit-button');
   const submitStatus = document.getElementById('submit-status');
+  const characterCount = document.getElementById('character-count');
 
   const token = localStorage.getItem('linklogAccessToken');
   let availableTags = [];
   let selectedTags = new Set();
   let currentUser = null;
+  let maxPostCharacters = 500;
+  let mastodonPostPrefix = 'From my #LinkLog: ';
 
   // Utility function to add status messages; splits on \n into real <br> line breaks without using innerHTML.
   function setStatus(statusEl, message, isError = false) {
@@ -53,7 +56,7 @@
     .then((user) => {
       currentUser = user;
       entryForm.classList.remove('hidden');
-      Promise.all([loadTags(), loadMastodonPublishing()]);
+      Promise.all([loadTags(), loadMastodonPublishing(), loadConfig()]).then(updateCharacterCount);
     })
     .catch(() => {
       localStorage.removeItem('linklogAccessToken');
@@ -61,6 +64,17 @@
       entryForm.classList.add('hidden');
     });
 
+  async function loadConfig() {
+    try {
+      const response = await fetch('/api/public/config');
+      if (!response.ok) throw new Error('Could not load config');
+      const config = await response.json();
+      if (config.max_post_characters) maxPostCharacters = config.max_post_characters;
+    } catch (error) {
+      console.error('Could not load config:', error);
+    }
+  }
+
   // Load available tags
   async function loadTags() {
     try {
@@ -82,11 +96,63 @@
       const config = await response.json();
       mastodonEnabledCheckbox.checked = Boolean(config.configured);
       mastodonPublishing.classList.toggle('hidden', !config.configured);
+      if (config.post_prefix) {
+        mastodonPostPrefix = config.post_prefix;
+      } else if (config.hashtag) {
+        mastodonPostPrefix = `#${String(config.hashtag).trim().replace(/^#/, '')} `;
+      }
     } catch (error) {
       console.error('Could not load Mastodon configuration:', error);
     }
   }
 
+  // Collect the selected checkbox tags plus any typed new tags, mirroring the submit-time logic.
+  function collectTags() {
+    const tags = Array.from(selectedTags);
+    const newTags = newTagsInput.value.trim();
+    if (newTags) {
+      tags.push(...newTags.split(',').map((t) => t.trim()).filter(Boolean));
+    }
+    return tags;
+  }
+
+  // Format a UTC timestamp the same way the Mastodon plugin does, so the estimated post length matches the server.
+  function formatMastodonTimestamp(date) {
+    const months = [
+      'January', 'February', 'March', 'April', 'May', 'June',
+      'July', 'August', 'September', 'October', 'November', 'December',
+    ];
+    const pad = (value) => String(value).padStart(2, '0');
+    return `${date.getUTCFullYear()} ${months[date.getUTCMonth()]} ${pad(date.getUTCDate())} - ${pad(date.getUTCHours())}:${pad(date.getUTCMinutes())}`;
+  }
+
+  // Estimate the assembled Mastodon post length, mirroring backend/app/services/plugin_manager.py.
+  function estimatePostLength() {
+    const title = titleInput.value.trim();
+    const comment = commentInput.value.trim();
+    const url = removeKnownTrackingParams(urlInput.value.trim());
+    const parts = [mastodonPostPrefix.trim()];
+    if (title) parts.push(title);
+    if (comment) parts.push(comment);
+    if (title) parts.push(`Logged on ${formatMastodonTimestamp(new Date())} UTC from: ${url}`);
+    const tags = collectTags();
+    if (tags.length) parts.push(tags.join(' '));
+    return parts.join('\n\n').length;
+  }
+
+  function updateCharacterCount() {
+    const length = estimatePostLength();
+    const overLimit = length > maxPostCharacters;
+    characterCount.textContent = overLimit
+      ? `${length}/${maxPostCharacters} characters - exceeds the Mastodon post limit by ${length - maxPostCharacters}`
+      : `${length}/${maxPostCharacters} characters`;
+    characterCount.classList.toggle('over-limit', overLimit);
+  }
+
+  [urlInput, titleInput, commentInput, newTagsInput].forEach((input) => {
+    input.addEventListener('input', updateCharacterCount);
+  });
+
   // Render tag checkboxes
   function renderTags() {
     existingTagsEl.innerHTML = '';
@@ -104,6 +170,7 @@
         } else {
           selectedTags.delete(tag);
         }
+        updateCharacterCount();
       });
 
       label.appendChild(checkbox);
@@ -224,22 +291,13 @@
     const url = removeKnownTrackingParams(urlInput.value.trim());
     const title = titleInput.value.trim();
     const comment = commentInput.value.trim();
-    const newTags = newTagsInput.value.trim();
 
     if (!url || !title) {
       setStatus(submitStatus, 'URL and title are required', true);
       return;
     }
 
-    // Combine selected tags and new tags
-    const tags = Array.from(selectedTags);
-    if (newTags) {
-      const newTagsList = newTags
-        .split(',')
-        .map((t) => t.trim())
-        .filter((t) => t);
-      tags.push(...newTagsList);
-    }
+    const tags = collectTags();
 
     submitButton.disabled = true;
     setStatus(submitStatus, 'Saving...', false);

frontend/static/style.css

@@ -886,6 +886,53 @@ button:disabled {
   padding-bottom: 40px;
 }
 
+.pagination {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  justify-content: center;
+  gap: 4px;
+  max-width: 100%;
+  margin: 0 0 40px;
+  overflow-x: auto;
+}
+
+.pagination button {
+  min-width: 28px;
+  padding: 3px 7px;
+  background: transparent;
+  border: 1px solid transparent;
+  border-radius: 6px;
+  color: var(--muted);
+  font-size: 0.82rem;
+  line-height: 1.4;
+  cursor: pointer;
+}
+
+.pagination button:hover:not(:disabled) {
+  border-color: var(--border);
+  color: var(--text);
+}
+
+.pagination button:disabled {
+  opacity: 0.4;
+  cursor: default;
+}
+
+.pagination button.active {
+  background: var(--surface-1);
+  color: var(--text);
+  border-color: var(--border);
+  font-weight: 600;
+}
+
+.pagination .pagination-ellipsis {
+  padding: 3px 2px;
+  color: var(--muted);
+  font-size: 0.82rem;
+  opacity: 0.6;
+}
+
 .link-item {
   padding: 11px;
   background: var(--surface-0);
@@ -1195,6 +1242,18 @@ button:disabled {
   display: none;
 }
 
+.char-count {
+  margin: -8px 0 0;
+  color: var(--muted);
+  font-size: 0.82rem;
+  text-align: right;
+}
+
+.char-count.over-limit {
+  color: var(--red);
+  font-weight: 600;
+}
+
 @media (max-width: 600px) {
   .container {
     padding: 0 14px;

frontend/templates/about.html

@@ -60,7 +60,7 @@
         <section class="link-item">
           <h2>Plugin</h2>
           <p>Install the Firefox plugin to save links directly from your browser. <a
-            href="https://git.kolkman.org/olaf/Link-Log/raw/branch/main/XPI/signed/LinkLog-0.2.0.xpi"
+            href="https://git.kolkman.org/olaf/Link-Log/raw/branch/main/XPI/signed/LinkLog-0.3.0.xpi"
             download>Download and install the Plugin</a>.</p>
         </section>
     </main>

frontend/templates/feed.html

@@ -57,6 +57,10 @@
                   <option value="">All users</option>
                 </select>
               </label>
+              <label>
+                Per page
+                <select id="page-size-select"></select>
+              </label>
               <label class="search-control">
                 Search
                 <input id="search-input" type="search" placeholder="Search links" autocomplete="off" aria-label="Search links" />
@@ -84,12 +88,13 @@
       </section>
       {% endif %}
       <section id="feed" class="feed" aria-live="polite"></section>
+      <nav id="pagination" class="pagination" aria-label="Feed pages"></nav>
     </main>
     <footer class="site-footer">LinkLog Version {{ app_version }}. Copyright © 2026 Olaf Kolkman  · <a href="https://git.kolkman.org/olaf/Link-Log">git.kolkman.org/LinkLog</a></footer>
 
     <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=13"></script>
+    <script src="/static/feed.js?v=14"></script>
   </body>
 </html>

frontend/templates/new-entry.html

@@ -71,6 +71,7 @@
             <textarea id="comment-input" name="comment" rows="4" placeholder="Optional comment about this link"></textarea>
           </label>
         </div>
+        <div id="character-count" class="char-count" aria-live="polite">0/500 characters</div>
 
         <fieldset class="form-section">
           <legend>Tags</legend>
@@ -89,6 +90,7 @@
           </label>
         </fieldset>
 
+   
         <div class="form-actions">
           <button id="submit-button" type="submit">Save Entry</button>
           <a href="/" class="secondary button">Cancel</a>
@@ -103,6 +105,6 @@
     </footer>
 
     <script src="/static/auth-header.js"></script>
-    <script src="/static/new-entry.js?v=8"></script>
+    <script src="/static/new-entry.js?v=9"></script>
   </body>
 </html>

frontend/version.json

@@ -1,3 +1,3 @@
 {
-  "version": "0.2.1
+  "version": "0.3.0"
 }

scripts/seed_demo_data.py

@@ -0,0 +1,179 @@
+#!/usr/bin/env python3
+## Copyright © 2026 Olaf Kolkman
+## SPDX-License-Identifier: GPL-3.0-or-later
+"""One-off script: seed the running LinkLog API with random users and links.
+
+Uses the HTTP API exclusively for user/link creation. The only direct
+database access is flipping `email_verified` for freshly created accounts,
+since there is no mailbox available in this environment to click the real
+verification link that the API would otherwise send.
+"""
+
+import random
+import string
+import subprocess
+import sys
+from datetime import datetime, timedelta, timezone
+
+import requests
+
+BASE_URL = 'http://localhost:5469'
+ADMIN_EMAIL = 'bootstrap_admin@example.invalid'
+ADMIN_PASSWORD = 'Bootstrap-Admin-Pass1!'
+CONTAINER_NAME = 'testlog-app'
+
+NUM_USERS = 5
+LINKS_PER_USER = 500
+
+FIRST_NAMES = ['ava', 'liam', 'noah', 'emma', 'olivia', 'mia', 'ethan', 'sofia', 'lucas', 'zoe']
+SITES = [
+    ('https://news.ycombinator.com', 'Hacker News'),
+    ('https://www.theguardian.com', 'The Guardian'),
+    ('https://arstechnica.com', 'Ars Technica'),
+    ('https://www.wired.com', 'Wired'),
+    ('https://github.com', 'GitHub'),
+    ('https://www.nature.com', 'Nature'),
+    ('https://www.bbc.com', 'BBC'),
+    ('https://techcrunch.com', 'TechCrunch'),
+    ('https://www.nytimes.com', 'NY Times'),
+    ('https://www.reddit.com', 'Reddit'),
+    ('https://stackoverflow.com', 'Stack Overflow'),
+    ('https://www.smithsonianmag.com', 'Smithsonian'),
+    ('https://www.economist.com', 'The Economist'),
+    ('https://www.nationalgeographic.com', 'Nat Geo'),
+    ('https://www.theverge.com', 'The Verge'),
+]
+PATH_WORDS = ['article', 'story', 'post', 'thread', 'blog', 'notes', 'guide', 'review', 'update', 'deep-dive']
+HASHTAG_POOL = ['#tech', '#science', '#news', '#opensource', '#ai', '#climate', '#music',
+                '#photography', '#food', '#travel', '#fediverse', '#security', '#culture', '#space']
+COMMENT_TEMPLATES = [
+    "Interesting take on {topic}.",
+    "Worth a read if you're into {topic}.",
+    "Not sure I agree with this on {topic}, but good points.",
+    "Bookmarking this for later - {topic}.",
+    "Great deep dive into {topic}.",
+    "",  # some links have no comment
+]
+
+session = requests.Session()
+
+
+def rand_suffix(n=6):
+    return ''.join(random.choices(string.ascii_lowercase + string.digits, k=n))
+
+
+def create_bootstrap_admin_if_needed():
+    resp = session.post(f'{BASE_URL}/api/auth/login', json={'email': ADMIN_EMAIL, 'password': ADMIN_PASSWORD})
+    if resp.status_code == 200:
+        return resp.json()['access_token']
+    raise RuntimeError(f'Bootstrap admin login failed: {resp.status_code} {resp.text}')
+
+
+def mark_email_verified(user_id: str):
+    code = (
+        "from backend.app.database import get_connection\n"
+        f"with get_connection() as conn:\n"
+        f"    conn.execute('UPDATE users SET email_verified = 1 WHERE id = ?', ('{user_id}',))\n"
+        "    conn.commit()\n"
+    )
+    subprocess.run(
+        ['docker', 'exec', '-w', '/app', CONTAINER_NAME, 'python3', '-c', code],
+        check=True, capture_output=True, text=True,
+    )
+
+
+def create_user(admin_token: str, index: int) -> dict:
+    name = f'{random.choice(FIRST_NAMES)}{index}_{rand_suffix()}'
+    email = f'{name}@example-seed.invalid'
+    password = f'Passw0rd-{rand_suffix(8)}!'
+    resp = session.post(
+        f'{BASE_URL}/api/admin/users',
+        headers={'Authorization': f'Bearer {admin_token}'},
+        json={'username': name, 'email': email, 'password': password, 'is_admin': False},
+    )
+    if resp.status_code == 201:
+        user = resp.json()
+    elif resp.status_code == 503:
+        # User row was created but the verification email failed to send (no SMTP egress here).
+        list_resp = session.get(f'{BASE_URL}/api/admin/users', headers={'Authorization': f'Bearer {admin_token}'})
+        list_resp.raise_for_status()
+        user = next(u for u in list_resp.json() if u['username'] == name)
+    else:
+        raise RuntimeError(f'Failed to create user {name}: {resp.status_code} {resp.text}')
+
+    mark_email_verified(user['id'])
+    return {'id': user['id'], 'username': name, 'email': email, 'password': password}
+
+
+def login_user(email: str, password: str) -> str:
+    resp = session.post(f'{BASE_URL}/api/auth/login', json={'email': email, 'password': password})
+    resp.raise_for_status()
+    return resp.json()['access_token']
+
+
+def random_link_payload():
+    base_url, site_name = random.choice(SITES)
+    url = f'{base_url}/{random.choice(PATH_WORDS)}/{rand_suffix(8)}'
+    title = f'{site_name}: {random.choice(PATH_WORDS).replace("-", " ").title()} #{random.randint(1000, 9999)}'
+    topic = random.choice(HASHTAG_POOL).lstrip('#')
+    comment = random.choice(COMMENT_TEMPLATES).format(topic=topic)
+    tags = random.sample(HASHTAG_POOL, k=random.randint(1, 4))
+    timestamp = (datetime.now(timezone.utc) - timedelta(days=random.randint(0, 730),
+                                                          seconds=random.randint(0, 86400))).isoformat()
+    return {
+        'title': title,
+        'url': url,
+        'comment': comment,
+        'tags': tags,
+        'timestamp': timestamp,
+        'post_to_mastodon': False,
+    }
+
+
+def create_links_for_user(token: str, username: str, count: int):
+    headers = {'Authorization': f'Bearer {token}'}
+    created = 0
+    for i in range(count):
+        payload = random_link_payload()
+        resp = session.post(f'{BASE_URL}/api/links', headers=headers, json=payload)
+        if resp.status_code == 401:
+            # access token expired mid-run; caller handles refresh via re-login
+            raise PermissionError('token_expired')
+        if resp.status_code not in (200, 201):
+            print(f'  ! link {i} failed for {username}: {resp.status_code} {resp.text[:200]}', file=sys.stderr)
+            continue
+        created += 1
+        if created % 100 == 0:
+            print(f'  {username}: {created}/{count} links created')
+    return created
+
+
+def main():
+    print('Logging in as bootstrap admin...')
+    admin_token = create_bootstrap_admin_if_needed()
+
+    users = []
+    print(f'Creating {NUM_USERS} users...')
+    for i in range(1, NUM_USERS + 1):
+        user = create_user(admin_token, i)
+        users.append(user)
+        print(f'  created user: {user["username"]} <{user["email"]}>')
+
+    for user in users:
+        print(f'Seeding {LINKS_PER_USER} links for {user["username"]}...')
+        token = login_user(user['email'], user['password'])
+        try:
+            total = create_links_for_user(token, user['username'], LINKS_PER_USER)
+        except PermissionError:
+            print(f'  token expired, re-logging in for {user["username"]}')
+            token = login_user(user['email'], user['password'])
+            total = create_links_for_user(token, user['username'], LINKS_PER_USER)
+        print(f'  done: {total}/{LINKS_PER_USER} links created for {user["username"]}')
+
+    print('\nSummary:')
+    for user in users:
+        print(f'  {user["username"]} / {user["email"]} / password: {user["password"]}')
+
+
+if __name__ == '__main__':
+    main()

webextension/_locales/de/messages.json

@@ -53,5 +53,7 @@
   "loginFailed": {"message": "Anmeldung fehlgeschlagen"},
   "loggedInSuccessfully": {"message": "Erfolgreich angemeldet"},
   "unableToLogIn": {"message": "Anmeldung nicht möglich. Überprüfe Backend-URL und Zugangsdaten."},
-  "signedOut": {"message": "Abgemeldet"}
+  "signedOut": {"message": "Abgemeldet"},
+  "characterCount": {"message": "$USED$/$LIMIT$ Zeichen", "placeholders": {"used": {"content": "$1"}, "limit": {"content": "$2"}}},
+  "characterCountOverLimit": {"message": "$USED$/$LIMIT$ Zeichen - überschreitet das Mastodon-Beitragslimit um $OVER$", "placeholders": {"used": {"content": "$1"}, "limit": {"content": "$2"}, "over": {"content": "$3"}}}
 }

webextension/_locales/en-US/messages.json

@@ -181,5 +181,30 @@
   },
   "signedOut": {
     "message": "Signed out"
+  },
+  "characterCount": {
+    "message": "$USED$/$LIMIT$ characters",
+    "placeholders": {
+      "used": {
+        "content": "$1"
+      },
+      "limit": {
+        "content": "$2"
+      }
+    }
+  },
+  "characterCountOverLimit": {
+    "message": "$USED$/$LIMIT$ characters - exceeds the Mastodon post limit by $OVER$",
+    "placeholders": {
+      "used": {
+        "content": "$1"
+      },
+      "limit": {
+        "content": "$2"
+      },
+      "over": {
+        "content": "$3"
+      }
+    }
   }
 }

webextension/_locales/es/messages.json

@@ -53,5 +53,7 @@
   "loginFailed": {"message": "Error de inicio de sesión"},
   "loggedInSuccessfully": {"message": "Sesión iniciada correctamente"},
   "unableToLogIn": {"message": "No se pudo iniciar sesión. Comprueba la URL y las credenciales."},
-  "signedOut": {"message": "Sesión cerrada"}
+  "signedOut": {"message": "Sesión cerrada"},
+  "characterCount": {"message": "$USED$/$LIMIT$ caracteres", "placeholders": {"used": {"content": "$1"}, "limit": {"content": "$2"}}},
+  "characterCountOverLimit": {"message": "$USED$/$LIMIT$ caracteres: supera el límite de publicación de Mastodon en $OVER$", "placeholders": {"used": {"content": "$1"}, "limit": {"content": "$2"}, "over": {"content": "$3"}}}
 }

webextension/_locales/fr/messages.json

@@ -53,5 +53,7 @@
   "loginFailed": {"message": "Échec de la connexion"},
   "loggedInSuccessfully": {"message": "Connexion réussie"},
   "unableToLogIn": {"message": "Connexion impossible. Vérifiez l’URL du serveur et vos identifiants."},
-  "signedOut": {"message": "Déconnecté"}
+  "signedOut": {"message": "Déconnecté"},
+  "characterCount": {"message": "$USED$/$LIMIT$ caractères", "placeholders": {"used": {"content": "$1"}, "limit": {"content": "$2"}}},
+  "characterCountOverLimit": {"message": "$USED$/$LIMIT$ caractères : dépasse la limite de publication Mastodon de $OVER$", "placeholders": {"used": {"content": "$1"}, "limit": {"content": "$2"}, "over": {"content": "$3"}}}
 }

webextension/_locales/nl/messages.json

@@ -53,5 +53,7 @@
   "loginFailed": {"message": "Inloggen mislukt"},
   "loggedInSuccessfully": {"message": "Succesvol ingelogd"},
   "unableToLogIn": {"message": "Inloggen mislukt. Controleer de backend-URL en inloggegevens."},
-  "signedOut": {"message": "Uitgelogd"}
+  "signedOut": {"message": "Uitgelogd"},
+  "characterCount": {"message": "$USED$/$LIMIT$ tekens", "placeholders": {"used": {"content": "$1"}, "limit": {"content": "$2"}}},
+  "characterCountOverLimit": {"message": "$USED$/$LIMIT$ tekens - overschrijdt de Mastodon-postlimiet met $OVER$", "placeholders": {"used": {"content": "$1"}, "limit": {"content": "$2"}, "over": {"content": "$3"}}}
 }

webextension/manifest.json

@@ -1,7 +1,7 @@
 {
   "manifest_version": 3,
   "name": "__MSG_extensionName__",
-  "version": "0.2.0",
+  "version": "0.3.0",
   "description": "__MSG_extensionDescription__",
   "default_locale": "en-US",
   "permissions": [

webextension/popup.css

@@ -149,6 +149,18 @@ button {
   color: #f38ba8;
 }
 
+.char-count {
+  margin: -6px 0 10px;
+  color: #a6adc8;
+  font-size: 0.75rem;
+  text-align: right;
+}
+
+.char-count.over-limit {
+  color: #f38ba8;
+  font-weight: 600;
+}
+
 .auth-session {
   margin-bottom: 10px;
   border: 1px solid #585b70;

webextension/popup.html

@@ -37,6 +37,7 @@
           <span data-i18n="commentLabel">Comment</span>
           <textarea id="comment" name="comment" rows="3" data-i18n-placeholder="commentPlaceholder" placeholder="Your comment"></textarea>
         </label>
+        <div id="character-count" class="char-count" aria-live="polite"></div>
 
         <fieldset>
           <legend data-i18n="tagsLabel">Tags</legend>

webextension/popup.js

@@ -14,10 +14,14 @@ const authWarning = document.getElementById('auth-warning');
 const warningSettingsButton = document.getElementById('warning-settings');
 const authSession = document.getElementById('auth-session');
 const refetchTitleButton = document.getElementById('refetch-title');
+const characterCountEl = document.getElementById('character-count');
 const sessionStore = browser.storage.session;
 
 const t = window.linklogI18n;
 
+let maxPostCharacters = 500;
+let mastodonPostPrefix = 'From my #LinkLog: ';
+
 function normalizeBackendOrigin(backendUrl) {
   try {
     const url = new URL(backendUrl);
@@ -192,9 +196,11 @@ async function loadExistingTags() {
     const checkbox = document.createElement('input');
     checkbox.type = 'checkbox';
     checkbox.value = tag;
+    checkbox.addEventListener('change', updateCharacterCount);
     label.append(checkbox, document.createTextNode(` ${tag}`));
     return label;
   }));
+  updateCharacterCount();
 }
 
 function getTags() {
@@ -203,6 +209,79 @@ function getTags() {
   return [...new Set([...selected, ...newTags])].slice(0, 10);
 }
 
+// Load public app settings (e.g. the Mastodon post length limit) once a backend is configured.
+async function loadConfig() {
+  const settings = await getSettings();
+  if (!settings.backendUrl || !(await hasBackendPermission(settings.backendUrl))) return;
+  try {
+    const response = await fetch(`${settings.backendUrl}/api/public/config`);
+    if (!response.ok) return;
+    const config = await response.json();
+    if (config.max_post_characters) maxPostCharacters = config.max_post_characters;
+  } catch (error) {
+    // Character-count warning is advisory; ignore config load failures.
+  }
+  updateCharacterCount();
+}
+
+// Load the user's configured Mastodon post prefix, so the estimated post length matches the server.
+async function loadMastodonPrefix() {
+  const settings = await getSettings();
+  if (!settings.backendUrl || !settings.accessToken || !(await hasBackendPermission(settings.backendUrl))) return;
+  try {
+    const response = await fetch(`${settings.backendUrl}/api/user/plugins/mastodon`, {
+      headers: {'Authorization': `Bearer ${settings.accessToken}`},
+    });
+    if (!response.ok) return;
+    const config = await response.json();
+    if (config.post_prefix) {
+      mastodonPostPrefix = config.post_prefix;
+    } else if (config.hashtag) {
+      mastodonPostPrefix = `#${String(config.hashtag).trim().replace(/^#/, '')} `;
+    }
+  } catch (error) {
+    // Character-count warning is advisory; ignore config load failures.
+  }
+  updateCharacterCount();
+}
+
+// Format a UTC timestamp the same way the Mastodon plugin does, so the estimated post length matches the server.
+function formatMastodonTimestamp(date) {
+  const months = [
+    'January', 'February', 'March', 'April', 'May', 'June',
+    'July', 'August', 'September', 'October', 'November', 'December',
+  ];
+  const pad = (value) => String(value).padStart(2, '0');
+  return `${date.getUTCFullYear()} ${months[date.getUTCMonth()]} ${pad(date.getUTCDate())} - ${pad(date.getUTCHours())}:${pad(date.getUTCMinutes())}`;
+}
+
+// Estimate the assembled Mastodon post length, mirroring backend/app/services/plugin_manager.py.
+function estimatePostLength() {
+  const title = titleInput.value.trim();
+  const comment = commentInput.value.trim();
+  const url = removeKnownTrackingParams(urlInput.value.trim());
+  const parts = [mastodonPostPrefix.trim()];
+  if (title) parts.push(title);
+  if (comment) parts.push(comment);
+  if (title) parts.push(`Logged on ${formatMastodonTimestamp(new Date())} UTC from: ${url}`);
+  const tags = getTags();
+  if (tags.length) parts.push(tags.join(' '));
+  return parts.join('\n\n').length;
+}
+
+function updateCharacterCount() {
+  const length = estimatePostLength();
+  const overLimit = length > maxPostCharacters;
+  characterCountEl.textContent = overLimit
+    ? t('characterCountOverLimit', [String(length), String(maxPostCharacters), String(length - maxPostCharacters)])
+    : t('characterCount', [String(length), String(maxPostCharacters)]);
+  characterCountEl.classList.toggle('over-limit', overLimit);
+}
+
+[titleInput, urlInput, commentInput, newTagsInput].forEach((input) => {
+  input.addEventListener('input', updateCharacterCount);
+});
+
 function removeKnownTrackingParams(urlString) {
   try {
     const url = new URL(urlString);
@@ -361,6 +440,8 @@ refetchTitleButton.addEventListener('click', (e) => {
   titleInput.value = '';
   fetchTitle(url, { force: true });
 });
-populateCurrentTab().then(checkExistingLink);
+populateCurrentTab().then(checkExistingLink).then(updateCharacterCount);
 loadExistingTags();
 updateFeedLink();
+loadConfig();
+loadMastodonPrefix();

webextension/updates.json

@@ -2,6 +2,16 @@
   "addons": {
     "linklog@kolkman.org": {
       "updates": [
+        {
+          "version": "0.3.0",
+          "update_link": "https://git.kolkman.org/olaf/Link-Log/raw/branch/main/XPI/signed/LinkLog-0.3.0.xpi",
+          "update_hash": "sha256:c4cc16a7e96885caa759c803dca90dd43fdf0befc43457655f6eeb6fd51a4e7f",
+          "applications": {
+            "gecko": {
+              "strict_min_version": "142.0"
+            }
+          }
+        },
         {
           "version": "0.2.0",
           "update_link": "https://git.kolkman.org/olaf/Link-Log/raw/branch/main/XPI/signed/LinkLog-0.2.0.xpi",