Refactor image grid empty state, enhance header styles, and update ChannelRef struct

- Changed the empty state message in ImageGrid to use a dedicated class for styling.
- Adjusted padding and border-radius for the "Guild Watcher" label in the header for better aesthetics.
- Introduced a new class for the status indicator dot and linked its visibility to the connection state.
- Updated ChannelRef struct to include optional fields for thread_id and thread_name with appropriate serialization settings.

services/frontend/frontend/src/features/messages/components/image_grid.rs

@@ -56,7 +56,7 @@ pub fn ImageGrid(messages: Vec<MessageRecord>) -> impl IntoView {
 
     if urls.is_empty() {
         return view! {
-            <div class="flex items-center justify-center h-32 text-secondary italic">
+            <div class="img-empty">
                 "No images found"
             </div>
         }

services/frontend/frontend/src/layout/header.rs

@@ -20,6 +20,7 @@ pub fn Header() -> impl IntoView {
         WsStatus::Disconnected => "var(--text-tertiary)",
         WsStatus::Error(_) => "var(--color-error)",
     });
+    let is_connecting = Memo::new(move |_| matches!(ws_status.get(), WsStatus::Connecting));
 
     view! {
         <header style="
@@ -37,7 +38,7 @@ pub fn Header() -> impl IntoView {
                 <span style="font-weight: 700; font-size: 1.125rem; color: var(--color-primary);">
                     "IMPHNEN"
                 </span>
-                <span style="color: var(--text-secondary); font-size: 0.75rem; padding: 0.125rem 0.375rem; background: var(--surface-overlay); border-radius: var(--radius-sm);">
+                <span style="color: var(--text-secondary); font-size: 0.75rem; padding: 0.125rem 0.5rem; background: var(--surface-overlay); border-radius: var(--radius-full);">
                     "Guild Watcher"
                 </span>
             </div>
@@ -45,7 +46,8 @@ pub fn Header() -> impl IntoView {
             <div class="head-right">
                 <div class="head-status">
                     <span
-                        style="width: 8px; height: 8px; border-radius: 50%;"
+                        class="head-status-dot"
+                        class:is-connecting=is_connecting
                         style:background={move || indicator_color_memo.get()}
                     ></span>
                     <span>{move || indicator_text_memo.get()}</span>

services/frontend/shared-types/src/message.rs

@@ -131,12 +131,16 @@ impl<'de> Deserialize<'de> for EmbedMedia {
 }
 
 #[derive(Debug, Clone, Serialize, Deserialize, PartialEq)]
+#[serde(rename_all = "camelCase")]
 pub struct ChannelRef {
     pub channel_id: String,
+    #[serde(default)]
     #[serde(skip_serializing_if = "Option::is_none")]
     pub channel_name: Option<String>,
+    #[serde(default)]
     #[serde(skip_serializing_if = "Option::is_none")]
     pub thread_id: Option<String>,
+    #[serde(default)]
     #[serde(skip_serializing_if = "Option::is_none")]
     pub thread_name: Option<String>,
 }