From c0319b0864f2e17efd55f3bee66833a4ea53c336 Mon Sep 17 00:00:00 2001 From: balzack Date: Tue, 10 Dec 2024 18:30:00 -0800 Subject: [PATCH] highlight focused content --- app/client/web/src/channel/Channel.module.css | 29 ++++++++++++++++--- app/client/web/src/channel/Channel.tsx | 18 +++++++----- app/client/web/src/content/Content.module.css | 4 --- app/client/web/src/content/Content.tsx | 1 + app/client/web/src/content/useContent.hook.ts | 16 ++++++++-- .../web/src/context/useAppContext.hook.ts | 6 ++-- .../src/conversation/useConversation.hook.ts | 6 ++-- app/sdk/src/focus.ts | 4 +-- 8 files changed, 59 insertions(+), 25 deletions(-) diff --git a/app/client/web/src/channel/Channel.module.css b/app/client/web/src/channel/Channel.module.css index 37b496fc..34a0fdc2 100644 --- a/app/client/web/src/channel/Channel.module.css +++ b/app/client/web/src/channel/Channel.module.css @@ -1,9 +1,22 @@ .channel { - display: flex; - flex-direction: row; - align-items: center; height: 100%; - gap: 8px; + + .unfocused { + height: 100%; + display: flex; + flex-direction: row; + align-items: center; + gap: 8px; + } + + .focused { + height: 100%; + display: flex; + flex-direction: row; + align-items: center; + gap: 8px; + background-color: var(--mantine-color-surface-3); + } .details { display: flex; @@ -14,6 +27,10 @@ } .cursor { + padding-top: 8px; + padding-bottom: 8px; + padding-right: 16px; + padding-left: 16px; display: flex; flex-direction: row; align-items: center; @@ -25,6 +42,10 @@ } .nocursor { + padding-top: 8px; + padding-bottom: 8px; + padding-right: 16px; + padding-left: 16px; display: flex; flex-direction: row; align-items: center; diff --git a/app/client/web/src/channel/Channel.tsx b/app/client/web/src/channel/Channel.tsx index 614c55d5..6b5819a1 100644 --- a/app/client/web/src/channel/Channel.tsx +++ b/app/client/web/src/channel/Channel.tsx @@ -6,6 +6,7 @@ import { Colors } from '../constants/Colors' export function Channel({ className, unread, + focused, imageUrl, notesPlaceholder, subject, @@ -16,6 +17,7 @@ export function Channel({ }: { className: string unread: boolean + focused: boolean imageUrl: string notesPlaceholder: string subject: (string | null)[] @@ -43,14 +45,16 @@ export function Channel({ return (
-
{}}> - -
- {title} - {message != null && {message}} - {message == null && {messagePlaceholder}} +
+
{}}> + +
+ {title} + {message != null && {message}} + {message == null && {messagePlaceholder}} +
+ {unread &&
}
- {unread &&
}
diff --git a/app/client/web/src/content/Content.module.css b/app/client/web/src/content/Content.module.css index 73744a62..1d11ca2a 100644 --- a/app/client/web/src/content/Content.module.css +++ b/app/client/web/src/content/Content.module.css @@ -64,10 +64,6 @@ .channel { width: 100%; height: 48px; - padding-top: 8px; - padding-bottom: 8px; - padding-right: 16px; - padding-left: 16px; border-bottom: 1px solid var(--mantine-color-text-8); &:hover { diff --git a/app/client/web/src/content/Content.tsx b/app/client/web/src/content/Content.tsx index 7c4088e2..22ceaebd 100644 --- a/app/client/web/src/content/Content.tsx +++ b/app/client/web/src/content/Content.tsx @@ -74,6 +74,7 @@ export function Content() { key={idx} className={classes.channel} unread={channel.unread} + focused={channel.focused} imageUrl={channel.imageUrl} subject={channel.subject} messagePlaceholder={`[${state.strings.sealed}]`} diff --git a/app/client/web/src/content/useContent.hook.ts b/app/client/web/src/content/useContent.hook.ts index a4ba0e1b..7a792856 100644 --- a/app/client/web/src/content/useContent.hook.ts +++ b/app/client/web/src/content/useContent.hook.ts @@ -9,6 +9,7 @@ type ChannelParams = { cardId: string channelId: string sealed: boolean + focused: boolean hosted: boolean unread: boolean imageUrl: string @@ -32,6 +33,7 @@ export function useContent() { filter: '', topic: '', sealSet: false, + focused: null as null|{cardId: null|string, channelId}, }) const compare = (a: Card, b: Card) => { @@ -134,12 +136,13 @@ export function useContent() { return '' } + const focused = (state.focused?.cardId === cardId && state.focused?.channelId === channelId); const hosted = cardId == null const subject = data?.subject ? [data.subject] : buildSubject() const message = getMessage() const imageUrl = selectImage() - return { cardId, channelId, sealed, hosted, unread, imageUrl, subject, message } + return { cardId, channelId, sealed, focused, hosted, unread, imageUrl, subject, message } }) const search = state.filter?.toLowerCase() @@ -157,7 +160,16 @@ export function useContent() { }) updateState({ filtered }) - }, [state.sorted, state.cards, state.guid, state.filter]) + }, [state.sorted, state.cards, state.guid, state.filter, state.focused]) + + useEffect(() => { + if (app.state.focus) { + const { cardId, channelId } = app.state.focus; + updateState({ focused: { cardId, channelId } }); + } else { + updateState({ focused: null }); + } + }, [app.state.focus]); useEffect(() => { const setConfig = (config: Config) => { diff --git a/app/client/web/src/context/useAppContext.hook.ts b/app/client/web/src/context/useAppContext.hook.ts index ef48a550..c483b2b5 100644 --- a/app/client/web/src/context/useAppContext.hook.ts +++ b/app/client/web/src/context/useAppContext.hook.ts @@ -10,7 +10,7 @@ export function useAppContext() { const sdk = useRef(databag) const [state, setState] = useState({ session: null as null | Session, - focus: null as null | Focus, + focus: null as null | { cardId: null | string, channelId: string, thread: Focus }, }) // eslint-disable-next-line @typescript-eslint/no-explicit-any @@ -84,8 +84,8 @@ export function useAppContext() { }, setFocus: (cardId: string | null, channelId: string) => { if (state.session) { - const focus = state.session.setFocus(cardId, channelId); - updateState({ focus }); + const thread = state.session.setFocus(cardId, channelId); + updateState({ focus: {cardId, channelId, thread} }); } }, clearFocus: () => { diff --git a/app/client/web/src/conversation/useConversation.hook.ts b/app/client/web/src/conversation/useConversation.hook.ts index 3a49981f..021caf90 100644 --- a/app/client/web/src/conversation/useConversation.hook.ts +++ b/app/client/web/src/conversation/useConversation.hook.ts @@ -34,7 +34,7 @@ export function useConversation() { }, [display.state]) useEffect(() => { - const focus = app.state.focus; + const focus = app.state.focus?.thread; const { contact, identity } = app.state.session || { }; if (focus && contact && identity) { const setTopics = (topics: Topic[]) => { @@ -87,7 +87,7 @@ export function useConversation() { app.actions.clearFocus(); }, more: async () => { - const { focus } = app.state; + const focus = app.state.focus?.thread; if (focus) { if (!state.loadingMore) { updateState({ loadingMore: true }); @@ -99,7 +99,7 @@ export function useConversation() { } }, add: async (file: File) => { - const { focus } = app.state; + const focus = app.state.focus?.thread; if (focus) { const asset = { name: 'topic', diff --git a/app/sdk/src/focus.ts b/app/sdk/src/focus.ts index d6b07316..53a9403e 100644 --- a/app/sdk/src/focus.ts +++ b/app/sdk/src/focus.ts @@ -20,8 +20,8 @@ import { setContactChannelTopicSubject } from './net/setContactChannelTopicSubje import { removeChannelTopic } from './net/removeChannelTopic'; import { removeContactChannelTopic } from './net/removeContactChannelTopic'; -const BATCH_COUNT = 64; -const MIN_LOAD_SIZE = 32; +const BATCH_COUNT = 32; +const MIN_LOAD_SIZE = (BATCH_COUNT / 2); const CLOSE_POLL_MS = 100; const RETRY_POLL_MS = 2000; const ENCRYPT_BLOCK_SIZE = 1048576;