Merge pull request #212 from tloncorp/james/land-747-landscape-link-back-to-hosting

landscape: add tlon hosting linkback

ui/src/logic/utils.ts

@@ -13,6 +13,9 @@ import { differenceInDays, endOfToday, format } from 'date-fns';
 
 export const useMockData = import.meta.env.MODE === 'mock';
 
+export const isHosted =
+  import.meta.env.DEV || window.location.hostname.endsWith('.tlon.network');
+
 export async function fakeRequest<T>(data: T, time = 300): Promise<T> {
   return new Promise((resolve) => {
     setTimeout(() => {

ui/src/nav/Hosting.tsx

@@ -0,0 +1,26 @@
+import React from 'react';
+import { Button } from '../components/Button';
+
+export const Hosting = () => {
+  return (
+    <div className="flex flex-col space-y-4">
+      <div className="inner-section space-y-8">
+        <h2 className="text-lg font-bold">Tlon Hosting</h2>
+        <div>
+          <h3 className="text-md mb-2 font-bold">Service Account Dashboard</h3>
+          <p className="leading-5">
+            View your hosted urbits, their current status, and account info.
+          </p>
+        </div>
+        <Button
+          variant="primary"
+          as="a"
+          href="https://tlon.network/login"
+          target="_blank"
+        >
+          Open Service Account Dashboard
+        </Button>
+      </div>
+    </div>
+  );
+};

ui/src/nav/Nav.tsx

@@ -33,6 +33,8 @@ import { Cross } from '../components/icons/Cross';
 import GetApps from './GetApps';
 import LandscapeWayfinding from '../components/LandscapeWayfinding';
 import { useCalm } from '../state/settings';
+import { isHosted } from '@/logic/utils';
+import TlonIcon from '@/components/icons/TlonIcon';
 
 export interface MatchItem {
   url: string;
@@ -112,11 +114,25 @@ export const SystemPrefsLink = ({
   );
 };
 
+export const HostingLink = () => {
+  if (isHosted) {
+    return (
+      <Link
+        to="/system-preferences/hosting"
+        className="rounded-lg bg-gray-50 p-1.5"
+      >
+        <TlonIcon className="h-6 w-6 text-gray-400" />
+      </Link>
+    );
+  }
+  return <></>;
+};
+
 export const GetAppsLink = () => {
   return (
     <Link
       to="/get-apps"
-      className="flex h-9 w-[125px] items-center justify-center space-x-2 rounded-lg bg-blue-soft px-3 py-2.5"
+      className="flex h-9 w-[125px] items-center justify-center space-x-2 rounded-lg bg-blue-soft px-3 py-2.5 dark:bg-blue-100"
     >
       <span className="whitespace-nowrap font-semibold text-blue">
         Get Urbit Apps
@@ -169,6 +185,7 @@ export const Nav: FunctionComponent = () => {
           navOpen={isOpen}
           notificationsOpen={menu === 'notifications'}
         />
+        <HostingLink />
         <GetAppsLink />
         {!disableWayfinding && <LandscapeWayfinding className="sm:hidden" />}
       </Portal.Root>

ui/src/preferences/SystemPreferences.tsx

@@ -23,8 +23,9 @@ import { DocketImage } from '../components/DocketImage';
 import { ErrorAlert } from '../components/ErrorAlert';
 import { useIsMobile, useMedia } from '../logic/useMedia';
 import { LeftArrow } from '../components/icons/LeftArrow';
-import { getAppName } from '@/logic/utils';
+import { getAppName, isHosted } from '@/logic/utils';
 import { Help } from '../nav/Help';
+import { Hosting } from '../nav/Hosting';
 import TlonIcon from '../components/icons/TlonIcon';
 import HelpIcon from '../components/icons/HelpIcon';
 import LogoutIcon from '../components/icons/LogoutIcon';
@@ -123,6 +124,15 @@ export const SystemPreferences = () => {
                     <Bullet className="ml-auto h-5 w-5 text-orange-500" />
                   )}
                 </SystemPreferencesSection>
+                {isHosted && (
+                  <SystemPreferencesSection
+                    to="hosting"
+                    active={matchSub('hosting')}
+                  >
+                    <TlonIcon className="mr-3 h-6 w-6 rounded-md text-gray-600" />
+                    Tlon Hosting
+                  </SystemPreferencesSection>
+                )}
                 <SystemPreferencesSection to="help" active={matchSub('help')}>
                   <HelpIcon className="mr-3 h-6 w-6 rounded-md text-gray-600" />
                   Help and Support
@@ -217,6 +227,7 @@ export const SystemPreferences = () => {
           <section className="system-preferences-content min-h-fit max-h-[calc(100vh-6.25rem)] flex-1 flex-col bg-gray-50 p-4 text-gray-800 sm:p-8">
             <Routes>
               <Route path="apps/:desk" element={<AppPrefs />} />
+              <Route path="hosting" element={<Hosting />} />
               <Route path="help" element={<Help />} />
               <Route path="interface" element={<InterfacePrefs />} />
               <Route path="appearance" element={<AppearancePrefs />} />