From 7c71ce59bd79633c217f6bb0ec9226b68ffc6ce6 Mon Sep 17 00:00:00 2001
From: philipp <philipp@hofer.link>
Date: Wed, 17 Apr 2024 13:51:47 +0200
Subject: [PATCH 01/12] show notification badge in menu

---
 src/model/user.rs                   | 17 +++++++++++++++--
 src/tera/admin/boat.rs              |  4 ++--
 src/tera/admin/mail.rs              |  4 ++--
 src/tera/admin/notification.rs      |  4 ++--
 src/tera/admin/schnupper.rs         |  8 ++++----
 src/tera/admin/user.rs              | 20 +++++++++++++-------
 src/tera/board/boathouse.rs         |  4 ++--
 src/tera/boatdamage.rs              |  4 ++--
 src/tera/boatreservation.rs         |  4 ++--
 src/tera/ergo.rs                    |  9 ++++++---
 src/tera/log.rs                     | 10 ++++++----
 src/tera/mod.rs                     | 12 +++++++++---
 src/tera/planned.rs                 |  7 +++++--
 src/tera/stat.rs                    |  6 +++---
 templates/admin/mail.html.tera      | 10 +++++-----
 templates/base.html.tera            | 14 +++++++++++---
 templates/includes/macros.html.tera | 12 ++++++++++++
 17 files changed, 101 insertions(+), 48 deletions(-)

diff --git a/src/model/user.rs b/src/model/user.rs
index 86e311a..83db24c 100644
--- a/src/model/user.rs
+++ b/src/model/user.rs
@@ -47,16 +47,18 @@ pub struct User {
 }
 
 #[derive(Debug, Serialize, Deserialize)]
