groups: sidebar restructure

pkg/interface/src/views/apps/groups/app.tsx

@@ -1,10 +1,11 @@
 import React, { Component } from 'react';
 import { Route, Switch } from 'react-router-dom';
-import Helmet from 'react-helmet';
+import { Box, Center } from '@tlon/indigo-react';
 
 import './css/custom.css';
 
 import { Skeleton } from './components/skeleton';
+import { Skeleton as NewSkeleton } from '~/views/components/Skeleton';
 import { NewScreen } from './components/new';
 import { ContactSidebar } from './components/lib/contact-sidebar';
 import { ContactCard } from './components/lib/contact-card';
@@ -12,10 +13,14 @@ import { AddScreen } from './components/lib/add-contact';
 import { JoinScreen } from './components/join';
 import GroupDetail from './components/lib/group-detail';
 
-import { PatpNoSig } from '~/types/noun';
+import { PatpNoSig, AppName } from '~/types/noun';
 import GlobalApi from '~/logic/api/global';
 import { StoreState } from '~/logic/store/type';
 import GlobalSubscription from '~/logic/subscription/global';
+import {Resource} from '~/views/components/Resource';
+import {PopoverRoutes} from './components/PopoverRoutes';
+import {UnjoinedResource} from '~/views/components/UnjoinedResource';
+import {GroupsPane} from '~/views/components/GroupsPane';
 
 
 type GroupsAppProps = StoreState & {
@@ -26,14 +31,18 @@ type GroupsAppProps = StoreState & {
 
 export default class GroupsApp extends Component<GroupsAppProps, {}> {
   componentDidMount() {
+    document.title = 'OS1 - Groups';
     // preload spinner asset
     new Image().src = '/~landscape/img/Spinner.png';
 
     this.props.subscription.startApp('groups')
+    this.props.subscription.startApp('chat')
+    
   }
 
   componentWillUnmount() {
     this.props.subscription.stopApp('groups')
+    this.props.subscription.stopApp('chat')
   }
 
 
@@ -55,10 +64,6 @@ export default class GroupsApp extends Component<GroupsAppProps, {}> {
 
 
     return (
-      <>
-        <Helmet>
-          <title>OS1 - Groups</title>
-        </Helmet>
         <Switch>
           <Route exact path="/~groups"
             render={(props) => {
@@ -131,7 +136,7 @@ export default class GroupsApp extends Component<GroupsAppProps, {}> {
               );
             }}
           />
-          <Route exact path="/~groups/(detail)?/(settings)?/ship/:ship/:group/"
+          <Route exact path="/~groups/dep/(detail)?/(settings)?/ship/:ship/:group/"
             render={(props) => {
               const groupPath =
                 `/ship/${props.match.params.ship}/${props.match.params.group}`;
@@ -278,6 +283,17 @@ export default class GroupsApp extends Component<GroupsAppProps, {}> {
               );
             }}
           />
+          <Route path="/~groups/ship/:host/:name"
+            render={routeProps => {
+              const { host, name } = routeProps.match.params as Record<string, string>;
+              const groupPath = `/ship/${host}/${name}`;
+              const baseUrl = `/~groups${groupPath}`;
+
+              return (
+                <GroupsPane baseUrl={baseUrl} groupPath={groupPath} {...props} />
+              )
+            }}/>
+
           <Route exact path="/~groups/view/ship/:ship/:group/:contact"
             render={(props) => {
               const groupPath =
@@ -333,8 +349,34 @@ export default class GroupsApp extends Component<GroupsAppProps, {}> {
               );
             }}
           />
+          <Route exact path="/~groups/me"
+            render={(props) => {
+              const me = defaultContacts[window.ship] || {};
+
+              return (
+                <Skeleton
+                  history={props.history}
+                  api={api}
+                  contacts={contacts}
+                  groups={groups}
+                  invites={invites}
+                  activeDrawer="rightPanel"
+                  selected="me"
+                  associations={associations}
+                >
+                  <ContactCard
+                    api={api}
+                    history={props.history}
+                    path="/~/default"
+                    contact={me}
+                    s3={s3}
+                    ship={window.ship}
+                  />
+                </Skeleton>
+              );
+            }}
+          />
         </Switch>
-      </>
     );
   }
 }

pkg/interface/src/views/apps/groups/components/lib/ContactCard.tsx

@@ -53,6 +53,16 @@ const formSchema = Yup.object({
   ),
 });
 
+const emptyContact = {
+  avatar: null,
+  color: '0',
+  nickname: '',
+  email: '',
+  phone: '',
+  website: '', 
+  notes: ''
+};
+
 export function ContactCard(props: ContactCardProps) {
   const us = `~${window.ship}`;
   const { contact } = props;
@@ -84,13 +94,13 @@ export function ContactCard(props: ContactCardProps) {
     }
   };
 
-  const hexColor = contact.color ? `#${uxToHex(contact.color)}` : "#000000";
+  const hexColor = contact?.color ? `#${uxToHex(contact.color)}` : "#000000";
 
   return (
     <Box p={4} height="100%" overflowY="auto">
       <Formik
         validationSchema={formSchema}
-        initialValues={contact}
+        initialValues={contact || emptyContact}
         onSubmit={onSubmit}
       >
         <Form>

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

@@ -1,7 +1,6 @@
 import React from "react";
 
 import { ChatResource } from "~/views/apps/chat/ChatResource";
-import { LinkResource } from "~/views/apps/links/LinkResource";
 import { PublishResource } from "~/views/apps/publish/PublishResource";
 
 import { Association } from "~/types/metadata-update";
@@ -26,7 +25,7 @@ export function Resource(props: ResourceProps) {
     return <PublishResource {...props} />;
   }
   if (app === 'link') {
-    return <LinkResource {...props} />; 
+    return null; //return <LinkResource {...props} />; 
   }
   return null;
 }