Merge pull request #4415 from urbit/lf/tutorial-fixes

Tutorial: bugfixes

pkg/interface/config/webpack.dev.js

@@ -122,9 +122,9 @@ module.exports = {
     new webpack.DefinePlugin({
       'process.env.TUTORIAL_HOST': JSON.stringify('~hastuc-dibtux'),
       'process.env.TUTORIAL_GROUP': JSON.stringify('beginner-island'),
-      'process.env.TUTORIAL_CHAT': JSON.stringify('chat-8401'),
+      'process.env.TUTORIAL_CHAT': JSON.stringify('chat-1704'),
-      'process.env.TUTORIAL_BOOK': JSON.stringify('notebook-9148'),
+      'process.env.TUTORIAL_BOOK': JSON.stringify('book-9695'),
-      'process.env.TUTORIAL_LINKS': JSON.stringify('link-4353'),
+      'process.env.TUTORIAL_LINKS': JSON.stringify('link-2827'),
     })
 
     // new CleanWebpackPlugin(),

pkg/interface/src/logic/api/settings.ts

@@ -32,7 +32,7 @@ export default class SettingsApi extends BaseApi<StoreState> {
   }
 
   putEntry(buc: Key, key: Key, val: Value) {
-    this.storeAction({
+    return this.storeAction({
       "put-entry": {
         "bucket-key": buc,
         "entry-key": key,

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

@@ -33,16 +33,17 @@ const commandIndex = function (currentGroup, groups, associations) {
   const commands = [];
   const group = currentGroup ? groups[currentGroup] : null;
   const association = currentGroup ? associations?.groups?.[currentGroup] : null;
-  const canAdd = 
+  const canAdd =
-    (group && association) 
+    (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));
+  if (canAdd) {
-  if(canAdd) {
     commands.push(result(`Channel: Create`, `/~landscape${workspace}/new`, 'Groups', null));
   }
+  commands.push(result(`Groups: Join`, `/~landscape/join`, 'Groups', null));
+  commands.push(result(`Tutorial`, '/?tutorial=true', 'Null', null));
 
   return commands;
 };

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

@@ -1,8 +1,9 @@
 import { TutorialProgress, Associations } from "~/types";
 import { AlignX, AlignY } from "~/logic/lib/relativePosition";
+import { Direction } from "~/views/components/Triangle";
 
 export const MODAL_WIDTH = 256;
-export const MODAL_HEIGHT = 180;
+export const MODAL_HEIGHT = 256;
 export const MODAL_WIDTH_PX = `${MODAL_WIDTH}px`;
 export const MODAL_HEIGHT_PX = `${MODAL_HEIGHT}px`;
 
@@ -20,6 +21,7 @@ interface StepDetail {
   alignY: AlignY | AlignY[];
   offsetX: number;
   offsetY: number;
+  arrow: Direction;
 }
 
 export function hasTutorialGroup(props: { associations: Associations }) {
@@ -28,8 +30,36 @@ export function hasTutorialGroup(props: { associations: Associations }) {
   );
 }
 
+export const getTrianglePosition = (dir: Direction) => {
+  const midY = `${MODAL_HEIGHT / 2 - 8}px`;
+  const midX = `${MODAL_WIDTH / 2 - 8}px`;
+  switch(dir) {
+  case 'East':
+    return {
+      top: midY,
+      right: '-32px'
+    };
+    case 'West':
+      return {
+        top: midY,
+        left: '-32px'
+      }
+    case 'North':
+      return {
+        top: '-32px',
+        left: midX
+      };
+    case 'South':
+      return {
+        bottom: '-32px',
+        left: midX
+      };
+  }
+}
+
 export const progressDetails: Record<TutorialProgress, StepDetail> = {
   hidden: {} as any,
+  exit: {} as any,
   done: {
     title: "End",
     description:
@@ -41,14 +71,15 @@ export const progressDetails: Record<TutorialProgress, StepDetail> = {
     offsetY: 0,
   },
   start: {
-    title: "New group added",
+    title: "New Group added",
     description:
       "We just added you to the Beginner island group to show you around. This group is public, but other groups can be private",
     url: "/",
     alignX: "right",
     alignY: "top",
-    offsetX: MODAL_WIDTH + 8,
+    arrow: "West",
-    offsetY: 0,
+    offsetX: MODAL_WIDTH + 24,
+    offsetY: 64,
   },
   "group-desc": {
     title: "What's a group",
@@ -57,7 +88,8 @@ export const progressDetails: Record<TutorialProgress, StepDetail> = {
     url: `/~landscape/ship/${TUTORIAL_HOST}/${TUTORIAL_GROUP}`,
     alignX: "left",
     alignY: "top",
-    offsetX: MODAL_WIDTH + 8,
+    arrow: "East",
+    offsetX: MODAL_WIDTH + 24,
     offsetY: MODAL_HEIGHT / 2 - 8,
   },
   channels: {
@@ -67,7 +99,8 @@ export const progressDetails: Record<TutorialProgress, StepDetail> = {
     url: `/~landscape/ship/${TUTORIAL_HOST}/${TUTORIAL_GROUP}`,
     alignY: "top",
     alignX: "right",
-    offsetX: MODAL_WIDTH + 8,
+    arrow: "West",
+    offsetX: MODAL_WIDTH + 24,
     offsetY: -8,
   },
   chat: {
@@ -76,9 +109,10 @@ export const progressDetails: Record<TutorialProgress, StepDetail> = {
       "Chat channels are for messaging within your group. Direct Messages are also supported, and are accessible from the “DMs” tile on the homescreen",
     url: `/~landscape/ship/${TUTORIAL_HOST}/${TUTORIAL_GROUP}/resource/chat/ship/${TUTORIAL_HOST}/${TUTORIAL_CHAT}`,
     alignY: "top",
+    arrow: "North",
     alignX: "right",
-    offsetX: 0,
+    offsetY: -56,
-    offsetY: -32,
+    offsetX: -8,
   },
   link: {
     title: "Collection",
@@ -87,8 +121,9 @@ export const progressDetails: Record<TutorialProgress, StepDetail> = {
     url: `/~landscape/ship/${TUTORIAL_HOST}/${TUTORIAL_GROUP}/resource/link/ship/${TUTORIAL_HOST}/${TUTORIAL_LINKS}`,
     alignY: "top",
     alignX: "right",
-    offsetX: 0,
+    arrow: "North",
-    offsetY: -32,
+    offsetX: -8,
+    offsetY: -56,
   },
   publish: {
     title: "Notebook",
@@ -97,18 +132,19 @@ export const progressDetails: Record<TutorialProgress, StepDetail> = {
     url: `/~landscape/ship/${TUTORIAL_HOST}/${TUTORIAL_GROUP}/resource/publish/ship/${TUTORIAL_HOST}/${TUTORIAL_BOOK}`,
     alignY: "top",
     alignX: "right",
-    offsetX: 0,
+    arrow: "North",
-    offsetY: -32,
+    offsetX: -8,
+    offsetY: -56,
   },
   notifications: {
     title: "Notifications",
-    description:
+    description: "You will get updates from subscribed channels and mentions here. You can access Notifications through Leap.",
-      "Subscribing to a channel will send you notifications when there are new updates. You will also receive a notification when someone mentions your name in a channel.",
+    url: '/~notifications',
-    url: `/~landscape/ship/${TUTORIAL_HOST}/${TUTORIAL_GROUP}/resource/publish/ship/${TUTORIAL_HOST}/${TUTORIAL_BOOK}/settings#notifications`,
     alignY: "top",
-    alignX: "right",
+    alignX: "left",
-    offsetX: 0,
+    arrow: "North",
-    offsetY: -32,
+    offsetX: (MODAL_WIDTH / 2) - 16,
+    offsetY: -48,
   },
   profile: {
     title: "Profile",
@@ -117,6 +153,7 @@ export const progressDetails: Record<TutorialProgress, StepDetail> = {
     url: `/~profile/~${window.ship}`,
     alignY: "top",
     alignX: "right",
+    arrow: "South",
     offsetX: -300 + MODAL_WIDTH / 2,
     offsetY: -120 + MODAL_HEIGHT / 2,
   },
@@ -127,7 +164,8 @@ export const progressDetails: Record<TutorialProgress, StepDetail> = {
     url: `/~profile/~${window.ship}`,
     alignY: "top",
     alignX: "left",
-    offsetX: 0,
+    arrow: "North",
-    offsetY: -32,
+    offsetX: 0.3 *MODAL_HEIGHT,
+    offsetY: -48,
   },
 };

pkg/interface/src/logic/lib/useModal.tsx

@@ -12,6 +12,8 @@ import { Box } from "@tlon/indigo-react";
 import { useOutsideClick } from "./useOutsideClick";
 import { ModalOverlay } from "~/views/components/ModalOverlay";
 import {Portal} from "~/views/components/Portal";
+import {ModalPortal} from "~/views/components/ModalPortal";
+import {PropFunc} from "~/types";
 
 type ModalFunc = (dismiss: () => void) => JSX.Element;
 interface UseModalProps {
@@ -23,7 +25,8 @@ interface UseModalResult {
   showModal: () => void;
 }
 
-export function useModal(props: UseModalProps): UseModalResult {
+export function useModal(props: UseModalProps & PropFunc<typeof Box>): UseModalResult {
+  const { modal, ...rest } = props;
   const innerRef = useRef<HTMLElement>();
   const [modalShown, setModalShown] = useState(false);
 
@@ -39,15 +42,13 @@ export function useModal(props: UseModalProps): UseModalResult {
     () =>
       !modalShown
         ? null
-        : typeof props.modal === "function"
+        : typeof modal === "function"
-        ? props.modal(dismiss)
+        ? modal(dismiss)
-        : props.modal,
+        : modal,
-    [modalShown, props.modal, dismiss]
+    [modalShown, modal, dismiss]
   );
 
-  useOutsideClick(innerRef, dismiss);
+  const modalComponent = useMemo(
-
-  const modal = useMemo(
     () =>
     !inner ? null : (
       <Portal>
@@ -63,7 +64,8 @@ export function useModal(props: UseModalProps): UseModalResult {
           alignItems="stretch"
           flexDirection="column"
           spacing="2"
-          
+          dismiss={dismiss}
+          {...rest}
         >
           {inner}
         </ModalOverlay>
@@ -74,6 +76,6 @@ export function useModal(props: UseModalProps): UseModalResult {
 
   return {
     showModal,
-    modal,
+    modal: modalComponent,
   };
 }

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

@@ -9,8 +9,7 @@ export function useOutsideClick(
       const portalRoot = document.querySelector('#portal-root')!;
       if (
         ref.current &&
-        !ref.current.contains(event.target as any) &&
+        !ref.current.contains(event.target as any)
-        (!portalRoot.contains(ref.current) || portalRoot.contains(event.target as any))
       ) {
         onClick();
       }

pkg/interface/src/logic/reducers/group-update.ts

@@ -41,7 +41,6 @@ function decodePolicy(policy: Enc<GroupPolicy>): GroupPolicy {
 }
 
 function decodeTags(tags: Enc<Tags>): Tags {
-  console.log(tags);
   return _.reduce(
     tags,
     (acc, ships, key): Tags => {

pkg/interface/src/types/local-update.ts

@@ -1,4 +1,4 @@
-export const tutorialProgress = ['hidden', 'start', 'group-desc', 'channels', 'chat', 'link', 'publish', 'notifications', 'profile', 'leap', 'done'] as const;
+export const tutorialProgress = ['hidden', 'start', 'group-desc', 'channels', 'chat', 'link', 'publish', 'profile', 'leap', 'notifications', 'done', 'exit'] as const;
 
 export type TutorialProgress = typeof tutorialProgress[number];
 interface LocalUpdateSetDark {

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

@@ -1,4 +1,4 @@
-import React, { useState, useEffect } from 'react';
+import React, { useState, useMemo, useEffect } from 'react';
 import styled from 'styled-components';
 import { useHistory } from 'react-router-dom';
 import f from 'lodash/fp';
@@ -20,6 +20,7 @@ import { JoinGroup } from "~/views/landscape/components/JoinGroup";
 import { Helmet } from 'react-helmet';
 import useLocalState from "~/logic/state/local";
 import { useWaitForProps } from '~/logic/lib/useWaitForProps';
+import { useQuery } from "~/logic/lib/useQuery";
 import { 
   hasTutorialGroup,
   TUTORIAL_GROUP,
@@ -69,11 +70,25 @@ export default function LaunchApp(props) {
     </Box>
   );
 
+  const { query } = useQuery();
+
+  useEffect(() => {
+    if(query.get('tutorial')) {
+      if(hasTutorialGroup(props)) {
+        nextTutStep();
+      } else {
+        showModal();
+      }
+    }
+  }, [query]);
+
   const { tutorialProgress, nextTutStep } = useLocalState(tutSelector);
 
   const waiter = useWaitForProps(props);
 
   const { modal, showModal } = useModal({
+    position: 'relative', 
+    maxWidth: '350px',
     modal: (dismiss) => {
       const onDismiss = (e) => {
         e.stopPropagation();
@@ -87,7 +102,7 @@ export default function LaunchApp(props) {
           await waiter(hasTutorialGroup);
           await Promise.all(
             [TUTORIAL_BOOK, TUTORIAL_CHAT, TUTORIAL_LINKS].map(graph =>
-              api.graph.join(TUTORIAL_HOST, graph)));
+              props.api.graph.join(TUTORIAL_HOST, graph)));
 
           await waiter(p => {
             return `/ship/${TUTORIAL_HOST}/${TUTORIAL_CHAT}` in p.associations.graph &&
@@ -99,7 +114,10 @@ export default function LaunchApp(props) {
         dismiss();
       }
       return (
-      <Col gapY="2" p="3">
+      <Col maxWidth="350px" gapY="2" p="3">
+        <Box position="absolute" left="-16px" top="-16px">
+          <Icon width="32px" height="32px" color="blue" display="block" icon="LargeBullet" />
+        </Box>
         <Text lineHeight="tall" fontWeight="medium">Welcome</Text>
         <Text lineHeight="tall">
           You have been invited to use Landscape, an interface to chat 
@@ -108,7 +126,7 @@ export default function LaunchApp(props) {
           Would you like a tour of Landscape?
         </Text>
         <Row gapX="2" justifyContent="flex-end">
-          <Button onClick={onDismiss}>Skip</Button>
+          <Button backgroundColor="washedGray" onClick={onDismiss}>Skip</Button>
           <StatelessAsyncButton primary onClick={onContinue}>
             Yes
           </StatelessAsyncButton>
@@ -116,12 +134,14 @@ export default function LaunchApp(props) {
       </Col>
     )}
   });
+  const hasLoaded = useMemo(() => Object.keys(props.contacts).length > 0, [props.contacts]);
+
   useEffect(() => {
     const seenTutorial = _.get(props.settings, ['tutorial', 'seen'], true);
-    if(!seenTutorial && tutorialProgress === 'hidden') {
+    if(hasLoaded && !seenTutorial && tutorialProgress === 'hidden') {
       showModal();
     }
-  }, [props.settings]);
+  }, [props.settings, hasLoaded]);
 
   return (
     <>

pkg/interface/src/views/apps/notifications/notifications.tsx

@@ -1,4 +1,4 @@
-import React, { useCallback, useState } from "react";
+import React, { useCallback, useState, useRef } from "react";
 import _ from 'lodash';
 import { Box, Col, Text, Row } from "@tlon/indigo-react";
 import { Link, Switch, Route } from "react-router-dom";
@@ -12,11 +12,13 @@ import { Dropdown } from "~/views/components/Dropdown";
 import { Formik } from "formik";
 import { FormikOnBlur } from "~/views/components/FormikOnBlur";
 import GroupSearch from "~/views/components/GroupSearch";
+import {useTutorialModal} from "~/views/components/useTutorialModal";
 
 const baseUrl = "/~notifications";
 
-const HeaderLink = (
+const HeaderLink = React.forwardRef((
-  props: PropFunc<typeof Text> & { view?: string; current: string }
+  props: PropFunc<typeof Text> & { view?: string; current: string },
+  ref
 ) => {
   const { current, view, ...textProps } = props;
   const to = view ? `${baseUrl}/${view}` : baseUrl;
@@ -24,10 +26,10 @@ const HeaderLink = (
 
   return (
     <Link to={to}>
-      <Text px="2" {...textProps} gray={!active} />
+      <Text ref={ref} px="2" {...textProps} gray={!active} />
     </Link>
   );
-};
+});
 
 interface NotificationFilter {
   groups: string[];
@@ -37,8 +39,8 @@ export default function NotificationsScreen(props: any) {
   const relativePath = (p: string) => baseUrl + p;
 
   const [filter, setFilter] = useState<NotificationFilter>({ groups: [] });
-  const onSubmit = async (values: { groups: string }) => {
+  const onSubmit = async ({ groups } : NotificationFilter) => {
-    setFilter({ groups: values.groups ? [values.groups] : [] });
+    setFilter({ groups });
   };
   const onReadAll = useCallback(() => {
     props.api.hark.readAll()
@@ -48,7 +50,9 @@ export default function NotificationsScreen(props: any) {
       ? "All"
       : filter.groups
           .map((g) => props.associations?.groups?.[g]?.metadata?.title)
-          .join(", ");
+    .join(", ");
+  const anchorRef = useRef<HTMLElement | null>(null);
+  useTutorialModal('notifications', true, anchorRef.current);
   return (
     <Switch>
       <Route
@@ -74,7 +78,7 @@ export default function NotificationsScreen(props: any) {
                     <Text>Updates</Text>
                     <Row>
                       <Box>
-                        <HeaderLink current={view} view="">
+                        <HeaderLink ref={anchorRef} current={view} view="">
                           Inbox
                         </HeaderLink>
                       </Box>

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

@@ -54,13 +54,14 @@ export function Profile(props: any) {
       height="100%"
       width="100%">
       <Box
+        ref={anchorRef}
         maxWidth="600px"
         width="100%">
         { ship === `~${window.ship}` ? (
             <SetStatus ship={ship} contact={contact} api={props.api} />
           ) : null
         }
-        <Row ref={anchorRef} width="100%" height="300px">
+        <Row  width="100%" height="300px">
           {cover}
         </Row>
         <Row

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

@@ -75,7 +75,8 @@ export function GroupSearch<I extends string, V extends FormValues<I>>(props: Gr
     touched: touchedFields,
     errors,
     initialValues,
-    setFieldValue
+    setFieldValue,
+    setFieldTouched,
   } = useFormikContext<V>();
   const [inputIdx, setInputIdx] = useState(initialValues[id].length);
   const name = `${id}[${inputIdx}]`;
@@ -118,10 +119,12 @@ export function GroupSearch<I extends string, V extends FormValues<I>>(props: Gr
       render={(arrayHelpers) => {
         const onSelect = (a: Association) => {
           setFieldValue(name, a.group);
+          setFieldTouched(name, true, false);
           setInputIdx(s => s+1);
         };
 
         const onRemove = (idx: number) => {
+          setFieldTouched(name, true, false);
           setInputIdx(s => s - 1);
           arrayHelpers.remove(idx);
         };
@@ -145,6 +148,7 @@ export function GroupSearch<I extends string, V extends FormValues<I>>(props: Gr
                 }
                 getKey={(a: Association) => a.group}
                 onSelect={onSelect}
+                onBlur={() => {}}
               />
               {value?.length > 0 && (
                 value.map((e, idx: number) => {

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

@@ -1,29 +1,52 @@
-import React from "react";
+import React, { useCallback, UIEvent, MouseEvent, useRef } from "react";
 import { Box } from "@tlon/indigo-react";
 import { PropFunc } from "~/types/util";
 
 interface ModalOverlayProps {
   spacing: PropFunc<typeof Box>["m"];
+  dismiss: () => void;
+}
+type Props = ModalOverlayProps & PropFunc<typeof Box>;
+export const ModalOverlay = (props: Props) => {
+  const { spacing, ...rest } = props;
+  const ref = useRef<HTMLElement | null>(null);
+  const onClick = useCallback(
+    (e: any) => {
+      if (!(ref as any).current.contains(e.target)) {
+        props.dismiss();
+      }
+      e.stopPropagation();
+    },
+    [props.dismiss, ref]
+  );
+
+  const onKeyDown = useCallback(
+    (e: any) => {
+      if (e.key === "Escape") {
+        props.dismiss();
+        e.stopPropagation();
+      }
+    },
+    [props.dismiss, ref]
+  );
+
+  return (
+    <Box
+      backgroundColor="scales.black20"
+      left="0px"
+      top="0px"
+      width="100%"
+      height="100%"
+      position="fixed"
+      display="flex"
+      zIndex={10}
+      justifyContent="center"
+      alignItems="center"
+      p={spacing}
+      onClick={onClick}
+      onKeyDown={onKeyDown}
+    >
+      <Box ref={ref} {...rest} />
+    </Box>
+  );
 }
-export const ModalOverlay = React.forwardRef(
-  (props: ModalOverlayProps & PropFunc<typeof Box>, ref) => {
-    const { spacing, ...rest } = props;
-    return (
-      <Box
-        backgroundColor="scales.black20"
-        left="0px"
-        top="0px"
-        width="100%"
-        height="100%"
-        zIndex={10}
-        position="fixed"
-        display="flex"
-        justifyContent="center"
-        alignItems="center"
-        p={spacing}
-      >
-        <Box ref={ref} {...rest} />
-      </Box>
-    );
-  }
-);

pkg/interface/src/views/components/StatusBar.js

@@ -47,7 +47,9 @@ const StatusBar = (props) => {
 
   const anchorRef = useRef(null);
 
-  useTutorialModal('leap', true, anchorRef.current);
+  const leapHighlight = useTutorialModal('leap', true, anchorRef.current);
+  
+  const floatLeap = leapHighlight && window.matchMedia('(max-width: 550px)').matches;
 
   return (
     <Box
@@ -63,7 +65,7 @@ const StatusBar = (props) => {
       <Button width="32px" borderColor='washedGray' mr='2' px='2' onClick={() => props.history.push('/')} {...props}>
         <Icon icon='Spaces' color='black'/>
       </Button>
-        <StatusBarItem mr={2} onClick={() => toggleOmnibox()}>
+        <StatusBarItem float={floatLeap} mr={2} onClick={() => toggleOmnibox()}>
         { !props.doNotDisturb && (props.notificationsCount > 0 || invites.length > 0) &&
           (<Box display="block" right="-8px" top="-8px" position="absolute" >
             <Icon color="blue" icon="Bullet" />

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

@@ -6,21 +6,25 @@ const Row = styled(_Row)`
   cursor: pointer;
 `;
 
-type StatusBarItemProps = Parameters<typeof Row>[0] & { badge?: boolean };
+type StatusBarItemProps = Parameters<typeof Row>[0] & { badge?: boolean; float?: boolean; };
 
 export function StatusBarItem({
   badge,
   children,
+  float,
   ...props
 }: StatusBarItemProps) {
+  const floatPos = float ? { zIndex: 10, boxShadow: 'rgba(0,0,0,0.2) 0px 0px 0px 999px' } : {};
   return (
     <Button
-      style={{ position: 'relative' }}
+      style={{ position: 'relative', ...floatPos }}
       border={1}
       color="washedGray"
       bg="white"
       px={2}
       overflow='visible'
+      zIndex={10}
+      boxShadow="1px 1px black"
       {...props}
     >
       {children}

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

@@ -0,0 +1,46 @@
+import React from "react";
+import _ from "lodash";
+import { Box } from "@tlon/indigo-react";
+import { PropFunc } from "~/types";
+
+export type Direction = "East" | "South" | "West" | "North";
+type TriangleProps = PropFunc<typeof Box> & {
+  direction: Direction;
+  color: string;
+  size: number;
+};
+
+const borders = ["Top", "Bottom", "Left", "Right"] as const;
+
+const directionToBorder = (dir: Direction): typeof borders[number] => {
+  switch (dir) {
+    case "East":
+      return "Left";
+    case "West":
+      return "Right";
+    case "North":
+      return "Bottom";
+    case "South":
+      return "Top";
+  }
+};
+
+const getBorders = (dir: Direction, height: number, color: string) => {
+  const solidBorder = directionToBorder(dir);
+  const transparent = borders.filter((x) => x !== solidBorder);
+
+  return {
+    [`border${solidBorder}`]: `${height}px solid`,
+    [`border${solidBorder}Color`]: color,
+    ..._.mapValues(
+      _.keyBy(transparent, (border) => `border${border}`),
+      () => "16px solid transparent"
+    ),
+  };
+};
+
+export function Triangle({ direction, color, size, ...rest }: TriangleProps) {
+  const borders = getBorders(direction, size, color);
+
+  return <Box width="0px" height="0px" {...borders} {...rest} />;
+}

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

@@ -3,7 +3,6 @@ import { Col, Text, BaseLabel, Label } from "@tlon/indigo-react";
 import GlobalApi from "~/logic/api/global";
 import { Association, NotificationGraphConfig } from "~/types";
 import { StatelessAsyncToggle } from "~/views/components/StatelessAsyncToggle";
-import {useTutorialModal} from "~/views/components/useTutorialModal";
 
 interface ChannelNotificationsProps {
   api: GlobalApi;
@@ -27,7 +26,6 @@ export function ChannelNotifications(props: ChannelNotificationsProps) {
 
   const anchorRef = useRef<HTMLElement | null>(null)
 
-  useTutorialModal('notifications', true, anchorRef.current);
 
   return (
     <Col mb="6" gapY="4" flexShrink={0}>

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

@@ -1,4 +1,4 @@
-import React, { useRef } from "react";
+import React, { useRef, useCallback } from "react";
 import { ModalOverlay } from "~/views/components/ModalOverlay";
 import { Col, Box, Text, Row } from "@tlon/indigo-react";
 import { ChannelPopoverRoutesSidebar } from "./Sidebar";
@@ -36,9 +36,9 @@ export function ChannelPopoverRoutes(props: ChannelPopoverRoutesProps) {
   const overlayRef = useRef<HTMLElement>();
   const history = useHistory();
 
-  useOutsideClick(overlayRef, () => {
+  const onDismiss = useCallback(() => {
     history.push(props.baseUrl);
-  });
+  }, [history, props.baseUrl]);
 
   const handleUnsubscribe = async () => {
     const [,,ship,name] = association.resource.split('/');
@@ -62,6 +62,7 @@ export function ChannelPopoverRoutes(props: ChannelPopoverRoutesProps) {
       width="100%"
       spacing={[3, 5, 7]}
       ref={overlayRef}
+      dismiss={onDismiss}
     >
       <Row
         flexDirection={["column", "row"]}

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

@@ -89,7 +89,6 @@ export function GroupSwitcher(props: {
       flexShrink={0}
       height='48px'
       backgroundColor="white"
-      zIndex="2"
       position="sticky"
       top="0px"
       pl='3'

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

@@ -1,7 +1,6 @@
 import React, { useRef, useCallback } from "react";
 import { Route, Switch, RouteComponentProps, Link } from "react-router-dom";
 import { Box, Row, Col, Icon, Text } from "@tlon/indigo-react";
-import { useOutsideClick } from "~/logic/lib/useOutsideClick";
 import { HoverBoxLink } from "~/views/components/HoverBox";
 import { Contacts, Contact } from "~/types/contact-update";
 import { Group } from "~/types/group-update";
@@ -33,10 +32,9 @@ export function PopoverRoutes(
   const relativeUrl = (url: string) => `${props.baseUrl}/popover${url}`;
   const innerRef = useRef(null);
 
-  const onOutsideClick = useCallback(() => {
+  const onDismiss = useCallback(() => {
     props.history.push(props.baseUrl);
   }, [props.history.push, props.baseUrl]);
-  useOutsideClick(innerRef, onOutsideClick);
 
   useHashLink();
 
@@ -62,6 +60,7 @@ export function PopoverRoutes(
               width="100%"
               height="100%"
               bg="white"
+              dismiss={onDismiss}
             >
               <Box
                 display="grid"

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

@@ -1,4 +1,5 @@
 import React, { useState, useEffect, useCallback } from "react";
+import _ from 'lodash';
 import { Box, Col, Row, Button, Text, Icon, Action } from "@tlon/indigo-react";
 import { useHistory } from "react-router-dom";
 import { TutorialProgress, tutorialProgress as progress } from "~/types";
@@ -13,10 +14,13 @@ import {
   MODAL_HEIGHT,
   TUTORIAL_HOST,
   TUTORIAL_GROUP,
+  getTrianglePosition,
 } from "~/logic/lib/tutorialModal";
 import { getRelativePosition } from "~/logic/lib/relativePosition";
 import { StatelessAsyncButton } from "~/views/components/StatelessAsyncButton";
 import GlobalApi from "~/logic/api/global";
+import {Triangle} from "~/views/components/Triangle";
+import {ModalOverlay} from "~/views/components/ModalOverlay";
 
 const localSelector = selectLocalState([
   "tutorialProgress",
@@ -24,6 +28,7 @@ const localSelector = selectLocalState([
   "prevTutStep",
   "tutorialRef",
   "hideTutorial",
+  "set"
 ]);
 
 export function TutorialModal(props: { api: GlobalApi }) {
@@ -33,10 +38,12 @@ export function TutorialModal(props: { api: GlobalApi }) {
     nextTutStep,
     prevTutStep,
     hideTutorial,
+    set: setLocalState
   } = useLocalState(localSelector);
   const {
     title,
     description,
+    arrow,
     alignX,
     alignY,
     offsetX,
@@ -44,23 +51,22 @@ export function TutorialModal(props: { api: GlobalApi }) {
   } = progressDetails[tutorialProgress];
 
   const [coords, setCoords] = useState({});
+  const [paused, setPaused] = useState(false);
 
   const history = useHistory();
 
-  const next = useCallback(
+  const next = useCallback( () => {
-    (e: React.MouseEvent<HTMLElement, MouseEvent>) => {
-      e.stopPropagation();
       const idx = progress.findIndex((p) => p === tutorialProgress);
       const { url } = progressDetails[progress[idx + 1]];
-      history.push(url);
       nextTutStep();
+      history.push(url);
     },
     [nextTutStep, history, tutorialProgress, setCoords]
   );
   const prev = useCallback(() => {
     const idx = progress.findIndex((p) => p === tutorialProgress);
-    history.push(progressDetails[progress[idx - 1]].url);
     prevTutStep();
+    history.push(progressDetails[progress[idx - 1]].url);
   }, [prevTutStep, history, tutorialProgress]);
 
   const updatePos = useCallback(() => {
@@ -75,25 +81,36 @@ export function TutorialModal(props: { api: GlobalApi }) {
       if(key === 'bottom' || key === 'left') {
         return ['0px', ...value];
       }
-      return [null, ...value];
+      return ['unset', ...value];
     });
     if(!('bottom' in withMobile)) {
-      withMobile.bottom = ['0px', null];
+      withMobile.bottom = ['0px', 'unset'];
     }
     if(!('left' in withMobile)) {
-      withMobile.left = ['0px', null];
+      withMobile.left = ['0px', 'unset'];
     }
 
     if (newCoords) {
       setCoords(withMobile);
+    } else {
+      setCoords({});
+
     }
   }, [tutorialRef]);
 
-  const dismiss = useCallback(() => {
+  const dismiss = useCallback(async () => {
     hideTutorial();
-    props.api.settings.putEntry("tutorial", "seen", true);
+    await props.api.settings.putEntry('tutorial', 'seen', true);
   }, [hideTutorial, props.api]);
 
+  const bailExit = useCallback(() => {
+    setPaused(false);
+  }, []);
+
+  const tryExit = useCallback(() => {
+    setPaused(true);
+  }, []);
+
   const leaveGroup = useCallback(async () => {
     await props.api.groups.leaveGroup(TUTORIAL_HOST, TUTORIAL_GROUP);
   }, [props.api]);
@@ -108,27 +125,81 @@ export function TutorialModal(props: { api: GlobalApi }) {
     ) {
       const interval = setInterval(updatePos, 100);
       return () => {
+        setCoords({});
         clearInterval(interval);
       };
     }
     return () => {};
   }, [tutorialRef, tutorialProgress, updatePos]);
 
-  //  manually center final window
+  const triPos = getTrianglePosition(arrow);
-  useEffect(() => {
+
-    if (tutorialProgress === "done") {
+  if (tutorialProgress === 'done') {
-      const { innerWidth, innerHeight } = window;
+    return (
-      const left = ["0px", `${(innerWidth - MODAL_WIDTH) / 2}px`];
+      <Portal>
-      const top = [null, `${(innerHeight - MODAL_HEIGHT) / 2}px`];
+        <ModalOverlay dismiss={dismiss} borderRadius="2" maxWidth="270px" backgroundColor="white">
-      const bottom = ["0px", null];
+          <Col p="2" bg="lightBlue">
-      setCoords({ top, left, bottom });
+            <Col mb="1">
-    }
+              <Text lineHeight="tall" fontWeight="bold">
-  }, [tutorialProgress]);
+                Tutorial Finished
+              </Text>
+              <Text fontSize="0" gray>
+                {progressIdx} of {progress.length - 1}
+              </Text>
+            </Col>
+            <Text lineHeight="tall">
+              This tutorial is finished. Would you like to leave Beginner Island?
+            </Text>
+            <Row mt="2" gapX="2" justifyContent="flex-end">
+              <Button backgroundColor="washedGray" onClick={dismiss}>
+                Later
+              </Button>
+              <StatelessAsyncButton primary destructive onClick={leaveGroup}>
+                Leave Group
+              </StatelessAsyncButton>
+            </Row>
+          </Col>
+        </ModalOverlay>
+      </Portal>
+    );
+  }
 
   if (tutorialProgress === "hidden") {
     return null;
   }
 
+  if(paused) {
+    return (
+      <ModalOverlay dismiss={bailExit} borderRadius="2" maxWidth="270px" backgroundColor="white">
+        <Col p="2">
+          <Col mb="1">
+            <Text lineHeight="tall" fontWeight="bold">
+              End Tutorial Now?
+            </Text>
+          </Col>
+          <Text lineHeight="tall">
+            You can always restart the tutorial by typing "tutorial" in Leap.
+          </Text>
+          <Row mt="4" gapX="2" justifyContent="flex-end">
+            <Button backgroundColor="washedGray" onClick={bailExit}>
+              Cancel
+            </Button>
+            <StatelessAsyncButton primary destructive onClick={dismiss}>
+              End Tutorial
+            </StatelessAsyncButton>
+          </Row>
+        </Col>
+      </ModalOverlay>
+
+    )
+
+  }
+
+
+  if(Object.keys(coords).length === 0) {
+    return null;
+  }
+
   return (
     <Portal>
       <Box
@@ -148,40 +219,47 @@ export function TutorialModal(props: { api: GlobalApi }) {
           borderRadius="2"
           p="2"
           bg="lightBlue"
+          
         >
+          <Triangle 
+            {...triPos}
+            position="absolute"
+            size={16}
+            color="lightBlue"
+            direction={arrow}
+            height="0px"
+            width="0px"
+          />
+            
           <Box
             right="8px"
             top="8px"
             position="absolute"
             cursor="pointer"
-            onClick={dismiss}
+            onClick={tryExit}
           >
             <Icon icon="X" />
           </Box>
-          <Text lineHeight="tall" fontWeight="medium">
+          <Col mb="1">
-            {title}
+            <Text lineHeight="tall" fontWeight="bold">
-          </Text>
+              {title}
+            </Text>
+            <Text fontSize="0" gray>
+              {progressIdx} of {progress.length - 2}
+            </Text>
+          </Col>
+          
           <Text lineHeight="tall">{description}</Text>
-          {tutorialProgress !== "done" ? (
+          <Row gapX="2" mt="2" justifyContent="flex-end">
-            <Row justifyContent="space-between">
+            { progressIdx > 1 && (
-              <Action bg="transparent" onClick={prev}>
+              <Button bg="washedGray" onClick={prev}>
-                <Icon icon="ArrowWest" />
+                Back
-              </Action>
+              </Button>
-              <Text>
+            )}
-                {progressIdx}/{progress.length - 1}
+            <Button primary onClick={next}>
-              </Text>
+              Next
-              <Action bg="transparent" onClick={next}>
+            </Button>
-                <Icon icon="ArrowEast" />
+          </Row>
-              </Action>
-            </Row>
-          ) : (
-            <Row justifyContent="space-between">
-              <StatelessAsyncButton primary onClick={leaveGroup}>
-                Leave Group
-              </StatelessAsyncButton>
-              <Button onClick={dismiss}>Later</Button>
-            </Row>
-          )}
         </Col>
       </Box>
     </Portal>