mirror of
https://git.quad4.io/RNS-Things/MeshChatX.git
synced 2026-06-06 20:41:35 +00:00
feat(frontend): improve UI with loading overlay, legend, and toolbar components for better user experience
This commit is contained in:
Ivan
@@ -14,6 +14,23 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div
|
||||
v-if="showWsDisconnectedBanner"
|
||||
class="relative z-[100] bg-red-700 text-white px-4 py-2 text-center text-sm font-medium shadow-md border-b border-red-800/80"
|
||||
role="status"
|
||||
aria-live="polite"
|
||||
>
|
||||
{{ $t("app.backend_disconnected") }} · {{ wsDisconnectedDurationText }}
|
||||
</div>
|
||||
<div
|
||||
v-if="wsReconnectedBanner"
|
||||
class="relative z-[100] bg-emerald-700 text-white px-4 py-2 text-center text-sm font-medium shadow-md border-b border-emerald-800/80 transition-opacity duration-300"
|
||||
role="status"
|
||||
aria-live="polite"
|
||||
>
|
||||
{{ $t("app.backend_reconnected") }}
|
||||
</div>
|
||||
|
||||
<RouterView v-if="$route.name === 'auth'" />
|
||||
|
||||
<template v-else>
|
||||
@@ -573,6 +590,7 @@ import { useTheme } from "vuetify";
|
||||
import SidebarLink from "./SidebarLink.vue";
|
||||
import DialogUtils from "../js/DialogUtils";
|
||||
import WebSocketConnection from "../js/WebSocketConnection";
|
||||
import { formatDisconnectedDuration } from "../js/wsConnectionSupport";
|
||||
import GlobalState, { mergeGlobalConfig } from "../js/GlobalState";
|
||||
import Utils from "../js/Utils";
|
||||
import GlobalEmitter from "../js/GlobalEmitter";
|
||||
@@ -657,6 +675,13 @@ export default {
|
||||
initiationTargetHash: null,
|
||||
initiationTargetName: null,
|
||||
isCallWindowOpen: false,
|
||||
|
||||
wsDisconnected: false,
|
||||
wsDisconnectedAt: null,
|
||||
wsDisconnectedDurationText: "",
|
||||
wsReconnectedBanner: false,
|
||||
wsDisconnectTickTimer: null,
|
||||
wsReconnectedHideTimer: null,
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
@@ -685,6 +710,9 @@ export default {
|
||||
activeCallTab() {
|
||||
return GlobalState.activeCallTab;
|
||||
},
|
||||
showWsDisconnectedBanner() {
|
||||
return this.shellRunning && this.wsDisconnected && this.$route?.name !== "auth";
|
||||
},
|
||||
},
|
||||
watch: {
|
||||
$route(to, from) {
|
||||
@@ -715,6 +743,7 @@ export default {
|
||||
this._shellAuthWatchStop = null;
|
||||
}
|
||||
this.stopShell();
|
||||
this.clearWsShellUiTimers();
|
||||
if (this.endedTimeout) clearTimeout(this.endedTimeout);
|
||||
this.stopRingtone();
|
||||
this.toneGenerator.stop();
|
||||
@@ -769,6 +798,8 @@ export default {
|
||||
this.shellRunning = true;
|
||||
WebSocketConnection.connect();
|
||||
WebSocketConnection.on("message", this.onWebsocketMessage);
|
||||
WebSocketConnection.on("disconnected", this.onWsShellDisconnected);
|
||||
WebSocketConnection.on("connected", this.onWsShellConnected);
|
||||
GlobalEmitter.on("identity-switching-start", this.onIdentitySwitchingStartShell);
|
||||
GlobalEmitter.on("sync-propagation-node", this.onSyncPropagationNodeShell);
|
||||
GlobalEmitter.on("config-updated", this.onConfigUpdatedExternally);
|
||||
@@ -803,6 +834,8 @@ export default {
|
||||
clearInterval(this.appInfoInterval);
|
||||
this.appInfoInterval = null;
|
||||
WebSocketConnection.off("message", this.onWebsocketMessage);
|
||||
WebSocketConnection.off("disconnected", this.onWsShellDisconnected);
|
||||
WebSocketConnection.off("connected", this.onWsShellConnected);
|
||||
GlobalEmitter.off("identity-switching-start", this.onIdentitySwitchingStartShell);
|
||||
GlobalEmitter.off("sync-propagation-node", this.onSyncPropagationNodeShell);
|
||||
GlobalEmitter.off("config-updated", this.onConfigUpdatedExternally);
|
||||
@@ -810,8 +843,104 @@ export default {
|
||||
GlobalEmitter.off("block-status-changed", this.onBlockStatusChangedShell);
|
||||
GlobalEmitter.off("show-changelog", this.onShowChangelogShell);
|
||||
GlobalEmitter.off("show-tutorial", this.onShowTutorialShell);
|
||||
this.clearWsShellUiTimers();
|
||||
this.wsDisconnected = false;
|
||||
this.wsDisconnectedAt = null;
|
||||
this.wsDisconnectedDurationText = "";
|
||||
this.wsReconnectedBanner = false;
|
||||
WebSocketConnection.destroy();
|
||||
},
|
||||
clearWsShellUiTimers() {
|
||||
if (this.wsDisconnectTickTimer != null) {
|
||||
clearInterval(this.wsDisconnectTickTimer);
|
||||
this.wsDisconnectTickTimer = null;
|
||||
}
|
||||
if (this.wsReconnectedHideTimer != null) {
|
||||
clearTimeout(this.wsReconnectedHideTimer);
|
||||
this.wsReconnectedHideTimer = null;
|
||||
}
|
||||
},
|
||||
onWsShellDisconnected() {
|
||||
if (!this.shellRunning) {
|
||||
return;
|
||||
}
|
||||
this.wsDisconnected = true;
|
||||
this.wsDisconnectedAt = Date.now();
|
||||
this._tickWsDisconnectedLabel();
|
||||
if (this.wsDisconnectTickTimer != null) {
|
||||
clearInterval(this.wsDisconnectTickTimer);
|
||||
}
|
||||
this.wsDisconnectTickTimer = setInterval(() => this._tickWsDisconnectedLabel(), 1000);
|
||||
},
|
||||
_tickWsDisconnectedLabel() {
|
||||
if (!this.wsDisconnectedAt) {
|
||||
this.wsDisconnectedDurationText = "";
|
||||
return;
|
||||
}
|
||||
this.wsDisconnectedDurationText = formatDisconnectedDuration(Date.now() - this.wsDisconnectedAt);
|
||||
},
|
||||
async onWsShellConnected(payload = {}) {
|
||||
if (!this.shellRunning) {
|
||||
return;
|
||||
}
|
||||
this.wsDisconnected = false;
|
||||
this.wsDisconnectedAt = null;
|
||||
this.wsDisconnectedDurationText = "";
|
||||
if (this.wsDisconnectTickTimer != null) {
|
||||
clearInterval(this.wsDisconnectTickTimer);
|
||||
this.wsDisconnectTickTimer = null;
|
||||
}
|
||||
const isReconnect = payload.isReconnect === true;
|
||||
if (isReconnect) {
|
||||
await this.resyncShellAfterWebsocketReconnect();
|
||||
this.wsReconnectedBanner = true;
|
||||
if (this.wsReconnectedHideTimer != null) {
|
||||
clearTimeout(this.wsReconnectedHideTimer);
|
||||
}
|
||||
this.wsReconnectedHideTimer = setTimeout(() => {
|
||||
this.wsReconnectedBanner = false;
|
||||
this.wsReconnectedHideTimer = null;
|
||||
}, 4500);
|
||||
}
|
||||
},
|
||||
async resyncShellAfterWebsocketReconnect() {
|
||||
try {
|
||||
await this.getAppInfo();
|
||||
} catch {
|
||||
// ignore
|
||||
}
|
||||
try {
|
||||
await this.getConfig();
|
||||
} catch {
|
||||
// ignore
|
||||
}
|
||||
try {
|
||||
await this.getBlockedDestinations();
|
||||
} catch {
|
||||
// ignore
|
||||
}
|
||||
try {
|
||||
await this.getKeyboardShortcuts();
|
||||
} catch {
|
||||
// ignore
|
||||
}
|
||||
try {
|
||||
await this.updateRingtonePlayer();
|
||||
} catch {
|
||||
// ignore
|
||||
}
|
||||
try {
|
||||
await this.updateTelephoneStatus();
|
||||
} catch {
|
||||
// ignore
|
||||
}
|
||||
try {
|
||||
await this.updatePropagationNodeStatus();
|
||||
} catch {
|
||||
// ignore
|
||||
}
|
||||
GlobalEmitter.emit("websocket-reconnected");
|
||||
},
|
||||
onIdentitySwitchingStartShell() {
|
||||
this.isSwitchingIdentity = true;
|
||||
setTimeout(() => {
|
||||
|
||||
@@ -116,6 +116,14 @@ import LxmfUserIcon from "./LxmfUserIcon.vue";
|
||||
import GlobalEmitter from "../js/GlobalEmitter";
|
||||
import ToastUtils from "../js/ToastUtils";
|
||||
|
||||
const VISUALISER_ONLY_ACTIONS = new Set([
|
||||
"toggle-orbit",
|
||||
"toggle-bouncing-balls",
|
||||
"toggle-falling-skies",
|
||||
"toggle-snake",
|
||||
"toggle-pong",
|
||||
]);
|
||||
|
||||
export default {
|
||||
name: "CommandPalette",
|
||||
components: { MaterialDesignIcon, LxmfUserIcon },
|
||||
@@ -303,6 +311,30 @@ export default {
|
||||
type: "action",
|
||||
action: "toggle-bouncing-balls",
|
||||
},
|
||||
{
|
||||
id: "action-falling-skies",
|
||||
title: "action_falling_skies",
|
||||
description: "action_falling_skies_desc",
|
||||
icon: "weather-pouring",
|
||||
type: "action",
|
||||
action: "toggle-falling-skies",
|
||||
},
|
||||
{
|
||||
id: "action-snake",
|
||||
title: "action_snake",
|
||||
description: "action_snake_desc",
|
||||
icon: "snake",
|
||||
type: "action",
|
||||
action: "toggle-snake",
|
||||
},
|
||||
{
|
||||
id: "action-pong",
|
||||
title: "action_pong",
|
||||
description: "action_pong_desc",
|
||||
icon: "table-tennis",
|
||||
type: "action",
|
||||
action: "toggle-pong",
|
||||
},
|
||||
{
|
||||
id: "action-getting-started",
|
||||
title: "action_getting_started",
|
||||
@@ -324,11 +356,19 @@ export default {
|
||||
},
|
||||
computed: {
|
||||
allResults() {
|
||||
const results = this.actions.map((action) => ({
|
||||
...action,
|
||||
title: this.$t(`command_palette.${action.title}`),
|
||||
description: this.$t(`command_palette.${action.description}`),
|
||||
}));
|
||||
const onVisualiser = this.$route?.name === "network-visualiser";
|
||||
const results = this.actions
|
||||
.filter((action) => {
|
||||
if (action.type === "action" && VISUALISER_ONLY_ACTIONS.has(action.action)) {
|
||||
return onVisualiser;
|
||||
}
|
||||
return true;
|
||||
})
|
||||
.map((action) => ({
|
||||
...action,
|
||||
title: this.$t(`command_palette.${action.title}`),
|
||||
description: this.$t(`command_palette.${action.description}`),
|
||||
}));
|
||||
|
||||
// add peers
|
||||
if (Array.isArray(this.peers)) {
|
||||
@@ -477,6 +517,12 @@ export default {
|
||||
GlobalEmitter.emit("toggle-orbit");
|
||||
} else if (result.action === "toggle-bouncing-balls") {
|
||||
GlobalEmitter.emit("toggle-bouncing-balls");
|
||||
} else if (result.action === "toggle-falling-skies") {
|
||||
GlobalEmitter.emit("toggle-falling-skies");
|
||||
} else if (result.action === "toggle-snake") {
|
||||
GlobalEmitter.emit("toggle-snake");
|
||||
} else if (result.action === "toggle-pong") {
|
||||
GlobalEmitter.emit("toggle-pong");
|
||||
} else if (result.action === "show-tutorial") {
|
||||
GlobalEmitter.emit("show-tutorial");
|
||||
} else if (result.action === "show-changelog") {
|
||||
|
||||
@@ -1,15 +1,15 @@
|
||||
<template>
|
||||
<div
|
||||
class="flex flex-col flex-1 overflow-hidden min-w-0 bg-gradient-to-br from-slate-50 via-slate-100 to-white dark:from-zinc-950 dark:via-zinc-900 dark:to-zinc-900"
|
||||
>
|
||||
<div class="flex flex-col h-full overflow-hidden w-full px-4 md:px-5 lg:px-8 py-6">
|
||||
<div class="flex flex-col mb-4 w-full max-w-6xl mx-auto space-y-4">
|
||||
<div class="flex items-center justify-between">
|
||||
<div class="space-y-1">
|
||||
<div class="flex flex-col flex-1 overflow-hidden min-w-0 bg-slate-50 dark:bg-zinc-950">
|
||||
<div
|
||||
class="flex flex-col h-full overflow-hidden w-full px-4 md:px-5 lg:px-8 py-6 pb-[max(1.5rem,env(safe-area-inset-bottom))]"
|
||||
>
|
||||
<div class="flex flex-col mb-4 w-full max-w-6xl mx-auto space-y-4 min-w-0">
|
||||
<div class="flex flex-col gap-4 sm:flex-row sm:items-center sm:justify-between min-w-0">
|
||||
<div class="space-y-1 min-w-0">
|
||||
<div class="text-xs uppercase tracking-wide text-gray-500 dark:text-gray-400">Diagnostics</div>
|
||||
<div class="text-3xl font-semibold text-gray-900 dark:text-white">Debug Logs</div>
|
||||
<div class="text-2xl sm:text-3xl font-semibold text-gray-900 dark:text-white">Debug Logs</div>
|
||||
</div>
|
||||
<div class="flex gap-2">
|
||||
<div class="flex flex-wrap gap-2 shrink-0">
|
||||
<button type="button" class="secondary-chip px-4 py-2 text-sm" @click="refreshActive">
|
||||
<MaterialDesignIcon icon-name="refresh" class="w-4 h-4" />
|
||||
Refresh
|
||||
@@ -21,10 +21,12 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="flex flex-wrap gap-2 border-b border-gray-200 dark:border-zinc-700 pb-2">
|
||||
<div
|
||||
class="flex flex-nowrap sm:flex-wrap gap-2 border-b border-gray-200 dark:border-zinc-700 pb-2 overflow-x-auto overscroll-x-contain -mx-4 px-4 sm:mx-0 sm:px-0 no-scrollbar"
|
||||
>
|
||||
<button
|
||||
type="button"
|
||||
class="px-4 py-2 text-sm rounded-md transition-colors"
|
||||
class="shrink-0 px-4 py-2 text-sm rounded-md transition-colors"
|
||||
:class="
|
||||
activeTab === 'logs'
|
||||
? 'bg-blue-600 text-white'
|
||||
@@ -36,7 +38,7 @@
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
class="px-4 py-2 text-sm rounded-md transition-colors"
|
||||
class="shrink-0 px-4 py-2 text-sm rounded-md transition-colors"
|
||||
:class="
|
||||
activeTab === 'access'
|
||||
? 'bg-blue-600 text-white'
|
||||
|
||||
@@ -1,8 +1,6 @@
|
||||
<template>
|
||||
<div
|
||||
class="flex flex-col flex-1 overflow-hidden min-w-0 bg-gradient-to-br from-slate-50 via-slate-100 to-white dark:from-zinc-950 dark:via-zinc-900 dark:to-zinc-900"
|
||||
>
|
||||
<div class="flex-1 overflow-y-auto w-full">
|
||||
<div class="flex flex-col flex-1 overflow-hidden min-w-0 bg-slate-50 dark:bg-zinc-950">
|
||||
<div class="flex-1 overflow-y-auto w-full pb-[max(1.5rem,env(safe-area-inset-bottom))]">
|
||||
<div class="space-y-4 p-4 md:p-6 max-w-5xl mx-auto w-full">
|
||||
<div class="glass-card space-y-3">
|
||||
<div class="text-xs uppercase tracking-wide text-gray-500 dark:text-gray-400">
|
||||
@@ -228,9 +226,3 @@ export default {
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.glass-card {
|
||||
@apply bg-white/80 dark:bg-zinc-900/80 backdrop-blur-md border border-gray-200 dark:border-zinc-800 p-6 rounded-3xl shadow-sm;
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -736,8 +736,40 @@
|
||||
<span>{{ formatAttachmentSize(chatItem.lxmf_message.fields.image, "image") }}</span>
|
||||
</div>
|
||||
</div>
|
||||
<!-- image-only: inline timestamp overlay (no bubble) -->
|
||||
<div
|
||||
v-if="isImageOnlyMessage(chatItem)"
|
||||
class="flex items-center gap-1.5 select-none mt-0.5"
|
||||
:class="chatItem.is_outbound ? 'justify-end' : 'justify-start'"
|
||||
>
|
||||
<span class="text-[9px] opacity-50 font-medium">
|
||||
{{ formatTimeAgo(chatItem.lxmf_message.created_at) }}
|
||||
</span>
|
||||
<template v-if="chatItem.is_outbound">
|
||||
<MaterialDesignIcon
|
||||
v-if="chatItem.lxmf_message.state === 'delivered'"
|
||||
icon-name="check-all"
|
||||
class="size-3 opacity-50"
|
||||
/>
|
||||
<MaterialDesignIcon
|
||||
v-else-if="['sent', 'propagated', 'unknown'].includes(chatItem.lxmf_message.state)"
|
||||
icon-name="check"
|
||||
class="size-3 opacity-50"
|
||||
/>
|
||||
<span
|
||||
v-else-if="
|
||||
['failed', 'cancelled', 'rejected'].includes(chatItem.lxmf_message.state)
|
||||
"
|
||||
class="text-[9px] font-bold uppercase tracking-wider text-red-500"
|
||||
>
|
||||
{{ chatItem.lxmf_message.state === "rejected" ? "Rejected" : "Failed" }}
|
||||
</span>
|
||||
</template>
|
||||
</div>
|
||||
|
||||
<!-- message content -->
|
||||
<div
|
||||
v-if="!isImageOnlyMessage(chatItem)"
|
||||
class="relative rounded-2xl overflow-hidden transition-all duration-200 hover:shadow-md min-w-0"
|
||||
:class="[
|
||||
['cancelled', 'failed'].includes(chatItem.lxmf_message.state)
|
||||
@@ -2590,6 +2622,7 @@ export default {
|
||||
void GlobalState.detailedOutboundSendStatus;
|
||||
void this.sendStatusUiMs;
|
||||
void this.usesThemeOutboundBubbleColor;
|
||||
void GlobalState.config?.theme;
|
||||
const useThemeOutbound = this.usesThemeOutboundBubbleColor;
|
||||
return (chatItem) => {
|
||||
const styles = {};
|
||||
@@ -2608,7 +2641,11 @@ export default {
|
||||
styles["color"] = "#ffffff";
|
||||
} else if (chatItem.is_outbound) {
|
||||
if (chatItem.lxmf_message?._pendingPathfinding) {
|
||||
const hex = cfg?.message_waiting_bubble_color || "#e5e7eb";
|
||||
const raw = cfg?.message_waiting_bubble_color;
|
||||
let hex = raw != null && String(raw).trim() !== "" ? String(raw).trim() : "#e5e7eb";
|
||||
if (cfg?.theme === "dark" && /^#e5e7eb$/i.test(hex)) {
|
||||
hex = "#3f3f46";
|
||||
}
|
||||
styles["background-color"] = hex;
|
||||
styles["color"] = this.pickTextColorForBubbleBackground(hex);
|
||||
styles["border"] = this.waitingBubbleBorderForHex(hex);
|
||||
@@ -2752,6 +2789,10 @@ export default {
|
||||
return false;
|
||||
}
|
||||
|
||||
if (!this.hasRenderableContent(chatItem.lxmf_message)) {
|
||||
return false;
|
||||
}
|
||||
|
||||
return true;
|
||||
}
|
||||
|
||||
@@ -5036,6 +5077,26 @@ export default {
|
||||
|
||||
return !hasContent && !hasAttachments && (hasTelemetry || hasCommands);
|
||||
},
|
||||
hasRenderableContent(msg) {
|
||||
if (msg.content && msg.content.trim() !== "") return true;
|
||||
if (msg.fields?.image) return true;
|
||||
if (msg.fields?.audio) return true;
|
||||
if (msg.fields?.file_attachments) return true;
|
||||
if (msg.fields?.telemetry || msg.fields?.telemetry_stream) return true;
|
||||
if (msg.fields?.commands && msg.fields.commands.some((c) => c["0x01"] || c["1"] || c["0x1"])) return true;
|
||||
return false;
|
||||
},
|
||||
isImageOnlyMessage(chatItem) {
|
||||
const msg = chatItem.lxmf_message;
|
||||
if (!msg.fields?.image) return false;
|
||||
if (msg.fields?.audio || msg.fields?.file_attachments) return false;
|
||||
const content = (msg.content || "").trim();
|
||||
if (content && !this.shouldHideAutoImageCaption(chatItem)) return false;
|
||||
if (msg.reply_to_hash) return false;
|
||||
if (msg.fields?.telemetry || msg.fields?.telemetry_stream) return false;
|
||||
if (msg.fields?.commands && msg.fields.commands.some((c) => c["0x01"] || c["1"] || c["0x1"])) return false;
|
||||
return true;
|
||||
},
|
||||
async toggleTracking() {
|
||||
if (!this.selectedPeer) return;
|
||||
const hash = this.selectedPeer.destination_hash;
|
||||
|
||||
@@ -155,6 +155,9 @@ export default {
|
||||
return {
|
||||
reloadInterval: null,
|
||||
conversationRefreshTimeout: null,
|
||||
peersRefreshTimeout: null,
|
||||
conversationsAbortController: null,
|
||||
announcesAbortController: null,
|
||||
|
||||
config: snapshotGlobalConfig(),
|
||||
hasLoadedConversations: false,
|
||||
@@ -214,16 +217,21 @@ export default {
|
||||
beforeUnmount() {
|
||||
clearInterval(this.reloadInterval);
|
||||
clearTimeout(this.conversationRefreshTimeout);
|
||||
clearTimeout(this.peersRefreshTimeout);
|
||||
this.conversationsAbortController?.abort();
|
||||
this.announcesAbortController?.abort();
|
||||
|
||||
// stop listening for websocket messages
|
||||
WebSocketConnection.off("message", this.onWebsocketMessage);
|
||||
GlobalEmitter.off("compose-new-message", this.onComposeNewMessage);
|
||||
GlobalEmitter.off("refresh-conversations", this.requestConversationsRefresh);
|
||||
GlobalEmitter.off("websocket-reconnected", this.requestConversationsRefresh);
|
||||
},
|
||||
mounted() {
|
||||
// listen for websocket messages
|
||||
WebSocketConnection.on("message", this.onWebsocketMessage);
|
||||
GlobalEmitter.on("compose-new-message", this.onComposeNewMessage);
|
||||
GlobalEmitter.on("websocket-reconnected", this.requestConversationsRefresh);
|
||||
|
||||
this.getConfig();
|
||||
this.getConversations();
|
||||
@@ -350,6 +358,14 @@ export default {
|
||||
},
|
||||
async getLxmfDeliveryAnnounces(append = false) {
|
||||
try {
|
||||
if (!append) {
|
||||
if (this.announcesAbortController) {
|
||||
this.announcesAbortController.abort();
|
||||
}
|
||||
this.announcesAbortController = new AbortController();
|
||||
} else if (!this.announcesAbortController) {
|
||||
this.announcesAbortController = new AbortController();
|
||||
}
|
||||
const offset = append ? Object.keys(this.peers).length : 0;
|
||||
const response = await window.api.get(`/api/v1/announces`, {
|
||||
params: {
|
||||
@@ -358,6 +374,7 @@ export default {
|
||||
offset: offset,
|
||||
search: this.peersSearchTerm,
|
||||
},
|
||||
signal: this.announcesAbortController.signal,
|
||||
});
|
||||
|
||||
const newAnnounces = response.data.announces;
|
||||
@@ -373,6 +390,7 @@ export default {
|
||||
|
||||
this.hasMoreAnnounces = newAnnounces.length === this.pageSize;
|
||||
} catch (e) {
|
||||
if (window.api.isCancel?.(e)) return;
|
||||
console.log(e);
|
||||
} finally {
|
||||
this.isLoadingMoreAnnounces = false;
|
||||
@@ -405,6 +423,14 @@ export default {
|
||||
},
|
||||
async getConversations(append = false) {
|
||||
try {
|
||||
if (!append) {
|
||||
if (this.conversationsAbortController) {
|
||||
this.conversationsAbortController.abort();
|
||||
}
|
||||
this.conversationsAbortController = new AbortController();
|
||||
} else if (!this.conversationsAbortController) {
|
||||
this.conversationsAbortController = new AbortController();
|
||||
}
|
||||
const shouldShowInitialLoading =
|
||||
!append && !this.hasLoadedConversations && this.conversations.length === 0;
|
||||
if (shouldShowInitialLoading) {
|
||||
@@ -418,6 +444,7 @@ export default {
|
||||
limit: this.pageSize,
|
||||
offset: offset,
|
||||
},
|
||||
signal: this.conversationsAbortController.signal,
|
||||
});
|
||||
|
||||
const newConversations = response.data.conversations;
|
||||
@@ -453,6 +480,7 @@ export default {
|
||||
this.hasLoadedConversations = true;
|
||||
this.hasMoreConversations = newConversations.length === this.pageSize;
|
||||
} catch (e) {
|
||||
if (window.api.isCancel?.(e)) return;
|
||||
console.log(e);
|
||||
} finally {
|
||||
this.isLoadingConversations = false;
|
||||
|
||||
@@ -2,9 +2,9 @@
|
||||
<div class="flex flex-col flex-1 overflow-hidden min-w-0 bg-slate-50 dark:bg-zinc-950">
|
||||
<!-- Compact Header -->
|
||||
<div
|
||||
class="flex items-center justify-between px-4 py-2 border-b border-gray-200 dark:border-zinc-800 bg-white/50 dark:bg-zinc-900/50 backdrop-blur-sm shrink-0"
|
||||
class="flex flex-wrap items-center justify-between gap-2 px-3 sm:px-4 py-2 border-b border-gray-200 dark:border-zinc-800 bg-slate-50/95 dark:bg-zinc-950/95 backdrop-blur-sm shrink-0 min-w-0"
|
||||
>
|
||||
<div class="flex items-center gap-3">
|
||||
<div class="flex items-center gap-2 sm:gap-3 min-w-0">
|
||||
<div class="bg-teal-100 dark:bg-teal-900/30 p-1.5 rounded-xl shrink-0">
|
||||
<MaterialDesignIcon icon-name="code-tags" class="size-5 text-teal-600 dark:text-teal-400" />
|
||||
</div>
|
||||
@@ -89,7 +89,7 @@
|
||||
|
||||
<!-- Tab Bar -->
|
||||
<div
|
||||
class="flex items-center px-4 py-1 gap-1 border-b border-gray-200 dark:border-zinc-800 bg-slate-100 dark:bg-zinc-900 overflow-x-auto scrollbar-hide shrink-0"
|
||||
class="flex items-center px-3 sm:px-4 py-1 gap-1 border-b border-gray-200 dark:border-zinc-800 bg-slate-100 dark:bg-zinc-900 overflow-x-auto no-scrollbar shrink-0"
|
||||
>
|
||||
<div
|
||||
v-for="(tab, index) in tabs"
|
||||
@@ -128,7 +128,7 @@
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div class="flex-1 flex overflow-hidden">
|
||||
<div class="flex-1 flex overflow-hidden min-w-0 pb-[env(safe-area-inset-bottom)]">
|
||||
<!-- Editor Pane -->
|
||||
<div
|
||||
v-if="tabs.length > 0"
|
||||
@@ -892,12 +892,4 @@ ${b}=
|
||||
:deep(a:hover) {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
.scrollbar-hide::-webkit-scrollbar {
|
||||
display: none;
|
||||
}
|
||||
.scrollbar-hide {
|
||||
-ms-overflow-style: none;
|
||||
scrollbar-width: none;
|
||||
}
|
||||
</style>
|
||||
|
||||
File diff suppressed because it is too large
Load Diff
+35
@@ -0,0 +1,35 @@
|
||||
<template>
|
||||
<div
|
||||
class="absolute bottom-4 right-4 z-10 hidden sm:flex items-center gap-2 px-4 py-2 rounded-full border border-gray-200/50 dark:border-zinc-800/50 bg-white/70 dark:bg-zinc-900/70 backdrop-blur-xl"
|
||||
>
|
||||
<div class="flex items-center gap-1.5">
|
||||
<div class="w-3 h-3 rounded-full border-2 border-emerald-500 bg-emerald-500/20"></div>
|
||||
<span class="text-[10px] font-bold text-gray-600 dark:text-zinc-400 uppercase">Direct</span>
|
||||
</div>
|
||||
<div class="w-px h-3 bg-gray-200 dark:bg-zinc-800 mx-1"></div>
|
||||
<div class="flex items-center gap-1.5">
|
||||
<div class="w-3 h-3 rounded-full border-2 border-blue-500/50 bg-blue-500/10"></div>
|
||||
<span class="text-[10px] font-bold text-gray-600 dark:text-zinc-400 uppercase">Multi-Hop</span>
|
||||
</div>
|
||||
<div
|
||||
v-if="showDiscoveredInterfaces && discoveredCount > 0"
|
||||
class="w-px h-3 bg-gray-200 dark:bg-zinc-800 mx-1"
|
||||
></div>
|
||||
<div v-if="showDiscoveredInterfaces && discoveredCount > 0" class="flex items-center gap-1.5">
|
||||
<div class="w-3 h-3 rounded-full border-2 border-cyan-500/50 bg-cyan-500/10"></div>
|
||||
<span class="text-[10px] font-bold text-gray-600 dark:text-zinc-400 uppercase"
|
||||
>Discovered ({{ discoveredCount }})</span
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: "NetworkVisualiserLegend",
|
||||
props: {
|
||||
showDiscoveredInterfaces: { type: Boolean, default: false },
|
||||
discoveredCount: { type: Number, default: 0 },
|
||||
},
|
||||
};
|
||||
</script>
|
||||
+49
@@ -0,0 +1,49 @@
|
||||
<template>
|
||||
<div
|
||||
v-if="isLoading"
|
||||
class="absolute inset-0 z-20 flex items-center justify-center bg-zinc-950/10 backdrop-blur-[2px] transition-all duration-300"
|
||||
>
|
||||
<div
|
||||
class="bg-white/90 dark:bg-zinc-900/90 border border-gray-200 dark:border-zinc-800 rounded-2xl px-6 py-4 flex flex-col items-center gap-3"
|
||||
>
|
||||
<div class="relative">
|
||||
<div class="w-12 h-12 border-4 border-blue-500/20 border-t-blue-500 rounded-full animate-spin"></div>
|
||||
<div class="absolute inset-0 flex items-center justify-center">
|
||||
<div
|
||||
class="w-6 h-6 border-4 border-emerald-500/20 border-b-emerald-500 rounded-full animate-spin-reverse"
|
||||
></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="text-sm font-medium text-gray-900 dark:text-zinc-100">{{ loadingStatus }}</div>
|
||||
<div v-if="totalNodesToLoad > 0" class="w-48 space-y-2">
|
||||
<div class="h-1.5 bg-gray-200 dark:bg-zinc-800 rounded-full overflow-hidden">
|
||||
<div
|
||||
class="h-full bg-blue-500 transition-all duration-300 shadow-[0_0_8px_rgba(59,130,246,0.5)]"
|
||||
:style="{ width: `${(loadedNodesCount / totalNodesToLoad) * 100}%` }"
|
||||
></div>
|
||||
</div>
|
||||
<div
|
||||
v-if="totalBatches > 0"
|
||||
class="flex justify-between items-center text-[10px] font-bold text-gray-500 dark:text-zinc-500 uppercase tracking-wider"
|
||||
>
|
||||
<span>{{ $t("visualiser.batch") }} {{ currentBatch }} / {{ totalBatches }}</span>
|
||||
<span>{{ Math.round((loadedNodesCount / totalNodesToLoad) * 100) }}%</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: "NetworkVisualiserLoadingOverlay",
|
||||
props: {
|
||||
isLoading: { type: Boolean, default: false },
|
||||
loadingStatus: { type: String, default: "" },
|
||||
totalNodesToLoad: { type: Number, default: 0 },
|
||||
loadedNodesCount: { type: Number, default: 0 },
|
||||
currentBatch: { type: Number, default: 0 },
|
||||
totalBatches: { type: Number, default: 0 },
|
||||
},
|
||||
};
|
||||
</script>
|
||||
+252
@@ -0,0 +1,252 @@
|
||||
<template>
|
||||
<div
|
||||
class="absolute top-2 left-2 right-2 sm:top-4 sm:left-4 sm:right-4 z-10 flex flex-col sm:flex-row gap-2 pointer-events-none"
|
||||
>
|
||||
<div
|
||||
class="pointer-events-auto border border-gray-200/50 dark:border-zinc-800/50 bg-white/70 dark:bg-zinc-900/70 backdrop-blur-xl rounded-2xl overflow-hidden w-full sm:min-w-[280px] sm:w-auto transition-all duration-300"
|
||||
>
|
||||
<div
|
||||
class="flex items-center px-4 sm:px-5 py-3 sm:py-4 cursor-pointer hover:bg-gray-50/50 dark:hover:bg-zinc-800/50 transition-colors"
|
||||
@click="$emit('update:isShowingControls', !isShowingControls)"
|
||||
>
|
||||
<div class="flex-1 flex flex-col min-w-0 mr-2">
|
||||
<span class="font-bold text-gray-900 dark:text-zinc-100 tracking-tight truncate">{{
|
||||
$t("visualiser.reticulum_mesh")
|
||||
}}</span>
|
||||
<span
|
||||
class="text-[10px] uppercase font-bold text-gray-500 dark:text-zinc-500 tracking-widest truncate"
|
||||
>{{ $t("visualiser.network_visualizer") }}</span
|
||||
>
|
||||
</div>
|
||||
<div class="flex items-center gap-2">
|
||||
<button
|
||||
type="button"
|
||||
class="inline-flex items-center justify-center w-8 h-8 sm:w-9 sm:h-9 rounded-xl bg-blue-600 hover:bg-blue-700 dark:bg-blue-600 dark:hover:bg-blue-700 text-white transition-all active:scale-95"
|
||||
:disabled="isUpdating || isLoading"
|
||||
@click.stop="$emit('manual-update')"
|
||||
>
|
||||
<svg
|
||||
v-if="!isUpdating && !isLoading"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
fill="none"
|
||||
viewBox="0 0 24 24"
|
||||
stroke-width="2"
|
||||
stroke="currentColor"
|
||||
class="w-4 h-4 sm:w-5 sm:h-5"
|
||||
>
|
||||
<path
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
d="M16.023 9.348h4.992v-.001M2.985 19.644v-4.992m0 0h4.992m-4.993 0 3.181 3.183a8.25 8.25 0 0 0 13.803-3.7M4.031 9.865a8.25 8.25 0 0 1 13.803-3.7l3.181 3.182m0-4.991v4.99"
|
||||
/>
|
||||
</svg>
|
||||
<svg
|
||||
v-else
|
||||
class="animate-spin h-4 w-4 sm:w-5 sm:h-5"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
fill="none"
|
||||
viewBox="0 0 24 24"
|
||||
>
|
||||
<circle
|
||||
class="opacity-25"
|
||||
cx="12"
|
||||
cy="12"
|
||||
r="10"
|
||||
stroke="currentColor"
|
||||
stroke-width="4"
|
||||
></circle>
|
||||
<path
|
||||
class="opacity-75"
|
||||
fill="currentColor"
|
||||
d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
|
||||
></path>
|
||||
</svg>
|
||||
</button>
|
||||
<div class="w-5 sm:w-6 flex justify-center">
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
viewBox="0 0 20 20"
|
||||
fill="currentColor"
|
||||
class="w-4 h-4 sm:w-5 sm:h-5 text-gray-400 transition-transform duration-300"
|
||||
:class="{ 'rotate-180': isShowingControls }"
|
||||
>
|
||||
<path
|
||||
fill-rule="evenodd"
|
||||
d="M5.22 8.22a.75.75 0 0 1 1.06 0L10 11.94l3.72-3.72a.75.75 0 1 1 1.06 1.06l-4.25 4.25a.75.75 0 0 1-1.06 0L5.22 9.28a.75.75 0 0 1 0-1.06Z"
|
||||
clip-rule="evenodd"
|
||||
/>
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div
|
||||
v-show="isShowingControls"
|
||||
class="px-5 pb-5 space-y-4 animate-in fade-in slide-in-from-top-2 duration-300"
|
||||
>
|
||||
<div class="h-px bg-gradient-to-r from-transparent via-gray-200 dark:via-zinc-800 to-transparent"></div>
|
||||
|
||||
<div class="flex items-center justify-between">
|
||||
<label
|
||||
for="auto-reload"
|
||||
class="text-sm font-semibold text-gray-700 dark:text-zinc-300 cursor-pointer"
|
||||
>Auto Update</label
|
||||
>
|
||||
<Toggle
|
||||
id="auto-reload"
|
||||
:model-value="autoReload"
|
||||
@update:model-value="$emit('update:autoReload', $event)"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="flex items-center justify-between">
|
||||
<label
|
||||
for="enable-physics"
|
||||
class="text-sm font-semibold text-gray-700 dark:text-zinc-300 cursor-pointer"
|
||||
>Live Layout</label
|
||||
>
|
||||
<Toggle
|
||||
id="enable-physics"
|
||||
:model-value="enablePhysics"
|
||||
@update:model-value="$emit('update:enablePhysics', $event)"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="space-y-2">
|
||||
<div class="flex items-center justify-between gap-2">
|
||||
<label
|
||||
for="hop-filter-slider"
|
||||
class="text-sm font-semibold text-gray-700 dark:text-zinc-300 cursor-pointer"
|
||||
>{{ $t("visualiser.max_hops_filter") }}</label
|
||||
>
|
||||
<span
|
||||
class="text-xs font-bold text-blue-600 dark:text-blue-400 tabular-nums min-w-[4rem] text-right"
|
||||
>{{ hopFilterSlider === 0 ? $t("visualiser.all") : hopFilterSlider }}</span
|
||||
>
|
||||
</div>
|
||||
<input
|
||||
id="hop-filter-slider"
|
||||
:value="hopFilterSlider"
|
||||
type="range"
|
||||
min="0"
|
||||
:max="hopSliderMax"
|
||||
step="1"
|
||||
class="w-full h-2 rounded-lg appearance-none cursor-pointer bg-gray-200 dark:bg-zinc-700 accent-blue-600 dark:accent-blue-500"
|
||||
@input="$emit('update:hopFilterSlider', Number($event.target.value))"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="grid grid-cols-2 gap-3 pt-2">
|
||||
<div
|
||||
class="bg-gray-50/50 dark:bg-zinc-800/50 rounded-xl p-3 border border-gray-100 dark:border-zinc-700/50"
|
||||
>
|
||||
<div
|
||||
class="text-[10px] font-bold text-gray-500 dark:text-zinc-500 uppercase tracking-wider mb-1"
|
||||
>
|
||||
Nodes
|
||||
</div>
|
||||
<div class="text-lg font-bold text-blue-600 dark:text-blue-400">{{ nodeCount }}</div>
|
||||
</div>
|
||||
<div
|
||||
class="bg-gray-50/50 dark:bg-zinc-800/50 rounded-xl p-3 border border-gray-100 dark:border-zinc-700/50"
|
||||
>
|
||||
<div
|
||||
class="text-[10px] font-bold text-gray-500 dark:text-zinc-500 uppercase tracking-wider mb-1"
|
||||
>
|
||||
Links
|
||||
</div>
|
||||
<div class="text-lg font-bold text-emerald-600 dark:text-emerald-400">{{ edgeCount }}</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div
|
||||
class="bg-zinc-950/5 dark:bg-white/5 rounded-xl p-3 border border-gray-100 dark:border-zinc-700/50"
|
||||
>
|
||||
<div class="text-[10px] font-bold text-gray-500 dark:text-zinc-500 uppercase tracking-wider mb-2">
|
||||
Interfaces
|
||||
</div>
|
||||
<div class="flex items-center gap-4">
|
||||
<div class="flex items-center gap-1.5">
|
||||
<div class="w-2 h-2 rounded-full bg-emerald-500"></div>
|
||||
<span class="text-xs font-bold text-gray-700 dark:text-zinc-300"
|
||||
>{{ onlineInterfaceCount }} Online</span
|
||||
>
|
||||
</div>
|
||||
<div class="flex items-center gap-1.5">
|
||||
<div class="w-2 h-2 rounded-full bg-red-500"></div>
|
||||
<span class="text-xs font-bold text-gray-700 dark:text-zinc-300"
|
||||
>{{ offlineInterfaceCount }} Offline</span
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="sm:ml-auto w-full sm:w-auto pointer-events-auto">
|
||||
<div class="relative group">
|
||||
<div
|
||||
class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none text-gray-400 group-focus-within:text-blue-500 transition-colors"
|
||||
>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" class="w-4 h-4">
|
||||
<path
|
||||
fill-rule="evenodd"
|
||||
d="M9 3.5a6.5 6.5 0 1 0 0 13 6.5 6.5 0 0 0 0-13ZM2.25 10a7.75 7.75 0 1 1 14.03 4.5l3.47 3.47a.75.75 0 0 1-1.06 1.06l-3.47-3.47A7.75 7.75 0 0 1 2.25 10Z"
|
||||
clip-rule="evenodd"
|
||||
/>
|
||||
</svg>
|
||||
</div>
|
||||
<input
|
||||
:value="searchQuery"
|
||||
type="text"
|
||||
:placeholder="`Search nodes (${nodeCount})...`"
|
||||
class="block w-full sm:w-64 pl-9 pr-10 py-2.5 sm:py-3 bg-white/70 dark:bg-zinc-900/70 backdrop-blur-xl border border-gray-200/50 dark:border-zinc-800/50 rounded-2xl text-xs font-semibold focus:outline-none focus:ring-2 focus:ring-blue-500/50 sm:focus:w-80 md:max-lg:focus:w-72 lg:focus:w-80 transition-all dark:text-zinc-100 shadow-sm"
|
||||
@input="$emit('update:searchQuery', $event.target.value)"
|
||||
/>
|
||||
<button
|
||||
v-if="searchQuery"
|
||||
type="button"
|
||||
class="absolute inset-y-0 right-0 pr-3 flex items-center text-gray-400 hover:text-gray-600 dark:hover:text-zinc-200 transition-colors"
|
||||
@click="$emit('update:searchQuery', '')"
|
||||
>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" class="w-4 h-4">
|
||||
<path
|
||||
d="M6.28 5.22a.75.75 0 0 0-1.06 1.06L8.94 10l-3.72 3.72a.75.75 0 1 0 1.06 1.06L10 11.06l3.72 3.72a.75.75 0 1 0 1.06-1.06L11.06 10l3.72-3.72a.75.75 0 0 0-1.06-1.06L10 8.94 6.28 5.22Z"
|
||||
/>
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import Toggle from "../../forms/Toggle.vue";
|
||||
|
||||
export default {
|
||||
name: "NetworkVisualiserToolbar",
|
||||
components: { Toggle },
|
||||
props: {
|
||||
isShowingControls: { type: Boolean, default: true },
|
||||
isUpdating: { type: Boolean, default: false },
|
||||
isLoading: { type: Boolean, default: false },
|
||||
autoReload: { type: Boolean, default: false },
|
||||
enablePhysics: { type: Boolean, default: true },
|
||||
hopFilterSlider: { type: Number, default: 0 },
|
||||
hopSliderMax: { type: Number, default: 1 },
|
||||
nodeCount: { type: Number, default: 0 },
|
||||
edgeCount: { type: Number, default: 0 },
|
||||
onlineInterfaceCount: { type: Number, default: 0 },
|
||||
offlineInterfaceCount: { type: Number, default: 0 },
|
||||
searchQuery: { type: String, default: "" },
|
||||
},
|
||||
emits: [
|
||||
"update:isShowingControls",
|
||||
"update:autoReload",
|
||||
"update:enablePhysics",
|
||||
"update:hopFilterSlider",
|
||||
"update:searchQuery",
|
||||
"manual-update",
|
||||
],
|
||||
};
|
||||
</script>
|
||||
Reference in New Issue
Block a user