Merge pull request #185 from jaczhi/jaczhi/chat-hide

Use local storage to hide chat channels in UI

src/components/chat/chat-state-store.tsx

@@ -0,0 +1,14 @@
+import { createSignal } from "solid-js";
+
+export function useChatState<T>(keyName: string, defaultValue: T) {
+  const [chatState, setChatState] = createSignal<T>(
+    JSON.parse(localStorage.getItem(keyName) || JSON.stringify(defaultValue))
+  );
+
+  const updateChatState = (newValue: T) => {
+    setChatState(() => newValue);
+    localStorage.setItem(keyName, JSON.stringify(newValue));
+  };
+
+  return { chatState, updateChatState };
+}

src/components/chat/chat.tsx

@@ -1,9 +1,11 @@
-import { batch, createEffect, createMemo, createSignal, For, on } from 'solid-js'
+import {batch, createEffect, createMemo, createSignal, For, on} from 'solid-js'
 import { boxed } from '@syncedstore/core'
 import { useNdnWorkspace } from '../../Context'
 import { chats } from '../../backend/models'
 import { createSyncedStoreSig } from '../../adaptors/solid-synced-store'
-import { AddChannelDialog } from './add-channel-dialog.tsx'
+import { useChatState } from "./chat-state-store.tsx";
+import { AddChannelDialog } from "./add-channel-dialog.tsx";
+import { ToggleChannelVisibilityDialog } from "./toggle-visibility-dialog.tsx";
 import styles from './styles.module.scss'
 import { useNavigate } from '@solidjs/router'
 import { SolidMarkdown, SolidMarkdownComponents } from 'solid-markdown'
@@ -17,28 +19,38 @@ export function Chat() {
   const messages = createSyncedStoreSig(() => rootDoc()?.chats)
   const data = () => messages()?.value
   const username = () => syncAgent()?.nodeId.at(-1).text ?? ''
+  const { chatState: hiddenChannels, updateChatState: setHiddenChannels } = useChatState<string[]>(`${syncAgent()?.nodeId}/hiddenChannels`, [])
 
   const [messageTerm, setMessageTerm] = createSignal('')
   const [container, setContainer] = createSignal<HTMLDivElement>()
   const [currentChannel, setCurrentChannel] = createSignal('general')
   const [isAddChannelDialogOpen, setIsAddChannelDialogOpen] = createSignal(false)
+  const [isToggleVisibilityDialogOpen, setIsToggleVisibilityDialogOpen] = createSignal(false)
   const [persistedChannels, setPersistedChannels] = createSignal<string[]>(['general'])
 
-  const channels = createMemo(() => {
-    const messageData = data()
-    if (!messageData) return persistedChannels()
+  const channels = createMemo<string[]>((): string[] => {
+    const messageData = data();
+    if (!messageData) {
+      return Array.from(new Set(persistedChannels()).difference(new Set(hiddenChannels())))
+    }
 
-    const uniqueChannels = new Set(persistedChannels())
-    messageData.forEach((msg) => {
+    const uniqueChannels: Set<string> = new Set();
+    messageData.forEach(msg => {
       if (msg.value.channel) {
-        uniqueChannels.add(msg.value.channel)
+        uniqueChannels.add(msg.value.channel);
       }
-    })
+    });
+
+    const finalChannels: Set<string> = uniqueChannels
+      .union(new Set(persistedChannels()))
+      .difference(new Set(hiddenChannels()))
 
-    return Array.from(uniqueChannels).sort()
-  })
+    return Array.from(finalChannels).sort();
+  });
 
-  const filteredMessages = createMemo(() => data()?.filter((msg) => msg.value.channel === currentChannel()))
+  const filteredMessages = createMemo(() =>
+    data()?.filter((msg) => msg.value.channel === currentChannel())
+  );
 
   if (!booted()) {
     navigate('/profile', { replace: true })
@@ -69,24 +81,42 @@ export function Chat() {
     }),
   )
 
