alexei.dolgolyov/web-app-launcher
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 1 Wiki Activity

feat(phase2): localization EN/RU + additional widget types

Browse Source 
- Add svelte-i18n with 224 translation keys (English + Russian)
- Language switcher in header (EN/RU toggle, persists to localStorage)
- Extract all hardcoded strings from 37 component/page files
- Add 4 new widget types: Bookmark, Note (markdown), Embed (iframe), Status
- WidgetRenderer dispatches by type, WidgetGrid supports full-width widgets
- Type-specific config forms in board editor
- Install marked for markdown rendering
This commit is contained in:
Admin
2026-03-24 23:18:05 +03:00
parent bf4e5089ee
commit 477c0e4d52
52 changed files with 1776 additions and 395 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/routes/+layout.svelte
+1
View File
@@ -1,5 +1,6 @@
<script lang="ts">
import '../app.css';
import '$lib/i18n/index.js';
import type { Snippet } from 'svelte';
import type { LayoutData } from './$types.js';
import MainLayout from '$lib/components/layout/MainLayout.svelte';
src/routes/+page.svelte
+6 -5
View File
@@ -1,32 +1,33 @@
<script lang="ts">
import { t } from 'svelte-i18n';
import type { PageData } from './$types.js';
let { data }: { data: PageData } = $props();
</script>
<svelte:head>
<title>Web App Launcher</title>
<title>{$t('app_title')}</title>
</svelte:head>
<div class="flex min-h-[60vh] items-center justify-center p-6">
<div class="text-center">
<h1 class="text-4xl font-bold text-foreground">Web App Launcher</h1>
<h1 class="text-4xl font-bold text-foreground">{$t('app_title')}</h1>
{#if data.user}
<p class="mt-4 text-muted-foreground">
Welcome, {data.user.displayName}. No default board is configured yet.
{$t('home.welcome', { values: { name: data.user.displayName } })}
</p>
<div class="mt-6 flex items-center justify-center gap-3">
<a
href="/boards"
class="rounded-md bg-primary px-4 py-2 text-sm font-medium text-primary-foreground hover:bg-primary/90"
>
View Boards
{$t('home.view_boards')}
</a>
<a
href="/apps"
class="rounded-md border border-border px-4 py-2 text-sm font-medium text-foreground hover:bg-accent"
>
Browse Apps
{$t('home.browse_apps')}
</a>
</div>
{/if}
src/routes/admin/+layout.svelte
+9 -8
View File
@@ -1,15 +1,16 @@
<script lang="ts">
import { t } from 'svelte-i18n';
import type { Snippet } from 'svelte';
import type { LayoutData } from './$types.js';
import { page } from '$app/stores';
let { data, children }: { data: LayoutData; children: Snippet } = $props();
const navItems = [
{ href: '/admin/users', label: 'Users' },
{ href: '/admin/groups', label: 'Groups' },
{ href: '/admin/settings', label: 'Settings' }
] as const;
const navItems = $derived([
{ href: '/admin/users', labelKey: 'admin.users' },
{ href: '/admin/groups', labelKey: 'admin.groups' },
{ href: '/admin/settings', labelKey: 'admin.settings' }
]);
function isActive(href: string): boolean {
return $page.url.pathname === href;
@@ -20,7 +21,7 @@
<div class="mx-auto max-w-6xl">
<!-- Admin header -->
<div class="mb-6 flex flex-wrap items-center gap-4 rounded-xl border border-border bg-card p-4 shadow-sm">
<span class="text-sm font-semibold text-foreground">Admin Panel</span>
<span class="text-sm font-semibold text-foreground">{$t('admin.panel')}</span>
<div class="flex gap-1">
{#each navItems as item (item.href)}
<a
@@ -29,12 +30,12 @@
? 'bg-primary text-primary-foreground'
: 'text-muted-foreground hover:bg-accent hover:text-foreground'}"
>
{item.label}
{$t(item.labelKey)}
</a>
{/each}
</div>
<div class="ml-auto text-xs text-muted-foreground">
{data.user.displayName} (admin)
{data.user.displayName} ({$t('admin.role_admin').toLowerCase()})
</div>
</div>
src/routes/admin/groups/+page.svelte
+9 -8
View File
@@ -1,4 +1,5 @@
<script lang="ts">
import { t } from 'svelte-i18n';
import type { PageData } from './$types.js';
import GroupTable from '$lib/components/admin/GroupTable.svelte';
import { superForm } from 'sveltekit-superforms/client';
@@ -18,28 +19,28 @@
</script>
<svelte:head>
<title>Group Management — Admin</title>
<title>{$t('admin.group_management')} — {$t('admin.panel')}</title>
</svelte:head>
<div>
<div class="mb-6 flex items-center justify-between">
<h1 class="text-2xl font-bold text-card-foreground">Group Management</h1>
<h1 class="text-2xl font-bold text-card-foreground">{$t('admin.group_management')}</h1>
<button
type="button"
onclick={() => (showCreateForm = !showCreateForm)}
class="rounded-md bg-primary px-4 py-2 text-sm font-medium text-primary-foreground hover:bg-primary/90 focus:outline-none focus:ring-2 focus:ring-ring"
>
{showCreateForm ? 'Cancel' : 'Create Group'}
{showCreateForm ? $t('common.cancel') : $t('admin.create_group')}
</button>
</div>
{#if showCreateForm}
<div class="mb-6 rounded-lg border border-border bg-card p-6">
<h2 class="mb-4 text-lg font-semibold text-card-foreground">New Group</h2>
<h2 class="mb-4 text-lg font-semibold text-card-foreground">{$t('admin.new_group')}</h2>
<form method="POST" action="?/create" use:enhance class="space-y-4">
<div class="grid grid-cols-1 gap-4 sm:grid-cols-2">
<div>
<label for="name" class="mb-1 block text-sm font-medium text-foreground">Name</label>
<label for="name" class="mb-1 block text-sm font-medium text-foreground">{$t('common.name')}</label>
<input
id="name"
name="name"
@@ -51,7 +52,7 @@
{#if $errors.name}<span class="text-xs text-destructive">{$errors.name}</span>{/if}
</div>
<div>
<label for="description" class="mb-1 block text-sm font-medium text-foreground">Description</label>
<label for="description" class="mb-1 block text-sm font-medium text-foreground">{$t('common.description')}</label>
<input
id="description"
name="description"
@@ -68,7 +69,7 @@
bind:checked={$form.isDefault}
class="h-4 w-4 rounded border-input"
/>
<label for="isDefault" class="text-sm font-medium text-foreground">Default group (auto-assign new users)</label>
<label for="isDefault" class="text-sm font-medium text-foreground">{$t('admin.default_group_hint')}</label>
</div>
</div>
{#if $errors._errors}
@@ -78,7 +79,7 @@
type="submit"
class="rounded-md bg-primary px-4 py-2 text-sm font-medium text-primary-foreground hover:bg-primary/90"
>
Create Group
{$t('admin.create_group')}
</button>
</form>
</div>
src/routes/admin/settings/+page.svelte
+4 -3
View File
@@ -1,4 +1,5 @@
<script lang="ts">
import { t } from 'svelte-i18n';
import type { PageData } from './$types.js';
import SettingsForm from '$lib/components/admin/SettingsForm.svelte';
@@ -6,13 +7,13 @@
</script>
<svelte:head>
<title>System Settings — Admin</title>
<title>{$t('admin.system_settings')} — {$t('admin.panel')}</title>
</svelte:head>
<div>
<div class="mb-6">
<h1 class="text-2xl font-bold text-card-foreground">System Settings</h1>
<p class="mt-1 text-sm text-muted-foreground">Configure global application settings.</p>
<h1 class="text-2xl font-bold text-card-foreground">{$t('admin.system_settings')}</h1>
<p class="mt-1 text-sm text-muted-foreground">{$t('admin.settings_description')}</p>
</div>
<SettingsForm form={data.form} />
src/routes/admin/users/+page.svelte
+12 -11
View File
@@ -1,4 +1,5 @@
<script lang="ts">
import { t } from 'svelte-i18n';
import type { PageData } from './$types.js';
import UserTable from '$lib/components/admin/UserTable.svelte';
import { superForm } from 'sveltekit-superforms/client';
@@ -18,28 +19,28 @@
</script>
<svelte:head>
<title>User Management — Admin</title>
<title>{$t('admin.user_management')} — {$t('admin.panel')}</title>
</svelte:head>
<div>
<div class="mb-6 flex items-center justify-between">
<h1 class="text-2xl font-bold text-card-foreground">User Management</h1>
<h1 class="text-2xl font-bold text-card-foreground">{$t('admin.user_management')}</h1>
<button
type="button"
onclick={() => (showCreateForm = !showCreateForm)}
class="rounded-md bg-primary px-4 py-2 text-sm font-medium text-primary-foreground hover:bg-primary/90 focus:outline-none focus:ring-2 focus:ring-ring"
>
{showCreateForm ? 'Cancel' : 'Create User'}
{showCreateForm ? $t('common.cancel') : $t('admin.create_user')}
</button>
</div>
{#if showCreateForm}
<div class="mb-6 rounded-lg border border-border bg-card p-6">
<h2 class="mb-4 text-lg font-semibold text-card-foreground">New User</h2>
<h2 class="mb-4 text-lg font-semibold text-card-foreground">{$t('admin.new_user')}</h2>
<form method="POST" action="?/create" use:enhance class="space-y-4">
<div class="grid grid-cols-1 gap-4 sm:grid-cols-2">
<div>
<label for="email" class="mb-1 block text-sm font-medium text-foreground">Email</label>
<label for="email" class="mb-1 block text-sm font-medium text-foreground">{$t('auth.email')}</label>
<input
id="email"
name="email"
@@ -51,7 +52,7 @@
{#if $errors.email}<span class="text-xs text-destructive">{$errors.email}</span>{/if}
</div>
<div>
<label for="displayName" class="mb-1 block text-sm font-medium text-foreground">Display Name</label>
<label for="displayName" class="mb-1 block text-sm font-medium text-foreground">{$t('auth.display_name')}</label>
<input
id="displayName"
name="displayName"
@@ -63,7 +64,7 @@
{#if $errors.displayName}<span class="text-xs text-destructive">{$errors.displayName}</span>{/if}
</div>
<div>
<label for="password" class="mb-1 block text-sm font-medium text-foreground">Password</label>
<label for="password" class="mb-1 block text-sm font-medium text-foreground">{$t('auth.password')}</label>
<input
id="password"
name="password"
@@ -74,15 +75,15 @@
{#if $errors.password}<span class="text-xs text-destructive">{$errors.password}</span>{/if}
</div>
<div>
<label for="role" class="mb-1 block text-sm font-medium text-foreground">Role</label>
<label for="role" class="mb-1 block text-sm font-medium text-foreground">{$t('admin.role_column')}</label>
<select
id="role"
name="role"
bind:value={$form.role}
class="w-full rounded-md border border-input bg-background px-3 py-2 text-sm text-foreground"
>
<option value="user">User</option>
<option value="admin">Admin</option>
<option value="user">{$t('admin.role_user')}</option>
<option value="admin">{$t('admin.role_admin')}</option>
</select>
</div>
</div>
@@ -93,7 +94,7 @@
type="submit"
class="rounded-md bg-primary px-4 py-2 text-sm font-medium text-primary-foreground hover:bg-primary/90"
>
Create User
{$t('admin.create_user')}
</button>
</form>
</div>
src/routes/apps/+page.svelte
+9 -8
View File
@@ -1,4 +1,5 @@
<script lang="ts">
import { t } from 'svelte-i18n';
import type { PageData } from './$types.js';
import AppCard from '$lib/components/app/AppCard.svelte';
import AppForm from '$lib/components/app/AppForm.svelte';
@@ -9,16 +10,16 @@
</script>
<svelte:head>
<title>Apps — Web App Launcher</title>
<title>{$t('app.title')} — {$t('app_title')}</title>
</svelte:head>
<div class="p-6">
<div class="mx-auto max-w-6xl">
<div class="mb-6 flex items-center justify-between">
<div>
<h1 class="text-2xl font-bold text-foreground">App Registry</h1>
<h1 class="text-2xl font-bold text-foreground">{$t('app.title')}</h1>
<p class="mt-1 text-sm text-muted-foreground">
{data.apps.length} app{data.apps.length === 1 ? '' : 's'} registered
{$t('app.apps_registered', { values: { count: data.apps.length } })}
</p>
</div>
<button
@@ -26,13 +27,13 @@
onclick={() => (showForm = !showForm)}
class="rounded-lg bg-primary px-4 py-2 text-sm font-medium text-primary-foreground transition-colors hover:bg-primary/90 focus:outline-none focus:ring-2 focus:ring-ring"
>
{showForm ? 'Cancel' : 'Add App'}
{showForm ? $t('common.cancel') : $t('app.add')}
</button>
</div>
{#if showForm}
<div class="mb-6 rounded-xl border border-border bg-card p-6 shadow-sm">
<h2 class="mb-4 text-lg font-semibold text-card-foreground">New App</h2>
<h2 class="mb-4 text-lg font-semibold text-card-foreground">{$t('app.new')}</h2>
<AppForm form={data.form} action="?/create" />
</div>
{/if}
@@ -43,7 +44,7 @@
href="/apps"
class="rounded-full border border-border px-3 py-1 text-sm text-muted-foreground transition-colors hover:bg-accent hover:text-foreground"
>
All
{$t('app.all_categories')}
</a>
{#each data.categories as category (category)}
<a
@@ -72,8 +73,8 @@
<line x1="12" y1="8" x2="12" y2="12" />
<line x1="12" y1="16" x2="12.01" y2="16" />
</svg>
<p class="text-lg">No apps registered yet.</p>
<p class="mt-1 text-sm">Click "Add App" to register your first application.</p>
<p class="text-lg">{$t('app.no_apps')}</p>
<p class="mt-1 text-sm">{$t('app.no_apps_hint')}</p>
</div>
{:else}
<div class="grid grid-cols-1 gap-4 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4">
src/routes/boards/+page.svelte
+7 -6
View File
@@ -1,4 +1,5 @@
<script lang="ts">
import { t } from 'svelte-i18n';
import type { PageData } from './$types.js';
import BoardCard from '$lib/components/board/BoardCard.svelte';
@@ -6,16 +7,16 @@
</script>
<svelte:head>
<title>Boards — Web App Launcher</title>
<title>{$t('board.title')} — {$t('app_title')}</title>
</svelte:head>
<div class="p-6">
<div class="mx-auto max-w-6xl">
<div class="mb-8 flex items-center justify-between">
<div>
<h1 class="text-3xl font-bold text-foreground">Boards</h1>
<h1 class="text-3xl font-bold text-foreground">{$t('board.title')}</h1>
<p class="mt-1 text-sm text-muted-foreground">
{data.boards.length} board{data.boards.length === 1 ? '' : 's'} available
{$t('board.boards_available', { values: { count: data.boards.length } })}
</p>
</div>
@@ -24,7 +25,7 @@
href="/boards/new"
class="rounded-lg bg-primary px-4 py-2 text-sm font-medium text-primary-foreground transition-colors hover:bg-primary/90"
>
New Board
{$t('board.new')}
</a>
{/if}
</div>
@@ -45,9 +46,9 @@
<line x1="3" y1="9" x2="21" y2="9" />
<line x1="9" y1="21" x2="9" y2="9" />
</svg>
<p class="text-muted-foreground">No boards available.</p>
<p class="text-muted-foreground">{$t('board.no_boards')}</p>
{#if data.isGuest}
<p class="mt-2 text-sm text-muted-foreground/70">Sign in to see more boards.</p>
<p class="mt-2 text-sm text-muted-foreground/70">{$t('board.sign_in_more')}</p>
{/if}
</div>
{:else}
src/routes/boards/[boardId]/+page.server.ts
+6 -2
View File
@@ -1,6 +1,7 @@
import { error } from '@sveltejs/kit';
import type { PageServerLoad } from './$types.js';
import * as boardService from '$lib/server/services/boardService.js';
import * as appService from '$lib/server/services/appService.js';
import * as permissionService from '$lib/server/services/permissionService.js';
import { EntityType, PermissionLevel, UserRole } from '$lib/utils/constants.js';
import { isBoardGuestAccessible } from '$lib/server/middleware/guestAccess.js';
@@ -32,7 +33,10 @@ export const load: PageServerLoad = async ({ params, locals }) => {
try {
// findBoardById includes sections -> widgets -> app -> statuses
const board = await boardService.findBoardById(boardId);
const [board, allApps] = await Promise.all([
boardService.findBoardById(boardId),
appService.findAll()
]);
// Determine if user can edit this board
let canEdit = false;
@@ -50,7 +54,7 @@ export const load: PageServerLoad = async ({ params, locals }) => {
}
}
return { board, canEdit };
return { board, canEdit, allApps };
} catch (err) {
const message = err instanceof Error ? err.message : 'Board not found';
if (message.includes('not found')) {
src/routes/boards/[boardId]/+page.svelte
+3 -2
View File
@@ -1,4 +1,5 @@
<script lang="ts">
import { t } from 'svelte-i18n';
import type { PageData } from './$types.js';
import Board from '$lib/components/board/Board.svelte';
import BoardHeader from '$lib/components/board/BoardHeader.svelte';
@@ -7,7 +8,7 @@
</script>
<svelte:head>
<title>{data.board.name} — Web App Launcher</title>
<title>{data.board.name} — {$t('app_title')}</title>
</svelte:head>
<div class="p-6">
@@ -20,6 +21,6 @@
canEdit={data.canEdit}
/>
<Board sections={data.board.sections} />
<Board sections={data.board.sections} allApps={data.allApps} />
</div>
</div>
src/routes/boards/[boardId]/edit/+page.server.ts
+12 -3
View File
@@ -152,16 +152,25 @@ export const actions: Actions = {
requireAuth(event);
const formData = await event.request.formData();
const sectionId = formData.get('sectionId') as string;
const appId = (formData.get('appId') as string) || undefined;
const type = (formData.get('type') as string) || 'app';
const appId = (formData.get('appId') as string) || undefined;
const configJson = (formData.get('configJson') as string) || undefined;
const config = appId ? JSON.stringify({ appId }) : '{}';
// Build config based on widget type
let config: string;
if (type === 'app' && appId) {
config = JSON.stringify({ appId });
} else if (configJson) {
config = configJson;
} else {
config = '{}';
}
const data = {
sectionId,
type,
config,
appId
appId: type === 'app' ? appId : undefined
};
const parsed = createWidgetSchema.safeParse(data);
src/routes/boards/[boardId]/edit/+page.svelte
+56 -19
View File
@@ -1,8 +1,10 @@
<script lang="ts">
import { t } from 'svelte-i18n';
import type { PageData } from './$types.js';
import { enhance } from '$app/forms';
import { invalidateAll } from '$app/navigation';
import DraggableBoard from '$lib/components/board/DraggableBoard.svelte';
import { WidgetType } from '$lib/utils/constants.js';
let { data }: { data: PageData } = $props();
@@ -28,11 +30,46 @@
}
}
async function handleAddWidget(sectionId: string, appId: string) {
async function handleAddWidget(sectionId: string, widgetData: string) {
// widgetData is a JSON string with type and type-specific fields
let parsed: Record<string, unknown>;
try {
parsed = JSON.parse(widgetData);
} catch {
// Legacy: treat as appId directly
parsed = { type: 'app', appId: widgetData };
}
const formData = new FormData();
formData.set('sectionId', sectionId);
formData.set('type', 'app');
formData.set('appId', appId);
formData.set('type', (parsed.type as string) || 'app');
if (parsed.type === 'app' && parsed.appId) {
formData.set('appId', parsed.appId as string);
} else if (parsed.type === 'bookmark') {
formData.set('configJson', JSON.stringify({
url: parsed.url,
label: parsed.label,
icon: parsed.icon || undefined,
description: parsed.description || undefined
}));
} else if (parsed.type === 'note') {
formData.set('configJson', JSON.stringify({
content: parsed.content,
format: parsed.format || 'markdown'
}));
} else if (parsed.type === 'embed') {
formData.set('configJson', JSON.stringify({
url: parsed.url,
height: Number(parsed.height) || 300,
sandbox: parsed.sandbox || undefined
}));
} else if (parsed.type === 'status') {
formData.set('configJson', JSON.stringify({
appIds: parsed.appIds,
label: parsed.label || undefined
}));
}
try {
await fetch(`?/addWidget`, {
@@ -63,28 +100,28 @@
</script>
<svelte:head>
<title>Edit: {data.board.name}</title>
<title>{$t('board.edit_board')}: {data.board.name}</title>
</svelte:head>
<div class="p-6">
<div class="mx-auto max-w-4xl">
<div class="mb-6 flex items-center justify-between">
<h1 class="text-2xl font-bold text-foreground">Edit Board</h1>
<h1 class="text-2xl font-bold text-foreground">{$t('board.edit_board')}</h1>
<a
href="/boards/{data.board.id}"
class="rounded-lg border border-border px-4 py-2 text-sm text-foreground transition-colors hover:bg-accent"
>
Back to Board
{$t('board.back_to_board')}
</a>
</div>
<!-- Board Properties -->
<section class="mb-8 rounded-xl border border-border bg-card p-6 shadow-sm">
<h2 class="mb-4 text-lg font-semibold text-card-foreground">Board Properties</h2>
<h2 class="mb-4 text-lg font-semibold text-card-foreground">{$t('board.properties')}</h2>
<form method="POST" action="?/updateBoard" use:enhance>
<div class="grid gap-4 sm:grid-cols-2">
<div>
<label for="board-name" class="mb-1 block text-sm font-medium text-foreground">Name</label>
<label for="board-name" class="mb-1 block text-sm font-medium text-foreground">{$t('common.name')}</label>
<input
id="board-name"
name="name"
@@ -95,7 +132,7 @@
/>
</div>
<div>
<label for="board-icon" class="mb-1 block text-sm font-medium text-foreground">Icon</label>
<label for="board-icon" class="mb-1 block text-sm font-medium text-foreground">{$t('app.icon')}</label>
<input
id="board-icon"
name="icon"
@@ -106,7 +143,7 @@
/>
</div>
<div class="sm:col-span-2">
<label for="board-desc" class="mb-1 block text-sm font-medium text-foreground">Description</label>
<label for="board-desc" class="mb-1 block text-sm font-medium text-foreground">{$t('common.description')}</label>
<textarea
id="board-desc"
name="description"
@@ -122,7 +159,7 @@
checked={data.board.isDefault}
class="h-4 w-4 rounded border-input accent-primary"
/>
Default Board
{$t('board.default_board')}
</label>
<label class="flex items-center gap-2 text-sm text-foreground">
<input
@@ -131,7 +168,7 @@
checked={data.board.isGuestAccessible}
class="h-4 w-4 rounded border-input accent-primary"
/>
Guest Accessible
{$t('board.guest_accessible')}
</label>
</div>
</div>
@@ -140,7 +177,7 @@
type="submit"
class="rounded-lg bg-primary px-4 py-2 text-sm font-medium text-primary-foreground transition-colors hover:bg-primary/90"
>
Save Board
{$t('board.save')}
</button>
</div>
</form>
@@ -149,13 +186,13 @@
<!-- Sections with Drag-and-Drop -->
<section class="mb-8">
<div class="mb-4 flex items-center justify-between">
<h2 class="text-lg font-semibold text-foreground">Sections</h2>
<h2 class="text-lg font-semibold text-foreground">{$t('section.sections')}</h2>
<button
type="button"
onclick={() => (showAddSection = !showAddSection)}
class="rounded-lg bg-primary px-3 py-1.5 text-sm font-medium text-primary-foreground transition-colors hover:bg-primary/90"
>
{showAddSection ? 'Cancel' : 'Add Section'}
{showAddSection ? $t('common.cancel') : $t('section.add')}
</button>
</div>
@@ -173,7 +210,7 @@
>
<div class="grid gap-3 sm:grid-cols-2">
<div>
<label for="section-title" class="mb-1 block text-sm font-medium text-foreground">Title</label>
<label for="section-title" class="mb-1 block text-sm font-medium text-foreground">{$t('section.title_label')}</label>
<input
id="section-title"
name="title"
@@ -183,13 +220,13 @@
/>
</div>
<div>
<label for="section-icon" class="mb-1 block text-sm font-medium text-foreground">Icon</label>
<label for="section-icon" class="mb-1 block text-sm font-medium text-foreground">{$t('section.icon_label')}</label>
<input
id="section-icon"
name="icon"
type="text"
class="w-full rounded-lg border border-input bg-background px-3 py-2 text-sm text-foreground placeholder:text-muted-foreground transition-colors focus:border-primary focus:outline-none focus:ring-2 focus:ring-ring/30"
placeholder="Optional"
placeholder={$t('section.icon_placeholder')}
/>
</div>
</div>
@@ -198,7 +235,7 @@
type="submit"
class="rounded-lg bg-primary px-3 py-1.5 text-sm font-medium text-primary-foreground transition-colors hover:bg-primary/90"
>
Create Section
{$t('section.create')}
</button>
</div>
</form>
src/routes/boards/new/+page.svelte
+12 -11
View File
@@ -1,4 +1,5 @@
<script lang="ts">
import { t } from 'svelte-i18n';
import type { PageData } from './$types.js';
import { superForm } from 'sveltekit-superforms';
@@ -7,22 +8,22 @@
</script>
<svelte:head>
<title>New Board — Web App Launcher</title>
<title>{$t('board.new')} — {$t('app_title')}</title>
</svelte:head>
<div class="p-6">
<div class="mx-auto max-w-2xl">
<div class="mb-6">
<a href="/boards" class="text-sm text-muted-foreground hover:text-foreground">
&larr; Back to Boards
&larr; {$t('board.back_to_boards')}
</a>
</div>
<h1 class="mb-6 text-3xl font-bold text-foreground">New Board</h1>
<h1 class="mb-6 text-3xl font-bold text-foreground">{$t('board.new')}</h1>
<form method="POST" use:enhance class="space-y-4 rounded-xl border border-border bg-card p-6">
<div>
<label for="name" class="mb-1 block text-sm font-medium text-foreground">Name</label>
<label for="name" class="mb-1 block text-sm font-medium text-foreground">{$t('common.name')}</label>
<input
id="name"
name="name"
@@ -36,19 +37,19 @@
</div>
<div>
<label for="description" class="mb-1 block text-sm font-medium text-foreground">Description</label>
<label for="description" class="mb-1 block text-sm font-medium text-foreground">{$t('common.description')}</label>
<input
id="description"
name="description"
type="text"
bind:value={$form.description}
class="w-full rounded-lg border border-input bg-background px-3 py-2 text-sm text-foreground placeholder:text-muted-foreground focus:border-primary focus:outline-none focus:ring-1 focus:ring-primary"
placeholder="Optional description"
placeholder={$t('app.description_placeholder')}
/>
</div>
<div>
<label for="icon" class="mb-1 block text-sm font-medium text-foreground">Icon (Lucide name)</label>
<label for="icon" class="mb-1 block text-sm font-medium text-foreground">{$t('app.icon_board_label')}</label>
<input
id="icon"
name="icon"
@@ -62,25 +63,25 @@
<div class="flex items-center gap-4">
<label class="flex items-center gap-2 text-sm text-foreground">
<input type="checkbox" name="isDefault" bind:checked={$form.isDefault} class="rounded" />
Default board
{$t('board.default_board')}
</label>
<label class="flex items-center gap-2 text-sm text-foreground">
<input type="checkbox" name="isGuestAccessible" bind:checked={$form.isGuestAccessible} class="rounded" />
Guest accessible
{$t('board.guest_accessible')}
</label>
</div>
<div class="flex justify-end gap-3 pt-2">
<a href="/boards" class="rounded-lg border border-border px-4 py-2 text-sm text-foreground hover:bg-accent">
Cancel
{$t('common.cancel')}
</a>
<button
type="submit"
disabled={$submitting}
class="rounded-lg bg-primary px-4 py-2 text-sm font-medium text-primary-foreground hover:bg-primary/90 disabled:opacity-50"
>
{$submitting ? 'Creating...' : 'Create Board'}
{$submitting ? $t('board.creating') : $t('board.create')}
</button>
</div>
</form>
src/routes/login/+page.svelte
+14 -13
View File
@@ -1,4 +1,5 @@
<script lang="ts">
import { t } from 'svelte-i18n';
import { superForm } from 'sveltekit-superforms';
import type { PageData } from './$types.js';
import AmbientBackground from '$lib/components/background/AmbientBackground.svelte';
@@ -12,7 +13,7 @@
</script>
<svelte:head>
<title>Login — Web App Launcher</title>
<title>{$t('auth.login_submit')} — {$t('app_title')}</title>
</svelte:head>
<AmbientBackground />
@@ -37,8 +38,8 @@
<rect x="3" y="14" width="7" height="7" />
</svg>
</div>
<h1 class="text-2xl font-bold text-card-foreground">Welcome back</h1>
<p class="mt-1 text-sm text-muted-foreground">Sign in to your account</p>
<h1 class="text-2xl font-bold text-card-foreground">{$t('auth.login_title')}</h1>
<p class="mt-1 text-sm text-muted-foreground">{$t('auth.login_subtitle')}</p>
</div>
{#if showOAuthButton}
@@ -51,7 +52,7 @@
<polyline points="10 17 15 12 10 7" />
<line x1="15" y1="12" x2="3" y2="12" />
</svg>
Sign in with OAuth
{$t('auth.oauth_signin')}
</a>
{/if}
@@ -61,7 +62,7 @@
<div class="w-full border-t border-border"></div>
</div>
<div class="relative flex justify-center text-xs uppercase">
<span class="bg-card px-2 text-muted-foreground">or</span>
<span class="bg-card px-2 text-muted-foreground">{$t('auth.or')}</span>
</div>
</div>
{/if}
@@ -70,7 +71,7 @@
<form method="POST" use:enhance class="space-y-4">
<div>
<label for="email" class="mb-1 block text-sm font-medium text-card-foreground">
Email
{$t('auth.email')}
</label>
<input
id="email"
@@ -79,7 +80,7 @@
autocomplete="email"
bind:value={$form.email}
class="w-full rounded-lg border border-input bg-background px-3 py-2.5 text-sm text-foreground placeholder:text-muted-foreground transition-colors focus:border-primary focus:outline-none focus:ring-2 focus:ring-ring/30"
placeholder="you@example.com"
placeholder={$t('auth.email_placeholder')}
/>
{#if $errors.email}
<p class="mt-1 text-sm text-destructive">{$errors.email[0]}</p>
@@ -88,7 +89,7 @@
<div>
<label for="password" class="mb-1 block text-sm font-medium text-card-foreground">
Password
{$t('auth.password')}
</label>
<input
id="password"
@@ -97,7 +98,7 @@
autocomplete="current-password"
bind:value={$form.password}
class="w-full rounded-lg border border-input bg-background px-3 py-2.5 text-sm text-foreground placeholder:text-muted-foreground transition-colors focus:border-primary focus:outline-none focus:ring-2 focus:ring-ring/30"
placeholder="Enter your password"
placeholder={$t('auth.password_placeholder')}
/>
{#if $errors.password}
<p class="mt-1 text-sm text-destructive">{$errors.password[0]}</p>
@@ -112,10 +113,10 @@
{#if $submitting}
<span class="flex items-center justify-center gap-2">
<span class="h-4 w-4 animate-spin rounded-full border-2 border-primary-foreground border-t-transparent"></span>
Signing in...
{$t('auth.login_submitting')}
</span>
{:else}
Sign In
{$t('auth.login_submit')}
{/if}
</button>
</form>
@@ -123,8 +124,8 @@
{#if showLocalForm}
<p class="mt-6 text-center text-sm text-muted-foreground">
Don't have an account?
<a href="/register" class="font-medium text-primary hover:underline">Register</a>
{$t('auth.no_account')}
<a href="/register" class="font-medium text-primary hover:underline">{$t('auth.register')}</a>
</p>
{/if}
</div>
src/routes/register/+page.svelte
+14 -13
View File
@@ -1,4 +1,5 @@
<script lang="ts">
import { t } from 'svelte-i18n';
import { superForm } from 'sveltekit-superforms';
import type { PageData } from './$types.js';
import AmbientBackground from '$lib/components/background/AmbientBackground.svelte';
@@ -9,7 +10,7 @@
</script>
<svelte:head>
<title>Register — Web App Launcher</title>
<title>{$t('auth.register')} — {$t('app_title')}</title>
</svelte:head>
<AmbientBackground />
@@ -34,14 +35,14 @@
<line x1="22" y1="11" x2="16" y2="11" />
</svg>
</div>
<h1 class="text-2xl font-bold text-card-foreground">Create Account</h1>
<p class="mt-1 text-sm text-muted-foreground">Get started with App Launcher</p>
<h1 class="text-2xl font-bold text-card-foreground">{$t('auth.register_title')}</h1>
<p class="mt-1 text-sm text-muted-foreground">{$t('auth.register_subtitle')}</p>
</div>
<form method="POST" use:enhance class="space-y-4">
<div>
<label for="displayName" class="mb-1 block text-sm font-medium text-card-foreground">
Display Name
{$t('auth.display_name')}
</label>
<input
id="displayName"
@@ -50,7 +51,7 @@
autocomplete="name"
bind:value={$form.displayName}
class="w-full rounded-lg border border-input bg-background px-3 py-2.5 text-sm text-foreground placeholder:text-muted-foreground transition-colors focus:border-primary focus:outline-none focus:ring-2 focus:ring-ring/30"
placeholder="Your name"
placeholder={$t('auth.display_name_placeholder')}
/>
{#if $errors.displayName}
<p class="mt-1 text-sm text-destructive">{$errors.displayName[0]}</p>
@@ -59,7 +60,7 @@
<div>
<label for="email" class="mb-1 block text-sm font-medium text-card-foreground">
Email
{$t('auth.email')}
</label>
<input
id="email"
@@ -68,7 +69,7 @@
autocomplete="email"
bind:value={$form.email}
class="w-full rounded-lg border border-input bg-background px-3 py-2.5 text-sm text-foreground placeholder:text-muted-foreground transition-colors focus:border-primary focus:outline-none focus:ring-2 focus:ring-ring/30"
placeholder="you@example.com"
placeholder={$t('auth.email_placeholder')}
/>
{#if $errors.email}
<p class="mt-1 text-sm text-destructive">{$errors.email[0]}</p>
@@ -77,7 +78,7 @@
<div>
<label for="password" class="mb-1 block text-sm font-medium text-card-foreground">
Password
{$t('auth.password')}
</label>
<input
id="password"
@@ -86,7 +87,7 @@
autocomplete="new-password"
bind:value={$form.password}
class="w-full rounded-lg border border-input bg-background px-3 py-2.5 text-sm text-foreground placeholder:text-muted-foreground transition-colors focus:border-primary focus:outline-none focus:ring-2 focus:ring-ring/30"
placeholder="At least 6 characters"
placeholder={$t('auth.password_placeholder_register')}
/>
{#if $errors.password}
<p class="mt-1 text-sm text-destructive">{$errors.password[0]}</p>
@@ -101,17 +102,17 @@
{#if $submitting}
<span class="flex items-center justify-center gap-2">
<span class="h-4 w-4 animate-spin rounded-full border-2 border-primary-foreground border-t-transparent"></span>
Creating account...
{$t('auth.register_submitting')}
</span>
{:else}
Create Account
{$t('auth.register_submit')}
{/if}
</button>
</form>
<p class="mt-6 text-center text-sm text-muted-foreground">
Already have an account?
<a href="/login" class="font-medium text-primary hover:underline">Sign in</a>
{$t('auth.have_account')}
<a href="/login" class="font-medium text-primary hover:underline">{$t('auth.sign_in_link')}</a>
</p>
</div>
</main>