add: user profiles and junk

app/templates_src/chat.lisp

@@ -1,6 +1,6 @@
 (text "{% extends \"root.lisp\" %} {% block head %}")
 (title
-    (text "{{ components::chat_name(chat=chat, members=members) }} - {{ name }}"))
+    (text "{{ components::chat_name(chat=chat, members=members) }} — {{ config.name }}"))
 (text "{% endblock %} {% block body %}")
 (div
     ("class" "flex w_full gap_2 justify_between items_center")
@@ -9,11 +9,16 @@
         (a
             ("class" "button tab camo")
             ("href" "/chats")
-            (text "chats"))
+            (text "chats")
+            (text "{% if user.missed_messages_count > 0 -%}") (b (text "({{ user.missed_messages_count }})")) (text "{%- endif %}"))
         (a
             ("class" "button tab")
             ("href" "/chats/{{ chat.id }}")
-            (text "{{ components::chat_name(chat=chat, members=members, advanced=true, avatar_size=\"18px\") }}"))))
+            (text "{{ components::chat_name(chat=chat, members=members, advanced=true, avatar_size=\"18px\") }}"))
+        (a
+            ("class" "button tab camo")
+            ("href" "/chats/{{ chat.id }}/manage")
+            (text "{{ icon \"settings-2\" }} Manage"))))
 (div
     ("class" "flex flex_col card_nest reverse")
     ("style" "flex: 1 0 auto")

app/templates_src/chats.lisp

@@ -1,6 +1,6 @@
 (text "{% extends \"root.lisp\" %} {% block head %}")
 (title
-    (text "My chats - {{ name }}"))
+    (text "My chats — {{ config.name }}"))
 (text "{% endblock %} {% block body %}")
 (div
     ("class" "flex w_full gap_2 justify_between items_center")
@@ -9,9 +9,10 @@
         (a
             ("class" "button tab")
             ("href" "/chats")
-            (text "chats")))
+            (text "chats")
+            (text "{% if user.missed_messages_count > 0 -%}") (b (text "({{ user.missed_messages_count }})")) (text "{%- endif %}")))
     (button
-        ("class" "button")
+        ("class" "button square")
         ("title" "Create chat")
         ("onclick" "document.getElementById('create_dialog').showModal()")
         (text "{{ icon \"plus\" }}")))
@@ -21,7 +22,7 @@
     (div
         ("class" "card surface w_full flex justify_between items_center gap_2")
         (a
-            ("class" "flex gap_ch items_center")
+            ("class" "flush flex gap_ch items_center {% if not user.id in chat[0].last_message_read_by -%} yellow {%- endif %}")
             ("href" "/chats/{{ chat[0].id }}")
             (text "{{ components::chat_name(chat=chat[0], members=chat[1], advanced=true) }}"))
         (div
@@ -29,7 +30,7 @@
             (button
                 ("onclick" "open_dropdown(event)")
                 ("exclude" "dropdown")
-                ("class" "button")
+                ("class" "button icon_only big_icon")
                 (text "{{ icon \"ellipsis\" }}"))
             (div
                 ("class" "inner")
@@ -39,13 +40,10 @@
                     ("target" "_blank")
                     (text "pop open"))
 
-                (text "{% if chat[0].style != \"Direct\" -%}")
-                ; group chat only
-                (button
+                (a
                     ("class" "button")
-                    ("onclick" "rename_gc('{{ chat[0].id }}')")
-                    (text "rename"))
-                (text "{%- endif %}")
+                    ("href" "/chats/{{ chat[0].id }}/manage")
+                    (text "manage"))
 
                 (button
                     ("class" "button red")
@@ -165,53 +163,7 @@
                     e.target.reset();
                 }
             });