+  createEffect(
+    on(channels, () => {
+      if (!channels().includes(currentChannel())) {
+        setCurrentChannel(channels()[0])
+      }
+    }),
+  )
+
   const addChannel = (channelName: string) => {
     const trimmedName = channelName.trim()
-    if (trimmedName && !channels().includes(trimmedName)) {
+    if (trimmedName && !channels().includes(trimmedName) && !hiddenChannels().includes(trimmedName)) {
       setPersistedChannels([...persistedChannels(), trimmedName])
       setCurrentChannel(trimmedName)
-    } else {
+    }
+    else {
       alert('Channel name cannot be empty or already exist')
     }
   }
 
+  const hideChannel = (channelName: string) => {
+    if (channels().length === 1) {
+      alert('Cannot hide the last channel')
+      return
+    }
+
+    setHiddenChannels([...new Set([...hiddenChannels(), channelName])])
+  }
+
   const isLocalUser = (sender: string) => sender == username()
 
   const userPfpId = (sender: string) => {
-    let hash = 0
+    let hash = 0;
     for (let i = 0; i < sender.length; i++) {
-      hash = (hash * 31 + sender.charCodeAt(i)) >>> 0 // Ensure the hash is always a 32-bit unsigned integer
+      hash = (hash * 31 + sender.charCodeAt(i)) >>> 0;  // Ensure the hash is always a 32-bit unsigned integer
     }
-    return hash % 1024
+    return hash % 1024;
   }
 
   /* Display */
@@ -109,12 +139,32 @@ export function Chat() {
                 onClick={() => setCurrentChannel(channel)}
               >
                 #{channel}
+                <span
+                  title={"Hide channel"}
+                  class={styles.HideChannelButton}
+                  aria-label={"Hide channel"}
+                  onClick={(event) => {
+                    event.stopPropagation()
+                    hideChannel(channel)
+                  }
+                }>x</span>
               </button>
             )}
           </For>
-          <button class={styles.AddChannelButton} onClick={() => setIsAddChannelDialogOpen(true)}>
+          <button
+            class={styles.AddChannelButton}
+            onClick={() => setIsAddChannelDialogOpen(true)}
+            title={"New channel"}
+            aria-label={"New channel"}>
             +
           </button>
+          <button
+            class={styles.AddChannelButton}
+            onClick={() => setIsToggleVisibilityDialogOpen(true)}
+            title={"Unhide channels"}
+            aria-label={"Un-hide channels"}>
+            &#x2630;
+          </button>
         </div>
         <h2 class={styles.ChannelHeading}>#{currentChannel()} Channel</h2>
       </div>
