fix: show proper cog icon for notification button

src/App.js

@@ -101,6 +101,7 @@ function App() {
   const [notificationMessage, setNotificationMessage] = useState('');
   const [notificationError, setNotificationError] = useState('');
   const [notificationPanelOpen, setNotificationPanelOpen] = useState(false);
+  const [copyFeedback, setCopyFeedback] = useState('');
   const minSelectableDate = useMemo(() => startOfDay(new Date()), []);
 
   const weekdays = ['Montag', 'Dienstag', 'Mittwoch', 'Donnerstag', 'Freitag', 'Samstag', 'Sonntag'];
@@ -990,6 +991,36 @@ function App() {
     }
   }, [activeRangePicker, activeRangeEntry]);
 
+  const ntfyPreviewUrl = useMemo(() => {
+    if (
+      !notificationCapabilities.ntfy.enabled ||
+      !notificationCapabilities.ntfy.serverUrl ||
+      !notificationSettings.ntfy.topic
+    ) {
+      return null;
+    }
+    const server = notificationCapabilities.ntfy.serverUrl.replace(/\/+$/, '');
+    if (!server) {
+      return null;
+    }
+    const sanitizedTopic = notificationSettings.ntfy.topic.trim().replace(/^-+|-+$/g, '');
+    if (!sanitizedTopic) {
+      return null;
+    }
+    const prefix = (notificationCapabilities.ntfy.topicPrefix || '').replace(/^-+|-+$/g, '');
+    const separator = prefix && sanitizedTopic ? '-' : '';
+    const slug = `${prefix}${separator}${sanitizedTopic}` || sanitizedTopic || prefix;
+    if (!slug) {
+      return null;
+    }
+    return `${server}/${slug}`;
+  }, [
+    notificationCapabilities.ntfy.enabled,
+    notificationCapabilities.ntfy.serverUrl,
+    notificationCapabilities.ntfy.topicPrefix,
+    notificationSettings.ntfy.topic
+  ]);
+
   const handleStoreSelection = async (store) => {
     const storeId = String(store.id);
     const existing = configMap.get(storeId);
@@ -1115,6 +1146,33 @@ function App() {
     }
   };
 
