| 1 | import { Bell, Building2, Code2, House, LayoutGrid, Lock, MessagesSquare, Pin, Plug, Search, Shapes, Users } from "lucide-react"; |
| 2 | import { type ReactNode, useEffect, useMemo, useState } from "react"; |
| 3 | import { Link, useFetcher, useFetchers } from "react-router"; |
| 4 | |
| 5 | import { ConnectorMark } from "./connectors"; |
| 6 | import { Card } from "./ui/card"; |
| 7 | import { Skeleton } from "./ui/skeleton"; |
| 8 | import { type BuiltinApp, type InstalledAppData, type PinnableApp, appPinFromForm, installedAppOf, withPin } from "../lib/apps"; |
| 9 | import { cn } from "../lib/cn"; |
| 10 | import { Hint } from "./ui/hint"; |
| 11 | |
| 12 | /** Each built-in app's icon, at the size asked for. */ |
| 13 | export function appIcon(key: BuiltinApp, size = 18): ReactNode { |
| 14 | const icons: Record<BuiltinApp, ReactNode> = { |
| 15 | home: <House size={size} />, |
| 16 | chat: <MessagesSquare size={size} />, |
| 17 | notifications: <Bell size={size} />, |
| 18 | code: <Code2 size={size} />, |
| 19 | artifacts: <Shapes size={size} />, |
| 20 | people: <Users size={size} />, |
| 21 | workspace: <Building2 size={size} />, |
| 22 | }; |
| 23 | return icons[key]; |
| 24 | } |
| 25 | |
| 26 | /** An installed app's mark: its connector's, or its letters on a steady colour. */ |
| 27 | export function InstalledMark({ app, size = 22 }: { app: { connector: InstalledAppData["connector"] }; size?: number }) { |
| 28 | return <ConnectorMark view={{ id: app.connector.id, name: app.connector.name, provider: app.connector.provider ?? null }} size={size} />; |
| 29 | } |
| 30 | |
| 31 | /** A pinned app as the rail draws it, from its key alone; null when the key names nothing installable. */ |
| 32 | export function pinnedApp(key: PinnableApp, slug: string): { key: string; name: string; to: string; icon: (size: number) => ReactNode } | null { |
| 33 | const app = installedAppOf(key); |
| 34 | if (!app) return null; |
| 35 | return { key, name: app.name, to: app.path(slug), icon: (size) => <InstalledMark app={app} size={size} /> }; |
| 36 | } |
| 37 | |
| 38 | /** Every pin form shares this key, so the rail, the launcher and the Apps page see one change. */ |
| 39 | const PIN_FETCHER = "app-pin"; |
| 40 | |
| 41 | /** |
| 42 | * Someone's pins in the workspace `slug`, as saved (`saved`, from the |
| 43 | * root's data), with any pin or unpin on its way already applied, so the |
| 44 | * rail changes the moment a pin is pressed. `toggle` pins or unpins. |
| 45 | */ |
| 46 | export function useAppPins(slug: string, saved: PinnableApp[]) { |
| 47 | const fetcher = useFetcher({ key: PIN_FETCHER }); |
| 48 | const fetchers = useFetchers(); |
| 49 | const pins = useMemo(() => { |
| 50 | let pins = saved; |
| 51 | for (const pending of fetchers) { |
| 52 | if (pending.key !== PIN_FETCHER || !pending.formData) continue; |
| 53 | const change = appPinFromForm(pending.formData); |
| 54 | if (change) pins = withPin(pins, change.app, change.pinned); |
| 55 | } |
| 56 | return pins; |
| 57 | }, [saved, fetchers]); |
| 58 | const toggle = (app: PinnableApp) => { |
| 59 | const form = new FormData(); |
| 60 | form.set("intent", pins.includes(app) ? "unpin" : "pin"); |
| 61 | form.set("app", app); |
| 62 | fetcher.submit(form, { method: "post", action: `/${slug}/-/apps` }); |
| 63 | }; |
| 64 | return { pins, toggle }; |
| 65 | } |
| 66 | |
| 67 | /** |
| 68 | * One installed app: its mark and name, opening it; and a pin that shows |
| 69 | * on hover or focus and stays lit while it is pinned. An app the person |
| 70 | * can't use says Request access instead, and has no pin. |
| 71 | */ |
| 72 | export function AppTile({ |
| 73 | app, |
| 74 | pinned, |
| 75 | onToggle, |
| 76 | onOpen, |
| 77 | card = false, |
| 78 | }: { |
| 79 | app: InstalledAppData; |
| 80 | pinned: boolean; |
| 81 | onToggle: (app: PinnableApp) => void; |
| 82 | onOpen?: () => void; |
| 83 | /** On the Apps page: a card with what the app is. */ |
| 84 | card?: boolean; |
| 85 | }) { |
| 86 | const body = ( |
| 87 | <> |
| 88 | <span className="relative flex shrink-0"> |
| 89 | <InstalledMark app={app} size={40} /> |
| 90 | {!app.usable && ( |
| 91 | <span className="absolute -right-1 -bottom-1 flex size-4 items-center justify-center rounded-full bg-surface text-faint ring-1 ring-line"> |
| 92 | <Lock size={9} /> |
| 93 | </span> |
| 94 | )} |
| 95 | </span> |
| 96 | {card ? ( |
| 97 | <span className="min-w-0"> |
| 98 | <span className="flex min-w-0 items-baseline gap-2"> |
| 99 | <span className="truncate text-sm font-medium text-fg">{app.name}</span> |
| 100 | <span className="shrink-0 text-[0.6875rem] text-faint">{app.from}</span> |
| 101 | </span> |
| 102 | <span className="block truncate text-xs text-muted">{app.usable ? app.about : "Request access"}</span> |
| 103 | </span> |
| 104 | ) : ( |
| 105 | <span className="flex w-full min-w-0 flex-col items-center gap-1"> |
| 106 | <span className="block w-full truncate text-xs font-medium text-fg-soft">{app.name}</span> |
| 107 | <span className={cn("block truncate text-[0.625rem]", app.usable ? "text-faint" : "text-accent")}>{app.usable ? app.from : "Request access"}</span> |
| 108 | </span> |
| 109 | )} |
| 110 | </> |
| 111 | ); |
| 112 | const linkClass = cn( |
| 113 | "flex w-full rounded-xl text-center outline-none focus-visible:ring-2 focus-visible:ring-accent", |
| 114 | card ? "items-center gap-3 p-3.5 pr-11 text-left" : "flex-col items-center gap-1.5 px-1 pt-3 pb-2.5", |
| 115 | ); |
| 116 | return ( |
| 117 | <div |
| 118 | className={cn( |
| 119 | "group/tile relative rounded-xl transition-colors", |
| 120 | card ? "border border-line bg-surface hover:border-line-strong" : "hover:bg-raised focus-within:bg-raised", |
| 121 | )} |
| 122 | > |
| 123 | {/* An app the person can't use leads (`href`) to where they ask for it. */} |
| 124 | <Link to={app.href} prefetch="intent" onClick={onOpen} className={linkClass}> |
| 125 | {body} |
| 126 | </Link> |
| 127 | {app.usable && app.pinnable && ( |
| 128 | <Hint label={pinned ? "Unpin from your rail" : "Pin to your rail"}> |
| 129 | <button |
| 130 | type="button" |
| 131 | aria-label={pinned ? `Unpin ${app.name} from your rail` : `Pin ${app.name} to your rail`} |
| 132 | aria-pressed={pinned} |
| 133 | onClick={() => onToggle(app.key)} |
| 134 | className={cn( |
| 135 | "absolute flex size-6 items-center justify-center rounded-md outline-none transition-opacity hover:bg-line focus-visible:opacity-100 focus-visible:ring-2 focus-visible:ring-accent [@media(hover:none)]:opacity-100", |
| 136 | card ? "top-1/2 right-2.5 -translate-y-1/2" : "top-1 right-1", |
| 137 | pinned ? "text-accent opacity-100" : "text-faint opacity-0 group-hover/tile:opacity-100 hover:text-fg", |
| 138 | )} |
| 139 | > |
| 140 | <Pin size={13} className={pinned ? "fill-current" : undefined} /> |
| 141 | </button> |
| 142 | </Hint> |
| 143 | )} |
| 144 | </div> |
| 145 | ); |
| 146 | } |
| 147 | |
| 148 | /** When nothing is installed: what Apps are, and the way to Integrations. */ |
| 149 | export function NoApps({ slug, onOpen, compact = false }: { slug: string; onOpen?: () => void; compact?: boolean }) { |
| 150 | return ( |
| 151 | <div className={cn("flex flex-col items-center text-center", compact ? "px-4 py-6" : "rounded-xl border border-dashed border-line px-6 py-12")}> |
| 152 | <span className="flex size-10 items-center justify-center rounded-xl bg-raised text-muted ring-1 ring-line"> |
| 153 | <Plug size={18} /> |
| 154 | </span> |
| 155 | <p className="mt-3 text-sm font-medium">No apps installed yet</p> |
| 156 | <p className="mt-1 max-w-xs text-[0.8125rem] text-muted">Apps are the integrations your workspace connects. Each one you can use shows here.</p> |
| 157 | <Link to={`/${slug}/-/integrations`} onClick={onOpen} className="mt-4 inline-flex h-8 items-center gap-1.5 rounded-md bg-fg px-3 text-[0.8125rem] font-medium text-bg hover:bg-fg-hover"> |
| 158 | <Plug size={14} /> |
| 159 | Integrations |
| 160 | </Link> |
| 161 | </div> |
| 162 | ); |
| 163 | } |
| 164 | |
| 165 | /** |
| 166 | * The Apps launcher's body: a search, every app the workspace installed |
| 167 | * that the person can use (read from the Apps page as it opens), and the |
| 168 | * way to all of them and to Integrations. |
| 169 | */ |
| 170 | export function AppsLauncher({ slug, pins, onToggle, onClose }: { slug: string; pins: PinnableApp[]; onToggle: (app: PinnableApp) => void; onClose: () => void }) { |
| 171 | const [query, setQuery] = useState(""); |
| 172 | const loader = useFetcher<{ apps: InstalledAppData[] | null }>(); |
| 173 | useEffect(() => { |
| 174 | if (loader.state === "idle" && !loader.data) loader.load(`/${slug}/-/apps`); |
| 175 | // Once per opening: the launcher's body mounts when it opens. |
| 176 | // eslint-disable-next-line react-hooks/exhaustive-deps |
| 177 | }, [slug]); |
| 178 | const installed = loader.data?.apps; |
| 179 | const wanted = query.trim().toLowerCase(); |
| 180 | const apps = (installed ?? []).filter((app) => !wanted || app.name.toLowerCase().includes(wanted) || app.about.toLowerCase().includes(wanted)); |
| 181 | const loading = installed == null && !loader.data; |
| 182 | const failed = installed == null && !!loader.data; |
| 183 | return ( |
| 184 | <div className="flex flex-col gap-2"> |
| 185 | {/* The search is there from the first frame, so the launcher keeps its shape while the apps are read. */} |
| 186 | {(loading || (installed && installed.length > 0)) && ( |
| 187 | <Card asChild tone="bg" radius="lg" className="flex h-9 items-center gap-2 px-2.5 text-sm focus-within:border-line-strong"> |
| 188 | <label> |
| 189 | <Search size={15} className="shrink-0 text-faint" /> |
| 190 | <input |
| 191 | value={query} |
| 192 | onChange={(event) => setQuery(event.target.value)} |
| 193 | placeholder="Find an app" |
| 194 | aria-label="Find an app" |
| 195 | autoComplete="off" |
| 196 | className="min-w-0 grow bg-transparent outline-none placeholder:text-faint" |
| 197 | /> |
| 198 | </label> |
| 199 | </Card> |
| 200 | )} |
| 201 | {failed ? ( |
| 202 | <p className="px-2 py-6 text-center text-sm text-muted">Apps can't be listed right now. Try again in a moment.</p> |
| 203 | ) : loading ? ( |
| 204 | <div className="grid grid-cols-4 gap-1 max-sm:grid-cols-3" aria-busy="true" aria-label="Loading apps"> |
| 205 | {Array.from({ length: 4 }, (_, n) => ( |
| 206 | <div key={n} className="flex flex-col items-center gap-2 px-1 pt-3 pb-2.5"> |
| 207 | {/* On the launcher's raised surface the usual raised block would vanish: a line-coloured one shows. */} |
| 208 | <Skeleton className="size-10 rounded-xl bg-line" /> |
| 209 | <Skeleton className="h-2.5 w-12 bg-line" /> |
| 210 | <Skeleton className="h-2 w-8 bg-line" /> |
| 211 | </div> |
| 212 | ))} |
| 213 | </div> |
| 214 | ) : installed!.length === 0 ? ( |
| 215 | <NoApps slug={slug} onOpen={onClose} compact /> |
| 216 | ) : apps.length === 0 ? ( |
| 217 | <p className="px-2 py-6 text-center text-sm text-muted">No installed app matches.</p> |
| 218 | ) : ( |
| 219 | <div className="grid max-h-[min(23.5rem,60dvh)] grid-cols-4 gap-1 overflow-y-auto max-sm:grid-cols-3"> |
| 220 | {apps.map((app) => ( |
| 221 | <AppTile key={app.key} app={app} pinned={pins.includes(app.key)} onToggle={onToggle} onOpen={onClose} /> |
| 222 | ))} |
| 223 | </div> |
| 224 | )} |
| 225 | <div className="flex items-center justify-between border-t border-line pt-2"> |
| 226 | <Link |
| 227 | to={`/${slug}/-/apps`} |
| 228 | onClick={onClose} |
| 229 | className="flex h-8 items-center gap-1.5 rounded-md px-2 text-[0.8125rem] text-muted transition-colors hover:bg-line hover:text-fg" |
| 230 | > |
| 231 | <LayoutGrid size={14} /> |
| 232 | All apps |
| 233 | </Link> |
| 234 | <Link |
| 235 | to={`/${slug}/-/integrations`} |
| 236 | onClick={onClose} |
| 237 | className="flex h-8 items-center gap-1.5 rounded-md px-2 text-[0.8125rem] text-muted transition-colors hover:bg-line hover:text-fg" |
| 238 | > |
| 239 | <Plug size={14} /> |
| 240 | Integrations |
| 241 | </Link> |
| 242 | </div> |
| 243 | </div> |
| 244 | ); |
| 245 | } |