publish: further refactor for groups changes

pkg/interface/package-lock.json

@@ -1709,9 +1709,8 @@
       "integrity": "sha512-3OPSdf9cejP/TSzWXuBaYbzLtAfBzQnc75SlPLkoPfwpxnv1Bvy9hiWngLY0WnKRR6lMOldnkYQCCuNWeDibYQ=="
     },
     "@tlon/indigo-react": {
-      "version": "1.2.6",
-      "resolved": "https://registry.npmjs.org/@tlon/indigo-react/-/indigo-react-1.2.6.tgz",
-      "integrity": "sha512-Dng+OfQ6ViMrdJXtQvgsVrW9vglPGUmbv0ffi2MSwLfe6FhUdL1CHoOjGxm4pATLOou53Kqcrt4g1Svw7y9THw==",
+      "version": "github:urbit/indigo-react#30c04b3369076ef8086d4f479a890500a1263510",
+      "from": "github:urbit/indigo-react#lf/1.2.8",
       "requires": {
         "@reach/menu-button": "^0.10.5",
         "react": "^16.13.1",

pkg/interface/src/logic/lib/useLocalStorageState.ts

@@ -27,9 +27,9 @@ export function useLocalStorageState<T>(key: string, initial: T) {
     (s: SetState<T>) => {
       const updated = typeof s === "function" ? s(state) : s;
       _setState(updated);
-      localStorage.setItem(key, JSON.stringify(s));
+      localStorage.setItem(key, JSON.stringify(updated));
     },
-    [_setState]
+    [_setState, key, state]
   );
 
   return [state, setState] as const;

pkg/interface/src/logic/subscription/global.ts

@@ -15,7 +15,7 @@ const chatSubscriptions: AppSubscription[] = [
 ];
 
 const publishSubscriptions: AppSubscription[] = [
-//  ['/primary', 'publish'],
+  ['/primary', 'publish'],
 ];
 
 const linkSubscriptions: AppSubscription[] = [

pkg/interface/src/views/apps/groups/components/Participants.tsx

@@ -1,6 +1,14 @@
 import React, { useState, useMemo, SyntheticEvent, ChangeEvent } from "react";
-import { Col, Box, Row, Text, Icon, Center, Button } from "@tlon/indigo-react";
-import styled from "styled-components";
+import {
+  Col,
+  Box,
+  Row,
+  Text,
+  Icon,
+  Center,
+  Button,
+  Action,
+} from "@tlon/indigo-react";
 import _ from "lodash";
 import { Contact, Contacts } from "~/types/contact-update";
 import { Sigil } from "~/logic/lib/sigil";
@@ -22,10 +30,6 @@ const searchParticipant = (search: string) => (p: Participant) => {
   return p.patp.includes(s) || p.nickname.toLowerCase().includes(search);
 };
 
-const UnmanagedInput = styled.input`
-  width: 100%;
-`;
-
 const emptyContact = (patp: string, pending: boolean): Participant => ({
   nickname: "",
   email: "",
@@ -113,6 +117,7 @@ export function Participants(props: {
         top="0px"
         mb={2}
         px={2}
+        zIndex={1}
       >
         <Row>
           <Tab
@@ -136,7 +141,6 @@ export function Participants(props: {
             label={`${adminCount} Admin${adminCount > 1 ? "s" : ""}`}
           />
         </Row>
-        <UnmanagedInput value={search} onChange={setSearch} />
       </Row>
       <Box
         display="grid"
@@ -190,7 +194,11 @@ function Participant(props: {
           {cite(contact.patp)}
         </Text>
       </Col>
-      <Box display="flex" gridColumn={["1 / 3", "auto"]} alignItems="center">
+      <Row
+        width="100%"
+        justifyContent="space-between"
+        gridColumn={["1 / 3", "auto"]}
+        alignItems="center">
         <Col>
           <Text mb={1} color="lightGray">
             Role
@@ -201,22 +209,22 @@ function Participant(props: {
           alignX="right"
           alignY="top"
           options={
-            <>
-              <Button onClick={sendMessage}>
+            <Col gapY={1} p={2}>
+              <Action onClick={sendMessage}>
                 <Text color="green">Send Message</Text>
-              </Button>
+              </Action>
               {isInvite && (
-                <Button onClick={() => {}}>
+                <Action onClick={() => {}}>
                   <Text color="red">Ban from {title}</Text>
-                </Button>
+                </Action>
               )}
-              <Button onSelect={() => {}}>Promote to Admin</Button>
-            </>
+              <Action onSelect={() => {}}>Promote to Admin</Action>
+            </Col>
           }
         >
           <Icon mr={2} icon="Ellipsis" />
         </Dropdown>
-      </Box>
+      </Row>
       <Box
         borderBottom={1}
         borderBottomColor="washedGray"

pkg/interface/src/views/apps/publish/components/lib/NotebookPosts.tsx

@@ -20,7 +20,6 @@ export function NotebookPosts(props: NotebookPostsProps) {
       {props.list.map((noteId: NoteId) => {
         const note = props.notes[noteId];
         if (!note) {
-          console.log(noteId);
           return null;
         }
         return (

pkg/interface/src/views/apps/publish/components/lib/Sidebar.tsx

@@ -1,7 +1,7 @@
 import React, { Component } from "react";
 import { Box, Text, Col } from "@tlon/indigo-react";
 import { Link } from "react-router-dom";
-import SidebarInvite from "~/views/components/SidebarInvite";
+import SidebarInvite from "~/views/components/Sidebar/SidebarInvite";
 import { Welcome } from "./Welcome";
 import { GroupItem } from "./GroupItem";
 import { alphabetiseAssociations } from "~/logic/lib/util";