helpwave · DasProffi · Dec 8, 2025 · Dec 8, 2025
diff --git a/web/components/layout/Page.tsx b/web/components/layout/Page.tsx
@@ -8,15 +8,15 @@ import Link from 'next/link'
 import {
   Dialog,
   ExpansionIcon,
-  HelpwaveLogo,
+  HelpwaveLogo, IconButton, Input,
   MarkdownInterpreter,
   SolidButton,
   useLocalStorage
 } from '@helpwave/hightide'
 import { getConfig } from '@/utils/config'
 import { useTasksTranslation } from '@/i18n/useTasksTranslation'
 import clsx from 'clsx'
-import { CircleCheck, Grid2X2PlusIcon, User } from 'lucide-react'
+import { BellIcon, CircleCheck, Grid2X2PlusIcon, SettingsIcon, User } from 'lucide-react'
 import { usePathname } from 'next/navigation'
 
 export const StagingDisclaimerDialog = () => {
@@ -74,25 +74,26 @@ type HeaderProps = HTMLAttributes<HTMLHeadElement>
  * The basic header for most pages
  */
 export const Header = ({ ...props }: HeaderProps) => {
+  const translation = useTasksTranslation()
+
   return (
     <header
       {...props}
       className={clsx(
-        'flex-row-8 items-center justify-between grow max-h-18 p-4 bg-header-background text-header-text shadow-md rounded-lg',
+        'flex-row-8 items-center justify-between',
         props.className
       )}
     >
-      <div className="flex grow-1">
-        <Link href="/" className="flex-row-2 bg-surface text-on-surface items-center rounded-lg p-2">
-          <HelpwaveLogo className="min-h-7 min-w-7 p-0.5 bg-header-background rounded-md"/>
-          <span className="typography-title-md whitespace-nowrap">{'helpwave tasks'}</span>
-        </Link>
+      <div className="flex-col-0">
+        <Input placeholder={translation('search')}/>
       </div>
-      <div className="flex-col-0 grow-1 justify-center items-center">
-        <span className="typography-title-md">{'TK'}</span>
-        <span className="text-description">{'Test Klinkum'}</span>
-      </div>
-      <div className="flex-row-0 grow-1 justify-end">
+      <div className="flex-row-4 justify-end">
+        <IconButton color="neutral">
+          <BellIcon />
+        </IconButton>
+        <IconButton color="neutral">
+          <SettingsIcon />
+        </IconButton>
         <SolidButton color="neutral">
           {'User Name'}
           <ExpansionIcon isExpanded={false}/>
@@ -127,8 +128,8 @@ const SidebarLink = ({ children, route, ...props }: SidebarLinkProps) => {
     <Link
       {...props}
       className={clsx(
-        'flex-row-2 w-full px-2.5 py-1.5 rounded-md hover:bg-white/50 dark:hover:bg-black/50',
-        { 'bg-white dark:bg-black': route === props.href }
+        'flex-row-2 w-full px-2.5 py-1.5 rounded-md hover:bg-black/30',
+        { 'text-primary font-bold bg-black/10': route === props.href }
       )}
     >
       {children}
@@ -162,11 +163,15 @@ export const Sidebar = ({ ...props }: SidebarProps) => {
     <aside
       {...props}
       className={clsx(
-        'flex-col-4 w-50 min-w-56 rounded-lg bg-surface text-on-surface overflow-hidden mb-4 p-2.5',
+        'flex-col-4 w-50 min-w-56 rounded-lg bg-surface text-on-surface overflow-hidden p-2.5',
         props.className
       )}
     >
       <nav className="flex-col-2 overflow-auto">
+        <Link href="/" className="flex-row-2 text-primary items-center rounded-lg p-2 mb-8">
+          <HelpwaveLogo className="min-h-7 min-w-7 p-0.5 bg-header-background rounded-md"/>
+          <span className="typography-title-md whitespace-nowrap">{'helpwave tasks'}</span>
+        </Link>
         {/* TODO add station swticher here */}
         <SidebarLink href="/" route={route}>
           <Grid2X2PlusIcon className="-rotate-90"/>
@@ -203,14 +208,14 @@ export const Page = ({
                        pageTitle,
                      }: PageWithHeaderProps) => {
   return (
-    <div className="flex-col-4 h-screen w-screen overflow-hidden pt-4 pl-4">
+    <div className="flex-row-8 h-screen w-screen overflow-hidden">
       <Head>
         <title>{titleWrapper(pageTitle)}</title>
       </Head>
       <StagingDisclaimerDialog/>
-      <Header className="mr-4"/>
-      <div className="flex-row-4 grow overflow-hidden">
-        <Sidebar/>
+      <Sidebar className="my-4 ml-4"/>
+      <div className="flex-col-4 grow overflow-hidden">
+        <Header className="mr-4 mt-4 bg-background text-on-background"/>
         <main className="flex-col-2 grow overflow-auto">
           {children}
           <div className="min-h-16"/>

diff --git a/web/i18n/translations.ts b/web/i18n/translations.ts
@@ -25,9 +25,11 @@ export type TasksTranslationEntries = {
   'myTasks': string,
   'nBed': (values: { count: number }) => string,
   'nOrganization': (values: { count: number }) => string,
+  'notAssigned': string,
   'notes': string,
   'nPatient': (values: { count: number }) => string,
   'nRoom': (values: { count: number }) => string,
+  'nTask': (values: { count: number }) => string,
   'nWard': (values: { count: number }) => string,
   'pages.404.notFound': string,
   'pages.404.notFoundDescription1': string,
@@ -70,6 +72,7 @@ export const tasksTranslation: Translation<TasksTranslationLocales, Partial<Task
         'other': `${count} Organisationen`,
       })
     },
+    'notAssigned': `Nicht zugewiesen`,
     'notes': `Notizen`,
     'nPatient': ({ count }): string => {
       return TranslationGen.resolvePlural(count, {
@@ -83,6 +86,12 @@ export const tasksTranslation: Translation<TasksTranslationLocales, Partial<Task
         'other': `${count} Zimmer`,
       })
     },
+    'nTask': ({ count }): string => {
+      return TranslationGen.resolvePlural(count, {
+        '=1': `${count} Aufgabe`,
+        'other': `${count} Aufgaben`,
+      })
+    },
     'nWard': ({ count }): string => {
       return TranslationGen.resolvePlural(count, {
         '=1': `${count} Station`,
@@ -128,6 +137,7 @@ export const tasksTranslation: Translation<TasksTranslationLocales, Partial<Task
         'other': `${count} Organizations`,
       })
     },
+    'notAssigned': `Not assigned`,
     'notes': `notes`,
     'nPatient': ({ count }): string => {
       return TranslationGen.resolvePlural(count, {
@@ -141,6 +151,12 @@ export const tasksTranslation: Translation<TasksTranslationLocales, Partial<Task
         'other': `${count} Rooms`,
       })
     },
+    'nTask': ({ count }): string => {
+      return TranslationGen.resolvePlural(count, {
+        '=1': `${count} Task`,
+        'other': `${count} Tasks`,
+      })
+    },
     'nWard': ({ count }): string => {
       return TranslationGen.resolvePlural(count, {
         '=1': `${count} Ward`,

diff --git a/web/locales/de-DE.arb b/web/locales/de-DE.arb
@@ -39,6 +39,14 @@
       }
     }
   },
+  "nTask": "{count, plural, =1{# Aufgabe} other{# Aufgaben}}",
+  "@nTask": {
+    "placeholders": {
+      "count": {
+        "type": "number"
+      }
+    }
+  },
   "visibility": "Sichtbarkeit",
   "private": "Privat",
   "public": "Öffentlich",
@@ -61,5 +69,6 @@
   "rooms": "Zimmer",
   "loginRequired": "Login benötigt",
   "loginRequiredDescription": "Um diese Seite benutzen zu können musst du eingeloggt sein.",
-  "login": "Login"
+  "login": "Login",
+  "notAssigned": "Nicht zugewiesen"
 }
diff --git a/web/locales/en-US.arb b/web/locales/en-US.arb
@@ -39,6 +39,14 @@
       }
     }
   },
+  "nTask": "{count, plural, =1{# Task} other{# Tasks}}",
+  "@nTask": {
+    "placeholders": {
+      "count": {
+        "type": "number"
+      }
+    }
+  },
   "visibility": "Visibility",
   "private": "private",
   "public": "public",
@@ -61,5 +69,6 @@
   "rooms": "Rooms",
   "loginRequired": "Login required",
   "loginRequiredDescription": "To use this site you need to be logged in.",
-  "login": "Login"
+  "login": "Login",
+  "notAssigned": "Not assigned"
 }
diff --git a/web/next-env.d.ts b/web/next-env.d.ts
@@ -1,6 +1,6 @@
 /// <reference types="next" />
 /// <reference types="next/image-types/global" />
-import './build/dev/types/routes.d.ts'
+import "./build/dev/types/routes.d.ts";
 
 // NOTE: This file should not be edited
 // see https://nextjs.org/docs/pages/api-reference/config/typescript for more information.