more mobile adjustments

freedata_gui/src/components/chat_conversations.vue

@@ -17,6 +17,21 @@
     id="chat-list-tab"
     role="tablist"
   >
+
+
+    <!-- Show loading message if we're waiting -->
+    <div v-if="chat.loading" class="text-center p-2">
+      <div class="spinner-border" role="status">
+        <span class="visually-hidden">{{ $t('chat.loadingMessages') }}</span>
+      </div>
+    </div>
+
+    <!-- Show 'no conversations' message if not loading and no conversations exist -->
+    <div v-else-if="!chat.callsign_list || Object.keys(chat.callsign_list).length === 0" class="text-center p-2">
+      {{ $t('chat.noConversations') }}
+    </div>
+
+
     <template v-for="(details, callsign) in chat.callsign_list" :key="callsign">
       <a
         class="list-group-item list-group-item-action list-group-item-secondary rounded-2 border-0 mb-2"

freedata_gui/src/components/chat_screen.vue

@@ -91,7 +91,7 @@ function resetChat() {
         class="border-start p-0 d-flex flex-column h-100"
       >
       <!-- Top Navbar -->
-      <nav class="navbar sticky-top z-0 bg-body-tertiary border-bottom p-1">
+      <nav v-if="chat.selectedCallsign" class="navbar sticky-top z-0 bg-body-tertiary border-bottom p-1">
         <div class="row align-items-center">
   <!-- Column for the callsign button -->
   <div class="col-auto">
@@ -149,7 +149,7 @@ function resetChat() {
 
 
       <!-- New Message Input Area -->
-      <div class="p-0">
+      <div v-if="chat.selectedCallsign" class="p-0">
         <chat_new_message />
       </div>
     </div>

freedata_gui/src/js/api.js

@@ -11,6 +11,8 @@ import {
 import { processFreedataMessages } from "./messagesHandler";
 import { useStateStore } from "../store/stateStore.js";
 const state = useStateStore(pinia);
+import { useChatStore } from "../store/chatStore.js";
+const chatStore = useChatStore(pinia);
 
 // Build URL with adjusted port if needed
 function buildURL(endpoint) {
@@ -260,8 +262,17 @@ export async function getRadioStatus() {
 }
 
 export async function getFreedataMessages() {
-  let res = await apiGet("/freedata/messages");
-  if (res) processFreedataMessages(res);
+  chatStore.loading = true;
+  try {
+    const res = await apiGet("/freedata/messages");
+    if (res) {
+      processFreedataMessages(res);
+    }
+  } catch (error) {
+    console.error("Error fetching messages:", error);
+  } finally {
+    chatStore.loading = false;
+  }
 }
 
 export async function getFreedataMessageById(id) {

freedata_gui/src/locales/en_English.json

@@ -203,7 +203,9 @@
         "utc": "UTC",
         "adif": "ADIF",
         "new": "new",
-        "selectChat": "Please select or create a chat"
+        "selectChat": "Please select or create a chat",
+        "noConversations": "No conversations, yet",
+        "loadingMessages": "Loading messages..."
     },
     "settings": {
         "enable": "Enable",

freedata_gui/src/store/chatStore.js

@@ -8,6 +8,9 @@ export const useChatStore = defineStore("chatStore", () => {
   var newChatMessage = ref();
   var totalUnreadMessages = ref(0);
 
+  // Indicator if we are loading data
+  var loading = ref(false);
+
   /* ------------------------------------------------ */
   // Scroll to bottom functions
   const scrollTrigger = ref(0);
@@ -59,5 +62,6 @@ export const useChatStore = defineStore("chatStore", () => {
     arq_speed_list_timestamp,
     scrollTrigger,
     triggerScrollToBottom,
+    loading
   };
 });