mirror of
https://git.quad4.io/RNS-Things/MeshChatX.git
synced 2026-10-23 15:03:19 +00:00
Refactor ConversationViewer, NetworkVisualiser, NomadNetworkSidebar, and SettingsPage components for improved code readability and structure
- Enhanced formatting and indentation for better readability in ConversationViewer and NetworkVisualiser components. - Updated button structures and context menus in NomadNetworkSidebar for consistency and clarity. - Improved input handling and configuration updates in SettingsPage for announce limits. - Ensured consistent use of Vue directives and improved overall component organization.
This commit is contained in:
4 files changed
+131
-107
No files matched your search
@@ -451,7 +451,9 @@
|
||||
<button
|
||||
type="button"
|
||||
class="absolute top-1 right-1 p-1 rounded-lg opacity-0 group-hover:opacity-100 hover:opacity-100 transition-opacity text-gray-400 hover:text-gray-600 dark:hover:text-zinc-300 dark:text-zinc-500"
|
||||
:class="chatItem.is_outbound ? 'hover:bg-white/20' : 'hover:bg-gray-200 dark:hover:bg-zinc-700'"
|
||||
:class="
|
||||
chatItem.is_outbound ? 'hover:bg-white/20' : 'hover:bg-gray-200 dark:hover:bg-zinc-700'
|
||||
"
|
||||
:title="$t('messages.message_actions')"
|
||||
@click.stop="onMessageContextMenu($event, chatItem)"
|
||||
>
|
||||
@@ -1229,52 +1231,52 @@
|
||||
class="fixed z-[200] min-w-[180px] bg-white dark:bg-zinc-800 rounded-2xl shadow-2xl border border-gray-200 dark:border-zinc-700 py-1.5 overflow-hidden animate-in fade-in zoom-in duration-100"
|
||||
:style="{ top: messageContextMenu.y + 'px', left: messageContextMenu.x + 'px' }"
|
||||
>
|
||||
<button
|
||||
type="button"
|
||||
class="w-full flex items-center gap-3 px-4 py-2.5 text-sm text-gray-700 dark:text-zinc-300 hover:bg-gray-100 dark:hover:bg-zinc-700 transition-all active:scale-95"
|
||||
@click="replyToMessage(messageContextMenu.chatItem)"
|
||||
>
|
||||
<MaterialDesignIcon icon-name="reply" class="size-4 text-indigo-500" />
|
||||
<span class="font-medium">Reply</span>
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
class="w-full flex items-center gap-3 px-4 py-2.5 text-sm text-gray-700 dark:text-zinc-300 hover:bg-gray-100 dark:hover:bg-zinc-700 transition-all active:scale-95"
|
||||
@click="
|
||||
showRawMessage(messageContextMenu.chatItem);
|
||||
messageContextMenu.show = false;
|
||||
"
|
||||
>
|
||||
<MaterialDesignIcon icon-name="code-json" class="size-4 text-gray-400" />
|
||||
<span class="font-medium">View Raw LXM</span>
|
||||
</button>
|
||||
<button
|
||||
v-if="
|
||||
messageContextMenu.chatItem?.is_outbound &&
|
||||
['failed', 'cancelled'].includes(messageContextMenu.chatItem?.lxmf_message?.state)
|
||||
"
|
||||
type="button"
|
||||
class="w-full flex items-center gap-3 px-4 py-2.5 text-sm text-amber-600 dark:text-amber-400 hover:bg-amber-50 dark:hover:bg-amber-900/20 transition-all active:scale-95"
|
||||
@click="
|
||||
retrySendingMessage(messageContextMenu.chatItem);
|
||||
messageContextMenu.show = false;
|
||||
"
|
||||
>
|
||||
<MaterialDesignIcon icon-name="refresh" class="size-4" />
|
||||
<span class="font-medium">Retry</span>
|
||||
</button>
|
||||
<div class="border-t border-gray-100 dark:border-zinc-700 my-1.5 mx-2"></div>
|
||||
<button
|
||||
type="button"
|
||||
class="w-full flex items-center gap-3 px-4 py-2.5 text-sm text-rose-600 dark:text-rose-400 hover:bg-rose-50 dark:hover:bg-rose-900/20 transition-all active:scale-95"
|
||||
@click="
|
||||
deleteChatItem(messageContextMenu.chatItem);
|
||||
messageContextMenu.show = false;
|
||||
"
|
||||
>
|
||||
<MaterialDesignIcon icon-name="trash-can-outline" class="size-4" />
|
||||
<span class="font-medium">Delete</span>
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
class="w-full flex items-center gap-3 px-4 py-2.5 text-sm text-gray-700 dark:text-zinc-300 hover:bg-gray-100 dark:hover:bg-zinc-700 transition-all active:scale-95"
|
||||
@click="replyToMessage(messageContextMenu.chatItem)"
|
||||
>
|
||||
<MaterialDesignIcon icon-name="reply" class="size-4 text-indigo-500" />
|
||||
<span class="font-medium">Reply</span>
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
class="w-full flex items-center gap-3 px-4 py-2.5 text-sm text-gray-700 dark:text-zinc-300 hover:bg-gray-100 dark:hover:bg-zinc-700 transition-all active:scale-95"
|
||||
@click="
|
||||
showRawMessage(messageContextMenu.chatItem);
|
||||
messageContextMenu.show = false;
|
||||
"
|
||||
>
|
||||
<MaterialDesignIcon icon-name="code-json" class="size-4 text-gray-400" />
|
||||
<span class="font-medium">View Raw LXM</span>
|
||||
</button>
|
||||
<button
|
||||
v-if="
|
||||
messageContextMenu.chatItem?.is_outbound &&
|
||||
['failed', 'cancelled'].includes(messageContextMenu.chatItem?.lxmf_message?.state)
|
||||
"
|
||||
type="button"
|
||||
class="w-full flex items-center gap-3 px-4 py-2.5 text-sm text-amber-600 dark:text-amber-400 hover:bg-amber-50 dark:hover:bg-amber-900/20 transition-all active:scale-95"
|
||||
@click="
|
||||
retrySendingMessage(messageContextMenu.chatItem);
|
||||
messageContextMenu.show = false;
|
||||
"
|
||||
>
|
||||
<MaterialDesignIcon icon-name="refresh" class="size-4" />
|
||||
<span class="font-medium">Retry</span>
|
||||
</button>
|
||||
<div class="border-t border-gray-100 dark:border-zinc-700 my-1.5 mx-2"></div>
|
||||
<button
|
||||
type="button"
|
||||
class="w-full flex items-center gap-3 px-4 py-2.5 text-sm text-rose-600 dark:text-rose-400 hover:bg-rose-50 dark:hover:bg-rose-900/20 transition-all active:scale-95"
|
||||
@click="
|
||||
deleteChatItem(messageContextMenu.chatItem);
|
||||
messageContextMenu.show = false;
|
||||
"
|
||||
>
|
||||
<MaterialDesignIcon icon-name="trash-can-outline" class="size-4" />
|
||||
<span class="font-medium">Delete</span>
|
||||
</button>
|
||||
</div>
|
||||
</Teleport>
|
||||
</div>
|
||||
|
||||
@@ -430,9 +430,13 @@ export default {
|
||||
try {
|
||||
this.loadingStatus = "Loading paths...";
|
||||
if (destinationHashes && destinationHashes.length > 0) {
|
||||
const resp = await window.axios.post(`/api/v1/path-table`, { destination_hashes: destinationHashes }, {
|
||||
signal: this.abortController.signal,
|
||||
});
|
||||
const resp = await window.axios.post(
|
||||
`/api/v1/path-table`,
|
||||
{ destination_hashes: destinationHashes },
|
||||
{
|
||||
signal: this.abortController.signal,
|
||||
}
|
||||
);
|
||||
this.pathTable.push(...resp.data.path_table);
|
||||
} else {
|
||||
const firstResp = await window.axios.get(`/api/v1/path-table`, {
|
||||
|
||||
@@ -230,24 +230,24 @@
|
||||
<MaterialDesignIcon icon-name="trash-can" class="size-4 text-red-400" />
|
||||
<span class="font-medium">{{ $t("nomadnet.remove") }}</span>
|
||||
</button>
|
||||
<div class="border-t border-gray-100 dark:border-zinc-700 my-1.5 mx-2"></div>
|
||||
<div
|
||||
class="px-4 py-1.5 text-[10px] font-black text-gray-400 dark:text-zinc-500 uppercase tracking-widest"
|
||||
>
|
||||
Move to Section
|
||||
</div>
|
||||
<div class="max-h-56 overflow-y-auto custom-scrollbar">
|
||||
<button
|
||||
v-for="section in sectionsWithFavourites"
|
||||
:key="section.id + '-move'"
|
||||
type="button"
|
||||
class="w-full flex items-center gap-3 px-4 py-2 text-sm text-gray-700 dark:text-zinc-300 hover:bg-blue-50 dark:hover:bg-blue-900/20 hover:text-blue-600 dark:hover:text-blue-400 transition-all active:scale-95"
|
||||
@click="moveContextFavouriteToSection(section.id)"
|
||||
<div class="border-t border-gray-100 dark:border-zinc-700 my-1.5 mx-2"></div>
|
||||
<div
|
||||
class="px-4 py-1.5 text-[10px] font-black text-gray-400 dark:text-zinc-500 uppercase tracking-widest"
|
||||
>
|
||||
<MaterialDesignIcon icon-name="folder" class="size-4 opacity-70" />
|
||||
<span class="truncate">{{ section.name }}</span>
|
||||
</button>
|
||||
</div>
|
||||
Move to Section
|
||||
</div>
|
||||
<div class="max-h-56 overflow-y-auto custom-scrollbar">
|
||||
<button
|
||||
v-for="section in sectionsWithFavourites"
|
||||
:key="section.id + '-move'"
|
||||
type="button"
|
||||
class="w-full flex items-center gap-3 px-4 py-2 text-sm text-gray-700 dark:text-zinc-300 hover:bg-blue-50 dark:hover:bg-blue-900/20 hover:text-blue-600 dark:hover:text-blue-400 transition-all active:scale-95"
|
||||
@click="moveContextFavouriteToSection(section.id)"
|
||||
>
|
||||
<MaterialDesignIcon icon-name="folder" class="size-4 opacity-70" />
|
||||
<span class="truncate">{{ section.name }}</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</Teleport>
|
||||
|
||||
@@ -259,24 +259,26 @@
|
||||
class="fixed z-[200] min-w-[200px] bg-white dark:bg-zinc-800 rounded-2xl shadow-2xl border border-gray-200 dark:border-zinc-700 py-1.5 overflow-hidden animate-in fade-in zoom-in duration-100"
|
||||
:style="{ top: sectionContextMenu.y + 'px', left: sectionContextMenu.x + 'px' }"
|
||||
>
|
||||
<button
|
||||
type="button"
|
||||
class="w-full flex items-center gap-3 px-4 py-2.5 text-sm text-gray-700 dark:text-zinc-300 hover:bg-gray-100 dark:hover:bg-zinc-700 transition-all active:scale-95"
|
||||
@click="renameSectionFromContext"
|
||||
>
|
||||
<MaterialDesignIcon icon-name="pencil" class="size-4 text-gray-400" />
|
||||
<span class="font-medium">Rename Section</span>
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
class="w-full flex items-center gap-3 px-4 py-2.5 text-sm text-red-600 dark:text-red-400 hover:bg-red-50 dark:hover:bg-red-900/20 transition-all active:scale-95"
|
||||
:disabled="sectionContextMenu.sectionId === defaultSectionId"
|
||||
:class="sectionContextMenu.sectionId === defaultSectionId ? 'opacity-50 cursor-not-allowed' : ''"
|
||||
@click="removeSectionFromContext"
|
||||
>
|
||||
<MaterialDesignIcon icon-name="delete" class="size-4 text-red-400" />
|
||||
<span class="font-medium">Delete Section</span>
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
class="w-full flex items-center gap-3 px-4 py-2.5 text-sm text-gray-700 dark:text-zinc-300 hover:bg-gray-100 dark:hover:bg-zinc-700 transition-all active:scale-95"
|
||||
@click="renameSectionFromContext"
|
||||
>
|
||||
<MaterialDesignIcon icon-name="pencil" class="size-4 text-gray-400" />
|
||||
<span class="font-medium">Rename Section</span>
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
class="w-full flex items-center gap-3 px-4 py-2.5 text-sm text-red-600 dark:text-red-400 hover:bg-red-50 dark:hover:bg-red-900/20 transition-all active:scale-95"
|
||||
:disabled="sectionContextMenu.sectionId === defaultSectionId"
|
||||
:class="
|
||||
sectionContextMenu.sectionId === defaultSectionId ? 'opacity-50 cursor-not-allowed' : ''
|
||||
"
|
||||
@click="removeSectionFromContext"
|
||||
>
|
||||
<MaterialDesignIcon icon-name="delete" class="size-4 text-red-400" />
|
||||
<span class="font-medium">Delete Section</span>
|
||||
</button>
|
||||
</div>
|
||||
</Teleport>
|
||||
</div>
|
||||
@@ -340,22 +342,25 @@
|
||||
</div>
|
||||
<div class="flex-shrink-0">
|
||||
<DropDownMenu>
|
||||
<template #button>
|
||||
<IconButton>
|
||||
<MaterialDesignIcon icon-name="dots-vertical" class="w-5 h-5" />
|
||||
</IconButton>
|
||||
</template>
|
||||
<template #items>
|
||||
<DropDownMenuItem v-if="!isBlocked(node.identity_hash)" @click.stop="onBlockNode(node)">
|
||||
<MaterialDesignIcon icon-name="gavel" class="w-5 h-5 text-red-500" />
|
||||
<span class="text-red-500">{{ $t("nomadnet.block_node") }}</span>
|
||||
</DropDownMenuItem>
|
||||
<DropDownMenuItem v-else @click.stop="onUnblockNode(node.identity_hash)">
|
||||
<MaterialDesignIcon icon-name="check-circle" class="w-5 h-5 text-green-500" />
|
||||
<span class="text-green-500">{{ $t("nomadnet.lift_banishment") }}</span>
|
||||
</DropDownMenuItem>
|
||||
</template>
|
||||
</DropDownMenu>
|
||||
<template #button>
|
||||
<IconButton>
|
||||
<MaterialDesignIcon icon-name="dots-vertical" class="w-5 h-5" />
|
||||
</IconButton>
|
||||
</template>
|
||||
<template #items>
|
||||
<DropDownMenuItem
|
||||
v-if="!isBlocked(node.identity_hash)"
|
||||
@click.stop="onBlockNode(node)"
|
||||
>
|
||||
<MaterialDesignIcon icon-name="gavel" class="w-5 h-5 text-red-500" />
|
||||
<span class="text-red-500">{{ $t("nomadnet.block_node") }}</span>
|
||||
</DropDownMenuItem>
|
||||
<DropDownMenuItem v-else @click.stop="onUnblockNode(node.identity_hash)">
|
||||
<MaterialDesignIcon icon-name="check-circle" class="w-5 h-5 text-green-500" />
|
||||
<span class="text-green-500">{{ $t("nomadnet.lift_banishment") }}</span>
|
||||
</DropDownMenuItem>
|
||||
</template>
|
||||
</DropDownMenu>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -929,7 +934,9 @@ export default {
|
||||
this.closeContextMenus();
|
||||
if (
|
||||
!(await DialogUtils.confirm(
|
||||
this.$t("nomadnet.block_node_confirm", { name: favourite.display_name || favourite.custom_display_name })
|
||||
this.$t("nomadnet.block_node_confirm", {
|
||||
name: favourite.display_name || favourite.custom_display_name,
|
||||
})
|
||||
))
|
||||
) {
|
||||
return;
|
||||
|
||||
@@ -1039,7 +1039,7 @@
|
||||
<!-- Network Security -->
|
||||
<section
|
||||
v-show="
|
||||
matchesSearch(
|
||||
matchesSearch(
|
||||
'RNS Security',
|
||||
'Network Security',
|
||||
'app.blackhole_integration_enabled',
|
||||
@@ -1096,14 +1096,19 @@
|
||||
placeholder="-"
|
||||
@change="
|
||||
updateConfig(
|
||||
{ announce_limit_lxmf_delivery: config.announce_limit_lxmf_delivery ?? null },
|
||||
{
|
||||
announce_limit_lxmf_delivery:
|
||||
config.announce_limit_lxmf_delivery ?? null,
|
||||
},
|
||||
'announce_limits'
|
||||
)
|
||||
"
|
||||
/>
|
||||
</div>
|
||||
<div class="space-y-1">
|
||||
<label class="text-xs font-medium">{{ $t("app.announce_limit_nomadnet") }}</label>
|
||||
<label class="text-xs font-medium">{{
|
||||
$t("app.announce_limit_nomadnet")
|
||||
}}</label>
|
||||
<input
|
||||
v-model.number="config.announce_limit_nomadnetwork_node"
|
||||
type="number"
|
||||
@@ -1112,7 +1117,10 @@
|
||||
placeholder="-"
|
||||
@change="
|
||||
updateConfig(
|
||||
{ announce_limit_nomadnetwork_node: config.announce_limit_nomadnetwork_node ?? null },
|
||||
{
|
||||
announce_limit_nomadnetwork_node:
|
||||
config.announce_limit_nomadnetwork_node ?? null,
|
||||
},
|
||||
'announce_limits'
|
||||
)
|
||||
"
|
||||
@@ -1128,7 +1136,10 @@
|
||||
placeholder="-"
|
||||
@change="
|
||||
updateConfig(
|
||||
{ announce_limit_lxmf_propagation: config.announce_limit_lxmf_propagation ?? null },
|
||||
{
|
||||
announce_limit_lxmf_propagation:
|
||||
config.announce_limit_lxmf_propagation ?? null,
|
||||
},
|
||||
'announce_limits'
|
||||
)
|
||||
"
|
||||
|
||||
Reference in new issue
Block a user