chore: shoutbox improvements

Author: dpc

crates/rostra-web-ui/src/layout.rs

@@ -286,19 +286,36 @@ pub(crate) fn render_html_footer() -> Markup {
                         const tpl = document.createElement('template');
                         tpl.innerHTML = event.data;
 
-                        // Morph each element in the fragment into the DOM
-                        tpl.content.querySelectorAll('[id]').forEach((element) => {
-                          const target = document.getElementById(element.id);
-                          if (target && Alpine.morph) {
-                            Alpine.morph(target, element);
+                        const focus = (el) => {
+                          const target = el?.matches?.('[x-autofocus]') ? el : el?.querySelector?.('[x-autofocus]');
+                          if (target) target.scrollIntoView({ block: 'nearest' });
+                        };
+
+                        // Process elements with IDs - morph or merge based on x-merge attribute
+                        tpl.content.querySelectorAll('[id]').forEach((content) => {
+                          const target = document.getElementById(content.id);
+                          if (!target) return;
+
+                          const merge = content.getAttribute('x-merge');
+                          if (merge === 'append') {
+                            target.append(...content.childNodes);
+                            Alpine.initTree(target.lastElementChild);
+                            focus(target.lastElementChild);
+                          } else if (merge === 'prepend') {
+                            target.prepend(...content.childNodes);
+                            Alpine.initTree(target.firstElementChild);
+                            focus(target.firstElementChild);
+                          } else {
+                            Alpine.morph(target, content);
+                            focus(target);
                           }
                         });
 
-                        // Initialize any new elements (for x-init to fire $dispatch)
-                        tpl.content.querySelectorAll('[x-init]').forEach((element) => {
-                          document.body.appendChild(element);
-                          Alpine.initTree(element);
-                          element.remove();
+                        // Run standalone x-init elements (for $dispatch etc.)
+                        tpl.content.querySelectorAll('[x-init]').forEach((el) => {
+                          document.body.appendChild(el);
+                          Alpine.initTree(el);
+                          el.remove();
                         });
                       };
 

crates/rostra-web-ui/src/routes/post.rs

@@ -110,7 +110,11 @@ pub async fn get_single_post(
     }
 
     // Default behavior: render full timeline page
-    let navbar = state.timeline_common_navbar(&session).await?;
+    let navbar = state
+        .timeline_common_navbar()
+        .session(&session)
+        .call()
+        .await?;
     Ok(Maud(
         state
             .render_timeline_page(

crates/rostra-web-ui/src/routes/shoutbox.rs

@@ -113,7 +113,8 @@ pub async fn get_shoutbox(
 
     // WebSocket URL for live updates (start with 0 counts, shoutbox is current page
     // so 0)
-    let ws_url = "websocket('/updates?followees=0&network=0&notifications=0&shoutbox=0')";
+    let ws_url =
+        "websocket('/updates?followees=0&network=0&notifications=0&shoutbox=0&on_shoutbox=true')";
     let badge_counts = "badgeCounts({ followees: 0, network: 0, notifications: 0, shoutbox: 0 })";
 
     // Render the shoutbox content with chat-like layout
@@ -189,7 +190,7 @@ pub async fn get_shoutbox(
             form ."o-shoutbox__form"
                 action="/shoutbox/post"
                 method="post"
-                x-target="shoutbox-posts ajax-scripts"
+                "x-target.nofocus"="shoutbox-posts ajax-scripts"
                 "@ajax:before"=(form_ajax.before)
                 "@ajax:after"=(form_ajax.after)
                 "@ajax:success"="setTimeout(() => { const el = document.getElementById('shoutbox-messages'); el.scrollTop = el.scrollHeight; }, 50)"
@@ -224,8 +225,13 @@ pub async fn get_shoutbox(
         }
     };
 
-    // Full page layout
-    let navbar = state.timeline_common_navbar(&session).await?;
+    // Full page layout (hide new post form since shoutbox has its own input)
+    let navbar = state
+        .timeline_common_navbar()
+        .session(&session)
+        .hide_new_post_form(true)
+        .call()
+        .await?;
     let page_layout = state.render_page_layout(navbar, shoutbox_content);
 
     let content = html! {
@@ -286,8 +292,10 @@ pub async fn post_shoutbox(
         div id="ajax-scripts" {
             script {
                 (PreEscaped(r#"
-                    const input = document.getElementById('shoutbox-input');
-                    if (input) input.value = '';
+                    (function() {
+                        const input = document.getElementById('shoutbox-input');
+                        if (input) input.value = '';
+                    })()
                 "#))
             }
         }

crates/rostra-web-ui/src/routes/timeline.rs

@@ -54,7 +54,11 @@ pub async fn get_followees(
         form.event_id
             .map(|event_id| TimelineCursor::ByEventTime(EventPaginationCursor { ts, event_id }))
     });
-    let navbar = state.timeline_common_navbar(&session).await?;
+    let navbar = state
+        .timeline_common_navbar()
+        .session(&session)
+        .call()
+        .await?;
     Ok(Maud(
         state
             .render_timeline_page(
@@ -80,7 +84,11 @@ pub async fn get_network(
         form.event_id
             .map(|event_id| TimelineCursor::ByEventTime(EventPaginationCursor { ts, event_id }))
     });
-    let navbar = state.timeline_common_navbar(&session).await?;
+    let navbar = state
+        .timeline_common_navbar()
+        .session(&session)
+        .call()
+        .await?;
     Ok(Maud(
         state
             .render_timeline_page(
@@ -106,7 +114,11 @@ pub async fn get_notifications(
         form.seq
             .map(|seq| TimelineCursor::ByReceivedTime(ReceivedAtPaginationCursor { ts, seq }))
     });
-    let navbar = state.timeline_common_navbar(&session).await?;
+    let navbar = state
+        .timeline_common_navbar()
+        .session(&session)
+        .call()
+        .await?;
     Ok(Maud(
         state
             .render_timeline_page(
@@ -127,6 +139,8 @@ pub struct UpdatesQuery {
     pub network: Option<usize>,
     pub notifications: Option<usize>,
     pub shoutbox: Option<usize>,
+    /// If true, we're on the shoutbox page - skip shoutbox counter updates
+    pub on_shoutbox: Option<bool>,
 }
 
 pub async fn get_updates(
@@ -141,9 +155,10 @@ pub async fn get_updates(
         notifications: query.notifications.unwrap_or(0),
         shoutbox: query.shoutbox.unwrap_or(0),
     };
+    let on_shoutbox = query.on_shoutbox.unwrap_or(false);
     ws.on_upgrade(move |ws| async move {
         let _ = state
-            .handle_get_updates(ws, &session, pending)
+            .handle_get_updates(ws, &session, pending, on_shoutbox)
             .await
             .inspect_err(|err| {
                 debug!(target: LOG_TARGET, err=%err.fmt_compact(), "WS handler failed");
@@ -165,9 +180,14 @@ pub async fn get_post_replies(
 
 #[bon::bon]
 impl UiState {
+    #[builder]
     pub(crate) async fn timeline_common_navbar(
         &self,
         session: &UserSession,
+        /// If true, the new post form is hidden (e.g., on shoutbox page which
+        /// has its own input)
+        #[builder(default)]
+        hide_new_post_form: bool,
     ) -> RequestResult<Markup> {
         let client = self.client(session.id()).await?;
         let client_ref = client.client_ref()?;
@@ -182,7 +202,9 @@ impl UiState {
                     (self.render_self_profile_summary(session, ro_mode).await?)
                 }
 
-                (self.new_post_form(None, ro_mode, Some(user_id)))
+                @if !hide_new_post_form {
+                    (self.new_post_form(None, ro_mode, Some(user_id)))
+                }
             }
         })
     }
@@ -192,6 +214,7 @@ impl UiState {
         mut ws: WebSocket,
         user: &UserSession,
         initial_pending: PendingCounts,
+        on_shoutbox: bool,
     ) -> RequestResult<()> {
         let client = self.client(user.id()).await?;
         let client_ref = client.client_ref()?;
@@ -261,17 +284,20 @@ impl UiState {
                         }
                     };
                     let author = event_content.event.event.author;
-                    // Count shoutbox posts from others
-                    if author != self_id {
+
+                    // Only count shoutbox posts if not on shoutbox page
+                    if !on_shoutbox && author != self_id {
                         shoutbox_count += 1;
                     }
 
-                    // Send the rendered shout for live updates
-                    let shout_html = self
-                        .render_shoutbox_post_live(&client_ref, self_id, author, &shoutbox_content)
-                        .await
-                        .into_string();
-                    let _ = ws.send(shout_html.into()).await;
+                    // Send the rendered shout for live updates (only if on shoutbox page)
+                    if on_shoutbox {
+                        let shout_html = self
+                            .render_shoutbox_post_live(&client_ref, self_id, author, &shoutbox_content)
+                            .await
+                            .into_string();
+                        let _ = ws.send(shout_html.into()).await;
+                    }
                 }
             }
 
@@ -305,7 +331,7 @@ impl UiState {
     }
 
     /// Render a shoutbox post for live WebSocket updates.
-    /// Returns HTML that will be inserted into the shoutbox via x-init.
+    /// Returns HTML that will be appended to #shoutbox-posts via x-merge.
     async fn render_shoutbox_post_live(
         &self,
         client: &ClientRef<'_>,
@@ -327,27 +353,13 @@ impl UiState {
             .map(|c| format!(r#"{{"ts":{},"seq":{}}}"#, u64::from(c.ts), c.seq))
             .unwrap_or_default();
 
-        // The WebSocket handler appends [x-init] elements to body, calls initTree, then
-        // removes them. We use x-data + x-init to ensure Alpine context is
-        // available.
+        // WebSocket handler supports x-merge="append" for appending children to target
         html! {
-            div
-                x-data
-                x-init=(format!(r#"
-                    const container = document.getElementById('shoutbox-posts');
-                    if (container) {{
-                        const post = $el.querySelector('.o-shoutbox__post');
-                        if (post) {{
-                            container.appendChild(post);
-                            const messages = document.getElementById('shoutbox-messages');
-                            if (messages) messages.scrollTop = messages.scrollHeight;
-                            // Update last-seen cookie since user is viewing shoutbox
-                            document.cookie = '{cookie_name}=' + encodeURIComponent('{cookie_value}') + '; path=/; max-age=31536000';
-                        }}
-                    }}
-                "#))
-            {
-                div ."o-shoutbox__post -new" {
+            div id="shoutbox-posts" x-merge="append" {
+                div ."o-shoutbox__post -new"
+                    x-autofocus
+                    x-init=(format!(r#"document.cookie = '{cookie_name}=' + encodeURIComponent('{cookie_value}') + '; path=/; max-age=31536000';"#))
+                {
                     img ."o-shoutbox__avatar u-userImage"
                         src=(self.avatar_url(author))
                         alt="Avatar"