daily bookmarks

2025-12-02 21:21:08 +01:00
parent 3ff25d3f7e
commit 839bd24309
10 changed files with 3303 additions and 49 deletions
--- a/web/Dockerfile
+++ b/web/Dockerfile
@@ -5,12 +5,15 @@ COPY posts.html /usr/share/nginx/html/
 COPY dashboard.html /usr/share/nginx/html/
 COPY settings.html /usr/share/nginx/html/
 COPY bookmarks.html /usr/share/nginx/html/
+COPY daily-bookmarks.html /usr/share/nginx/html/
 COPY style.css /usr/share/nginx/html/
 COPY dashboard.css /usr/share/nginx/html/
 COPY settings.css /usr/share/nginx/html/
+COPY daily-bookmarks.css /usr/share/nginx/html/
 COPY app.js /usr/share/nginx/html/
 COPY dashboard.js /usr/share/nginx/html/
 COPY settings.js /usr/share/nginx/html/
+COPY daily-bookmarks.js /usr/share/nginx/html/
 COPY assets /usr/share/nginx/html/assets/

 EXPOSE 80
--- a/web/app.js
+++ b/web/app.js
@@ -20,6 +20,9 @@ let currentTab = 'pending';
 let posts = [];
 let includeExpiredPosts = false;
 let profilePollTimer = null;
+const MERGE_MAX_SELECTION = 2;
+let mergeMode = false;
+const mergeSelection = new Set();
 const UPDATES_RECONNECT_DELAY = 5000;
 let updatesEventSource = null;
 let updatesReconnectTimer = null;
@@ -232,11 +235,17 @@ const bookmarkForm = document.getElementById('bookmarkForm');
 const bookmarkNameInput = document.getElementById('bookmarkName');
 const bookmarkQueryInput = document.getElementById('bookmarkQuery');
 const bookmarkCancelBtn = document.getElementById('bookmarkCancelBtn');
+const bookmarkQuickForm = document.getElementById('bookmarkQuickForm');
+const bookmarkQuickQueryInput = document.getElementById('bookmarkQuickQuery');
+const bookmarkQuickStatus = document.getElementById('bookmarkQuickStatus');
 const bookmarkSearchInput = document.getElementById('bookmarkSearchInput');
 const bookmarkSortSelect = document.getElementById('bookmarkSortSelect');
 const bookmarkSortDirectionToggle = document.getElementById('bookmarkSortDirectionToggle');
 const profileSelectElement = document.getElementById('profileSelect');
 const includeExpiredToggle = document.getElementById('includeExpiredToggle');
+const mergeControls = document.getElementById('mergeControls');
+const mergeModeToggle = document.getElementById('mergeModeToggle');
+const mergeSubmitBtn = document.getElementById('mergeSubmitBtn');

 const REFRESH_SETTINGS_KEY = 'trackerRefreshSettings';
 const SORT_SETTINGS_KEY = 'trackerSortSettings';
@@ -294,6 +303,37 @@ function updateIncludeExpiredToggleVisibility() {
  wrapper.style.display = currentTab === 'all' ? 'inline-flex' : 'none';
 }

