feat: ui improvements

Author: Cyneric

src/renderer/App.tsx

@@ -2,37 +2,40 @@
  * @file src/renderer/App.tsx
  *
  * @created 07.03.2026
- * @modified 10.03.2026
+ * @modified 17.03.2026
  *
  * @author Christian Blank <aidrelay@proton.me>
  * @copyright 2026
  *
  * @description Root React component. Sets up the TanStack Router with a
  * root route that renders the Shell layout and child routes for each page.
- * Placeholder routes are used for pages not yet implemented so navigation
- * links work end-to-end from the start. Rules page wired in Step 22;
- * Profiles page wired in Step 30; Registry + Stacks pages wired in Step 43/45;
- * Settings + History pages wired in Phase 6.
+ * Navigation was simplified in the UI/UX redesign: Activity Log merged into
+ * History, Sync Center merged into Dashboard/Settings, Skills merged into Rules.
+ * Stacks remains navigable but is no longer in the sidebar.
  */
 
 import { useEffect } from 'react'
-import { RouterProvider, createRouter, createRootRoute, createRoute } from '@tanstack/react-router'
+import {
+  RouterProvider,
+  createRouter,
+  createRootRoute,
+  createRoute,
+  createMemoryHistory,
+  redirect,
+} from '@tanstack/react-router'
 import { Toaster, toast } from 'sonner'
 import { useTranslation } from 'react-i18next'
 import { TooltipProvider } from '@/components/ui/tooltip'
 import { Shell } from '@/components/layout/Shell'
 import { DashboardPage } from '@/pages/DashboardPage'
 import { ServersPage } from '@/pages/ServersPage'
 import { RulesPage } from '@/pages/RulesPage'
-import { ActivityLogPage } from '@/pages/ActivityLogPage'
 import { ProfilesPage } from '@/pages/ProfilesPage'
 import { RegistryPage } from '@/pages/RegistryPage'
 import { StacksPage } from '@/pages/StacksPage'
 import { SettingsPage } from '@/pages/SettingsPage'
 import { HistoryPage } from '@/pages/HistoryPage'
 import { ClientsPage } from '@/pages/ClientsPage'
-import { SyncCenterPage } from '@/pages/SyncCenterPage'
-import { SkillsPage } from '@/pages/SkillsPage'
 import { StartupSplash } from '@/components/layout/StartupSplash'
 import { useStartupSplash } from '@/hooks/useStartupSplash'
 import { clientsService } from '@/services/clients.service'
@@ -72,12 +75,6 @@ const profilesRoute = createRoute({
   component: ProfilesPage,
 })
 
