publish: move 'new post' to header

pkg/interface/src/views/apps/publish/components/Notebook.tsx

@@ -1,10 +1,9 @@
 import React from "react";
-import { Link, RouteComponentProps } from "react-router-dom";
+import { RouteComponentProps } from "react-router-dom";
 import { NotebookPosts } from "./NotebookPosts";
-import { Box, Button, Text, Row, Col } from "@tlon/indigo-react";
+import { Col } from "@tlon/indigo-react";
 import GlobalApi from "~/logic/api/global";
 import { Contacts, Rolodex, Groups, Associations, Graph, Association, Unreads } from "~/types";
-import { useShowNickname } from "~/logic/lib/util";
 
 interface NotebookProps {
   api: GlobalApi;
@@ -30,44 +29,14 @@ export function Notebook(props: NotebookProps & RouteComponentProps) {
     association,
     graph
   } = props;
-  const { metadata } = association;
 
   const group = groups[association?.['group-path']];
   if (!group) {
     return null; // Waiting on groups to populate
   }
 
-  const relativePath = (p: string) => props.baseUrl + p;
-
-  const contact = notebookContacts?.[ship];
-  const isOwn = `~${window.ship}` === ship;
-  let isWriter = true;
-
-  if (group.tags?.publish?.[`writers-${book}`]) {
-    isWriter = isOwn || group.tags?.publish?.[`writers-${book}`]?.has(window.ship);
-  }
-
-  const showNickname = useShowNickname(contact);
-
   return (
     <Col gapY="4" pt={4} mx="auto" px={3} maxWidth="768px">
-      <Row justifyContent="space-between">
-        <Box>
-          <Text display='block'>{metadata?.title}</Text>
-          <Text color="lightGray">by </Text>
-          <Text fontFamily={showNickname ? 'sans' : 'mono'}>
-            {showNickname ? contact?.nickname : ship}
-          </Text>
-        </Box>
-        {isWriter && (
-          <Link to={relativePath('/new')} style={{ flexShrink: '0' }}>
-            <Button primary style={{ cursor: 'pointer' }}>
-              New Post
-            </Button>
-          </Link>
-        )}
-      </Row>
-      <Box borderBottom="1" borderBottomColor="washedGray" />
       <NotebookPosts
         graph={graph}
         host={ship}

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

@@ -52,6 +52,7 @@ export function Resource(props: ResourceProps) {
             return (
               <ResourceSkeleton
                 baseUrl={props.baseUrl}
+                groupTags={props.groups?.[selectedGroup]?.tags}
                 {...skelProps}
               >
                 <ChannelSettings
@@ -72,6 +73,7 @@ export function Resource(props: ResourceProps) {
               notificationsGraphConfig={props.notificationsGraphConfig}
               notificationsChatConfig={props.notificationsChatConfig}
               baseUrl={props.baseUrl}
+              groupTags={props.groups?.[selectedGroup]?.tags}
               {...skelProps}
               atRoot
             >

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

@@ -16,7 +16,7 @@ import { ChannelMenu } from "./ChannelMenu";
 import { NotificationGraphConfig } from "~/types";
 
 const TruncatedBox = styled(Box)`
-  white-space: nowrap;
+  white-space: pre;
   text-overflow: ellipsis;
   overflow: hidden;
 `;
@@ -29,15 +29,28 @@ type ResourceSkeletonProps = {
   children: ReactNode;
   atRoot?: boolean;
   title?: string;
+  groupTags?: any;
 };
 
 export function ResourceSkeleton(props: ResourceSkeletonProps) {
-  const { association, api, baseUrl, children, atRoot } = props;
+  const { association, api, baseUrl, children, atRoot, groupTags } = props;
   const app = association?.metadata?.module || association["app-name"];
   const appPath = association["app-path"];
   const workspace =
     baseUrl === "/~landscape/home" ? "/home" : association["group-path"];
   const title = props.title || association?.metadata?.title;
+
+  const [, , ship, resource] = appPath.split("/");
+
+  const resourcePath = (p: string) => baseUrl + `/resource/${app}/ship/${ship}/${resource}` + p;
+
+  const isOwn = `~${window.ship}` === ship;
+  let isWriter = (app === 'publish') ? true : false;
+
+  if (groupTags?.publish?.[`writers-${resource}`]) {
+    isWriter = isOwn || groupTags?.publish?.[`writers-${resource}`]?.has(window.ship);
+  }
+
   return (
     <Col width="100%" height="100%" overflowY="hidden">
       <Box
@@ -79,8 +92,8 @@ export function ResourceSkeleton(props: ResourceSkeletonProps) {
             </Box>
             <TruncatedBox
               display={["none", "block"]}
-              maxWidth="60%"
               verticalAlign="middle"
+              maxWidth='60%'
               flexShrink={1}
               title={association?.metadata?.description}
               color="gray"
@@ -95,6 +108,11 @@ export function ResourceSkeleton(props: ResourceSkeletonProps) {
               </RichText>
             </TruncatedBox>
             <Box flexGrow={1} />
+            {isWriter && (
+              <Link to={resourcePath('/new')} style={{ flexShrink: '0' }}>
+                <Text bold pr='3' color='blue'>+ New Post</Text>
+              </Link>
+            )}
             <ChannelMenu
               graphNotificationConfig={props.notificationsGraphConfig}
               chatNotificationConfig={props.notificationsChatConfig}