-pub struct UserWithRoles {
+pub struct UserWithRolesAndNotificationCount {
     #[serde(flatten)]
     pub user: User,
+    pub amount_unread_notifications: i32,
     pub roles: Vec<String>,
 }
 
-impl UserWithRoles {
+impl UserWithRolesAndNotificationCount {
     pub async fn from_user(user: User, db: &SqlitePool) -> Self {
         Self {
             roles: user.roles(db).await,
+            amount_unread_notifications: user.amount_unread_notifications(db).await,
             user,
         }
     }
@@ -237,6 +239,17 @@ impl User {
         .count
     }
 
+    pub async fn amount_unread_notifications(&self, db: &SqlitePool) -> i32 {
+        sqlx::query!(
+            "SELECT COUNT(*) as count FROM notification WHERE user_id = ? AND read_at IS NULL",
+            self.id
+        )
+        .fetch_one(db)
+        .await
+        .unwrap()
+        .count
+    }
+
     pub async fn has_role(&self, db: &SqlitePool, role: &str) -> bool {
         if sqlx::query!(
             "SELECT * FROM user_role WHERE user_id=? AND role_id = (SELECT id FROM role WHERE name = ?)",
diff --git a/src/tera/admin/boat.rs b/src/tera/admin/boat.rs
index d8776f6..8af2cca 100644
--- a/src/tera/admin/boat.rs
+++ b/src/tera/admin/boat.rs
@@ -1,7 +1,7 @@
 use crate::model::{
     boat::{Boat, BoatToAdd, BoatToUpdate},
     location::Location,
-    user::{AdminUser, User, UserWithRoles},
+    user::{AdminUser, User, UserWithRolesAndNotificationCount},
 };
 use rocket::{
     form::Form,
@@ -32,7 +32,7 @@ async fn index(
     context.insert("users", &users);
     context.insert(
         "loggedin_user",
-        &UserWithRoles::from_user(admin.user, db).await,
+        &UserWithRolesAndNotificationCount::from_user(admin.user, db).await,
     );
 
     Template::render("admin/boat/index", context.into_json())
diff --git a/src/tera/admin/mail.rs b/src/tera/admin/mail.rs
index 2afcd3a..1f6f11c 100644
--- a/src/tera/admin/mail.rs
+++ b/src/tera/admin/mail.rs
@@ -10,7 +10,7 @@ use crate::model::log::Log;
 use crate::model::mail::Mail;
 use crate::model::role::Role;
 use crate::model::user::AdminUser;
-use crate::model::user::UserWithRoles;
+use crate::model::user::UserWithRolesAndNotificationCount;
 use crate::tera::Config;
 
 #[get("/mail")]
@@ -27,7 +27,7 @@ async fn index(
 
     context.insert(
         "loggedin_user",
-        &UserWithRoles::from_user(admin.user, db).await,
+        &UserWithRolesAndNotificationCount::from_user(admin.user, db).await,
     );
     context.insert("roles", &roles);
 
diff --git a/src/tera/admin/notification.rs b/src/tera/admin/notification.rs
index 2e36c51..0e7ab9a 100644
--- a/src/tera/admin/notification.rs
+++ b/src/tera/admin/notification.rs
@@ -2,7 +2,7 @@ use crate::model::{
     log::Log,
     notification::Notification,
     role::Role,
-    user::{AdminUser, User, UserWithRoles},
+    user::{AdminUser, User, UserWithRolesAndNotificationCount},
 };
 use rocket::{
     form::Form,
@@ -26,7 +26,7 @@ async fn index(
     }
     context.insert(
         "loggedin_user",
-        &UserWithRoles::from_user(user.user, db).await,
+        &UserWithRolesAndNotificationCount::from_user(user.user, db).await,
     );
     context.insert("roles", &Role::all(db).await);
 
diff --git a/src/tera/admin/schnupper.rs b/src/tera/admin/schnupper.rs
index 41d536d..f08abb3 100644
--- a/src/tera/admin/schnupper.rs
+++ b/src/tera/admin/schnupper.rs
@@ -1,6 +1,6 @@
 use crate::model::{
     role::Role,
-    user::{SchnupperBetreuerUser, User, UserWithRoles},
+    user::{SchnupperBetreuerUser, User, UserWithRolesAndNotificationCount},
 };
 use futures::future::join_all;
 use rocket::{
@@ -38,9 +38,9 @@ async fn index(
     let user_futures: Vec<_> = User::all_with_role(db, &schnupperant)
         .await
         .into_iter()
-        .map(|u| async move { UserWithRoles::from_user(u, db).await })
+        .map(|u| async move { UserWithRolesAndNotificationCount::from_user(u, db).await })
         .collect();
-    let users: Vec<UserWithRoles> = join_all(user_futures).await;
+    let users: Vec<UserWithRolesAndNotificationCount> = join_all(user_futures).await;
 
     let mut context = Context::new();
     if let Some(msg) = flash {
@@ -49,7 +49,7 @@ async fn index(
     context.insert("schnupperanten", &users);
     context.insert(
         "loggedin_user",
-        &UserWithRoles::from_user(user.into(), db).await,
+        &UserWithRolesAndNotificationCount::from_user(user.into(), db).await,
     );
 
     Template::render("admin/schnupper/index", context.into_json())
diff --git a/src/tera/admin/user.rs b/src/tera/admin/user.rs
index 30c63b7..e5d9781 100644
--- a/src/tera/admin/user.rs
+++ b/src/tera/admin/user.rs
@@ -6,8 +6,8 @@ use crate::model::{
     logbook::Logbook,
     role::Role,
     user::{
-        AdminUser, User, UserWithMembershipPdf, UserWithRoles, UserWithRolesAndMembershipPdf,
-        VorstandUser,
+        AdminUser, User, UserWithMembershipPdf, UserWithRolesAndMembershipPdf,
+        UserWithRolesAndNotificationCount, VorstandUser,
     },
 };
 use futures::future::join_all;
@@ -67,7 +67,10 @@ async fn index(
     context.insert("users", &users);
     context.insert("roles", &roles);
     context.insert("families", &families);
-    context.insert("loggedin_user", &UserWithRoles::from_user(user, db).await);
+    context.insert(
+        "loggedin_user",
+        &UserWithRolesAndNotificationCount::from_user(user, db).await,
+    );
 
     Template::render("admin/user/index", context.into_json())
 }
@@ -99,7 +102,10 @@ async fn index_admin(
     context.insert("users", &users);
     context.insert("roles", &roles);
     context.insert("families", &families);
-    context.insert("loggedin_user", &UserWithRoles::from_user(user, db).await);
+    context.insert(
+        "loggedin_user",
+        &UserWithRolesAndNotificationCount::from_user(user, db).await,
+    );
 
     Template::render("admin/user/index", context.into_json())
 }
@@ -127,7 +133,7 @@ async fn fees(
     }
     context.insert(
         "loggedin_user",
-        &UserWithRoles::from_user(admin.into(), db).await,
+        &UserWithRolesAndNotificationCount::from_user(admin.into(), db).await,
     );
 
     Template::render("admin/user/fees", context.into_json())
@@ -147,7 +153,7 @@ async fn scheckbuch(
     for s in scheckbooks {
         scheckbooks_with_roles.push((
             Logbook::completed_with_user(db, &s).await,
-            UserWithRoles::from_user(s, db).await,
+            UserWithRolesAndNotificationCount::from_user(s, db).await,
         ))
     }
 
@@ -158,7 +164,7 @@ async fn scheckbuch(
     }
     context.insert(
         "loggedin_user",
-        &UserWithRoles::from_user(user.into(), db).await,
+        &UserWithRolesAndNotificationCount::from_user(user.into(), db).await,
     );
 
     Template::render("admin/user/scheckbuch", context.into_json())
diff --git a/src/tera/board/boathouse.rs b/src/tera/board/boathouse.rs
index 266f81a..fbaa16c 100644
--- a/src/tera/board/boathouse.rs
+++ b/src/tera/board/boathouse.rs
@@ -1,7 +1,7 @@
 use crate::model::{
     boat::Boat,
     boathouse::Boathouse,
-    user::{AdminUser, UserWithRoles, VorstandUser},
+    user::{AdminUser, UserWithRolesAndNotificationCount, VorstandUser},
 };
 use rocket::{
     form::Form,
@@ -39,7 +39,7 @@ async fn index(
 
     context.insert(
         "loggedin_user",
-        &UserWithRoles::from_user(admin.into(), db).await,
+        &UserWithRolesAndNotificationCount::from_user(admin.into(), db).await,
     );
 
     Template::render("board/boathouse", context.into_json())
diff --git a/src/tera/boatdamage.rs b/src/tera/boatdamage.rs
index 39088af..0fca62b 100644
--- a/src/tera/boatdamage.rs
+++ b/src/tera/boatdamage.rs
@@ -13,7 +13,7 @@ use crate::{
     model::{
         boat::Boat,
         boatdamage::{BoatDamage, BoatDamageFixed, BoatDamageToAdd, BoatDamageVerified},
-        user::{CoxUser, DonauLinzUser, TechUser, User, UserWithRoles},
+        user::{CoxUser, DonauLinzUser, TechUser, User, UserWithRolesAndNotificationCount},
     },
     tera::log::KioskCookie,
 };
@@ -59,7 +59,7 @@ async fn index(
     context.insert("boats", &boats);
     context.insert(
         "loggedin_user",
-        &UserWithRoles::from_user(user.into(), db).await,
+        &UserWithRolesAndNotificationCount::from_user(user.into(), db).await,
     );
 
     Template::render("boatdamages", context.into_json())
diff --git a/src/tera/boatreservation.rs b/src/tera/boatreservation.rs
index 0cc5574..06d42b3 100644
--- a/src/tera/boatreservation.rs
+++ b/src/tera/boatreservation.rs
@@ -14,7 +14,7 @@ use crate::{
     model::{
         boat::Boat,
         boatreservation::{BoatReservation, BoatReservationToAdd},
-        user::{DonauLinzUser, User, UserWithRoles},
+        user::{DonauLinzUser, User, UserWithRolesAndNotificationCount},
     },
     tera::log::KioskCookie,
 };
@@ -74,7 +74,7 @@ async fn index(
     context.insert("user", &User::all(db).await);
     context.insert(
         "loggedin_user",
-        &UserWithRoles::from_user(user.into(), db).await,
+        &UserWithRolesAndNotificationCount::from_user(user.into(), db).await,
     );
 
     Template::render("boatreservations", context.into_json())
diff --git a/src/tera/ergo.rs b/src/tera/ergo.rs
index 8818d6b..c419781 100644
--- a/src/tera/ergo.rs
+++ b/src/tera/ergo.rs
@@ -18,7 +18,7 @@ use tera::Context;
 
 use crate::model::{
     log::Log,
-    user::{AdminUser, User, UserWithRoles},
+    user::{AdminUser, User, UserWithRolesAndNotificationCount},
 };
 
 #[derive(Serialize)]
@@ -51,7 +51,7 @@ async fn send(db: &State<SqlitePool>, _user: AdminUser) -> Template {
 
     Template::render(
         "ergo.final",
-        context!(loggedin_user: &UserWithRoles::from_user(_user.user, db).await, thirty, dozen),
+        context!(loggedin_user: &UserWithRolesAndNotificationCount::from_user(_user.user, db).await, thirty, dozen),
     )
 }
 
@@ -120,7 +120,10 @@ async fn index(db: &State<SqlitePool>, user: User, flash: Option<FlashMessage<'_
     if let Some(msg) = flash {
         context.insert("flash", &msg.into_inner());
     }
-    context.insert("loggedin_user", &UserWithRoles::from_user(user, db).await);
+    context.insert(
+        "loggedin_user",
+        &UserWithRolesAndNotificationCount::from_user(user, db).await,
+    );
     context.insert("users", &users);
     context.insert("thirty", &thirty);
     context.insert("dozen", &dozen);
diff --git a/src/tera/log.rs b/src/tera/log.rs
index 011aff7..bb4b280 100644
--- a/src/tera/log.rs
+++ b/src/tera/log.rs
@@ -24,7 +24,9 @@ use crate::model::{
         LogbookUpdateError,
     },
     logtype::LogType,
-    user::{AdminUser, DonauLinzUser, User, UserWithRoles, UserWithWaterStatus},
+    user::{
+        AdminUser, DonauLinzUser, User, UserWithRolesAndNotificationCount, UserWithWaterStatus,
+    },
 };
 
 pub struct KioskCookie(String);
@@ -84,7 +86,7 @@ async fn index(
     context.insert("logtypes", &logtypes);
     context.insert(
         "loggedin_user",
-        &UserWithRoles::from_user(user.into(), db).await,
+        &UserWithRolesAndNotificationCount::from_user(user.into(), db).await,
     );
     context.insert("on_water", &on_water);
     context.insert("distances", &distances);
@@ -98,7 +100,7 @@ async fn show(db: &State<SqlitePool>, user: DonauLinzUser) -> Template {
 
     Template::render(
         "log.completed",
-        context!(logs, loggedin_user: &UserWithRoles::from_user(user.into(), db).await),
+        context!(logs, loggedin_user: &UserWithRolesAndNotificationCount::from_user(user.into(), db).await),
     )
 }
 
@@ -108,7 +110,7 @@ async fn show_for_year(db: &State<SqlitePool>, user: AdminUser, year: i32) -> Te
 
     Template::render(
         "log.completed",
-        context!(logs, loggedin_user: &UserWithRoles::from_user(user.user, db).await),
+        context!(logs, loggedin_user: &UserWithRolesAndNotificationCount::from_user(user.user, db).await),
     )
 }
 
diff --git a/src/tera/mod.rs b/src/tera/mod.rs
index 5f89c2b..fece01b 100644
--- a/src/tera/mod.rs
+++ b/src/tera/mod.rs
@@ -23,7 +23,7 @@ use tera::Context;
 use crate::model::{
     notification::Notification,
     role::Role,
-    user::{User, UserWithRoles},
+    user::{User, UserWithRolesAndNotificationCount},
 };
 
 pub(crate) mod admin;
@@ -53,7 +53,10 @@ async fn index(db: &State<SqlitePool>, user: User, flash: Option<FlashMessage<'_
     }
 
     context.insert("notifications", &Notification::for_user(db, &user).await);
-    context.insert("loggedin_user", &UserWithRoles::from_user(user, db).await);
+    context.insert(
+        "loggedin_user",
+        &UserWithRolesAndNotificationCount::from_user(user, db).await,
+    );
     Template::render("index", context.into_json())
 }
 
@@ -75,7 +78,10 @@ async fn steering(db: &State<SqlitePool>, user: User, flash: Option<FlashMessage
     context.insert("coxes", &coxes);
     context.insert("bootskundige", &bootskundige);
 
-    context.insert("loggedin_user", &UserWithRoles::from_user(user, db).await);
+    context.insert(
+        "loggedin_user",
+        &UserWithRolesAndNotificationCount::from_user(user, db).await,
+    );
     Template::render("steering", context.into_json())
 }
 
diff --git a/src/tera/planned.rs b/src/tera/planned.rs
index 785b9b3..d362af5 100644
--- a/src/tera/planned.rs
+++ b/src/tera/planned.rs
@@ -13,7 +13,7 @@ use crate::model::{
     logbook::Logbook,
     tripdetails::TripDetails,
     triptype::TripType,
-    user::{AllowedForPlannedTripsUser, User, UserWithRoles},
+    user::{AllowedForPlannedTripsUser, User, UserWithRolesAndNotificationCount},
     usertrip::{UserTrip, UserTripDeleteError, UserTripError},
 };
 
@@ -44,7 +44,10 @@ async fn index(
     }
 
     context.insert("fee", &user.fee(db).await);
-    context.insert("loggedin_user", &UserWithRoles::from_user(user, db).await);
+    context.insert(
+        "loggedin_user",
+        &UserWithRolesAndNotificationCount::from_user(user, db).await,
+    );
     context.insert("days", &days);
     Template::render("planned", context.into_json())
 }
diff --git a/src/tera/stat.rs b/src/tera/stat.rs
index 3280973..1a060c5 100644
--- a/src/tera/stat.rs
+++ b/src/tera/stat.rs
@@ -4,7 +4,7 @@ use sqlx::SqlitePool;
 
 use crate::model::{
     stat::{self, BoatStat, Stat},
-    user::{DonauLinzUser, UserWithRoles},
+    user::{DonauLinzUser, UserWithRolesAndNotificationCount},
 };
 
 use super::log::KioskCookie;
@@ -16,7 +16,7 @@ async fn index_boat(db: &State<SqlitePool>, user: DonauLinzUser) -> Template {
 
     Template::render(
         "stat.boats",
-        context!(loggedin_user: &UserWithRoles::from_user(user.into(), db).await, stat, kiosk),
+        context!(loggedin_user: &UserWithRolesAndNotificationCount::from_user(user.into(), db).await, stat, kiosk),
     )
 }
 
@@ -38,7 +38,7 @@ async fn index(db: &State<SqlitePool>, user: DonauLinzUser, year: Option<i32>) -
 
     Template::render(
         "stat.people",
-        context!(loggedin_user: &UserWithRoles::from_user(user.into(), db).await, stat, personal, kiosk, guest_km, club_km),
+        context!(loggedin_user: &UserWithRolesAndNotificationCount::from_user(user.into(), db).await, stat, personal, kiosk, guest_km, club_km),
     )
 }
 
diff --git a/templates/admin/mail.html.tera b/templates/admin/mail.html.tera
index 8f54cd1..6c97d4c 100644
--- a/templates/admin/mail.html.tera
+++ b/templates/admin/mail.html.tera
@@ -8,16 +8,16 @@
             <div class="bg-white dark:bg-primary-900 text-black dark:text-white rounded-md block shadow mt-5"
                  role="alert">
                 <h2 class="h2">Mail versenden</h2>
-                <form action="/admin/mail" method="post" enctype="multipart/form-data" class="grid gap-3 p-3">
+                <form action="/admin/mail"
+                      method="post"
+                      enctype="multipart/form-data"
+                      class="grid gap-3 p-3">
                     {{ macros::select(label="Gruppe", data=roles, name="role_id") }}
                     {{ macros::input(label="Betreff", name="subject", type="text", required=true) }}
                     <div class="">
-                        <label for="content" class=" text-sm text-gray-600 dark:text-white ">
-                            Inhalt
-                        </label>
+                        <label for="content" class=" text-sm text-gray-600 dark:text-white ">Inhalt</label>
                         <textarea id="content" name="body" rows="4" cols="50" class="input rounded-md"></textarea>
                     </div>
-                    
                     <input type="file" name="files" multiple />
                     <input type="submit" class="btn btn-primary" value="Abschicken" />
                 </form>
diff --git a/templates/base.html.tera b/templates/base.html.tera
index 19b468d..c01990b 100644
--- a/templates/base.html.tera
+++ b/templates/base.html.tera
@@ -6,9 +6,17 @@
               content="width=device-width, initial-scale=1, shrink-to-fit=no">
         <link rel="manifest" href="public/manifest.json" />
         <link rel="stylesheet" href="/public/main.css" />
-        <link rel="apple-touch-icon" sizes="180x180" href="/public/images/apple-touch-icon.png">
-        <link rel="icon" type="image/png" sizes="32x32" href="/public/images/favicon-32x32.png">
-        <link rel="icon" type="image/png" sizes="16x16" href="/public/images/favicon-16x16.png">
+        <link rel="apple-touch-icon"
+              sizes="180x180"
+              href="/public/images/apple-touch-icon.png">
+        <link rel="icon"
+              type="image/png"
+              sizes="32x32"
+              href="/public/images/favicon-32x32.png">
+        <link rel="icon"
+              type="image/png"
+              sizes="16x16"
+              href="/public/images/favicon-16x16.png">
         <link rel="manifest" href="/public/images/site.webmanifest">
         <meta name="msapplication-TileColor" content="#da532c">
         <meta name="theme-color" content="#ffffff">
diff --git a/templates/includes/macros.html.tera b/templates/includes/macros.html.tera
index e591143..ba3c29c 100644
--- a/templates/includes/macros.html.tera
+++ b/templates/includes/macros.html.tera
@@ -31,6 +31,18 @@
                 <a href="/">
                     Hü
                     {{ loggedin_user.name }}
+                    {% if loggedin_user.amount_unread_notifications > 0 %}
+                        <span class="bg-red-100 text-red-800 text-sm font-medium me-2 px-2.5 py-0.5 rounded-full dark:bg-red-900 dark:text-red-300 inline-flex items-center">
+                            <svg class="w-3 h-3 me-1.5"
+                                 aria-hidden="true"
+                                 xmlns="http://www.w3.org/2000/svg"
+                                 fill="currentColor"
+                                 viewBox="0 0 20 20">
+                                <path d="M1.5 8.67v8.58a3 3 0 0 0 3 3h15a3 3 0 0 0 3-3V8.67l-8.928 5.493a3 3 0 0 1-3.144 0L1.5 8.67Z" />
+                                <path d="M22.5 6.908V6.75a3 3 0 0 0-3-3h-15a3 3 0 0 0-3 3v.158l9.714 5.978a1.5 1.5 0 0 0 1.572 0L22.5 6.908Z" />
+                            </svg>
+                        {{ loggedin_user.amount_unread_notifications }}</span>
+                    {% endif %}
                 </a>
             </div>
             <div>
-- 
2.45.2


From 42a3addd9a5d0f60263dc4f10a8ebca1dacedb7e Mon Sep 17 00:00:00 2001
From: philipp <philipp@hofer.link>
Date: Wed, 17 Apr 2024 13:57:24 +0200
Subject: [PATCH 02/12] make it more clear which action is required if
 notifications are present

---
 templates/index.html.tera | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/templates/index.html.tera b/templates/index.html.tera
index 8899e66..6392869 100644
--- a/templates/index.html.tera
+++ b/templates/index.html.tera
@@ -27,7 +27,7 @@
                                 <div>
                                     {% if not notification.read_at %}
                                         <a href="/notification/{{ notification.id }}/read" class="inline-block">
-                                            <button class="btn btn-primary" type="button">
+                                            <button class="btn btn-alert bg-red-100 dark:bg-red-900" type="button">
                                                 &#10003;
                                                 <span class="sr-only">Notification gelesen</span>
                                             </button>
-- 
2.45.2


From 30756ad4aa844ce33923540e16c4251051c20af0 Mon Sep 17 00:00:00 2001
From: Marie Birner <mb@studiomitte.com>
Date: Fri, 19 Apr 2024 11:09:31 +0200
Subject: [PATCH 03/12] [TASK] improve styling

---
 frontend/scss/app.scss                      |  1 +
 frontend/scss/components/_notification.scss |  5 ++++
 templates/includes/macros.html.tera         | 27 ++++++++++++---------
 3 files changed, 22 insertions(+), 11 deletions(-)
 create mode 100644 frontend/scss/components/_notification.scss

diff --git a/frontend/scss/app.scss b/frontend/scss/app.scss
index 770dc11..02e94d7 100644
--- a/frontend/scss/app.scss
+++ b/frontend/scss/app.scss
@@ -13,3 +13,4 @@
 @import 'components/search';
 @import 'components/important';
 @import 'components/searchable-table';
+@import 'components/notification';
diff --git a/frontend/scss/components/_notification.scss b/frontend/scss/components/_notification.scss
new file mode 100644
index 0000000..0532299
--- /dev/null
+++ b/frontend/scss/components/_notification.scss
@@ -0,0 +1,5 @@
+.notification {
+    right: -.2rem;
+    top: -.1rem;
+    font-size: .5rem;
+}
diff --git a/templates/includes/macros.html.tera b/templates/includes/macros.html.tera
index ba3c29c..30283e3 100644
--- a/templates/includes/macros.html.tera
+++ b/templates/includes/macros.html.tera
@@ -28,20 +28,25 @@
     <header class="bg-primary-900 text-white flex justify-center p-3 fixed w-full z-10">
         <div class="max-w-screen-xl w-full flex justify-between items-center">
             <div class="w-1/3 truncate">
-                <a href="/">
+                <a class="flex items-center" href="/">
                     Hü
                     {{ loggedin_user.name }}
                     {% if loggedin_user.amount_unread_notifications > 0 %}
-                        <span class="bg-red-100 text-red-800 text-sm font-medium me-2 px-2.5 py-0.5 rounded-full dark:bg-red-900 dark:text-red-300 inline-flex items-center">
-                            <svg class="w-3 h-3 me-1.5"
-                                 aria-hidden="true"
-                                 xmlns="http://www.w3.org/2000/svg"
-                                 fill="currentColor"
-                                 viewBox="0 0 20 20">
-                                <path d="M1.5 8.67v8.58a3 3 0 0 0 3 3h15a3 3 0 0 0 3-3V8.67l-8.928 5.493a3 3 0 0 1-3.144 0L1.5 8.67Z" />
-                                <path d="M22.5 6.908V6.75a3 3 0 0 0-3-3h-15a3 3 0 0 0-3 3v.158l9.714 5.978a1.5 1.5 0 0 0 1.572 0L22.5 6.908Z" />
-                            </svg>
-                        {{ loggedin_user.amount_unread_notifications }}</span>
+                        <span class="relative inline-flex items-end ms-1">
+                            <svg 
+                                height="20"
+                                width="24"
+                                aria-hidden="true"
+                                xmlns="http://www.w3.org/2000/svg"
+                                fill="currentColor"
+                                viewBox="0 0 20 24">
+                              <path d="M1.5 8.67v8.58a3 3 0 0 0 3 3h15a3 3 0 0 0 3-3V8.67l-8.928 5.493a3 3 0 0 1-3.144 0L1.5 8.67Z" />
+                              <path d="M22.5 6.908V6.75a3 3 0 0 0-3-3h-15a3 3 0 0 0-3 3v.158l9.714 5.978a1.5 1.5 0 0 0 1.572 0L22.5 6.908Z" />
+                          </svg>
+                          <small class="bg-red-500 rounded-full w-3 h-3 inline-flex justify-center items-center absolute p-1 notification">
+                            {{ loggedin_user.amount_unread_notifications }}
+                          </small>
+                        </span>
                     {% endif %}
                 </a>
             </div>
-- 
2.45.2


From c528b8831ae92b9c82bb7def666ee83852b985d6 Mon Sep 17 00:00:00 2001
From: Marie Birner <mb@studiomitte.com>
Date: Fri, 19 Apr 2024 11:25:25 +0200
Subject: [PATCH 04/12] [TASK] finalize notification styling

---
 templates/includes/macros.html.tera | 38 ++++++++++++++---------------
 templates/index.html.tera           | 10 ++++----
 2 files changed, 24 insertions(+), 24 deletions(-)

diff --git a/templates/includes/macros.html.tera b/templates/includes/macros.html.tera
index 30283e3..59660f2 100644
--- a/templates/includes/macros.html.tera
+++ b/templates/includes/macros.html.tera
@@ -28,29 +28,29 @@
     <header class="bg-primary-900 text-white flex justify-center p-3 fixed w-full z-10">
         <div class="max-w-screen-xl w-full flex justify-between items-center">
             <div class="w-1/3 truncate">
-                <a class="flex items-center" href="/">
+                <a href="/">
                     Hü
                     {{ loggedin_user.name }}
-                    {% if loggedin_user.amount_unread_notifications > 0 %}
-                        <span class="relative inline-flex items-end ms-1">
-                            <svg 
-                                height="20"
-                                width="24"
-                                aria-hidden="true"
-                                xmlns="http://www.w3.org/2000/svg"
-                                fill="currentColor"
-                                viewBox="0 0 20 24">
-                              <path d="M1.5 8.67v8.58a3 3 0 0 0 3 3h15a3 3 0 0 0 3-3V8.67l-8.928 5.493a3 3 0 0 1-3.144 0L1.5 8.67Z" />
-                              <path d="M22.5 6.908V6.75a3 3 0 0 0-3-3h-15a3 3 0 0 0-3 3v.158l9.714 5.978a1.5 1.5 0 0 0 1.572 0L22.5 6.908Z" />
-                          </svg>
-                          <small class="bg-red-500 rounded-full w-3 h-3 inline-flex justify-center items-center absolute p-1 notification">
-                            {{ loggedin_user.amount_unread_notifications }}
-                          </small>
-                        </span>
-                    {% endif %}
                 </a>
             </div>
-            <div>
+            <div class="flex items-center">
+                {% if loggedin_user.amount_unread_notifications > 0 %}
+                    <a href="/#notification" class="relative inline-flex items-end ms-2 me-3">
+                      <svg 
+                            height="20"
+                            width="24"
+                            aria-hidden="true"
+                            xmlns="http://www.w3.org/2000/svg"
+                            fill="currentColor"
+                            viewBox="0 0 20 24">
+                          <path d="M1.5 8.67v8.58a3 3 0 0 0 3 3h15a3 3 0 0 0 3-3V8.67l-8.928 5.493a3 3 0 0 1-3.144 0L1.5 8.67Z" />
+                          <path d="M22.5 6.908V6.75a3 3 0 0 0-3-3h-15a3 3 0 0 0-3 3v.158l9.714 5.978a1.5 1.5 0 0 0 1.572 0L22.5 6.908Z" />
+                      </svg>
+                      <small class="bg-red-500 rounded-full w-3 h-3 inline-flex justify-center items-center absolute p-1 notification">
+                        {{ loggedin_user.amount_unread_notifications }}
+                      </small>
+                    </a>
+                {% endif %}
                 <a href="#"
                    class="inline-flex justify-center rounded-md bg-primary-600 mx-1 px-3 py-2 text-sm font-semibold text-white hover:bg-primary-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary-600 cursor-pointer"
                    data-sidebar="true"
diff --git a/templates/index.html.tera b/templates/index.html.tera
index 6392869..3c66d87 100644
--- a/templates/index.html.tera
+++ b/templates/index.html.tera
@@ -2,7 +2,7 @@
 {% extends "base" %}
 {% block content %}
     <div class="max-w-screen-lg w-full">
-        <h1 class="h1">Ruderassistent</h1>
+        <h1 class="h1">Ruder<wbr/>assistent</h1>
         <div class="grid gap-3 my-5">
             <div class="m-auto">
                 <a href="/planned"
@@ -11,7 +11,7 @@
                     <span class="text-xl px-3">Geplante Ausfahrten</span>
                 </a>
             </div>
-            <div class="bg-white dark:bg-primary-900 text-black dark:text-white rounded-md block shadow mt-5"
+            <div id="notification" class="bg-white dark:bg-primary-900 text-black dark:text-white rounded-md block shadow mt-5"
                  role="alert">
                 <h2 class="h2">Nachrichten</h2>
                 <div class="divide-y">
@@ -27,7 +27,7 @@
                                 <div>
                                     {% if not notification.read_at %}
                                         <a href="/notification/{{ notification.id }}/read" class="inline-block">
-                                            <button class="btn btn-alert bg-red-100 dark:bg-red-900" type="button">
+                                            <button class="btn btn-primary" type="button">
                                                 &#10003;
                                                 <span class="sr-only">Notification gelesen</span>
                                             </button>
@@ -38,8 +38,8 @@
                         {% endif %}
                     {% endfor %}
                 </div>
-                <details class="py-3 bg-gray-200 dark:bg-primary-950 rounded-b-md">
-                    <summary class="px-3">Vergangene Nachrichten (14 Tage)</summary>
+                <details class="py-3 border-t rounded-b-md">
+                    <summary class="px-3 cursor-pointer">Vergangene Nachrichten (14 Tage)</summary>
                     <div class="divide-y text-sm">
                         {% for notification in notifications %}
                             {% if notification.read_at %}
-- 
2.45.2


From 9def90daa78656ed07b5b9dc03e07ac858b686dc Mon Sep 17 00:00:00 2001
From: philipp <philipp@hofer.link>
Date: Fri, 19 Apr 2024 12:06:24 +0200
Subject: [PATCH 05/12] show information that people should mark msgs as read
 if there are more than 10 unread msgs

---
 templates/includes/macros.html.tera | 28 ++++++++++++++--------------
 templates/index.html.tera           | 14 ++++++++++++--
 2 files changed, 26 insertions(+), 16 deletions(-)

diff --git a/templates/includes/macros.html.tera b/templates/includes/macros.html.tera
index 59660f2..34176c3 100644
--- a/templates/includes/macros.html.tera
+++ b/templates/includes/macros.html.tera
@@ -35,20 +35,20 @@
             </div>
             <div class="flex items-center">
                 {% if loggedin_user.amount_unread_notifications > 0 %}
-                    <a href="/#notification" class="relative inline-flex items-end ms-2 me-3">
-                      <svg 
-                            height="20"
-                            width="24"
-                            aria-hidden="true"
-                            xmlns="http://www.w3.org/2000/svg"
-                            fill="currentColor"
-                            viewBox="0 0 20 24">
-                          <path d="M1.5 8.67v8.58a3 3 0 0 0 3 3h15a3 3 0 0 0 3-3V8.67l-8.928 5.493a3 3 0 0 1-3.144 0L1.5 8.67Z" />
-                          <path d="M22.5 6.908V6.75a3 3 0 0 0-3-3h-15a3 3 0 0 0-3 3v.158l9.714 5.978a1.5 1.5 0 0 0 1.572 0L22.5 6.908Z" />
-                      </svg>
-                      <small class="bg-red-500 rounded-full w-3 h-3 inline-flex justify-center items-center absolute p-1 notification">
-                        {{ loggedin_user.amount_unread_notifications }}
-                      </small>
+                    <a href="/#notification"
+                       class="relative inline-flex items-end ms-2 me-3">
+                        <svg height="20"
+                             width="24"
+                             aria-hidden="true"
+                             xmlns="http://www.w3.org/2000/svg"
+                             fill="currentColor"
+                             viewBox="0 0 20 24">
+                            <path d="M1.5 8.67v8.58a3 3 0 0 0 3 3h15a3 3 0 0 0 3-3V8.67l-8.928 5.493a3 3 0 0 1-3.144 0L1.5 8.67Z" />
+                            <path d="M22.5 6.908V6.75a3 3 0 0 0-3-3h-15a3 3 0 0 0-3 3v.158l9.714 5.978a1.5 1.5 0 0 0 1.572 0L22.5 6.908Z" />
+                        </svg>
+                        <small class="bg-red-500 rounded-full w-3 h-3 inline-flex justify-center items-center absolute p-1 notification">
+                            {{ loggedin_user.amount_unread_notifications }}
+                        </small>
                     </a>
                 {% endif %}
                 <a href="#"
diff --git a/templates/index.html.tera b/templates/index.html.tera
index 3c66d87..84b239d 100644
--- a/templates/index.html.tera
+++ b/templates/index.html.tera
@@ -2,7 +2,11 @@
 {% extends "base" %}
 {% block content %}
     <div class="max-w-screen-lg w-full">
-        <h1 class="h1">Ruder<wbr/>assistent</h1>
+        <h1 class="h1">
+            Ruder
+            <wbr />
+            assistent
+        </h1>
         <div class="grid gap-3 my-5">
             <div class="m-auto">
                 <a href="/planned"
@@ -11,9 +15,15 @@
                     <span class="text-xl px-3">Geplante Ausfahrten</span>
                 </a>
             </div>
-            <div id="notification" class="bg-white dark:bg-primary-900 text-black dark:text-white rounded-md block shadow mt-5"
+            <div id="notification"
+                 class="bg-white dark:bg-primary-900 text-black dark:text-white rounded-md block shadow mt-5"
                  role="alert">
                 <h2 class="h2">Nachrichten</h2>
+                {% if notifications | length > 10 %}
+                    <div class="text-yellow-800 dark:text-yellow-300 text-center p-3">
+                        Du hast viele ungelesene Benachrichtigungen. Um deine Oberfläche übersichtlich zu halten und wichtige Updates nicht zu verpassen, nimm dir bitte einen Moment Zeit, sie zu überprüfen und als gelesen zu markieren (&#10003;).
+                    </div>
+                {% endif %}
                 <div class="divide-y">
                     {% for notification in notifications %}
                         {% if not notification.read_at %}
-- 
2.45.2


From 4c6ef71a1711ee5c0b5c76dfbcb4e017219100e4 Mon Sep 17 00:00:00 2001
From: Marie Birner <mb@studiomitte.com>
Date: Fri, 19 Apr 2024 12:48:23 +0200
Subject: [PATCH 06/12] [TASK] improve btn sidebar unregister guest

---
 templates/includes/macros.html.tera | 28 +++++++++++++++++-----------
 1 file changed, 17 insertions(+), 11 deletions(-)

diff --git a/templates/includes/macros.html.tera b/templates/includes/macros.html.tera
index 59660f2..7fe7407 100644
--- a/templates/includes/macros.html.tera
+++ b/templates/includes/macros.html.tera
@@ -180,18 +180,24 @@
     <div class="p-2 border border-t-0 border-{{ bg }} mb-4 rounded-b-md">
         {% if participants | length > 0 %}
             {% for rower in participants %}
-                {{ rower.name }}
-                {% if rower.is_guest %}<small class="text-gray-600 dark:text-gray-100">(Scheckbuch)</small>{% endif %}
-                {% if rower.is_real_guest %}
-                    <small class="text-gray-600 dark:text-gray-100">(Gast)</small>
-                    {% if allow_removing %}
-                        <a href="/planned/remove/{{ trip_details_id }}/{{ rower.name }}"
-                           class="btn btn-attention btn-fw">Abmelden</a>
+                <div class="relative">
+                    {{ rower.name }}
+                    {% if rower.is_guest %}<small class="text-gray-600 dark:text-gray-100">(Scheckbuch)</small>{% endif %}
+                    {% if rower.is_real_guest %}
+                        <small class="text-gray-600 dark:text-gray-100">(Gast)</small>
+                        {% if allow_removing %}
+                            <a href="/planned/remove/{{ trip_details_id }}/{{ rower.name }}"
+                              class="absolute r-0 bg-red-500 w-5 h-5 text-white rounded-full flex items-center justify-center transform rotate-45 top-0 right-0">
+                              <svg class="inline h-5 w-5" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
+                                  <path d="M8 4a.5.5 0 0 1 .5.5v3h3a.5.5 0 0 1 0 1h-3v3a.5.5 0 0 1-1 0v-3h-3a.5.5 0 0 1 0-1h3v-3A.5.5 0 0 1 8 4z"></path>
+                              </svg>
+                              <span class="sr-only">Abmelden</span>
+                            </a>
+                        {% endif %}
                     {% endif %}
-                {% endif %}
-                <span class="hidden">(angemeldet seit
-                {{ rower.registered_at }})</span>
-                <br />
+                  <span class="hidden">(angemeldet seit
+                  {{ rower.registered_at }})</span>
+                </div>
             {% endfor %}
         {% else %}
             {{ text }}
-- 
2.45.2


From 2540e49a319f12e1acee746555f5a8d6f47239cc Mon Sep 17 00:00:00 2001
From: Marie Birner <mb@studiomitte.com>
Date: Fri, 19 Apr 2024 12:54:32 +0200
Subject: [PATCH 07/12] [TASK] improve styling text warning notifications

---
 templates/index.html.tera | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/templates/index.html.tera b/templates/index.html.tera
index 84b239d..d8cce78 100644
--- a/templates/index.html.tera
+++ b/templates/index.html.tera
@@ -20,7 +20,7 @@
                  role="alert">
                 <h2 class="h2">Nachrichten</h2>
                 {% if notifications | length > 10 %}
-                    <div class="text-yellow-800 dark:text-yellow-300 text-center p-3">
+                    <div class="text-primary-950 dark:text-white bg-gray-200 dark:bg-primary-950 bg-opacity-80 text-center pb-3 px-3">
                         Du hast viele ungelesene Benachrichtigungen. Um deine Oberfläche übersichtlich zu halten und wichtige Updates nicht zu verpassen, nimm dir bitte einen Moment Zeit, sie zu überprüfen und als gelesen zu markieren (&#10003;).
                     </div>
                 {% endif %}
-- 
2.45.2


From 8ffed7525189e2226c8f4cf3068f1e4941e7921b Mon Sep 17 00:00:00 2001
From: philipp <philipp@hofer.link>
Date: Fri, 19 Apr 2024 13:00:39 +0200
Subject: [PATCH 08/12] don't show warning about many notifications if they are
 already read

---
 templates/index.html.tera | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/templates/index.html.tera b/templates/index.html.tera
index d8cce78..c62d55d 100644
--- a/templates/index.html.tera
+++ b/templates/index.html.tera
@@ -19,7 +19,7 @@
                  class="bg-white dark:bg-primary-900 text-black dark:text-white rounded-md block shadow mt-5"
                  role="alert">
                 <h2 class="h2">Nachrichten</h2>
-                {% if notifications | length > 10 %}
+                {% if loggedin_user.amount_unread_notifications | length > 10 %}
                     <div class="text-primary-950 dark:text-white bg-gray-200 dark:bg-primary-950 bg-opacity-80 text-center pb-3 px-3">
                         Du hast viele ungelesene Benachrichtigungen. Um deine Oberfläche übersichtlich zu halten und wichtige Updates nicht zu verpassen, nimm dir bitte einen Moment Zeit, sie zu überprüfen und als gelesen zu markieren (&#10003;).
                     </div>
-- 
2.45.2


From 74ededf913e8092370627a3f5240ff5f6bd30524 Mon Sep 17 00:00:00 2001
From: philipp <philipp@hofer.link>
Date: Fri, 19 Apr 2024 13:09:17 +0200
Subject: [PATCH 09/12] fix ci

---
 templates/index.html.tera | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/templates/index.html.tera b/templates/index.html.tera
index c62d55d..75504a8 100644
--- a/templates/index.html.tera
+++ b/templates/index.html.tera
@@ -19,7 +19,7 @@
                  class="bg-white dark:bg-primary-900 text-black dark:text-white rounded-md block shadow mt-5"
                  role="alert">
                 <h2 class="h2">Nachrichten</h2>
-                {% if loggedin_user.amount_unread_notifications | length > 10 %}
+                {% if loggedin_user.amount_unread_notifications > 10 %}
                     <div class="text-primary-950 dark:text-white bg-gray-200 dark:bg-primary-950 bg-opacity-80 text-center pb-3 px-3">
                         Du hast viele ungelesene Benachrichtigungen. Um deine Oberfläche übersichtlich zu halten und wichtige Updates nicht zu verpassen, nimm dir bitte einen Moment Zeit, sie zu überprüfen und als gelesen zu markieren (&#10003;).
                     </div>
-- 
2.45.2


From d6214d536974f10da82545434de06c0d58d8d37a Mon Sep 17 00:00:00 2001
From: philipp <philipp@hofer.link>
Date: Fri, 19 Apr 2024 13:17:22 +0200
Subject: [PATCH 10/12] fix comma issue

---
 templates/index.html.tera | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/templates/index.html.tera b/templates/index.html.tera
index 75504a8..b200554 100644
--- a/templates/index.html.tera
+++ b/templates/index.html.tera
@@ -21,7 +21,7 @@
                 <h2 class="h2">Nachrichten</h2>
                 {% if loggedin_user.amount_unread_notifications > 10 %}
                     <div class="text-primary-950 dark:text-white bg-gray-200 dark:bg-primary-950 bg-opacity-80 text-center pb-3 px-3">
-                        Du hast viele ungelesene Benachrichtigungen. Um deine Oberfläche übersichtlich zu halten und wichtige Updates nicht zu verpassen, nimm dir bitte einen Moment Zeit, sie zu überprüfen und als gelesen zu markieren (&#10003;).
+                        Du hast viele ungelesene Benachrichtigungen. Um deine Oberfläche übersichtlich zu halten und wichtige Updates nicht zu verpassen, nimm dir bitte einen Moment Zeit sie zu überprüfen und als gelesen zu markieren (&#10003;).
                     </div>
                 {% endif %}
                 <div class="divide-y">
-- 
2.45.2


From 8f2d1ef6f477a9ec5460f00bcb464e71ac306e9b Mon Sep 17 00:00:00 2001
From: philipp <philipp@hofer.link>
Date: Fri, 19 Apr 2024 15:04:03 +0200
Subject: [PATCH 11/12] wait until dev server started for frontend tests

---
 frontend/playwright.config.ts | 1 +
 1 file changed, 1 insertion(+)

diff --git a/frontend/playwright.config.ts b/frontend/playwright.config.ts
index e5adfb0..520a154 100644
--- a/frontend/playwright.config.ts
+++ b/frontend/playwright.config.ts
@@ -72,5 +72,6 @@ export default defineConfig({
   webServer: {
     timeout: 15 * 60 * 1000,
     command: 'cd .. && ./test_db.sh && cargo r',
+    url: 'http://127.0.0.1:8000'
   },
 });
-- 
2.45.2


From 2ad5f0883c1c3fa6704b16c0bc9ad19a7c6340d0 Mon Sep 17 00:00:00 2001
From: philipp <philipp@hofer.link>
Date: Fri, 19 Apr 2024 15:33:44 +0200
Subject: [PATCH 12/12] make clicking on 'create trip' button more robust
 (clicked on notification as this was the first .relative element

---
 frontend/tests/cox.spec.ts | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/frontend/tests/cox.spec.ts b/frontend/tests/cox.spec.ts
index c19ae45..d38dc96 100644
--- a/frontend/tests/cox.spec.ts
+++ b/frontend/tests/cox.spec.ts
@@ -8,7 +8,7 @@ test("cox can create and delete trip", async ({ page }) => {
   await page.getByPlaceholder("Passwort").fill("cox");
   await page.getByPlaceholder("Passwort").press("Enter");
   await page.locator('li').filter({ hasText: 'Geplante Ausfahrten' }).getByRole('link').click();
-  await page.locator(".relative").first().click();
+  await page.locator('a[href="#"]:has-text("Ausfahrt")').first().click();
   await page.locator("#sidebar #planned_starting_time").click();
   await page.locator("#sidebar #planned_starting_time").fill("18:00");
   await page.locator("#sidebar #planned_starting_time").press("Tab");
@@ -38,8 +38,8 @@ test.describe("cox can edit trips", () => {
     await page.getByPlaceholder("Name").press("Tab");
     await page.getByPlaceholder("Passwort").fill("cox");
     await page.getByPlaceholder("Passwort").press("Enter");
-  await page.locator('li').filter({ hasText: 'Geplante Ausfahrten' }).getByRole('link').click();
-    await page.locator(".relative").first().click();
+    await page.locator('li').filter({ hasText: 'Geplante Ausfahrten' }).getByRole('link').click();
+    await page.locator('a[href="#"]:has-text("Ausfahrt")').first().click();
     await page.locator("#sidebar #planned_starting_time").click();
     await page.locator("#sidebar #planned_starting_time").fill("18:00");
     await page.locator("#sidebar #planned_starting_time").press("Tab");
-- 
2.45.2