urbit/shrub
1
1
Fork 0
mirror of https://github.com/urbit/shrub.git synced 2024-12-19 08:32:39 +03:00
Code Issues Packages Projects Releases Wiki Activity

grid: default to desk name if title empty

Browse Source
This commit is contained in:
Hunter Miller 2021-10-25 11:55:57 -05:00
parent 72a9d90ec1
commit 7e7d938720
9 changed files with 30 additions and 16 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
pkg/grid/src/components/AppInfo.tsx
View File

@ -9,7 +9,7 @@ import { DocketHeader } from './DocketHeader';
import { Spinner } from './Spinner';
import { VatMeta } from './VatMeta';
import useDocketState, { ChargeWithDesk } from '../state/docket';
import { getAppHref } from '../state/util';
import { getAppHref, getAppName } from '../state/util';
import { addRecentApp } from '../nav/search/Home';
import { TreatyMeta } from './TreatyMeta';
@ -113,7 +113,7 @@ export const AppInfo: FC<AppInfoProps> = ({ docket, vat, className }) => {
className="space-y-6"
containerClass="w-full max-w-md"
>
<h2 className="h4">Install &ldquo;{docket.title}&rdquo;</h2>
<h2 className="h4">Install &ldquo;{getAppName(docket)}&rdquo;</h2>
<p className="text-base tracking-tight pr-6">
This application will be able to view and interact with the contents of your
Urbit. Only install if you trust the developer.
@ -123,7 +123,7 @@ export const AppInfo: FC<AppInfoProps> = ({ docket, vat, className }) => {
Cancel
</DialogClose>
<DialogClose as={Button} onClick={installApp}>
Get &ldquo;{docket.title}&rdquo;
Get &ldquo;{getAppName(docket)}&rdquo;
</DialogClose>
</div>
</DialogContent>

4
pkg/grid/src/components/AppLink.tsx
View File

@ -2,7 +2,7 @@ import classNames from 'classnames';
import React, { HTMLProps, ReactNode } from 'react';
import { Link, LinkProps } from 'react-router-dom';
import { DocketWithDesk } from '../state/docket';
import { getAppHref } from '../state/util';
import { getAppHref, getAppName } from '../state/util';
import { DocketImage } from './DocketImage';
type Sizes = 'xs' | 'small' | 'default';
@ -57,7 +57,7 @@ export const AppLink = <T extends DocketWithDesk>({
<>
<DocketImage color={app.color} image={app.image} size={size} />
<div className="flex-1 text-black">
<p>{app.title}</p>
<p>{getAppName(app)}</p>
{app.info && size === 'default' && <p className="font-normal">{app.info}</p>}
</div>
</>

3
pkg/grid/src/components/AppList.tsx
View File

@ -4,6 +4,7 @@ import { MatchItem } from '../nav/Nav';
import { useRecentsStore } from '../nav/search/Home';
import { AppLink, AppLinkProps } from './AppLink';
import { DocketWithDesk } from '../state/docket';
import { getAppName } from '../state/util';
type AppListProps<T extends DocketWithDesk> = {
apps: T[];
@ -45,7 +46,7 @@ export const AppList = <T extends DocketWithDesk>({
aria-labelledby={labelledBy}
>
{apps.map((app) => (
<li key={app.title} id={app.title} role="option" aria-selected={selected(app)}>
<li key={getAppName(app)} id={getAppName(app)} role="option" aria-selected={selected(app)}>
<AppLink
{...props}
app={app}

3
pkg/grid/src/nav/SystemPreferences.tsx
View File

@ -14,6 +14,7 @@ import { LeftArrow } from '../components/icons/LeftArrow';
import { System } from '../components/icons/System';
import { Interface } from '../components/icons/Interface';
import { Notifications } from '../components/icons/Notifications';
import { getAppName } from '../state/util';
interface SystemPreferencesSectionProps {
url: string;
@ -112,7 +113,7 @@ export const SystemPreferences = (props: RouteComponentProps<{ submenu: string }
active={matchSub('apps', charge.desk)}
>
<DocketImage size="small" className="mr-3" {...charge} />
{charge.title}
{getAppName(charge)}
</SystemPreferencesSection>
))}
</ul>

5
pkg/grid/src/nav/preferences/AppPrefs.tsx
View File

@ -4,6 +4,7 @@ import { Setting } from '../../components/Setting';
import { ShipName } from '../../components/ShipName';
import { useCharge } from '../../state/docket';
import useKilnState, { useVat } from '../../state/kiln';
import { getAppName } from '../../state/util';
export const AppPrefs = ({ match }: RouteComponentProps<{ desk: string }>) => {
const { desk } = match.params;
@ -18,11 +19,11 @@ export const AppPrefs = ({ match }: RouteComponentProps<{ desk: string }>) => {
return (
<>
<h2 className="h3 mb-7">{charge?.title} Settings</h2>
<h2 className="h3 mb-7">{getAppName(charge)} Settings</h2>
<div className="space-y-3">
{tracking ? (
<Setting on={otasEnabled} toggle={toggleUpdates} name="Automatic Updates">
<p>Automatically download and apply updates to keep {charge?.title} up to date.</p>
<p>Automatically download and apply updates to keep {getAppName(charge)} up to date.</p>
{otaSource && (
<p>
OTA Source: <ShipName name={otaSource} className="font-semibold font-mono" />

6
pkg/grid/src/nav/search/TreatyInfo.tsx
View File

@ -4,6 +4,7 @@ import { AppInfo } from '../../components/AppInfo';
import { Spinner } from '../../components/Spinner';
import useDocketState, { useCharge, useTreaty } from '../../state/docket';
import { useVat } from '../../state/kiln';
import { getAppName } from '../../state/util';
import { useLeapStore } from '../Nav';
export const TreatyInfo = () => {
@ -12,6 +13,7 @@ export const TreatyInfo = () => {
const treaty = useTreaty(host, desk);
const vat = useVat(desk);
const charge = useCharge(desk);
const name = getAppName(treaty);
useEffect(() => {
if (!charge) {
@ -20,9 +22,9 @@ export const TreatyInfo = () => {
}, [host, desk]);
useEffect(() => {
select(<>{treaty?.title}</>);
select(<>{name}</>);
useLeapStore.setState({ matches: [] });
}, [treaty?.title]);
}, [name]);
if (!treaty) {
// TODO: maybe replace spinner with skeletons

10
pkg/grid/src/state/util.ts
View File

@ -1,4 +1,4 @@
import { DocketHref } from '@urbit/api/docket';
import { Docket, DocketHref, Treaty } from '@urbit/api/docket';
import { hsla, parseToHsla } from 'color2k';
import _ from 'lodash';
@ -16,6 +16,14 @@ export function getAppHref(href: DocketHref) {
return 'site' in href ? href.site : `/apps/${href.glob.base}/`;
}
export function getAppName(app: (Docket & { desk: string }) | Treaty | undefined): string {
if (!app) {
return '';
}
return app.title || app.desk;
}
export function disableDefault<T extends Event>(e: T): void {
e.preventDefault();
}

5
pkg/grid/src/tiles/RemoveApp.tsx
View File

@ -4,6 +4,7 @@ import { Button } from '../components/Button';
import { Dialog, DialogClose, DialogContent } from '../components/Dialog';
import { useRecentsStore } from '../nav/search/Home';
import useDocketState, { useCharges } from '../state/docket';
import { getAppName } from '../state/util';
export const RemoveApp = () => {
const history = useHistory();
@ -21,7 +22,7 @@ export const RemoveApp = () => {
return (
<Dialog open onOpenChange={(open) => !open && history.push('/')}>
<DialogContent showClose={false} className="space-y-6" containerClass="w-full max-w-md">
<h1 className="h4">Remove &ldquo;{docket?.title || ''}&rdquo;?</h1>
<h1 className="h4">Remove &ldquo;{getAppName(docket)}&rdquo;?</h1>
<p className="text-base tracking-tight pr-6">
This will remove the software&apos;s tile from your home screen.
</p>
@ -30,7 +31,7 @@ export const RemoveApp = () => {
Cancel
</DialogClose>
<DialogClose as={Button} onClick={handleRemoveApp}>
Remove &ldquo;{docket?.title}&rdquo;
Remove &ldquo;{getAppName(docket)}&rdquo;
</DialogClose>
</div>
</DialogContent>

4
pkg/grid/src/tiles/SuspendApp.tsx
View File

@ -24,7 +24,7 @@ export const SuspendApp = () => {
return (
<Dialog open onOpenChange={(open) => !open && history.push('/')}>
<DialogContent showClose={false} className="space-y-6" containerClass="w-full max-w-md">
<h1 className="h4">Suspend &ldquo;{charge?.title || ''}&rdquo;</h1>
<h1 className="h4">Suspend &ldquo;{getAppName(charge)}&rdquo;</h1>
<p className="text-base tracking-tight pr-6">
Suspending an app will turn off automatic updates. You cannot use an app when it is
suspended, but you can resume it at any time.
@ -34,7 +34,7 @@ export const SuspendApp = () => {
Cancel
</DialogClose>
<DialogClose as={Button} onClick={handleSuspendApp}>
Suspend &ldquo;{charge?.title}&rdquo;
Suspend &ldquo;{getAppName(docket)}&rdquo;
</DialogClose>
</div>
</DialogContent>