+  const copyToClipboard = async (text) => {
+    if (!text) {
+      return;
+    }
+    setCopyFeedback('');
+    try {
+      if (navigator?.clipboard?.writeText) {
+        await navigator.clipboard.writeText(text);
+      } else {
+        const tempInput = document.createElement('textarea');
+        tempInput.value = text;
+        tempInput.style.position = 'fixed';
+        tempInput.style.top = '-9999px';
+        document.body.appendChild(tempInput);
+        tempInput.focus();
+        tempInput.select();
+        document.execCommand('copy');
+        document.body.removeChild(tempInput);
+      }
+      setCopyFeedback('Link kopiert!');
+      setTimeout(() => setCopyFeedback(''), 2000);
+    } catch (err) {
+      setCopyFeedback(`Kopieren fehlgeschlagen: ${err.message}`);
+      setTimeout(() => setCopyFeedback(''), 3000);
+    }
+  };
+
   const handleAdminSettingChange = (field, value, isNumber = false) => {
     setAdminSettings((prev) => {
       if (!prev) {
@@ -1390,70 +1448,6 @@ function App() {
         </div>
       </div>
 
-      <div className="mb-6 border border-gray-200 rounded-lg overflow-hidden">
-        <button
-          onClick={() => setAvailableCollapsed((prev) => !prev)}
-          className="w-full flex items-center justify-between px-4 py-3 bg-gray-50 hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-blue-300"
-        >
-          <span className="font-semibold text-gray-800">Verfügbare Betriebe ({stores.length})</span>
-          <svg
-            xmlns="http://www.w3.org/2000/svg"
-            className={`h-5 w-5 text-gray-600 transition-transform ${availableCollapsed ? '' : 'rotate-180'}`}
-            fill="none"
-            viewBox="0 0 24 24"
-            stroke="currentColor"
-          >
-            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 9l-7 7-7-7" />
-          </svg>
-        </button>
-        {!availableCollapsed && (
-          <div className="max-h-96 overflow-y-auto p-4 grid grid-cols-1 md:grid-cols-2 gap-3 bg-white">
-            {stores.length === 0 && (
-              <div className="text-sm text-gray-500">Noch keine Betriebe geladen. Aktualisiere nach dem Login.</div>
-            )}
-            {stores.map((store) => {
-              const storeId = String(store.id);
-              const entry = configMap.get(storeId);
-              const isVisible = entry && !entry.hidden;
-              const needsRestore = entry && entry.hidden;
-              const blockedByNoPickups = store.hasPickupSlots === false;
-              let statusLabel = 'Hinzufügen';
-              let statusClass = 'text-blue-600';
-              if (isVisible) {
-                statusLabel = 'Bereits in Konfiguration';
-                statusClass = 'text-gray-500';
-              } else if (needsRestore) {
-                statusLabel = 'Ausgeblendet – erneut hinzufügen';
-                statusClass = 'text-amber-600';
-              }
-              if (blockedByNoPickups) {
-                statusLabel = 'Keine Pickups – automatisch verborgen';
-                statusClass = 'text-red-600';
-              }
-              return (
-                <button
-                  key={storeId}
-                  onClick={() => handleStoreSelection(store)}
-                  disabled={isVisible}
-                  className={`text-left border rounded p-3 shadow-sm transition focus:outline-none focus:ring-2 focus:ring-blue-300 ${
-                    isVisible ? 'bg-gray-50 cursor-not-allowed opacity-70 border-gray-200' : 'bg-white hover:border-blue-400'
-                  }`}
-                >
-                  <p className="font-semibold text-gray-800">{store.name}</p>
-                  <p className="text-xs text-gray-500">ID: {storeId}</p>
-                  {store.city && (
-                    <p className="text-xs text-gray-500">
-                      {store.zip || ''} {store.city}
-                    </p>
-                  )}
-                  <p className={`text-xs mt-2 ${statusClass}`}>{statusLabel}</p>
-                </button>
-              );
-            })}
-          </div>
-        )}
-      </div>
-
       {notificationPanelOpen && (
       <div className="mb-6 border border-gray-200 rounded-lg p-4 bg-gray-50">
         {notificationError && (
@@ -1513,6 +1507,29 @@ function App() {
                     Präfix: {notificationCapabilities.ntfy.topicPrefix} (Bindestrich wird automatisch ergänzt)
                   </p>
                 )}
+                {ntfyPreviewUrl && (
+                  <div className="flex items-center gap-2 text-xs text-gray-600">
+                    <a
+                      href={ntfyPreviewUrl}
+                      target="_blank"
+                      rel="noopener noreferrer"
+                      className="text-blue-600 hover:text-blue-800 break-all"
+                    >
+                      {ntfyPreviewUrl}
+                    </a>
+                    <button
+                      type="button"
+                      onClick={() => copyToClipboard(ntfyPreviewUrl)}
+                      className="border border-gray-300 rounded px-2 py-0.5 text-gray-600 hover:text-blue-700 hover:border-blue-500 focus:outline-none focus:ring-1 focus:ring-blue-400"
+                      title="In Zwischenablage kopieren"
+                    >
+                      Kopieren
+                    </button>
+                  </div>
+                )}
+                {copyFeedback && (
+                  <p className="text-xs text-green-600">{copyFeedback}</p>
+                )}
                 <button
                   type="button"
                   onClick={() => sendNotificationTest('ntfy')}
@@ -1597,6 +1614,71 @@ function App() {
       </div>
       )}
 
+      <div className="mb-6 border border-gray-200 rounded-lg overflow-hidden">
+        <button
+          onClick={() => setAvailableCollapsed((prev) => !prev)}
+          className="w-full flex items-center justify-between px-4 py-3 bg-gray-50 hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-blue-300"
+        >
+          <span className="font-semibold text-gray-800">Verfügbare Betriebe ({stores.length})</span>
+          <svg
+            xmlns="http://www.w3.org/2000/svg"
+            className={`h-5 w-5 text-gray-600 transition-transform ${availableCollapsed ? '' : 'rotate-180'}`}
+            fill="none"
+            viewBox="0 0 24 24"
+            stroke="currentColor"
+          >
+            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 9l-7 7-7-7" />
+          </svg>
+        </button>
+        {!availableCollapsed && (
+          <div className="max-h-96 overflow-y-auto p-4 grid grid-cols-1 md:grid-cols-2 gap-3 bg-white">
+            {stores.length === 0 && (
+              <div className="text-sm text-gray-500">Noch keine Betriebe geladen. Aktualisiere nach dem Login.</div>
+            )}
+            {stores.map((store) => {
+              const storeId = String(store.id);
+              const entry = configMap.get(storeId);
+              const isVisible = entry && !entry.hidden;
+              const needsRestore = entry && entry.hidden;
+              const blockedByNoPickups = store.hasPickupSlots === false;
+              let statusLabel = 'Hinzufügen';
+              let statusClass = 'text-blue-600';
+              if (isVisible) {
+                statusLabel = 'Bereits in Konfiguration';
+                statusClass = 'text-gray-500';
+              } else if (needsRestore) {
+                statusLabel = 'Ausgeblendet – erneut hinzufügen';
+                statusClass = 'text-amber-600';
+              }
+              if (blockedByNoPickups) {
+                statusLabel = 'Keine Pickups – automatisch verborgen';
+                statusClass = 'text-red-600';
+              }
+              return (
+                <button
+                  key={storeId}
+                  onClick={() => handleStoreSelection(store)}
+                  disabled={isVisible}
+                  className={`text-left border rounded p-3 shadow-sm transition focus:outline-none focus:ring-2 focus:ring-blue-300 ${
+                    isVisible ? 'bg-gray-50 cursor-not-allowed opacity-70 border-gray-200' : 'bg-white hover:border-blue-400'
+                  }`}
+                >
+                  <p className="font-semibold text-gray-800">{store.name}</p>
+                  <p className="text-xs text-gray-500">ID: {storeId}</p>
+                  {store.city && (
+                    <p className="text-xs text-gray-500">
+                      {store.zip || ''} {store.city}
+                    </p>
+                  )}
+                  <p className={`text-xs mt-2 ${statusClass}`}>{statusLabel}</p>
+                </button>
+              );
+            })}
+          </div>
+        )}
+      </div>
+      )}
+
       <div className="flex justify-center mb-4 space-x-4">
         <a
           href="https://foodsharing.de/?page=dashboard"