fix: respect dashboard content visibility settings (#4975)

web/default/src/features/dashboard/components/overview/overview-dashboard.tsx

@@ -52,7 +52,10 @@ import {
 } from '@/components/page-transition'
 import { fetchTokenKey, getApiKeys } from '@/features/keys/api'
 import type { ApiKey } from '@/features/keys/types'
-import { useApiInfo } from '../../hooks/use-status-data'
+import {
+  useApiInfo,
+  useDashboardContentVisibility,
+} from '../../hooks/use-status-data'
 import { AnnouncementsPanel } from './announcements-panel'
 import { ApiInfoPanel } from './api-info-panel'
 import { FAQPanel } from './faq-panel'
@@ -423,6 +426,12 @@ export function OverviewDashboard() {
   const { t } = useTranslation()
   const user = useAuthStore((state) => state.auth.user)
   const { items: apiInfoItems } = useApiInfo()
+  const {
+    apiInfo: showApiInfoPanel,
+    announcements: showAnnouncementsPanel,
+    faq: showFAQPanel,
+    uptimeKuma: showUptimePanel,
+  } = useDashboardContentVisibility()
   const [manualSetupGuideExpanded, setManualSetupGuideExpanded] = useState<
     boolean | null
   >(() => getSavedSetupGuideExpanded())
@@ -574,6 +583,9 @@ export function OverviewDashboard() {
   const completedStepCount = startSteps.filter((step) => step.completed).length
   const setupComplete = completedStepCount === startSteps.length
   const setupGuideExpanded = manualSetupGuideExpanded ?? !setupComplete
+  const showLeftContentPanels =
+    isAdmin || showApiInfoPanel || showAnnouncementsPanel || showFAQPanel
+  const showContentPanels = showLeftContentPanels || showUptimePanel
 
   const handleSetupGuideToggle = () => {
     const nextExpanded = !setupGuideExpanded
@@ -715,27 +727,52 @@ export function OverviewDashboard() {
 
       <SummaryCards />
 
-      <CardStaggerContainer className='grid grid-cols-1 gap-4 xl:grid-cols-[minmax(0,1fr)_22rem]'>
+      {showContentPanels && (
-        <div className='grid min-w-0 grid-cols-1 gap-4 lg:grid-cols-2'>
+        <CardStaggerContainer
-          {isAdmin && (
+          className={cn(
-            <CardStaggerItem className='lg:col-span-2'>
+            'grid grid-cols-1 gap-4',
-              <PerformanceHealthPanel />
+            showLeftContentPanels &&
+              showUptimePanel &&
+              'xl:grid-cols-[minmax(0,1fr)_22rem]'
+          )}
+        >
+          {showLeftContentPanels && (
+            <div
+              className={cn(
+                'grid min-w-0 grid-cols-1 gap-4',
+                (showApiInfoPanel || showAnnouncementsPanel || showFAQPanel) &&
+                  'lg:grid-cols-2'
+              )}
+            >
+              {isAdmin && (
+                <CardStaggerItem className='lg:col-span-2'>
+                  <PerformanceHealthPanel />
+                </CardStaggerItem>
+              )}
+              {showApiInfoPanel && (
+                <CardStaggerItem>
+                  <ApiInfoPanel />
+                </CardStaggerItem>
+              )}
+              {showAnnouncementsPanel && (
+                <CardStaggerItem>
+                  <AnnouncementsPanel />
+                </CardStaggerItem>
+              )}
+              {showFAQPanel && (
+                <CardStaggerItem>
+                  <FAQPanel />
+                </CardStaggerItem>
+              )}
+            </div>
+          )}
+          {showUptimePanel && (
+            <CardStaggerItem>
+              <UptimePanel />
             </CardStaggerItem>
           )}
-          <CardStaggerItem>
+        </CardStaggerContainer>
-            <ApiInfoPanel />
+      )}
-          </CardStaggerItem>
-          <CardStaggerItem>
-            <AnnouncementsPanel />
-          </CardStaggerItem>
-          <CardStaggerItem>
-            <FAQPanel />
-          </CardStaggerItem>
-        </div>
-        <CardStaggerItem>
-          <UptimePanel />
-        </CardStaggerItem>
-      </CardStaggerContainer>
     </div>
   )
 }

web/default/src/features/dashboard/hooks/use-status-data.ts

@@ -27,7 +27,7 @@ export function useStatusData<T = unknown>(
   dataKey: string
 ): { items: T[]; loading: boolean } {
   const { status, loading } = useStatus()
-  const enabled = status?.[enabledKey] ?? false
+  const enabled = status ? status[enabledKey] !== false : false
   const items = (enabled ? status?.[dataKey] || [] : []) as T[]
 
   return { items, loading }
@@ -56,3 +56,18 @@ export function useAnnouncements() {
 export function useFAQ() {
   return useStatusData<FAQItem>('faq_enabled', 'faq')
 }
+
+/**
+ * Get dashboard content panel visibility
+ */
+export function useDashboardContentVisibility() {
+  const { status } = useStatus()
+  const hasStatus = Boolean(status)
+
+  return {
+    apiInfo: hasStatus && status?.api_info_enabled !== false,
+    announcements: hasStatus && status?.announcements_enabled !== false,
+    faq: hasStatus && status?.faq_enabled !== false,
+    uptimeKuma: hasStatus && status?.uptime_kuma_enabled !== false,
+  }
+}