@@ -123,21 +173,25 @@ export function Chat() {
           {(msg) => (
             <div>
               <div class={styles.App__message}>
-                <img src={`https://picsum.photos/id/${userPfpId(msg.value.sender)}/128/128`} style="flex-shrink: 0" />
+                <img
+                  aria-hidden={true}
+                  alt={`${msg.value.sender}'s profile picture`}
+                  src={`https://picsum.photos/id/${userPfpId(msg.value.sender)}/128/128`}
+                  style="flex-shrink: 0"
+                />
                 <div class={styles.App__msgContent}>
                   <h4
                     class={`${styles.App__msgHeader} 
                       ${isLocalUser(msg.value.sender) ? styles.App__backgroundLocal : styles.App__backgroundForeign} 
                       ${isLocalUser(msg.value.sender) ? styles.App__borderLocal : styles.App__borderForeign}`}
                   >
                     {' '}
-                    {msg.value.sender}{' '}
-                    <span>
-                      {new Date(msg.value.timestamp).toLocaleString(undefined, {
-                        dateStyle: 'medium',
-                        timeStyle: 'short',
-                      })}
-                    </span>
+                    {msg.value.sender}
+                    {' '}
+                    <span>{new Date(msg.value.timestamp).toLocaleString(undefined, {
+                      dateStyle: 'medium',
+                      timeStyle: 'short'
+                    })}</span>
                   </h4>
                   <div
                     class={`${styles.App_msgContentSolid} 
@@ -158,7 +212,7 @@ export function Chat() {
       <div class={styles.App__input}>
         <textarea
           name="message"
-          placeholder={`Message the ${currentChannel()} channel`}
+          placeholder={`Message the #${currentChannel()} channel`}
           onChange={(event) => setMessageTerm(event.target.value)}
           onKeyDown={(event) => {
             if (event.key === 'Enter' && !event.shiftKey) {
@@ -184,6 +238,14 @@ export function Chat() {
           setIsAddChannelDialogOpen(false)
         }}
       />
+
+      <ToggleChannelVisibilityDialog
+        open={isToggleVisibilityDialogOpen()}
+        channels={channels}
+        hiddenChannels={hiddenChannels}
+        setHiddenChannels={setHiddenChannels}
+        onClose={() => setIsToggleVisibilityDialogOpen(false)}
+      />
     </div>
   )
 }

src/components/chat/styles.module.scss

@@ -198,6 +198,10 @@
   margin-right: 8px;
   transition: background-color 0.3s;
 
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+
   &:hover {
     background-color: #f4f4f4;
   }
@@ -216,6 +220,10 @@
   margin-bottom: 8px;
   transition: background-color 0.3s;
 
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+
   &:hover {
     background-color: #0056b3;
   }
@@ -246,3 +254,38 @@
   margin: 0;
   padding-left: 12px;
 }
+
+.HideChannelButton {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 16px;
+  height: 16px;
+  border-radius: 50%;
+  background-color: #e0e0e0;
+  color: #555;
+  font-size: 8px;
+  font-weight: bold;
+  cursor: pointer;
+  transition: all 0.2s ease;
+  user-select: none;
+  line-height: 1;
+  margin-left: 0.5rem;
+
+  vertical-align: middle;
+  margin-top: auto;
+  margin-bottom: auto;
+}
+
+.HideChannelButton:hover {
+  background-color: #f9f9f9;
+}
+
+.HideChannelButton:active {
+  transform: scale(0.95);
+}
+
+.HideChannelButton:focus {
+  outline: 2px solid #0096ff;
+  outline-offset: 2px;
+}

src/components/chat/toggle-visibility-dialog.tsx

@@ -0,0 +1,93 @@
+import { Dialog, DialogTitle, DialogContent, DialogActions, Button, List, ListItem, Checkbox, FormControlLabel } from '@suid/material'
+import { createSignal, createEffect, For } from 'solid-js'
+
+interface ToggleChannelVisibilityDialogProps {
+  open: boolean
+  channels: () => string[]  // visible channels
+  hiddenChannels: () => string[]  // hidden channels
+  setHiddenChannels: (channels: string[]) => void
+  onClose: () => void
+}
+
+export function ToggleChannelVisibilityDialog(props: ToggleChannelVisibilityDialogProps) {
+  // Track all displayed channels and their checked state
+  const [selectedChannels, setSelectedChannels] = createSignal<string[]>([])
+
+  // Initialize selected channels when dialog opens
+  createEffect(() => {
+    if (props.open) {
+      // Start with currently visible channels
+      setSelectedChannels([...props.channels()])
+    }
+  })
+
+  const handleToggleChannel = (channel: string, checked: boolean) => {
+    if (checked) {
+      setSelectedChannels([...selectedChannels(), channel])
+    } else {
+      setSelectedChannels(selectedChannels().filter(c => c !== channel))
+    }
+  }
+
+  const handleSave = () => {
+    if (selectedChannels().length === 0) {
+      // At least one channel must be visible
+      return
+    }
+
+    // Calculate which channels should be hidden (all channels minus selected ones)
+    const allChannels = [...props.channels(), ...props.hiddenChannels()]
+    const newHiddenChannels = allChannels.filter(
+      channel => !selectedChannels().includes(channel)
+    )
+    props.setHiddenChannels(newHiddenChannels)
+    props.onClose()
+  }
+
+  const isChannelSelected = (channel: string) => {
+    return selectedChannels().includes(channel)
+  }
+
+  // Get all channels (visible and hidden)
+  const allChannels = () => {
+    const combined = [...props.channels(), ...props.hiddenChannels()]
+    return [...new Set(combined)].sort() // Remove duplicates and sort
+  }
+
+  return (
+    <Dialog
+      open={props.open}
+      onClose={props.onClose}
+      fullWidth
+      maxWidth="sm"
+    >
+      <DialogTitle>Toggle Channel Visibility</DialogTitle>
+      <DialogContent>
+        <List sx={{ minWidth: '300px' }}>
+          <For each={allChannels()}>
+            {(channel) => (
+              <ListItem disablePadding>
+                <FormControlLabel
+                  control={
+                    <Checkbox
+                      checked={isChannelSelected(channel)}
+                      onChange={(_, checked) => handleToggleChannel(channel, checked)}
+                    />
+                  }
+                  label={`#${channel}`}
+                  sx={{ width: '100%', margin: '4px 0' }}
+                />
+              </ListItem>
+            )}
+          </For>
+        </List>
+      </DialogContent>
+      <DialogActions>
+        <Button onClick={props.onClose}>Cancel</Button>
+        <Button onClick={handleSave} disabled={selectedChannels().length === 0} color="primary">
+          Save
+        </Button>
+      </DialogActions>
+    </Dialog>
+  )
+}