GKaszewski/k-notes
1
0
Fork 0
Code Issues 2 Pull Requests Actions Packages Projects Releases Wiki Activity

feat: conditionally display data management features in settings dialog based on user context

Browse Source
This commit is contained in:
Gabriel Kaszewski
2025-12-23 10:48:49 +01:00
parent b6d4f49fd9
commit 3a19995008
4 changed files with 70 additions and 66 deletions
Download Patch File Download Diff File Expand all files Collapse all files

54
k-notes-frontend/src/components/app-sidebar.tsx
View File

@@ -32,35 +32,35 @@ export function AppSidebar() {
return (
<>
<Sidebar collapsible="icon">
<SidebarContent>
<SidebarGroup>
<SidebarGroupLabel>K-Notes</SidebarGroupLabel>
<SidebarGroupContent>
<SidebarMenu>
{items.map((item) => (
<SidebarMenuItem key={item.title}>
<SidebarMenuButton asChild isActive={location.pathname === item.url} tooltip={item.title}>
<Link to={item.url}>
<item.icon />
<span>{item.title}</span>
</Link>
<Sidebar collapsible="icon">
<SidebarContent>
<SidebarGroup>
<SidebarGroupLabel>K-Notes</SidebarGroupLabel>
<SidebarGroupContent>
<SidebarMenu>
{items.map((item) => (
<SidebarMenuItem key={item.title}>
<SidebarMenuButton asChild isActive={location.pathname === item.url} tooltip={item.title}>
<Link to={item.url}>
<item.icon />
<span>{item.title}</span>
</Link>
</SidebarMenuButton>
</SidebarMenuItem>
))}
<SidebarMenuItem>
<SidebarMenuButton onClick={() => setSettingsOpen(true)} tooltip="Settings">
<Settings />
<span>Settings</span>
</SidebarMenuButton>
</SidebarMenuItem>
))}
<SidebarMenuItem>
<SidebarMenuButton onClick={() => setSettingsOpen(true)} tooltip="Settings">
<Settings />
<span>Settings</span>
</SidebarMenuButton>
</SidebarMenuItem>
</SidebarMenu>
</SidebarGroupContent>
</SidebarGroup>
</SidebarContent>
</Sidebar>
<SettingsDialog open={settingsOpen} onOpenChange={setSettingsOpen} />
</SidebarMenu>
</SidebarGroupContent>
</SidebarGroup>
</SidebarContent>
</Sidebar>
<SettingsDialog open={settingsOpen} onOpenChange={setSettingsOpen} dataManagementEnabled />
</>
)
}

52
k-notes-frontend/src/components/settings-dialog.tsx
View File

@@ -10,9 +10,10 @@ import { Separator } from "@/components/ui/separator";
interface SettingsDialogProps {
open: boolean;
onOpenChange: (open: boolean) => void;
dataManagementEnabled: boolean;
}
export function SettingsDialog({ open, onOpenChange }: SettingsDialogProps) {
export function SettingsDialog({ open, onOpenChange, dataManagementEnabled }: SettingsDialogProps) {
const [url, setUrl] = useState("http://localhost:3000");
useEffect(() => {
@@ -97,31 +98,34 @@ export function SettingsDialog({ open, onOpenChange }: SettingsDialogProps) {
</div>
</div>
<Separator className="my-2" />
{dataManagementEnabled && <>
<Separator className="my-2" />
<div className="py-4 space-y-4">
<div className="flex flex-col space-y-2">
<h4 className="font-medium leading-none">Data Management</h4>
<p className="text-sm text-muted-foreground">
Export your notes for backup or import from a JSON file.
</p>
<div className="py-4 space-y-4">
<div className="flex flex-col space-y-2">
<h4 className="font-medium leading-none">Data Management</h4>
<p className="text-sm text-muted-foreground">
Export your notes for backup or import from a JSON file.
</p>
</div>
<div className="flex gap-4">
<Button variant="outline" onClick={handleExport}>
Export Data
</Button>
<Button variant="outline" onClick={() => fileInputRef.current?.click()}>
Import Data
</Button>
<input
type="file"
ref={fileInputRef}
className="hidden"
accept=".json"
onChange={handleImport}
/>
</div>
</div>
<div className="flex gap-4">
<Button variant="outline" onClick={handleExport}>
Export Data
</Button>
<Button variant="outline" onClick={() => fileInputRef.current?.click()}>
Import Data
</Button>
<input
type="file"
ref={fileInputRef}
className="hidden"
accept=".json"
onChange={handleImport}
/>
</div>
</div>
</>}
<DialogFooter>
<Button onClick={handleSave}>Save changes</Button>
</DialogFooter>

8
k-notes-frontend/src/pages/login.tsx
View File

@@ -48,9 +48,9 @@ export default function LoginPage() {
return (
<div className="flex min-h-screen items-center justify-center bg-gray-50 dark:bg-gray-950 p-4 relative">
<div className="absolute top-4 right-4">
<Button variant="ghost" size="icon" onClick={() => setSettingsOpen(true)}>
<Settings className="h-5 w-5" />
</Button>
<Button variant="ghost" size="icon" onClick={() => setSettingsOpen(true)}>
<Settings className="h-5 w-5" />
</Button>
</div>
<Card className="w-full max-w-md">
<CardHeader>
@@ -103,7 +103,7 @@ export default function LoginPage() {
</p>
</CardFooter>
</Card>
<SettingsDialog open={settingsOpen} onOpenChange={setSettingsOpen} />
<SettingsDialog open={settingsOpen} onOpenChange={setSettingsOpen} dataManagementEnabled={false} />
</div>
);
}

16
k-notes-frontend/src/pages/register.tsx
View File

@@ -43,9 +43,9 @@ export default function RegisterPage() {
}, {
onError: (error: any) => {
if (error instanceof ApiError) {
toast.error(error.message);
toast.error(error.message);
} else {
toast.error("Failed to register");
toast.error("Failed to register");
}
},
});
@@ -55,10 +55,10 @@ export default function RegisterPage() {
return (
<div className="flex min-h-screen items-center justify-center bg-gray-50 dark:bg-gray-950 p-4 relative">
<div className="absolute top-4 right-4">
<Button variant="ghost" size="icon" onClick={() => setSettingsOpen(true)}>
<Settings className="h-5 w-5" />
</Button>
<div className="absolute top-4 right-4">
<Button variant="ghost" size="icon" onClick={() => setSettingsOpen(true)}>
<Settings className="h-5 w-5" />
</Button>
</div>
<Card className="w-full max-w-md">
<CardHeader>
@@ -96,7 +96,7 @@ export default function RegisterPage() {
</FormItem>
)}
/>
<FormField
<FormField
control={form.control}
name="confirmPassword"
render={({ field }) => (
@@ -124,7 +124,7 @@ export default function RegisterPage() {
</p>
</CardFooter>
</Card>
<SettingsDialog open={settingsOpen} onOpenChange={setSettingsOpen} />
<SettingsDialog open={settingsOpen} onOpenChange={setSettingsOpen} dataManagementEnabled={false} />
</div>
);
}