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