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

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

@@ -27,7 +27,7 @@ export function useStatusData<T = unknown>(
   dataKey: string
   dataKey: string
 ): { items: T[]; loading: boolean } {
 ): { items: T[]; loading: boolean } {
   const { status, loading } = useStatus()
   const { status, loading } = useStatus()
-  const enabled = status?.[enabledKey] ?? false
+  const enabled = status ? status[enabledKey] !== false : false
   const items = (enabled ? status?.[dataKey] || [] : []) as T[]
   const items = (enabled ? status?.[dataKey] || [] : []) as T[]
 
 
   return { items, loading }
   return { items, loading }
@@ -56,3 +56,18 @@ export function useAnnouncements() {
 export function useFAQ() {
 export function useFAQ() {
   return useStatusData<FAQItem>('faq_enabled', 'faq')
   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,
+  }
+}