Merge pull request #4414 from urbit/lf/interface-stuff

interface: QA fixes

pkg/interface/src/logic/lib/omnibox.js

@@ -1,4 +1,5 @@
 import { cite } from '~/logic/lib/util';
+import { isChannelAdmin } from '~/logic/lib/group';
 
   const indexes = new Map([
     ['ships', []],
@@ -27,13 +28,21 @@ const shipIndex = function(contacts) {
   return ships;
 };
 
-const commandIndex = function (currentGroup) {
+const commandIndex = function (currentGroup, groups, associations) {
   // commands are special cased for default suite
   const commands = [];
+  const group = currentGroup ? groups[currentGroup] : null;
+  const association = currentGroup ? associations?.groups?.[currentGroup] : null;
+  const canAdd = 
+    (group && association) 
+    ? (association.metadata.vip === 'member-metadata' || isChannelAdmin(group, currentGroup))
+    : !currentGroup; // home workspace or hasn't loaded
   const workspace = currentGroup || '/home';
   commands.push(result(`Groups: Create`, `/~landscape/new`, 'Groups', null));
   commands.push(result(`Groups: Join`, `/~landscape/join`, 'Groups', null));
-  commands.push(result(`Channel: Create`, `/~landscape${workspace}/new`, 'Groups', null));
+  if(canAdd) {
+    commands.push(result(`Channel: Create`, `/~landscape${workspace}/new`, 'Groups', null));
+  }
 
   return commands;
 };
@@ -127,7 +136,7 @@ export default function index(contacts, associations, apps, currentGroup, groups
       });
   });
 
-  indexes.set('commands', commandIndex(currentGroup));
+  indexes.set('commands', commandIndex(currentGroup, groups, associations));
   indexes.set('subscriptions', subscriptions);
   indexes.set('groups', landscape);
   indexes.set('apps', appIndex(apps));

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

@@ -230,6 +230,11 @@ export function alphabeticalOrder(a: string, b: string) {
   return a.toLowerCase().localeCompare(b.toLowerCase());
 }
 
+export function lengthOrder(a: string, b: string) {
+  return b.length - a.length;
+
+}
+
 //  TODO: deprecated
 export function alphabetiseAssociations(associations: any) {
   const result = {};

pkg/interface/src/views/apps/chat/components/ChatMessage.tsx

@@ -496,7 +496,7 @@ export const MessageContent = ({
         group={group}
         scrollWindow={scrollWindow}
         ship={content.mention}
-        contact={contacts?.[content.mention]}
+        contact={contacts?.[`~${content.mention}`]}
       />
     );
   } else {

pkg/interface/src/views/apps/chat/components/content/text.js

@@ -85,8 +85,6 @@ export default function TextContent(props) {
     && (urbitOb.isValidPatp(group[2]) // valid patp?
     && (group[0] === content.text))) // entire message is room name?
 
-  console.log(isGroupLink);
-
   if(isGroupLink) { 
     const resource = `/ship/${content.text}`;
     return (

pkg/interface/src/views/apps/profile/components/Profile.tsx

@@ -50,7 +50,7 @@ export function Profile(props: any) {
 
   return (
     <Center
-      p={4}
+      p={[0,4]}
       height="100%"
       width="100%">
       <Box

pkg/interface/src/views/apps/profile/components/ViewProfile.tsx

@@ -17,6 +17,7 @@ import { useHistory } from "react-router-dom";
 import {GroupSummary} from "~/views/landscape/components/GroupSummary";
 import {MetadataUpdatePreview} from "~/types";
 import {GroupLink} from "~/views/components/GroupLink";
+import {lengthOrder} from "~/logic/lib/util";
 
 
 export function ViewProfile(props: any) {
@@ -54,22 +55,6 @@ export function ViewProfile(props: any) {
           </RichText>
           </Center>
         </Col>
-      { (contact?.groups || []).length > 0 && (
-        <Col gapY="3" my="3" alignItems="center">
-          <Text fontWeight="medium">Pinned Groups</Text>
-          <Row flexWrap="wrap" justifyContent="center" gapX="3">
-            { contact?.groups.map(g => (
-              <GroupLink
-                api={api}
-                resource={g}
-                groups={groups}
-                associations={associations}
-                measure={() => {}}
-              />
-            ))}
-          </Row>
-      </Col>
-      )}
       { (ship === `~${window.ship}`) ? (
           <Row
             pb={2}
@@ -86,6 +71,24 @@ export function ViewProfile(props: any) {
           </Row>
         ) : null
       }
+      { (contact?.groups || []).length > 0 && (
+        <Col gapY="3" mb="3" mt="6" alignItems="flex-start">
+          <Text fontWeight="medium">Pinned Groups</Text>
+          <Row flexWrap="wrap" justifyContent="flex-start" gapX="3">
+            { contact?.groups.sort(lengthOrder).map(g => (
+              <GroupLink
+                mb="3"
+                api={api}
+                resource={g}
+                groups={groups}
+                associations={associations}
+                measure={() => {}}
+              />
+            ))}
+          </Row>
+      </Col>
+      )}
+      
       { (nacked || (!isPublic && ship === `~${window.ship}`)) ? (
         <Box
           height="200px"

pkg/interface/src/views/landscape/components/ChannelPopoverRoutes/Sidebar.tsx

@@ -14,6 +14,7 @@ export function ChannelPopoverRoutesSidebar(props: {
 
   return (
     <Col
+      display={["none", "flex-column"]}
       minWidth="200px"
       borderRight="1"
       borderRightColor="washedGray"

pkg/interface/src/views/landscape/components/ChannelPopoverRoutes/index.tsx

@@ -14,7 +14,7 @@ import {
 import GlobalApi from "~/logic/api/global";
 import { useHashLink } from "~/logic/lib/useHashLink";
 import { useOutsideClick } from "~/logic/lib/useOutsideClick";
-import { useHistory } from "react-router-dom";
+import { useHistory, Link } from "react-router-dom";
 import { ChannelNotifications } from "./Notifications";
 import { StatelessAsyncButton } from "~/views/components/StatelessAsyncButton";
 import { wait } from "~/logic/lib/util";
@@ -64,12 +64,18 @@ export function ChannelPopoverRoutes(props: ChannelPopoverRoutesProps) {
       ref={overlayRef}
     >
       <Row
+        flexDirection={["column", "row"]}
         border="1"
         borderColor="lightGray"
         borderRadius="2"
         bg="white"
         height="100%"
       >
+        <Box pt="4" px="4" display={["block", "none"]}>
+          <Link to={props.baseUrl}>
+            <Text fontSize="1">{"<- Back"}</Text>
+          </Link>
+        </Box>
         <ChannelPopoverRoutesSidebar
           isAdmin={canAdmin}
           isOwner={isOwner}