Multiuser support (#60)

2026-01-21 22:54:29 +01:00 · 2025-02-18 23:43:23 -05:00
parent 363b31e934
commit 8ac2ec053d
48 changed files with 2678 additions and 271 deletions
--- a/components/PermissionSelector.tsx
+++ b/components/PermissionSelector.tsx
@@ -0,0 +1,107 @@
+'use client';
+
+import { Switch } from './ui/switch';
+import { Label } from './ui/label';
+import { Permission } from '@/lib/types';
+
+interface PermissionSelectorProps {
+  permissions: Permission[];
+  isAdmin: boolean;
+  onPermissionsChange: (permissions: Permission[]) => void;
+  onAdminChange: (isAdmin: boolean) => void;
+}
+
+const permissionLabels: { [key: string]: string } = {
+  habit: 'Habit / Task',
+  wishlist: 'Wishlist',
+  coins: 'Coins'
+};
+
+export function PermissionSelector({
+  permissions,
+  isAdmin,
+  onPermissionsChange,
+  onAdminChange,
+}: PermissionSelectorProps) {
+  const currentPermissions = isAdmin ?
+    {
+      habit: { write: true, interact: true },
+      wishlist: { write: true, interact: true },
+      coins: { write: true, interact: true }
+    } :
+    permissions[0] || {
+      habit: { write: false, interact: true },
+      wishlist: { write: false, interact: true },
+      coins: { write: false, interact: true }
+    };
+
+  const handlePermissionChange = (resource: keyof Permission, type: 'write' | 'interact', checked: boolean) => {
+    const newPermissions = [{
+      ...currentPermissions,
+      [resource]: {
+        ...currentPermissions[resource],
+        [type]: checked
+      }
+    }];
+    onPermissionsChange(newPermissions);
+  };
+
+  return (
+    <div className="space-y-4">
+      <div className="space-y-2">
+        <Label>Permissions</Label>
+        <div className="grid grid-cols-1 gap-4">
+          <div className="flex items-center justify-between p-3 rounded-lg border bg-muted/50">
+            <div className="flex items-center gap-2">
+              <div className="font-medium text-sm">Admin Access</div>
+            </div>
+            <Switch
+              id="isAdmin"
+              className="h-4 w-7"
+              checked={isAdmin}
+              onCheckedChange={onAdminChange}
+            />
+          </div>
+
+          {isAdmin ? (
+            <p className="text-xs text-muted-foreground px-3">
+              Admins have full permission to all data for all users
+            </p>
+          ) : (
+            <div className="grid grid-cols-3 gap-4">
+              {['habit', 'wishlist', 'coins'].map((resource) => (
+                <div key={resource} className="p-3 space-y-3 rounded-lg border bg-muted/50">
+                  <div className="font-medium capitalize text-sm border-b pb-2">{permissionLabels[resource]}</div>
+                  <div className="flex flex-col gap-2.5">
+                    <div className="flex flex-col sm:flex-row items-start sm:items-center justify-between gap-2">
+                    <Label htmlFor={`${resource}-write`} className="text-xs text-muted-foreground break-words">Write</Label>
+                      <Switch
+                        id={`${resource}-write`}
+                        className="h-4 w-7"
+                        checked={currentPermissions[resource as keyof Permission].write}
+                        onCheckedChange={(checked) =>
+                          handlePermissionChange(resource as keyof Permission, 'write', checked)
+                        }
+                      />
+                    </div>
+                    <div className="flex flex-col sm:flex-row items-start sm:items-center justify-between gap-2">
+                    <Label htmlFor={`${resource}-interact`} className="text-xs text-muted-foreground break-words">Interact</Label>
+                      <Switch
+                        id={`${resource}-interact`}
+                        className="h-4 w-7"
+                        checked={currentPermissions[resource as keyof Permission].interact}
+                        onCheckedChange={(checked) =>
+                          handlePermissionChange(resource as keyof Permission, 'interact', checked)
+                        }
+                      />
+                    </div>
+                  </div>
+                </div>
+              ))}
+            </div>
+          )}
+        </div>
+      </div>
+    </div>
+  )
+}