VDMDI/CT
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

implement message filter by reactions

Browse Source
This commit is contained in:
marlon-erler
2026-04-11 21:01:23 +00:00
parent 45e3ed31ee
commit 9c0a20d22f
9 changed files with 261 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/View/Modals/messageFilterModal.tsx
+68 -5
View File
@@ -5,24 +5,40 @@ import { StringToOption } from "../Components/option";
import { v4 } from "uuid";
import CoreViewModel from "../../ViewModel/Global/coreViewModel";
import MessagePageViewModel from "../../ViewModel/Pages/messagePageViewModel";
import { MessageReactionFilterButton } from "../Components/messageReactionFilterButton";
import { ReactionSymbols } from "../../Model/Chat/chatModel";
export function MessageFilterModal<T>(
coreViewModel: CoreViewModel,
messagePageViewModel: MessagePageViewModel,
converter: React.StateItemConverter<T>,
) {
const noFilter = React.createProxyState(
[messagePageViewModel.reactionFilter],
() => messagePageViewModel.reactionFilter.value == undefined,
);
return (
<div class="modal" toggle:open={messagePageViewModel.isFilterModalOpen}>
<div>
<main>
<h2>{coreViewModel.translations.chatPage.message.messageFilterHeadline}</h2>
<h2>
{
coreViewModel.translations.chatPage.message
.messageFilterHeadline
}
</h2>
<div class="flex-row width-input">
<input
placeholder={
coreViewModel.translations.general.searchLabel
}
bind:value={messagePageViewModel.searchViewModel.searchInput}
on:enter={messagePageViewModel.searchViewModel.applySearch}
bind:value={
messagePageViewModel.searchViewModel.searchInput
}
on:enter={
messagePageViewModel.searchViewModel.applySearch
}
></input>
<button
class="primary"
@@ -30,14 +46,61 @@ export function MessageFilterModal<T>(
coreViewModel.translations.general
.searchButtonAudioLabel
}
on:click={messagePageViewModel.searchViewModel.applySearch}
toggle:disabled={messagePageViewModel.searchViewModel.cannotApplySearch}
on:click={
messagePageViewModel.searchViewModel.applySearch
}
toggle:disabled={
messagePageViewModel.searchViewModel
.cannotApplySearch
}
>
<span class="icon">search</span>
</button>
</div>
<hr></hr>
<h3>
{
coreViewModel.translations.chatPage.message
.messageFilterReactionsHadline
}
</h3>
<div class="flex-column gap">
<button toggle:selected={noFilter} on:click={messagePageViewModel.revokeReactionFilter}>
{
coreViewModel.translations.chatPage.message
.messageFilterAllReactionsButton
}
</button>
<div class="grid gap message-reaction-filter">
{MessageReactionFilterButton(
messagePageViewModel,
ReactionSymbols.ThumbsUp,
)}
{MessageReactionFilterButton(
messagePageViewModel,
ReactionSymbols.Check,
)}
{MessageReactionFilterButton(
messagePageViewModel,
ReactionSymbols.Stop,
)}
{MessageReactionFilterButton(
messagePageViewModel,
ReactionSymbols.Attention,
)}
{MessageReactionFilterButton(
messagePageViewModel,
ReactionSymbols.DoubleAttention,
)}
{MessageReactionFilterButton(
messagePageViewModel,
ReactionSymbols.Question,
)}
</div>
</div>
</main>
<button on:click={messagePageViewModel.closeFilterModal}>
{coreViewModel.translations.general.closeButton}