highlight focused content

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;

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 (
     <div className={className}>
       <div className={classes.channel}>
-        <div className={select ? classes.cursor : classes.nocursor} onClick={select ? select : () => {}}>
-          <Image radius="sm" className={classes.image} src={imageUrl} />
-          <div className={classes.details}>
-            <span className={classes.subject}>{title}</span>
-            {message != null && <span className={classes.messageSet}>{message}</span>}
-            {message == null && <span className={classes.messageUnset}>{messagePlaceholder}</span>}
+        <div className={focused ? classes.focused : classes.unfocused}>
+          <div className={select ? classes.cursor : classes.nocursor} onClick={select ? select : () => {}}>
+            <Image radius="sm" className={classes.image} src={imageUrl} />
+            <div className={classes.details}>
+              <span className={classes.subject}>{title}</span>
+              {message != null && <span className={classes.messageSet}>{message}</span>}
+              {message == null && <span className={classes.messageUnset}>{messagePlaceholder}</span>}
+            </div>
+            {unread && <div className={classes.unread} style={{ backgroundColor: Colors.connected }} />}
           </div>
-          {unread && <div className={classes.unread} style={{ backgroundColor: Colors.connected }} />}
         </div>
       </div>
     </div>

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 {

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}]`}

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) => {

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: () => {

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',

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;