groups: Use garden's prot. hand. prefs to determine app link

pkg/interface/src/views/apps/permalinks/embed.tsx

@@ -1,15 +1,40 @@
-import { BaseAnchor, Box, BoxProps, Button, Center, Col, H3, Icon, Image, Row, Text } from '@tlon/indigo-react';
+import {
-import { Association, GraphNode, resourceFromPath, GraphConfig, Treaty, deSig } from '@urbit/api';
+  BaseAnchor,
+  Box,
+  BoxProps,
+  Button,
+  Center,
+  Col,
+  H3,
+  Icon,
+  Image,
+  Row,
+  Text
+} from '@tlon/indigo-react';
+import {
+  Association,
+  GraphNode,
+  resourceFromPath,
+  GraphConfig,
+  Treaty,
+  deSig
+} from '@urbit/api';
 import React, { useCallback, useEffect, useState } from 'react';
 import _ from 'lodash';
 import { Link, useLocation } from 'react-router-dom';
+import api from '~/logic/api';
 import {
-  getPermalinkForGraph, GraphPermalink as IGraphPermalink, parsePermalink,
+  getPermalinkForGraph,
+  GraphPermalink as IGraphPermalink,
+  parsePermalink,
   AppPermalink as IAppPermalink
 } from '~/logic/lib/permalinks';
+import useGardenSettingsState, {
+  useProtocolHandling
+} from '~/logic/state/gardenSettings';
 import { getModuleIcon, GraphModule } from '~/logic/lib/util';
 import { useVirtualResizeProp } from '~/logic/lib/virtualContext';
-import useGraphState  from '~/logic/state/graph';
+import useGraphState from '~/logic/state/graph';
 import useMetadataState from '~/logic/state/metadata';
 import { GroupLink } from '~/views/components/GroupLink';
 import { TranscludedNode } from './TranscludedNode';
@@ -17,6 +42,7 @@ import styled from 'styled-components';
 import Author from '~/views/components/Author';
 import useDocketState, { useTreaty } from '~/logic/state/docket';
 import { createJoinParams } from '~/views/landscape/components/Join/Join';
