create-aphex 0.1.0

package/templates/base/src/routes/(protected)/admin/organizations/+page.svelte

@@ -0,0 +1,31 @@
+<script lang="ts">
+	import { page } from '$app/state';
+	import CreateOrganization from './_components/CreateOrganization.svelte';
+	import OrganizationsList from './_components/OrganizationsList.svelte';
+	import type { PageData } from './$types';
+
+	let { data }: { data: PageData } = $props();
+
+	const userRole = $derived(page.data?.sidebarData?.user?.role);
+	const isSuperAdmin = $derived(userRole === 'super_admin');
+</script>
+
+<svelte:head>
+	<title>Aphex CMS - Organizations</title>
+</svelte:head>
+
+<div class="flex flex-1 flex-col gap-4 p-4 md:gap-8 md:p-8">
+	<div class="mx-auto flex w-full max-w-6xl items-center justify-between">
+		<div>
+			<h1 class="text-3xl font-semibold">Organizations</h1>
+			<p class="text-muted-foreground">Manage your organizations</p>
+		</div>
+		{#if isSuperAdmin}
+			<CreateOrganization />
+		{/if}
+	</div>
+
+	<div class="mx-auto grid w-full max-w-6xl gap-6">
+		<OrganizationsList orgs={data.organizations} />
+	</div>
+</div>

package/templates/base/src/routes/(protected)/admin/organizations/_components/CreateOrganization.svelte

@@ -0,0 +1,141 @@
+<script lang="ts">
+	import { goto, invalidateAll } from '$app/navigation';
+	import { Button } from '@aphexcms/ui/shadcn/button';
+	import { Input } from '@aphexcms/ui/shadcn/input';
+	import { Label } from '@aphexcms/ui/shadcn/label';
+	import * as Dialog from '@aphexcms/ui/shadcn/dialog';
+	import { organizations } from '@aphexcms/cms-core/client';
+
+	let open = $state(false);
+	let name = $state('');
+	let slug = $state('');
+	let isSubmitting = $state(false);
+	let error = $state<string | null>(null);
+
+	function generateSlug(text: string): string {
+		return text
+			.toLowerCase()
+			.trim()
+			.replace(/[^\w\s-]/g, '')
+			.replace(/[\s_-]+/g, '-')
+			.replace(/^-+|-+$/g, '');
+	}
+
+	function handleNameInput(event: Event) {
+		const target = event.target as HTMLInputElement;
+		name = target.value;
+		if (!slug || slug === generateSlug(name.slice(0, -1))) {
+			slug = generateSlug(name);
+		}
+	}
+
+	function handleSlugInput(event: Event) {
+		const target = event.target as HTMLInputElement;
+		slug = target.value.toLowerCase().replace(/[^a-z0-9-]/g, '');
+	}
+
+	function resetForm() {
+		name = '';
+		slug = '';
+		error = null;
+	}
+
+	async function handleSubmit(event: Event) {
+		event.preventDefault();
+		error = null;
+
+		if (!name.trim() || !slug.trim()) {
+			error = 'Name and slug are required';
+			return;
+		}
+
+		isSubmitting = true;
+		try {
+			const result = await organizations.create({
+				name: name.trim(),
+				slug: slug.trim()
+			});
+
+			if (!result.success || !result.data) {
+				throw new Error('Failed to create organization');
+			}
+
+			resetForm();
+			open = false;
+			await invalidateAll();
+			await goto(`/admin?orgId=${result.data.id}`);
+		} catch (err) {
+			error = err instanceof Error ? err.message : 'Failed to create organization';
+		} finally {
+			isSubmitting = false;
+		}
+	}
+</script>
+
+<Dialog.Root bind:open onOpenChange={(v) => !v && resetForm()}>
+	<Dialog.Trigger>
+		{#snippet child({ props })}
+			<Button {...props}>Create Organization</Button>
+		{/snippet}
+	</Dialog.Trigger>
+	<Dialog.Content class="sm:max-w-[480px]">
+		<Dialog.Header>
+			<Dialog.Title>Create Organization</Dialog.Title>
+			<Dialog.Description>Create a new organization for your instance</Dialog.Description>
+		</Dialog.Header>
+		<form onsubmit={handleSubmit} class="grid gap-4 py-4">
+			<div>
+				<Label for="org-name">Organization name</Label>
+				<Input
+					id="org-name"
+					value={name}
+					oninput={handleNameInput}
+					placeholder="My Organization"
+					disabled={isSubmitting}
+					class="mt-1"
+				/>
+			</div>
+			<div>
+				<Label for="org-slug">Slug</Label>
+				<div class="mt-1 flex gap-2">
+					<Input
+						id="org-slug"
+						value={slug}
+						oninput={handleSlugInput}
+						placeholder="my-organization"
+						disabled={isSubmitting}
+						class="flex-1"
+					/>
+					<Button
+						type="button"
+						variant="outline"
+						size="sm"
+						onclick={() => (slug = generateSlug(name))}
+						disabled={!name.trim() || isSubmitting}
+					>
+						Generate
+					</Button>
+				</div>
+				<p class="text-muted-foreground mt-1 text-xs">
+					Lowercase letters, numbers, and hyphens only.
+				</p>
+			</div>
+			{#if error}
+				<p class="text-destructive text-sm">{error}</p>
+			{/if}
+			<Dialog.Footer>
+				<Button
+					type="button"
+					variant="outline"
+					onclick={() => (open = false)}
+					disabled={isSubmitting}
+				>
+					Cancel
+				</Button>
+				<Button type="submit" disabled={isSubmitting || !name.trim()}>
+					{isSubmitting ? 'Creating...' : 'Create'}
+				</Button>
+			</Dialog.Footer>
+		</form>
+	</Dialog.Content>
+</Dialog.Root>

package/templates/base/src/routes/(protected)/admin/organizations/_components/OrganizationsList.svelte

@@ -0,0 +1,102 @@
+<script lang="ts">
+	import { goto, invalidateAll } from '$app/navigation';
+	import * as AlertDialog from '@aphexcms/ui/shadcn/alert-dialog';
+	import { Badge } from '@aphexcms/ui/shadcn/badge';
+	import { ExternalLink } from '@lucide/svelte';
+	import { organizations } from '@aphexcms/cms-core/client';
+
+	type OrgItem = {
+		id: string;
+		name: string;
+		slug: string;
+		role: string;
+		isActive: boolean;
+		memberCount: number;
+		ownerEmail?: string;
+	};
+
+	let { orgs = [] }: { orgs: OrgItem[] } = $props();
+
+	let switchingOrgId = $state<string | null>(null);
+
+	async function handleOrgClick(org: OrgItem) {
+		if (switchingOrgId) return;
+
+		if (org.isActive) {
+			goto('/admin');
+			return;
+		}
+
+		switchingOrgId = org.id;
+		try {
+			const result = await organizations.switch({ organizationId: org.id });
+
+			if (!result.success) {
+				throw new Error(result.error || 'Failed to switch organization');
+			}
+
+			await invalidateAll();
+			goto('/admin');
+		} catch (err) {
+			console.error('Failed to switch organization:', err);
+		} finally {
+			switchingOrgId = null;
+		}
+	}
+
+	function getInitials(name: string): string {
+		return name
+			.split(' ')
+			.map((word) => word[0])
+			.join('')
+			.toUpperCase()
+			.slice(0, 2);
+	}
+</script>
+
+{#if orgs.length === 0}
+	<p class="text-muted-foreground text-sm">No organizations yet</p>
+{:else}
+	<div class="divide-y rounded-lg border">
+		{#each orgs as org (org.id)}
+			<div class="hover:bg-muted/50 flex items-center gap-4 p-4 transition-colors">
+				<!-- Avatar -->
+				<div
+					class="bg-sidebar-primary text-sidebar-primary-foreground flex size-10 shrink-0 items-center justify-center rounded-lg text-sm font-semibold"
+				>
+					{getInitials(org.name)}
+				</div>
+
+				<!-- Info -->
+				<div class="min-w-0 flex-1">
+					<div class="flex items-baseline gap-2">
+						<span class="font-medium">{org.name}</span>
+						<span class="text-muted-foreground">/</span>
+						<span class="text-muted-foreground text-sm">[{org.slug}]</span>
+						{#if org.isActive}
+							<Badge variant="default" class="text-xs">Active</Badge>
+						{/if}
+					</div>
+					<div class="text-muted-foreground text-sm">
+						{#if org.ownerEmail}
+							Owned by: {org.ownerEmail}
+						{/if}
+					</div>
+					<div class="text-muted-foreground text-sm">
+						Total members: {org.memberCount}
+					</div>
+				</div>
+
+				<!-- Actions -->
+				<button
+					class="text-muted-foreground hover:text-foreground hover:bg-muted rounded-md p-2 transition-colors"
+					onclick={() => handleOrgClick(org)}
+					disabled={switchingOrgId !== null}
+					title={org.isActive ? 'Go to dashboard' : 'Switch to this organization'}
+				>
+					<ExternalLink class="size-4" />
+				</button>
+			</div>
+		{/each}
+	</div>
+{/if}

package/templates/base/src/routes/(protected)/admin/settings/+layout.server.ts

@@ -0,0 +1,42 @@
+import type { LayoutServerLoad } from './$types';
+import { organizationService } from '$lib/server/services/organization';
+
+export const load: LayoutServerLoad = async ({ locals }) => {
+	const auth = locals.auth;
+
+	if (!auth || auth.type !== 'session') {
+		throw new Error('No session found');
+	}
+
+	const databaseAdapter = locals.aphexCMS.databaseAdapter;
+	let activeOrganization = null;
+	let currentUserOrgRole = null;
+
+	if (auth.organizationId) {
+		const orgData = await organizationService.getOrganizationWithMembers(auth.organizationId);
+		if (orgData) {
+			activeOrganization = {
+				...orgData.organization,
+				members: orgData.members.map((m) => ({
+					...m.member,
+					user: m.user,
+					invitedEmail: m.invitedEmail
+				}))
+			};
+
+			const currentMember = orgData.members.find((m) => m.user.id === auth.user.id);
+			currentUserOrgRole = currentMember?.member.role || null;
+		}
+	}
+
+	return {
+		user: {
+			id: auth.user.id,
+			email: auth.user.email,
+			name: auth.user.name,
+			role: auth.user.role,
+			organizationRole: currentUserOrgRole
+		},
+		activeOrganization
+	};
+};

package/templates/base/src/routes/(protected)/admin/settings/+layout.svelte

@@ -0,0 +1,116 @@
+<script lang="ts">
+	import { page } from '$app/state';
+	import type { Capability } from '@aphexcms/cms-core';
+
+	let { children } = $props();
+
+	const basePath = '/admin/settings';
+
+	// Resolve capabilities once — exposed by /admin/+layout.server.ts and
+	// inherited through the layout data chain.
+	const capabilities = $derived(page.data.rbac?.capabilities ?? []);
+	function has(cap: Capability): boolean {
+		return capabilities.includes(cap);
+	}
+
+	// `requires: null` means everyone with a session (e.g. Profile), `requires`
+	// with a capability hides the tab from users who don't have it. Members
+	// stays visible to anyone in an org since viewing who's in the org is not
+	// privileged information, but mutation controls on the page itself are
+	// already capability-gated server-side.
+	type Tab = { label: string; href: string; requires: Capability | null };
+
+	const orgTabs: Tab[] = $derived(
+		(
+			[
+				{ label: 'General', href: basePath, requires: 'org.settings' as Capability },
+				{ label: 'Members', href: `${basePath}/members`, requires: null },
+				{ label: 'Roles', href: `${basePath}/roles`, requires: 'role.manage' as Capability }
+			] satisfies Tab[]
+		).filter((t) => t.requires === null || has(t.requires))
+	);
+
+	const accountTabs: Tab[] = $derived(
+		(
+			[
+				{ label: 'Profile', href: `${basePath}/account`, requires: null },
+				{
+					label: 'API Keys',
+					href: `${basePath}/api-keys`,
+					requires: 'apiKey.manage' as Capability
+				}
+			] satisfies Tab[]
+		).filter((t) => t.requires === null || has(t.requires))
+	);
+
+	function isActive(href: string) {
+		if (href === basePath) return page.url.pathname === basePath;
+		return page.url.pathname.startsWith(href);
+	}
+</script>
+
+<div class="flex flex-1 flex-col gap-4 overflow-y-auto p-4 md:gap-8 md:p-8">
+	<div class="mx-auto grid w-full max-w-6xl gap-2">
+		<h1 class="text-3xl font-semibold">Settings</h1>
+		<p class="text-muted-foreground">Manage your organization and account</p>
+	</div>
+
+	<!-- Mobile tabs -->
+	<div class="mx-auto w-full max-w-6xl md:hidden">
+		<div class="border-b">
+			<div class="flex gap-4 overflow-x-auto">
+				{#each [...orgTabs, ...accountTabs] as tab}
+					<a
+						href={tab.href}
+						class="border-b-2 px-1 pb-2 text-sm font-medium whitespace-nowrap transition-colors {isActive(
+							tab.href
+						)
+							? 'border-primary text-primary'
+							: 'text-muted-foreground hover:text-foreground border-transparent'}"
+					>
+						{tab.label}
+					</a>
+				{/each}
+			</div>
+		</div>
+	</div>
+
+	<div
+		class="mx-auto grid w-full max-w-6xl items-start gap-6 md:grid-cols-[180px_1fr] lg:grid-cols-[250px_1fr]"
+	>
+		<!-- Desktop sidebar nav -->
+		<nav class="text-muted-foreground hidden gap-1 text-sm md:grid">
+			<p
+				class="text-muted-foreground/60 px-1 pt-2 pb-1 text-xs font-semibold tracking-wider uppercase"
+			>
+				Organization
+			</p>
+			{#each orgTabs as tab}
+				<a
+					href={tab.href}
+					class="rounded-md px-2 py-1.5 {isActive(tab.href)
+						? 'text-primary bg-muted font-semibold'
+						: ''}"
+				>
+					{tab.label}
+				</a>
+			{/each}
+			<p
+				class="text-muted-foreground/60 px-1 pt-4 pb-1 text-xs font-semibold tracking-wider uppercase"
+			>
+				Account
+			</p>
+			{#each accountTabs as tab}
+				<a
+					href={tab.href}
+					class="rounded-md px-2 py-1.5 {isActive(tab.href)
+						? 'text-primary bg-muted font-semibold'
+						: ''}"
+				>
+					{tab.label}
+				</a>
+			{/each}
+		</nav>
+		{@render children()}
+	</div>
+</div>

package/templates/base/src/routes/(protected)/admin/settings/+page.server.ts

@@ -0,0 +1,16 @@
+import type { PageServerLoad } from './$types';
+import { redirect } from '@sveltejs/kit';
+import { hasCapability } from '@aphexcms/cms-core';
+
+export const load: PageServerLoad = async ({ locals }) => {
+	const auth = locals.auth;
+
+	// Users without org.settings can't do anything on the General tab — route
+	// them to their profile (always available) so the default settings URL
+	// doesn't land them on a locked page.
+	if (auth?.type === 'session' && !hasCapability(auth, 'org.settings')) {
+		throw redirect(302, '/admin/settings/account');
+	}
+
+	return {};
+};

package/templates/base/src/routes/(protected)/admin/settings/+page.svelte

@@ -0,0 +1,32 @@
+<script lang="ts">
+	import * as Card from '@aphexcms/ui/shadcn/card';
+	import type { PageData } from './$types';
+	import OrganizationsSettings from './_components/OrganizationsSettings.svelte';
+
+	let { data }: { data: PageData } = $props();
+</script>
+
+<svelte:head>
+	<title>Aphex CMS - Organization Settings</title>
+</svelte:head>
+
+<div class="grid gap-6">
+	<div class="hidden sm:block">
+		<h2 class="text-xl font-semibold">General</h2>
+		<p class="text-muted-foreground text-sm">Manage your organization settings and preferences.</p>
+	</div>
+
+	{#if data.activeOrganization}
+		<OrganizationsSettings
+			activeOrganization={data.activeOrganization}
+			currentUserId={data.user.id}
+		/>
+	{:else}
+		<Card.Root>
+			<Card.Content class="py-12 text-center">
+				<p class="text-muted-foreground text-lg">No active organization</p>
+				<p class="text-muted-foreground mt-2 text-sm">You need to be added to an organization</p>
+			</Card.Content>
+		</Card.Root>
+	{/if}
+</div>

package/templates/base/src/routes/(protected)/admin/settings/_components/AccountSettings.svelte

@@ -0,0 +1,177 @@
+<script lang="ts">
+	import { Button } from '@aphexcms/ui/shadcn/button';
+	import { Input } from '@aphexcms/ui/shadcn/input';
+	import { Label } from '@aphexcms/ui/shadcn/label';
+	import { Badge } from '@aphexcms/ui/shadcn/badge';
+	import { Switch } from '@aphexcms/ui/shadcn/switch';
+	import * as Card from '@aphexcms/ui/shadcn/card';
+	import * as Avatar from '@aphexcms/ui/shadcn/avatar';
+	import { Separator } from '@aphexcms/ui/shadcn/separator';
+	import { invalidateAll } from '$app/navigation';
+	import type { CMSUser, UserSessionPreferences } from '@aphexcms/cms-core';
+	import { user as userApi } from '@aphexcms/cms-core/client';
+	import { Building2, Lock } from '@lucide/svelte';
+	import { toast } from 'svelte-sonner';
+
+	type Props = {
+		user: CMSUser;
+		userPreferences?: UserSessionPreferences | null;
+		hasChildOrganizations?: boolean;
+	};
+
+	let { user, userPreferences = null, hasChildOrganizations = false }: Props = $props();
+
+	let userName = $state(user.name || '');
+	let isUpdating = $state(false);
+	let includeChildOrganizations = $state(userPreferences?.includeChildOrganizations ?? false);
+	let isUpdatingPreferences = $state(false);
+
+	const userInitials = $derived(
+		user.name
+			? user.name
+					.split(' ')
+					.map((w) => w[0])
+					.join('')
+					.toUpperCase()
+					.slice(0, 2)
+			: user.email[0].toUpperCase()
+	);
+
+	function getRoleBadgeVariant(role: string): 'default' | 'secondary' | 'outline' | 'destructive' {
+		switch (role) {
+			case 'super_admin':
+				return 'default';
+			case 'admin':
+				return 'secondary';
+			default:
+				return 'outline';
+		}
+	}
+
+	function formatRole(role: string): string {
+		return role.replace(/_/g, ' ');
+	}
+
+	async function updateProfile() {
+		if (!userName.trim()) {
+			toast.error('Please enter your name');
+			return;
+		}
+
+		isUpdating = true;
+		try {
+			const result = await userApi.updateProfile({ name: userName.trim() });
+
+			if (!result.success) {
+				throw new Error(result.error || result.message || 'Failed to update profile');
+			}
+
+			toast.success('Profile updated successfully');
+			await invalidateAll();
+		} catch (error) {
+			toast.error(error instanceof Error ? error.message : 'Failed to update profile');
+		} finally {
+			isUpdating = false;
+		}
+	}
+
+	async function updatePreferences(prefs: Partial<UserSessionPreferences>) {
+		isUpdatingPreferences = true;
+		try {
+			const result = await userApi.updatePreferences(prefs);
+
+			if (!result.success) {
+				throw new Error(result.error || result.message || 'Failed to update preferences');
+			}
+		} catch (error) {
+			toast.error(error instanceof Error ? error.message : 'Failed to update preferences');
+			// Revert on error
+			if (prefs.includeChildOrganizations !== undefined) {
+				includeChildOrganizations = !prefs.includeChildOrganizations;
+			}
+		} finally {
+			isUpdatingPreferences = false;
+		}
+	}
+</script>
+
+<div class="space-y-6">
+	<!-- Profile Information -->
+	<Card.Root>
+		<Card.Header>
+			<div class="flex items-center gap-4">
+				<Avatar.Root class="h-14 w-14 text-lg">
+					{#if user.image}
+						<Avatar.Image src={user.image} alt={user.name || user.email} />
+					{/if}
+					<Avatar.Fallback>{userInitials}</Avatar.Fallback>
+				</Avatar.Root>
+				<div class="min-w-0 flex-1">
+					<div class="flex items-center gap-2">
+						<Card.Title class="text-lg">{user.name || user.email}</Card.Title>
+						<Badge variant={getRoleBadgeVariant(user.role)} class="capitalize">
+							{formatRole(user.role)}
+						</Badge>
+					</div>
+					<p class="text-muted-foreground mt-0.5 text-sm">{user.email}</p>
+				</div>
+			</div>
+		</Card.Header>
+
+		<Card.Content>
+			<Separator class="mb-4" />
+
+			<div class="space-y-4">
+				<div>
+					<Label for="user-name">Display Name</Label>
+					<Input id="user-name" bind:value={userName} placeholder="Your name" class="mt-2" />
+				</div>
+				<div>
+					<Label for="user-email">Email</Label>
+					<div class="relative mt-1">
+						<Input id="user-email" type="email" value={user.email} disabled class="pr-9" />
+						<Lock
+							class="text-muted-foreground absolute top-1/2 right-3 h-3.5 w-3.5 -translate-y-1/2"
+						/>
+					</div>
+					<p class="text-muted-foreground mt-1 text-xs">Managed by your authentication provider</p>
+				</div>
+			</div>
+		</Card.Content>
+		<Card.Footer class="border-t px-6 py-4">
+			<Button onclick={updateProfile} disabled={isUpdating}>
+				{isUpdating ? 'Saving...' : 'Save Changes'}
+			</Button>
+		</Card.Footer>
+	</Card.Root>
+
+	<!-- Preferences -->
+	{#if hasChildOrganizations}
+		<Card.Root>
+			<Card.Header>
+				<Card.Title>Content Preferences</Card.Title>
+			</Card.Header>
+			<Card.Content>
+				<div class="flex items-center justify-between">
+					<div class="flex items-center gap-3">
+						<Building2 class="text-muted-foreground h-5 w-5" />
+						<div>
+							<Label class="text-base font-medium">Include child organizations</Label>
+							<p class="text-muted-foreground text-sm">
+								Show documents from child organizations in your content lists
+							</p>
+						</div>
+					</div>
+					<Switch
+						checked={includeChildOrganizations}
+						disabled={isUpdatingPreferences}
+						onCheckedChange={(checked) => {
+							includeChildOrganizations = checked;
+							updatePreferences({ includeChildOrganizations: checked });
+						}}
+					/>
+				</div>
+			</Card.Content>
+		</Card.Root>
+	{/if}
+</div>