-    }
-
-    let search_users_timeout;
-    function search_users(e) {
-        if (search_users_timeout) {
-            clearTimeout(search_users_timeout);
-        }
-
-        if (e.target.value.trim().length === 0) {
-            return;
-        }
-
-        search_users_timeout = setTimeout(() => {
-            fetch(\"/api/v1/auth/users/search\", {
-                method: \"POST\",
-                headers: {
-                    \"Content-Type\": \"application/json\",
-                },
-                body: JSON.stringify({
-                    prefix: e.target.value.trim(),
-                }),
-            })
-                .then((res) => res.json())
-                .then((res) => {
-                    if (res.ok) {
-                        document.getElementById(\"users_search\").innerHTML = \"\";
-                        for (const username of res.payload) {
-                            document.getElementById(\"users_search\").innerHTML += `<option value=\"${username}\">${username}</option>`;
-                        }
-                    } else {
-                        show_message(res.message, res.ok);
-                    }
-                });
-        }, 1000);
-    }
-
-    function leave_chat(id) {
-        if (!confirm(\"Are you sure you would like to do this?\")) {
-            return;
-        }
-
-        fetch(`/api/v1/chats/${id}/leave`, {
-            method: \"POST\",
-        })
-            .then((res) => res.json())
-            .then((res) => {
-                show_message(res.message, res.ok);
-            });
     }"))
+
+(script ("src" "/public/messages.js"))
 (text "{% endblock %}")

app/templates_src/components.lisp

@@ -55,6 +55,10 @@
             (text "{{ icon \"ellipsis\" }}"))
         (div
             ("class" "inner surface")
+            (button
+                ("class" "button surface")
+                ("onclick" "edit_message_ui('{{ message.id }}')")
+                (text "edit"))
             (button
                 ("class" "button surface red")
                 ("onclick" "delete_message('{{ message.id }}')")
@@ -63,6 +67,55 @@
 
     (div
         ("class" "body no_p_margin")
+        ("id" "{{ message.id }}_body")
         (text "{{ message.content|markdown|safe }}"))
-    (text "{{ self::avatar(id=message.owner) }}"))
+    (form
+        ("class" "body hidden flex flex_row gap_ch")
+        ("id" "{{ message.id }}_edit_area")
+        ("onsubmit" "edit_message('{{ message.id }}', event)")
+        (textarea
+            ("name" "content")
+            ("required")
+            (text "{{ message.content|safe }}"))
+        (button
+            ("title" "Save")
+            ("class" "button")
+            (text "{{ icon \"check\" }}")))
+
+    (a
+        ("href" "/@{{ message.owner }}?redirect=true")
+        ("target" "_blank")
+        (text "{{ self::avatar(id=message.owner) }}")))
 (text "{%- endmacro %}")
+
+(text "{% macro theme(user, theme_preference) -%} {% if user %} {% if user.settings.theme_hue -%}")
+(style
+    (text ":root, * {
+        --hue: {{ user.settings.theme_hue }} !important;
+    }"))
+
+(text "{%- endif %} {% if user.settings.theme_sat -%}")
+(style
+    (text ":root, * {
+        --sat: {{ user.settings.theme_sat }} !important;
+    }"))
+
+(text "{%- endif %} {% if user.settings.theme_lit -%}")
+(style
+    (text ":root, * {
+        --lit: {{ user.settings.theme_lit }} !important;
+    }"))
+(text "{%- endif %}")
+(div
+    ("style" "display: none;")
+    (text "{{ self::theme_color(color=user.settings.theme_color_surface, css=\"color-surface\") }} {{ self::theme_color(color=user.settings.theme_color_text, css=\"color-text\") }} {{ self::theme_color(color=user.settings.theme_color_text_link, css=\"color-link\") }}  {{ self::theme_color(color=user.settings.theme_color_lowered, css=\"color-lowered\") }} {{ self::theme_color(color=user.settings.theme_color_text_lowered, css=\"color-text-lowered\") }} {{ self::theme_color(color=user.settings.theme_color_super_lowered, css=\"color-super-lowered\") }}  {{ self::theme_color(color=user.settings.theme_color_raised, css=\"color-raised\") }} {{ self::theme_color(color=user.settings.theme_color_text_raised, css=\"color-text-raised\") }} {{ self::theme_color(color=user.settings.theme_color_super_raised, css=\"color-super-raised\") }}  {{ self::theme_color(color=user.settings.theme_color_primary, css=\"color-primary\") }} {{ self::theme_color(color=user.settings.theme_color_text_primary, css=\"color-text-primary\") }} {{ self::theme_color(color=user.settings.theme_color_primary_lowered, css=\"color-primary-lowered\") }}  {{ self::theme_color(color=user.settings.theme_color_secondary, css=\"color-secondary\") }} {{ self::theme_color(color=user.settings.theme_color_text_secondary, css=\"color-text-secondary\") }} {{ self::theme_color(color=user.settings.theme_color_secondary_lowered, css=\"color-secondary-lowered\") }} {% if user.permissions|has_supporter -%}")
+    (style
+        (text "{{ user.settings.theme_custom_css|remove_script_tags|safe }}"))
+    (text "{%- endif %}"))
+(text "{%- endif %} {%- endmacro %} {% macro theme_color(color, css) -%} {% if color -%}")
+(style
+    (text ":root,
+    * {
+        --{{ css }}: {{ color|color }} !important;
+    }"))
+(text "{%- endif %} {%- endmacro %}")

app/templates_src/confirm_dm.lisp

@@ -0,0 +1,28 @@
+(text "{% extends \"root.lisp\" %} {% block head %}")
+(title
+    (text "Message {{ profile.username }}? — {{ config.name }}"))
+(text "{% endblock %} {% block body %}")
+(div
+    ("class" "card flex flex_col gap_ch")
+    (p (text "Are you sure you would like to direct message ") (a ("href" "/@{{ profile.username }}") (text "{{ profile.username }}")) (text "?"))
+    (div
+        ("class" "flex gap_2")
+        (text "{% if user -%}")
+        (button
+            ("class" "button surface green")
+            ("onclick" "create_direct_chat_with_user('{{ profile.username }}')")
+            (text "{{ icon \"arrow-right\" }} Continue"))
+        (text "{% else %}")
+        (a
+            ("class" "button surface green")
+            ("href" "/login?redirect=/@{{ profile.username }}/confirm_dm")
+            (text "{{ icon \"arrow-right\" }} Sign in to message"))
+        (text "{%- endif %}")
+
+        (a
+            ("class" "button surface red")
+            ("href" "/")
+            (text "{{ icon \"x\" }} Cancel"))))
+
+(script ("src" "/public/messages.js"))
+(text "{% endblock %}")

app/templates_src/error.lisp

@@ -1,6 +1,6 @@
 (text "{% extends \"root.lisp\" %} {% block head %}")
 (title
-    (text "Error - {{ name }}"))
+    (text "Error — {{ config.name }}"))
 (link ("rel" "icon") ("href" "/public/favicon.svg"))
 (text "{% endblock %} {% block body %}")
 (div

app/templates_src/index.lisp

@@ -1,8 +1,11 @@
 (text "{% extends \"root.lisp\" %} {% block head %}")
-(title
-    (text "{{ name }}"))
+(text "{% if user -%}")
+(meta ("http-equiv" "refresh") ("content" "0; /chats"))
+(text "{% else %}")
+(meta ("http-equiv" "refresh") ("content" "0; {{ config.service_hosts.tetratto|safe }}"))
+(text "{%- endif %}")
 (text "{% endblock %} {% block body %}")
 (div
     ("class" "card")
-    (h1 (text "{{ name }}")))
+    (a ("href" "{{ config.service_hosts.tetratto }}") (text "Sending you elsewhere...")))
 (text "{% endblock %}")

app/templates_src/login.lisp

@@ -1,10 +1,10 @@
 (text "{% extends \"root.lisp\" %} {% block head %}")
 (title
-    (text "Login — {{ name }}"))
+    (text "Login — {{ config.name }}"))
 (text "{% endblock %} {% block body %}")
 (div
     ("class" "card container small")
-    (h4 (text "Login with Tetratto"))
+    (h4 ("class" "text_center w_full") (text "Log in with Tetratto"))
 
     (form
         ("class" "flex flex_col gap_4")
@@ -63,6 +63,7 @@
         document.getElementById(`flow_${flow_page}`).style.display = \"contents\";
     }
 
+    const search = new URLSearchParams(window.location.search);
     async function login(e) {
         e.preventDefault();
 
@@ -101,7 +102,11 @@
 
                     // redirect
                     setTimeout(() => {
-                        window.location.href = \"/chats\";
+                        if (search.get(\"redirect\") && (search.get(\"redirect\").startsWith(window.location.origin) || search.get(\"redirect\").startsWith(\"/\"))) {
+                            window.location.href = search.get(\"redirect\");
+                        } else {
+                            window.location.href = \"/chats\";
+                        }
                     }, 150);
                 }
             });

app/templates_src/manage.lisp

@@ -0,0 +1,117 @@
+(text "{% extends \"root.lisp\" %} {% block head %}")
+(title
+    (text "Manage {{ components::chat_name(chat=chat, members=members) }} — {{ config.name }}"))
+(text "{% endblock %} {% block body %}")
+(div
+    ("class" "flex w_full gap_2 justify_between items_center")
+    (div
+        ("class" "tabs short bar flex")
+        (a
+            ("class" "button tab camo")
+            ("href" "/chats")
+            (text "chats"))
+        (a
+            ("class" "button tab camo")
+            ("href" "/chats/{{ chat.id }}")
+            (text "{{ components::chat_name(chat=chat, members=members, advanced=true, avatar_size=\"18px\") }}"))
+        (a
+            ("class" "button tab")
+            ("href" "/chats/{{ chat.id }}/manage")
+            (text "{{ icon \"settings-2\" }} Manage"))))
+(div
+    ("class" "flex flex_col gap_4 card")
+    ("style" "flex: 1 0 auto")
+    (text "{% if chat.style != \"Direct\" -%}")
+    ; gc only
+    (button
+        ("class" "button surface")
+        ("onclick" "rename_chat('{{ chat.id }}', GC_INFO)")
+        (text "{{ icon \"pencil\" }} rename chat"))
+
+    (script
+        ("type" "application/json")
+        ("id" "gc_info")
+        (text "{{ chat.style.Group|json_encode() }}"))
+    (script
+        (text "globalThis.GC_INFO = JSON.parse(document.getElementById(\"gc_info\").innerHTML)"))
+    (text "{%- endif %}")
+
+    (ul
+        (li (b (text "Chat name: ")) (span (text "{{ components::chat_name(chat=chat, members=members) }}")))
+        (li (b (text "Chat created: ")) (span (text "{{ chat.created / 1000|int|date(format=\"%Y-%m-%d %H:%M\", timezone=\"Etc/UTC\") }} UTC")))
+        (li (b (text "Last message: ")) (span (text "{{ chat.last_message_created / 1000|int|date(format=\"%Y-%m-%d %H:%M\", timezone=\"Etc/UTC\") }} UTC")))
+        (li
+            (div
+                ("class" "flex items_center gap_ch")
+                (b (text "Owner:"))
+                (a
+                    ("class" "flex items_center gap_1 yellow")
+                    ("href" "{{ config.service_hosts.tetratto }}/@{{ members[0].username }}")
+                    (text "{{ icon \"crown\" }} {{ components::username(user=members[0]) }}")))))
+
+    (hr)
+    (div
+        ("class" "flex w_full justify_between items_center gap_2")
+        (h4 (text "Members") ("style" "margin: 0"))
+        (div
+            ("class" "flex gap_2")
+            (text "{% if chat.style != \"Direct\" -%}")
+            ; gc only
+            (button ("class" "green button surface") ("onclick" "document.getElementById('add_user_dialog').showModal()") (text "add"))
+            (text "{%- endif %}")
+
+            (button ("class" "red button surface") ("onclick" "leave_chat('{{ chat.id }}')") (text "leave"))))
+
+    (div
+        ("class" "flex flex_col gap_2")
+        (text "{% for member in members -%}")
+        (div
+            ("class" "card surface w_full flex flex_col gap_ch")
+            (a
+                ("class" "flush flex items_center gap_ch")
+                ("href" "/@{{ member.username }}")
+                (text "{{ components::avatar(id=member.id) }}")
+                (text "{{ components::username(user=member) }}"))
+            (span (text "{% if member.settings.status|length > 0 -%} {{ member.settings.status|markdown|safe }} {%- else -%} No status {%- endif %}"))
+            (text "{% if is_owner -%}")
+            (button
+                ("class" "red button")
+                ("onclick" "remove_member_from_chat('{{ chat.id }}', '{{ member.id }}')")
+                (text "remove"))
+            (text "{%- endif %}"))
+        (text "{%- endfor %}")))
+
+(dialog
+    ("id" "add_user_dialog")
+    (form
+        ("class" "inner")
+        ("onsubmit" "add_member_to_chat(event, '{{ chat.id }}')")
+        (h2
+            ("class" "text_center w_full")
+            (text "Add user"))
+
+        (input
+            ("type" "text")
+            ("list" "users_search")
+            ("name" "username")
+            ("id" "username")
+            ("placeholder" "username")
+            ("oninput" "search_users(event)"))
+
+        (hr ("class" "margin"))
+
+        (div
+            ("class" "flex gap_2 justify_between")
+            (button
+                ("onclick" "document.getElementById('add_user_dialog').close()")
+                ("class" "button red")
+                ("type" "button")
+                (text "Cancel"))
+
+            (button
+                ("class" "button green")
+                (text "Add")))))
+(datalist ("id" "users_search"))
+
+(script ("src" "/public/messages.js"))
+(text "{% endblock %}")

app/templates_src/profile.lisp

@@ -0,0 +1,157 @@
+(text "{% extends \"root.lisp\" %} {% block head %}")
+(title
+    (text "{{ profile.username }} — {{ config.name }}"))
+
+(meta
+    ("name" "og:title")
+    ("content" "{{ profile.username }}"))
+
+(meta
+    ("name" "description")
+    ("content" "Message @{{ profile.username }} on {{ config.name }}!"))
+
+(meta
+    ("name" "og:description")
+    ("content" "Message @{{ profile.username }} on {{ config.name }}!"))
+
+(meta
+    ("property" "og:type")
+    ("content" "profile"))
+
+(meta
+    ("property" "profile:username")
+    ("content" "{{ profile.username }}"))
+
+(meta
+    ("name" "og:image")
+    ("content" "{{ config.service_hosts.buckets|safe }}/avatars/{{ profile.id }}"))
+
+(meta
+    ("name" "twitter:image")
+    ("content" "{{ config.service_hosts.buckets|safe }}/avatars/{{ profile.id }}"))
+
+(meta
+    ("name" "twitter:card")
+    ("content" "summary"))
+
+(meta
+    ("name" "twitter:title")
+    ("content" "{{ profile.username }}"))
+
+(meta
+    ("name" "twitter:description")
+    ("content" "Message @{{ profile.username }} on {{ config.name }}!"))
+(text "{% endblock %} {% block body %}")
+(text "{% if not use_user_theme -%} {{ components::theme(user=profile, theme_preference=profile.settings.profile_theme) }} {%- endif %}")
+
+(text "{% if profile.settings.profile_theme -%}")
+(script
+    (text "setTimeout(() => {
+        temporary_set_theme(\"{{ profile.settings.profile_theme }}\");
+    }, 150);"))
+(text "{%- endif %}")
+
+(div
+    ("class" "flex flex_col gap_ch justify_center items_center profile")
+    ("style" "height: calc(100dvh - var(--nav-height))")
+    (div
+        ("class" "card_nest w_full")
+        ("style" "max-width: 25rem")
+        (div
+            ("class" "card banner"))
+        (div
+            ("class" "card flex flex_col gap_ch")
+            (text "{{ components::avatar(id=profile.id, size=\"160px\") }}")
+            (div
+                ("class" "w_full flex items_center justify_between gap_2")
+                (h2 (text "{{ components::username(user=profile) }}"))
+                (button
+                    ("onclick" "document.getElementById('user_info').showModal()")
+                    ("class" "button icon_only big_icon")
+                    ("title" "User info")
+                    (text "{{ icon \"info\" }}")))
+
+            (div (text "{{ profile.settings.biography|markdown|safe }}"))
+
+            ; user links
+            (div
+                ("class" "flex flex_col gap_2")
+                ("style" "margin-top: 20px")
+                (text "{% for link in profile.settings.links -%}")
+                (a
+                    ("class" "button big surface justify_start")
+                    ("href" "{{ link[1] }}")
+                    (text "{{ icon \"link\" }} {{ link[0] }}"))
+                (text "{%- endfor %}"))
+
+            ; big action links
+            (div
+                ("class" "flex flex_row gap_2")
+                (a
+                    ("class" "button big surface")
+                    ("href" "{{ config.service_hosts.tetratto }}/@{{ profile.username }}")
+                    (text "{{ icon \"external-link\" }} Full profile"))
+
+                (text "{% if user -%} {% if profile.id != user.id -%}")
+                (button
+                    ("class" "button big surface")
+                    ("onclick" "create_direct_chat_with_user('{{ profile.username }}')")
+                    (text "{{ icon \"message-circle\" }} Message"))
+                (text "{%- endif %} {% else %}")
+                (a
+                    ("class" "button big surface")
+                    ("href" "/login?redirect=/@{{ profile.username }}/confirm_dm")
+                    (text "{{ icon \"message-circle\" }} Message"))
+                (text "{%- endif %}")))))
+
+(dialog
+    ("id" "user_info")
+    (div
+        ("class" "inner")
+        (h2
+            ("class" "text_center w_full")
+            (text "User info"))
+
+        (ul
+            (li (b (text "Username: ")) (text "{{ profile.username }}"))
+            (li (b (text "Joined: ")) (text "{{ profile.created / 1000|int|date(format=\"%Y-%m-%d %H:%M\", timezone=\"Etc/UTC\") }} UTC"))
+            (li (b (text "Followers: ")) (a ("href" "{{ config.service_hosts.tetratto }}/@{{ profile.username }}/followers") (text "{{ profile.follower_count }}")))
+            (li (b (text "Following: ")) (a ("href" "{{ config.service_hosts.tetratto }}/@{{ profile.username }}/following") (text "{{ profile.following_count }}")))
+            (li (b (text "Posts: ")) (a ("href" "{{ config.service_hosts.tetratto }}/@{{ profile.username }}") (text "{{ profile.post_count }}"))))
+
+        (hr ("class" "margin"))
+        (div
+            ("class" "flex gap_2 justify_right")
+            (button
+                ("onclick" "document.getElementById('user_info').close()")
+                ("class" "button red")
+                ("type" "button")
+                (text "Close")))))
+
+(style
+    (text ".profile .avatar {
+        margin: -120px auto 0;
+    }
+
+    .profile .banner {
+        background: url(\"{{ config.service_hosts.buckets }}/banners/{{ profile.id }}\") no-repeat center !important;
+        background-size: cover !important;
+        border-radius: var(--radius) var(--radius) 0 0;
+        height: 225px;
+    }
+
+    .card_nest .card:nth-child(2) {
+        border-radius: 0 0 var(--radius) var(--radius);
+    }
+
+    .profile h2 {
+        margin: 0;
+    }
+
+    @media screen and (max-width: 900px) {
+        .card_nest .card {
+            border-radius: 0;
+        }
+    }"))
+(script ("src" "/public/messages.js"))
+(text "{% endblock %}")

app/templates_src/root.lisp

@@ -12,10 +12,10 @@
 
         (meta ("name" "theme-color") ("content" "{{ theme_color }}"))
         (meta ("property" "og:type") ("content" "website"))
-        (meta ("property" "og:site_name") ("content" "{{ name }}"))
+        (meta ("property" "og:site_name") ("content" "{{ config.name }}"))
 
-        (meta ("property" "og:title") ("content" "{{ name }}"))
-        (meta ("property" "twitter:title") ("content" "{{ name }}"))
+        (meta ("property" "og:title") ("content" "{{ config.name }}"))
+        (meta ("property" "twitter:title") ("content" "{{ config.name }}"))
         (link ("rel" "icon") ("href" "/public/favicon.svg"))
 
         (script ("src" "/public/app.js?v={{ build_code }}") ("defer"))
@@ -24,6 +24,9 @@
         (text "{% block head %}{% endblock %}"))
 
     (body
+        ("class" "{% if user and user.settings.use_system_font -%} use_system_font {%- endif %}")
+        (text "{% if user and use_user_theme -%} {{ components::theme(user=user, theme_preference=user.settings.theme_preference) }} {%- endif %}")
+
         ; nav
         (nav
             ("class" "flex w_full justify_between gap_2")
@@ -44,7 +47,7 @@
                         ("class" "inner left")
                         (a
                             ("class" "button")
-                            ("href" "/")
+                            ("href" "{% if user -%} /chats {%- else -%} / {%- endif %}")
                             (text "home"))
                         (a
                             ("class" "button")
@@ -61,10 +64,6 @@
                             ("href" "{{ config.service_hosts.tetratto }}/auth/register")
                             (text "sign up"))
                         (text "{%- else -%}")
-                        (a
-                            ("class" "button")
-                            ("href" "/chats")
-                            (text "my chats"))
                         (a
                             ("class" "button")
                             ("href" "{{ config.service_hosts.tetratto }}/settings")
@@ -74,7 +73,17 @@
                             ("onclick" "user_logout()")
                             (text "logout"))
                         (text "{%- endif %}")
-                        (text "{% block dropdown %}{% endblock %}"))))
+                        (text "{% block dropdown %}{% endblock %}")))
+                (text "{% if user -%}")
+                (a
+                    ("href" "{{ config.service_hosts.tetratto }}/notifs")
+                    ("class" "button camo fade")
+                    (text "{% if user.notification_count > 0 -%}")
+                    (span ("class" "red") (text "{{ icon \"bell-dot\" }}"))
+                    (text "{% else %}")
+                    (text "{{ icon \"bell\" }}")
+                    (text "{%- endif %}"))
+                (text "{%- endif %}"))
 
             (div
                 ("class" "side flex")