feat(mqtt): persist publish panel visibility

apps/desktop/src/components/mqtt/MqttAdminConsole.vue

@@ -8,6 +8,8 @@ import { Dialog, DialogContent, DialogFooter, DialogHeader, DialogTitle } from "
 import TopicTreeNode from "./TopicTreeNode.vue";
 import MqttPublishPanel from "./MqttPublishDialog.vue";
 import { decodePayload, PAYLOAD_ENCODINGS, PAYLOAD_ENCODING_LABELS, type PayloadEncoding } from "@/lib/mqtt/mqttPayloadCodec";
+import { safeLocalStorageGet, safeLocalStorageSet } from "@/lib/backend/safeStorage";
+import { ChevronDown, ChevronUp } from "@lucide/vue";
 
 interface Props {
   connectionId: string;
@@ -34,6 +36,8 @@ const formQos = ref<MqttQoS>("atmostonce");
 const formNoLocal = ref(false);
 const formEnabled = ref(true);
 const editingTopic = ref<string | null>(null);
+const MQTT_PUBLISH_PANEL_COLLAPSED_STORAGE_KEY = "dbx-mqtt-publish-panel-collapsed";
+const publishPanelCollapsed = ref(safeLocalStorageGet(MQTT_PUBLISH_PANEL_COLLAPSED_STORAGE_KEY) === "true");
 
 const connected = computed(() => brokerInfo.value?.connected ?? false);
 const mqtt5 = computed(() => brokerInfo.value?.protocolVersion?.includes("5") ?? false);
@@ -197,6 +201,11 @@ function handleMessagePublished() {
   void refreshData();
 }
 
+function togglePublishPanel() {
+  publishPanelCollapsed.value = !publishPanelCollapsed.value;
+  safeLocalStorageSet(MQTT_PUBLISH_PANEL_COLLAPSED_STORAGE_KEY, String(publishPanelCollapsed.value));
+}
+
 async function handleClearMessages() {
   try {
     await mqttClearMessages(props.connectionId);
@@ -317,6 +326,19 @@ onUnmounted(stopPolling);
               <select v-model="displayEncoding" class="h-6 rounded border bg-transparent px-1.5 text-[11px] text-muted-foreground outline-none">
                 <option v-for="enc in PAYLOAD_ENCODINGS" :key="enc" :value="enc">{{ PAYLOAD_ENCODING_LABELS[enc] }}</option>
               </select>
+              <Button
+                size="sm"
+                variant="ghost"
+                class="h-6 gap-1 px-2 text-[11px] font-normal normal-case"
+                :disabled="!connected"
+                :aria-expanded="!publishPanelCollapsed"
+                :title="publishPanelCollapsed ? t('connection.mqttShowPublishPanel') : t('connection.mqttHidePublishPanel')"
+                @click="togglePublishPanel"
+              >
+                <ChevronUp v-if="publishPanelCollapsed" class="h-3.5 w-3.5" />
+                <ChevronDown v-else class="h-3.5 w-3.5" />
+                <span>{{ publishPanelCollapsed ? t("connection.mqttShowPublishPanel") : t("connection.mqttHidePublishPanel") }}</span>
+              </Button>
             </div>
           </div>
           <div class="flex min-h-0 flex-1 flex-col overflow-auto">
@@ -344,7 +366,7 @@ onUnmounted(stopPolling);
             </div>
           </div>
         </div>
-        <MqttPublishPanel v-if="connected" :connection-id="connectionId" :initial-topic="selectedTopic" @published="handleMessagePublished" />
+        <MqttPublishPanel v-if="connected" v-show="!publishPanelCollapsed" :connection-id="connectionId" :initial-topic="selectedTopic" @published="handleMessagePublished" />
       </div>
     </div>
 

apps/desktop/src/i18n/locales/en.ts

@@ -803,6 +803,8 @@ export default {
     mqttRefresh: "Refresh",
     mqttPublishDialogTitle: "Publish MQTT Message",
     mqttClearMessages: "Clear messages",
+    mqttHidePublishPanel: "Hide publish panel",
+    mqttShowPublishPanel: "Show publish panel",
     mqttNoTopicsHint: "No subscriptions. Use the field below to subscribe to a topic.",
     mqttSubscribePlaceholder: "Enter a topic filter...",
     mqttMessagesForTopic: "Messages: {topic}",

apps/desktop/src/i18n/locales/es.ts

@@ -1037,6 +1037,8 @@ export default withEnglishFallback({
     mqttRefresh: "Actualizar",
     mqttPublishDialogTitle: "Publicar mensaje MQTT",
     mqttClearMessages: "Borrar mensajes",
+    mqttHidePublishPanel: "Ocultar panel de publicación",
+    mqttShowPublishPanel: "Mostrar panel de publicación",
     mqttNoTopicsHint: "No hay suscripciones. Usa el campo inferior para suscribirte a un Topic.",
     mqttSubscribePlaceholder: "Introduce un filtro de Topic...",
     mqttMessagesForTopic: "Mensajes: {topic}",

apps/desktop/src/i18n/locales/it.ts

@@ -1035,6 +1035,8 @@ export default withEnglishFallback({
     mqttRefresh: "Aggiorna",
     mqttPublishDialogTitle: "Pubblica messaggio MQTT",
     mqttClearMessages: "Cancella messaggi",
+    mqttHidePublishPanel: "Nascondi pannello di pubblicazione",
+    mqttShowPublishPanel: "Mostra pannello di pubblicazione",
     mqttNoTopicsHint: "Nessuna sottoscrizione. Usa il campo sottostante per sottoscrivere un Topic.",
     mqttSubscribePlaceholder: "Inserisci un filtro Topic...",
     mqttMessagesForTopic: "Messaggi: {topic}",

apps/desktop/src/i18n/locales/ja.ts

@@ -1035,6 +1035,8 @@ export default withEnglishFallback({
     mqttRefresh: "更新",
     mqttPublishDialogTitle: "MQTT メッセージを公開",
     mqttClearMessages: "メッセージを消去",
+    mqttHidePublishPanel: "公開パネルを隠す",
+    mqttShowPublishPanel: "公開パネルを表示",
     mqttNoTopicsHint: "購読はありません。下の入力欄からトピックを購読してください。",
     mqttSubscribePlaceholder: "トピックフィルターを入力...",
     mqttMessagesForTopic: "メッセージ: {topic}",

apps/desktop/src/i18n/locales/pt-BR.ts

@@ -1036,6 +1036,8 @@ export default withEnglishFallback({
     mqttRefresh: "Atualizar",
     mqttPublishDialogTitle: "Publicar mensagem MQTT",
     mqttClearMessages: "Limpar mensagens",
+    mqttHidePublishPanel: "Ocultar painel de publicação",
+    mqttShowPublishPanel: "Mostrar painel de publicação",
     mqttNoTopicsHint: "Nenhuma inscrição. Use o campo abaixo para assinar um Topic.",
     mqttSubscribePlaceholder: "Digite um filtro de Topic...",
     mqttMessagesForTopic: "Mensagens: {topic}",

apps/desktop/src/i18n/locales/zh-CN.ts

@@ -727,6 +727,8 @@ export default withEnglishFallback({
     mqttRefresh: "刷新",
     mqttPublishDialogTitle: "发布 MQTT 消息",
     mqttClearMessages: "清空消息",
+    mqttHidePublishPanel: "隐藏发布区",
+    mqttShowPublishPanel: "显示发布区",
     mqttNoTopicsHint: "暂无订阅。使用下方输入框订阅 Topic。",
     mqttSubscribePlaceholder: "输入要订阅的 Topic...",
     mqttMessagesForTopic: "消息：{topic}",

apps/desktop/src/i18n/locales/zh-TW.ts

@@ -1035,6 +1035,8 @@ export default withEnglishFallback({
     mqttRefresh: "重新整理",
     mqttPublishDialogTitle: "發布 MQTT 訊息",
     mqttClearMessages: "清除訊息",
+    mqttHidePublishPanel: "隱藏發布區",
+    mqttShowPublishPanel: "顯示發布區",
     mqttNoTopicsHint: "目前沒有訂閱。請使用下方輸入框訂閱 Topic。",
     mqttSubscribePlaceholder: "輸入要訂閱的 Topic 篩選器...",
     mqttMessagesForTopic: "訊息：{topic}",