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

k-notes-frontend/src/components/app-sidebar.tsx

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

k-notes-frontend/src/components/settings-dialog.tsx

@@ -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>

k-notes-frontend/src/pages/login.tsx

@@ -22,7 +22,7 @@ type LoginFormValues = z.infer<typeof loginSchema>;
 
 export default function LoginPage() {
   const { mutate: login, isPending } = useLogin();
-  
+
   const form = useForm<LoginFormValues>({
     resolver: zodResolver(loginSchema),
     defaultValues: {
@@ -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>
   );
 }

k-notes-frontend/src/pages/register.tsx

@@ -26,7 +26,7 @@ type RegisterFormValues = z.infer<typeof registerSchema>;
 
 export default function RegisterPage() {
   const { mutate: register, isPending } = useRegister();
-  
+
   const form = useForm<RegisterFormValues>({
     resolver: zodResolver(registerSchema),
     defaultValues: {
@@ -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>
   );
 }