feat(admin/groups): add groups entity with master-detail sub-routes

Creates the full groups section under /admin/groups/:
- +layout.server.ts: loads groups list via GET /api/groups
- GroupsListPanel.svelte: left list panel (name + permission count, active state)
- +layout.svelte: composes list panel + children slot
- +page.svelte: empty selection prompt
- [id]/+page.server.ts: update (PATCH) and delete actions
- [id]/+page.svelte: edit detail panel with Standard/Administrative permission sections
- new/+page.svelte and +page.server.ts: create group form

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

frontend/messages/de.json

@@ -171,6 +171,17 @@
 	"admin_users_search_placeholder": "Benutzer suchen\u2026",
 	"admin_users_empty": "Keine Benutzer vorhanden.",
 	"admin_users_select_prompt": "W\u00e4hle einen Benutzer aus der Liste.",
+	"admin_btn_new_group": "Neue Gruppe",
+	"admin_groups_list_title": "Alle Gruppen",
+	"admin_groups_empty": "Keine Gruppen vorhanden.",
+	"admin_groups_select_prompt": "W\u00e4hle eine Gruppe aus der Liste.",
+	"admin_groups_permission_count": "{count} Berechtigungen",
+	"admin_group_new_heading": "Neue Gruppe anlegen",
+	"admin_group_edit_heading": "Gruppe: {name}",
+	"admin_group_updated": "Gruppe gespeichert.",
+	"admin_group_created": "Gruppe erstellt.",
+	"admin_groups_section_standard": "Standard",
+	"admin_groups_section_administrative": "Administrativ",
 	"admin_user_new_heading": "Neuen Benutzer anlegen",
 	"admin_user_edit_heading": "Benutzer bearbeiten: {username}",
 	"admin_user_created": "Benutzer wurde erstellt.",

frontend/messages/en.json

@@ -171,6 +171,17 @@
 	"admin_users_search_placeholder": "Search users\u2026",
 	"admin_users_empty": "No users found.",
 	"admin_users_select_prompt": "Select a user from the list.",
+	"admin_btn_new_group": "New Group",
+	"admin_groups_list_title": "All Groups",
+	"admin_groups_empty": "No groups found.",
+	"admin_groups_select_prompt": "Select a group from the list.",
+	"admin_groups_permission_count": "{count} permissions",
+	"admin_group_new_heading": "Create new group",
+	"admin_group_edit_heading": "Group: {name}",
+	"admin_group_updated": "Group saved.",
+	"admin_group_created": "Group created.",
+	"admin_groups_section_standard": "Standard",
+	"admin_groups_section_administrative": "Administrative",
 	"admin_user_new_heading": "Create new user",
 	"admin_user_edit_heading": "Edit user: {username}",
 	"admin_user_created": "User has been created.",

frontend/messages/es.json

@@ -171,6 +171,17 @@
 	"admin_users_search_placeholder": "Buscar usuarios\u2026",
 	"admin_users_empty": "No hay usuarios.",
 	"admin_users_select_prompt": "Selecciona un usuario de la lista.",
+	"admin_btn_new_group": "Nuevo grupo",
+	"admin_groups_list_title": "Todos los grupos",
+	"admin_groups_empty": "No hay grupos.",
+	"admin_groups_select_prompt": "Selecciona un grupo de la lista.",
+	"admin_groups_permission_count": "{count} permisos",
+	"admin_group_new_heading": "Crear nuevo grupo",
+	"admin_group_edit_heading": "Grupo: {name}",
+	"admin_group_updated": "Grupo guardado.",
+	"admin_group_created": "Grupo creado.",
+	"admin_groups_section_standard": "Est\u00e1ndar",
+	"admin_groups_section_administrative": "Administrativo",
 	"admin_user_new_heading": "Crear nuevo usuario",
 	"admin_user_edit_heading": "Editar usuario: {username}",
 	"admin_user_created": "Usuario creado.",

frontend/src/routes/admin/groups/+layout.server.ts

@@ -0,0 +1,8 @@
+import { createApiClient } from '$lib/api.server';
+import type { LayoutServerLoad } from './$types';
+
+export const load: LayoutServerLoad = async ({ fetch }) => {
+	const api = createApiClient(fetch);
+	const result = await api.GET('/api/groups');
+	return { groups: result.data ?? [] };
+};

frontend/src/routes/admin/groups/+layout.svelte

