From beb4169b03e0edfd7f95034dfd5b044a68402c41 Mon Sep 17 00:00:00 2001
From: Agent Zero <agent@media-on.de>
Date: Thu, 30 Jul 2026 20:02:28 +0200
Subject: [PATCH] feat: start page after login with workspace grid, login
 redirect to /start

---
 .../src/components/layout/StartLayout.tsx     |  28 ++++
 frontend/src/pages/Login.tsx                  |   2 +-
 frontend/src/pages/StartPage.tsx              | 137 ++++++++++++++++++
 frontend/src/routes/index.tsx                 |  14 +-
 4 files changed, 179 insertions(+), 2 deletions(-)
 create mode 100644 frontend/src/components/layout/StartLayout.tsx
 create mode 100644 frontend/src/pages/StartPage.tsx

diff --git a/frontend/src/components/layout/StartLayout.tsx b/frontend/src/components/layout/StartLayout.tsx
new file mode 100644
index 0000000..76b94cb
--- /dev/null
+++ b/frontend/src/components/layout/StartLayout.tsx
@@ -0,0 +1,28 @@
+/**
+ * Start layout — TopBar + StartPage, no Sidebar.
+ * Used for the /start route after login.
+ */
+
+import React from 'react';
+import { TopBar } from './TopBar';
+import { ToastContainer } from '@/components/ui/Toast';
+import { PluginRegistry } from '@/components/plugins/PluginRegistry';
+import { ErrorBoundary } from '@/components/ErrorBoundary';
+import { Outlet } from 'react-router-dom';
+
+export function StartLayout() {
+  return (
+    <div className="flex h-screen overflow-hidden bg-secondary-50" data-testid="start-layout">
+      <PluginRegistry />
+      <div className="flex-1 flex flex-col overflow-hidden">
+        <TopBar />
+        <div className="flex-1 overflow-hidden">
+          <ErrorBoundary>
+            <Outlet />
+          </ErrorBoundary>
+        </div>
+      </div>
+      <ToastContainer />
+    </div>
+  );
+}
diff --git a/frontend/src/pages/Login.tsx b/frontend/src/pages/Login.tsx
index 0f35983..9b4a033 100644
--- a/frontend/src/pages/Login.tsx
+++ b/frontend/src/pages/Login.tsx
@@ -37,7 +37,7 @@ export function LoginPage() {
     try {
       await loginMutation.mutateAsync(data);
       addToast({ type: 'success', message: t('auth.login') + ' erfolgreich' });
-      navigate('/dashboard');
+      navigate('/start');
     } catch (error: any) {
       const msg = error.message || t('auth.loginFailed');
       setSubmitError(msg);
diff --git a/frontend/src/pages/StartPage.tsx b/frontend/src/pages/StartPage.tsx
new file mode 100644
index 0000000..56ccdd5
--- /dev/null
+++ b/frontend/src/pages/StartPage.tsx
@@ -0,0 +1,137 @@
+/**
+ * Start page — shown after login.
+ * 2-column layout: left menu, right grid with workspace tiles.
+ */
+
+import React from 'react';
+import { useNavigate } from 'react-router-dom';
+import { useTranslation } from 'react-i18next';
+import { useAuthStore } from '@/store/authStore';
+import { Settings, HelpCircle, LayoutGrid, ArrowRight, Plus } from 'lucide-react';
+
+// Workspace tile definition
+interface WorkspaceTile {
+  id: string;
+  name: string;
+  description: string;
+  icon: React.ReactNode;
+  color: string;
+  path: string;
+}
+
+const DEFAULT_WORKSPACES: WorkspaceTile[] = [
+  {
+    id: 'main',
+    name: 'Haupt-Workspace',
+    description: 'Kontakte, Kalender, Mail und mehr',
+    icon: <LayoutGrid className="w-8 h-8" strokeWidth={1.5} />,
+    color: 'from-blue-500 to-blue-600',
+    path: '/dashboard',
+  },
+];
+
+export function StartPage() {
+  const { t } = useTranslation();
+  const navigate = useNavigate();
+  const user = useAuthStore((state) => state.user);
+
+  const menuItems = [
+    { id: 'workspaces', label: 'Workspaces', icon: <LayoutGrid className="w-4 h-4" />, active: true },
+    { id: 'settings', label: 'Einstellungen', icon: <Settings className="w-4 h-4" />, onClick: () => navigate('/settings') },
+    { id: 'help', label: 'Hilfe', icon: <HelpCircle className="w-4 h-4" />, onClick: () => window.open('/docs', '_blank') },
+  ];
+
+  return (
+    <div className="flex h-full overflow-hidden bg-secondary-50">
+      {/* Left column — menu */}
+      <aside className="w-56 bg-white border-r border-secondary-200 flex flex-col flex-shrink-0">
+        <div className="h-[58px] flex items-center px-4 border-b border-secondary-200">
+          <span className="text-xl font-bold text-secondary-900">leocrm</span>
+        </div>
+        <nav className="flex-1 overflow-y-auto py-4">
+          <ul className="space-y-1 px-2">
+            {menuItems.map((item) => (
+              <li key={item.id}>
+                <button
+                  onClick={item.onClick || (() => {})}
+                  className={`
+                    w-full flex items-center gap-3 px-3 py-2.5 rounded-md text-sm font-medium min-h-touch
+                    transition-colors focus:outline-none focus-visible:ring-2 focus-visible:ring-primary-500
+                    ${item.active ? 'bg-primary-50 text-primary-700' : 'text-secondary-600 hover:bg-secondary-100 hover:text-secondary-900'}
+                  `}
+                >
+                  {item.icon}
+                  <span>{item.label}</span>
+                </button>
+              </li>
+            ))}
+          </ul>
+        </nav>
+        {/* User info at bottom */}
+        <div className="px-4 py-3 border-t border-secondary-200">
+          <p className="text-xs text-secondary-500 truncate">{user?.email}</p>
+        </div>
+      </aside>
+
+      {/* Right column — workspace grid */}
+      <div className="flex-1 overflow-y-auto">
+        <div className="max-w-5xl mx-auto p-8">
+          <div className="mb-8">
+            <h1 className="text-2xl font-bold text-secondary-900">Willkommen{user?.first_name ? `, ${user.first_name}` : ''}!</h1>
+            <p className="text-sm text-secondary-500 mt-1">Wähle einen Workspace aus</p>
+          </div>
+
+          {/* Masonry-style grid */}
+          <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4">
+            {DEFAULT_WORKSPACES.map((ws) => (
+              <button
+                key={ws.id}
+                onClick={() => navigate(ws.path)}
+                className="
+                  group relative overflow-hidden rounded-xl border border-secondary-200 bg-white
+                  hover:border-primary-300 hover:shadow-lg transition-all duration-200
+                  focus:outline-none focus-visible:ring-2 focus-visible:ring-primary-500
+                  p-6 text-left
+                "
+              >
+                {/* Gradient icon area */}
+                <div className={`
+                  inline-flex items-center justify-center w-16 h-16 rounded-xl
+                  bg-gradient-to-br ${ws.color} text-white mb-4
+                  group-hover:scale-110 transition-transform duration-200
+                `}>
+                  {ws.icon}
+                </div>
+                <h3 className="text-base font-semibold text-secondary-900 group-hover:text-primary-700 transition-colors">
+                  {ws.name}
+                </h3>
+                <p className="text-sm text-secondary-500 mt-1">{ws.description}</p>
+                <div className="
+                  mt-4 inline-flex items-center gap-1 text-xs font-medium text-primary-600
+                  opacity-0 group-hover:opacity-100 transition-opacity
+                ">
+                  Öffnen
+                  <ArrowRight className="w-3.5 h-3.5" />
+                </div>
+              </button>
+            ))}
+
+            {/* Add workspace placeholder */}
+            <button
+              className="
+                group flex flex-col items-center justify-center rounded-xl border-2 border-dashed border-secondary-200
+                hover:border-primary-300 hover:bg-primary-50/30 transition-all duration-200
+                p-6 min-h-[180px]
+              "
+            >
+              <Plus className="w-8 h-8 text-secondary-300 group-hover:text-primary-400 transition-colors" />
+              <span className="text-sm text-secondary-400 group-hover:text-primary-600 mt-2 transition-colors">
+                Workspace hinzufügen
+              </span>
+            </button>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}
diff --git a/frontend/src/routes/index.tsx b/frontend/src/routes/index.tsx
index 67cacbb..cd0d7d1 100644
--- a/frontend/src/routes/index.tsx
+++ b/frontend/src/routes/index.tsx
@@ -1,6 +1,7 @@
 import React, { Suspense } from 'react';
 import { createBrowserRouter, RouterProvider } from 'react-router-dom';
 import { AppShell } from '@/components/layout/AppShell';
+import { StartLayout } from '@/components/layout/StartLayout';
 import { ProtectedRoute } from './ProtectedRoute';
 import { ProtectedRoute as PermissionRoute } from '@/components/common/ProtectedRoute';
 import { LoginPage } from '@/pages/Login';
@@ -65,6 +66,7 @@ const SettingsWebhooksPage = React.lazy(() => import('@/pages/SettingsWebhooks')
 const SettingsBackupPage = React.lazy(() => import('@/pages/SettingsBackup').then(m => ({ default: m.SettingsBackupPage })));
 const SettingsRechtePage = React.lazy(() => import('@/pages/SettingsRechte').then(m => ({ default: m.SettingsRechtePage })));
 const NoAccessPage = React.lazy(() => import('@/pages/NoAccessPage').then(m => ({ default: m.NoAccessPage })));
+const StartPage = React.lazy(() => import('@/pages/StartPage').then(m => ({ default: m.StartPage })));
 
 /** Centered spinner fallback for lazy-loaded routes */
 function PageLoader() {
@@ -125,6 +127,16 @@ const router = createBrowserRouter([
     path: '/kein-zugriff',
     element: <ErrorBoundary>{withSuspense(<NoAccessPage />)}</ErrorBoundary>,
   },
+  {
+    element: (
+      <ProtectedRoute>
+        <StartLayout />
+      </ProtectedRoute>
+    ),
+    children: [
+      { path: '/start', element: withSuspense(<StartPage />) },
+    ],
+  },
   {
     element: (
       <ProtectedRoute>
@@ -132,7 +144,7 @@ const router = createBrowserRouter([
       </ProtectedRoute>
     ),
     children: [
-      { path: '/', element: withSuspense(<DashboardPage />) },
+      { path: '/', element: <Navigate to="/start" replace /> },
       { path: '/dashboard', element: withSuspense(<DashboardPage />) },
       { path: '/contacts', element: <PermissionRoute permission="contacts:read">{withSuspense(<ContactsListPage />)}</PermissionRoute> },
       { path: '/contacts/:id', element: <PermissionRoute permission="contacts:read">{withSuspense(<ContactDetailPage />)}</PermissionRoute> },