From ccadd4556c4c4ad30524f94b5959b34d09f97247 Mon Sep 17 00:00:00 2001
From: FlorianEisenmenger <f.eisenmenger@spawntree.de>
Date: Sun, 24 May 2026 02:25:59 +0200
Subject: [PATCH] twigs in atoms

---
 .../templates/_atoms/duration-help.html.twig  |   5 +
 .../_atoms/icon-arrow-left.html.twig          |   4 +
 .../_atoms/icon-arrow-right.html.twig         |   4 +
 .../templates/_atoms/icon-calendar.html.twig  |   9 ++
 .../templates/_atoms/icon-delete.html.twig    |   4 +
 httpdocs/templates/_atoms/icon-edit.html.twig |   4 +
 .../templates/_atoms/icon-restore.html.twig   |   5 +
 .../_components/register-card.html.twig       |   9 ++
 .../_components/register-success.html.twig    |  14 ++
 .../nav.html.twig}                            |   2 +-
 .../templates/_sections/tt-header.html.twig   |  59 ++++++++
 httpdocs/templates/base.html.twig             |   2 +-
 httpdocs/templates/client/index.html.twig     |   6 +-
 .../registration/confirm_error.html.twig      |  24 ++--
 .../registration/confirmed.html.twig          |  29 ++--
 .../templates/registration/register.html.twig | 129 +++++++++---------
 .../timetracking/_entry_row.html.twig         |  13 +-
 .../templates/timetracking/week.html.twig     |  71 +---------
 18 files changed, 218 insertions(+), 175 deletions(-)
 create mode 100644 httpdocs/templates/_atoms/duration-help.html.twig
 create mode 100644 httpdocs/templates/_atoms/icon-arrow-left.html.twig
 create mode 100644 httpdocs/templates/_atoms/icon-arrow-right.html.twig
 create mode 100644 httpdocs/templates/_atoms/icon-calendar.html.twig
 create mode 100644 httpdocs/templates/_atoms/icon-delete.html.twig
 create mode 100644 httpdocs/templates/_atoms/icon-edit.html.twig
 create mode 100644 httpdocs/templates/_atoms/icon-restore.html.twig
 create mode 100644 httpdocs/templates/_components/register-card.html.twig
 create mode 100644 httpdocs/templates/_components/register-success.html.twig
 rename httpdocs/templates/{_nav.html.twig => _sections/nav.html.twig} (97%)
 create mode 100644 httpdocs/templates/_sections/tt-header.html.twig

