Begonnen die Favoriten seite aufzuräumen

public/my_favorites.php

@@ -280,7 +280,7 @@ function renderTrackedSatellitesSection(array $trackedSatellites, bool $oob = fa
 {
     ob_start();
     ?>
-    <div class="card" id="tracked-satellites-section"<?= $oob ? ' hx-swap-oob="outerHTML"' : '' ?>>
+    <div class="card" id="tracked-satellites-section" data-favorites-group="satellites"<?= $oob ? ' hx-swap-oob="outerHTML"' : '' ?>>
         <h2>Meine Satelliten</h2>
         <?php if (empty($trackedSatellites)): ?>
             <p class="hint">Du hast noch keine Satelliten ausgewaehlt.</p>
@@ -337,7 +337,7 @@ function renderTrackedMinorplanetsSection(array $trackedMinorplanets, bool $oob
 {
     ob_start();
     ?>
-    <div class="card" id="tracked-minorplanets-section"<?= $oob ? ' hx-swap-oob="outerHTML"' : '' ?>>
+    <div class="card" id="tracked-minorplanets-section" data-favorites-group="minorplanets"<?= $oob ? ' hx-swap-oob="outerHTML"' : '' ?>>
         <h2>Meine Kleinplaneten</h2>
         <?php if (empty($trackedMinorplanets)): ?>
             <p class="hint">Du hast noch keine Kleinplaneten ausgewaehlt.</p>
@@ -457,7 +457,7 @@ function renderTrackedCometsSection(array $trackedComets, bool $oob = false): st
 {
     ob_start();
     ?>
-    <div class="card" id="tracked-comets-section"<?= $oob ? ' hx-swap-oob="outerHTML"' : '' ?>>
+    <div class="card" id="tracked-comets-section" data-favorites-group="comets"<?= $oob ? ' hx-swap-oob="outerHTML"' : '' ?>>
         <h2>Meine Kometen</h2>
         <?php if (empty($trackedComets)): ?>
             <p class="hint">Du hast noch keine Kometen ausgewaehlt.</p>
@@ -1754,8 +1754,48 @@ $loggedIn = true;
     crossorigin=""
 >
 
+<style>
+.favorites-tabs {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.75rem;
+  margin: 1.25rem 0;
+}
+
+.favorites-tab-button {
+  border: 1px solid rgba(255, 255, 255, 0.16);
+  background: rgba(255, 255, 255, 0.05);
+  color: inherit;
+  border-radius: 999px;
+  padding: 0.7rem 1rem;
+  cursor: pointer;
+  font: inherit;
+}
+
+.favorites-tab-button[aria-selected="true"] {
+  background: rgba(110, 170, 255, 0.2);
+  border-color: rgba(110, 170, 255, 0.5);
+}
+
+.favorites-tab-panel[hidden] {
+  display: none !important;
+}
+
+.favorites-tab-panel {
+  margin-bottom: 1.5rem;
+}
+</style>
+
 <?= renderMessages($successMessage, $errors) ?>
 
+<div class="favorites-tabs" role="tablist" aria-label="Favoriten-Bereiche">
+    <button type="button" class="favorites-tab-button" id="favorites-tab-locations" data-tab-target="favorites-panel-locations" role="tab" aria-selected="true" aria-controls="favorites-panel-locations">Standorte</button>
+    <button type="button" class="favorites-tab-button" id="favorites-tab-satellites" data-tab-target="favorites-group-satellites" role="tab" aria-selected="false" aria-controls="favorites-panel-search" tabindex="-1">Satelliten</button>
+    <button type="button" class="favorites-tab-button" id="favorites-tab-minorplanets" data-tab-target="favorites-group-minorplanets" role="tab" aria-selected="false" aria-controls="favorites-panel-search" tabindex="-1">Kleinplaneten</button>
+    <button type="button" class="favorites-tab-button" id="favorites-tab-comets" data-tab-target="favorites-group-comets" role="tab" aria-selected="false" aria-controls="favorites-panel-search" tabindex="-1">Kometen</button>
+</div>
+
+<section id="favorites-panel-locations" class="favorites-tab-panel" role="tabpanel" aria-labelledby="favorites-tab-locations">
 <div class="grid-2">
     <div class="card" id="locations-section">
         <h2>Standorte</h2>
@@ -1819,7 +1859,7 @@ $loggedIn = true;
         <?php endif; ?>
     </div>
 
-    <div class="card">
+    <div class="card" data-favorites-group="satellites">
         <h2>Standort hinzufuegen</h2>
         <p class="hint mb-md">Suche einen Ort, nutze den Browser-Standort oder klicke direkt in die Karte.</p>
 
@@ -1878,6 +1918,7 @@ $loggedIn = true;
         </form>
     </div>
 </div>
+</section>
 
 <dialog class="admin-dialog" id="editLocationDialog">
     <form method="post" action="" class="admin-dialog-card form-stack favorites-loading-form favorites-loading-form-htmx" data-loading-message="Standort wird aktualisiert..." hx-post="my_favorites.php" hx-target="#favorites-messages" hx-swap="outerHTML">
@@ -1918,8 +1959,9 @@ $loggedIn = true;
     </form>
 </dialog>
 
+<section id="favorites-panel-search" class="favorites-tab-panel" role="tabpanel" aria-labelledby="favorites-tab-search" hidden>
 <div class="grid-2">
-    <div class="card">
+    <div class="card" data-favorites-group="satellites">
         <h2>Satelliten suchen</h2>
         <form method="get" action="" class="favorites-loading-form favorites-loading-form-htmx favorites-search-form" data-loading-message="Satelliten werden gesucht. Das kann kurz dauern..." hx-get="my_favorites.php" hx-target="#satellite-search-results" hx-swap="outerHTML" hx-push-url="false">
             <div class="input-row">
@@ -1979,7 +2021,7 @@ $loggedIn = true;
         </div>
     </div>
 
-    <div class="card">
+    <div class="card" data-favorites-group="minorplanets">
         <h2>Kleinplaneten suchen</h2>
         <form
             method="get"
@@ -2048,7 +2090,7 @@ $loggedIn = true;
         </div>
     </div>
 
-    <div class="card">
+    <div class="card" data-favorites-group="comets">
         <h2>Kometen suchen</h2>
         <form
             method="get"
@@ -2076,9 +2118,11 @@ $loggedIn = true;
         <?= renderCometSearchResults($cometSearchQuery, $cometSearchResults) ?>
     </div>
 </div>
+</section>
 
+<section id="favorites-panel-tracked" class="favorites-tab-panel" role="tabpanel" aria-labelledby="favorites-tab-tracked" hidden>
 <div class="grid-2">
-    <div class="card" id="tracked-satellites-section">
+    <div class="card" id="tracked-satellites-section" data-favorites-group="satellites">
         <h2>Meine Satelliten</h2>
         <?php if (empty($trackedSatellites)): ?>
             <p class="hint">Du hast noch keine Satelliten ausgewählt.</p>
@@ -2127,7 +2171,7 @@ $loggedIn = true;
         <?php endif; ?>
     </div>
 
-    <div class="card" id="tracked-minorplanets-section">
+    <div class="card" id="tracked-minorplanets-section" data-favorites-group="minorplanets">
         <h2>Meine Kleinplaneten</h2>
         <?php if (empty($trackedMinorplanets)): ?>
             <p class="hint">Du hast noch keine Kleinplaneten ausgewählt.</p>
@@ -2178,6 +2222,7 @@ $loggedIn = true;
 
     <?= renderTrackedCometsSection($trackedComets) ?>
 </div>
+</section>
 
 <script src="js/htmx.min.js"></script>
 <script
@@ -2187,6 +2232,76 @@ $loggedIn = true;
 ></script>
 
 <script>
+(function () {
+  const tabButtons = Array.from(document.querySelectorAll('.favorites-tab-button'));
+  const tabPanels = Array.from(document.querySelectorAll('.favorites-tab-panel'));
+  const locationsPanel = document.getElementById('favorites-panel-locations');
+  const searchPanel = document.getElementById('favorites-panel-search');
+  const trackedPanel = document.getElementById('favorites-panel-tracked');
+  const groupCards = Array.from(document.querySelectorAll('[data-favorites-group]'));
+
+  if (tabButtons.length === 0 || tabPanels.length === 0 || !locationsPanel || !searchPanel || !trackedPanel) {
+    return;
+  }
+
+  function activateTab(panelId, focusButton = false) {
+    tabButtons.forEach((button) => {
+      const isActive = button.dataset.tabTarget === panelId;
+      button.setAttribute('aria-selected', isActive ? 'true' : 'false');
+      button.tabIndex = isActive ? 0 : -1;
+      if (isActive && focusButton) {
+        button.focus();
+      }
+    });
+
+    if (panelId === 'favorites-panel-locations') {
+      locationsPanel.hidden = false;
+      searchPanel.hidden = true;
+      trackedPanel.hidden = true;
+      groupCards.forEach((card) => {
+        card.hidden = false;
+      });
+      return;
+    }
+
+    const groupName = panelId.replace('favorites-group-', '');
+    locationsPanel.hidden = true;
+    searchPanel.hidden = false;
+    trackedPanel.hidden = false;
+
+    groupCards.forEach((card) => {
+      card.hidden = card.dataset.favoritesGroup !== groupName;
+    });
+  }
+
+  tabButtons.forEach((button, index) => {
+    button.addEventListener('click', () => {
+      activateTab(button.dataset.tabTarget);
+    });
+
+    button.addEventListener('keydown', (event) => {
+      if (!['ArrowRight', 'ArrowLeft', 'Home', 'End'].includes(event.key)) {
+        return;
+      }
+
+      event.preventDefault();
+
+      let nextIndex = index;
+      if (event.key === 'ArrowRight') {
+        nextIndex = (index + 1) % tabButtons.length;
+      } else if (event.key === 'ArrowLeft') {
+        nextIndex = (index - 1 + tabButtons.length) % tabButtons.length;
+      } else if (event.key === 'Home') {
+        nextIndex = 0;
+      } else if (event.key === 'End') {
+        nextIndex = tabButtons.length - 1;
+      }
+
+      activateTab(tabButtons[nextIndex].dataset.tabTarget, true);
+    });
+  });
+})();
+
 (function () {
   const latInput = document.getElementById('latitude');
   const lonInput = document.getElementById('longitude');