From eeedc4a6ee5d219c94bc4bdedb9c159aa77b8e5b Mon Sep 17 00:00:00 2001
From: tezlm <zestylemonade@celery.eu.org>
Date: Fri, 26 Jan 2024 17:28:30 -0800
Subject: [PATCH] random fixes

---
 src/Main.tsx   |   9 ++-
 src/Menu.scss  |  12 +++-
 src/Menu.tsx   | 163 +++++++++++++++++++++++++++++++++----------------
 src/Room.tsx   |   8 +++
 src/Thread.tsx |   7 ++-
 src/index.scss |   1 +
 6 files changed, 141 insertions(+), 59 deletions(-)

diff --git a/src/Main.tsx b/src/Main.tsx
index 9dba22e..5ceb204 100644
--- a/src/Main.tsx
+++ b/src/Main.tsx
@@ -136,8 +136,13 @@ export default function App(): JSX.Element {
   
   return (
     <>
-      <header id="header">
-        header: settings, pinned, search, info, help
+      <header id="header" style="display:flex">
+        <div style="flex:1">
+          [room name] [room topic]
+        </div>
+        <div>
+          [voice] [settings] [info/pins] [search] [user] [help]
+        </div>
       </header>
       <main id="main" class={globals.scene.type === "home" ? "home" : "room"}>
         <Switch>
diff --git a/src/Menu.scss b/src/Menu.scss
index 7945f6c..baa53b2 100644
--- a/src/Menu.scss
+++ b/src/Menu.scss
@@ -27,12 +27,12 @@ menu.context {
 
     &.submenu {
       & > .subwrap {
-        padding-left: 8px;
-        display: none;
+        padding: 0 8px;
+        visibility: hidden;
       }
       
       &:hover > .subwrap, & > .subwrap:hover {
-        display: block;
+        visibility: visible;
       }
     }
     
@@ -41,3 +41,9 @@ menu.context {
     }
   }
 }
+
+.subtext {
+  color: var(--foreground-2);
+  font-size: .9rem;
+  margin-top: -4px;
+}
diff --git a/src/Menu.tsx b/src/Menu.tsx
index 7ef2956..2b097c4 100644
--- a/src/Menu.tsx
+++ b/src/Menu.tsx
@@ -55,34 +55,31 @@ export function Separator() {
 }
 
 // the context menu for spaces (currently identical to rooms)
-export function SpaceMenu(props: VoidProps<{ room: Room }>) {
-  const copyId = () => navigator.clipboard.writeText(props.room.id);
+// export function SpaceMenu(props: VoidProps<{ room: Room }>) {
+//   const copyId = () => navigator.clipboard.writeText(props.room.id);
+//   const leave = () => {
+//     if (confirm("really leave?")) props.room.leave();
+//   };
   
-  return (
-    <Menu>
-      <Item>mark as read</Item>
-      {
-        // <Item>copy link</Item>
-      }
-      <Submenu content={"mute"}>
-        <Item>for 3 hours</Item>
-        <Item>for 1 day</Item>
-        <Item>for 1 week</Item>
-        <Item>forever</Item>
-      </Submenu>
-      <Submenu content={"edit"}>
-        <Item>general</Item>
-        <Item>log</Item>
-        <Item>permissions</Item>
-        <Item>etc</Item>
-      </Submenu>
-      <Item>leave</Item>
-      <Separator />
-      <Item onClick={copyId}>copy id</Item>
-      <Item>inspect</Item>
-    </Menu>
-  )
-}
+//   return (
+//     <Menu>
+//       <Item>mark as read</Item>
+//       <Item>copy link</Item>
+//       <NotifcationMenu />
+//       <Separator />
+//       <Submenu content={"edit"}>
+//         <Item>general</Item>
+//         <Item>log</Item>
+//         <Item>permissions</Item>
+//         <Item>etc</Item>
+//       </Submenu>
+//       <Item onClick={leave}><span style="color: var(--foreground-danger)">leave</span></Item>
+//       <Separator />
+//       <Item onClick={copyId}>copy id</Item>
+//       <Item>inspect</Item>
+//     </Menu>
+//   )
+// }
 
 // the context menu for rooms
 export function RoomMenu(props: VoidProps<{ room: Room }>) {
@@ -96,22 +93,16 @@ export function RoomMenu(props: VoidProps<{ room: Room }>) {
   return (
     <Menu>
       <Item>mark as read</Item>
-      {
-        // <Item>copy link</Item>
-      }
-      <Submenu content={"mute"}>
-        <Item>for 3 hours</Item>
-        <Item>for 1 day</Item>
-        <Item>for 1 week</Item>
-        <Item>forever</Item>
-      </Submenu>
+      <Item>copy link</Item>
+      <RoomNotificationMenu />
+      <Separator />
       <Submenu content={"edit"} onClick={edit}>
         <Item>general</Item>
         <Item>log</Item>
         <Item>permissions</Item>
         <Item>etc</Item>
       </Submenu>
-      <Item onClick={leave}>leave</Item>
+      <Item onClick={leave}><span style="color: var(--foreground-danger)">leave</span></Item>
       <Separator />
       <Item onClick={copyId}>copy id</Item>
       <Item>inspect</Item>
@@ -136,6 +127,85 @@ export function UserMenu() {
   )
 }
 
+function ThreadNotificationMenu() {
+  return (
+    <>
+      <Submenu content={"notifications"}>
+        <Item>
+          <div>default</div>
+          <div class="subtext">Uses the room's default notifications.</div>
+        </Item>
+        <Item>
+          <div>replies</div>
+          <div class="subtext">You will be notified of new replies in this thread.</div>
+        </Item>
+        <Item>
+          <div>watching</div>
+          <div class="subtext">Updates to this thread will show up in your inbox.</div>
+        </Item>
+        <Item>
+          <div>mentions</div>
+          <div class="subtext">You will only be notified on @mention</div>
+        </Item>
+        <Separator />
+        <Item>bookmark</Item>
+        <Submenu content={"remind me"}>
+          <Item>in 15 minutes</Item>
+          <Item>in 3 hours</Item>
+          <Item>in 8 hours</Item>
+          <Item>in 1 day</Item>
+          <Item>in 1 week</Item>
+          <Item>custom</Item>
+        </Submenu>
+      </Submenu>
+      <Submenu content={"mute"}>
+        <Item>for 15 minutes</Item>
+        <Item>for 3 hours</Item>
+        <Item>for 8 hours</Item>
+        <Item>for 1 day</Item>
+        <Item>for 1 week</Item>
+        <Item>custom</Item>
+      </Submenu>
+    </>
+  );
+}
+
+function RoomNotificationMenu() {
+  return (
+    <>
+      <Submenu content={"notifications"}>
+        <Item>
+          <div>default</div>
+          <div class="subtext">Uses your global default notification config.</div>
+        </Item>
+        <Item>
+          <div>replies</div>
+          <div class="subtext">You will be notified of new replies in threads.</div>
+        </Item>
+        <Item>
+          <div>creation</div>
+          <div class="subtext">You will be notified of new threads.</div>
+        </Item>
+        <Item>
+          <div>watching</div>
+          <div class="subtext">New threads and thread updates show up in your inbox.</div>
+        </Item>
+        <Item>
+          <div>mentions</div>
+          <div class="subtext">You will only be notified on @mention</div>
+        </Item>
+      </Submenu>
+      <Submenu content={"mute"}>
+        <Item>for 15 minutes</Item>
+        <Item>for 3 hours</Item>
+        <Item>for 8 hours</Item>
+        <Item>for 1 day</Item>
+        <Item>for 1 week</Item>
+      </Submenu>
+    </>
+  );
+}
+
 // the context menu for threads
 export function ThreadMenu(props: VoidProps<{ thread: Thread }>) {
   const copyId = () => navigator.clipboard.writeText(props.thread.id);
@@ -146,21 +216,8 @@ export function ThreadMenu(props: VoidProps<{ thread: Thread }>) {
   return (
     <Menu>
       <Item onClick={ack}>mark as read</Item>
-      {
-        // <Item>copy link</Item>
-      }
-      <Item>watch/unwatch</Item>
-      <Submenu content={"mute"}>
-        <Item>for 3 hours</Item>
-        <Item>for 1 day</Item>
-        <Item>for 1 week</Item>
-        <Item>forever</Item>
-      </Submenu>
-      <Submenu content={"remind"}>
-        <Item>in 3 hours</Item>
-        <Item>in 1 day</Item>
-        <Item>in 1 week</Item>
-      </Submenu>
+      <Item>copy link</Item>
+      <ThreadNotificationMenu />
       <Separator />
       <Item>edit</Item>
       <Submenu content={"tag"}>
@@ -169,7 +226,7 @@ export function ThreadMenu(props: VoidProps<{ thread: Thread }>) {
         <Item>baz</Item>
       </Submenu>
       <Item>pin</Item>
-      <Item>redact</Item>
+      <Item><span style="color: var(--foreground-danger)">redact</span></Item>
       <Separator />
       <Item onClick={copyId}>copy id</Item>
       <Item onClick={copyJSON}>view source</Item>
diff --git a/src/Room.tsx b/src/Room.tsx
index a1e42e0..6992dcd 100644
--- a/src/Room.tsx
+++ b/src/Room.tsx
@@ -323,6 +323,13 @@ export function Inbox() {
     }
   }
 
+  function markAllAsRead() {
+    // TODO: use bulk ack
+    for (const thread of threads()) {
+      thread.ack();
+    }
+  }
+
   const willOpenThreadMenu = (thread: Thread) => (e: MouseEvent) => {
     e.preventDefault();
     action({
@@ -334,6 +341,7 @@ export function Inbox() {
   return (
     <div class="timeline threads" ref={scrollEl!} onScroll={handleScroll}>
       <button onClick={() => setFilter("unread", f => !f)}>{filter.unread ? "showing unread only" : "showing all"}</button>
+      <button onClick={markAllAsRead}>mark all as read</button>
       <Show when={!isLoading()} fallback={<div>keep calm...</div>}>
         <table>
           <thead>
diff --git a/src/Thread.tsx b/src/Thread.tsx
index cd55903..2c8b743 100644
--- a/src/Thread.tsx
+++ b/src/Thread.tsx
@@ -644,11 +644,16 @@ function ThreadInfo(props: VoidProps<{ thread: Thread, showHeader: boolean }>) {
       observer.disconnect();
     });
   });
+  
+  const willHandleThreadeContextMenu = (e: MouseEvent) => {
+    e.preventDefault();
+    action({ type: "contextmenu.set", menu: { type: "thread", thread: props.thread, x: e.clientX, y: e.clientY } });
+  }
 
   return (
     <>
       <div class="spacer"></div>
-      <header>
+      <header onContextMenu={willHandleThreadeContextMenu}>
         <div ref={stickyEl!} class="sticky" classList={{ stuck: stuck() || !props.showHeader }}>
           <h1>
             <TextBlock text={event().content.title} fallback={<Text>thread.untitled</Text>} />
diff --git a/src/index.scss b/src/index.scss
index af203a6..8f08c50 100644
--- a/src/index.scss
+++ b/src/index.scss
@@ -8,6 +8,7 @@
   --foreground-1: #eae8efcc;
   --foreground-2: #eae8ef9f;
   --foreground-link: #b18cf3;
+  --foreground-danger: #fa6261;
   --font-default: "Atkinson Hyperlegible", Inter, system-ui, Avenir, Helvetica, Arial, sans-serif;
   --font-mono: "Iosevka Zesty", 'Courier New', Courier, monospace;