refactoring

src/components/DashboardView.js

@@ -1,4 +1,4 @@
-import { useEffect } from 'react';
+import { useEffect, useMemo } from 'react';
 import NotificationPanel from './NotificationPanel';
 
 const DashboardView = ({
@@ -70,6 +70,28 @@ const DashboardView = ({
     ntfyPreviewUrl
   } = notificationProps;
 
+  const sortedStores = useMemo(() => {
+    const list = Array.isArray(stores) ? [...stores] : [];
+    return list.sort((a, b) => {
+      const aId = a?.id != null ? String(a.id) : '';
+      const bId = b?.id != null ? String(b.id) : '';
+      const aInConfig = configMap?.has(aId);
+      const bInConfig = configMap?.has(bId);
+      if (aInConfig !== bInConfig) {
+        return aInConfig ? 1 : -1;
+      }
+      const nameA = (a?.name || '').toLocaleLowerCase('de-DE');
+      const nameB = (b?.name || '').toLocaleLowerCase('de-DE');
+      if (nameA < nameB) {
+        return -1;
+      }
+      if (nameA > nameB) {
+        return 1;
+      }
+      return 0;
+    });
+  }, [stores, configMap]);
+
   return (
     <div className="p-4 max-w-6xl mx-auto bg-white shadow-lg rounded-lg mt-4">
       <h1 className="text-2xl font-bold mb-4 text-center text-gray-800">Foodsharing Pickup Manager</h1>
@@ -153,7 +175,7 @@ const DashboardView = ({
         </button>
         {!availableCollapsed && (
           <div className="max-h-72 overflow-y-auto divide-y divide-gray-100">
-            {stores.map((store) => {
+            {sortedStores.map((store) => {
               const storeId = String(store.id);
               const entry = configMap.get(storeId);
               const isVisible = entry && !entry.hidden;