fix: refactor settings sidebar with home/settings navigation

apps/desktop/src/i18n/locales/en.json

@@ -364,7 +364,8 @@
       "community": "Community",
       "discordAlt": "Discord",
       "logoAlt": "Amical Logo",
-      "brand": "Amical"
+      "brand": "Amical",
+      "backToHome": "Back to home"
     },
     "search": {
       "buttonLabel": "Search",

apps/desktop/src/i18n/locales/es.json

@@ -364,7 +364,8 @@
       "community": "Comunidad",
       "discordAlt": "Discord",
       "logoAlt": "Logo de Amical",
-      "brand": "Amical"
+      "brand": "Amical",
+      "backToHome": "Volver al inicio"
     },
     "search": {
       "buttonLabel": "Buscar",

apps/desktop/src/i18n/locales/ja.json

@@ -364,7 +364,8 @@
       "community": "コミュニティ",
       "discordAlt": "Discord",
       "logoAlt": "Amical ロゴ",
-      "brand": "Amical"
+      "brand": "Amical",
+      "backToHome": "ホームに戻る"
     },
     "search": {
       "buttonLabel": "検索",

apps/desktop/src/renderer/main/components/settings-sidebar.tsx

@@ -2,8 +2,10 @@ import * as React from "react";
 import {
   IconBookFilled,
   IconBrandDiscordFilled,
+  IconChevronLeft,
   IconInfoCircle,
 } from "@tabler/icons-react";
+import { Link, useLocation } from "@tanstack/react-router";
 import { useTranslation } from "react-i18next";
 
 import { NavMain } from "@/components/nav-main";
@@ -26,19 +28,28 @@ import {
 } from "@/utils/feature-flags";
 import { CommandSearchButton } from "./command-search-button";
 import { CreateNoteButton } from "./create-note-button";
-import { SETTINGS_NAV_ITEMS } from "../lib/settings-navigation";
+import { HOME_NAV_ITEMS, SETTINGS_NAV_ITEMS } from "../lib/settings-navigation";
 
 export function SettingsSidebar({
   ...props
 }: React.ComponentProps<typeof Sidebar>) {
   const { t } = useTranslation();
+  const location = useLocation();
   const sidebarCtaFlag = useFeatureFlag(SIDEBAR_CTA_FEATURE_FLAG);
+  const isSettingsRoute =
+    location.pathname === "/settings" ||
+    location.pathname === "/settings/" ||
+    SETTINGS_NAV_ITEMS.some((item) =>
+      location.pathname.startsWith(item.url),
+    );
+  const isHomeSidebar = !isSettingsRoute;
 
   const sidebarCtaPayload = sidebarCtaFlag.enabled
     ? parseSidebarCtaPayload(sidebarCtaFlag.payload)
     : null;
 
-  const navMain = SETTINGS_NAV_ITEMS.map(({ titleKey, url, icon }) => ({
+  const navMainItems = isHomeSidebar ? HOME_NAV_ITEMS : SETTINGS_NAV_ITEMS;
+  const navMain = navMainItems.map(({ titleKey, url, icon }) => ({
     title: t(titleKey),
     url,
     icon: typeof icon === "string" ? undefined : icon,
@@ -83,33 +94,59 @@ export function SettingsSidebar({
         className="h-[var(--titlebar-height)] shrink-0"
         style={{ WebkitAppRegion: "drag" } as React.CSSProperties}
       />
-      <SidebarHeader className="py-0 -mb-1">
-        <SidebarMenu>
-          <SidebarMenuItem>
-            <SidebarMenuButton
-              asChild
-              className="data-[slot=sidebar-menu-button]:!p-1.5"
-            >
-              <div className="inline-flex items-center gap-2.5 font-semibold w-full">
-                <img
-                  src="assets/logo.svg"
-                  alt={t("settings.sidebar.logoAlt")}
-                  className="!size-7"
-                />
-                <span className="font-semibold">
-                  {t("settings.sidebar.brand")}
-                </span>
+      {isHomeSidebar ? (
+        <SidebarHeader className="py-0 -mb-1">
+          <SidebarMenu>
+            <SidebarMenuItem>
+              <SidebarMenuButton
+                asChild
+                className="data-[slot=sidebar-menu-button]:!p-1.5"
+              >
+                <div className="inline-flex items-center gap-2.5 font-semibold w-full">
+                  <img
+                    src="assets/logo.svg"
+                    alt={t("settings.sidebar.logoAlt")}
+                    className="!size-7"
+                  />
+                  <span className="font-semibold">
+                    {t("settings.sidebar.brand")}
+                  </span>
+                </div>
+              </SidebarMenuButton>
+            </SidebarMenuItem>
+            <SidebarMenuItem>
+              <CreateNoteButton />
+            </SidebarMenuItem>
+            <SidebarMenuItem>
+              <CommandSearchButton />
+            </SidebarMenuItem>
+          </SidebarMenu>
+        </SidebarHeader>
+      ) : (
+        <SidebarHeader className="py-0 -mb-1">
+          <SidebarMenu>
+            <SidebarMenuItem>
+              <SidebarMenuButton
+                asChild
+                className="data-[slot=sidebar-menu-button]:!p-1.5"
+              >
+                <Link
+                  to="/settings/notes"
+                  aria-label={t("settings.sidebar.backToHome")}
+                >
+                  <IconChevronLeft />
+                  <span>{t("settings.sidebar.backToHome")}</span>
+                </Link>
+              </SidebarMenuButton>
+            </SidebarMenuItem>
+            <SidebarMenuItem>
+              <div className="inline-flex items-center gap-2.5 w-full px-2 py-1.5 font-semibold">
+                {t("menu.settings")}
               </div>
-            </SidebarMenuButton>
-          </SidebarMenuItem>
-          <SidebarMenuItem>
-            <CreateNoteButton />
-          </SidebarMenuItem>
-          <SidebarMenuItem>
-            <CommandSearchButton />
-          </SidebarMenuItem>
-        </SidebarMenu>
-      </SidebarHeader>
+            </SidebarMenuItem>
+          </SidebarMenu>
+        </SidebarHeader>
+      )}
       <SidebarContent>
         <NavMain items={navMain} />
         <NavSecondary items={navSecondary} className="mt-auto" />

apps/desktop/src/renderer/main/content.tsx

@@ -22,12 +22,25 @@ declare module "@tanstack/react-router" {
   }
 }
 
+const LEGACY_ROUTE_MAP: Record<string, string> = {
+  "/history": "/settings/history",
+  "/settings/account": "/settings/ai-models?tab=speech",
+  "/settings": "/settings/preferences",
+};
+
+function navigateToRoute(route: string) {
+  const normalizedRoute = LEGACY_ROUTE_MAP[route] ?? route;
+  const url = new URL(normalizedRoute, "http://localhost");
+  const search = Object.fromEntries(url.searchParams.entries());
+  router.navigate({ to: url.pathname, search });
+}
+
 // Root App component with routing
 const App: React.FC = () => {
   // Listen for navigation events from main process (e.g., from widget)
   useEffect(() => {
     const handleNavigate = (route: string) => {
-      router.navigate({ to: route });
+      navigateToRoute(route);
     };
 
     window.electronAPI?.on?.("navigate", handleNavigate);

apps/desktop/src/renderer/main/lib/settings-navigation.ts

@@ -11,22 +11,31 @@ import {
   type Icon,
 } from "@tabler/icons-react";
 
-export interface SettingsNavItem {
+export interface SidebarNavItem {
   titleKey: string;
   url: string;
-  descriptionKey: string;
   icon: Icon | string;
+}
+
+export interface SettingsNavItem extends SidebarNavItem {
+  descriptionKey: string;
   type: "settings";
 }
 
-export const SETTINGS_NAV_ITEMS: SettingsNavItem[] = [
+export const HOME_NAV_ITEMS: SidebarNavItem[] = [
   {
     titleKey: "settings.nav.notes.title",
     url: "/settings/notes",
-    descriptionKey: "settings.nav.notes.description",
     icon: IconNotes,
-    type: "settings",
   },
+  {
+    titleKey: "menu.settings",
+    url: "/settings/preferences",
+    icon: IconSettings,
+  },
+];
+
+export const SETTINGS_NAV_ITEMS: SettingsNavItem[] = [
   {
     titleKey: "settings.nav.preferences.title",
     url: "/settings/preferences",

apps/desktop/src/renderer/main/routes/index.tsx

@@ -3,7 +3,7 @@ import { createFileRoute, redirect } from "@tanstack/react-router";
 export const Route = createFileRoute("/")({
   beforeLoad: () => {
     throw redirect({
-      to: "/settings/history",
+      to: "/settings/notes",
     });
   },
 });

apps/desktop/src/types/widget-notification.ts

@@ -76,7 +76,7 @@ export const ERROR_CODE_CONFIG: Record<ErrorCode, WidgetNotificationConfig> = {
     subDescription: { key: "widget.notifications.recordingSaved" },
     primaryAction: {
       label: { key: "widget.notifications.action.logIn" },
-      navigateTo: "/settings/account",
+      navigateTo: "/settings/ai-models?tab=speech",
     },
     secondaryAction: {
       label: { key: "widget.notifications.action.support" },
@@ -92,7 +92,7 @@ export const ERROR_CODE_CONFIG: Record<ErrorCode, WidgetNotificationConfig> = {
     subDescription: { key: "widget.notifications.recordingSaved" },
     primaryAction: {
       label: { key: "widget.notifications.action.viewUsage" },
-      navigateTo: "/settings/account",
+      navigateTo: "/settings/ai-models?tab=speech",
     },
     secondaryAction: {
       label: { key: "widget.notifications.action.support" },
@@ -113,7 +113,7 @@ export const ERROR_CODE_CONFIG: Record<ErrorCode, WidgetNotificationConfig> = {
     },
     secondaryAction: {
       label: { key: "widget.notifications.action.viewHistory" },
-      navigateTo: "/history",
+      navigateTo: "/settings/history",
     },
   },
   [ErrorCodes.UNKNOWN]: {
@@ -122,7 +122,7 @@ export const ERROR_CODE_CONFIG: Record<ErrorCode, WidgetNotificationConfig> = {
     subDescription: { key: "widget.notifications.recordingSaved" },
     primaryAction: {
       label: { key: "widget.notifications.action.viewHistory" },
-      navigateTo: "/history",
+      navigateTo: "/settings/history",
     },
     secondaryAction: {
       label: { key: "widget.notifications.action.support" },
@@ -138,7 +138,7 @@ export const ERROR_CODE_CONFIG: Record<ErrorCode, WidgetNotificationConfig> = {
     subDescription: { key: "widget.notifications.recordingSaved" },
     primaryAction: {
       label: { key: "widget.notifications.action.settings" },
-      navigateTo: "/settings",
+      navigateTo: "/settings/preferences",
     },
     secondaryAction: {
       label: { key: "widget.notifications.action.support" },
@@ -197,7 +197,7 @@ export const ERROR_CODE_CONFIG: Record<ErrorCode, WidgetNotificationConfig> = {
     subDescription: { key: "widget.notifications.recordingSaved" },
     primaryAction: {
       label: { key: "widget.notifications.action.viewHistory" },
-      navigateTo: "/history",
+      navigateTo: "/settings/history",
     },
     secondaryAction: {
       label: { key: "widget.notifications.action.support" },