alexei.dolgolyov
a6b09aae9c
Replace the disconnected board edit page with inline editing directly on the board view. Toggle with Ctrl+E or the Edit button. Features: - Edit mode store with changeset accumulation and batch save - Floating toolbar (save, discard, add section, board settings, exit) - Widget hover overlays with edit/delete/drag controls - Type-specific widget config panels for all 14 widget types - Section inline editing (title, icon picker, delete) - "+" buttons for adding widgets and sections inline - Section-level drag-and-drop reordering via svelte-dnd-action - Batch save API endpoint (single Prisma transaction) - Board properties side panel with live theme/wallpaper preview - Modal widget type picker with search filtering - Icon picker component with visual grid and search - Confirmation dialog modal for all destructive actions - HTML format support for Note widget (in addition to markdown/text) - Full i18n support (en + ru) for all new UI strings - Legacy edit page banner linking to new inline mode
630 lines
24 KiB
Svelte
630 lines
24 KiB
Svelte
<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 BoardAccessControl from '$lib/components/board/BoardAccessControl.svelte';
|
|
import CustomCssEditor from '$lib/components/settings/CustomCssEditor.svelte';
|
|
|
|
|
|
let { data }: { data: PageData } = $props();
|
|
|
|
let showAddSection = $state(false);
|
|
let addWidgetSectionId = $state<string | null>(null);
|
|
let errorMessage = $state('');
|
|
let wallpaperUploading = $state(false);
|
|
let boardCustomCss = $state(data.board.customCss ?? '');
|
|
|
|
async function handleWallpaperUpload(event: Event) {
|
|
const input = event.target as HTMLInputElement;
|
|
const file = input.files?.[0];
|
|
if (!file) return;
|
|
|
|
wallpaperUploading = true;
|
|
errorMessage = '';
|
|
|
|
try {
|
|
const formData = new FormData();
|
|
formData.set('file', file);
|
|
|
|
const res = await fetch('/api/wallpaper', {
|
|
method: 'POST',
|
|
body: formData
|
|
});
|
|
|
|
if (!res.ok) {
|
|
const json = await res.json();
|
|
errorMessage = json.error ?? 'Failed to upload wallpaper';
|
|
return;
|
|
}
|
|
|
|
const json = await res.json();
|
|
const wallpaperUrl = json.data?.path;
|
|
|
|
if (wallpaperUrl) {
|
|
// Save wallpaper URL to board
|
|
const updateRes = await fetch(`/api/boards/${data.board.id}`, {
|
|
method: 'PATCH',
|
|
headers: { 'Content-Type': 'application/json' },
|
|
body: JSON.stringify({ wallpaperUrl })
|
|
});
|
|
|
|
if (updateRes.ok) {
|
|
await invalidateAll();
|
|
} else {
|
|
errorMessage = 'Wallpaper uploaded but failed to save to board';
|
|
}
|
|
}
|
|
} catch {
|
|
errorMessage = 'Network error uploading wallpaper';
|
|
} finally {
|
|
wallpaperUploading = false;
|
|
}
|
|
}
|
|
|
|
function handleToggleAddWidget(sectionId: string) {
|
|
addWidgetSectionId = addWidgetSectionId === sectionId ? null : sectionId;
|
|
}
|
|
|
|
async function handleDeleteSection(sectionId: string) {
|
|
const formData = new FormData();
|
|
formData.set('sectionId', sectionId);
|
|
|
|
try {
|
|
await fetch(`?/deleteSection`, {
|
|
method: 'POST',
|
|
body: formData
|
|
});
|
|
await invalidateAll();
|
|
} catch (err) {
|
|
errorMessage = err instanceof Error ? err.message : 'Failed to delete section';
|
|
}
|
|
}
|
|
|
|
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', (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`, {
|
|
method: 'POST',
|
|
body: formData
|
|
});
|
|
addWidgetSectionId = null;
|
|
await invalidateAll();
|
|
} catch (err) {
|
|
errorMessage = err instanceof Error ? err.message : 'Failed to add widget';
|
|
}
|
|
}
|
|
|
|
async function handleUpdateSection(sectionId: string, sectionData: Record<string, unknown>) {
|
|
const formData = new FormData();
|
|
formData.set('sectionId', sectionId);
|
|
for (const [key, value] of Object.entries(sectionData)) {
|
|
if (value != null) {
|
|
formData.set(key, String(value));
|
|
}
|
|
}
|
|
|
|
try {
|
|
await fetch(`?/updateSection`, {
|
|
method: 'POST',
|
|
body: formData
|
|
});
|
|
await invalidateAll();
|
|
} catch (err) {
|
|
errorMessage = err instanceof Error ? err.message : 'Failed to update section';
|
|
}
|
|
}
|
|
|
|
async function handleDeleteWidget(widgetId: string) {
|
|
const formData = new FormData();
|
|
formData.set('widgetId', widgetId);
|
|
|
|
try {
|
|
await fetch(`?/deleteWidget`, {
|
|
method: 'POST',
|
|
body: formData
|
|
});
|
|
await invalidateAll();
|
|
} catch (err) {
|
|
errorMessage = err instanceof Error ? err.message : 'Failed to delete widget';
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<svelte:head>
|
|
<title>{$t('board.edit_board')}: {data.board.name}</title>
|
|
</svelte:head>
|
|
|
|
<div class="p-6">
|
|
<div class="mx-auto max-w-4xl">
|
|
{#if errorMessage}
|
|
<div class="mb-4 rounded-lg border border-destructive bg-destructive/10 p-3">
|
|
<p class="text-sm text-destructive">{errorMessage}</p>
|
|
<button type="button" onclick={() => { errorMessage = ''; }} class="mt-1 text-xs text-destructive underline">
|
|
{$t('common.dismiss') ?? 'Dismiss'}
|
|
</button>
|
|
</div>
|
|
{/if}
|
|
|
|
<!-- Inline edit mode banner -->
|
|
<div class="mb-4 flex items-center gap-3 rounded-xl border border-primary/30 bg-primary/5 p-4">
|
|
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="shrink-0 text-primary">
|
|
<path d="M17 3a2.85 2.83 0 1 1 4 4L7.5 20.5 2 22l1.5-5.5Z" /><path d="m15 5 4 4" />
|
|
</svg>
|
|
<div class="flex-1">
|
|
<p class="text-sm font-medium text-foreground">{$t('board.try_inline_edit') ?? 'Try the new inline edit mode!'}</p>
|
|
<p class="text-xs text-muted-foreground">{$t('board.inline_edit_description') ?? 'Edit your board directly with live preview. Press Ctrl+E on the board page.'}</p>
|
|
</div>
|
|
<a
|
|
href="/boards/{data.board.id}?edit=true"
|
|
class="shrink-0 rounded-lg bg-primary px-3 py-1.5 text-sm font-medium text-primary-foreground transition-colors hover:bg-primary/90"
|
|
>
|
|
{$t('board.open_inline_edit') ?? 'Open Inline Edit'}
|
|
</a>
|
|
</div>
|
|
|
|
<div class="mb-6 flex items-center justify-between">
|
|
<h1 class="text-2xl font-bold text-foreground">{$t('board.edit_board')} <span class="text-sm font-normal text-muted-foreground">({$t('board.advanced') ?? 'Advanced'})</span></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"
|
|
>
|
|
{$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">{$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">{$t('common.name')}</label>
|
|
<input
|
|
id="board-name"
|
|
name="name"
|
|
type="text"
|
|
value={data.board.name}
|
|
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"
|
|
required
|
|
/>
|
|
</div>
|
|
<div>
|
|
<label for="board-icon" class="mb-1 block text-sm font-medium text-foreground">{$t('app.icon')}</label>
|
|
<input
|
|
id="board-icon"
|
|
name="icon"
|
|
type="text"
|
|
value={data.board.icon ?? ''}
|
|
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="e.g. layout-dashboard"
|
|
/>
|
|
</div>
|
|
<div class="sm:col-span-2">
|
|
<label for="board-desc" class="mb-1 block text-sm font-medium text-foreground">{$t('common.description')}</label>
|
|
<textarea
|
|
id="board-desc"
|
|
name="description"
|
|
rows="2"
|
|
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"
|
|
>{data.board.description ?? ''}</textarea>
|
|
</div>
|
|
<div class="flex items-center gap-4">
|
|
<label class="flex items-center gap-2 text-sm text-foreground">
|
|
<input
|
|
type="checkbox"
|
|
name="isDefault"
|
|
checked={data.board.isDefault}
|
|
class="h-4 w-4 rounded border-input accent-primary"
|
|
/>
|
|
{$t('board.default_board')}
|
|
</label>
|
|
</div>
|
|
</div>
|
|
<div class="mt-4">
|
|
<button
|
|
type="submit"
|
|
class="rounded-lg bg-primary px-4 py-2 text-sm font-medium text-primary-foreground transition-colors hover:bg-primary/90"
|
|
>
|
|
{$t('board.save')}
|
|
</button>
|
|
</div>
|
|
</form>
|
|
</section>
|
|
|
|
<!-- Board Theme -->
|
|
<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">{$t('board.theme_settings') ?? 'Theme Settings'}</h2>
|
|
<form method="POST" action="?/updateBoard" use:enhance>
|
|
<!-- Pass required board name so the form is valid -->
|
|
<input type="hidden" name="name" value={data.board.name} />
|
|
|
|
<div class="grid gap-4">
|
|
<!-- Hue Slider -->
|
|
<div>
|
|
<label for="board-hue" class="mb-1 block text-sm font-medium text-foreground">{$t('settings.hue') ?? 'Hue'}</label>
|
|
<div class="flex items-center gap-3">
|
|
<input
|
|
id="board-hue"
|
|
name="themeHue"
|
|
type="range"
|
|
min="0"
|
|
max="360"
|
|
step="1"
|
|
value={data.board.themeHue ?? 220}
|
|
class="h-3 w-full cursor-pointer appearance-none rounded-full bg-gradient-to-r from-red-500 via-green-500 via-blue-500 to-red-500 [&::-webkit-slider-thumb]:h-5 [&::-webkit-slider-thumb]:w-5 [&::-webkit-slider-thumb]:appearance-none [&::-webkit-slider-thumb]:rounded-full [&::-webkit-slider-thumb]:border-2 [&::-webkit-slider-thumb]:border-white [&::-webkit-slider-thumb]:bg-primary [&::-webkit-slider-thumb]:shadow-md"
|
|
/>
|
|
<span class="w-10 text-center text-sm text-muted-foreground">{data.board.themeHue ?? 220}</span>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Saturation Slider -->
|
|
<div>
|
|
<label for="board-sat" class="mb-1 block text-sm font-medium text-foreground">{$t('settings.saturation') ?? 'Saturation'}</label>
|
|
<div class="flex items-center gap-3">
|
|
<input
|
|
id="board-sat"
|
|
name="themeSaturation"
|
|
type="range"
|
|
min="0"
|
|
max="100"
|
|
step="1"
|
|
value={data.board.themeSaturation ?? 70}
|
|
class="h-3 w-full cursor-pointer appearance-none rounded-full bg-gradient-to-r from-gray-500 to-primary [&::-webkit-slider-thumb]:h-5 [&::-webkit-slider-thumb]:w-5 [&::-webkit-slider-thumb]:appearance-none [&::-webkit-slider-thumb]:rounded-full [&::-webkit-slider-thumb]:border-2 [&::-webkit-slider-thumb]:border-white [&::-webkit-slider-thumb]:bg-primary [&::-webkit-slider-thumb]:shadow-md"
|
|
/>
|
|
<span class="w-10 text-center text-sm text-muted-foreground">{data.board.themeSaturation ?? 70}%</span>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Background Type -->
|
|
<div>
|
|
<label class="mb-1 block text-sm font-medium text-foreground">{$t('settings.background') ?? 'Background'}</label>
|
|
<div class="flex flex-wrap gap-1 rounded-lg border border-border bg-muted/50 p-1">
|
|
{#each ['mesh', 'particles', 'aurora', 'wallpaper', 'none'] as bg (bg)}
|
|
<label class="flex-1">
|
|
<input type="radio" name="backgroundType" value={bg} checked={data.board.backgroundType === bg} class="peer sr-only" />
|
|
<span class="block cursor-pointer rounded-md px-3 py-2 text-center text-sm font-medium text-muted-foreground transition-colors peer-checked:bg-background peer-checked:text-foreground peer-checked:shadow-sm hover:text-foreground">
|
|
{bg}
|
|
</span>
|
|
</label>
|
|
{/each}
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Card Size -->
|
|
<div>
|
|
<label class="mb-1 block text-sm font-medium text-foreground">{$t('board.card_size') ?? 'Card Size'}</label>
|
|
<div class="flex gap-1 rounded-lg border border-border bg-muted/50 p-1">
|
|
{#each ['compact', 'medium', 'large'] as size (size)}
|
|
<label class="flex-1">
|
|
<input type="radio" name="cardSize" value={size} checked={(data.board.cardSize ?? 'medium') === size} class="peer sr-only" />
|
|
<span class="block cursor-pointer rounded-md px-3 py-2 text-center text-sm font-medium text-muted-foreground transition-colors peer-checked:bg-background peer-checked:text-foreground peer-checked:shadow-sm hover:text-foreground">
|
|
{size}
|
|
</span>
|
|
</label>
|
|
{/each}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="mt-4">
|
|
<button
|
|
type="submit"
|
|
class="rounded-lg bg-primary px-4 py-2 text-sm font-medium text-primary-foreground transition-colors hover:bg-primary/90"
|
|
>
|
|
{$t('board.save')}
|
|
</button>
|
|
</div>
|
|
</form>
|
|
</section>
|
|
|
|
<!-- Wallpaper Settings -->
|
|
<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">{$t('board.wallpaper') ?? 'Wallpaper'}</h2>
|
|
<div class="grid gap-4">
|
|
<!-- Current wallpaper preview -->
|
|
{#if data.board.wallpaperUrl}
|
|
<div class="relative overflow-hidden rounded-lg border border-border">
|
|
<img
|
|
src={data.board.wallpaperUrl}
|
|
alt="Board wallpaper"
|
|
class="h-32 w-full object-cover"
|
|
/>
|
|
<div class="absolute inset-0" style="background: rgba(0,0,0,{data.board.wallpaperOverlay ?? 0.3}); backdrop-filter: blur({data.board.wallpaperBlur ?? 0}px);"></div>
|
|
</div>
|
|
{/if}
|
|
|
|
<!-- Upload -->
|
|
<div>
|
|
<label for="wallpaper-upload" class="mb-1 block text-sm font-medium text-foreground">
|
|
{$t('board.upload_wallpaper') ?? 'Upload wallpaper'}
|
|
</label>
|
|
<input
|
|
id="wallpaper-upload"
|
|
type="file"
|
|
accept="image/png,image/jpeg,image/webp"
|
|
onchange={handleWallpaperUpload}
|
|
disabled={wallpaperUploading}
|
|
class="w-full rounded-lg border border-input bg-background px-3 py-2 text-sm text-foreground file:mr-4 file:rounded file:border-0 file:bg-primary file:px-4 file:py-1 file:text-sm file:font-medium file:text-primary-foreground"
|
|
/>
|
|
<p class="mt-1 text-xs text-muted-foreground">{$t('board.wallpaper_hint') ?? 'PNG, JPG, or WebP. Max 5MB.'}</p>
|
|
{#if wallpaperUploading}
|
|
<p class="mt-1 text-xs text-primary">{$t('common.uploading') ?? 'Uploading...'}</p>
|
|
{/if}
|
|
</div>
|
|
|
|
<!-- Or URL input -->
|
|
<form method="POST" action="?/updateBoard" use:enhance>
|
|
<input type="hidden" name="name" value={data.board.name} />
|
|
<div>
|
|
<label for="wallpaper-url" class="mb-1 block text-sm font-medium text-foreground">
|
|
{$t('board.wallpaper_url') ?? 'Or enter URL'}
|
|
</label>
|
|
<input
|
|
id="wallpaper-url"
|
|
name="wallpaperUrl"
|
|
type="url"
|
|
value={data.board.wallpaperUrl ?? ''}
|
|
placeholder="https://images.unsplash.com/..."
|
|
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"
|
|
/>
|
|
</div>
|
|
|
|
<!-- Blur slider -->
|
|
<div class="mt-3">
|
|
<label for="wallpaper-blur" class="mb-1 block text-sm font-medium text-foreground">
|
|
{$t('board.blur') ?? 'Blur'}: {data.board.wallpaperBlur ?? 0}px
|
|
</label>
|
|
<input
|
|
id="wallpaper-blur"
|
|
name="wallpaperBlur"
|
|
type="range"
|
|
min="0"
|
|
max="20"
|
|
step="1"
|
|
value={data.board.wallpaperBlur ?? 0}
|
|
class="h-2 w-full cursor-pointer appearance-none rounded-full bg-muted [&::-webkit-slider-thumb]:h-4 [&::-webkit-slider-thumb]:w-4 [&::-webkit-slider-thumb]:appearance-none [&::-webkit-slider-thumb]:rounded-full [&::-webkit-slider-thumb]:bg-primary"
|
|
/>
|
|
</div>
|
|
|
|
<!-- Overlay opacity slider -->
|
|
<div class="mt-3">
|
|
<label for="wallpaper-overlay" class="mb-1 block text-sm font-medium text-foreground">
|
|
{$t('board.overlay_opacity') ?? 'Overlay opacity'}: {Math.round((data.board.wallpaperOverlay ?? 0.3) * 100)}%
|
|
</label>
|
|
<input
|
|
id="wallpaper-overlay"
|
|
name="wallpaperOverlay"
|
|
type="range"
|
|
min="0"
|
|
max="1"
|
|
step="0.05"
|
|
value={data.board.wallpaperOverlay ?? 0.3}
|
|
class="h-2 w-full cursor-pointer appearance-none rounded-full bg-muted [&::-webkit-slider-thumb]:h-4 [&::-webkit-slider-thumb]:w-4 [&::-webkit-slider-thumb]:appearance-none [&::-webkit-slider-thumb]:rounded-full [&::-webkit-slider-thumb]:bg-primary"
|
|
/>
|
|
</div>
|
|
|
|
<!-- Parallax toggle -->
|
|
<div class="mt-3">
|
|
<label class="flex items-center gap-2 text-sm text-foreground">
|
|
<input
|
|
type="checkbox"
|
|
name="wallpaperParallax"
|
|
checked={false}
|
|
class="h-4 w-4 rounded border-input accent-primary"
|
|
/>
|
|
{$t('board.parallax') ?? 'Parallax effect'}
|
|
</label>
|
|
<p class="mt-1 text-xs text-muted-foreground">{$t('board.parallax_hint') ?? 'Adds subtle depth movement to the wallpaper background'}</p>
|
|
</div>
|
|
|
|
<div class="mt-4">
|
|
<button
|
|
type="submit"
|
|
class="rounded-lg bg-primary px-4 py-2 text-sm font-medium text-primary-foreground transition-colors hover:bg-primary/90"
|
|
>
|
|
{$t('board.save')}
|
|
</button>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Board Custom CSS -->
|
|
<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">{$t('board.custom_css') ?? 'Custom CSS'}</h2>
|
|
<form method="POST" action="?/updateBoard" use:enhance>
|
|
<input type="hidden" name="name" value={data.board.name} />
|
|
<input type="hidden" name="customCss" value={boardCustomCss} />
|
|
<CustomCssEditor
|
|
value={boardCustomCss}
|
|
onchange={(css) => { boardCustomCss = css; }}
|
|
label={$t('board.custom_css_label') ?? 'Board-scoped CSS'}
|
|
/>
|
|
<div class="mt-4">
|
|
<button
|
|
type="submit"
|
|
class="rounded-lg bg-primary px-4 py-2 text-sm font-medium text-primary-foreground transition-colors hover:bg-primary/90"
|
|
>
|
|
{$t('board.save')}
|
|
</button>
|
|
</div>
|
|
</form>
|
|
</section>
|
|
|
|
<!-- Guest Access -->
|
|
<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">{$t('board.guest_access_title')}</h2>
|
|
<div class="rounded-lg border border-border bg-muted/30 p-4">
|
|
<form method="POST" action="?/updateBoard" use:enhance>
|
|
<input type="hidden" name="name" value={data.board.name} />
|
|
<input type="hidden" name="isDefault" value={data.board.isDefault ? 'on' : ''} />
|
|
<label class="flex items-start gap-3 text-sm text-foreground">
|
|
<input
|
|
type="checkbox"
|
|
name="isGuestAccessible"
|
|
checked={data.board.isGuestAccessible}
|
|
class="mt-0.5 h-4 w-4 rounded border-input accent-primary"
|
|
/>
|
|
<div>
|
|
<span class="font-medium">{$t('board.guest_accessible')}</span>
|
|
<p class="mt-1 text-xs text-muted-foreground">{$t('board.guest_access_description')}</p>
|
|
{#if data.board.isGuestAccessible}
|
|
<p class="mt-1 flex items-center gap-1 text-xs text-green-500">
|
|
<svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
|
<circle cx="12" cy="12" r="10" />
|
|
<line x1="2" y1="12" x2="22" y2="12" />
|
|
<path d="M12 2a15.3 15.3 0 0 1 4 10 15.3 15.3 0 0 1-4 10 15.3 15.3 0 0 1-4-10 15.3 15.3 0 0 1 4-10z" />
|
|
</svg>
|
|
{$t('board.guest_access_enabled')}
|
|
</p>
|
|
{:else}
|
|
<p class="mt-1 flex items-center gap-1 text-xs text-muted-foreground">
|
|
<svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
|
<rect x="3" y="11" width="18" height="11" rx="2" ry="2" />
|
|
<path d="M7 11V7a5 5 0 0 1 10 0v4" />
|
|
</svg>
|
|
{$t('board.guest_access_disabled')}
|
|
</p>
|
|
{/if}
|
|
</div>
|
|
</label>
|
|
<div class="mt-3">
|
|
<button
|
|
type="submit"
|
|
class="rounded-lg bg-primary px-4 py-2 text-sm font-medium text-primary-foreground transition-colors hover:bg-primary/90"
|
|
>
|
|
{$t('board.save')}
|
|
</button>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Permissions -->
|
|
{#if data.canManagePermissions}
|
|
<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">{$t('board.permissions_title')}</h2>
|
|
<p class="mb-4 text-sm text-muted-foreground">{$t('board.permissions_description')}</p>
|
|
<BoardAccessControl
|
|
boardId={data.board.id}
|
|
users={data.users}
|
|
groups={data.groups}
|
|
/>
|
|
</section>
|
|
{/if}
|
|
|
|
<!-- 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">{$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 ? $t('common.cancel') : $t('section.add')}
|
|
</button>
|
|
</div>
|
|
|
|
{#if showAddSection}
|
|
<div class="mb-4 rounded-xl border border-border bg-card p-4 shadow-sm">
|
|
<form
|
|
method="POST"
|
|
action="?/addSection"
|
|
use:enhance={() => {
|
|
return async ({ update }) => {
|
|
await update();
|
|
showAddSection = false;
|
|
};
|
|
}}
|
|
>
|
|
<div class="grid gap-3 sm:grid-cols-2">
|
|
<div>
|
|
<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"
|
|
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"
|
|
required
|
|
/>
|
|
</div>
|
|
<div>
|
|
<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={$t('section.icon_placeholder')}
|
|
/>
|
|
</div>
|
|
</div>
|
|
<div class="mt-3">
|
|
<button
|
|
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"
|
|
>
|
|
{$t('section.create')}
|
|
</button>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
{/if}
|
|
|
|
<DraggableBoard
|
|
boardId={data.board.id}
|
|
sections={data.board.sections}
|
|
apps={data.apps}
|
|
{addWidgetSectionId}
|
|
onToggleAddWidget={handleToggleAddWidget}
|
|
onDeleteSection={handleDeleteSection}
|
|
onAddWidget={handleAddWidget}
|
|
onDeleteWidget={handleDeleteWidget}
|
|
onUpdateSection={handleUpdateSection}
|
|
/>
|
|
</section>
|
|
</div>
|
|
</div>
|