hark-fe: add read all button

pkg/arvo/lib/hark/store.hoon

@@ -76,6 +76,7 @@
         set-dnd+bo
         read-count+stats-index
         read-each+read-graph-index
+        read-all+ul
     ==
   --
 ::

pkg/interface/src/logic/api/hark.ts

@@ -109,6 +109,9 @@ export class HarkApi extends BaseApi<StoreState> {
   seen() {
     return this.harkAction({ seen: null });
   }
+  readAll() {
+    return this.harkAction({ 'read-all': null });
+  }
 
   mute(notif: IndexedNotification) {
     if('graph' in notif.index && 'graph' in notif.notification.contents) {

pkg/interface/src/views/apps/notifications/notifications.tsx

@@ -40,6 +40,9 @@ export default function NotificationsScreen(props: any) {
   const onSubmit = async (values: { groups: string }) => {
     setFilter({ groups: values.groups ? [values.groups] : [] });
   };
+  const onReadAll = useCallback(() => {
+    props.api.hark.readAll()
+  }, []);
   const groupFilterDesc =
     filter.groups.length === 0
       ? "All"
@@ -81,39 +84,53 @@ export default function NotificationsScreen(props: any) {
                         </HeaderLink>
                       </Box>
                     </Row>
-                    <Dropdown
+                    <Row
-                      alignX="right"
+                      justifyContent="space-between">
-                      alignY="top"
+                      <Box
-                      options={
+                        mr="1"
-                        <Col
+                        overflow="hidden"
-                          p="2"
+                        onClick={onReadAll}
-                          backgroundColor="white"
+                        cursor="pointer"
-                          border={1}
+                      >
-                          borderRadius={1}
+                          <Text mr="1" color="blue">
-                          borderColor="lightGray"
+                            Mark All Read
-                          gapY="2"
-                        >
-                          <FormikOnBlur
-                            initialValues={filter}
-                            onSubmit={onSubmit}
-                          >
-                            <GroupSearch
-                              id="groups"
-                              label="Filter Groups"
-                              caption="Only show notifications from this group"
-                              associations={props.associations}
-                            />
-                          </FormikOnBlur>
-                        </Col>
-                      }
-                    >
-                      <Box>
-                        <Text mr="1" gray>
-                          Filter:
                         </Text>
-                        <Text>{groupFilterDesc}</Text>
                       </Box>
-                    </Dropdown>
+
+                      <Dropdown
+                        alignX="right"
+                        alignY="top"
+                        options={
+                          <Col
+                            p="2"
+                            backgroundColor="white"
+                            border={1}
+                            borderRadius={1}
+                            borderColor="lightGray"
+                            gapY="2"
+                          >
+                            <FormikOnBlur
+                              initialValues={filter}
+                              onSubmit={onSubmit}
+                            >
+                              <GroupSearch
+                                id="groups"
+                                label="Filter Groups"
+                                caption="Only show notifications from this group"
+                                associations={props.associations}
+                              />
+                            </FormikOnBlur>
+                          </Col>
+                        }
+                      >
+                        <Box>
+                          <Text mr="1" gray>
+                            Filter:
+                        </Text>
+                          <Text>{groupFilterDesc}</Text>
+                        </Box>
+                      </Dropdown>
+                    </Row>
                   </Row>
                   {view === "preferences" && (
                     <NotificationPreferences