@@ -0,0 +1,12 @@
+<script lang="ts">
+import GroupsListPanel from './GroupsListPanel.svelte';
+
+let { data, children } = $props();
+</script>
+
+<GroupsListPanel groups={data.groups} />
+
+<!-- Detail panel -->
+<div class="flex min-w-0 flex-1 flex-col overflow-hidden">
+	{@render children()}
+</div>

frontend/src/routes/admin/groups/+page.svelte

@@ -0,0 +1,7 @@
+<script lang="ts">
+import { m } from '$lib/paraglide/messages.js';
+</script>
+
+<div class="flex flex-1 items-center justify-center p-8">
+	<p class="text-sm text-ink-3">{m.admin_groups_select_prompt()}</p>
+</div>

frontend/src/routes/admin/groups/GroupsListPanel.svelte

@@ -0,0 +1,64 @@
+<script lang="ts">
+import { page } from '$app/state';
+import { m } from '$lib/paraglide/messages.js';
+
+type Group = {
+	id: string;
+	name: string;
+	permissions: string[];
+};
+
+let { groups }: { groups: Group[] } = $props();
+</script>
+
+<div class="flex w-60 flex-shrink-0 flex-col overflow-hidden border-r border-line bg-surface">
+	<!-- Panel header -->
+	<div class="flex items-center justify-between border-b border-line px-3 py-2">
+		<span class="text-xs font-bold tracking-widest text-ink-3 uppercase">
+			{m.admin_groups_list_title()}
+		</span>
+		<a
+			href="/admin/groups/new"
+			class="inline-flex items-center gap-1 rounded-sm px-2 py-1 text-xs font-medium text-ink-2 transition-colors hover:bg-muted hover:text-ink"
+			title={m.admin_btn_new_group()}
+			aria-label={m.admin_btn_new_group()}
+		>
+			<svg
+				class="h-3.5 w-3.5"
+				fill="none"
+				viewBox="0 0 24 24"
+				stroke="currentColor"
+				stroke-width="2.5"
+				aria-hidden="true"
+			>
+				<path stroke-linecap="round" stroke-linejoin="round" d="M12 4v16m8-8H4" />
+			</svg>
+			{m.admin_btn_new_group()}
+		</a>
+	</div>
+
+	<!-- Scrollable group list -->
+	<div class="flex-1 overflow-y-auto">
+		{#if groups.length === 0}
+			<p class="px-4 py-6 text-center text-xs text-ink-3">
+				{m.admin_groups_empty()}
+			</p>
+		{:else}
+			{#each groups as group (group.id)}
+				{@const isActive = page.url.pathname.startsWith('/admin/groups/' + group.id)}
+				<a
+					href="/admin/groups/{group.id}"
+					aria-current={isActive ? 'page' : undefined}
+					class="block border-l-2 px-3 py-2.5 transition-colors {isActive
+						? 'border-primary bg-primary/10 dark:bg-primary/15'
+						: 'border-transparent hover:bg-muted'}"
+				>
+					<div class="text-sm font-bold text-ink">{group.name}</div>
+					<div class="mt-0.5 text-xs text-ink-3">
+						{m.admin_groups_permission_count({ count: group.permissions.length })}
+					</div>
+				</a>
+			{/each}
+		{/if}
+	</div>
+</div>

frontend/src/routes/admin/groups/[id]/+page.server.ts

@@ -0,0 +1,47 @@
+import { error, fail, redirect } from '@sveltejs/kit';
+import type { PageServerLoad, Actions } from './$types';
+import { createApiClient } from '$lib/api.server';
+import { getErrorMessage } from '$lib/errors';
+
+export const load: PageServerLoad = async ({ params, parent }) => {
+	const { groups } = await parent();
+	const group = groups.find((g: { id: string }) => g.id === params.id);
+	if (!group) throw error(404, getErrorMessage('GROUP_NOT_FOUND'));
+	return { group };
+};
+
+export const actions: Actions = {
+	update: async ({ params, request, fetch }) => {
+		const data = await request.formData();
+		const api = createApiClient(fetch);
+
+		const result = await api.PATCH('/api/groups/{id}', {
+			params: { path: { id: params.id } },
+			body: {
+				name: data.get('name') as string,
+				permissions: data.getAll('permissions') as string[]
+			}
+		});
+
+		if (!result.response.ok) {
+			const code = (result.error as unknown as { code?: string })?.code;
+			return fail(result.response.status, { error: getErrorMessage(code) });
+		}
+
+		return { success: true };
+	},
+
+	delete: async ({ params, fetch }) => {
+		const api = createApiClient(fetch);
+		const result = await api.DELETE('/api/groups/{id}', {
+			params: { path: { id: params.id } }
+		});
+
+		if (!result.response.ok) {
+			const code = (result.error as unknown as { code?: string })?.code;
+			return fail(result.response.status, { error: getErrorMessage(code) });
+		}
+
+		throw redirect(303, '/admin/groups');
+	}
+};

frontend/src/routes/admin/groups/[id]/+page.svelte

@@ -0,0 +1,144 @@
+<script lang="ts">
+import { enhance } from '$app/forms';
+import { m } from '$lib/paraglide/messages.js';
+
+let { data, form } = $props();
+
+const STANDARD_PERMISSIONS: { value: string; label: string }[] = [
+	{ value: 'WRITE_ALL', label: 'Lesen & Schreiben' }
+];
+
+const ADMIN_PERMISSIONS: { value: string; label: string }[] = [
+	{ value: 'ADMIN', label: 'Vollzugriff (Admin)' },
+	{ value: 'ADMIN_USER', label: 'Benutzer verwalten' },
+	{ value: 'ADMIN_TAG', label: 'Schlagworte verwalten' },
+	{ value: 'ADMIN_PERMISSION', label: 'Berechtigungen verwalten' }
+];
+</script>
+
+<div class="flex flex-1 flex-col overflow-hidden">
+	<!-- Header -->
+	<div class="flex items-center border-b border-line px-5 py-3">
+		<h2 class="flex-1 font-sans text-sm font-bold text-ink">
+			{m.admin_group_edit_heading({ name: data.group.name })}
+		</h2>
+		<form
+			method="POST"
+			action="?/delete"
+			use:enhance={({ cancel }) => {
+				if (!confirm(m.admin_group_delete_confirm())) cancel();
+				return async ({ update }) => {
+					await update();
+				};
+			}}
+		>
+			<button
+				type="submit"
+				class="rounded-sm border border-red-200 bg-red-50 px-3 py-1.5 font-sans text-xs font-bold tracking-widest text-red-700 uppercase transition-colors hover:bg-red-100 dark:border-red-800 dark:bg-red-950/40 dark:text-red-400 dark:hover:bg-red-950/60"
+			>
+				{m.btn_delete()}
+			</button>
+		</form>
+	</div>
+
+	<!-- Scrollable body -->
+	<div class="flex-1 overflow-y-auto px-5 py-5">
+		{#if form?.success}
+			<div
+				class="mb-5 rounded border border-green-200 bg-green-50 p-3 text-sm text-green-700 dark:border-green-800 dark:bg-green-950/40 dark:text-green-400"
+			>
+				{m.admin_group_updated()}
+			</div>
+		{/if}
+		{#if form?.error}
+			<div
+				class="mb-5 rounded border border-red-200 bg-red-50 p-3 text-sm text-red-700 dark:border-red-800 dark:bg-red-950/40 dark:text-red-400"
+			>
+				{form.error}
+			</div>
+		{/if}
+
+		<form id="edit-group-form" method="POST" action="?/update" use:enhance>
+			<!-- Group name card -->
+			<div class="mb-5 rounded-sm border border-line bg-surface p-5 shadow-sm">
+				<h3 class="mb-4 text-xs font-bold tracking-widest text-ink-3 uppercase">
+					{m.admin_col_name()}
+				</h3>
+				<input
+					type="text"
+					name="name"
+					value={data.group.name}
+					required
+					class="bg-background w-full rounded-sm border border-line px-3 py-2 font-sans text-sm text-ink placeholder:text-ink-3 focus:border-primary focus:ring-1 focus:ring-primary focus:outline-none"
+				/>
+			</div>
+
+			<!-- Standard permissions card -->
+			<div class="mb-5 rounded-sm border border-line bg-surface p-5 shadow-sm">
+				<h3 class="mb-4 text-xs font-bold tracking-widest text-ink-3 uppercase">
+					{m.admin_groups_section_standard()}
+				</h3>
+				<div class="space-y-3">
+					{#each STANDARD_PERMISSIONS as perm (perm.value)}
+						<label class="flex items-center gap-2 text-sm text-ink">
+							<input
+								type="checkbox"
+								name="permissions"
+								value={perm.value}
+								checked={data.group.permissions.includes(perm.value)}
+								class="h-4 w-4 rounded border-line text-primary focus:ring-primary"
+							/>
+							{perm.label}
+						</label>
+					{/each}
+				</div>
+			</div>
+
+			<!-- Administrative permissions card -->
+			<div
+				class="rounded-sm border border-amber-200 bg-amber-50 p-5 shadow-sm dark:border-amber-900 dark:bg-amber-950/30"
+			>
+				<h3
+					class="mb-4 text-xs font-bold tracking-widest text-amber-700 uppercase dark:text-amber-400"
+				>
+					{m.admin_groups_section_administrative()}
+				</h3>
+				<div class="space-y-3">
+					{#each ADMIN_PERMISSIONS as perm (perm.value)}
+						<label
+							class="flex items-center gap-2 text-sm {perm.value === 'ADMIN'
+								? 'font-semibold text-amber-800 dark:text-amber-300'
+								: 'text-ink'}"
+						>
+							<input
+								type="checkbox"
+								name="permissions"
+								value={perm.value}
+								checked={data.group.permissions.includes(perm.value)}
+								class="h-4 w-4 rounded border-amber-300 text-amber-600 focus:ring-amber-500 dark:border-amber-700"
+							/>
+							{perm.label}
+						</label>
+					{/each}
+				</div>
+			</div>
+		</form>
+	</div>
+
+	<!-- Docked footer -->
+	<div class="flex items-center justify-between border-t border-line bg-surface px-5 py-3">
+		<a
+			href="/admin/groups"
+			class="font-sans text-xs font-bold tracking-widest text-ink-2 uppercase hover:text-ink"
+		>
+			{m.btn_cancel()}
+		</a>
+		<button
+			type="submit"
+			form="edit-group-form"
+			class="rounded-sm bg-primary px-5 py-2 font-sans text-xs font-bold tracking-widest text-primary-fg uppercase transition-opacity hover:opacity-80"
+		>
+			{m.btn_save()}
+		</button>
+	</div>
+</div>

frontend/src/routes/admin/groups/layout.server.spec.ts

@@ -0,0 +1,41 @@
+import { describe, expect, it, vi, beforeEach } from 'vitest';
+import { load } from './+layout.server';
+
+vi.mock('$lib/api.server', () => ({ createApiClient: vi.fn() }));
+
+import { createApiClient } from '$lib/api.server';
+
+function mockApi(groups: unknown[]) {
+	vi.mocked(createApiClient).mockReturnValue({
+		GET: vi.fn().mockResolvedValueOnce({ response: { ok: true }, data: groups })
+	} as ReturnType<typeof createApiClient>);
+}
+
+beforeEach(() => vi.clearAllMocks());
+
+describe('admin/groups layout load', () => {
+	it('returns the groups list', async () => {
+		mockApi([
+			{ id: 'g1', name: 'Admins', permissions: ['ADMIN'] },
+			{ id: 'g2', name: 'Editors', permissions: ['WRITE_ALL'] }
+		]);
+		const result = await load({ fetch: vi.fn() as unknown as typeof fetch });
+		expect(result.groups).toHaveLength(2);
+		expect(result.groups[0].name).toBe('Admins');
+	});
+
+	it('returns an empty array when the API returns nothing', async () => {
+		mockApi([]);
+		const result = await load({ fetch: vi.fn() as unknown as typeof fetch });
+		expect(result.groups).toEqual([]);
+	});
+
+	it('calls GET /api/groups', async () => {
+		const mockGet = vi.fn().mockResolvedValue({ response: { ok: true }, data: [] });
+		vi.mocked(createApiClient).mockReturnValue({ GET: mockGet } as ReturnType<
+			typeof createApiClient
+		>);
+		await load({ fetch: vi.fn() as unknown as typeof fetch });
+		expect(mockGet).toHaveBeenCalledWith('/api/groups');
+	});
+});

frontend/src/routes/admin/groups/layout.svelte.spec.ts

@@ -0,0 +1,79 @@
+import { afterEach, describe, it, expect, vi } from 'vitest';
+import { cleanup, render } from 'vitest-browser-svelte';
+import { page } from 'vitest/browser';
+import GroupsListPanel from './GroupsListPanel.svelte';
+
+vi.mock('$app/state', () => ({
+	page: { url: { pathname: '/admin/groups/g1' } }
+}));
+
+afterEach(cleanup);
+
+const groups = [
+	{ id: 'g1', name: 'Administrators', permissions: ['ADMIN', 'WRITE_ALL'] },
+	{ id: 'g2', name: 'Editors', permissions: ['WRITE_ALL'] },
+	{ id: 'g3', name: 'Readers', permissions: [] }
+];
+
+describe('GroupsListPanel — header', () => {
+	it('renders the panel title', async () => {
+		render(GroupsListPanel, { groups });
+		await expect.element(page.getByText(/Alle Gruppen/i)).toBeInTheDocument();
+	});
+
+	it('renders a new-group link pointing to /admin/groups/new', async () => {
+		render(GroupsListPanel, { groups });
+		await expect
+			.element(page.getByRole('link', { name: /neue gruppe/i }))
+			.toHaveAttribute('href', '/admin/groups/new');
+	});
+});
+
+describe('GroupsListPanel — group items', () => {
+	it('renders each group name', async () => {
+		render(GroupsListPanel, { groups });
+		await expect.element(page.getByRole('link', { name: /administrators/i })).toBeInTheDocument();
+		await expect.element(page.getByRole('link', { name: /editors/i })).toBeInTheDocument();
+	});
+
+	it('each group links to /admin/groups/[id]', async () => {
+		const { container } = render(GroupsListPanel, { groups });
+		const links = container.querySelectorAll<HTMLAnchorElement>('a[href^="/admin/groups/g"]');
+		expect(links.length).toBe(3);
+		expect(links[0].getAttribute('href')).toBe('/admin/groups/g1');
+	});
+
+	it('shows permission count as subtitle', async () => {
+		render(GroupsListPanel, { groups });
+		// Administrators has 2 permissions
+		await expect.element(page.getByText(/2 Berechtigungen/i)).toBeInTheDocument();
+	});
+
+	it('shows "no permissions" for a group with zero permissions', async () => {
+		render(GroupsListPanel, { groups });
+		await expect.element(page.getByText(/0 Berechtigungen/i)).toBeInTheDocument();
+	});
+});
+
+describe('GroupsListPanel — active state', () => {
+	it('marks the active group link with aria-current=page', async () => {
+		render(GroupsListPanel, { groups });
+		await expect
+			.element(page.getByRole('link', { name: /administrators/i }))
+			.toHaveAttribute('aria-current', 'page');
+	});
+
+	it('does not mark inactive group links with aria-current', async () => {
+		render(GroupsListPanel, { groups });
+		await expect
+			.element(page.getByRole('link', { name: /editors/i }))
+			.not.toHaveAttribute('aria-current');
+	});
+});
+
+describe('GroupsListPanel — empty state', () => {
+	it('shows empty state when groups array is empty', async () => {
+		render(GroupsListPanel, { groups: [] });
+		await expect.element(page.getByText(/keine gruppen/i)).toBeInTheDocument();
+	});
+});

frontend/src/routes/admin/groups/new/+page.server.ts

@@ -0,0 +1,25 @@
+import { fail, redirect } from '@sveltejs/kit';
+import type { Actions } from './$types';
+import { createApiClient } from '$lib/api.server';
+import { getErrorMessage } from '$lib/errors';
+
+export const actions: Actions = {
+	default: async ({ request, fetch }) => {
+		const data = await request.formData();
+		const api = createApiClient(fetch);
+
+		const result = await api.POST('/api/groups', {
+			body: {
+				name: data.get('name') as string,
+				permissions: data.getAll('permissions') as string[]
+			}
+		});
+
+		if (!result.response.ok) {
+			const code = (result.error as unknown as { code?: string })?.code;
+			return fail(result.response.status, { error: getErrorMessage(code) });
+		}
+
+		throw redirect(303, '/admin/groups');
+	}
+};

frontend/src/routes/admin/groups/new/+page.svelte

@@ -0,0 +1,117 @@
+<script lang="ts">
+import { enhance } from '$app/forms';
+import { m } from '$lib/paraglide/messages.js';
+
+const availableStandard = [{ value: 'WRITE_ALL', label: 'Lesen & Schreiben' }];
+const availableAdmin = [
+	{ value: 'ADMIN', label: 'Vollzugriff (Admin)' },
+	{ value: 'ADMIN_USER', label: 'Benutzer verwalten' },
+	{ value: 'ADMIN_TAG', label: 'Schlagworte verwalten' },
+	{ value: 'ADMIN_PERMISSION', label: 'Berechtigungen verwalten' }
+];
+
+let { form } = $props();
+</script>
+
+<div class="flex flex-1 flex-col overflow-hidden">
+	<!-- Detail panel header -->
+	<div
+		class="flex items-center border-b border-green-200 bg-green-50 px-5 py-3 dark:border-green-900 dark:bg-green-950/30"
+	>
+		<h2 class="flex-1 font-sans text-sm font-bold text-green-800 dark:text-green-300">
+			{m.admin_group_new_heading()}
+		</h2>
+	</div>
+
+	<!-- Scrollable body -->
+	<div class="flex-1 overflow-y-auto px-5 py-5">
+		{#if form?.error}
+			<div class="mb-5 rounded border border-red-200 bg-red-50 p-3 text-sm text-red-700">
+				{form.error}
+			</div>
+		{/if}
+
+		<form id="new-group-form" method="POST" use:enhance class="space-y-5">
+			<!-- Name card -->
+			<div class="rounded-sm border border-line bg-surface p-5 shadow-sm">
+				<h3 class="mb-3 text-xs font-bold tracking-widest text-ink-3 uppercase">
+					{m.admin_col_name()}
+				</h3>
+				<input
+					type="text"
+					name="name"
+					placeholder={m.admin_group_name_placeholder()}
+					required
+					class="w-full rounded-sm border border-line bg-surface px-3 py-2 text-sm text-ink placeholder:text-ink-3 focus:ring-1 focus:ring-primary focus:outline-none"
+				/>
+			</div>
+
+			<!-- Standard permissions -->
+			<div class="rounded-sm border border-line bg-surface p-5 shadow-sm">
+				<h3 class="mb-3 text-xs font-bold tracking-widest text-ink-3 uppercase">
+					{m.admin_groups_section_standard()}
+				</h3>
+				<div class="space-y-2">
+					{#each availableStandard as perm (perm.value)}
+						<label class="flex items-center gap-2 text-sm text-ink">
+							<input
+								type="checkbox"
+								name="permissions"
+								value={perm.value}
+								class="rounded border-line text-primary focus:ring-primary"
+							/>
+							<span class="font-mono text-xs font-bold uppercase">{perm.value}</span>
+							<span class="text-ink-3">— {perm.label}</span>
+						</label>
+					{/each}
+				</div>
+			</div>
+
+			<!-- Administrative permissions -->
+			<div
+				class="rounded-sm border border-amber-200 bg-amber-50 p-5 shadow-sm dark:border-amber-900 dark:bg-amber-950/30"
+			>
+				<h3
+					class="mb-3 text-xs font-bold tracking-widest text-amber-700 uppercase dark:text-amber-400"
+				>
+					{m.admin_groups_section_administrative()}
+				</h3>
+				<div class="space-y-2">
+					{#each availableAdmin as perm (perm.value)}
+						<label
+							class="flex items-center gap-2 text-sm {perm.value === 'ADMIN'
+								? 'font-bold text-red-700 dark:text-red-400'
+								: 'text-ink'}"
+						>
+							<input
+								type="checkbox"
+								name="permissions"
+								value={perm.value}
+								class="rounded border-line text-primary focus:ring-primary"
+							/>
+							<span class="font-mono text-xs font-bold uppercase">{perm.value}</span>
+							<span class="font-normal text-ink-3">— {perm.label}</span>
+						</label>
+					{/each}
+				</div>
+			</div>
+		</form>
+	</div>
+
+	<!-- Docked footer -->
+	<div class="flex items-center justify-between border-t border-line bg-surface px-5 py-3">
+		<a
+			href="/admin/groups"
+			class="font-sans text-xs font-bold tracking-widest text-ink-2 uppercase hover:text-ink"
+		>
+			{m.btn_cancel()}
+		</a>
+		<button
+			type="submit"
+			form="new-group-form"
+			class="rounded-sm bg-primary px-5 py-2 font-sans text-xs font-bold tracking-widest text-primary-fg uppercase transition-opacity hover:opacity-80"
+		>
+			{m.btn_create()}
+		</button>
+	</div>
+</div>