Merge pull request #3567 from tloncorp/activity-release

activity: release to dev
tloncorp · Jun 4, 2024 · c159988 · c159988
2 parents 9cd3ee4 + 8512281
commit c159988
Show file tree

Hide file tree

Showing 91 changed files with 3,866 additions and 1,700 deletions.
diff --git a/apps/tlon-web/src/app.tsx b/apps/tlon-web/src/app.tsx
@@ -94,6 +94,7 @@ import {
 } from '@/state/settings';
 
 import ChannelVolumeDialog from './channels/ChannelVolumeDialog';
+import ThreadVolumeDialog from './channels/ThreadVolumeDialog';
 import MobileChatSearch from './chat/ChatSearch/MobileChatSearch';
 import DevLog from './components/DevLog/DevLog';
 import DevLogsView from './components/DevLog/DevLogView';
@@ -112,6 +113,7 @@ import NewGroupView from './groups/NewGroup/NewGroupView';
 import { ChatInputFocusProvider } from './logic/ChatInputFocusContext';
 import useAppUpdates, { AppUpdateContext } from './logic/useAppUpdates';
 import ShareDMLure from './profiles/ShareDMLure';
+import { useActivityFirehose } from './state/activity';
 import { useChannelsFirehose } from './state/channel/channel';
 
 const ReactQueryDevtoolsProduction = React.lazy(() =>
@@ -329,17 +331,11 @@ const GroupsRoutes = React.memo(({ isMobile, isSmall }: RoutesProps) => {
                   element={<ChatChannel title={` • ${groupsTitle}`} />}
                 >
                   {isSmall ? null : (
-                    <Route
-                      path="message/:idTime/:idReplyTime?"
-                      element={<ChatThread />}
-                    />
+                    <Route path="message/:idTime/" element={<ChatThread />} />
                   )}
                 </Route>
                 {isSmall ? (
-                  <Route
-                    path="message/:idTime/:idReplyTime?"
-                    element={<ChatThread />}
-                  />
+                  <Route path="message/:idTime" element={<ChatThread />} />
                 ) : null}
                 {isMobile && (
                   <Route path="search/:query?" element={<MobileChatSearch />} />
@@ -354,7 +350,7 @@ const GroupsRoutes = React.memo(({ isMobile, isSmall }: RoutesProps) => {
                   element={<HeapChannel title={` • ${groupsTitle}`} />}
                 />
                 <Route
-                  path="curio/:idTime/:idReplyTime?"
+                  path="curio/:idTime"
                   element={<HeapDetail title={` • ${groupsTitle}`} />}
                 />
               </Route>
@@ -367,7 +363,7 @@ const GroupsRoutes = React.memo(({ isMobile, isSmall }: RoutesProps) => {
                   element={<DiaryChannel title={` • ${groupsTitle}`} />}
                 />
                 <Route
-                  path="note/:noteId/:idReplyTime?"
+                  path="note/:noteId"
                   element={<DiaryNote title={` • ${groupsTitle}`} />}
                 />
                 <Route path="edit">
@@ -508,6 +504,10 @@ const GroupsRoutes = React.memo(({ isMobile, isSmall }: RoutesProps) => {
             path="/dm?/groups/:ship/:name/channels/:chType/:chShip/:chName/volume"
             element={<ChannelVolumeDialog title={`• ${groupsTitle}`} />}
           />
+          <Route
+            path="/dm?/groups/:ship/:name/channels/:chType/:chShip/:chName/message/:idTime/volume"
+            element={<ThreadVolumeDialog title={`• ${groupsTitle}`} />}
+          />
           <Route
             path="/groups/:ship/:name/leave"
             element={<GroupLeaveDialog />}
@@ -543,7 +543,7 @@ const GroupsRoutes = React.memo(({ isMobile, isSmall }: RoutesProps) => {
                 element={<EmojiPicker />}
               />
               <Route
-                path="/groups/:ship/:name/channels/chat/:chShip/:chName/message/:idTime/:idReplyTime/picker/:writTime"
+                path="/groups/:ship/:name/channels/chat/:chShip/:chName/message/:idTime/picker/:writTime"
                 element={<EmojiPicker />}
               />
               <Route
@@ -619,6 +619,7 @@ const App = React.memo(() => {
   const isMobile = useIsMobile();
   const isSmall = useMedia('(max-width: 1023px)');
 
+  useActivityFirehose();
   useChannelsFirehose();
   useEffect(() => {
     if (isNativeApp()) {

diff --git a/apps/tlon-web/src/channels/ChannelActions.tsx b/apps/tlon-web/src/channels/ChannelActions.tsx
@@ -109,7 +109,7 @@ const ChannelActions = React.memo(
               {channel?.meta.title || `~${nest}`}
             </span>
           </div>
-          <VolumeSetting scope={{ channel: nest }} />
+          <VolumeSetting source={{ channel: { nest, group: groupFlag } }} />
         </div>
       ),
       keepOpenOnClick: true,

diff --git a/apps/tlon-web/src/channels/ChannelVolumeDialog.tsx b/apps/tlon-web/src/channels/ChannelVolumeDialog.tsx
@@ -45,7 +45,7 @@ export default function ChannelVolumeDialog({ title }: ViewProps) {
             {channel?.meta ? `${channel.meta.title}` : null}
           </span>
         </div>
-        <VolumeSetting scope={{ channel: nest }} />
+        <VolumeSetting source={{ channel: { nest, group: flag } }} />
       </div>
     </Dialog>
   );

diff --git a/apps/tlon-web/src/channels/ThreadVolumeDialog.tsx b/apps/tlon-web/src/channels/ThreadVolumeDialog.tsx
@@ -0,0 +1,64 @@
+import { ViewProps } from '@tloncorp/shared/dist/urbit/groups';
+import { Helmet } from 'react-helmet';
+import { useParams } from 'react-router';
+
+import Dialog from '@/components/Dialog';
+import VolumeSetting from '@/components/VolumeSetting';
+import { useDismissNavigate } from '@/logic/routing';
+import { firstInlineSummary } from '@/logic/tiptap';
+import { getMessageKey } from '@/logic/utils';
+import { usePost } from '@/state/channel/channel';
+import { useGroupChannel, useRouteGroup } from '@/state/groups';
+
+export default function ThreadVolumeDialog({ title }: ViewProps) {
+  const { chType, chShip, chName, idTime } = useParams<{
+    chType: string;
+    chShip: string;
+    chName: string;
+    idTime: string;
+  }>();
+  const flag = useRouteGroup();
+  const dismiss = useDismissNavigate();
+  const nest = `${chType}/${chShip}/${chName}`;
+  const channel = useGroupChannel(flag, nest);
+  const { post } = usePost(nest, idTime!);
+  const line = post ? firstInlineSummary(post.essay.content) : 'Thread';
+  const shortenedLine = line.length > 50 ? `${line.slice(0, 50)}...` : line;
+  const msgKey = post ? getMessageKey(post) : null;
+
+  const onOpenChange = (open: boolean) => {
+    if (!open) {
+      dismiss();
+    }
+  };
+
+  if (!msgKey) {
+    return null;
+  }
+
+  return (
+    <Dialog
+      defaultOpen
+      modal
+      onOpenChange={onOpenChange}
+      className="m-0 flex h-[90vh] w-[90vw] flex-col p-0 sm:h-auto sm:max-h-[800px] sm:w-[75vw] sm:max-w-[800px]"
+    >
+      <Helmet>
+        <title>
+          {channel?.meta
+            ? `Notifcation settings for thread in ${channel.meta.title} ${title}`
+            : title}
+        </title>
+      </Helmet>
+      <div className="card mb-6 space-y-6">
+        <div className="flex flex-col space-y-1">
+          <span className="text-lg text-gray-800">Notification Settings</span>
+          <span className="text-sm text-gray-500">{`Thread: ${shortenedLine}`}</span>
+        </div>
+        <VolumeSetting
+          source={{ thread: { key: msgKey, channel: nest, group: flag } }}
+        />
+      </div>
+    </Dialog>
+  );
+}
diff --git a/apps/tlon-web/src/chat/ChatChannel.tsx b/apps/tlon-web/src/chat/ChatChannel.tsx
@@ -190,10 +190,7 @@ const ChatChannel = React.memo(({ title }: ViewProps) => {
       </Layout>
       <Routes>
         {isSmall ? null : (
-          <Route
-            path="message/:idTime/:idReplyTime?"
-            element={<ChatThread />}
-          />
+          <Route path="message/:idTime" element={<ChatThread />} />
         )}
       </Routes>
     </>

diff --git a/apps/tlon-web/src/chat/ChatInput/ChatInput.tsx b/apps/tlon-web/src/chat/ChatInput/ChatInput.tsx
@@ -1,5 +1,6 @@
 import * as Popover from '@radix-ui/react-popover';
 import { Editor } from '@tiptap/react';
+import { getKey } from '@tloncorp/shared/dist/urbit/activity';
 import {
   CacheId,
   Cite,
@@ -70,6 +71,7 @@ import {
 } from '@/state/chat';
 import { useGroupFlag } from '@/state/groups';
 import { useFileStore, useUploader } from '@/state/storage';
+import { useUnreadsStore } from '@/state/unreads';
 
 interface ChatInputProps {
   whom: string;
@@ -392,7 +394,7 @@ export default function ChatInput({
       setDraft(inlinesToJSON(['']));
       setTimeout(() => {
         // TODO: chesterton's fence, but why execute a read here?
-        useChatStore.getState().read(whom);
+        useUnreadsStore.getState().read(getKey(whom));
         clearAttachments();
       }, 0);
     },