hark-fe: add (un)mute buttons in ChannelMenu

pkg/interface/src/views/landscape/components/ChannelMenu.tsx

@@ -3,8 +3,9 @@ import { Link, useHistory } from "react-router-dom";
 
 import { Icon, Row, Col, Button, Text, Box, Action } from "@tlon/indigo-react";
 import { Dropdown } from "~/views/components/Dropdown";
-import { Association } from "~/types";
+import { Association, NotificationGraphConfig } from "~/types";
 import GlobalApi from "~/logic/api/global";
+import { StatelessAsyncAction } from "~/views/components/StatelessAsyncAction";
 
 const ChannelMenuItem = ({
   icon,
@@ -27,6 +28,7 @@ const ChannelMenuItem = ({
 interface ChannelMenuProps {
   association: Association;
   api: GlobalApi;
+  notificationConfig: NotificationGraphConfig;
 }
 
 export function ChannelMenu(props: ChannelMenuProps) {
@@ -34,8 +36,9 @@ export function ChannelMenu(props: ChannelMenuProps) {
   const history = useHistory();
   const { metadata } = association;
   const app = metadata.module || association["app-name"];
-  const workspace = history.location.pathname.startsWith('/~landscape/home')
-    ? '/home' : association?.['group-path'];
+  const workspace = history.location.pathname.startsWith("/~landscape/home")
+    ? "/home"
+    : association?.["group-path"];
   const baseUrl = `/~landscape${workspace}/resource/${app}${association["app-path"]}`;
   const appPath = association["app-path"];
 
@@ -44,6 +47,13 @@ export function ChannelMenu(props: ChannelMenuProps) {
     : appPath.split("/");
 
   const isOurs = ship.slice(1) === window.ship;
+
+  const isMuted =
+    props.notificationConfig.watching.findIndex((a) => a === appPath) === -1;
+  const onChangeMute = async () => {
+    const func = isMuted ? "listenGraph" : "ignoreGraph";
+    await api.hark[func](appPath);
+  };
   const onUnsubscribe = useCallback(async () => {
     const app = metadata.module || association["app-name"];
     switch (app) {
@@ -85,15 +95,37 @@ export function ChannelMenu(props: ChannelMenuProps) {
   return (
     <Dropdown
       options={
-        <Col backgroundColor="white" border={1} borderRadius={1} borderColor="lightGray">
+        <Col
+          backgroundColor="white"
+          border={1}
+          borderRadius={1}
+          borderColor="lightGray"
+        >
+          {metadata.module === "link" && (
+            <ChannelMenuItem color="blue" icon="Inbox">
+              <StatelessAsyncAction
+                m="2"
+                bg="white"
+                name="notif"
+                onClick={onChangeMute}
+              >
+                {isMuted ? "Unmute" : "Mute"} this channel
+              </StatelessAsyncAction>
+            </ChannelMenuItem>
+          )}
           {isOurs ? (
             <>
               <ChannelMenuItem color="red" icon="TrashCan">
-                <Action m="2" backgroundColor='white' destructive onClick={onDelete}>
+                <Action
+                  m="2"
+                  backgroundColor="white"
+                  destructive
+                  onClick={onDelete}
+                >
                   Delete Channel
                 </Action>
               </ChannelMenuItem>
-              <ChannelMenuItem bottom icon="Gear" color='black'>
+              <ChannelMenuItem bottom icon="Gear" color="black">
                 <Link to={`${baseUrl}/settings`}>
                   <Box fontSize={0} p="2">
                     Channel Settings

pkg/interface/src/views/landscape/components/Content.js

@@ -8,6 +8,7 @@ import DojoApp from '~/views/apps/dojo/app';
 import Landscape from '~/views/landscape/index';
 import Profile from '~/views/apps/profile/profile';
 import ErrorComponent from '~/views/components/Error';
+import Notifications from '~/views/apps/notifications/notifications';
 
 
 export const Container = styled(Box)`
@@ -61,6 +62,12 @@ export const Content = (props) => {
             />
           )}
         />
+        <Route
+          path="/~notifications"
+          render={ p => (
+            <Notifications {...props} />
+          )}
+        />
         <Route
           render={p => (
             <ErrorComponent

pkg/interface/src/views/landscape/components/GroupsPane.tsx

@@ -72,6 +72,8 @@ export function GroupsPane(props: GroupsPaneProps) {
           s3={props.s3}
           hideAvatars={props.hideAvatars}
           hideNicknames={props.hideNicknames}
+          notificationsGroupConfig={props.notificationsGroupConfig}
+
           {...routeProps}
           baseUrl={baseUrl}
         />

pkg/interface/src/views/landscape/components/PopoverRoutes.tsx

@@ -7,10 +7,10 @@ import { Contacts } from "~/types/contact-update";
 import { Group } from "~/types/group-update";
 import { Association } from "~/types/metadata-update";
 import GlobalApi from "~/logic/api/global";
-import {S3State} from "~/types";
+import {GroupNotificationsConfig, S3State} from "~/types";
 
 import { ContactCard } from "./ContactCard";
-import { GroupSettings } from "./GroupSettings";
+import { GroupSettings } from "./GroupSettings/GroupSettings";
 import { Participants } from "./Participants";
 
 
@@ -41,6 +41,7 @@ export function PopoverRoutes(
     api: GlobalApi;
     hideAvatars: boolean;
     hideNicknames: boolean;
+    notificationsGroupConfig: GroupNotificationsConfig;
   } & RouteComponentProps
 ) {
   const relativeUrl = (url: string) => `${props.baseUrl}/popover${url}`;
@@ -125,6 +126,7 @@ export function PopoverRoutes(
                         group={props.group}
                         association={props.association}
                         api={props.api}
+                        notificationsGroupConfig={props.notificationsGroupConfig}
                       />
                     )}
                     {view === "participants" && (

pkg/interface/src/views/landscape/components/Resource.tsx

@@ -52,7 +52,12 @@ export function Resource(props: ResourceProps) {
       <Route
         path={relativePath("")}
         render={(routeProps) => (
-          <ResourceSkeleton baseUrl={props.baseUrl} {...skelProps} atRoot>
+          <ResourceSkeleton
+            notificationsGraphConfig={props.notificationsGraphConfig}
+            baseUrl={props.baseUrl}
+            {...skelProps} 
+            atRoot
+          >
             {app === "chat" ? (
               <ChatResource {...props} />
             ) : app === "publish" ? (

pkg/interface/src/views/landscape/components/ResourceSkeleton.tsx

@@ -6,13 +6,14 @@ import { Link } from "react-router-dom";
 import { ChatResource } from "~/views/apps/chat/ChatResource";
 import { PublishResource } from "~/views/apps/publish/PublishResource";
 
-import RichText from '~/views/components/RichText';
+import RichText from "~/views/components/RichText";
 
 import { Association } from "~/types/metadata-update";
 import GlobalApi from "~/logic/api/global";
 import { RouteComponentProps, Route, Switch } from "react-router-dom";
 import { ChannelSettings } from "./ChannelSettings";
 import { ChannelMenu } from "./ChannelMenu";
+import { NotificationGraphConfig } from "~/types";
 
 const TruncatedBox = styled(Box)`
   white-space: nowrap;
@@ -22,6 +23,7 @@ const TruncatedBox = styled(Box)`
 
 type ResourceSkeletonProps = {
   association: Association;
+  notificationsGraphConfig: NotificationGraphConfig;
   api: GlobalApi;
   baseUrl: string;
   children: ReactNode;
@@ -33,13 +35,14 @@ export function ResourceSkeleton(props: ResourceSkeletonProps) {
   const { association, api, baseUrl, children, atRoot } = props;
   const app = association?.metadata?.module || association["app-name"];
   const appPath = association["app-path"];
-  const workspace = (baseUrl === '/~landscape/home') ? '/home' : association["group-path"];
+  const workspace =
+    baseUrl === "/~landscape/home" ? "/home" : association["group-path"];
   const title = props.title || association?.metadata?.title;
   const disableRemoteContent = {
     audioShown: false,
     imageShown: false,
     oembedShown: false,
-    videoShown: false
+    videoShown: false,
   };
   return (
     <Col width="100%" height="100%" overflowY="hidden">
@@ -63,11 +66,7 @@ export function ResourceSkeleton(props: ResourceSkeletonProps) {
             <Link to={`/~landscape${workspace}`}> {"<- Back"}</Link>
           </Box>
         ) : (
-          <Box
-            color="blue"
-            pr={2}
-            mr={2}
-          >
+          <Box color="blue" pr={2} mr={2}>
             <Link to={`/~landscape${workspace}/resource/${app}${appPath}`}>
               <Text color="blue">Go back to channel</Text>
             </Link>
@@ -77,22 +76,33 @@ export function ResourceSkeleton(props: ResourceSkeletonProps) {
         {atRoot && (
           <>
             <Box pr={1} mr={2}>
-              <Text display='inline-block' verticalAlign='middle'>{title}</Text>
+              <Text display="inline-block" verticalAlign="middle">
+                {title}
+              </Text>
             </Box>
             <TruncatedBox
               display={["none", "block"]}
               maxWidth="60%"
-              verticalAlign='middle'
+              verticalAlign="middle"
               flexShrink={1}
               title={association?.metadata?.description}
               color="gray"
             >
-              <RichText color='gray' remoteContentPolicy={disableRemoteContent} mb='0' display='inline-block'>
-              {association?.metadata?.description}
+              <RichText
+                color="gray"
+                remoteContentPolicy={disableRemoteContent}
+                mb="0"
+                display="inline-block"
+              >
+                {association?.metadata?.description}
               </RichText>
             </TruncatedBox>
             <Box flexGrow={1} />
-            <ChannelMenu association={association} api={api} />
+            <ChannelMenu
+              notificationConfig={props.notificationsGraphConfig}
+              association={association}
+              api={api}
+            />
           </>
         )}
       </Box>

pkg/interface/src/views/themes/light.ts

@@ -20,6 +20,7 @@ const scales = {
   white80: "rgba(255,255,255,0.8)",
   white90: "rgba(255,255,255,0.9)",
   white100: "rgba(255,255,255,1)",
+  black05: "rgba(0,0,0,0.05)",
   black10: "rgba(0,0,0,0.1)",
   black20: "rgba(0,0,0,0.2)",
   black30: "rgba(0,0,0,0.3)",