openreader/src/components/HomeContent.tsx
Richard R 60c1540744 refactor(ui): decouple settings modal trigger from modal logic
extract SettingsTrigger component to separate modal open control from SettingsModal.
update HomeContent to manage modal state and pass open/onOpenChange props.
remove redundant trigger button from SettingsModal for improved composability.

removes embedded trigger logic from SettingsModal, enabling external state
management and better integration with various UI layouts. also cleans up
playwright config by centralizing testIgnore for unit tests.
2026-05-30 15:13:15 -06:00

38 lines
1.2 KiB
TypeScript

'use client';
import { useState } from 'react';
import { DocumentList } from '@/components/doclist/DocumentList';
import { SettingsModal, SettingsTrigger } from '@/components/SettingsModal';
import { UserMenu } from '@/components/auth/UserMenu';
const Brand = () => (
<div className="flex items-center gap-2 min-w-0">
{/* eslint-disable-next-line @next/next/no-img-element */}
<img src="/icon.svg" alt="" className="w-5 h-5 shrink-0" aria-hidden="true" />
<h1 className="hidden sm:block text-xs sm:text-sm font-bold truncate text-foreground tracking-tight">
OpenReader
</h1>
</div>
);
export function HomeContent() {
const [settingsOpen, setSettingsOpen] = useState(false);
const appActions = (
<div className="flex flex-col gap-0.5 w-full">
<SettingsTrigger
triggerLabel="Settings"
className="w-full justify-start gap-2 px-2 py-1 text-[12px] border-transparent hover:border-accent"
onOpen={() => setSettingsOpen(true)}
/>
<UserMenu variant="sidebar" />
</div>
);
return (
<div className="w-full h-full">
<DocumentList brand={<Brand />} appActions={appActions} />
<SettingsModal open={settingsOpen} onOpenChange={setSettingsOpen} />
</div>
);
}