Add vault category permissions dialog with role/user management

packages/admin/src/routes/_authenticated/vault/index.tsx

@@ -18,9 +18,10 @@ import {
 } from '@/components/ui/dropdown-menu'
 import {
   KeyRound, Lock, Unlock, Plus, MoreVertical, Trash2, Eye, EyeOff, Copy,
-  FolderKey, ShieldAlert, User2, Globe, StickyNote,
+  FolderKey, Shield, ShieldAlert, User2, Globe, StickyNote,
 } from 'lucide-react'
 import { toast } from 'sonner'
+import { CategoryPermissionsDialog } from '@/components/vault/category-permissions-dialog'
 import type { VaultCategory, VaultEntry } from '@/types/vault'
 
 export const Route = createFileRoute('/_authenticated/vault/')({
@@ -155,6 +156,7 @@ function VaultMain() {
   const [newEntryOpen, setNewEntryOpen] = useState(false)
   const [entryForm, setEntryForm] = useState({ name: '', username: '', url: '', notes: '', secret: '' })
   const [editEntryId, setEditEntryId] = useState<string | null>(null)
+  const [permissionsOpen, setPermissionsOpen] = useState(false)
 
   const { data: catData, isLoading: catsLoading } = useQuery(vaultCategoryListOptions())
   const { data: catDetail } = useQuery(vaultCategoryDetailOptions(selectedCategoryId ?? ''))
@@ -319,9 +321,14 @@ function VaultMain() {
           {selectedCategoryId && (
             <>
               {catDetail?.accessLevel === 'admin' && (
-                <Button variant="outline" size="sm" onClick={() => deleteCatMutation.mutate(selectedCategoryId)}>
-                  <Trash2 className="mr-2 h-4 w-4" />Delete Category
-                </Button>
+                <>
+                  <Button variant="outline" size="sm" onClick={() => setPermissionsOpen(true)}>
+                    <Shield className="mr-2 h-4 w-4" />Permissions
+                  </Button>
+                  <Button variant="outline" size="sm" onClick={() => deleteCatMutation.mutate(selectedCategoryId)}>
+                    <Trash2 className="mr-2 h-4 w-4" />Delete Category
+                  </Button>
+                </>
               )}
               {hasPermission('vault.edit') && (
                 <Button variant="outline" size="sm" onClick={() => {
@@ -360,6 +367,17 @@ function VaultMain() {
         </div>
       </div>
 
+      {/* Permissions Dialog */}
+      {selectedCategoryId && catDetail && (
+        <CategoryPermissionsDialog
+          categoryId={selectedCategoryId}
+          categoryName={catDetail.name ?? ''}
+          isPublic={catDetail.isPublic ?? false}
+          open={permissionsOpen}
+          onOpenChange={setPermissionsOpen}
+        />
+      )}
+
       {/* Entry Dialog */}
       <Dialog open={newEntryOpen} onOpenChange={(open) => { setNewEntryOpen(open); if (!open) setEditEntryId(null) }}>
         <DialogContent>