-const activityRoute = createRoute({
-  getParentRoute: () => rootRoute,
-  path: '/activity',
-  component: ActivityLogPage,
-})
-
 const registryRoute = createRoute({
   getParentRoute: () => rootRoute,
   path: '/registry',
@@ -102,16 +99,14 @@ const historyRoute = createRoute({
   component: HistoryPage,
 })
 
-const syncCenterRoute = createRoute({
+// Redirect legacy activity routes to the unified history page
+const activityRedirectRoute = createRoute({
   getParentRoute: () => rootRoute,
-  path: '/sync-center',
-  component: SyncCenterPage,
-})
-
-const skillsRoute = createRoute({
-  getParentRoute: () => rootRoute,
-  path: '/skills',
-  component: SkillsPage,
+  path: '/activity',
+  beforeLoad: () => {
+    // eslint-disable-next-line @typescript-eslint/only-throw-error -- TanStack Router expects redirect to be thrown
+    throw redirect({ to: '/history' })
+  },
 })
 
 const routeTree = rootRoute.addChildren([
@@ -120,18 +115,22 @@ const routeTree = rootRoute.addChildren([
   rulesRoute,
   clientsRoute,
   profilesRoute,
-  activityRoute,
   registryRoute,
   stacksRoute,
   settingsRoute,
   historyRoute,
-  syncCenterRoute,
-  skillsRoute,
+  activityRedirectRoute,
 ])
 
 // ─── Router ───────────────────────────────────────────────────────────────────
 
-const router = createRouter({ routeTree })
+// Use in-memory history so routing works correctly under Electron's file:// protocol.
+// The default browser history breaks in production because the URL path is the
+// path to the asar bundle, not "/", so no route ever matches.
+const router = createRouter({
+  routeTree,
+  history: createMemoryHistory({ initialEntries: ['/'] }),
+})
 
 // Register the router's type for TypeScript inference across the app
 declare module '@tanstack/react-router' {

src/renderer/components/common/EmptyState.tsx

@@ -0,0 +1,87 @@
+/**
+ * @file src/renderer/components/common/EmptyState.tsx
+ *
+ * @created 17.03.2026
+ * @modified 17.03.2026
+ *
+ * @author Christian Blank <aidrelay@proton.me>
+ * @copyright 2026
+ *
+ * @description Reusable empty state component displayed when a page or section
+ * has no data. Shows a muted icon, descriptive text, and one or two call-to-action
+ * buttons to guide the user toward the next step.
+ */
+
+import { type LucideIcon } from 'lucide-react'
+import { Button } from '@/components/ui/button'
+
+// ─── Types ───────────────────────────────────────────────────────────────────
+
+interface EmptyStateAction {
+  readonly label: string
+  readonly onClick: () => void
+}
+
+interface EmptyStateProps {
+  /** Large muted icon rendered above the title */
+  readonly icon?: LucideIcon
+  /** Primary message displayed to the user */
+  readonly title: string
+  /** Supporting description below the title */
+  readonly description?: string
+  /** Primary call-to-action button */
+  readonly action?: EmptyStateAction
+  /** Secondary call-to-action button rendered as outline variant */
+  readonly secondaryAction?: EmptyStateAction
+  /** Test identifier */
+  readonly testId?: string
+}
+
+// ─── Component ───────────────────────────────────────────────────────────────
+
+/**
+ * Renders a centered empty state panel with optional icon, description,
+ * and action buttons.
+ *
+ * @param props - Empty state configuration.
+ * @returns The empty state element.
+ */
+const EmptyState = ({
+  icon: Icon,
+  title,
+  description,
+  action,
+  secondaryAction,
+  testId = 'empty-state',
+}: Readonly<EmptyStateProps>) => (
+  <div
+    className="flex flex-col items-center gap-3 rounded-lg border border-dashed border-border p-12 text-center"
+    data-testid={testId}
+  >
+    {Icon ? <Icon size={40} className="text-text-secondary/50" aria-hidden="true" /> : null}
+    <p className="text-sm font-medium text-text-primary">{title}</p>
+    {description ? <p className="max-w-sm text-xs text-text-secondary">{description}</p> : null}
+    {action || secondaryAction ? (
+      <div className="mt-2 flex items-center gap-2">
+        {action ? (
+          <Button size="sm" onClick={action.onClick} data-testid={`${testId}-action`}>
+            {action.label}
+          </Button>
+        ) : null}
+        {secondaryAction ? (
+          <Button
+            variant="outline"
+            size="sm"
+            onClick={secondaryAction.onClick}
+            data-testid={`${testId}-secondary-action`}
+          >
+            {secondaryAction.label}
+          </Button>
+        ) : null}
+      </div>
+    ) : null}
+  </div>
+)
+
+export { EmptyState }
+export type { EmptyStateProps, EmptyStateAction }

src/renderer/components/common/PageHeader.tsx

@@ -0,0 +1,71 @@
+/**
+ * @file src/renderer/components/common/PageHeader.tsx
+ *
+ * @created 17.03.2026
+ * @modified 17.03.2026
+ *
+ * @author Christian Blank <aidrelay@proton.me>
+ * @copyright 2026
+ *
+ * @description Standardized page header component used across all pages.
+ * Renders a consistent title, optional subtitle, and right-aligned action
+ * buttons. Supports an optional sticky mode with backdrop blur.
+ */
+
+import { type ReactNode } from 'react'
+
+// ─── Types ───────────────────────────────────────────────────────────────────
+
+interface PageHeaderProps {
+  /** Unique ID used for aria-labelledby linkage */
+  readonly id?: string
+  /** Page title displayed as h1 */
+  readonly title: string
+  /** Optional subtitle below the title */
+  readonly subtitle?: string
+  /** Right-aligned action buttons or controls */
+  readonly actions?: ReactNode
+  /** When true, the header sticks to the top with backdrop blur */
+  readonly sticky?: boolean
+  /** Test identifier */
+  readonly testId?: string
+}
+
+// ─── Component ───────────────────────────────────────────────────────────────
+
+/**
+ * Renders a consistent page header with title, subtitle, and action slot.
+ *
+ * @param props - Header configuration props.
+ * @returns The page header element.
+ */
+const PageHeader = ({
+  id,
+  title,
+  subtitle,
+  actions,
+  sticky = false,
+  testId = 'page-header',
+}: Readonly<PageHeaderProps>) => {
+  const stickyClasses = sticky
+    ? 'sticky top-0 z-20 bg-background/95 backdrop-blur supports-[backdrop-filter]:bg-background/60'
+    : ''
+
+  return (
+    <header
+      className={`flex items-start justify-between gap-4 px-6 py-4 ${stickyClasses}`.trim()}
+      data-testid={testId}
+    >
+      <div>
+        <h1 id={id} className="text-2xl font-bold tracking-tight text-text-primary">
+          {title}
+        </h1>
+        {subtitle ? <p className="mt-1 text-sm text-text-secondary">{subtitle}</p> : null}
+      </div>
+      {actions ? <div className="flex shrink-0 items-center gap-2">{actions}</div> : null}
+    </header>
+  )
+}
+
+export { PageHeader }
+export type { PageHeaderProps }