need to commit to switch branch

web/src/components/MemoActionMenu.tsx

@@ -89,10 +89,17 @@ const MemoActionMenu = observer((props: Props) => {
       return;
     }
   };
-
+                                      //
   const handleToggleMemoStatusClick = async () => {
-    const state = memo.state === State.ARCHIVED ? State.NORMAL : State.ARCHIVED;
-    const message = memo.state === State.ARCHIVED ? t("message.restored-successfully") : t("message.archived-successfully");
+    //just review async in notes
+    //changing the state
+    const state = memo.state === State.ARCHIVED 
+                  ? State.NORMAL 
+                  : State.ARCHIVED;
+    //showing message depending on state
+    const message = memo.state === State.ARCHIVED 
+                    ? t("message.restored-successfully") 
+                    : t("message.archived-successfully");
     try {
       await memoStore.updateMemo(
         {
@@ -101,7 +108,32 @@ const MemoActionMenu = observer((props: Props) => {
         },
         ["state"],
       );
-      toast(message);
+
+    // Show toast with Undo button
+    toast.custom((tToast) => (
+      <div className="flex items-center gap-3 bg-white dark:bg-gray-800 p-3 rounded-xl shadow">
+        <span>{message}</span>
+        <button
+          className="ml-auto text-blue-600 hover:underline"
+          onClick={async () => {
+            // Undo action: revert to previous state
+            await memoStore.updateMemo(
+              {
+                name: memo.name,
+                state: memo.state, // revert to old state
+              },
+              ["state"],
+            );
+            toast.dismiss(tToast.id); // close the toast
+            toast.success(t("message.undo-successful")); // optional success toast
+            memoUpdatedCallback();
+          }}
+        >
+          {t("common.undo")}
+        </button>
+      </div>
+    ));
+
     } catch (error: any) {
       toast.error(error.details);
       console.error(error);

web/src/themes/default.css

@@ -1,52 +1,36 @@
 :root {
-  --background: oklch(0.9818 0.0054 95.0986);
-  --foreground: oklch(0.2438 0.0269 95.7226);
-  --card: oklch(0.9818 0.0054 95.0986);
-  --card-foreground: oklch(0.1908 0.002 106.5859);
-  --popover: oklch(1 0 0);
-  --popover-foreground: oklch(0.2671 0.0196 98.939);
-  --primary: oklch(0.3918 0.0127 286.3);
-  --primary-foreground: oklch(0.9818 0.0054 95.0986);
-  --secondary: oklch(0.9245 0.0138 92.9892);
-  --secondary-foreground: oklch(0.4334 0.0177 98.6048);
-  --muted: oklch(0.9341 0.0153 90.239);
-  --muted-foreground: oklch(0.5559 0.0075 97.4233);
-  --accent: oklch(0.9245 0.0138 92.9892);
-  --accent-foreground: oklch(0.2671 0.0196 98.939);
-  --destructive: oklch(0.35 0.02 250);
-  --destructive-foreground: oklch(0.95 0.005 250);
-  --border: oklch(0.8847 0.0069 97.3627);
-  --input: oklch(0.7621 0.0156 98.3528);
-  --ring: oklch(0.5937 0.1673 253.063);
-  --chart-1: oklch(0.5583 0.1276 42.9956);
-  --chart-2: oklch(0.6898 0.1581 290.4107);
-  --chart-3: oklch(0.8816 0.0276 93.128);
-  --chart-4: oklch(0.8822 0.0403 298.1792);
-  --chart-5: oklch(0.5608 0.1348 42.0584);
-  --sidebar: oklch(0.9663 0.008 98.8792);
-  --sidebar-foreground: oklch(0.359 0.0051 106.6524);
-  --sidebar-primary: oklch(0.3918 0.0127 286.3);
-  --sidebar-primary-foreground: oklch(0.9818 0.0054 95.0986);
-  --sidebar-accent: oklch(0.9245 0.0138 92.9892);
-  --sidebar-accent-foreground: oklch(0.325 0 0);
-  --sidebar-border: oklch(0.9401 0 0);
-  --sidebar-ring: oklch(0.7731 0 0);
-  --font-sans:
-    ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif,
-    "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
-  --font-serif: ui-serif, Georgia, Cambria, "Times New Roman", Times, serif;
-  --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
-  --radius: 0.5rem;
-  --shadow-2xs: 0 1px 3px 0px hsl(0 0% 0% / 0.05);
-  --shadow-xs: 0 1px 3px 0px hsl(0 0% 0% / 0.05);
-  --shadow-sm: 0 1px 3px 0px hsl(0 0% 0% / 0.1), 0 1px 2px -1px hsl(0 0% 0% / 0.1);
-  --shadow: 0 1px 3px 0px hsl(0 0% 0% / 0.1), 0 1px 2px -1px hsl(0 0% 0% / 0.1);
-  --shadow-md: 0 1px 3px 0px hsl(0 0% 0% / 0.1), 0 2px 4px -1px hsl(0 0% 0% / 0.1);
-  --shadow-lg: 0 1px 3px 0px hsl(0 0% 0% / 0.1), 0 4px 6px -1px hsl(0 0% 0% / 0.1);
-  --shadow-xl: 0 1px 3px 0px hsl(0 0% 0% / 0.1), 0 8px 10px -1px hsl(0 0% 0% / 0.1);
-  --shadow-2xl: 0 1px 3px 0px hsl(0 0% 0% / 0.25);
-  --tracking-normal: 0em;
-  --spacing: 0.25rem;
+  --background: oklch(22% 0.07 300);
+  --foreground: oklch(87% 0.08 300);
+  --card: oklch(22% 0.07 300);
+  --card-foreground: oklch(84% 0.07 302);
+  --popover: oklch(30% 0.02 300);
+  --popover-foreground: oklch(85% 0.02 300);
+  --primary: oklch(70% 0.09 300);
+  --primary-foreground: oklch(22% 0.07 300);
+  --secondary: oklch(34% 0.01 300);
+  --secondary-foreground: oklch(82% 0.02 300);
+  --muted: oklch(25% 0.01 300);
+  --muted-foreground: oklch(55% 0.04 300);
+  --accent: oklch(32% 0.02 300);
+  --accent-foreground: oklch(82% 0.02 300);
+  --destructive: oklch(55% 0.015 20);
+  --destructive-foreground: oklch(95% 0.01 20);
+  --border: oklch(36% 0.03 300);
+  --input: oklch(45% 0.015 300);
+  --ring: oklch(60% 0.15 300);
+  --chart-1: oklch(55% 0.12 40);
+  --chart-2: oklch(68% 0.15 300);
+  --chart-3: oklch(45% 0.02 245);
+  --chart-4: oklch(32% 0.05 300);
+  --chart-5: oklch(56% 0.13 40);
+  --sidebar: oklch(18% 0.05 300);
+  --sidebar-foreground: oklch(87% 0.08 300);
+  --sidebar-primary: oklch(12% 0.03 300);
+  --sidebar-primary-foreground: oklch(27% 0.01 300);
+  --sidebar-accent: oklch(25% 0.08 300);
+  --sidebar-accent-foreground: oklch(82% 0.02 300);
+  --sidebar-border: oklch(37% 0.01 110);
+  --sidebar-ring: oklch(60% 0.15 300);
 }
 
 @theme inline {