alex/headquarter
1
1
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: implement universal icon system with Phosphor Icons

Browse Source 
- Install @phosphor-icons/react package
- Create centralized Icon component with size/weight/color variants
- Create icon registry with 34 icons across 5 categories
- Replace all raw Unicode symbols with proper icon components
- Add icons to navigation, buttons, status indicators, git operations
- Add icon CSS with consistent sizing and spacing
- Fix type definitions for Phosphor icon compatibility

Quality gates: typecheck ✓, lint ✓, build ✓ (375KB bundle)
This commit is contained in:
Fusion
2026-05-19 19:33:06 +02:00
parent cccc4a9d5a
commit 6f41fa7cbe
37 changed files with 1037 additions and 41 deletions
Download Patch File Download Diff File Expand all files Collapse all files
apps/web/src/components/app-shell.tsx
+10 -6
View File
@@ -2,13 +2,15 @@ import { Link, NavLink, Outlet } from "react-router-dom";
import { useTheme } from "../hooks/use-theme";
import { useAuth } from "../state/auth";
import { Icon } from "./icon";
import type { IconName } from "../utils/icons";
const NAV_ITEMS = [
{ to: "/", label: "Dashboard" },
{ to: "/projects", label: "Projects" },
{ to: "/ssh-keys", label: "SSH Keys" },
{ to: "/tool-types", label: "Tool Types" },
{ to: "/settings", label: "Settings" }
const NAV_ITEMS: { to: string; label: string; icon: IconName }[] = [
{ to: "/", label: "Dashboard", icon: "dashboard" },
{ to: "/projects", label: "Projects", icon: "projects" },
{ to: "/ssh-keys", label: "SSH Keys", icon: "profile" },
{ to: "/tool-types", label: "Tool Types", icon: "code" },
{ to: "/settings", label: "Settings", icon: "settings" }
];
export const AppShell = () => {
@@ -32,6 +34,7 @@ export const AppShell = () => {
}}
type="button"
>
<Icon name="logout" size="sm" />
Logout
</button>
</div>
@@ -46,6 +49,7 @@ export const AppShell = () => {
className={({ isActive }) => (isActive ? "nav-item nav-item-active" : "nav-item")}
end={item.to === "/"}
>
<Icon name={item.icon} size="sm" />
{item.label}
</NavLink>
))}
apps/web/src/components/commit-dialog.tsx
+14 -1
View File
@@ -1,5 +1,7 @@
import React, { useState } from "react";
import { Icon } from "./icon";
interface CommitDialogProps {
isOpen: boolean;
filePath: string;
@@ -129,6 +131,7 @@ export const CommitDialog: React.FC<CommitDialogProps> = ({
onClick={onCancel}
type="button"
>
<Icon name="cancel" size="sm" />
Cancel
</button>
<button
@@ -137,7 +140,17 @@ export const CommitDialog: React.FC<CommitDialogProps> = ({
disabled={loading || !hasChanges || !message.trim()}
type="button"
>
{loading ? "Committing..." : "Commit Changes"}
{loading ? (
<>
<Icon name="loading" size="sm" />
Committing...
</>
) : (
<>
<Icon name="commit" size="sm" />
Commit Changes
</>
)}
</button>
</div>
</div>
apps/web/src/components/file-editor.tsx
+14 -1
View File
@@ -4,6 +4,7 @@ import { apiClient } from "../api/client";
import { useAuth } from "../state/auth";
import { CodeEditor } from "../components/code-editor";
import { CommitDialog } from "../components/commit-dialog";
import { Icon } from "../components/icon";
import { SyntaxHighlighter } from "../components/syntax-highlighter";
import { detectLanguage } from "../utils/language";
@@ -172,6 +173,7 @@ export const FileEditor: React.FC<FileEditorProps> = ({
onClick={handleEdit}
type="button"
>
<Icon name="edit" size="sm" />
Edit
</button>
)}
@@ -183,13 +185,24 @@ export const FileEditor: React.FC<FileEditorProps> = ({
disabled={content === originalContent || saving}
type="button"
>
{saving ? "Saving..." : "Save"}
{saving ? (
<>
<Icon name="loading" size="sm" />
Saving...
</>
) : (
<>
<Icon name="save" size="sm" />
Save
</>
)}
</button>
<button
className="btn-secondary"
onClick={handleCancel}
type="button"
>
<Icon name="cancel" size="sm" />
Cancel
</button>
</>
apps/web/src/components/git-toolbar.tsx
+20 -13
View File
@@ -9,6 +9,7 @@ import {
pushRepository,
type GitStatus,
} from "../api/git_repositories";
import { Icon } from "./icon";
import { MergeDialog } from "./merge-dialog";
interface GitToolbarProps {
@@ -140,7 +141,13 @@ export const GitToolbar = ({
>
{branches.map((b) => (
<option key={b} value={b}>
{b === currentBranch ? `● ${b}` : b}
{b === currentBranch ? (
<>
<Icon name="branch" size="sm" /> {b}
</>
) : (
b
)}
</option>
))}
</select>
@@ -150,18 +157,18 @@ export const GitToolbar = ({
disabled={loading}
type="button"
>
+ New
<Icon name="add" size="sm" /> New
</button>
</div>
<div className="toolbar-group">
<button
<button
className="toolbar-button"
onClick={handleFetch}
disabled={loading}
type="button"
>
↓ Fetch
<Icon name="fetch" size="sm" /> Fetch
</button>
<button
className="toolbar-button"
@@ -169,7 +176,7 @@ export const GitToolbar = ({
disabled={loading}
type="button"
>
⇣ Pull
<Icon name="pull" size="sm" /> Pull
{status?.behind ? <span className="badge">{status.behind}</span> : null}
</button>
<button
@@ -178,7 +185,7 @@ export const GitToolbar = ({
disabled={loading || !status?.ahead}
type="button"
>
⇡ Push
<Icon name="push" size="sm" /> Push
{status?.ahead ? <span className="badge">{status.ahead}</span> : null}
</button>
<button
@@ -187,7 +194,7 @@ export const GitToolbar = ({
disabled={loading}
type="button"
>
🔀 Merge
<Icon name="merge" size="sm" /> Merge
</button>
</div>
</div>
@@ -217,24 +224,24 @@ export const GitToolbar = ({
disabled={loading || !newBranchName.trim()}
type="button"
>
Create
<Icon name="add" size="sm" /> Create
</button>
<button
className="toolbar-button"
onClick={() => setShowNewBranch(false)}
type="button"
>
Cancel
<Icon name="cancel" size="sm" /> Cancel
</button>
</div>
)}
{hasChanges && status && (
<div className="toolbar-row status-summary">
{status.modified.length > 0 && <span className="status-badge modified">✏️ {status.modified.length} modified</span>}
{status.added.length > 0 && <span className="status-badge added">✨ {status.added.length} added</span>}
{status.deleted.length > 0 && <span className="status-badge deleted">🗑️ {status.deleted.length} deleted</span>}
{status.untracked.length > 0 && <span className="status-badge untracked">❓ {status.untracked.length} untracked</span>}
{status.modified.length > 0 && <span className="status-badge modified"><Icon name="edit" size="sm" /> {status.modified.length} modified</span>}
{status.added.length > 0 && <span className="status-badge added"><Icon name="add" size="sm" /> {status.added.length} added</span>}
{status.deleted.length > 0 && <span className="status-badge deleted"><Icon name="delete" size="sm" /> {status.deleted.length} deleted</span>}
{status.untracked.length > 0 && <span className="status-badge untracked"><Icon name="warning" size="sm" /> {status.untracked.length} untracked</span>}
</div>
)}
apps/web/src/components/icon.tsx
+150
View File
@@ -0,0 +1,150 @@
import React from "react";
import {
House,
Folder,
GitBranch,
Gear,
User,
SignOut,
Plus,
PencilSimple,
Trash,
FloppyDisk,
X,
ArrowsClockwise,
Copy,
MagnifyingGlass,
List,
Check,
Warning,
Info,
Spinner,
GitCommit,
GitMerge,
ClockCounterClockwise,
ArrowDown,
ArrowUp,
File,
FileText,
Image,
Binary,
Code,
} from "@phosphor-icons/react";
export type IconName =
| "dashboard"
| "projects"
| "repositories"
| "settings"
| "profile"
| "logout"
| "add"
| "edit"
| "delete"
| "save"
| "cancel"
| "refresh"
| "copy"
| "search"
| "menu"
| "close"
| "success"
| "error"
| "warning"
| "info"
| "loading"
| "branch"
| "commit"
| "merge"
| "history"
| "pull"
| "push"
| "fetch"
| "file"
| "folder"
| "code"
| "document"
| "image"
| "binary";
const iconMap: Record<IconName, React.ComponentType<{ size?: number | string; weight?: "thin" | "light" | "regular" | "bold" | "fill" | "duotone" }>> = {
dashboard: House,
projects: Folder,
repositories: GitBranch,
settings: Gear,
profile: User,
logout: SignOut,
add: Plus,
edit: PencilSimple,
delete: Trash,
save: FloppyDisk,
cancel: X,
refresh: ArrowsClockwise,
copy: Copy,
search: MagnifyingGlass,
menu: List,
close: X,
success: Check,
error: X,
warning: Warning,
info: Info,
loading: Spinner,
branch: GitBranch,
commit: GitCommit,
merge: GitMerge,
history: ClockCounterClockwise,
pull: ArrowDown,
push: ArrowUp,
fetch: ArrowsClockwise,
file: File,
folder: Folder,
code: Code,
document: FileText,
image: Image,
binary: Binary,
};
export interface IconProps {
name: IconName;
size?: "sm" | "md" | "lg" | "xl";
color?: string;
weight?: "thin" | "light" | "regular" | "bold" | "fill" | "duotone";
className?: string;
ariaLabel?: string;
}
const sizeMap: Record<NonNullable<IconProps["size"]>, number> = {
sm: 16,
md: 20,
lg: 24,
xl: 32,
};
export const Icon: React.FC<IconProps> = ({
name,
size = "md",
color,
weight = "regular",
className,
ariaLabel,
}) => {
const IconComponent = iconMap[name];
const sizeValue = sizeMap[size];
if (!IconComponent) {
console.warn(`Icon "${name}" not found`);
return null;
}
return (
<span
className={`icon icon-${size}${className ? ` ${className}` : ""}`}
style={{ color }}
aria-label={ariaLabel}
aria-hidden={!ariaLabel}
role="img"
>
<IconComponent size={sizeValue} weight={weight} />
</span>
);
};
apps/web/src/components/merge-dialog.tsx
+13 -1
View File
@@ -1,6 +1,7 @@
import { useState } from "react";
import { mergeBranches } from "../api/git_repositories";
import { Icon } from "./icon";
interface MergeDialogProps {
projectId: string;
@@ -114,6 +115,7 @@ export const MergeDialog = ({
disabled={loading}
type="button"
>
<Icon name="cancel" size="sm" />
Cancel
</button>
<button
@@ -122,7 +124,17 @@ export const MergeDialog = ({
disabled={loading || !sourceBranch}
type="button"
>
{loading ? "Merging..." : "Merge"}
{loading ? (
<>
<Icon name="loading" size="sm" />
Merging...
</>
) : (
<>
<Icon name="merge" size="sm" />
Merge
</>
)}
</button>
</div>
</div>
apps/web/src/components/syntax-highlighter.tsx
+13 -1
View File
@@ -1,4 +1,6 @@
import React, { useEffect, useState } from "react";
import { Icon } from "./icon";
import { highlightCode, loadLanguage } from "../utils/language";
interface SyntaxHighlighterProps {
@@ -40,7 +42,17 @@ export const SyntaxHighlighter: React.FC<SyntaxHighlighterProps> = ({
onClick={handleCopy}
type="button"
>
{copied ? "Copied!" : "Copy"}
{copied ? (
<>
<Icon name="success" size="sm" />
Copied!
</>
) : (
<>
<Icon name="copy" size="sm" />
Copy
</>
)}
</button>
</div>
<div className="code-container">
apps/web/src/components/workspace-header.tsx
+6 -3
View File
@@ -1,4 +1,5 @@
import { Link } from "react-router-dom";
import { Icon } from "./icon";
interface WorkspaceHeaderProps {
project: {
@@ -16,7 +17,9 @@ export const WorkspaceHeader = ({ project, currentRepo }: WorkspaceHeaderProps)
return (
<div className="workspace-header">
<div className="workspace-header-left">
<div className="workspace-header-icon">📁</div>
<div className="workspace-header-icon">
<Icon name="folder" size="lg" />
</div>
<div className="workspace-header-info">
<h1 className="workspace-header-title">{project.name}</h1>
{currentRepo && (
@@ -29,14 +32,14 @@ export const WorkspaceHeader = ({ project, currentRepo }: WorkspaceHeaderProps)
className="workspace-header-action-btn"
to={`/projects/${project.id}/repositories/${currentRepo?.id || ""}/history`}
>
<span className="icon">🕐</span>
<Icon name="history" size="sm" />
History
</Link>
<Link
className="workspace-header-action-btn"
to={`/projects/${project.id}/settings`}
>
<span className="icon">⚙️</span>
<Icon name="settings" size="sm" />
Settings
</Link>
</div>
apps/web/src/pages/dashboard.tsx
+4
View File
@@ -1,6 +1,7 @@
import { useCallback, useEffect, useMemo, useState } from "react";
import { getDashboardSummary, type DashboardSummary } from "../api/dashboard";
import { Icon } from "../components/icon";
const CARDS = [
{ label: "Projects", key: "projects" },
@@ -50,6 +51,7 @@ export const DashboardPage = () => {
<div className="card stack">
<p>Dashboard is unavailable</p>
<button className="secondary-button" onClick={() => void loadSummary()} type="button">
<Icon name="refresh" size="sm" />
Retry
</button>
</div>
@@ -68,9 +70,11 @@ export const DashboardPage = () => {
<div className="quick-actions">
<button className="primary-button" type="button">
<Icon name="add" size="sm" />
New Project
</button>
<button className="secondary-button" type="button">
<Icon name="add" size="sm" />
Add Repository
</button>
</div>
apps/web/src/pages/git-history.tsx
+3 -1
View File
@@ -2,6 +2,7 @@ import { useCallback, useEffect, useState } from "react";
import { useNavigate, useParams } from "react-router-dom";
import { getCommitDetail, getRepositoryHistory, type CommitDetail, type CommitHistoryEntry } from "../api/git_repositories";
import { Icon } from "../components/icon";
export const GitHistoryPage = () => {
const { projectId, repoId } = useParams<{ projectId: string; repoId: string }>();
@@ -70,6 +71,7 @@ export const GitHistoryPage = () => {
<section className="stack">
<p>Failed to load commit history</p>
<button className="secondary-button" onClick={() => void loadHistory()} type="button">
<Icon name="refresh" size="sm" />
Retry
</button>
</section>
@@ -155,7 +157,7 @@ export const GitHistoryPage = () => {
<div className="detail-header">
<h3>Commit Details</h3>
<button className="ghost-button" onClick={handleCloseDetail} type="button">
×
<Icon name="close" size="sm" />
</button>
</div>
apps/web/src/pages/git-repositories.tsx
+10 -3
View File
@@ -10,6 +10,7 @@ import {
type URLParseResult,
} from "../api/git_repositories";
import type { GitRepository } from "../api/git_repositories";
import { Icon } from "../components/icon";
type RepoStatus = "loading" | "ready" | "error";
type UrlValidationStatus = "idle" | "validating" | "valid" | "needs-parsing" | "invalid";
@@ -160,6 +161,7 @@ export const GitRepositoriesPage = () => {
<div className="page-header">
<h1>Repositories</h1>
<button className="primary-button" onClick={() => setShowCreate(true)} type="button">
<Icon name="add" size="sm" />
New Repository
</button>
</div>
@@ -170,6 +172,7 @@ export const GitRepositoriesPage = () => {
<div className="card stack">
<p>Failed to load repositories</p>
<button className="secondary-button" onClick={() => void loadRepositories()} type="button">
<Icon name="refresh" size="sm" />
Retry
</button>
</div>
@@ -256,12 +259,14 @@ export const GitRepositoriesPage = () => {
<span className="validation-status validating">Validating...</span>
)}
{urlValidation.status === "valid" && (
<span className="validation-status valid">✓ Valid git URL</span>
<span className="validation-status valid">
<Icon name="success" size="sm" /> Valid git URL
</span>
)}
{urlValidation.status === "needs-parsing" && urlValidation.result && (
<div className="url-suggestion">
<span className="validation-status warning">
⚠ This looks like a browser URL
<Icon name="warning" size="sm" /> This looks like a browser URL
</span>
<div className="suggestion-actions">
<span className="suggested-url">
@@ -279,7 +284,7 @@ export const GitRepositoriesPage = () => {
)}
{urlValidation.status === "invalid" && (
<span className="validation-status invalid">
✗ Invalid URL
<Icon name="error" size="sm" /> Invalid URL
</span>
)}
</label>
@@ -292,9 +297,11 @@ export const GitRepositoriesPage = () => {
)}
<div className="dialog-actions">
<button className="secondary-button" onClick={() => setShowCreate(false)} type="button">
<Icon name="cancel" size="sm" />
Cancel
</button>
<button className="primary-button" type="submit">
<Icon name="add" size="sm" />
Create
</button>
</div>
apps/web/src/pages/placeholder.tsx
+3
View File
@@ -18,6 +18,8 @@ export const NotFoundPage = () => {
const API_BASE_URL = import.meta.env.VITE_API_BASE_URL ?? "http://localhost:8000";
import { Icon } from "../components/icon";
export const LoginRedirectPage = () => {
const nextPath = new URLSearchParams(window.location.search).get("next") ?? "/";
const encodedNext = encodeURIComponent(nextPath);
@@ -27,6 +29,7 @@ export const LoginRedirectPage = () => {
<h1>Sign in required</h1>
<p className="muted">You need to authenticate to access this section.</p>
<a className="primary-button" href={`${API_BASE_URL}/auth/login?next=${encodedNext}`}>
<Icon name="profile" size="sm" />
Continue to login
</a>
</section>
apps/web/src/pages/profile.tsx
+24 -2
View File
@@ -1,6 +1,7 @@
import { useCallback, useEffect, useRef, useState } from "react";
import { getProfile, updateProfile, uploadAvatar } from "../api/profile";
import { Icon } from "../components/icon";
import { useAuth } from "../state/auth";
import type { UserProfile } from "../api/profile";
@@ -99,6 +100,7 @@ export const ProfilePage = () => {
<div className="card stack">
<p>Failed to load profile</p>
<button className="secondary-button" onClick={() => void loadProfile()} type="button">
<Icon name="refresh" size="sm" />
Retry
</button>
</div>
@@ -120,7 +122,17 @@ export const ProfilePage = () => {
onClick={() => fileInputRef.current?.click()}
type="button"
>
{status === "saving" ? "Uploading..." : "Change Avatar"}
{status === "saving" ? (
<>
<Icon name="loading" size="sm" />
Uploading...
</>
) : (
<>
<Icon name="edit" size="sm" />
Change Avatar
</>
)}
</button>
<input
accept="image/png,image/jpeg"
@@ -162,7 +174,17 @@ export const ProfilePage = () => {
onClick={() => void handleSave()}
type="button"
>
{status === "saving" ? "Saving..." : "Save Changes"}
{status === "saving" ? (
<>
<Icon name="loading" size="sm" />
Saving...
</>
) : (
<>
<Icon name="save" size="sm" />
Save Changes
</>
)}
</button>
</div>
</div>
apps/web/src/pages/projects.tsx
+19 -1
View File
@@ -10,6 +10,7 @@ import {
type ProjectCreateInput,
type ProjectUpdateInput,
} from "../api/projects";
import { Icon } from "../components/icon";
import type { Project } from "../types";
type ProjectsStatus = "loading" | "ready" | "error";
@@ -110,6 +111,7 @@ export const ProjectsPage = () => {
<div className="page-header">
<h1>Projects</h1>
<button className="primary-button" onClick={openCreate} type="button">
<Icon name="add" size="sm" />
New Project
</button>
</div>
@@ -120,6 +122,7 @@ export const ProjectsPage = () => {
<div className="card stack">
<p>Failed to load projects</p>
<button className="secondary-button" onClick={() => void loadProjects()} type="button">
<Icon name="refresh" size="sm" />
Retry
</button>
</div>
@@ -144,6 +147,7 @@ export const ProjectsPage = () => {
onClick={() => openEdit(project)}
type="button"
>
<Icon name="edit" size="sm" />
Edit
</button>
{deleteConfirmId === project.id ? (
@@ -154,6 +158,7 @@ export const ProjectsPage = () => {
onClick={() => void handleDelete(project.id)}
type="button"
>
<Icon name="delete" size="sm" />
Delete
</button>
<button
@@ -161,6 +166,7 @@ export const ProjectsPage = () => {
onClick={() => setDeleteConfirmId(null)}
type="button"
>
<Icon name="cancel" size="sm" />
Cancel
</button>
</div>
@@ -170,6 +176,7 @@ export const ProjectsPage = () => {
onClick={() => setDeleteConfirmId(project.id)}
type="button"
>
<Icon name="delete" size="sm" />
Delete
</button>
)}
@@ -205,10 +212,21 @@ export const ProjectsPage = () => {
{formError && <p className="error-text">{formError}</p>}
<div className="dialog-actions">
<button className="secondary-button" onClick={closeDialog} type="button">
<Icon name="cancel" size="sm" />
Cancel
</button>
<button className="primary-button" type="submit">
{dialogMode === "create" ? "Create" : "Save"}
{dialogMode === "create" ? (
<>
<Icon name="add" size="sm" />
Create
</>
) : (
<>
<Icon name="save" size="sm" />
Save
</>
)}
</button>
</div>
</form>
apps/web/src/pages/repo-workspace.tsx
+4 -2
View File
@@ -1,4 +1,5 @@
import { useCallback, useEffect, useState } from "react";
import { Icon } from "../components/icon";
import { Link, useParams, useSearchParams } from "react-router-dom";
@@ -155,6 +156,7 @@ export const RepoWorkspace = () => {
onClick={() => void loadRepositories()}
type="button"
>
<Icon name="refresh" size="sm" />
Retry
</button>
</div>
@@ -338,7 +340,7 @@ const FileBrowser = ({
<div className="file-tree">
{path && (
<button className="tree-entry tree-up" onClick={navigateUp} type="button">
📁 ..
<Icon name="folder" size="sm" /> ..
</button>
)}
{entries.map((entry) => {
@@ -350,7 +352,7 @@ const FileBrowser = ({
onClick={() => handleEntryClick(entry)}
type="button"
>
{entry.type === "directory" ? "📁" : "📄"} {entry.name}
<Icon name={entry.type === "directory" ? "folder" : "file"} size="sm" /> {entry.name}
{fileStatus && (
<span className={`file-status-indicator ${fileStatus}`}>
{fileStatus === "modified" && "M"}
apps/web/src/pages/settings.tsx
+13 -1
View File
@@ -1,6 +1,7 @@
import { useCallback, useEffect, useState } from "react";
import { getUserConfig, updateUserConfig, type UserConfig, type UserConfigUpdate } from "../api/settings";
import { Icon } from "../components/icon";
type SettingsStatus = "loading" | "ready" | "error";
@@ -66,6 +67,7 @@ export const SettingsPage = () => {
<section className="stack">
<p>Failed to load settings</p>
<button className="secondary-button" onClick={() => void loadConfig()} type="button">
<Icon name="refresh" size="sm" />
Retry
</button>
</section>
@@ -132,7 +134,17 @@ export const SettingsPage = () => {
<div className="settings-actions">
<button className="primary-button" onClick={() => void handleSave()} type="button">
{saveStatus === "saving" ? "Saving..." : "Save Settings"}
{saveStatus === "saving" ? (
<>
<Icon name="loading" size="sm" />
Saving...
</>
) : (
<>
<Icon name="save" size="sm" />
Save Settings
</>
)}
</button>
{saveStatus === "saved" && <span className="success-text">Settings saved!</span>}
{saveStatus === "error" && <span className="error-text">Failed to save</span>}
apps/web/src/pages/ssh-keys.tsx
+14 -1
View File
@@ -1,5 +1,6 @@
import { useEffect, useState } from "react";
import { createSSHKey, deleteSSHKey, listSSHKeys, type SSHKey } from "../api/ssh_keys";
import { Icon } from "../components/icon";
export const SSHKeysPage = () => {
const [keys, setKeys] = useState<SSHKey[]>([]);
@@ -77,7 +78,17 @@ export const SSHKeysPage = () => {
/>
</div>
<button type="submit" className="primary-button" disabled={generating}>
{generating ? "Generating..." : "Generate SSH Key"}
{generating ? (
<>
<Icon name="loading" size="sm" />
Generating...
</>
) : (
<>
<Icon name="add" size="sm" />
Generate SSH Key
</>
)}
</button>
</form>
@@ -93,6 +104,7 @@ export const SSHKeysPage = () => {
onClick={() => handleDelete(key.id)}
className="danger-button"
>
<Icon name="delete" size="sm" />
Delete
</button>
</div>
@@ -107,6 +119,7 @@ export const SSHKeysPage = () => {
onClick={() => copyToClipboard(key.public_key)}
className="secondary-button"
>
<Icon name="copy" size="sm" />
Copy Full Key
</button>
</div>
apps/web/src/pages/tool-types.tsx
+30 -4
View File
@@ -8,6 +8,7 @@ import {
type CreateToolTypeRequest,
type UpdateToolTypeRequest,
} from "../api/tool_types";
import { Icon } from "../components/icon";
import type { ToolType } from "../api/tool_types";
type ToolTypesStatus = "loading" | "ready" | "error";
@@ -134,7 +135,10 @@ export const ToolTypesPage = () => {
return (
<div className="container">
<p className="text-error">Failed to load tool types.</p>
<button onClick={loadToolTypes}>Retry</button>
<button onClick={loadToolTypes}>
<Icon name="refresh" size="sm" />
Retry
</button>
</div>
);
}
@@ -143,7 +147,10 @@ export const ToolTypesPage = () => {
<div className="container">
<div style={{ display: "flex", justifyContent: "space-between", alignItems: "center", marginBottom: "1rem" }}>
<h1>Tool Types</h1>
<button onClick={openCreate}>Create Tool Type</button>
<button onClick={openCreate}>
<Icon name="add" size="sm" />
Create Tool Type
</button>
</div>
{toolTypes.length === 0 ? (
@@ -161,12 +168,14 @@ export const ToolTypesPage = () => {
{!toolType.is_builtin && (
<>
<button onClick={() => openEdit(toolType)} className="button-secondary">
<Icon name="edit" size="sm" />
Edit
</button>
<button
onClick={() => setDeleteConfirmId(toolType.id)}
className="button-danger"
>
<Icon name="delete" size="sm" />
Delete
</button>
</>
@@ -179,9 +188,13 @@ export const ToolTypesPage = () => {
<p>Delete tool type "{toolType.display_name}"?</p>
<div className="dialog-actions">
<button onClick={() => handleDelete(toolType.id)} className="button-danger">
<Icon name="delete" size="sm" />
Delete
</button>
<button onClick={() => setDeleteConfirmId(null)}>Cancel</button>
<button onClick={() => setDeleteConfirmId(null)}>
<Icon name="cancel" size="sm" />
Cancel
</button>
</div>
</div>
</div>
@@ -250,8 +263,21 @@ export const ToolTypesPage = () => {
{formError && <p className="text-error">{formError}</p>}
<div className="dialog-actions">
<button type="submit">{dialogMode === "create" ? "Create" : "Update"}</button>
<button type="submit">
{dialogMode === "create" ? (
<>
<Icon name="add" size="sm" />
Create
</>
) : (
<>
<Icon name="save" size="sm" />
Update
</>
)}
</button>
<button type="button" onClick={closeDialog} className="button-secondary">
<Icon name="cancel" size="sm" />
Cancel
</button>
</div>
apps/web/src/styles.css
+54
View File
@@ -1742,3 +1742,57 @@ pre[class*="language-"] {
.token.variable {
color: #ec4899;
}
/* Icon System */
.icon {
display: inline-flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
vertical-align: middle;
}
.icon svg {
display: block;
}
.icon-sm {
width: 16px;
height: 16px;
}
.icon-md {
width: 20px;
height: 20px;
}
.icon-lg {
width: 24px;
height: 24px;
}
.icon-xl {
width: 32px;
height: 32px;
}
/* Button icons */
button .icon,
a .icon {
margin-right: 0.35rem;
}
button .icon:last-child,
a .icon:last-child {
margin-right: 0;
}
/* Navigation icons */
.nav-item .icon {
margin-right: 0.5rem;
}
/* Status badge icons */
.status-badge .icon {
margin-right: 0.25rem;
}
apps/web/src/utils/icons.ts
+163
View File
@@ -0,0 +1,163 @@
import {
House,
Folder,
GitBranch,
Gear,
User,
SignOut,
Plus,
PencilSimple,
Trash,
FloppyDisk,
X,
ArrowsClockwise,
Copy,
MagnifyingGlass,
List,
Check,
Warning,
Info,
Spinner,
GitCommit,
GitMerge,
ClockCounterClockwise,
ArrowDown,
ArrowUp,
File,
FileText,
Image,
Binary,
Code,
} from "@phosphor-icons/react";
export type IconName =
| "dashboard"
| "projects"
| "repositories"
| "settings"
| "profile"
| "logout"
| "add"
| "edit"
| "delete"
| "save"
| "cancel"
| "refresh"
| "copy"
| "search"
| "menu"
| "close"
| "success"
| "error"
| "warning"
| "info"
| "loading"
| "branch"
| "commit"
| "merge"
| "history"
| "pull"
| "push"
| "fetch"
| "file"
| "folder"
| "code"
| "document"
| "image"
| "binary";
export const iconRegistry: Record<
IconName,
React.ComponentType<{ size?: number | string; weight?: "thin" | "light" | "regular" | "bold" | "fill" | "duotone" }>
> = {
// Navigation
dashboard: House,
projects: Folder,
repositories: GitBranch,
settings: Gear,
profile: User,
logout: SignOut,
// Actions
add: Plus,
edit: PencilSimple,
delete: Trash,
save: FloppyDisk,
cancel: X,
refresh: ArrowsClockwise,
copy: Copy,
search: MagnifyingGlass,
menu: List,
close: X,
// Status
success: Check,
error: X,
warning: Warning,
info: Info,
loading: Spinner,
// Git
branch: GitBranch,
commit: GitCommit,
merge: GitMerge,
history: ClockCounterClockwise,
pull: ArrowDown,
push: ArrowUp,
fetch: ArrowsClockwise,
// Files
file: File,
folder: Folder,
code: Code,
document: FileText,
image: Image,
binary: Binary,
};
export const iconCategories = {
navigation: [
"dashboard",
"projects",
"repositories",
"settings",
"profile",
"logout",
] as IconName[],
actions: [
"add",
"edit",
"delete",
"save",
"cancel",
"refresh",
"copy",
"search",
"menu",
"close",
] as IconName[],
status: [
"success",
"error",
"warning",
"info",
"loading",
] as IconName[],
git: [
"branch",
"commit",
"merge",
"history",
"pull",
"push",
"fetch",
] as IconName[],
files: [
"file",
"folder",
"code",
"document",
"image",
"binary",
] as IconName[],
};