diff --git a/httpdocs/templates/_atoms/duration-help.html.twig b/httpdocs/templates/_atoms/duration-help.html.twig
new file mode 100644
index 0000000..d12de02
--- /dev/null
+++ b/httpdocs/templates/_atoms/duration-help.html.twig
@@ -0,0 +1,5 @@
+{# templates/_atoms/duration-help.html.twig #}
+<div class="duration-help">
+  <span class="duration-help__icon">?</span>
+  <span class="duration-help__hint">{{ 'app.entry.duration_hint'|trans }}</span>
+</div>
diff --git a/httpdocs/templates/_atoms/icon-arrow-left.html.twig b/httpdocs/templates/_atoms/icon-arrow-left.html.twig
new file mode 100644
index 0000000..bbac937
--- /dev/null
+++ b/httpdocs/templates/_atoms/icon-arrow-left.html.twig
@@ -0,0 +1,4 @@
+{# templates/_atoms/icon-arrow-left.html.twig #}
+<svg viewBox="0 0 8 14" fill="none">
+  <path d="M7 1L1 7L7 13" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>
diff --git a/httpdocs/templates/_atoms/icon-arrow-right.html.twig b/httpdocs/templates/_atoms/icon-arrow-right.html.twig
new file mode 100644
index 0000000..6f01f5b
--- /dev/null
+++ b/httpdocs/templates/_atoms/icon-arrow-right.html.twig
@@ -0,0 +1,4 @@
+{# templates/_atoms/icon-arrow-right.html.twig #}
+<svg viewBox="0 0 8 14" fill="none">
+  <path d="M1 1L7 7L1 13" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>
diff --git a/httpdocs/templates/_atoms/icon-calendar.html.twig b/httpdocs/templates/_atoms/icon-calendar.html.twig
new file mode 100644
index 0000000..e01ea8e
--- /dev/null
+++ b/httpdocs/templates/_atoms/icon-calendar.html.twig
@@ -0,0 +1,9 @@
+{# templates/_atoms/icon-calendar.html.twig #}
+<svg viewBox="0 0 18 18" fill="none">
+  <rect x="1" y="3" width="16" height="14" rx="2" stroke="currentColor" stroke-width="1.5"/>
+  <path d="M1 7h16" stroke="currentColor" stroke-width="1.5"/>
+  <path d="M5 1v4M13 1v4" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/>
+  <rect x="4" y="10" width="2" height="2" rx="0.5" fill="currentColor"/>
+  <rect x="8" y="10" width="2" height="2" rx="0.5" fill="currentColor"/>
+  <rect x="12" y="10" width="2" height="2" rx="0.5" fill="currentColor"/>
+</svg>
diff --git a/httpdocs/templates/_atoms/icon-delete.html.twig b/httpdocs/templates/_atoms/icon-delete.html.twig
new file mode 100644
index 0000000..a6b773e
--- /dev/null
+++ b/httpdocs/templates/_atoms/icon-delete.html.twig
@@ -0,0 +1,4 @@
+{# templates/_atoms/icon-delete.html.twig #}
+<svg viewBox="0 0 16 16" fill="none">
+  <path d="M3 4h10M6 4V2h4v2M5 4l.5 9h5l.5-9" stroke="currentColor" stroke-width="1.3" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>
diff --git a/httpdocs/templates/_atoms/icon-edit.html.twig b/httpdocs/templates/_atoms/icon-edit.html.twig
new file mode 100644
index 0000000..fd357be
--- /dev/null
+++ b/httpdocs/templates/_atoms/icon-edit.html.twig
@@ -0,0 +1,4 @@
+{# templates/_atoms/icon-edit.html.twig #}
+<svg viewBox="0 0 16 16" fill="none">
+  <path d="M11 2l3 3L5 14H2v-3L11 2z" stroke="currentColor" stroke-width="1.3" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>
diff --git a/httpdocs/templates/_atoms/icon-restore.html.twig b/httpdocs/templates/_atoms/icon-restore.html.twig
new file mode 100644
index 0000000..13f7400
--- /dev/null
+++ b/httpdocs/templates/_atoms/icon-restore.html.twig
@@ -0,0 +1,5 @@
+{# templates/_atoms/icon-restore.html.twig #}
+<svg viewBox="0 0 16 16" fill="none">
+  <path d="M2 8a6 6 0 1 1 1.5 3.5" stroke="currentColor" stroke-width="1.3" stroke-linecap="round"/>
+  <path d="M2 13V9h4" stroke="currentColor" stroke-width="1.3" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>
diff --git a/httpdocs/templates/_components/register-card.html.twig b/httpdocs/templates/_components/register-card.html.twig
new file mode 100644
index 0000000..2230ec4
--- /dev/null
+++ b/httpdocs/templates/_components/register-card.html.twig
@@ -0,0 +1,9 @@
+{# templates/_components/register-card.html.twig #}
+{# Nutzung: {% embed '_components/register-card.html.twig' %}
+              {% block content %}...{% endblock %}
+            {% endembed %} #}
+<div class="register-page">
+  <div class="register-card">
+    {% block content %}{% endblock %}
+  </div>
+</div>
diff --git a/httpdocs/templates/_components/register-success.html.twig b/httpdocs/templates/_components/register-success.html.twig
new file mode 100644
index 0000000..308078a
--- /dev/null
+++ b/httpdocs/templates/_components/register-success.html.twig
@@ -0,0 +1,14 @@
+{# templates/_components/register-success.html.twig #}
+{# Variablen:
+   icon     — z.B. '✓' oder '✕'
+   modifier — z.B. '' oder '--error' (optionaler BEM-Modifier auf __icon)
+   title    — String
+   text     — String, wird mit |raw ausgegeben (darf <br> enthalten)
+   btn_href — URL-String
+   btn_label — String #}
+<div class="register-success">
+  <div class="register-success__icon{% if modifier is defined and modifier %} register-success__icon{{ modifier }}{% endif %}">{{ icon }}</div>
+  <h1 class="register-success__title">{{ title }}</h1>
+  <p class="register-success__text">{{ text|raw }}</p>
+  <a href="{{ btn_href }}" class="btn btn-primary" style="margin-top: 1.5rem;">{{ btn_label }}</a>
+</div>
diff --git a/httpdocs/templates/_nav.html.twig b/httpdocs/templates/_sections/nav.html.twig
similarity index 97%
rename from httpdocs/templates/_nav.html.twig
rename to httpdocs/templates/_sections/nav.html.twig
index 04358b1..b996192 100644
--- a/httpdocs/templates/_nav.html.twig
+++ b/httpdocs/templates/_sections/nav.html.twig
@@ -1,4 +1,4 @@
-{# templates/_nav.html.twig #}
+{# templates/_sections/nav.html.twig #}
 {% set currentRoute = app.request.attributes.get('_route') %}
 
 <nav class="main-nav">
diff --git a/httpdocs/templates/_sections/tt-header.html.twig b/httpdocs/templates/_sections/tt-header.html.twig
new file mode 100644
index 0000000..8d2d31c
--- /dev/null
+++ b/httpdocs/templates/_sections/tt-header.html.twig
@@ -0,0 +1,59 @@
+{# templates/_sections/tt-header.html.twig #}
+{# Erwartet im Kontext: currentDate, todayStr, tomorrowStr, yesterdayStr,
+   months, monthsShort, weekdays, weekDays, currentWeekNumber,
+   prevWeekUrl, nextWeekUrl #}
+
+<header class="tt-header">
+  <div class="tt-header__meta">
+    <div class="tt-header__date">
+      {% set activStr   = currentDate|date('Y-m-d') %}
+      {% set monthName  = months[currentDate|date('n') - 1] %}
+      {% set weekdayIdx = currentDate|date('N') - 1 %}
+      {% if activStr == todayStr %}
+        {{ 'app.date.today'|trans }}, {{ currentDate|date('j') }}. {{ monthName }}
+      {% elseif activStr == tomorrowStr %}
+        {{ 'app.date.tomorrow'|trans }}, {{ currentDate|date('j') }}. {{ monthName }}
+      {% elseif activStr == yesterdayStr %}
+        {{ 'app.date.yesterday'|trans }}, {{ currentDate|date('j') }}. {{ monthName }}
+      {% else %}
+        {{ weekdays[weekdayIdx] }}, {{ currentDate|date('j') }}. {{ monthName }}
+      {% endif %}
+    </div>
+    <div class="tt-header__kw">{{ 'app.date.week_label'|trans }} {{ currentWeekNumber }}</div>
+  </div>
+
+  <nav class="week-nav"
+       aria-label="{{ 'app.date.week_label'|trans }}"
+       data-active-date="{{ currentDate|date('Y-m-d') }}">
+
+    <a href="{{ prevWeekUrl }}"
+       class="week-nav__arrow week-nav__arrow--prev"
+       title="{{ 'app.nav.prev_week'|trans }}">
+      {% include '_atoms/icon-arrow-left.html.twig' %}
+    </a>
+
+    <div class="week-nav__days">
+      {% for day in weekDays %}
+        {% set dayMonthShort = monthsShort[day.date|date('n') - 1] %}
+        <a href="{{ path('timetracking_week_date', { date: day.date|date('Y-m-d') }) }}"
+           class="week-nav__day{% if day.isActive %} week-nav__day--active{% endif %}{% if day.isToday %} week-nav__day--today{% endif %}"
+           data-date="{{ day.date|date('Y-m-d') }}"
+           {% if day.isActive %}aria-current="date"{% endif %}>
+          <span class="week-nav__day-name">{{ day.short }}</span>
+          <span class="week-nav__day-date">{{ day.date|date('d') }}. {{ dayMonthShort }}</span>
+        </a>
+      {% endfor %}
+    </div>
+
+    <button class="week-nav__cal" title="{{ 'app.nav.month_view'|trans }}">
+      {% include '_atoms/icon-calendar.html.twig' %}
+    </button>
+
+    <a href="{{ nextWeekUrl }}"
+       class="week-nav__arrow week-nav__arrow--next"
+       title="{{ 'app.nav.next_week'|trans }}">
+      {% include '_atoms/icon-arrow-right.html.twig' %}
+    </a>
+
+  </nav>
+</header>
diff --git a/httpdocs/templates/base.html.twig b/httpdocs/templates/base.html.twig
index dd7e204..1007914 100644
--- a/httpdocs/templates/base.html.twig
+++ b/httpdocs/templates/base.html.twig
@@ -20,7 +20,7 @@
         {% endif %}
     </head>
     <body>
-        {% include '_nav.html.twig' %}
+        {% include '_sections/nav.html.twig' %}
         {% block body %}{% endblock %}
     </body>
 </html>
diff --git a/httpdocs/templates/client/index.html.twig b/httpdocs/templates/client/index.html.twig
index 89736f8..80a066b 100644
--- a/httpdocs/templates/client/index.html.twig
+++ b/httpdocs/templates/client/index.html.twig
@@ -72,14 +72,14 @@ window.CRUD = {
           <div class="crud-row__actions">
             {% if client.isArchived() %}
               <button class="crud-row__btn crud-row__btn--restore" data-action="unarchive" title="Wiederherstellen">
-                <svg viewBox="0 0 16 16" fill="none"><path d="M2 8a6 6 0 1 1 1.5 3.5" stroke="currentColor" stroke-width="1.3" stroke-linecap="round"/><path d="M2 13V9h4" stroke="currentColor" stroke-width="1.3" stroke-linecap="round" stroke-linejoin="round"/></svg>
+                {% include '_atoms/icon-restore.html.twig' %}
               </button>
             {% else %}
               <button class="crud-row__btn crud-row__btn--edit" data-action="edit" title="Bearbeiten">
-                <svg viewBox="0 0 16 16" fill="none"><path d="M11 2l3 3L5 14H2v-3L11 2z" stroke="currentColor" stroke-width="1.3" stroke-linecap="round" stroke-linejoin="round"/></svg>
+                {% include '_atoms/icon-edit.html.twig' %}
               </button>
               <button class="crud-row__btn crud-row__btn--delete" data-action="delete" title="Löschen">
-                <svg viewBox="0 0 16 16" fill="none"><path d="M3 4h10M6 4V2h4v2M5 4l.5 9h5l.5-9" stroke="currentColor" stroke-width="1.3" stroke-linecap="round" stroke-linejoin="round"/></svg>
+                {% include '_atoms/icon-delete.html.twig' %}
               </button>
             {% endif %}
           </div>
diff --git a/httpdocs/templates/registration/confirm_error.html.twig b/httpdocs/templates/registration/confirm_error.html.twig
index 21cd9d9..184ab1b 100644
--- a/httpdocs/templates/registration/confirm_error.html.twig
+++ b/httpdocs/templates/registration/confirm_error.html.twig
@@ -9,18 +9,18 @@
 </head>
 <body class="register-body">
 
-<div class="register-page">
-    <div class="register-card">
-        <div class="register-success">
-            <div class="register-success__icon register-success__icon--error">✕</div>
-            <h1 class="register-success__title">{{ 'app.confirm_error.title'|trans }}</h1>
-            <p class="register-success__text">{{ error }}</p>
-            <a href="{{ path('app_register') }}" class="btn btn-primary" style="margin-top: 1.5rem;">
-                {{ 'app.confirm_error.btn_retry'|trans }}
-            </a>
-        </div>
-    </div>
-</div>
+{% embed '_components/register-card.html.twig' %}
+  {% block content %}
+    {% include '_components/register-success.html.twig' with {
+      icon:      '✕',
+      modifier:  '--error',
+      title:     'app.confirm_error.title'|trans,
+      text:      error,
+      btn_href:  path('app_register'),
+      btn_label: 'app.confirm_error.btn_retry'|trans,
+    } %}
+  {% endblock %}
+{% endembed %}
 
 </body>
 </html>
diff --git a/httpdocs/templates/registration/confirmed.html.twig b/httpdocs/templates/registration/confirmed.html.twig
index c44b986..389423a 100644
--- a/httpdocs/templates/registration/confirmed.html.twig
+++ b/httpdocs/templates/registration/confirmed.html.twig
@@ -10,21 +10,20 @@
 </head>
 <body class="register-body">
 
-<div class="register-page">
-    <div class="register-card">
-        <div class="register-success">
-            <div class="register-success__icon">✓</div>
-            <h1 class="register-success__title">{{ 'app.confirmed.title'|trans }}</h1>
-            <p class="register-success__text">
-                {{ 'app.confirmed.welcome'|trans({'%name%': account.name}) }}<br>
-                {{ 'app.confirmed.redirect'|trans }}
-            </p>
-            <a href="{{ redirectUrl }}" class="btn btn-primary" style="margin-top: 1.5rem;">
-                {{ 'app.confirmed.btn_login'|trans }}
-            </a>
-        </div>
-    </div>
-</div>
+{% set successText %}{{ 'app.confirmed.welcome'|trans({'%name%': account.name}) }}<br>{{ 'app.confirmed.redirect'|trans }}{% endset %}
+
+{% embed '_components/register-card.html.twig' %}
+  {% block content %}
+    {% include '_components/register-success.html.twig' with {
+      icon:      '✓',
+      modifier:  '',
+      title:     'app.confirmed.title'|trans,
+      text:      successText,
+      btn_href:  redirectUrl,
+      btn_label: 'app.confirmed.btn_login'|trans,
+    } %}
+  {% endblock %}
+{% endembed %}
 
 </body>
 </html>
diff --git a/httpdocs/templates/registration/register.html.twig b/httpdocs/templates/registration/register.html.twig
index d6204bd..a2f3d6a 100644
--- a/httpdocs/templates/registration/register.html.twig
+++ b/httpdocs/templates/registration/register.html.twig
@@ -9,85 +9,86 @@
 </head>
 <body class="register-body">
 
-<div class="register-page">
-    <div class="register-card">
+{% embed '_components/register-card.html.twig' %}
+  {% block content %}
 
-        <div class="register-card__brand">
-            <a href="{{ path('app_home') }}">spawntree Timetracker</a>
-        </div>
-        <h1 class="register-card__title">{{ 'app.register.title'|trans }}</h1>
-        <p class="register-card__sub">{{ 'app.register.subtitle'|trans }}</p>
+    <div class="register-card__brand">
+        <a href="{{ path('app_home') }}">spawntree Timetracker</a>
+    </div>
+    <h1 class="register-card__title">{{ 'app.register.title'|trans }}</h1>
+    <p class="register-card__sub">{{ 'app.register.subtitle'|trans }}</p>
 
-        <div id="register-errors" class="register-errors" role="alert"></div>
+    <div id="register-errors" class="register-errors" role="alert"></div>
 
-        <form id="register-form" novalidate>
+    <form id="register-form" novalidate>
 
-            <fieldset class="register-fieldset">
-                <legend class="register-fieldset__legend">{{ 'app.register.section_company'|trans }}</legend>
+        <fieldset class="register-fieldset">
+            <legend class="register-fieldset__legend">{{ 'app.register.section_company'|trans }}</legend>
 
-                <div class="register-field">
-                    <label class="register-field__label" for="companyName">{{ 'app.register.label_company_name'|trans }}</label>
-                    <input class="input"
-                           type="text"
-                           id="companyName"
-                           name="companyName"
-                           placeholder="{{ 'app.register.placeholder_company_name'|trans }}"
-                           autocomplete="organization"
-                           required />
-                    <div class="register-field__hint">
-                        {{ 'app.register.url_preview_label'|trans }} <strong id="slug-preview" class="register-field__slug">…</strong>
-                    </div>
+            <div class="register-field">
+                <label class="register-field__label" for="companyName">{{ 'app.register.label_company_name'|trans }}</label>
+                <input class="input"
+                       type="text"
+                       id="companyName"
+                       name="companyName"
+                       placeholder="{{ 'app.register.placeholder_company_name'|trans }}"
+                       autocomplete="organization"
+                       required />
+                <div class="register-field__hint">
+                    {{ 'app.register.url_preview_label'|trans }} <strong id="slug-preview" class="register-field__slug">…</strong>
                 </div>
-            </fieldset>
+            </div>
+        </fieldset>
 
-            <fieldset class="register-fieldset">
-                <legend class="register-fieldset__legend">{{ 'app.register.section_account'|trans }}</legend>
+        <fieldset class="register-fieldset">
+            <legend class="register-fieldset__legend">{{ 'app.register.section_account'|trans }}</legend>
 
-                <div class="register-field-row">
-                    <div class="register-field">
-                        <label class="register-field__label" for="firstName">{{ 'app.register.label_first_name'|trans }}</label>
-                        <input class="input" type="text" id="firstName" name="firstName"
-                               autocomplete="given-name" required />
-                    </div>
-                    <div class="register-field">
-                        <label class="register-field__label" for="lastName">{{ 'app.register.label_last_name'|trans }}</label>
-                        <input class="input" type="text" id="lastName" name="lastName"
-                               autocomplete="family-name" required />
-                    </div>
+            <div class="register-field-row">
+                <div class="register-field">
+                    <label class="register-field__label" for="firstName">{{ 'app.register.label_first_name'|trans }}</label>
+                    <input class="input" type="text" id="firstName" name="firstName"
+                           autocomplete="given-name" required />
                 </div>
-
                 <div class="register-field">
-                    <label class="register-field__label" for="email">{{ 'app.register.label_email'|trans }}</label>
-                    <input class="input" type="email" id="email" name="email"
-                           autocomplete="email" required />
+                    <label class="register-field__label" for="lastName">{{ 'app.register.label_last_name'|trans }}</label>
+                    <input class="input" type="text" id="lastName" name="lastName"
+                           autocomplete="family-name" required />
                 </div>
+            </div>
 
-                <div class="register-field-row">
-                    <div class="register-field">
-                        <label class="register-field__label" for="password">{{ 'app.register.label_password'|trans }}</label>
-                        <input class="input" type="password" id="password" name="password"
-                               autocomplete="new-password" minlength="8" required />
-                    </div>
-                    <div class="register-field">
-                        <label class="register-field__label" for="passwordRepeat">{{ 'app.register.label_password_repeat'|trans }}</label>
-                        <input class="input" type="password" id="passwordRepeat" name="passwordRepeat"
-                               autocomplete="new-password" required />
-                    </div>
-                </div>
-            </fieldset>
+            <div class="register-field">
+                <label class="register-field__label" for="email">{{ 'app.register.label_email'|trans }}</label>
+                <input class="input" type="email" id="email" name="email"
+                       autocomplete="email" required />
+            </div>
 
-            <div class="register-actions">
-                <button type="submit" id="submit-btn" class="btn btn-primary register-actions__submit">
-                    {{ 'app.register.btn_submit'|trans }}
-                </button>
-                <p class="register-actions__login">
-                    {{ 'app.register.already_registered'|trans }} <a href="{{ path('app_home') }}">{{ 'app.register.link_login'|trans }}</a>
-                </p>
+            <div class="register-field-row">
+                <div class="register-field">
+                    <label class="register-field__label" for="password">{{ 'app.register.label_password'|trans }}</label>
+                    <input class="input" type="password" id="password" name="password"
+                           autocomplete="new-password" minlength="8" required />
+                </div>
+                <div class="register-field">
+                    <label class="register-field__label" for="passwordRepeat">{{ 'app.register.label_password_repeat'|trans }}</label>
+                    <input class="input" type="password" id="passwordRepeat" name="passwordRepeat"
+                           autocomplete="new-password" required />
+                </div>
             </div>
+        </fieldset>
 
-        </form>
-    </div>
-</div>
+        <div class="register-actions">
+            <button type="submit" id="submit-btn" class="btn btn-primary register-actions__submit">
+                {{ 'app.register.btn_submit'|trans }}
+            </button>
+            <p class="register-actions__login">
+                {{ 'app.register.already_registered'|trans }} <a href="{{ path('app_home') }}">{{ 'app.register.link_login'|trans }}</a>
+            </p>
+        </div>
+
+    </form>
+
+  {% endblock %}
+{% endembed %}
 
 <script>window.REGISTER_APP_DOMAIN = '{{ appDomain }}';</script>
 {{ encore_entry_script_tags('registration') }}
diff --git a/httpdocs/templates/timetracking/_entry_row.html.twig b/httpdocs/templates/timetracking/_entry_row.html.twig
index 6492db3..1eb8c66 100644
--- a/httpdocs/templates/timetracking/_entry_row.html.twig
+++ b/httpdocs/templates/timetracking/_entry_row.html.twig
@@ -22,16 +22,12 @@
       <button class="entry-row__btn entry-row__btn--edit"
               title="{{ 'app.entry.btn_edit'|trans }}"
               data-action="edit">
-        <svg viewBox="0 0 16 16" fill="none">
-          <path d="M11 2l3 3L5 14H2v-3L11 2z" stroke="currentColor" stroke-width="1.3" stroke-linecap="round" stroke-linejoin="round"/>
-        </svg>
+        {% include '_atoms/icon-edit.html.twig' %}
       </button>
       <button class="entry-row__btn entry-row__btn--delete"
               title="{{ 'app.entry.btn_delete'|trans }}"
               data-action="delete">
-        <svg viewBox="0 0 16 16" fill="none">
-          <path d="M3 4h10M6 4V2h4v2M5 4l.5 9h5l.5-9" stroke="currentColor" stroke-width="1.3" stroke-linecap="round" stroke-linejoin="round"/>
-        </svg>
+        {% include '_atoms/icon-delete.html.twig' %}
       </button>
     </div>
   </div>
@@ -45,10 +41,7 @@
                class="input input--sm edit-duration"
                value="{{ entry.durationFormatted }}"
                autocomplete="off" />
-        <div class="duration-help">
-          <span class="duration-help__icon">?</span>
-          <span class="duration-help__hint">{{ 'app.entry.duration_hint'|trans }}</span>
-        </div>
+        {% include '_atoms/duration-help.html.twig' %}
       </div>
 
       <label class="entry-form__label">{{ 'app.entry.label_project_service'|trans }}</label>
diff --git a/httpdocs/templates/timetracking/week.html.twig b/httpdocs/templates/timetracking/week.html.twig
index 81d360d..023ac01 100644
--- a/httpdocs/templates/timetracking/week.html.twig
+++ b/httpdocs/templates/timetracking/week.html.twig
@@ -80,71 +80,7 @@ window.TT = {
 
 <div class="tt-page">
 
-  <header class="tt-header">
-    <div class="tt-header__meta">
-      <div class="tt-header__date">
-        {% set activStr   = currentDate|date('Y-m-d') %}
-        {% set monthName  = months[currentDate|date('n') - 1] %}
-        {% set weekdayIdx = currentDate|date('N') - 1 %}
-        {% if activStr == todayStr %}
-          {{ 'app.date.today'|trans }}, {{ currentDate|date('j') }}. {{ monthName }}
-        {% elseif activStr == tomorrowStr %}
-          {{ 'app.date.tomorrow'|trans }}, {{ currentDate|date('j') }}. {{ monthName }}
-        {% elseif activStr == yesterdayStr %}
-          {{ 'app.date.yesterday'|trans }}, {{ currentDate|date('j') }}. {{ monthName }}
-        {% else %}
-          {{ weekdays[weekdayIdx] }}, {{ currentDate|date('j') }}. {{ monthName }}
-        {% endif %}
-      </div>
-      <div class="tt-header__kw">{{ 'app.date.week_label'|trans }} {{ currentWeekNumber }}</div>
-    </div>
-
-    <nav class="week-nav"
-         aria-label="{{ 'app.date.week_label'|trans }}"
-         data-active-date="{{ currentDate|date('Y-m-d') }}">
-
-      <a href="{{ prevWeekUrl }}"
-         class="week-nav__arrow week-nav__arrow--prev"
-         title="{{ 'app.nav.prev_week'|trans }}">
-        <svg viewBox="0 0 8 14" fill="none">
-          <path d="M7 1L1 7L7 13" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
-        </svg>
-      </a>
-
-      <div class="week-nav__days">
-        {% for day in weekDays %}
-          {% set dayMonthShort = monthsShort[day.date|date('n') - 1] %}
-          <a href="{{ path('timetracking_week_date', { date: day.date|date('Y-m-d') }) }}"
-             class="week-nav__day{% if day.isActive %} week-nav__day--active{% endif %}{% if day.isToday %} week-nav__day--today{% endif %}"
-             data-date="{{ day.date|date('Y-m-d') }}"
-             {% if day.isActive %}aria-current="date"{% endif %}>
-            <span class="week-nav__day-name">{{ day.short }}</span>
-            <span class="week-nav__day-date">{{ day.date|date('d') }}. {{ dayMonthShort }}</span>
-          </a>
-        {% endfor %}
-      </div>
-
-      <button class="week-nav__cal" title="{{ 'app.nav.month_view'|trans }}">
-        <svg viewBox="0 0 18 18" fill="none">
-          <rect x="1" y="3" width="16" height="14" rx="2" stroke="currentColor" stroke-width="1.5"/>
-          <path d="M1 7h16" stroke="currentColor" stroke-width="1.5"/>
-          <path d="M5 1v4M13 1v4" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/>
-          <rect x="4" y="10" width="2" height="2" rx="0.5" fill="currentColor"/>
-          <rect x="8" y="10" width="2" height="2" rx="0.5" fill="currentColor"/>
-          <rect x="12" y="10" width="2" height="2" rx="0.5" fill="currentColor"/>
-        </svg>
-      </button>
-
-      <a href="{{ nextWeekUrl }}"
-         class="week-nav__arrow week-nav__arrow--next"
-         title="{{ 'app.nav.next_week'|trans }}">
-        <svg viewBox="0 0 8 14" fill="none">
-          <path d="M1 1L7 7L1 13" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
-        </svg>
-      </a>
-
-    </nav>
-  </header>
+  {% include '_sections/tt-header.html.twig' %}
 
   <div class="greeting">
     <span class="greeting__text">{{ greeting }}, {{ firstName }}!</span>
@@ -158,10 +94,7 @@ window.TT = {
         <label class="entry-form__label">{{ 'app.entry.label_duration'|trans }}</label>
         <div class="entry-form__field">
           <input type="text" id="create-duration" class="input input--sm" value="0:00" autocomplete="off" />
-          <div class="duration-help">
-            <span class="duration-help__icon">?</span>
-            <span class="duration-help__hint">{{ 'app.entry.duration_hint'|trans }}</span>
-          </div>
+          {% include '_atoms/duration-help.html.twig' %}
         </div>
 
         <label class="entry-form__label">{{ 'app.entry.label_project_service'|trans }}</label>