feat: implement universal icon system with Phosphor Icons

- 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)

apps/web/src/pages/projects.tsx

@@ -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>