reworked site

2025-11-16 13:58:32 +01:00
parent 274762c825
commit 898f2e0b58
3 changed files with 115 additions and 83 deletions
--- a/web/app.js
+++ b/web/app.js
@@ -245,6 +245,7 @@ const DEFAULT_SORT_SETTINGS = { mode: 'created', direction: 'desc' };
 const BOOKMARKS_BASE_URL = 'https://www.facebook.com/search/top';
 const BOOKMARK_WINDOW_DAYS = 28;
 const BOOKMARK_SUFFIXES = ['Gewinnspiel', 'gewinnen', 'verlosen'];
+const BOOKMARK_PREFS_KEY = 'trackerBookmarkPreferences';

 function initializeFocusParams() {
  try {
@@ -289,6 +290,45 @@ let bookmarkSearchTerm = '';
 let bookmarkSortMode = 'recent';
 let bookmarkSortDirection = 'desc';

+function loadBookmarkPreferences() {
+  try {
+    const stored = localStorage.getItem(BOOKMARK_PREFS_KEY);
+    if (stored) {
+      const parsed = JSON.parse(stored);
+      if (parsed && typeof parsed === 'object') {
+        return parsed;
+      }
+    }
+  } catch (error) {
+    console.warn('Konnte Bookmark-Einstellungen nicht laden:', error);
+  }
+  return {};
+}
+
+function persistBookmarkPreferences() {
+  try {
+    const payload = {
+      searchTerm: bookmarkSearchTerm,
+      sortMode: bookmarkSortMode,
+      sortDirection: bookmarkSortDirection
+    };
+    localStorage.setItem(BOOKMARK_PREFS_KEY, JSON.stringify(payload));
+  } catch (error) {
+    console.warn('Konnte Bookmark-Einstellungen nicht speichern:', error);
+  }
+}
+
+const storedBookmarkPrefs = loadBookmarkPreferences();
+if (storedBookmarkPrefs.searchTerm && typeof storedBookmarkPrefs.searchTerm === 'string') {
+  bookmarkSearchTerm = storedBookmarkPrefs.searchTerm.trim();
+}
+if (storedBookmarkPrefs.sortMode === 'label' || storedBookmarkPrefs.sortMode === 'recent') {
+  bookmarkSortMode = storedBookmarkPrefs.sortMode;
+}
+if (storedBookmarkPrefs.sortDirection === 'asc' || storedBookmarkPrefs.sortDirection === 'desc') {
+  bookmarkSortDirection = storedBookmarkPrefs.sortDirection;
+}
+
 const INITIAL_POST_LIMIT = 10;
 const POST_LOAD_INCREMENT = 10;
 const tabVisibleCounts = {
@@ -549,12 +589,6 @@ function filterBookmarksBySearch(list) {
  });
 }

-function getRecentBookmarks(list) {
-  const recent = sortBookmarksByRecency(list);
-  const RECENT_LIMIT = 5;
-  return recent.filter((bookmark) => bookmark.last_clicked_at).slice(0, RECENT_LIMIT);
-}
-
 function updateBookmarkSortDirectionUI() {
  if (!bookmarkSortDirectionToggle) {
    return;
@@ -1025,63 +1059,13 @@ function renderBookmarks() {

  const filteredBookmarks = filterBookmarksBySearch(dynamicBookmarks);
  const sortedForAll = sortBookmarksForDisplay(filteredBookmarks);
-  const recent = bookmarkSearchTerm ? [] : getRecentBookmarks(filteredBookmarks);

-  const sections = [];
-
-  if (recent.length) {
-    sections.push({
-      id: 'recent',
-      title: 'Zuletzt verwendet',
-      items: recent
-    });
-  }
-
-  const allItems = bookmarkSearchTerm ? sortedForAll : [staticDefault, ...sortedForAll];
-  const allTitle = bookmarkSearchTerm
-    ? `Suchergebnisse${filteredBookmarks.length ? ` (${filteredBookmarks.length})` : ''}`
+  const displayList = bookmarkSearchTerm ? sortedForAll : [staticDefault, ...sortedForAll];
+  const titleText = bookmarkSearchTerm
+    ? (filteredBookmarks.length ? `Suchergebnisse (${filteredBookmarks.length})` : 'Keine Treffer')
    : 'Alle Bookmarks';

-  sections.push({
-    id: bookmarkSearchTerm ? 'search' : 'all',
-    title: allTitle,
-    items: allItems
-  });
-
-  let renderedAnySection = false;
-
-  sections.forEach((section) => {
-    if (!section.items.length) {
-      return;
-    }
-
-    renderedAnySection = true;
-    const sectionElement = document.createElement('section');
-    sectionElement.className = 'bookmark-section';
-    sectionElement.dataset.section = section.id;
-
-    const header = document.createElement('header');
-    header.className = 'bookmark-section__header';
-
-    const title = document.createElement('h3');
-    title.className = 'bookmark-section__title';
-    title.textContent = section.title;
-    header.appendChild(title);
-
-    sectionElement.appendChild(header);
-
-    const list = document.createElement('div');
-    list.className = 'bookmark-section__list';
-
-    section.items.forEach((bookmark) => {
-      list.appendChild(createBookmarkRow(bookmark));
-    });
-
-    sectionElement.appendChild(list);
-    bookmarksList.appendChild(sectionElement);
-  });
-
-  if (!renderedAnySection) {
+  if (!displayList.length) {
    const empty = document.createElement('div');
    empty.className = 'bookmark-empty';
    if (bookmarkSearchTerm) {
@@ -1090,7 +1074,29 @@ function renderBookmarks() {
      empty.textContent = 'Noch keine Bookmarks gespeichert.';
    }
    bookmarksList.appendChild(empty);
+    return;
  }
+
+  const sectionElement = document.createElement('section');
+  sectionElement.className = 'bookmark-section';
+  sectionElement.dataset.section = bookmarkSearchTerm ? 'search' : 'all';
+
+  const headerEl = document.createElement('header');
+  headerEl.className = 'bookmark-section__header';
+  const titleEl = document.createElement('h3');
+  titleEl.className = 'bookmark-section__title';
+  titleEl.textContent = titleText;
+  headerEl.appendChild(titleEl);
+  sectionElement.appendChild(headerEl);
+
+  const list = document.createElement('div');
+  list.className = 'bookmark-section__list';
+  displayList.forEach((bookmark) => {
+    list.appendChild(createBookmarkRow(bookmark));
+  });
+
+  sectionElement.appendChild(list);
+  bookmarksList.appendChild(sectionElement);
 }

 function resetBookmarkForm() {
@@ -1277,20 +1283,24 @@ function initializeBookmarks() {
    bookmarkForm.addEventListener('submit', handleBookmarkSubmit);
  }

-  if (bookmarkSearchInput) {
+if (bookmarkSearchInput) {
+    bookmarkSearchInput.value = bookmarkSearchTerm;
    bookmarkSearchInput.addEventListener('input', () => {
      bookmarkSearchTerm = typeof bookmarkSearchInput.value === 'string'
        ? bookmarkSearchInput.value.trim()
        : '';
+      persistBookmarkPreferences();
      renderBookmarks();
    });
  }

  if (bookmarkSortSelect) {
+    bookmarkSortSelect.value = bookmarkSortMode;
    bookmarkSortSelect.addEventListener('change', () => {
      const value = bookmarkSortSelect.value;
      if (value === 'label' || value === 'recent') {
        bookmarkSortMode = value;
+        persistBookmarkPreferences();
        renderBookmarks();
      }
    });
@@ -1300,6 +1310,7 @@ function initializeBookmarks() {
    bookmarkSortDirectionToggle.addEventListener('click', () => {
      bookmarkSortDirection = bookmarkSortDirection === 'desc' ? 'asc' : 'desc';
      updateBookmarkSortDirectionUI();
+      persistBookmarkPreferences();
      renderBookmarks();
    });
    updateBookmarkSortDirectionUI();
--- a/web/index.html
+++ b/web/index.html
@@ -18,13 +18,12 @@
        <div class="header-main">
          <div>
            <h1>📋 Post Tracker</h1>
-            <p class="site-header__subtitle">Alle Bereiche ohne Seitenwechsel erreichen</p>
          </div>
-          <div class="header-links site-nav">
-            <button type="button" class="btn btn-secondary" data-view-target="posts">Beiträge</button>
-            <button type="button" class="btn btn-secondary" data-view-target="dashboard">Dashboard</button>
-            <button type="button" class="btn btn-secondary" data-view-target="settings">⚙️ Einstellungen</button>
-            <button type="button" class="btn btn-secondary" data-view-target="bookmarks">🔖 Bookmarks</button>
+          <div class="site-nav">
+            <button type="button" class="site-nav__btn" data-view-target="posts">Beiträge</button>
+            <button type="button" class="site-nav__btn" data-view-target="dashboard">Dashboard</button>
+            <button type="button" class="site-nav__btn" data-view-target="settings">⚙️ Einstellungen</button>
+            <button type="button" class="site-nav__btn" data-view-target="bookmarks">🔖 Bookmarks</button>
          </div>
        </div>
      </div>
@@ -34,7 +33,7 @@
        <div class="container">
            <div class="page-toolbar">
              <div class="page-toolbar__title">
-                <h1>📋 Post Tracker</h1>
+                <h2>Beiträge</h2>
                <button type="button" class="btn btn-primary" id="openManualPostModalBtn">Beitrag hinzufügen</button>
              </div>
              <div class="header-controls">
@@ -151,9 +150,6 @@
      <section id="view-dashboard" class="app-view" data-view="dashboard">
        <div class="container">
            <div class="page-toolbar page-toolbar--dashboard">
-              <div class="page-toolbar__title">
-                <h1>📊 Dashboard</h1>
-              </div>
              <div class="header-controls">
                <div class="control-group">
                  <label for="timeFilter">Zeitraum:</label>
@@ -591,10 +587,9 @@
        <div class="container">
            <main class="bookmark-page">
              <section class="bookmark-page__panel">
-                <div class="bookmark-panel__header">
-                  <h2 class="bookmark-panel__title">🔖 Bookmarks</h2>
-                  <a href="index.html" class="btn btn-secondary">Zurück zum Dashboard</a>
-                </div>
+          <div class="bookmark-panel__header">
+            <h2 class="bookmark-panel__title">🔖 Bookmarks</h2>
+          </div>
                <p class="bookmark-page__lead">Über die Bookmarks kannst du auf einen Schlag mehrere relevante Suchanfragen öffnen.</p>
                <div class="bookmark-panel__toolbar">
                  <label class="bookmark-panel__search">
--- a/web/style.css
+++ b/web/style.css
@@ -77,17 +77,43 @@ header {
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
-}
-
-.site-nav .btn {
+  background: #f3f4f6;
+  padding: 6px;
  border-radius: 999px;
-  padding-inline: 20px;
 }

-.site-nav .btn.nav-active {
-  background: #111827;
-  color: #ffffff;
-  border-color: #111827;
+.site-nav {
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
+  background: rgba(255, 255, 255, 0.6);
+  border-radius: 999px;
+  padding: 6px;
+  backdrop-filter: blur(8px);
+  border: 1px solid rgba(148, 163, 184, 0.25);
+}
+
+.site-nav__btn {
+  border-radius: 999px;
+  padding: 10px 18px;
+  border: none;
+  background: transparent;
+  font-weight: 600;
+  color: #0f172a;
+  cursor: pointer;
+  transition: all 0.2s ease;
+  box-shadow: none;
+}
+
+.site-nav__btn:hover {
+  background: rgba(15, 23, 42, 0.05);
+  transform: translateY(-1px);
+}
+
+.site-nav__btn.nav-active {
+  background: linear-gradient(135deg, #2563eb, #7c3aed);
+  color: white;
+  box-shadow: 0 12px 30px rgba(37, 99, 235, 0.35);
 }

 .header-controls {