feat(web): add workspace management UI (M2 #12)

- Create workspace listing page at /settings/workspaces
  - List all user workspaces with role badges
  - Create new workspace functionality
  - Display member count per workspace

- Create workspace detail page at /settings/workspaces/[id]
  - Workspace settings (name, ID, created date)
  - Member management with role editing
  - Invite member functionality
  - Delete workspace (owner only)

- Add workspace components:
  - WorkspaceCard: Display workspace info with role badge
  - WorkspaceSettings: Edit workspace settings and delete
  - MemberList: Display and manage workspace members
  - InviteMember: Send invitations with role selection

- Add WorkspaceMemberWithUser type to shared package
- Follow existing app patterns for styling and structure
- Use mock data (ready for API integration)

apps/web/src/components/knowledge/EntryCard.tsx

@@ -0,0 +1,106 @@
+import type { KnowledgeEntryWithTags } from "@mosaic/shared";
+import { EntryStatus } from "@mosaic/shared";
+import Link from "next/link";
+import { FileText, Eye, Users, Lock } from "lucide-react";
+
+interface EntryCardProps {
+  entry: KnowledgeEntryWithTags;
+}
+
+const statusConfig = {
+  [EntryStatus.DRAFT]: {
+    label: "Draft",
+    className: "bg-gray-100 text-gray-700",
+    icon: "📝",
+  },
+  [EntryStatus.PUBLISHED]: {
+    label: "Published",
+    className: "bg-green-100 text-green-700",
+    icon: "✅",
+  },
+  [EntryStatus.ARCHIVED]: {
+    label: "Archived",
+    className: "bg-amber-100 text-amber-700",
+    icon: "📦",
+  },
+};
+
+const visibilityIcons = {
+  PRIVATE: <Lock className="w-3 h-3" />,
+  WORKSPACE: <Users className="w-3 h-3" />,
+  PUBLIC: <Eye className="w-3 h-3" />,
+};
+
+export function EntryCard({ entry }: EntryCardProps) {
+  const statusInfo = statusConfig[entry.status];
+  const visibilityIcon = visibilityIcons[entry.visibility];
+
+  return (
+    <Link
+      href={`/knowledge/${entry.slug}`}
+      className="block bg-white p-5 rounded-lg shadow-sm border border-gray-200 hover:shadow-md hover:border-blue-300 transition-all"
+    >
+      <div className="flex items-start gap-4">
+        <div className="flex-shrink-0 mt-1">
+          <FileText className="w-5 h-5 text-gray-400" />
+        </div>
+
+        <div className="flex-1 min-w-0">
+          {/* Title */}
+          <h3 className="font-semibold text-gray-900 mb-2 text-lg hover:text-blue-600 transition-colors">
+            {entry.title}
+          </h3>
+
+          {/* Summary */}
+          {entry.summary && (
+            <p className="text-sm text-gray-600 mb-3 line-clamp-2">
+              {entry.summary}
+            </p>
+          )}
+
+          {/* Tags */}
+          {entry.tags && entry.tags.length > 0 && (
+            <div className="flex flex-wrap gap-1.5 mb-3">
+              {entry.tags.map((tag) => (
+                <span
+                  key={tag.id}
+                  className="inline-flex items-center px-2 py-0.5 rounded-full text-xs font-medium"
+                  style={{
+                    backgroundColor: tag.color ? `${tag.color}20` : "#E5E7EB",
+                    color: tag.color || "#6B7280",
+                  }}
+                >
+                  {tag.name}
+                </span>
+              ))}
+            </div>
+          )}
+
+          {/* Metadata row */}
+          <div className="flex flex-wrap items-center gap-3 text-xs text-gray-500">
+            {/* Status */}
+            <span className={`inline-flex items-center gap-1 px-2 py-1 rounded-full ${statusInfo.className}`}>
+              <span>{statusInfo.icon}</span>
+              <span>{statusInfo.label}</span>
+            </span>
+
+            {/* Visibility */}
+            <span className="inline-flex items-center gap-1">
+              {visibilityIcon}
+              <span className="capitalize">{entry.visibility.toLowerCase()}</span>
+            </span>
+
+            {/* Updated date */}
+            <span>
+              Updated {new Date(entry.updatedAt).toLocaleDateString("en-US", {
+                month: "short",
+                day: "numeric",
+                year: "numeric",
+              })}
+            </span>
+          </div>
+        </div>
+      </div>
+    </Link>
+  );
+}