diff --git a/web/default/src/features/dashboard/components/overview/overview-dashboard.tsx b/web/default/src/features/dashboard/components/overview/overview-dashboard.tsx index df5d1b53..983c84de 100644 --- a/web/default/src/features/dashboard/components/overview/overview-dashboard.tsx +++ b/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() { - -
- {isAdmin && ( - - + {showContentPanels && ( + + {showLeftContentPanels && ( +
+ {isAdmin && ( + + + + )} + {showApiInfoPanel && ( + + + + )} + {showAnnouncementsPanel && ( + + + + )} + {showFAQPanel && ( + + + + )} +
+ )} + {showUptimePanel && ( + + )} - - - - - - - - - -
- - - -
+ + )} ) } diff --git a/web/default/src/features/dashboard/hooks/use-status-data.ts b/web/default/src/features/dashboard/hooks/use-status-data.ts index d9a9c40b..8f10e8a5 100644 --- a/web/default/src/features/dashboard/hooks/use-status-data.ts +++ b/web/default/src/features/dashboard/hooks/use-status-data.ts @@ -27,7 +27,7 @@ export function useStatusData( 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('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, + } +}