feat: add 'about' page

frontend/src/components/workspace/settings/settings-dialog.tsx

@@ -2,12 +2,13 @@
 
 import {
   BellIcon,
+  InfoIcon,
   BrainIcon,
   PaletteIcon,
   SparklesIcon,
   WrenchIcon,
 } from "lucide-react";
-import { useMemo, useState } from "react";
+import { useEffect, useMemo, useState } from "react";
 
 import {
   Dialog,
@@ -16,7 +17,7 @@ import {
   DialogTitle,
 } from "@/components/ui/dialog";
 import { ScrollArea } from "@/components/ui/scroll-area";
-import { AcknowledgePage } from "@/components/workspace/settings/acknowledge-page";
+import { AboutSettingsPage } from "@/components/workspace/settings/about-settings-page";
 import { AppearanceSettingsPage } from "@/components/workspace/settings/appearance-settings-page";
 import { MemorySettingsPage } from "@/components/workspace/settings/memory-settings-page";
 import { NotificationSettingsPage } from "@/components/workspace/settings/notification-settings-page";
@@ -31,7 +32,7 @@ type SettingsSection =
   | "tools"
   | "skills"
   | "notification"
-  | "acknowledge";
+  | "about";
 
 type SettingsDialogProps = React.ComponentProps<typeof Dialog> & {
   defaultSection?: SettingsSection;
@@ -43,6 +44,14 @@ export function SettingsDialog(props: SettingsDialogProps) {
   const [activeSection, setActiveSection] =
     useState<SettingsSection>(defaultSection);
 
+  useEffect(() => {
+    // When opening the dialog, ensure the active section follows the caller's intent.
+    // This allows triggers like "About" to open the dialog directly on that page.
+    if (dialogProps.open) {
+      setActiveSection(defaultSection);
+    }
+  }, [defaultSection, dialogProps.open]);
+
   const sections = useMemo(
     () => [
       {
@@ -62,6 +71,7 @@ export function SettingsDialog(props: SettingsDialogProps) {
       },
       { id: "tools", label: t.settings.sections.tools, icon: WrenchIcon },
       { id: "skills", label: t.settings.sections.skills, icon: SparklesIcon },
+      { id: "about", label: t.settings.sections.about, icon: InfoIcon },
     ],
     [
       t.settings.sections.appearance,
@@ -69,6 +79,7 @@ export function SettingsDialog(props: SettingsDialogProps) {
       t.settings.sections.tools,
       t.settings.sections.skills,
       t.settings.sections.notification,
+      t.settings.sections.about,
     ],
   );
   return (
@@ -122,7 +133,7 @@ export function SettingsDialog(props: SettingsDialogProps) {
                 />
               )}
               {activeSection === "notification" && <NotificationSettingsPage />}
-              {activeSection === "acknowledge" && <AcknowledgePage />}
+              {activeSection === "about" && <AboutSettingsPage />}
             </div>
           </ScrollArea>
         </div>