feat: Implement data import and export functionality for notes and tags.

k-notes-frontend/src/components/note-form.tsx

@@ -27,7 +27,7 @@ interface NoteFormProps {
 
 export function NoteForm({ defaultValues, onSubmit, isLoading, submitLabel = "Save" }: NoteFormProps) {
   const form = useForm<NoteFormValues>({
-    resolver: zodResolver(noteSchema),
+    resolver: zodResolver(noteSchema) as any,
     defaultValues: {
       title: "",
       content: "",
@@ -40,9 +40,9 @@ export function NoteForm({ defaultValues, onSubmit, isLoading, submitLabel = "Sa
 
   return (
     <Form {...form}>
-      <form onSubmit={form.handleSubmit(onSubmit)} className="space-y-4">
+      <form onSubmit={form.handleSubmit(onSubmit as any)} className="space-y-4">
         <FormField
-          control={form.control}
+          control={form.control as any}
           name="title"
           render={({ field }) => (
             <FormItem>
@@ -55,7 +55,7 @@ export function NoteForm({ defaultValues, onSubmit, isLoading, submitLabel = "Sa
           )}
         />
         <FormField
-          control={form.control}
+          control={form.control as any}
           name="content"
           render={({ field }) => (
             <FormItem>
@@ -68,7 +68,7 @@ export function NoteForm({ defaultValues, onSubmit, isLoading, submitLabel = "Sa
           )}
         />
         <FormField
-          control={form.control}
+          control={form.control as any}
           name="tags"
           render={({ field }) => (
             <FormItem>
@@ -82,7 +82,7 @@ export function NoteForm({ defaultValues, onSubmit, isLoading, submitLabel = "Sa
         />
         
         <FormField
-          control={form.control}
+          control={form.control as any}
           name="color"
           render={({ field }) => (
             <FormItem>
@@ -111,7 +111,7 @@ export function NoteForm({ defaultValues, onSubmit, isLoading, submitLabel = "Sa
         />
 
         <FormField
-          control={form.control}
+          control={form.control as any}
           name="is_pinned"
           render={({ field }) => (
             <FormItem className="flex flex-row items-center space-x-3 space-y-0 rounded-md border p-4">

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

@@ -1,9 +1,11 @@
-import { useState, useEffect } from "react";
+import { useRef, useState, useEffect } from "react";
 import { Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle, DialogFooter } from "@/components/ui/dialog";
 import { Button } from "@/components/ui/button";
 import { Input } from "@/components/ui/input";
 import { Label } from "@/components/ui/label";
 import { toast } from "sonner";
+import { api } from "@/lib/api";
+import { Separator } from "@/components/ui/separator";
 
 interface SettingsDialogProps {
     open: boolean;
@@ -35,6 +37,42 @@ export function SettingsDialog({ open, onOpenChange }: SettingsDialogProps) {
         }
     };
 
+    const fileInputRef = useRef<HTMLInputElement>(null);
+
+    const handleExport = async () => {
+        try {
+            const blob = await api.exportData();
+            const url = window.URL.createObjectURL(blob);
+            const a = document.createElement('a');
+            a.href = url;
+            a.download = `k-notes-backup-${new Date().toISOString().split('T')[0]}.json`;
+            document.body.appendChild(a);
+            a.click();
+            window.URL.revokeObjectURL(url);
+            document.body.removeChild(a);
+            toast.success("Export successful");
+        } catch (e) {
+            toast.error("Export failed");
+        }
+    };
+
+    const handleImport = async (e: React.ChangeEvent<HTMLInputElement>) => {
+        const file = e.target.files?.[0];
+        if (!file) return;
+
+        try {
+            const text = await file.text();
+            const data = JSON.parse(text);
+            await api.importData(data);
+            toast.success("Import successful. Reloading...");
+            onOpenChange(false);
+            window.location.reload();
+        } catch (e) {
+            console.error(e);
+            toast.error("Import failed");
+        }
+    };
+
     return (
         <Dialog open={open} onOpenChange={onOpenChange}>
             <DialogContent>
@@ -58,6 +96,32 @@ export function SettingsDialog({ open, onOpenChange }: SettingsDialogProps) {
                         />
                     </div>
                 </div>
+
+                <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>
+                    <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>