RNS-Things/MeshChatX
2
0
Fork 0
Code Issues 8 Pull Requests 1 Actions Packages Projects Releases 1 Wiki Activity

feat(MessagesSidebar): enhance conversation search with ingest paper message button and loading skeleton for conversations

Browse Source
This commit is contained in:
ivan
2026-01-02 17:27:40 -06:00
parent e974758d3e
commit c701c8071d
1 changed files with 40 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files

50
meshchatx/src/frontend/components/messages/MessagesSidebar.vue
View File

@@ -35,13 +35,23 @@
> >
<!-- search + filters --> <!-- search + filters -->
<div v-if="conversations.length > 0" class="p-1 border-b border-gray-300 dark:border-zinc-700 space-y-2"> <div v-if="conversations.length > 0" class="p-1 border-b border-gray-300 dark:border-zinc-700 space-y-2">
<input <div class="flex gap-1">
:value="conversationSearchTerm" <input
type="text" :value="conversationSearchTerm"
:placeholder="$t('messages.search_placeholder', { count: conversations.length })" type="text"
class="input-field" :placeholder="$t('messages.search_placeholder', { count: conversations.length })"
@input="onConversationSearchInput" class="input-field flex-1"
/> @input="onConversationSearchInput"
/>
<button
type="button"
class="p-2 bg-gray-100 dark:bg-zinc-800 text-gray-500 dark:text-gray-400 rounded-lg hover:bg-gray-200 dark:hover:bg-zinc-700 transition-colors"
title="Ingest Paper Message"
@click="openIngestPaperMessageModal"
>
<MaterialDesignIcon icon-name="qrcode-scan" class="size-5" />
</button>
</div>
<div class="flex flex-wrap gap-1"> <div class="flex flex-wrap gap-1">
<button type="button" :class="filterChipClasses(filterUnreadOnly)" @click="toggleFilter('unread')"> <button type="button" :class="filterChipClasses(filterUnreadOnly)" @click="toggleFilter('unread')">
{{ $t("messages.unread") }} {{ $t("messages.unread") }}
@@ -61,7 +71,18 @@
<!-- conversations --> <!-- conversations -->
<div class="flex h-full overflow-y-auto"> <div class="flex h-full overflow-y-auto">
<div v-if="displayedConversations.length > 0" class="w-full"> <div v-if="isLoading" class="w-full divide-y divide-gray-100 dark:divide-zinc-800">
<div v-for="i in 6" :key="i" class="p-3 animate-pulse">
<div class="flex gap-3">
<div class="size-10 rounded bg-gray-200 dark:bg-zinc-800"></div>
<div class="flex-1 space-y-2 py-1">
<div class="h-2 bg-gray-200 dark:bg-zinc-800 rounded w-3/4"></div>
<div class="h-2 bg-gray-200 dark:bg-zinc-800 rounded w-1/2"></div>
</div>
</div>
</div>
</div>
<div v-else-if="displayedConversations.length > 0" class="w-full">
<div <div
v-for="conversation of displayedConversations" v-for="conversation of displayedConversations"
:key="conversation.destination_hash" :key="conversation.destination_hash"
@@ -149,7 +170,7 @@
/> />
</svg> </svg>
</div> </div>
<div class="font-semibold">Loading conversations…</div> <div class="font-semibold">{{ $t("messages.loading_conversations") }}</div>
</div> </div>
<!-- no conversations at all --> <!-- no conversations at all -->
@@ -375,7 +396,13 @@ export default {
default: false, default: false,
}, },
}, },
emits: ["conversation-click", "peer-click", "conversation-search-changed", "conversation-filter-changed"], emits: [
"conversation-click",
"peer-click",
"conversation-search-changed",
"conversation-filter-changed",
"ingest-paper-message",
],
data() { data() {
return { return {
tab: "conversations", tab: "conversations",
@@ -409,6 +436,9 @@ export default {
}, },
}, },
methods: { methods: {
openIngestPaperMessageModal() {
this.$emit("ingest-paper-message");
},
onConversationClick(conversation) { onConversationClick(conversation) {
this.$emit("conversation-click", conversation); this.$emit("conversation-click", conversation);
}, },