+function resetMergeSelection() {
+  mergeSelection.clear();
+}
+
+function updateMergeControlsUI() {
+  if (!mergeControls) {
+    return;
+  }
+
+  const isAllTab = currentTab === 'all';
+  mergeControls.hidden = !isAllTab;
+  mergeControls.style.display = isAllTab ? 'flex' : 'none';
+
+  if (!isAllTab && mergeMode) {
+    mergeMode = false;
+    resetMergeSelection();
+  }
+
+  if (mergeModeToggle) {
+    mergeModeToggle.disabled = !isAllTab;
+    mergeModeToggle.classList.toggle('active', mergeMode);
+    mergeModeToggle.textContent = mergeMode ? 'Merge-Modus: aktiv' : 'Merge-Modus';
+  }
+
+  if (mergeSubmitBtn) {
+    const count = mergeSelection.size;
+    mergeSubmitBtn.disabled = !mergeMode || !isAllTab || count !== MERGE_MAX_SELECTION;
+    mergeSubmitBtn.textContent = `Beiträge mergen (${count}/${MERGE_MAX_SELECTION})`;
+  }
+}
+
 function initializeFocusParams() {
  try {
    const params = new URLSearchParams(window.location.search);
@@ -996,6 +1036,21 @@ function buildBookmarkSearchQueries(baseQuery) {
  return BOOKMARK_SUFFIXES.map((suffix) => `${trimmed} ${suffix}`.trim());
 }

+function openBookmarkQueries(baseQuery) {
+  const queries = Array.isArray(baseQuery) ? baseQuery : buildBookmarkSearchQueries(baseQuery);
+  let opened = 0;
+
+  queries.forEach((searchTerm) => {
+    const url = buildBookmarkSearchUrl(searchTerm);
+    if (url) {
+      window.open(url, '_blank', 'noopener');
+      opened += 1;
+    }
+  });
+
+  return opened;
+}
+
 function openBookmark(bookmark) {
  if (!bookmark) {
    return;
@@ -1032,13 +1087,7 @@ function openBookmark(bookmark) {
    markBookmarkClick(stateBookmark.id);
  }

-  queries.forEach((searchTerm) => {
-    const url = buildBookmarkSearchUrl(searchTerm);
-    if (url) {
-      window.open(url, '_blank', 'noopener');
-    }
-  });
-
+  openBookmarkQueries(queries);
 }

 async function markBookmarkClick(bookmarkId) {
@@ -1380,6 +1429,45 @@ async function handleBookmarkSubmit(event) {
  }
 }

+function setBookmarkQuickStatus(message, isError = false) {
+  if (!bookmarkQuickStatus) {
+    return;
+  }
+
+  const hasMessage = typeof message === 'string' && message.trim();
+  bookmarkQuickStatus.hidden = !hasMessage;
+  bookmarkQuickStatus.textContent = hasMessage ? message : '';
+  bookmarkQuickStatus.classList.toggle('bookmark-status--error', !!isError);
+}
+
+function handleBookmarkQuickSubmit(event) {
+  event.preventDefault();
+
+  if (!bookmarkQuickForm) {
+    return;
+  }
+
+  const query = bookmarkQuickQueryInput ? bookmarkQuickQueryInput.value.trim() : '';
+  if (!query) {
+    setBookmarkQuickStatus('Bitte gib einen Suchbegriff ein.', true);
+    if (bookmarkQuickQueryInput) {
+      bookmarkQuickQueryInput.focus();
+    }
+    return;
+  }
+
+  const opened = openBookmarkQueries(query);
+  if (opened > 0) {
+    setBookmarkQuickStatus(`Suche „${query}“ geöffnet (ohne Speicherung).`);
+    if (bookmarkQuickQueryInput) {
+      bookmarkQuickQueryInput.value = '';
+      bookmarkQuickQueryInput.focus();
+    }
+  } else {
+    setBookmarkQuickStatus('Konnte die Suche nicht öffnen.', true);
+  }
+}
+
 function initializeBookmarks() {
  if (!bookmarksList) {
    return;
@@ -1418,7 +1506,17 @@ function initializeBookmarks() {
    bookmarkForm.addEventListener('submit', handleBookmarkSubmit);
  }

-if (bookmarkSearchInput) {
+  if (bookmarkQuickForm) {
+    bookmarkQuickForm.addEventListener('submit', handleBookmarkQuickSubmit);
+  }
+
+  if (bookmarkQuickQueryInput) {
+    bookmarkQuickQueryInput.addEventListener('input', () => {
+      setBookmarkQuickStatus('');
+    });
+  }
+
+  if (bookmarkSearchInput) {
    bookmarkSearchInput.value = bookmarkSearchTerm;
    bookmarkSearchInput.addEventListener('input', () => {
      bookmarkSearchTerm = typeof bookmarkSearchInput.value === 'string'
@@ -1665,8 +1763,13 @@ function setTab(tab, { updateUrl = true } = {}) {
  } else {
    currentTab = 'pending';
  }
+  if (currentTab !== 'all' && mergeMode) {
+    mergeMode = false;
+    resetMergeSelection();
+  }
  updateTabButtons();
  loadSortMode({ fromTabChange: true });
+  updateMergeControlsUI();
  if (updateUrl) {
    updateTabInUrl();
  }
@@ -2982,6 +3085,27 @@ if (searchInput) {
  });
 }

+if (mergeModeToggle) {
+  mergeModeToggle.addEventListener('click', () => {
+    if (currentTab !== 'all') {
+      alert('Merge-Modus ist nur in „Alle Beiträge“ verfügbar.');
+      return;
+    }
+    mergeMode = !mergeMode;
+    if (!mergeMode) {
+      resetMergeSelection();
+    }
+    updateMergeControlsUI();
+    renderPosts();
+  });
+}
+
+if (mergeSubmitBtn) {
+  mergeSubmitBtn.addEventListener('click', () => {
+    mergeSelectedPosts();
+  });
+}
+
 if (sortModeSelect) {
  sortModeSelect.addEventListener('change', () => {
    const value = sortModeSelect.value;
@@ -3195,6 +3319,104 @@ function highlightPostCard(post) {
  clearFocusParamsFromUrl();
 }

+function toggleMergeSelection(postId, checkboxEl = null) {
+  if (!mergeMode || currentTab !== 'all') {
+    resetMergeSelection();
+    if (checkboxEl) {
+      checkboxEl.checked = false;
+    }
+    updateMergeControlsUI();
+    return;
+  }
+
+  if (mergeSelection.has(postId)) {
+    mergeSelection.delete(postId);
+  } else {
+    if (mergeSelection.size >= MERGE_MAX_SELECTION) {
+      alert(`Es können maximal ${MERGE_MAX_SELECTION} Beiträge ausgewählt werden.`);
+      if (checkboxEl) {
+        checkboxEl.checked = false;
+      }
+      updateMergeControlsUI();
+      return;
+    }
+    mergeSelection.add(postId);
+  }
+
+  updateMergeControlsUI();
+}
+
+async function mergeSelectedPosts() {
+  if (!mergeMode || currentTab !== 'all') {
+    alert('Mergen ist nur in „Alle Beiträge“ möglich.');
+    return;
+  }
+
+  if (mergeSelection.size !== MERGE_MAX_SELECTION) {
+    alert('Bitte genau zwei Beiträge auswählen.');
+    return;
+  }
+
+  const [primaryId, secondaryId] = Array.from(mergeSelection);
+
+  const confirmed = window.confirm(
+    `Beitrag ${primaryId} als Haupt-URL behalten und Beitrag ${secondaryId} anhängen?`
+  );
+  if (!confirmed) {
+    return;
+  }
+
+  if (mergeSubmitBtn) {
+    mergeSubmitBtn.disabled = true;
+    mergeSubmitBtn.textContent = 'Mergen...';
+  }
+
+  try {
+    const response = await apiFetch(`${API_URL}/posts/merge`, {
+      method: 'POST',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify({
+        primary_post_id: primaryId,
+        secondary_post_id: secondaryId
+      })
+    });
+
+    if (!response.ok) {
+      const data = await response.json().catch(() => null);
+      const message = data && data.error ? data.error : 'Beiträge konnten nicht gemerged werden.';
+      throw new Error(message);
+    }
+
+    const mergedPost = await response.json();
+    posts = posts
+      .filter((post) => {
+        if (post.id === secondaryId) {
+          return false;
+        }
+        if (post.id === primaryId) {
+          return false;
+        }
+        return true;
+      });
+    posts.push(mergedPost);
+    sortPostsByCreatedAt();
+
+    mergeMode = false;
+    resetMergeSelection();
+    updateMergeControlsUI();
+    renderPosts();
+    alert('Beiträge wurden gemerged.');
+  } catch (error) {
+    console.error('Merge error:', error);
+    alert(error.message || 'Beiträge konnten nicht gemerged werden.');
+  } finally {
+    if (mergeSubmitBtn) {
+      mergeSubmitBtn.disabled = false;
+    }
+    updateMergeControlsUI();
+  }
+}
+
 // Render posts
 function renderPosts() {
  hideLoading();
@@ -3206,6 +3428,7 @@ function renderPosts() {
  }

  updateIncludeExpiredToggleVisibility();
+  updateMergeControlsUI();
  closeActiveDeadlinePicker();
  updateTabButtons();
  cleanupLoadMoreObserver();
@@ -3359,6 +3582,13 @@ function attachPostEventHandlers(post, status) {
    return;
  }

+  const mergeCheckbox = card.querySelector('.merge-checkbox');
+  if (mergeCheckbox) {
+    mergeCheckbox.addEventListener('change', () => {
+      toggleMergeSelection(post.id, mergeCheckbox);
+    });
+  }
+
  const openBtn = card.querySelector('.btn-open');
  if (openBtn) {
    openBtn.addEventListener('click', () => openPost(post.id));
@@ -3548,6 +3778,15 @@ function createPostCard(post, status, meta = {}) {
  const tabTotalCount = typeof meta.tabTotalCount === 'number' ? meta.tabTotalCount : posts.length;
  const searchActive = !!meta.searchActive;
  const indexBadge = displayIndex !== null ? `<span class="post-index">#${String(displayIndex).padStart(2, '0')}</span>` : '';
+  const mergeSelectable = mergeMode && currentTab === 'all';
+  const mergeCheckboxHtml = mergeSelectable
+    ? `
+      <label class="merge-select">
+        <input type="checkbox" class="merge-checkbox" data-post-id="${post.id}" ${mergeSelection.has(post.id) ? 'checked' : ''}>
+        <span>Merge</span>
+      </label>
+    `
+    : '';

  const profileRowsHtml = status.profileStatuses.map((profileStatus) => {
    const classes = ['profile-line', `profile-line--${profileStatus.status}`];
@@ -3690,6 +3929,7 @@ function createPostCard(post, status, meta = {}) {
    <div class="post-card ${status.isComplete ? 'complete' : ''}" id="post-${post.id}">
      <div class="post-header">
        <div class="post-title-with-checkbox">
+          ${mergeCheckboxHtml}
          ${indexBadge}
          <div class="post-title">${escapeHtml(titleText)}</div>
          <label class="success-checkbox success-checkbox--header">
@@ -4308,6 +4548,7 @@ initializeBookmarks();
 loadAutoRefreshSettings();
 initializeFocusParams();
 initializeTabFromUrl();
+updateMergeControlsUI();
 loadSortMode();
 resetManualPostForm();
 loadProfile();
--- a/web/daily-bookmarks.css
+++ b/web/daily-bookmarks.css
@@ -0,0 +1,702 @@
+:root {
+  --bg: #f0f2f5;
+  --bg-strong: #ffffff;
+  --panel: #ffffff;
+  --panel-strong: #f8fafc;
+  --border: #e5e7eb;
+  --text: #111827;
+  --muted: #6b7280;
+  --accent: #2563eb;
+  --accent-2: #06b6d4;
+  --danger: #ef4444;
+  --success: #10b981;
+  --shadow: 0 18px 50px rgba(15, 23, 42, 0.08);
+  --radius: 16px;
+}
+
+*,
+*::before,
+*::after {
+  box-sizing: border-box;
+}
+
+body {
+  margin: 0;
+  font-family: 'Space Grotesk', 'Inter', system-ui, -apple-system, sans-serif;
+  background: var(--bg);
+  color: var(--text);
+  line-height: 1.6;
+  min-height: 100vh;
+}
+
+a {
+  color: var(--accent-2);
+  text-decoration: none;
+}
+
+a:hover {
+  text-decoration: underline;
+}
+
+.visually-hidden {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  border: 0;
+}
+
+.daily-shell {
+  max-width: 1600px;
+  margin: 0 auto;
+  padding: 28px 18px 50px;
+}
+
+.hero {
+  background: var(--panel);
+  border: 1px solid var(--border);
+  border-radius: 20px;
+  padding: 26px 28px;
+  box-shadow: var(--shadow);
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+}
+
+.back-link {
+  align-self: flex-start;
+  color: var(--accent);
+  text-decoration: none;
+  font-weight: 600;
+  margin-bottom: 4px;
+}
+
+.back-link:hover {
+  text-decoration: underline;
+}
+
+.pill {
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
+  padding: 6px 10px;
+  border-radius: 999px;
+  font-size: 13px;
+  letter-spacing: 0.02em;
+  color: var(--text);
+  border: 1px solid rgba(255, 255, 255, 0.14);
+}
+
+.pill--soft {
+  background: rgba(255, 255, 255, 0.08);
+}
+
+.pill--accent {
+  background: linear-gradient(120deg, rgba(37, 99, 235, 0.15), rgba(6, 182, 212, 0.15));
+  color: #0f172a;
+  border-color: rgba(37, 99, 235, 0.25);
+}
+
+.hero__title {
+  font-size: clamp(30px, 3vw, 36px);
+  margin: 0;
+  letter-spacing: -0.01em;
+}
+
+.hero__lead {
+  margin: 0;
+  color: var(--muted);
+  max-width: 840px;
+}
+
+.hero__lead code {
+  background: rgba(37, 99, 235, 0.08);
+  padding: 3px 6px;
+  border-radius: 8px;
+  color: var(--text);
+  border: 1px solid rgba(37, 99, 235, 0.15);
+}
+
+.hero__controls {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 16px;
+  justify-content: space-between;
+}
+
+.day-switch {
+  display: inline-flex;
+  align-items: center;
+  gap: 10px;
+  padding: 10px 12px;
+  background: #f8fafc;
+  border: 1px solid var(--border);
+  border-radius: 12px;
+  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9);
+}
+
+.day-switch__label {
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+  min-width: 170px;
+}
+
+.day-switch__day {
+  font-weight: 700;
+}
+
+.day-switch__sub {
+  color: var(--muted);
+  font-size: 13px;
+}
+
+.hero__actions {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+}
+
+.hero__stats {
+  color: var(--muted);
+  font-size: 14px;
+}
+
+.bulk-actions {
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
+  background: #f8fafc;
+  border: 1px solid var(--border);
+  padding: 8px 10px;
+  border-radius: 12px;
+}
+
+.bulk-actions label {
+  color: var(--muted);
+  font-size: 13px;
+}
+
+.bulk-actions select {
+  background: #fff;
+  border: 1px solid var(--border);
+  color: var(--text);
+  border-radius: 10px;
+  padding: 8px 10px;
+}
+
+.panel {
+  background: var(--panel);
+  border: 1px solid var(--border);
+  border-radius: var(--radius);
+  padding: 20px;
+  box-shadow: var(--shadow);
+}
+
+.panel__header {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+  margin-bottom: 10px;
+}
+
+.panel__header--row {
+  flex-direction: row;
+  align-items: center;
+  justify-content: space-between;
+  gap: 12px;
+}
+
+.panel__eyebrow {
+  margin: 0;
+  font-size: 13px;
+  letter-spacing: 0.08em;
+  text-transform: uppercase;
+  color: var(--muted);
+}
+
+.panel__title {
+  margin: 0;
+  font-size: 22px;
+}
+
+.panel__subtitle {
+  margin: 0;
+  color: var(--muted);
+  font-size: 14px;
+}
+
+.list-status {
+  min-height: 18px;
+  color: var(--muted);
+  font-size: 14px;
+  margin-bottom: 10px;
+}
+
+.list-status--error {
+  color: var(--danger);
+}
+
+.field {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+  margin-bottom: 12px;
+}
+
+.field span {
+  color: var(--muted);
+  font-size: 14px;
+}
+
+.field input,
+.field textarea {
+  width: 100%;
+  border-radius: 12px;
+  border: 1px solid rgba(255, 255, 255, 0.14);
+  background: rgba(255, 255, 255, 0.06);
+  color: var(--text);
+  padding: 12px 14px;
+  font-size: 15px;
+  outline: none;
+  transition: border-color 0.2s ease, box-shadow 0.2s ease;
+}
+
+.field input:focus,
+.field textarea:focus {
+  border-color: var(--accent-2);
+  box-shadow: 0 0 0 3px rgba(34, 211, 238, 0.2);
+}
+
+.form-preview {
+  margin-top: 8px;
+  display: flex;
+  flex-wrap: wrap;
+  gap: 10px;
+  justify-content: space-between;
+  align-items: center;
+  background: var(--panel-strong);
+  border: 1px dashed rgba(255, 255, 255, 0.12);
+  border-radius: 14px;
+  padding: 12px 14px;
+}
+
+.form-preview__label {
+  margin: 0 0 4px 0;
+  color: var(--muted);
+}
+
+.form-preview__link {
+  display: inline-block;
+  max-width: 620px;
+  word-break: break-all;
+}
+
+.form-preview__actions {
+  display: flex;
+  gap: 8px;
+}
+
+.primary-btn,
+.secondary-btn,
+.ghost-btn {
+  border: none;
+  cursor: pointer;
+  border-radius: 12px;
+  padding: 10px 14px;
+  font-weight: 600;
+  letter-spacing: 0.01em;
+  font-size: 14px;
+  transition: transform 0.1s ease, box-shadow 0.2s ease, border-color 0.2s ease, background 0.2s ease;
+}
+
+.primary-btn {
+  background: linear-gradient(120deg, var(--accent), var(--accent-2));
+  color: #ffffff;
+  box-shadow: 0 10px 25px rgba(37, 99, 235, 0.25);
+}
+
+.primary-btn:hover {
+  transform: translateY(-1px);
+  box-shadow: 0 16px 45px rgba(34, 211, 238, 0.3);
+}
+
+.secondary-btn {
+  background: #f8fafc;
+  color: var(--text);
+  border: 1px solid var(--border);
+}
+
+.secondary-btn:hover {
+  border-color: var(--accent);
+}
+
+.ghost-btn {
+  background: #fff;
+  color: var(--text);
+  border: 1px solid var(--border);
+  padding: 8px 10px;
+}
+
+.ghost-btn--today {
+  background: rgba(37, 99, 235, 0.08);
+  border-color: rgba(37, 99, 235, 0.25);
+}
+
+.ghost-btn:hover {
+  transform: translateY(-1px);
+  border-color: var(--accent);
+}
+
+.ghost-btn--tiny {
+  padding: 6px 8px;
+  font-size: 12px;
+  border-radius: 8px;
+}
+
+.placeholder-help {
+  margin-top: 12px;
+  padding: 12px 14px;
+  border-radius: 12px;
+  background: #f8fafc;
+  border: 1px solid var(--border);
+}
+
+.placeholder-help__title {
+  margin: 0 0 6px 0;
+  font-weight: 700;
+}
+
+.placeholder-help__list {
+  margin: 0;
+  padding-left: 18px;
+  color: var(--muted);
+  display: grid;
+  gap: 4px;
+}
+
+.form-status {
+  min-height: 18px;
+  font-size: 14px;
+  color: var(--muted);
+}
+
+.form-status--error {
+  color: var(--danger);
+}
+
+.suggestion-box {
+  margin-top: -4px;
+  margin-bottom: 8px;
+  padding: 10px 12px;
+  border-radius: 12px;
+  border: 1px solid rgba(37, 99, 235, 0.25);
+  background: rgba(37, 99, 235, 0.08);
+  color: var(--text);
+  display: flex;
+  gap: 8px;
+  align-items: center;
+  flex-wrap: wrap;
+}
+
+.suggestion-box__item {
+  display: flex;
+  gap: 8px;
+  align-items: center;
+  background: #fff;
+  border: 1px solid var(--border);
+  border-radius: 10px;
+  padding: 6px 8px;
+}
+
+.suggestion-box__text {
+  color: var(--muted);
+  font-size: 14px;
+}
+
+.suggestion-btn {
+  border: 1px solid var(--border);
+  background: #f8fafc;
+  color: var(--text);
+  border-radius: 8px;
+  padding: 6px 8px;
+  cursor: pointer;
+}
+
+.suggestion-btn:hover {
+  border-color: var(--accent);
+}
+
+.suggestion-preview {
+  display: inline-block;
+  max-width: 320px;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  color: var(--accent);
+  text-decoration: none;
+  font-size: 13px;
+}
+
+.suggestion-preview:hover {
+  text-decoration: underline;
+}
+
+.table-wrapper {
+  width: 100%;
+  overflow-x: auto;
+}
+
+.bookmark-table {
+  width: 100%;
+  border-collapse: collapse;
+  color: var(--text);
+}
+
+.bookmark-table th,
+.bookmark-table td {
+  padding: 8px 10px;
+  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
+  text-align: left;
+  background: transparent;
+}
+
+.bookmark-table th {
+  font-size: 13px;
+  letter-spacing: 0.04em;
+  text-transform: uppercase;
+  color: var(--muted);
+  background: rgba(255, 255, 255, 0.04);
+}
+
+.bookmark-table th.col-marker {
+  width: 180px;
+}
+
+.bookmark-table th.col-last {
+  width: 220px;
+}
+
+.bookmark-table tr:hover td {
+  background: rgba(255, 255, 255, 0.02);
+}
+
+.bookmark-table tr.is-done td {
+  background: rgba(16, 185, 129, 0.12);
+  border-bottom-color: rgba(16, 185, 129, 0.3);
+}
+
+.bookmark-table tr.is-open td {
+  background: rgba(37, 99, 235, 0.08);
+  border-bottom-color: rgba(37, 99, 235, 0.2);
+}
+
+.chip {
+  border-radius: 12px;
+  padding: 6px 8px;
+  background: rgba(255, 255, 255, 0.07);
+  border: 1px solid rgba(255, 255, 255, 0.08);
+  color: var(--muted);
+  font-size: 13px;
+  display: inline-flex;
+  gap: 4px;
+  align-items: center;
+}
+
+.chip--marker {
+  background: linear-gradient(120deg, rgba(37, 99, 235, 0.12), rgba(6, 182, 212, 0.12));
+  color: #0f172a;
+  border-color: rgba(37, 99, 235, 0.2);
+}
+
+.list-summary {
+  color: var(--muted);
+  font-size: 14px;
+}
+
+.empty-state,
+.error-state,
+.loading-state {
+  border: 1px dashed rgba(255, 255, 255, 0.2);
+  border-radius: 14px;
+  padding: 16px;
+  text-align: center;
+  color: var(--muted);
+}
+
+.danger {
+  color: var(--danger);
+}
+
+.table-actions {
+  display: flex;
+  gap: 6px;
+  flex-wrap: wrap;
+}
+
+.table-actions .ghost-btn {
+  padding: 6px 8px;
+  font-size: 13px;
+  border-radius: 10px;
+}
+
+.bookmark-table .note-cell {
+  max-width: 240px;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.bookmark-table .url-cell {
+  max-width: 420px;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.bookmark-table .marker-cell {
+  max-width: 220px;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.modal {
+  position: fixed;
+  inset: 0;
+  display: grid;
+  place-items: center;
+  background: rgba(0, 0, 0, 0.6);
+  z-index: 1000;
+}
+
+.modal[hidden] {
+  display: none;
+}
+
+.modal__backdrop {
+  position: absolute;
+  inset: 0;
+}
+
+.modal__content {
+  width: min(720px, 92vw);
+  background: var(--bg-strong);
+  border: 1px solid var(--border);
+  border-radius: 18px;
+  padding: 18px;
+  box-shadow: var(--shadow);
+  position: relative;
+}
+
+.modal__header {
+  display: flex;
+  justify-content: space-between;
+  align-items: flex-start;
+  gap: 12px;
+  margin-bottom: 6px;
+}
+
+.modal__close {
+  border-radius: 999px;
+}
+
+.table-wrapper::-webkit-scrollbar {
+  height: 8px;
+}
+
+.table-wrapper::-webkit-scrollbar-thumb {
+  background: rgba(255, 255, 255, 0.18);
+  border-radius: 999px;
+}
+
+.sort-btn {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  background: transparent;
+  border: none;
+  color: var(--muted);
+  font-weight: 700;
+  text-transform: uppercase;
+  letter-spacing: 0.04em;
+  cursor: pointer;
+  padding: 0;
+}
+
+.sort-btn::after {
+  content: '↕';
+  font-size: 12px;
+  color: var(--muted);
+  opacity: 0.6;
+}
+
+.sort-btn.is-active {
+  color: var(--text);
+}
+
+.sort-btn.is-active::after {
+  content: attr(data-sort-direction);
+  opacity: 1;
+  color: var(--accent);
+}
+
+.table-filter-row th {
+  background: rgba(37, 99, 235, 0.05);
+  border-bottom: 1px solid rgba(37, 99, 235, 0.15);
+}
+
+.table-filter-row select {
+  width: 100%;
+  border-radius: 10px;
+  border: 1px solid var(--border);
+  padding: 8px 10px;
+  background: #fff;
+  color: var(--text);
+}
+
+.filter-hint {
+  font-size: 12px;
+  color: var(--muted);
+  text-transform: none;
+  letter-spacing: 0;
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  justify-content: space-between;
+}
+
+.import-hint {
+  background: #f8fafc;
+  border: 1px dashed var(--border);
+  border-radius: 12px;
+  padding: 10px 12px;
+  color: var(--muted);
+  font-size: 14px;
+  margin: 4px 0 10px;
+}
+
+.muted {
+  color: var(--muted);
+}
+
+@media (max-width: 640px) {
+  .panel__header--row {
+    flex-direction: column;
+    align-items: flex-start;
+  }
+
+  .hero__controls {
+    flex-direction: column;
+    align-items: flex-start;
+  }
+
+  .form-preview {
+    flex-direction: column;
+    align-items: flex-start;
+  }
+}
--- a/web/daily-bookmarks.html
+++ b/web/daily-bookmarks.html
@@ -0,0 +1,184 @@
+<!DOCTYPE html>
+<html lang="de">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Daily Bookmarks</title>
+  <link rel="icon" type="image/png" sizes="32x32" href="assets/app-icon-64.png">
+  <link rel="preconnect" href="https://fonts.googleapis.com">
+  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+  <link href="https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700&display=swap" rel="stylesheet">
+  <link rel="stylesheet" href="daily-bookmarks.css">
+</head>
+<body>
+  <div class="daily-shell">
+    <header class="hero">
+      <a class="back-link" href="index.html">← Zurück zur App</a>
+      <h1 class="hero__title">Daily Bookmarks</h1>
+      <div class="hero__controls">
+        <div class="day-switch">
+          <button class="ghost-btn" id="prevDayBtn" aria-label="Vorheriger Tag">◀</button>
+          <div class="day-switch__label">
+            <div id="dayLabel" class="day-switch__day">Heute</div>
+            <div id="daySubLabel" class="day-switch__sub"></div>
+          </div>
+          <button class="ghost-btn" id="nextDayBtn" aria-label="Nächster Tag">▶</button>
+          <button class="ghost-btn ghost-btn--today" id="todayBtn">Heute</button>
+        </div>
+        <div class="hero__actions">
+          <div class="bulk-actions">
+            <label for="bulkCountSelect">Anzahl</label>
+            <select id="bulkCountSelect">
+              <option value="1">1</option>
+              <option value="5">5</option>
+              <option value="10">10</option>
+              <option value="15">15</option>
+              <option value="20">20</option>
+            </select>
+            <button class="secondary-btn" id="bulkOpenBtn" type="button">Öffnen & abhaken</button>
+          </div>
+          <button class="primary-btn" id="openCreateBtn" type="button">+ Bookmark</button>
+          <button class="secondary-btn" id="openImportBtn" type="button">Liste importieren</button>
+          <button class="ghost-btn" id="refreshBtn" type="button">Aktualisieren</button>
+          <span id="heroStats" class="hero__stats"></span>
+        </div>
+      </div>
+    </header>
+
+    <main class="panel list-panel">
+      <header class="panel__header panel__header--row">
+        <div>
+          <p class="panel__eyebrow">Tägliche Liste</p>
+          <h2 class="panel__title">Alle Bookmarks</h2>
+        </div>
+        <div class="list-summary" id="listSummary"></div>
+      </header>
+      <div id="listStatus" class="list-status" role="status" aria-live="polite"></div>
+      <div class="table-wrapper">
+        <table class="bookmark-table">
+          <thead>
+            <tr>
+              <th class="col-url">
+                <button type="button" class="sort-btn" data-sort-key="url_template">URL (aufgelöst)</button>
+              </th>
+              <th class="col-marker">
+                <button type="button" class="sort-btn" data-sort-key="marker">Marker</button>
+              </th>
+              <th class="col-last">
+                <button type="button" class="sort-btn" data-sort-key="last_completed_at">Letzte Erledigung</button>
+              </th>
+              <th>Aktionen</th>
+            </tr>
+            <tr class="table-filter-row">
+              <th></th>
+              <th>
+                <label class="visually-hidden" for="markerFilter">Nach Marker filtern</label>
+                <select id="markerFilter">
+                  <option value="">Alle Marker</option>
+                  <option value="__none">Ohne Marker</option>
+                </select>
+              </th>
+              <th colspan="2" class="filter-hint">
+                <span>Filter & Sortierung werden gespeichert</span>
+                <button type="button" class="ghost-btn ghost-btn--tiny" id="resetViewBtn">Zurücksetzen</button>
+              </th>
+            </tr>
+          </thead>
+          <tbody id="tableBody"></tbody>
+        </table>
+      </div>
+    </main>
+  </div>
+
+  <div id="bookmarkModal" class="modal" hidden>
+    <div class="modal__backdrop"></div>
+    <div class="modal__content" role="dialog" aria-modal="true" aria-labelledby="modalTitle">
+      <header class="modal__header">
+        <div>
+          <p class="panel__eyebrow" id="formModeLabel">Neues Bookmark</p>
+          <h2 id="modalTitle" class="panel__title">Bookmark pflegen</h2>
+          <p class="panel__subtitle">Titel optional, URL-Template erforderlich. Platzhalter werden für den gewählten Tag aufgelöst.</p>
+        </div>
+        <button class="ghost-btn modal__close" type="button" id="modalCloseBtn" aria-label="Schließen">×</button>
+      </header>
+      <form id="bookmarkForm" class="bookmark-form" autocomplete="off">
+        <label class="field">
+          <span>Titel (optional)</span>
+          <input id="titleInput" type="text" name="title" maxlength="160" placeholder="z.B. Daily Gewinnspielrunde">
+        </label>
+        <label class="field">
+          <span>URL-Template *</span>
+          <input id="urlInput" type="url" name="url_template" maxlength="800" placeholder="https://www.test.de/tag-{{day}}/" required>
+        </label>
+        <div id="urlSuggestionBox" class="suggestion-box" hidden></div>
+        <label class="field">
+          <span>Notiz (optional)</span>
+          <textarea id="notesInput" name="notes" maxlength="800" rows="3" placeholder="Kurze Hinweise oder To-do für diesen Link"></textarea>
+        </label>
+        <label class="field">
+          <span>Marker (optional)</span>
+          <input id="markerInput" type="text" name="marker" maxlength="120" placeholder="z.B. März-Import oder Kampagne A">
+        </label>
+        <div class="form-preview">
+          <div>
+            <p class="form-preview__label">Aufgelöste URL für den gewählten Tag:</p>
+            <a id="previewLink" class="form-preview__link" href="#" target="_blank" rel="noopener">–</a>
+          </div>
+          <div class="form-preview__actions">
+            <button class="secondary-btn" type="button" id="resetBtn">Zurücksetzen</button>
+            <button class="primary-btn" type="submit" id="submitBtn">Speichern</button>
+          </div>
+        </div>
+        <div class="placeholder-help">
+          <p class="placeholder-help__title">Dynamische Platzhalter</p>
+          <ul class="placeholder-help__list">
+            <li><code>{{day}}</code> Tag des Monats (1–31), <code>{{dd}}</code> zweistellig</li>
+            <li><code>{{date}}</code> liefert <code>YYYY-MM-DD</code></li>
+            <li><code>{{mm}}</code> Monat zweistellig, <code>{{yyyy}}</code> Jahr</li>
+            <li><code>{{day+1}}</code> oder <code>{{date-2}}</code> verschieben um Tage</li>
+            <li><code>{{counter:477}}</code> Basiswert + aktueller Tag, z.B. <code>https://www.test.de/sweepstakes/{{counter:477}}/</code></li>
+          </ul>
+        </div>
+        <div id="formStatus" class="form-status" role="status" aria-live="polite"></div>
+      </form>
+    </div>
+  </div>
+
+  <div id="importModal" class="modal" hidden>
+    <div class="modal__backdrop"></div>
+    <div class="modal__content" role="dialog" aria-modal="true" aria-labelledby="importModalTitle">
+      <header class="modal__header">
+        <div>
+          <p class="panel__eyebrow">Masseneingabe</p>
+          <h2 id="importModalTitle" class="panel__title">Viele Bookmarks importieren</h2>
+          <p class="panel__subtitle">Füge hunderte Links gleichzeitig hinzu und vergebe einen gemeinsamen Marker.</p>
+        </div>
+        <button class="ghost-btn modal__close" type="button" id="importCloseBtn" aria-label="Schließen">×</button>
+      </header>
+      <form id="importForm" class="bookmark-form" autocomplete="off">
+        <label class="field">
+          <span>Liste der URL-Templates *</span>
+          <textarea id="importInput" name="import_urls" maxlength="120000" rows="8" placeholder="Jeder Link in eine neue Zeile, z.B. https://example.com/{{date}}/"></textarea>
+        </label>
+        <label class="field">
+          <span>Marker für alle Einträge (optional)</span>
+          <input id="importMarkerInput" type="text" name="import_marker" maxlength="120" placeholder="z.B. Batch März 2024">
+        </label>
+        <p class="import-hint">Doppelte oder ungültige Zeilen werden automatisch übersprungen.</p>
+        <div class="form-preview">
+          <div>
+            <p class="form-preview__label">Filter und Sortierung gelten auch beim Batch-Öffnen.</p>
+          </div>
+          <div class="form-preview__actions">
+            <button class="secondary-btn" type="button" id="importResetBtn">Zurücksetzen</button>
+            <button class="primary-btn" type="submit" id="importSubmitBtn">Import starten</button>
+          </div>
+        </div>
+        <div id="importStatus" class="form-status" role="status" aria-live="polite"></div>
+      </form>
+    </div>
+  </div>
+
+  <script src="daily-bookmarks.js"></script>
+</body>
+</html>
--- a/web/daily-bookmarks.js
+++ b/web/daily-bookmarks.js
--- a/web/index.html
+++ b/web/index.html
@@ -24,6 +24,7 @@
            <a class="site-nav__btn" data-view-target="dashboard" href="dashboard.html">📊 Dashboard</a>
            <a class="site-nav__btn" data-view-target="settings" href="settings.html">⚙️ Einstellungen</a>
            <a class="site-nav__btn" data-view-target="bookmarks" href="bookmarks.html">🔖 Bookmarks</a>
+            <a class="site-nav__btn" href="daily-bookmarks.html">✅ Daily Bookmarks</a>
          </div>
        </div>
      </div>
@@ -84,6 +85,12 @@
                <button class="tab-btn active" data-tab="pending">Offene Beiträge</button>
                <button class="tab-btn" data-tab="all">Alle Beiträge</button>
              </div>
+              <div class="merge-controls" id="mergeControls" hidden>
+                <div class="merge-actions">
+                  <button type="button" class="btn btn-secondary" id="mergeModeToggle">Merge-Modus</button>
+                  <button type="button" class="btn btn-primary" id="mergeSubmitBtn" disabled>Beiträge mergen</button>
+                </div>
+              </div>
              <div class="search-container">
                <label class="search-filter-toggle" for="includeExpiredToggle">
                  <input type="checkbox" id="includeExpiredToggle">
@@ -766,6 +773,17 @@
                    </button>
                  </div>
                </div>
+                <form id="bookmarkQuickForm" class="bookmark-quicksearch" autocomplete="off">
+                  <div class="bookmark-quicksearch__fields">
+                    <label class="bookmark-quicksearch__field">
+                      <span>Einmalige Suche</span>
+                      <input type="text" id="bookmarkQuickQuery" placeholder="Suchbegriff nur öffnen, nicht speichern">
+                    </label>
+                    <button type="submit" class="btn btn-secondary">Sofort suchen</button>
+                  </div>
+                  <p class="bookmark-quicksearch__hint">Öffnet die drei Varianten ohne ein Bookmark anzulegen.</p>
+                  <div id="bookmarkQuickStatus" class="bookmark-status" aria-live="polite" hidden></div>
+                </form>
                <div id="bookmarksList" class="bookmark-list" role="list" aria-live="polite"></div>
                <form id="bookmarkForm" class="bookmark-form" autocomplete="off">
                  <div class="bookmark-form__fields">
--- a/web/style.css
+++ b/web/style.css
@@ -452,6 +452,36 @@ h1 {
  justify-content: flex-end;
 }

+.merge-controls {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+  padding: 0;
+  border: none;
+  background: transparent;
+}
+
+.merge-actions {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  flex-wrap: wrap;
+}
+
+.merge-actions .btn {
+  height: 36px;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  padding: 8px 12px;
+  line-height: 1.1;
+}
+
+#mergeModeToggle.active {
+  background: #0f172a;
+  color: #fff;
+}
+
 .search-filter-toggle {
  display: inline-flex;
  align-items: center;
@@ -631,6 +661,25 @@ h1 {
  flex: 1;
 }

+.merge-select {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  padding: 4px 8px;
+  border: 1px dashed #cbd5e1;
+  border-radius: 10px;
+  background: #f8fafc;
+  color: #0f172a;
+  font-size: 12px;
+  flex-shrink: 0;
+}
+
+.merge-select input {
+  width: 16px;
+  height: 16px;
+  accent-color: #0f172a;
+}
+
 .post-index {
  font-size: 12px;
  color: #6b7280;
@@ -1519,6 +1568,48 @@ h1 {
  margin-bottom: 12px;
 }

+.bookmark-quicksearch {
+  border: 1px solid #e5e7eb;
+  background: #f9fafb;
+  border-radius: 12px;
+  padding: 12px 14px;
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+}
+
+.bookmark-quicksearch__fields {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: flex-end;
+  gap: 12px;
+}
+
+.bookmark-quicksearch__field {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+  flex: 1 1 260px;
+}
+
+.bookmark-quicksearch__field span {
+  font-size: 13px;
+  color: #65676b;
+}
+
+.bookmark-quicksearch__field input {
+  border: 1px solid #d0d3d9;
+  border-radius: 8px;
+  padding: 8px 10px;
+  font-size: 14px;
+}
+
+.bookmark-quicksearch__hint {
+  margin: 0;
+  font-size: 12px;
+  color: #4b5563;
+}
+
 .bookmark-panel__search {
  display: flex;
  flex-direction: column;