feat(permissions): gate workspace resources by role

src/pages/WorkspaceDetail.tsx

@@ -1,8 +1,9 @@
 import { useEffect, useState } from 'react';
 import { useParams, useNavigate } from 'react-router-dom';
-import { ArrowLeft, ArrowRight, Edit2, Trash2 } from 'lucide-react';
-import { useTranslation } from '../hooks/useTranslation';
-import { getWorkspace, deleteWorkspace, type Workspace } from '../api/workspaces';
+import { ArrowLeft, ArrowRight, Edit2, Trash2 } from 'lucide-react';
+import { useTranslation } from '../hooks/useTranslation';
+import { getWorkspace, deleteWorkspace, type Workspace } from '../api/workspaces';
+import { WORKSPACE_DELETE, WORKSPACE_EDIT, canWorkspace } from '../lib/permissions';
 
 export default function WorkspaceDetail() {
   const { id } = useParams<{ id: string }>();
@@ -44,7 +45,8 @@ export default function WorkspaceDetail() {
     return <div className="p-8 text-center">{t.workspace?.loading}</div>;
   }
 
-  const canEdit = workspace.my_role === 'owner' || workspace.my_role === 'admin';
+  const canEdit = canWorkspace(workspace.my_role, WORKSPACE_EDIT);
+  const canDelete = canWorkspace(workspace.my_role, WORKSPACE_DELETE);
 
   return (
     <div className="max-w-4xl mx-auto p-6">
@@ -75,8 +77,8 @@ export default function WorkspaceDetail() {
               >
                 <Edit2 className="h-5 w-5" />
               </button>
-              {workspace.my_role === 'owner' && (
-                <button
+              {canDelete && (
+                <button
                   onClick={handleDelete}
                   className="p-2 text-slate-500 hover:text-red-600 bg-slate-50 dark:bg-slate-800 rounded-lg"
                 >