-
+
{item.title}
{item.goal &&
{item.goal}
}
diff --git a/frontend/src/pages/MyActionsPage.jsx b/frontend/src/pages/MyActionsPage.jsx
new file mode 100644
index 0000000..f4019a5
--- /dev/null
+++ b/frontend/src/pages/MyActionsPage.jsx
@@ -0,0 +1,83 @@
+import { useCallback, useEffect, useState } from 'react'
+import { Link } from 'react-router-dom'
+import { listMyOpenActions } from '../api/actions.js'
+import { ActionList } from '../components/ActionList.jsx'
+import { EmptyState } from '../components/EmptyState.jsx'
+import { ErrorState } from '../components/ErrorState.jsx'
+import { LoadingState } from '../components/LoadingState.jsx'
+import { WidgetCard } from '../components/WidgetCard.jsx'
+
+export function MyActionsPage() {
+ const [actions, setActions] = useState([])
+ const [loading, setLoading] = useState(true)
+ const [error, setError] = useState(null)
+ const [hideDone, setHideDone] = useState(true)
+
+ const load = useCallback(async () => {
+ setLoading(true)
+ setError(null)
+ try {
+ const data = await listMyOpenActions()
+ setActions(data)
+ } catch (err) {
+ setError(err.message)
+ } finally {
+ setLoading(false)
+ }
+ }, [])
+
+ useEffect(() => {
+ load()
+ }, [load])
+
+ const visible = hideDone
+ ? actions.filter((a) => a.status !== 'done' && a.status !== 'discarded')
+ : actions
+
+ return (
+
+
+
+
+ Aktualisieren
+
+ }
+ >
+ {loading && }
+ {!loading && error && }
+ {!loading && !error && (
+ `/initiatives/${a.initiative_id}`}
+ empty={
+
+ }
+ />
+ )}
+
+
+
+
+ Zu den Vorhaben →
+
+
+
+ )
+}
diff --git a/frontend/src/pages/WorkspacePage.jsx b/frontend/src/pages/WorkspacePage.jsx
index ae37533..ed52d02 100644
--- a/frontend/src/pages/WorkspacePage.jsx
+++ b/frontend/src/pages/WorkspacePage.jsx
@@ -1,11 +1,11 @@
-import { Link } from 'react-router-dom'
import { useNavigate } from 'react-router-dom'
+import { useState } from 'react'
import { useCapabilities } from '../hooks/useCapabilities.js'
import { getWidgetsForArea } from '../registry/widgetRegistry.js'
import { useSession } from '../context/SessionContext.jsx'
import { InitiativeForm } from '../components/InitiativeForm.jsx'
import { createInitiative } from '../api/initiatives.js'
-import { useState } from 'react'
+import { Link } from 'react-router-dom'
export function WorkspacePage() {
const navigate = useNavigate()
@@ -34,14 +34,18 @@ export function WorkspacePage() {
}
return (
-
+
diff --git a/frontend/src/registry/registry.test.js b/frontend/src/registry/registry.test.js
index 408d990..cb8de87 100644
--- a/frontend/src/registry/registry.test.js
+++ b/frontend/src/registry/registry.test.js
@@ -1,6 +1,7 @@
import { describe, expect, it } from 'vitest'
import { WIDGETS, getWidgetsForArea } from '../registry/widgetRegistry.js'
import { VIEWS, getNavViews } from '../registry/viewRegistry.js'
+import { getAppNavItems, isNavItemActive } from '../config/appNav.js'
describe('widgetRegistry', () => {
it('contains expected AP0.6 widgets', () => {
@@ -25,10 +26,11 @@ describe('widgetRegistry', () => {
})
describe('viewRegistry', () => {
- it('contains workspace and initiatives views', () => {
+ it('contains workspace, initiatives and my actions views', () => {
const keys = VIEWS.map((v) => v.key)
expect(keys).toContain('kairo.workspace')
expect(keys).toContain('kairo.initiatives')
+ expect(keys).toContain('kairo.my_actions')
})
it('filters nav views by capability', () => {
@@ -37,3 +39,22 @@ describe('viewRegistry', () => {
expect(nav.some((v) => v.key === 'kairo.initiatives')).toBe(true)
})
})
+
+describe('appNav', () => {
+ it('maps views to nav items with icons', () => {
+ const items = getAppNavItems([
+ 'kairo.action.read',
+ 'kairo.initiative.read',
+ ])
+ expect(items.length).toBe(3)
+ expect(items[0].Icon).toBeTruthy()
+ })
+
+ it('highlights initiatives for detail route', () => {
+ const items = getAppNavItems(['kairo.action.read', 'kairo.initiative.read'])
+ const initiatives = items.find((i) => i.key === 'kairo.initiatives')
+ expect(
+ isNavItemActive('/initiatives/abc-123', initiatives, false),
+ ).toBe(true)
+ })
+})
diff --git a/frontend/src/registry/viewRegistry.js b/frontend/src/registry/viewRegistry.js
index 80f347d..f5f43ab 100644
--- a/frontend/src/registry/viewRegistry.js
+++ b/frontend/src/registry/viewRegistry.js
@@ -1,23 +1,16 @@
import { WorkspacePage } from '../pages/WorkspacePage.jsx'
import { InitiativesPage } from '../pages/InitiativesPage.jsx'
import { InitiativeDetailPage } from '../pages/InitiativeDetailPage.jsx'
+import { MyActionsPage } from '../pages/MyActionsPage.jsx'
-/**
- * @typedef {Object} ViewDefinition
- * @property {string} key
- * @property {string} path
- * @property {string} title
- * @property {string} [requiredCapability]
- * @property {import('react').ComponentType
} component
- * @property {boolean} [showInNav]
- */
-
-/** @type {ViewDefinition[]} */
+/** @type {import('./viewRegistry.js').ViewDefinition[]} */
export const VIEWS = [
{
key: 'kairo.workspace',
path: '/workspace',
title: 'Workspace',
+ navLabel: 'Workspace',
+ shortLabel: 'Start',
requiredCapability: 'kairo.action.read',
component: WorkspacePage,
showInNav: true,
@@ -26,10 +19,23 @@ export const VIEWS = [
key: 'kairo.initiatives',
path: '/initiatives',
title: 'Vorhaben',
+ navLabel: 'Vorhaben',
+ shortLabel: 'Vorhaben',
+ matchPrefix: '/initiatives',
requiredCapability: 'kairo.initiative.read',
component: InitiativesPage,
showInNav: true,
},
+ {
+ key: 'kairo.my_actions',
+ path: '/my-actions',
+ title: 'Meine Maßnahmen',
+ navLabel: 'Meine Maßnahmen',
+ shortLabel: 'Maßnahmen',
+ requiredCapability: 'kairo.action.read',
+ component: MyActionsPage,
+ showInNav: true,
+ },
{
key: 'kairo.initiative_detail',
path: '/initiatives/:id',
@@ -37,9 +43,23 @@ export const VIEWS = [
requiredCapability: 'kairo.initiative.read',
component: InitiativeDetailPage,
showInNav: false,
+ matchPrefix: '/initiatives',
},
]
+/**
+ * @typedef {Object} ViewDefinition
+ * @property {string} key
+ * @property {string} path
+ * @property {string} title
+ * @property {string} [navLabel]
+ * @property {string} [shortLabel]
+ * @property {string} [matchPrefix]
+ * @property {string} [requiredCapability]
+ * @property {import('react').ComponentType} component
+ * @property {boolean} [showInNav]
+ */
+
export function getNavViews(capabilities) {
const capSet = capabilities instanceof Set ? capabilities : new Set(capabilities)
return VIEWS.filter((v) => v.showInNav !== false)
diff --git a/frontend/src/styles/components.css b/frontend/src/styles/components.css
new file mode 100644
index 0000000..6bc3662
--- /dev/null
+++ b/frontend/src/styles/components.css
@@ -0,0 +1,564 @@
+/* Shared UI components — cards, buttons, forms, badges, states */
+
+.muted {
+ color: var(--jk-text-muted);
+ font-size: 0.92rem;
+}
+
+.error {
+ color: var(--jk-danger);
+ font-size: 0.92rem;
+}
+
+.card {
+ background: var(--jk-surface);
+ border: 1px solid var(--jk-border);
+ border-radius: var(--jk-radius-card);
+ padding: 16px;
+ box-shadow: var(--jk-shadow-card);
+}
+
+.card-header {
+ display: flex;
+ align-items: flex-start;
+ justify-content: space-between;
+ gap: 12px;
+ margin-bottom: 12px;
+}
+
+.card-title {
+ font-size: 13px;
+ font-weight: 600;
+ color: var(--jk-text-subtle);
+ text-transform: uppercase;
+ letter-spacing: 0.05em;
+ margin: 0;
+}
+
+.card-title--lg {
+ font-size: 1.15rem;
+ text-transform: none;
+ letter-spacing: -0.01em;
+ color: var(--jk-text);
+}
+
+.card-subtitle {
+ font-size: 0.85rem;
+ color: var(--jk-text-muted);
+ margin: 4px 0 0;
+}
+
+.card-body {
+ min-width: 0;
+}
+
+.card-footer {
+ margin-top: 12px;
+ padding-top: 12px;
+ border-top: 1px solid var(--jk-border);
+ font-size: 0.9rem;
+}
+
+.card--alert {
+ border-color: rgba(216, 90, 48, 0.25);
+ background: color-mix(in srgb, var(--jk-warning-bg) 40%, var(--jk-surface));
+}
+
+.widget-grid {
+ display: grid;
+ grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr));
+ gap: 14px;
+ align-items: stretch;
+}
+
+.btn {
+ display: inline-flex;
+ align-items: center;
+ justify-content: center;
+ gap: 6px;
+ padding: 0.55rem 1rem;
+ border-radius: 10px;
+ font: inherit;
+ font-size: 14px;
+ font-weight: 600;
+ cursor: pointer;
+ border: 1px solid transparent;
+ width: fit-content;
+ min-height: 44px;
+ transition: background 0.15s, border-color 0.15s, color 0.15s;
+}
+
+.btn:focus-visible {
+ outline: 2px solid var(--jk-primary);
+ outline-offset: 2px;
+}
+
+.btn:disabled {
+ opacity: 0.55;
+ cursor: not-allowed;
+}
+
+.btn-primary {
+ background: var(--jk-primary);
+ color: #fff;
+ border-color: var(--jk-primary);
+}
+
+.btn-primary:hover:not(:disabled) {
+ background: var(--jk-primary-dark);
+ border-color: var(--jk-primary-dark);
+}
+
+.btn-secondary {
+ background: var(--jk-surface);
+ color: var(--jk-text);
+ border-color: var(--jk-border-strong);
+}
+
+.btn-secondary:hover:not(:disabled) {
+ background: var(--jk-surface-raised);
+}
+
+.btn-ghost {
+ background: transparent;
+ color: var(--jk-primary);
+ border-color: transparent;
+ padding-left: 0.5rem;
+ padding-right: 0.5rem;
+ min-height: auto;
+ text-decoration: underline;
+ text-underline-offset: 2px;
+}
+
+.btn-block-mobile {
+ width: fit-content;
+}
+
+.link-inline {
+ color: var(--jk-primary);
+ font-weight: 600;
+ text-decoration: none;
+}
+
+.link-inline:hover {
+ text-decoration: underline;
+}
+
+.badge {
+ display: inline-flex;
+ align-items: center;
+ padding: 0.2rem 0.55rem;
+ border-radius: 999px;
+ font-size: 0.72rem;
+ font-weight: 600;
+ line-height: 1.3;
+ white-space: nowrap;
+}
+
+.status-active,
+.status-open {
+ background: var(--jk-primary-soft);
+ color: var(--jk-primary-dark);
+}
+
+.status-paused,
+.status-progress {
+ background: color-mix(in srgb, var(--jk-primary) 12%, var(--jk-surface));
+ color: var(--jk-primary);
+}
+
+.status-blocked {
+ background: var(--jk-warning-bg);
+ color: #7a4b08;
+}
+
+.status-done,
+.status-completed {
+ background: var(--jk-surface-raised);
+ color: var(--jk-text-muted);
+ border: 1px solid var(--jk-border);
+}
+
+.status-discarded,
+.status-archived {
+ background: var(--jk-surface-raised);
+ color: var(--jk-text-subtle);
+}
+
+.priority-low {
+ background: var(--jk-surface-raised);
+ color: var(--jk-text-muted);
+}
+
+.priority-normal {
+ background: var(--jk-primary-soft);
+ color: var(--jk-primary-dark);
+}
+
+.priority-high {
+ background: var(--jk-warning-bg);
+ color: #7a4b08;
+}
+
+.empty-state {
+ padding: 1rem 0.25rem;
+ color: var(--jk-text-muted);
+}
+
+.empty-state-title {
+ font-weight: 600;
+ color: var(--jk-text);
+ margin: 0 0 0.35rem;
+}
+
+.empty-state-message {
+ margin: 0;
+ font-size: 0.92rem;
+ line-height: 1.45;
+}
+
+.state-loading {
+ color: var(--jk-text-muted);
+ font-size: 0.92rem;
+ padding: 0.5rem 0;
+}
+
+.state-error {
+ color: var(--jk-danger);
+ font-size: 0.92rem;
+}
+
+.state-error .btn {
+ margin-top: 0.5rem;
+}
+
+.form {
+ display: grid;
+ gap: 0.85rem;
+}
+
+.form label,
+.form-field {
+ display: grid;
+ gap: 0.35rem;
+ font-size: 0.9rem;
+ font-weight: 500;
+ color: var(--jk-text);
+}
+
+.form input,
+.form textarea,
+.form select,
+.workspace-form input,
+.workspace-form textarea,
+.workspace-form select,
+.inline-select {
+ padding: 0.55rem 0.65rem;
+ border: 1px solid var(--jk-border-strong);
+ border-radius: 10px;
+ font: inherit;
+ width: 100%;
+ min-height: 44px;
+ background: var(--jk-surface);
+ color: var(--jk-text);
+}
+
+.form input:focus,
+.form textarea:focus,
+.form select:focus,
+.workspace-form input:focus,
+.workspace-form textarea:focus,
+.workspace-form select:focus {
+ outline: 2px solid color-mix(in srgb, var(--jk-primary) 35%, transparent);
+ border-color: var(--jk-primary);
+}
+
+.form-actions {
+ display: flex;
+ flex-wrap: wrap;
+ gap: 0.5rem;
+ margin-top: 0.25rem;
+}
+
+.item-list {
+ list-style: none;
+ margin: 0;
+ padding: 0;
+ display: grid;
+ gap: 10px;
+}
+
+.list-item {
+ display: flex;
+ flex-wrap: wrap;
+ justify-content: space-between;
+ gap: 0.65rem;
+ align-items: flex-start;
+}
+
+.card-list-item {
+ background: var(--jk-surface-raised);
+ border: 1px solid var(--jk-border);
+ border-radius: 10px;
+ padding: 12px;
+}
+
+.list-item-main {
+ flex: 1;
+ min-width: 0;
+}
+
+.list-item-desc {
+ margin: 0.35rem 0 0;
+ font-size: 0.9rem;
+ color: var(--jk-text-muted);
+ line-height: 1.4;
+}
+
+.list-item-sub {
+ font-size: 0.85rem;
+ display: block;
+ margin-top: 0.25rem;
+}
+
+.list-item-meta {
+ display: flex;
+ flex-wrap: wrap;
+ gap: 0.35rem;
+ align-items: center;
+}
+
+.list-item-link {
+ text-decoration: none;
+ color: inherit;
+}
+
+.list-item-link strong {
+ color: var(--jk-primary-dark);
+}
+
+.page-header {
+ display: flex;
+ flex-wrap: wrap;
+ justify-content: space-between;
+ align-items: flex-start;
+ gap: 1rem;
+ margin-bottom: 1.25rem;
+}
+
+.page-header h1 {
+ margin: 0 0 0.25rem;
+ font-size: 1.5rem;
+ letter-spacing: -0.02em;
+}
+
+.page-lead {
+ margin: 0;
+ color: var(--jk-text-muted);
+ font-size: 0.95rem;
+}
+
+.breadcrumb {
+ font-size: 0.88rem;
+ margin-bottom: 0.75rem;
+ color: var(--jk-text-muted);
+}
+
+.breadcrumb a {
+ color: var(--jk-primary);
+ text-decoration: none;
+}
+
+.detail-goal {
+ color: var(--jk-text-muted);
+ margin: 0.5rem 0 0;
+ line-height: 1.45;
+}
+
+.detail-badges {
+ display: flex;
+ gap: 0.35rem;
+ flex-wrap: wrap;
+ margin-top: 0.65rem;
+}
+
+.section-header {
+ display: flex;
+ flex-wrap: wrap;
+ justify-content: space-between;
+ align-items: center;
+ gap: 0.75rem;
+ margin-bottom: 1rem;
+}
+
+.section-header h2 {
+ margin: 0;
+ font-size: 1rem;
+}
+
+.section-actions {
+ display: flex;
+ flex-wrap: wrap;
+ gap: 0.75rem;
+ align-items: center;
+}
+
+.inline-form-card {
+ margin-bottom: 1rem;
+}
+
+.inline-form-block {
+ margin-bottom: 1rem;
+ padding-bottom: 1rem;
+ border-bottom: 1px solid var(--jk-border);
+}
+
+.checkbox-label {
+ display: flex;
+ align-items: center;
+ gap: 0.45rem;
+ font-size: 0.9rem;
+ min-height: 44px;
+}
+
+.actor-select {
+ border: 1px solid var(--jk-border);
+ border-radius: 10px;
+ padding: 0.75rem;
+ margin: 0;
+}
+
+.actor-select legend {
+ font-size: 0.9rem;
+ padding: 0 0.25rem;
+}
+
+.actor-select-hint {
+ font-size: 0.85rem;
+ margin: 0.35rem 0 0;
+}
+
+.action-controls {
+ align-items: center;
+}
+
+/* Auth shell */
+.auth-shell {
+ max-width: 440px;
+ margin: 0 auto;
+ padding: max(24px, env(safe-area-inset-top)) 16px 32px;
+ min-height: 100dvh;
+ display: flex;
+ flex-direction: column;
+ justify-content: center;
+}
+
+.auth-hero {
+ margin-bottom: 1.5rem;
+ text-align: center;
+}
+
+.auth-hero h1 {
+ margin: 0 0 0.35rem;
+ font-size: 1.75rem;
+ color: var(--jk-primary);
+ letter-spacing: -0.02em;
+}
+
+.auth-hero p {
+ margin: 0;
+ color: var(--jk-text-muted);
+}
+
+.auth-card {
+ margin-top: 0;
+}
+
+.setup-hint {
+ background: var(--jk-primary-soft);
+ border: 1px solid color-mix(in srgb, var(--jk-primary) 25%, transparent);
+ border-radius: 10px;
+ padding: 0.75rem;
+ font-size: 0.92rem;
+ margin: 0 0 1rem;
+ color: var(--jk-text);
+}
+
+.setup-hint-muted {
+ background: var(--jk-surface-raised);
+ border-color: var(--jk-border);
+}
+
+.tabs {
+ display: flex;
+ gap: 0.35rem;
+ margin-bottom: 1rem;
+}
+
+.tab {
+ background: var(--jk-surface-raised);
+ color: var(--jk-text-muted);
+ border: 1px solid var(--jk-border);
+ padding: 0.5rem 0.9rem;
+ border-radius: 10px;
+ font: inherit;
+ font-weight: 600;
+ cursor: pointer;
+ min-height: 44px;
+ width: auto;
+}
+
+.tab.active {
+ background: var(--jk-primary);
+ color: #fff;
+ border-color: var(--jk-primary);
+}
+
+.tab:disabled {
+ opacity: 0.45;
+ cursor: not-allowed;
+}
+
+@media (max-width: 768px) {
+ .page-header {
+ flex-direction: column;
+ align-items: stretch;
+ }
+
+ .section-actions {
+ width: 100%;
+ justify-content: space-between;
+ }
+
+ .btn-block-mobile {
+ width: 100%;
+ }
+
+ .form-actions .btn {
+ flex: 1 1 auto;
+ min-width: min(100%, 160px);
+ }
+
+ .list-item-meta {
+ width: 100%;
+ }
+
+ .action-controls {
+ width: 100%;
+ justify-content: flex-start;
+ }
+}
+
+@media (max-width: 390px) {
+ .widget-grid {
+ grid-template-columns: 1fr;
+ }
+
+ .nav-item {
+ min-width: 64px;
+ }
+
+ .nav-item span {
+ font-size: 9px;
+ }
+}
diff --git a/frontend/src/styles/pages.css b/frontend/src/styles/pages.css
new file mode 100644
index 0000000..2ae3e63
--- /dev/null
+++ b/frontend/src/styles/pages.css
@@ -0,0 +1,26 @@
+.context-dl {
+ margin: 0;
+ display: grid;
+ gap: 0.65rem;
+}
+
+.context-dl dt {
+ font-size: 0.72rem;
+ color: var(--jk-text-subtle);
+ text-transform: uppercase;
+ letter-spacing: 0.04em;
+}
+
+.context-dl dd {
+ margin: 0.1rem 0 0;
+ font-size: 0.95rem;
+ color: var(--jk-text);
+}
+
+.page-footer-link {
+ margin-top: 1.25rem;
+}
+
+.mt-sm {
+ margin-top: 0.75rem;
+}
diff --git a/frontend/src/styles/shell.css b/frontend/src/styles/shell.css
new file mode 100644
index 0000000..ee27334
--- /dev/null
+++ b/frontend/src/styles/shell.css
@@ -0,0 +1,402 @@
+/* App Shell — Desktop Sidebar + Mobile Bottom Nav (Family-Pattern) */
+
+*,
+*::before,
+*::after {
+ box-sizing: border-box;
+}
+
+html,
+body,
+#root {
+ height: 100%;
+}
+
+html {
+ -webkit-text-size-adjust: 100%;
+}
+
+body {
+ margin: 0;
+ font-family: var(--font);
+ background: var(--jk-bg);
+ color: var(--jk-text);
+}
+
+@media (max-width: 1023px) {
+ html,
+ body,
+ #root {
+ overflow-x: clip;
+ max-width: 100%;
+ }
+}
+
+.app-shell {
+ display: flex;
+ flex-direction: column;
+ min-height: 100%;
+ min-height: 100dvh;
+ width: 100%;
+ max-width: 100%;
+}
+
+.app-shell__column {
+ display: flex;
+ flex-direction: column;
+ flex: 1;
+ min-width: 0;
+ min-height: 100dvh;
+}
+
+.app-header {
+ display: flex;
+ align-items: center;
+ min-height: var(--header-h);
+ padding: 0 16px;
+ background: var(--jk-surface);
+ border-bottom: 1px solid var(--jk-border);
+ position: sticky;
+ top: 0;
+ z-index: 10;
+ gap: 12px;
+}
+
+.app-header--mobile {
+ flex-wrap: wrap;
+ align-items: stretch;
+ padding-bottom: 10px;
+}
+
+@media (max-width: 1023px) {
+ .app-header.app-header--mobile {
+ min-height: calc(var(--header-h) + env(safe-area-inset-top, 0px));
+ padding-top: env(safe-area-inset-top, 0px);
+ padding-left: max(16px, env(safe-area-inset-left, 0px));
+ padding-right: max(16px, env(safe-area-inset-right, 0px));
+ }
+}
+
+.app-header__top {
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+ gap: 12px;
+ width: 100%;
+ min-height: var(--header-h);
+}
+
+.app-brand {
+ display: flex;
+ flex-direction: column;
+ gap: 2px;
+ min-width: 0;
+}
+
+.app-brand__name {
+ font-size: 18px;
+ font-weight: 700;
+ color: var(--jk-primary);
+ letter-spacing: -0.02em;
+ line-height: 1.1;
+}
+
+.app-brand__family {
+ font-size: 11px;
+ font-weight: 500;
+ color: var(--jk-text-subtle);
+ letter-spacing: 0.04em;
+ text-transform: uppercase;
+}
+
+.app-main {
+ flex: 1;
+ min-width: 0;
+ max-width: 100%;
+ overflow-x: clip;
+ overflow-y: auto;
+ padding: 16px max(16px, env(safe-area-inset-right, 0px))
+ calc(var(--nav-h) + var(--nav-pad-top) + env(safe-area-inset-bottom, 0px) + 20px)
+ max(16px, env(safe-area-inset-left, 0px));
+}
+
+.app-page {
+ width: 100%;
+ max-width: var(--content-max);
+ margin: 0 auto;
+ min-width: 0;
+}
+
+/* Mobile Bottom Navigation */
+.bottom-nav {
+ position: fixed;
+ bottom: 0;
+ left: 0;
+ right: 0;
+ display: flex;
+ align-items: stretch;
+ background: var(--jk-surface);
+ border-top: 1px solid var(--jk-border);
+ box-shadow: 0 -4px 16px rgba(0, 0, 0, 0.06);
+ z-index: 20;
+ overflow-x: auto;
+ scrollbar-width: none;
+ gap: 4px;
+ padding: var(--nav-pad-top) max(8px, env(safe-area-inset-right, 0px))
+ env(safe-area-inset-bottom, 0px) max(8px, env(safe-area-inset-left, 0px));
+ min-height: calc(var(--nav-h) + var(--nav-pad-top) + env(safe-area-inset-bottom, 0px));
+}
+
+.bottom-nav::-webkit-scrollbar {
+ display: none;
+}
+
+.nav-item {
+ flex: 1 1 0;
+ min-width: 72px;
+ max-width: 120px;
+ min-height: 48px;
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ justify-content: center;
+ gap: 4px;
+ color: var(--jk-text-subtle);
+ text-decoration: none;
+ font-weight: 600;
+ padding: 6px 8px 8px;
+ border-radius: 10px;
+ -webkit-tap-highlight-color: transparent;
+ transition: color 0.15s, background 0.15s;
+}
+
+.nav-item span {
+ font-size: 10px;
+ line-height: 1.2;
+ text-align: center;
+}
+
+.nav-item.active {
+ color: var(--jk-primary);
+ background: var(--jk-primary-soft);
+}
+
+.nav-item:focus-visible {
+ outline: 2px solid var(--jk-primary);
+ outline-offset: 2px;
+}
+
+/* Desktop Sidebar */
+.desktop-sidebar {
+ display: none;
+ flex-direction: column;
+ width: var(--desktop-sidebar-width);
+ height: 100vh;
+ position: fixed;
+ left: 0;
+ top: 0;
+ z-index: 30;
+ background: var(--jk-surface);
+ border-right: 1px solid var(--jk-border);
+ padding: 16px 0;
+}
+
+.desktop-sidebar__brand {
+ display: flex;
+ align-items: center;
+ gap: 10px;
+ padding: 0 16px 20px;
+ border-bottom: 1px solid var(--jk-border);
+ margin-bottom: 12px;
+}
+
+.desktop-sidebar__logo {
+ width: 40px;
+ height: 40px;
+ border-radius: 50%;
+ border: 3px solid var(--jk-primary);
+ flex-shrink: 0;
+ background: var(--jk-primary-soft);
+}
+
+.desktop-sidebar__titles {
+ min-width: 0;
+}
+
+.desktop-sidebar__title {
+ font-size: 15px;
+ font-weight: 700;
+ color: var(--jk-primary);
+ letter-spacing: -0.02em;
+ line-height: 1.2;
+}
+
+.desktop-sidebar__subtitle {
+ font-size: 10px;
+ font-weight: 600;
+ color: var(--jk-text-subtle);
+ text-transform: uppercase;
+ letter-spacing: 0.06em;
+}
+
+.desktop-sidebar__nav {
+ display: flex;
+ flex-direction: column;
+ gap: 2px;
+ flex: 1;
+ overflow-y: auto;
+ padding: 0 0 12px;
+}
+
+.desktop-sidebar__link {
+ display: flex;
+ align-items: center;
+ gap: 10px;
+ padding: 10px 16px 10px 13px;
+ text-decoration: none;
+ color: var(--jk-text-muted);
+ font-size: 14px;
+ font-weight: 500;
+ border-left: 3px solid transparent;
+ border-radius: 0 8px 8px 0;
+ transition: background 0.15s, color 0.15s;
+}
+
+.desktop-sidebar__link:hover {
+ background: var(--jk-surface-raised);
+ color: var(--jk-text);
+}
+
+.desktop-sidebar__link--active {
+ background: var(--jk-primary-soft);
+ color: var(--jk-primary);
+ border-left-color: var(--jk-primary);
+}
+
+.desktop-sidebar__link:focus-visible {
+ outline: 2px solid var(--jk-primary);
+ outline-offset: -2px;
+}
+
+.desktop-sidebar__footer {
+ border-top: 1px solid var(--jk-border);
+ padding: 16px 12px;
+ display: flex;
+ flex-direction: column;
+ gap: 12px;
+}
+
+.desktop-sidebar__user-row {
+ display: flex;
+ align-items: center;
+ gap: 10px;
+}
+
+.desktop-sidebar__avatar {
+ width: 32px;
+ height: 32px;
+ border-radius: 50%;
+ background: var(--jk-primary);
+ color: #fff;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ font-weight: 600;
+ font-size: 14px;
+ flex-shrink: 0;
+}
+
+.desktop-sidebar__user-name {
+ font-size: 13px;
+ font-weight: 600;
+ color: var(--jk-text);
+ overflow: hidden;
+ text-overflow: ellipsis;
+ white-space: nowrap;
+}
+
+.desktop-sidebar__logout {
+ margin-left: auto;
+ flex-shrink: 0;
+ background: none;
+ border: none;
+ padding: 8px;
+ cursor: pointer;
+ color: var(--jk-text-subtle);
+ border-radius: 8px;
+ width: auto;
+}
+
+.desktop-sidebar__logout:hover {
+ color: var(--jk-danger);
+ background: rgba(216, 90, 48, 0.08);
+}
+
+.context-indicator {
+ width: 100%;
+ padding: 0 16px 8px;
+ font-size: 12px;
+ color: var(--jk-text-muted);
+ display: flex;
+ flex-wrap: wrap;
+ gap: 6px 12px;
+}
+
+.context-indicator__chip {
+ display: inline-flex;
+ align-items: center;
+ gap: 4px;
+ padding: 4px 8px;
+ background: var(--jk-surface-raised);
+ border: 1px solid var(--jk-border);
+ border-radius: 999px;
+ max-width: 100%;
+ overflow: hidden;
+ text-overflow: ellipsis;
+ white-space: nowrap;
+}
+
+@media (min-width: 769px) and (max-width: 1023px) {
+ .widget-grid {
+ grid-template-columns: repeat(2, minmax(0, 1fr));
+ }
+}
+
+@media (min-width: 1024px) {
+ .app-shell {
+ display: block;
+ }
+
+ .desktop-sidebar {
+ display: flex;
+ }
+
+ .app-shell__column {
+ margin-left: var(--desktop-sidebar-width);
+ width: calc(100% - var(--desktop-sidebar-width));
+ max-width: calc(100% - var(--desktop-sidebar-width));
+ }
+
+ .app-header--mobile {
+ display: none !important;
+ }
+
+ .bottom-nav {
+ display: none !important;
+ }
+
+ .app-main {
+ padding: 24px 32px 32px;
+ padding-bottom: max(32px, env(safe-area-inset-bottom, 0px));
+ }
+
+ .context-indicator--mobile {
+ display: none;
+ }
+}
+
+@media (max-width: 1023px) {
+ .context-indicator--desktop {
+ display: none;
+ }
+}
diff --git a/frontend/src/styles/tokens.css b/frontend/src/styles/tokens.css
new file mode 100644
index 0000000..8fb3dd9
--- /dev/null
+++ b/frontend/src/styles/tokens.css
@@ -0,0 +1,63 @@
+/**
+ * Jinkendo Family Design Tokens — Kairo AP0.6b
+ * Abgeleitet von Mitai/Shinkan (--accent #1D9E75, warme Neutrals).
+ */
+:root {
+ /* Aliase AP0.6b Spec */
+ --jk-bg: #f6f5f0;
+ --jk-surface: #ffffff;
+ --jk-surface-raised: #fafaf6;
+ --jk-text: #1c1b18;
+ --jk-text-muted: #5a5955;
+ --jk-text-subtle: #9a9892;
+ --jk-border: rgba(0, 0, 0, 0.09);
+ --jk-border-strong: rgba(0, 0, 0, 0.16);
+ --jk-primary: #1d9e75;
+ --jk-primary-soft: #e1f5ee;
+ --jk-primary-dark: #0a5c43;
+ --jk-danger: #d85a30;
+ --jk-warning: #ef9f27;
+ --jk-warning-bg: #faeeda;
+ --jk-success: #1d9e75;
+ --jk-radius-card: 12px;
+ --jk-shadow-card: 0 1px 3px rgba(0, 0, 0, 0.06);
+
+ /* Family-intern (Kompatibilität Shinkan/Mitai-Klassen) */
+ --bg: var(--jk-bg);
+ --surface: var(--jk-surface);
+ --surface2: var(--jk-surface-raised);
+ --border: var(--jk-border);
+ --border2: var(--jk-border-strong);
+ --text1: var(--jk-text);
+ --text2: var(--jk-text-muted);
+ --text3: var(--jk-text-subtle);
+ --accent: var(--jk-primary);
+ --accent-light: var(--jk-primary-soft);
+ --accent-dark: var(--jk-primary-dark);
+ --danger: var(--jk-danger);
+ --warn: var(--jk-warning);
+ --warn-bg: var(--jk-warning-bg);
+
+ --nav-h: 58px;
+ --nav-pad-top: 10px;
+ --header-h: 52px;
+ --desktop-sidebar-width: 220px;
+ --content-max: 1120px;
+ --font: system-ui, -apple-system, 'Segoe UI', sans-serif;
+}
+
+@media (prefers-color-scheme: dark) {
+ :root {
+ --jk-bg: #181816;
+ --jk-surface: #222220;
+ --jk-surface-raised: #1e1e1c;
+ --jk-text: #eeecea;
+ --jk-text-muted: #aaa9a4;
+ --jk-text-subtle: #686762;
+ --jk-border: rgba(255, 255, 255, 0.08);
+ --jk-border-strong: rgba(255, 255, 255, 0.14);
+ --jk-primary-soft: #04342c;
+ --jk-primary-dark: #5dcaa5;
+ --jk-shadow-card: 0 2px 8px rgba(0, 0, 0, 0.35);
+ }
+}
diff --git a/frontend/src/styles/workspace.css b/frontend/src/styles/workspace.css
deleted file mode 100644
index a2e04ff..0000000
--- a/frontend/src/styles/workspace.css
+++ /dev/null
@@ -1,400 +0,0 @@
-.app-layout {
- min-height: 100vh;
- display: flex;
- flex-direction: column;
-}
-
-.app-header {
- display: flex;
- flex-wrap: wrap;
- align-items: center;
- gap: 1rem;
- padding: 0.75rem 1.25rem;
- background: #fff;
- border-bottom: 1px solid #ddd;
-}
-
-.app-header-brand strong {
- color: #1a4d8f;
-}
-
-.app-nav {
- display: flex;
- gap: 0.5rem;
- flex: 1;
-}
-
-.nav-link {
- padding: 0.4rem 0.75rem;
- border-radius: 6px;
- text-decoration: none;
- color: #333;
- font-size: 0.95rem;
-}
-
-.nav-link.active {
- background: #eef4fc;
- color: #1a4d8f;
- font-weight: 600;
-}
-
-.app-header-user {
- display: flex;
- align-items: center;
- gap: 0.75rem;
-}
-
-.user-label {
- font-size: 0.9rem;
- color: #555;
-}
-
-.workspace-shell {
- max-width: 960px;
-}
-
-.auth-shell {
- max-width: 720px;
-}
-
-.page-header {
- display: flex;
- flex-wrap: wrap;
- justify-content: space-between;
- align-items: flex-start;
- gap: 1rem;
- margin-bottom: 1rem;
-}
-
-.page-header h1 {
- margin: 0 0 0.25rem;
-}
-
-.widget-grid {
- display: grid;
- grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
- gap: 1rem;
-}
-
-.widget-card {
- background: #fff;
- border: 1px solid #ddd;
- border-radius: 8px;
- padding: 1rem;
-}
-
-.widget-card-alert {
- border-color: #e8c4c4;
- background: #fffafa;
-}
-
-.widget-header {
- display: flex;
- justify-content: space-between;
- align-items: center;
- margin-bottom: 0.75rem;
-}
-
-.widget-header h3 {
- margin: 0;
- font-size: 1rem;
-}
-
-.widget-footer {
- margin: 0.75rem 0 0;
- font-size: 0.9rem;
-}
-
-.badge {
- display: inline-block;
- padding: 0.15rem 0.5rem;
- border-radius: 999px;
- font-size: 0.75rem;
- font-weight: 600;
-}
-
-.status-active,
-.status-open {
- background: #e6f4ea;
- color: #1e6b3a;
-}
-
-.status-paused,
-.status-progress {
- background: #eef4fc;
- color: #1a4d8f;
-}
-
-.status-blocked {
- background: #fdecea;
- color: #b00020;
-}
-
-.status-done,
-.status-completed {
- background: #eee;
- color: #555;
-}
-
-.status-discarded,
-.status-archived {
- background: #f3f3f3;
- color: #777;
-}
-
-.priority-low {
- background: #f3f3f3;
- color: #666;
-}
-
-.priority-normal {
- background: #eef4fc;
- color: #1a4d8f;
-}
-
-.priority-high {
- background: #fff3e0;
- color: #b45309;
-}
-
-.empty-state {
- padding: 1rem 0;
- color: #555;
-}
-
-.empty-state-title {
- font-weight: 600;
- margin: 0 0 0.35rem;
-}
-
-.empty-state-message {
- margin: 0;
- font-size: 0.92rem;
-}
-
-.state-loading {
- color: #555;
- font-size: 0.92rem;
-}
-
-.state-error {
- color: #b00020;
- font-size: 0.92rem;
-}
-
-.state-error button {
- margin-top: 0.5rem;
-}
-
-.item-list {
- list-style: none;
- margin: 0;
- padding: 0;
- display: grid;
- gap: 0.75rem;
-}
-
-.list-item {
- display: flex;
- flex-wrap: wrap;
- justify-content: space-between;
- gap: 0.5rem;
- align-items: flex-start;
-}
-
-.card-list-item {
- background: #fafafa;
- border: 1px solid #eee;
- border-radius: 6px;
- padding: 0.75rem;
-}
-
-.list-item-main {
- flex: 1;
- min-width: 180px;
-}
-
-.list-item-desc {
- margin: 0.35rem 0 0;
- font-size: 0.9rem;
- color: #555;
-}
-
-.list-item-sub {
- font-size: 0.85rem;
- display: block;
- margin-top: 0.25rem;
-}
-
-.list-item-meta {
- display: flex;
- flex-wrap: wrap;
- gap: 0.35rem;
- align-items: center;
-}
-
-.list-item-link {
- text-decoration: none;
- color: inherit;
-}
-
-.link-button {
- background: none;
- border: none;
- color: #1a4d8f;
- padding: 0;
- cursor: pointer;
- font: inherit;
- text-decoration: underline;
- width: auto;
-}
-
-.context-dl {
- margin: 0;
- display: grid;
- gap: 0.5rem;
-}
-
-.context-dl dt {
- font-size: 0.75rem;
- color: #777;
- text-transform: uppercase;
- letter-spacing: 0.03em;
-}
-
-.context-dl dd {
- margin: 0.1rem 0 0;
-}
-
-.workspace-form textarea,
-.workspace-form select {
- padding: 0.5rem 0.6rem;
- border: 1px solid #ccc;
- border-radius: 6px;
- font: inherit;
- width: 100%;
- box-sizing: border-box;
-}
-
-.form-actions {
- display: flex;
- gap: 0.5rem;
- flex-wrap: wrap;
-}
-
-.inline-form-card {
- margin-bottom: 1rem;
-}
-
-.section-header {
- display: flex;
- flex-wrap: wrap;
- justify-content: space-between;
- align-items: center;
- gap: 0.75rem;
- margin-bottom: 1rem;
-}
-
-.section-header h2 {
- margin: 0;
- font-size: 1.05rem;
-}
-
-.section-actions {
- display: flex;
- flex-wrap: wrap;
- gap: 0.75rem;
- align-items: center;
-}
-
-.breadcrumb {
- font-size: 0.9rem;
- margin-bottom: 0.75rem;
- color: #555;
-}
-
-.breadcrumb a {
- color: #1a4d8f;
-}
-
-.detail-goal {
- color: #555;
- margin: 0.5rem 0;
-}
-
-.detail-badges {
- display: flex;
- gap: 0.35rem;
- flex-wrap: wrap;
-}
-
-.action-controls {
- align-items: center;
-}
-
-.inline-select {
- padding: 0.35rem 0.5rem;
- border: 1px solid #ccc;
- border-radius: 6px;
- font: inherit;
-}
-
-.checkbox-label {
- display: flex;
- align-items: center;
- gap: 0.35rem;
- font-size: 0.9rem;
-}
-
-.actor-select {
- border: 1px solid #eee;
- border-radius: 6px;
- padding: 0.75rem;
- margin: 0;
-}
-
-.actor-select legend {
- font-size: 0.9rem;
- padding: 0 0.25rem;
-}
-
-.actor-select-hint {
- font-size: 0.85rem;
- margin: 0.35rem 0 0;
-}
-
-.inline-filter {
- font-size: 0.85rem;
-}
-
-.page-footer-link {
- margin-top: 1.5rem;
-}
-
-@media (max-width: 640px) {
- .app-header {
- flex-direction: column;
- align-items: stretch;
- }
-
- .app-nav {
- order: 3;
- width: 100%;
- }
-
- .widget-grid {
- grid-template-columns: 1fr;
- }
-
- .page-header {
- flex-direction: column;
- }
-
- button {
- width: 100%;
- }
-
- .form-actions button {
- width: auto;
- }
-}
diff --git a/frontend/src/widgets/BlockedActionsWidget.jsx b/frontend/src/widgets/BlockedActionsWidget.jsx
index c8540e7..ca8cead 100644
--- a/frontend/src/widgets/BlockedActionsWidget.jsx
+++ b/frontend/src/widgets/BlockedActionsWidget.jsx
@@ -5,6 +5,7 @@ import { ActionList } from '../components/ActionList.jsx'
import { EmptyState } from '../components/EmptyState.jsx'
import { ErrorState } from '../components/ErrorState.jsx'
import { LoadingState } from '../components/LoadingState.jsx'
+import { WidgetCard } from '../components/WidgetCard.jsx'
export function BlockedActionsWidget() {
const [actions, setActions] = useState([])
@@ -29,13 +30,16 @@ export function BlockedActionsWidget() {
}, [load])
return (
-
-
-
Blockierte Maßnahmen
-
-
+ }
+ >
{loading &&
}
{!loading && error &&
}
{!loading && !error && (
@@ -47,8 +51,12 @@ export function BlockedActionsWidget() {
/>
)}
{!loading && !error && actions.length > 0 && (
-
Blockierte Maßnahmen erfordern Aufmerksamkeit.
+
+
+ In „Meine Maßnahmen“ bearbeiten
+
+
)}
-
-
-
Aktive Vorhaben
-
+
Alle
-
+ }
+ >
{loading &&
}
{!loading && error &&
}
{!loading && !error && initiatives.length === 0 && (
@@ -47,7 +49,7 @@ export function InitiativesWidget() {
{!loading && !error && initiatives.length > 0 && (
{initiatives.map((item) => (
- -
+
-
{item.title}
@@ -59,6 +61,6 @@ export function InitiativesWidget() {
))}
)}
-
-
-
Meine offenen Maßnahmen
-
-
+ }
+ footer={
+ actions.length > 0 ? (
+
+ Alle meine Maßnahmen →
+
+ ) : null
+ }
+ >
{loading &&
}
{!loading && error &&
}
{!loading && !error && (
@@ -48,11 +58,6 @@ export function MyOpenActionsWidget() {
}
/>
)}
- {!loading && !error && actions.length > 0 && (
-
- Alle Vorhaben →
-
- )}
-
-
Kontext
-
Kein aktiver Tenant — bitte Tenant wählen.
-
-
Kontext
-
-
-
- Nutzer
- - {me?.display_name}
-
-
-
- Tenant
- - {context.tenant.name}
-
-
-
- Tenant-Rolle
- - {context.tenant.role}
-
- {context.actor && (
+
+ {!context?.tenant ? (
+ Kein aktiver Tenant — bitte Tenant wählen.
+ ) : (
+
-
- Actor
- -
- {context.actor.type} · {context.actor.id.slice(0, 8)}…
-
+ - Nutzer
+ - {me?.display_name}
- )}
-
-
+
Tenant
+ {context.tenant.name}
+
+
+
Tenant-Rolle
+ {context.tenant.role}
+
+ {context.actor && (
+
+
Actor
+ {context.actor.type}
+
+ )}
+
+ )}
+
)
}