improve recent logout information

app/src/components/Alert.astro

@@ -38,8 +38,9 @@ const {id, classList = "", color = "info", title, description} = Astro.props
           <TriangleAlert class="size-7"/>
       )}
   </slot>
-  <div class="flex flex-col gap-2">
+  <div class="flex flex-col gap-2 w-full">
     <span>{title}</span>
     <span class="text-sm opacity-90 mt-1" set:html={description}/>
+    <slot></slot>
   </div>
 </div>

app/src/i18n/ui.ts

@@ -26,8 +26,8 @@ export const ui = {
         "button.close": "Close",
         "login": "Login",
         "loggedOut.title": "Signed out",
-        "loggedOut.description": `Your Session is expired and you were logged out. 
-             Log in again: <a class='underline' href='/auth/login'>Login</a>`,
+        "loggedOut.description": `Your session has expired and you have been logged out.<br>
+             Please log in again.`,
         "serverError.title": "Server Error",
         "serverError.description": `Please try again later.`,
     },
@@ -51,8 +51,8 @@ export const ui = {
         "button.close": "Schließen",
         "login": "Anmelden",
         "loggedOut.title": "Abgemeldet",
-        "loggedOut.description": `Deine Sitzung ist abgelaufen und du wurdest abgemeldet. 
-             Melde dich hier erneut an: <a class='underline' href='/auth/login'>Anmelden</a>`,
+        "loggedOut.description": `Deine Sitzung ist abgelaufen und du wurdest abgemeldet.<br>
+             Melde dich erneut an.`,
         "serverError.title": "Serverfehler",
         "serverError.description": `Bitte versuche es später erneut.`,
     },

app/src/pages/[lang]/index.astro

@@ -89,6 +89,7 @@ const t = useTranslations(lang)
                     const error = e.getActualType()
 
                     if (error.status === 401) {
+                        if (!auth.recentLogout)
                             auth.recentLogout = auth.authenticated // set recentLogout true, if user was logged in before
                         auth.authenticated = false
                         auth.authorized = false
@@ -237,6 +238,20 @@ const t = useTranslations(lang)
     </script>
   </Fragment>
   <div class="grid place-items-center grid-cols-1 gap-4 max-w-xl mx-auto" id="list">
+    <Alert
+        classList="hidden"
+        id="alert-loggedout"
+        color="warning"
+        title={t("loggedOut.title")}
+        description={t("loggedOut.description")}
+    >
+      <div class="flex justify-end">
+        <a href="/auth/login" class="btn btn-sm btn-warning">
+          <LogIn/>
+            {t("login")}
+        </a>
+      </div>
+    </Alert>
     <Alert
         classList="hidden"
         id="alert-unauthenticated"
@@ -259,13 +274,6 @@ const t = useTranslations(lang)
         <Lock class="size-7"/>
       </Fragment>
     </Alert>
-    <Alert
-        classList="hidden"
-        id="alert-loggedout"
-        color="warning"
-        title={t("loggedOut.title")}
-        description={t("loggedOut.description")}
-    />
     <Alert
         classList="hidden"
         id="alert-serverError"