github/dbx
4
0 Fork 0
mirror of https://github.com/t8y2/dbx.git synced 2026-11-15 06:51:27 +00:00
Code Issues Packages Projects Releases Wiki Activity

feat(mqtt): persist publish panel visibility

Browse Source
This commit is contained in:
jinmo authored and GitHub committed 2026-08-13 19:25:07 +08:00
1 parent 1e0687a7e2
commit 58a2d78629
8 files changed
+37 -1
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

apps/desktop/src/components/mqtt/MqttAdminConsole.vue
+23 -1
View File
@@ -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>