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 />
</>
)
}

54
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(() => {
@@ -31,7 +32,7 @@ export function SettingsDialog({ open, onOpenChange }: SettingsDialogProps) {
localStorage.setItem("k_notes_api_url", cleanUrl);
toast.success("Settings saved. Please refresh the page.");
onOpenChange(false);
window.location.reload();
window.location.reload();
} catch (e) {
toast.error("Invalid URL");
}
@@ -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>