+import { useBrowserId } from '~/logic/state/local';
 
 function Placeholder(type) {
   const lines = (type) => {
@@ -30,8 +56,8 @@ function Placeholder(type) {
     }
   };
   return (
-    <Box p='12px 12px 6px'>
+    <Box p="12px 12px 6px">
-      <Row mb='6px' height="4">
+      <Row mb="6px" height="4">
         <Box
           backgroundColor="washedGray"
           size="4"
@@ -46,7 +72,7 @@ function Placeholder(type) {
         />
       </Row>
       {_.times(lines(type), i => (
-        <Row margin="6px" ml='32px' height="4">
+        <Row margin="6px" ml="32px" height="4">
           <Box
             backgroundColor="washedGray"
             height="4"
@@ -59,7 +85,7 @@ function Placeholder(type) {
   );
 }
 
-function GroupPermalink(props: { group: string; }) {
+function GroupPermalink(props: { group: string }) {
   const { group } = props;
   return (
     <GroupLink
@@ -80,22 +106,28 @@ function GraphPermalink(
     full?: boolean;
   }
 ) {
-  const { full = false, showOurContact, pending, graph, group, index, transcluded } = props;
+  const {
+    full = false,
+    showOurContact,
+    pending,
+    graph,
+    group,
+    index,
+    transcluded
+  } = props;
   const location = useLocation();
   const { ship, name } = resourceFromPath(graph);
   const node = useGraphState(
-    useCallback(s => s.looseNodes?.[`${deSig(ship)}/${name}`]?.[index] as GraphNode, [
+    useCallback(
-      graph,
+      s => s.looseNodes?.[`${deSig(ship)}/${name}`]?.[index] as GraphNode,
-      index
+      [graph, index]
-    ])
+    )
   );
   const [errored, setErrored] = useState(false);
   const [loading, setLoading] = useState(false);
   const getNode = useGraphState(s => s.getNode);
   const association = useMetadataState(
-    useCallback(s => s.associations.graph[graph] as Association | null, [
+    useCallback(s => s.associations.graph[graph] as Association | null, [graph])
-      graph
-    ])
   );
 
   useVirtualResizeProp(Boolean(node));
@@ -118,23 +150,19 @@ function GraphPermalink(
   const showTransclusion = Boolean(association && node && transcluded < 1);
   const permalink = (() => {
     const link = `/perma${getPermalinkForGraph(group, graph, index).slice(16)}`;
-    return (!association && !loading)
+    return !association && !loading
-      ? { search: createJoinParams('groups', group, link)  } :  link;
+      ? { search: createJoinParams('groups', group, link) }
+      : link;
   })();
 
-  const [nodeGroupHost, nodeGroupName] = association?.group.split('/').slice(-2) ?? ['Unknown', 'Unknown'];
+  const [nodeGroupHost, nodeGroupName] = association?.group
+    .split('/')
+    .slice(-2) ?? ['Unknown', 'Unknown'];
   const [nodeChannelHost, nodeChannelName] = association?.resource
     .split('/')
     .slice(-2) ?? ['Unknown', 'Unknown'];
-  const [
+  const [locChannelName, locChannelHost, , , , locGroupName, locGroupHost] =
-    locChannelName,
+    location.pathname.split('/').reverse();
-    locChannelHost,
-    ,
-    ,
-    ,
-    locGroupName,
-    locGroupHost
-  ] = location.pathname.split('/').reverse();
 
   const isInSameResource =
     locChannelHost === nodeChannelHost &&
@@ -156,7 +184,10 @@ function GraphPermalink(
         e.stopPropagation();
       }}
     >
-      {loading && association && !errored && Placeholder((association.metadata.config as GraphConfig).graph)}
+      {loading &&
+        association &&
+        !errored &&
+        Placeholder((association.metadata.config as GraphConfig).graph)}
       {showTransclusion && index && !loading && (
         <TranscludedNode
           transcluded={transcluded + 1}
@@ -169,7 +200,9 @@ function GraphPermalink(
         <PermalinkDetails
           known
           showTransclusion={showTransclusion}
-          icon={getModuleIcon((association.metadata.config as GraphConfig).graph as GraphModule)}
+          icon={getModuleIcon(
+            (association.metadata.config as GraphConfig).graph as GraphModule
+          )}
           title={association.metadata.title}
         />
       )}
@@ -177,11 +210,13 @@ function GraphPermalink(
         <PermalinkDetails
           known
           showTransclusion={showTransclusion}
-          icon={getModuleIcon((association.metadata.config as GraphConfig).graph as GraphModule)}
+          icon={getModuleIcon(
+            (association.metadata.config as GraphConfig).graph as GraphModule
+          )}
           title={association.metadata.title}
         />
       )}
-      {isInSameResource && transcluded !== 2 && !loading && <Row height='2' />}
+      {isInSameResource && transcluded !== 2 && !loading && <Row height="2" />}
       {!association && !loading && (
         <PermalinkDetails
           icon="Groups"
@@ -245,8 +280,9 @@ const AppSkeleton = props => (
 
 function AppPermalink({ link, ship, desk }: Omit<IAppPermalink, 'type'>) {
   const treaty = useTreaty(ship, desk);
-  const hasProtocolHandling = Boolean(window?.navigator?.registerProtocolHandler);
+  const browserId = useBrowserId();
-  const href = hasProtocolHandling ? link : `/apps/grid/perma?ext=${link}`;
+  const protocolHandling = useProtocolHandling(browserId);
+  const href = protocolHandling ? link : `/apps/grid/perma?ext=${link}`;
 
   useEffect(() => {
     if (!treaty) {
@@ -254,6 +290,12 @@ function AppPermalink({ link, ship, desk }: Omit<IAppPermalink, 'type'>) {
     }
   }, [treaty, ship, desk]);
 
+  useEffect(() => {
+    const { initialize, getAll } = useGardenSettingsState.getState();
+    initialize(api);
+    getAll();
+  }, []);
+
   return (
     <Row
       display="inline-flex"
@@ -265,14 +307,22 @@ function AppPermalink({ link, ship, desk }: Omit<IAppPermalink, 'type'>) {
     >
       <AppTile display={['none', 'block']} {...treaty} />
       <Col flex="1">
-        <Row flexDirection={['row', 'column']} alignItems={['center', 'start']} marginBottom={2}>
+        <Row
+          flexDirection={['row', 'column']}
+          alignItems={['center', 'start']}
+          marginBottom={2}
+        >
           <AppTile display={['block', 'none']} {...treaty} />
           <Col>
-            <H3 color="black">{ treaty?.title || '%' + desk }</H3>
+            <H3 color="black">{treaty?.title || '%' + desk}</H3>
             <Author ship={treaty?.ship || ship} showImage dontShowTime={true} />
           </Col>
         </Row>
-        {treaty && <ClampedText marginBottom={2} color="gray">{treaty.info}</ClampedText>}
+        {treaty && (
+          <ClampedText marginBottom={2} color="gray">
+            {treaty.info}
+          </ClampedText>
+        )}
         {!treaty && (
           <>
             <AppSkeleton />
@@ -318,7 +368,7 @@ function PermalinkDetails(props: {
       <Row gapX="2" alignItems="center">
         <Box width={4} height={4}>
           <Center width={4} height={4}>
-            <Icon icon={icon} color='gray' />
+            <Icon icon={icon} color="gray" />
           </Center>
         </Box>
         <Text gray mono={!known}>
@@ -356,8 +406,6 @@ export function PermalinkEmbed(props: {
         />
       );
     case 'app':
-      return (
+      return <AppPermalink {...permalink} />;
-        <AppPermalink {...permalink} />
-      );
   }
 }