Projects show what they are by their icon: the projects list and grid, and the sidebar's Pinned, Recent and Projects rows, drew the same box for every project. ProjectIcon (components/project-icon.tsx) now picks one from Project.kind: a window for an app or site, books for a library, a terminal for a tool or CLI, an open book for documentation, and the box for anything else. The sidebar still shows a lock for a private project, where nothing else on its row says so; the list keeps its private badge beside the name. Sidebar shortcuts (shortcutOf, ShortcutProject) carry the kind. Checked: apps/web typecheck, lib/pins tests. · 216cb23 · flagon-io/g1t

1	+	import { AppWindow, BookOpen, Box, Library, Lock, SquareTerminal } from "lucide-react";
2	+
3	+	import type { ProjectKind } from "@g1t/contracts";
4	+
5	+	/** Each kind's glyph, so a list says what each project is at a glance. */
6	+	const GLYPH: Record<ProjectKind, typeof Box> = {
7	+	app: AppWindow,
8	+	library: Library,
9	+	tool: SquareTerminal,
10	+	docs: BookOpen,
11	+	other: Box,
12	+	};
13	+
14	+	/**
15	+	* What a project is, as an icon: an app or site, a library, a tool, docs, or
16	+	* a box for anything else or a kind not known. `lockPrivate` shows a lock
17	+	* instead for a private one, where nothing else on the row says so.
18	+	*/
19	+	export function ProjectIcon({ kind, isPrivate, lockPrivate, size }: { kind?: ProjectKind \| null; isPrivate?: boolean; lockPrivate?: boolean; size?: number }) {
20	+	if (isPrivate && lockPrivate) return <Lock size={size} />;
21	+	const Glyph = (kind && GLYPH[kind]) \|\| Box;
22	+	return <Glyph size={size} />;
23	+	}

75	75		import { STATUS_URL, statusTitle } from "../lib/status";
76	76		import { G1T_INVITES, leftBadge } from "../lib/invites";
77	77		import { type ShortcutProject, movedPin, recentWith } from "../lib/pins";
	78	+	import { ProjectIcon } from "./project-icon";
78	79		import type { AccountMenuData } from "../routes/settings-menu-json";
79	80		import { useLiveBadges } from "../lib/notify-client";
80	81		import { OwnPresenceDot, OwnPresenceItems, StatusDialog } from "./presence";
⋯
641	642		const row = (project: ShortcutProject, isPinned: boolean) => (
642	643		<SidebarLink
643	644		to={`/${project.namespace}/${project.name}`}
644		−	icon={project.isPrivate ? <Lock /> : <Box />}
	645	+	icon={<ProjectIcon kind={project.kind} isPrivate={project.isPrivate} lockPrivate />}
645	646		bare={isPinned}
646	647		action={
647	648		// At the row's end, where the row's other actions sit, and only on
⋯
1198	1199		<Rule />
1199	1200		<NavGroup title="Projects">
1200	1201		{projects.slice(0, 8).map((project) => (
1201		−	<SidebarLink key={project.name} to={`/${project.namespace}/${project.name}`} icon={<Box size={15} />}>
	1202	+	<SidebarLink key={project.name} to={`/${project.namespace}/${project.name}`} icon={<ProjectIcon kind={project.kind} isPrivate={project.isPrivate} lockPrivate size={15} />}>
1202	1203		{project.title}
1203	1204		</SidebarLink>
1204	1205		))}

5	5		* service keeps both; opening a project records it after the page is sent.
6	6		*/
7	7
	8	+	import type { ProjectKind } from "@g1t/contracts";
	9	+
8	10		/** A project as the sidebar lists it. */
9		−	export type ShortcutProject = { namespace: string; name: string; title?: string; isPrivate: boolean };
	11	+	export type ShortcutProject = { namespace: string; name: string; title?: string; isPrivate: boolean; kind?: ProjectKind };
10	12
11	13		export const MAX_PINS = 8;
12	14		export const MAX_RECENT = 5;

17	17		}
18	18
19	19		/** What a project is in the sidebar and the command palette. */
20		−	export function shortcutOf(project: Project): { namespace: string; name: string; title: string; isPrivate: boolean } {
21		−	return { namespace: project.workspace, name: project.slug, title: project.name, isPrivate: project.private };
	20	+	export function shortcutOf(project: Project): { namespace: string; name: string; title: string; isPrivate: boolean; kind: Project["kind"] } {
	21	+	return { namespace: project.workspace, name: project.slug, title: project.name, isPrivate: project.private, kind: project.kind };
22	22		}

1		−	import { ArrowUpRight, Box, ChevronLeft, ChevronRight, LayoutGrid, List, Lock, Rocket, Search } from "lucide-react";
	1	+	import { ArrowUpRight, ChevronLeft, ChevronRight, LayoutGrid, List, Rocket, Search } from "lucide-react";
2	2		import { type KeyboardEvent, useEffect, useRef, useState } from "react";
3	3		import { Form, Link, useLocation, useNavigation, useSubmit } from "react-router";
4	4
⋯
28	28		readProjectQuery,
29	29		} from "../../lib/project-list";
30	30		import { kindLabel, primaryLink } from "../../lib/project-kind";
	31	+	import { ProjectIcon } from "../../components/project-icon";
31	32		import { deployments, projects } from "../../lib/services.server";
32	33		import { getViewer, roleIn } from "../../lib/session.server";
33	34		import { workspaceProjects } from "../../lib/workspace-projects.server";
⋯
120	121		return (
121	122		<li className="group relative flex items-center gap-3 px-4 py-3 transition-colors focus-within:bg-raised/60 hover:bg-raised/60">
122	123		<span className="flex size-8 shrink-0 items-center justify-center rounded-md bg-raised text-muted ring-1 ring-line">
123		−	{project.private ? <Lock size={14} /> : <Box size={14} />}
	124	+	<ProjectIcon kind={project.kind} size={14} />
124	125		</span>
125	126		<div className="min-w-0 grow">
126	127		<div className="flex min-w-0 flex-wrap items-center gap-x-2 gap-y-1">
⋯
160	161		<li className="group relative flex flex-col rounded-2xl border border-line bg-surface p-5 transition-colors focus-within:border-line-strong hover:border-line-strong">
161	162		<div className="flex items-start gap-3">
162	163		<span className="flex size-9 shrink-0 items-center justify-center rounded-lg bg-raised text-muted ring-1 ring-line">
163		−	{project.private ? <Lock size={15} /> : <Box size={15} />}
	164	+	<ProjectIcon kind={project.kind} size={15} />
164	165		</span>
165	166		<div className="min-w-0 grow">
166	167		<Link

flagon-io/g1t

Comments