resolve issues with new features

frontend/src/pages/Dashboard.tsx

@@ -26,6 +26,7 @@ import LinksWidget from '../components/dashboard/LinksWidget';
 import BannerWidget from '../components/dashboard/BannerWidget';
 import WidgetGroup from '../components/dashboard/WidgetGroup';
 import { preferencesApi } from '../services/settings';
+import { configApi } from '../services/config';
 import { WidgetKey } from '../constants/widgets';
 
 function Dashboard() {
@@ -44,6 +45,16 @@ function Dashboard() {
     queryFn: preferencesApi.get,
   });
 
+  const { data: externalLinks } = useQuery({
+    queryKey: ['external-links'],
+    queryFn: () => configApi.getExternalLinks(),
+    staleTime: 10 * 60 * 1000,
+  });
+
+  const linkCollections = (externalLinks?.linkCollections ?? []).filter(
+    (c) => c.links.length > 0
+  );
+
   const widgetVisible = (key: WidgetKey) => {
     return preferences?.widgets?.[key] !== false;
   };
@@ -187,15 +198,15 @@ function Dashboard() {
 
           {/* Information Group */}
           <WidgetGroup title="Information" gridColumn="1 / -1">
-            {widgetVisible('links') && (
-              <Fade in={!dataLoading} timeout={600} style={{ transitionDelay: '760ms' }}>
+            {widgetVisible('links') && linkCollections.map((collection, idx) => (
+              <Fade key={collection.id} in={!dataLoading} timeout={600} style={{ transitionDelay: `${760 + idx * 40}ms` }}>
                 <Box>
-                  <LinksWidget />
+                  <LinksWidget collection={collection} />
                 </Box>
               </Fade>
-            )}
+            ))}
 
-            <Fade in={!dataLoading} timeout={600} style={{ transitionDelay: '790ms' }}>
+            <Fade in={!dataLoading} timeout={600} style={{ transitionDelay: `${760 + linkCollections.length * 40}ms` }}>
               <Box>
                 <BannerWidget />
               </Box>