permalinks: better handling and onboarding, removing tiles too

pkg/grid/src/nav/notifications/OnboardingNotification.tsx

@@ -43,6 +43,16 @@ const cards: OnboardingCardProps[] = [
   // }
 ];
 
+if (window?.navigator?.registerProtocolHandler) {
+  cards.push({
+    title: 'Open Urbit-Native Links',
+    body: 'Enable your Urbit to open links you find in the wild',
+    button: 'Enable Link Handler',
+    color: '#82A6CA',
+    href: '/apps/grid/leap/system-preferences/interface'
+  });
+}
+
 interface OnboardingCardProps {
   title: string;
   button: string;

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

@@ -1,9 +1,7 @@
 import React, { ReactElement } from 'react';
 import useLaunchState from '~/logic/state/launch';
 import { WeatherState } from '~/types';
-import BasicTile from './tiles/basic';
 import ClockTile from './tiles/clock';
-import CustomTile from './tiles/custom';
 import WeatherTile from './tiles/weather';
 
 const Tiles = (): ReactElement => {
@@ -16,16 +14,7 @@ const Tiles = (): ReactElement => {
     return tile.isShown;
   }).map((key) => {
     const tile = tileState[key];
-    if ('basic' in tile.type) {
+    if ('custom' in tile.type) {
-      const basic = tile.type.basic;
-      return (
-        <BasicTile
-          key={key}
-          title={basic.title}
-          linkedUrl={basic.linkedUrl}
-        />
-      );
-    } else if ('custom' in tile.type) {
       if (key === 'weather') {
         return (
           <WeatherTile key={key} />
@@ -35,14 +24,6 @@ const Tiles = (): ReactElement => {
         return (
           <ClockTile key={key} location={location} />
         );
-      } else {
-        return (
-          <CustomTile
-            key={key}
-            tileImage={tile.type.custom.image}
-            linkedUrl={tile.type.custom.linkedUrl}
-          />
-        );
       }
     }
     return null;

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

@@ -224,8 +224,12 @@ function AppTile({ color, image, ...props }: AppTileProps) {
   );
 }
 
+window.navigator.registerProtocolHandler = undefined;
+
 function AppPermalink({ link, ship, desk }: Omit<IAppPermalink, 'type'>) {
   const treaty = useTreaty(ship, desk);
+  const hasProtocolHandling = Boolean(window?.navigator?.registerProtocolHandler);
+  const href = hasProtocolHandling ? link : `/apps/grid/perma?ext=${link}`;
 
   useEffect(() => {
     if (!treaty) {
@@ -252,7 +256,7 @@ function AppPermalink({ link, ship, desk }: Omit<IAppPermalink, 'type'>) {
           </Col>
         </Row>
         <ClampedText marginBottom={2} color="gray">{treaty?.info}</ClampedText>
-        <Button as="a" href={link} primary alignSelf="start" display="inline-flex" marginTop="auto">Open App</Button>
+        <Button as="a" href={href} primary alignSelf="start" display="inline-flex" marginTop="auto">Open App</Button>
       </Col>
     </Row>
   );