launch: remove stale tiles

pkg/arvo/app/launch.hoon

@@ -53,7 +53,9 @@
   ^-  (quip card _this)
   =/  old-state  !<(versioned-state old)
   |-
-  ?:  ?&(=(1 2) ?=(?(%4 %5) -.old-state))
+  ?:  ?=(%5 -.old-state)
+    `this(state old-state)
+  ?:  ?=(%4 -.old-state)
     :-  [%pass / %arvo %e %disconnect [~ /]]~
     =.  tiles.old-state
       (~(del by tiles.old-state) %chat)

pkg/interface/src/views/apps/launch/app.js

@@ -2,14 +2,33 @@ import React from 'react';
 import Helmet from 'react-helmet';
 import { Link } from 'react-router-dom';
 
-import { Box, Row, Icon, Text } from '@tlon/indigo-react';
+import { Box, Row, Icon, Text, Center } from '@tlon/indigo-react';
+import { uxToHex } from "~/logic/lib/util";
 
 import './css/custom.css';
 
+import { Sigil } from "~/logic/lib/sigil";
 import Tiles from './components/tiles';
 import Welcome from './components/welcome';
 import Groups from './components/Groups';
 
+const Tile = ({ children, bg, to, borderRadius = 1, ...rest }) => (
+  <Box 
+    m={2}
+    bg="white"
+    width="126px"
+    height="126px"
+    borderRadius={borderRadius}
+    overflow="hidden"
+    {...rest}>
+    <Link to={to}>
+      <Box p={2} bg={bg} width="100%" height="100%">
+        {children}
+      </Box>
+    </Link>
+  </Box>
+);
+
 export default class LaunchApp extends React.Component {
 
   componentDidMount() {
@@ -20,6 +39,13 @@ export default class LaunchApp extends React.Component {
 
   render() {
     const { props } = this;
+    const contact = props.contacts?.['/~/default']?.[window.ship];
+    const sigilColor = contact?.color
+      ? `#${uxToHex(contact.color)}`
+      : props.dark
+      ? "#FFFFFF"
+      : "#000000";
+
 
     return (
       <>
@@ -29,28 +55,31 @@ export default class LaunchApp extends React.Component {
         <div className="h-100 flex flex-column h-100">
           <Welcome firstTime={props.launch.firstTime} api={props.api} />
           <Row flexWrap="wrap" mb={4} pitch={4}>
-            <Box 
+            <Tile
               border={1}
               borderRadius={1}
-              borderColor="lightGray"
-              m={2}
-              bg="white"
-              width="126px"
-              height="126px"
+              bg="washedGreen"
+              borderColor="green"
+              to="/~groups/home"
             >
-              <Link to='/~groups/home'>
-                <Box p={2} bg="washedGreen" width="100%" height="100%">
-                  <Row alignItems="center">
-                    <Icon
-                      stroke="green"
-                      fill="rgba(0,0,0,0)"
-                      icon="Circle" 
-                    />
-                    <Text ml="1" color="green">Home</Text>
-                  </Row>
-                </Box>
-              </Link>
-            </Box>
+              <Row alignItems="center">
+                <Icon
+                  stroke="green"
+                  fill="rgba(0,0,0,0)"
+                  icon="Circle" 
+                />
+                <Text ml="1" color="green">Home</Text>
+              </Row>
+            </Tile>
+            <Tile
+              bg={sigilColor}
+              to="/~profile"
+              borderRadius="3"
+            >
+              <Center height="100%">
+                <Sigil ship={`~${window.ship}`} size={80} color={sigilColor} />
+              </Center>
+            </Tile>
             <Tiles
               tiles={props.launch.tiles}
               tileOrdering={props.launch.tileOrdering}

pkg/interface/src/views/apps/launch/components/Groups.tsx

@@ -12,21 +12,28 @@ interface GroupsProps {
 
 // Sort by recent, then by channel size? Should probably sort
 // by num unreads when notif-store drops
-const sortGroups = (_assocs: Associations, recent: string[]) => (
+const sortGroupsRecent = (recent: string[]) => (
   a: Association,
   b: Association
 ) => {
-  return alphabeticalOrder(a.metadata.title, b.metadata.title);
   //
   const aRecency = recent.findIndex((r) => a["group-path"] === r);
   const bRecency = recent.findIndex((r) => b["group-path"] === r);
-  const diff =
-    ((aRecency !== -1 || bRecency !== -1) && bRecency - aRecency) || 0;
-  if (diff !== 0) {
-    return diff;
+  if(aRecency === -1) {
+    if(bRecency === -1) {
+      return 0;
+    }
+    return 1;
   }
+  if(bRecency === -1) {
+    return -1;
+  }
+  return Math.max(0,bRecency) - Math.max(0, aRecency);
 };
 
+const sortGroupsAlph = (a: Association, b: Association) => 
+  alphabeticalOrder(a.metadata.title, b.metadata.title);
+
 export default function Groups(props: GroupsProps & Parameters<typeof Box>[0]) {
   const { associations, ...boxProps } = props;
   const [recentGroups, setRecentGroups] = useLocalStorageState<string[]>(
@@ -34,20 +41,19 @@ export default function Groups(props: GroupsProps & Parameters<typeof Box>[0]) {
     []
   );
 
-  const groups = Object.values(props?.associations?.contacts || {}).sort(
-    sortGroups(props.associations, recentGroups)
-  );
+  const groups = Object.values(props?.associations?.contacts || {})
+    .sort(sortGroupsAlph)
+    .sort(sortGroupsRecent(recentGroups))
+    .slice(0,5);
 
   return (
     <Box
+      {...boxProps}
       display="grid"
       gridAutoRows="124px"
-      gridAutoColumns="124px"
+      gridTemplateColumns="repeat(auto-fit, 124px)"
       gridGap={3}
       p={2}
-      width="100%"
-      gridAutoFlow="column"
-      {...boxProps}
     >
       {groups.map((group) => (
         <Link to={`/~groups${group["group-path"]}`}>