fix: respect dashboard content visibility settings (#4975)
This commit is contained in:
parent
0d4b25795a
commit
2d1ca15384
@ -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]'>
|
||||
<div className='grid min-w-0 grid-cols-1 gap-4 lg:grid-cols-2'>
|
||||
{isAdmin && (
|
||||
<CardStaggerItem className='lg:col-span-2'>
|
||||
<PerformanceHealthPanel />
|
||||
{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 && (
|
||||
<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>
|
||||
<ApiInfoPanel />
|
||||
</CardStaggerItem>
|
||||
<CardStaggerItem>
|
||||
<AnnouncementsPanel />
|
||||
</CardStaggerItem>
|
||||
<CardStaggerItem>
|
||||
<FAQPanel />
|
||||
</CardStaggerItem>
|
||||
</div>
|
||||
<CardStaggerItem>
|
||||
<UptimePanel />
|
||||
</CardStaggerItem>
|
||||
</CardStaggerContainer>
|
||||
</CardStaggerContainer>
|
||||
)}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
@ -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,
|
||||
}
|
||||
}
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user