@papu1337/builder 0.0.4 → 1.0.1

package/dist/builder/leftbar/leftBar.svelte

@@ -0,0 +1,740 @@
+<script lang="ts">
+	import type { ElementEntry } from '../../service';
+	import {
+		ComponentsInstance,
+		GLOBAL_KEY,
+		selectComponent,
+		getSelectedComponent,
+		deleteComponent,
+		handleDragAndDrop
+	} from '../../service';
+	import { pageMeta, setSlug, readPromoImage } from '../pageMeta.svelte';
+
+	interface LeftBarProps {
+		components: ElementEntry[];
+		addComponent: (component: ElementEntry) => void;
+	}
+
+	let { components, addComponent }: LeftBarProps = $props();
+
+	const DISPLAY_NAMES: Record<string, string> = {
+		banner: 'Banner',
+		text: 'Text',
+		button: 'Button',
+		howItWorks: 'How It Works',
+		steps: 'Steps',
+		terms: 'Terms'
+	};
+
+	const label = (name: string): string => DISPLAY_NAMES[name] ?? name;
+
+	let tab = $state<'layers' | 'setup'>('layers');
+
+	const placed = $derived(
+		[...ComponentsInstance]
+			.filter(([id]) => id !== GLOBAL_KEY)
+			.map(([id, value]) => ({ id, value }))
+	);
+
+	const selectedId = $derived(getSelectedComponent()?.id ?? null);
+
+	function layerTitle(entry: ElementEntry): string {
+		const values = entry.settings.values as Record<string, unknown>;
+		const typography = values.typography as { text?: unknown } | undefined;
+		if (typography && typeof typography.text === 'string' && typography.text) {
+			return typography.text;
+		}
+		return label(entry.name);
+	}
+
+	function move(index: number, dir: -1 | 1): void {
+		const next = index + dir;
+		if (next < 0 || next >= placed.length) return;
+		const arr = placed.slice();
+		const tmp = arr[index];
+		arr[index] = arr[next];
+		arr[next] = tmp;
+		handleDragAndDrop(arr.map((x) => ({ id: x.id, value: x.value })));
+	}
+</script>
+
+<aside class="rail">
+	<div class="rail__tabs">
+		<button
+			type="button"
+			class="rail__tab"
+			class:rail__tab--active={tab === 'layers'}
+			onclick={() => (tab = 'layers')}
+		>
+			Layers
+		</button>
+		<button
+			type="button"
+			class="rail__tab"
+			class:rail__tab--active={tab === 'setup'}
+			onclick={() => (tab = 'setup')}
+		>
+			Setup
+		</button>
+	</div>
+
+	{#if tab === 'layers'}
+		<div class="layers">
+			<div class="palette">
+				<div class="palette__label">Elements</div>
+				<div class="elements-list">
+					{#each components as entry (entry.name)}
+						<button type="button" class="element-btn" onclick={() => addComponent(entry)}>
+							<span class="element-icon">&#9642;</span>
+							<span class="element-name">{label(entry.name)}</span>
+							<span class="element-add">+</span>
+						</button>
+					{/each}
+				</div>
+			</div>
+
+			<div class="layers__section">
+				<span class="layers__section-title">Page Layers</span>
+				<span class="layers__count">{placed.length}</span>
+			</div>
+
+			<div class="layers__list">
+				{#each placed as item, index (item.id)}
+					<button
+						type="button"
+						class="layer"
+						class:layer--active={selectedId === item.id}
+						onclick={() => selectComponent(item.value)}
+					>
+						<span class="layer__reorder">
+							<span
+								class="layer__move"
+								class:layer__move--disabled={index === 0}
+								role="button"
+								tabindex="-1"
+								onclick={(e) => {
+									e.stopPropagation();
+									move(index, -1);
+								}}
+							>
+								&#8593;
+							</span>
+							<span
+								class="layer__move"
+								class:layer__move--disabled={index === placed.length - 1}
+								role="button"
+								tabindex="-1"
+								onclick={(e) => {
+									e.stopPropagation();
+									move(index, 1);
+								}}
+							>
+								&#8595;
+							</span>
+						</span>
+						<span class="layer__icon">{label(item.value.name).charAt(0)}</span>
+						<span class="layer__text">
+							<span class="layer__name">{layerTitle(item.value)}</span>
+							<span class="layer__type">{label(item.value.name)}</span>
+						</span>
+						<span
+							class="layer__remove"
+							title="Remove layer"
+							role="button"
+							tabindex="-1"
+							onclick={(e) => {
+								e.stopPropagation();
+								deleteComponent(item.id);
+							}}
+						>
+							&#10005;
+						</span>
+					</button>
+				{/each}
+
+				{#if placed.length === 0}
+					<div class="layers__empty">No elements yet. Click “Add element”.</div>
+				{/if}
+			</div>
+		</div>
+	{:else}
+		<div class="setup">
+			<div class="setup__section">
+				<span class="setup__legend">Release</span>
+				<button
+					type="button"
+					class="setup__check"
+					onclick={() => (pageMeta.isActive = !pageMeta.isActive)}
+				>
+					<span class="setup__box" class:setup__box--on={pageMeta.isActive}>
+						{#if pageMeta.isActive}&#10003;{/if}
+					</span>
+					<span class="setup__check-label">Is active</span>
+				</button>
+				<button
+					type="button"
+					class="setup__check"
+					onclick={() => (pageMeta.showOnPromotionPages = !pageMeta.showOnPromotionPages)}
+				>
+					<span class="setup__box" class:setup__box--on={pageMeta.showOnPromotionPages}>
+						{#if pageMeta.showOnPromotionPages}&#10003;{/if}
+					</span>
+					<span class="setup__check-label">Show on promotion pages</span>
+				</button>
+
+				{#if pageMeta.showOnPromotionPages}
+					<div class="setup__field">
+						<label class="setup__label" for="promo-title">Promotion title</label>
+						<input
+							id="promo-title"
+							class="setup__input"
+							bind:value={pageMeta.promoTitle}
+							placeholder="Title shown on promotion pages"
+							maxlength="120"
+						/>
+					</div>
+					<button
+						type="button"
+						class="setup__check setup__check--sub"
+						onclick={() => (pageMeta.promoTitleNoTranslate = !pageMeta.promoTitleNoTranslate)}
+					>
+						<span class="setup__box" class:setup__box--on={pageMeta.promoTitleNoTranslate}>
+							{#if pageMeta.promoTitleNoTranslate}&#10003;{/if}
+						</span>
+						<span class="setup__check-label">Don't translate title</span>
+					</button>
+
+					<div class="setup__field">
+						<label class="setup__label" for="promo-desc">Promotion description</label>
+						<textarea
+							id="promo-desc"
+							class="setup__input setup__input--area"
+							bind:value={pageMeta.promoDescription}
+							placeholder="Short description shown on promotion pages"
+							maxlength="280"
+							rows="3"
+						></textarea>
+					</div>
+					<button
+						type="button"
+						class="setup__check setup__check--sub"
+						onclick={() =>
+							(pageMeta.promoDescriptionNoTranslate = !pageMeta.promoDescriptionNoTranslate)}
+					>
+						<span class="setup__box" class:setup__box--on={pageMeta.promoDescriptionNoTranslate}>
+							{#if pageMeta.promoDescriptionNoTranslate}&#10003;{/if}
+						</span>
+						<span class="setup__check-label">Don't translate description</span>
+					</button>
+
+					<div class="setup__field">
+						<span class="setup__label">Promotion image</span>
+						{#if pageMeta.promoImage}
+							<div class="promo-image">
+								<img src={pageMeta.promoImage} alt="Promotion" />
+								<button
+									type="button"
+									class="promo-image__remove"
+									title="Remove"
+									onclick={() => (pageMeta.promoImage = '')}
+								>
+									&#10005;
+								</button>
+							</div>
+						{:else}
+							<label class="promo-upload">
+								<span class="promo-upload__text">Click to upload</span>
+								<span class="promo-upload__hint">PNG, JPG, SVG</span>
+								<input
+									type="file"
+									accept="image/*"
+									hidden
+									onchange={(e) => readPromoImage(e.currentTarget)}
+								/>
+							</label>
+						{/if}
+					</div>
+				{/if}
+			</div>
+
+			<div class="setup__section">
+				<span class="setup__legend">Page settings</span>
+				<div class="setup__field">
+					<label class="setup__label" for="setup-seo">SEO title</label>
+					<input
+						id="setup-seo"
+						class="setup__input"
+						bind:value={pageMeta.seoTitle}
+						placeholder="UEFA Champions League — Freebet"
+						maxlength="160"
+					/>
+				</div>
+				<div class="setup__field">
+					<label class="setup__label" for="setup-slug">URL slug</label>
+					<input
+						id="setup-slug"
+						class="setup__input setup__input--mono"
+						value={pageMeta.slug}
+						oninput={(e) => setSlug(e.currentTarget.value)}
+						placeholder="/ucl-freebet"
+					/>
+				</div>
+			</div>
+		</div>
+	{/if}
+</aside>
+
+<style>
+	.rail {
+		width: var(--sidebar-width);
+		flex-shrink: 0;
+		display: flex;
+		flex-direction: column;
+		background: var(--bg-surface);
+		border-right: 1px solid var(--border);
+		height: 100%;
+		overflow: hidden;
+	}
+
+	.rail__tabs {
+		flex: none;
+		display: flex;
+		gap: 2px;
+		padding: 10px 10px 0;
+		border-bottom: 1px solid var(--border);
+	}
+
+	.rail__tab {
+		flex: 1;
+		height: 34px;
+		border: none;
+		background: transparent;
+		border-radius: 8px 8px 0 0;
+		cursor: pointer;
+		font: inherit;
+		font-size: 12.5px;
+		font-weight: 600;
+		color: var(--text-secondary);
+		box-shadow: inset 0 -2px 0 transparent;
+		transition: color var(--transition), box-shadow var(--transition);
+	}
+
+	.rail__tab:hover {
+		color: var(--text-primary);
+	}
+
+	.rail__tab--active {
+		color: var(--accent);
+		box-shadow: inset 0 -2px 0 var(--accent);
+	}
+
+	.layers {
+		flex: 1;
+		display: flex;
+		flex-direction: column;
+		min-height: 0;
+	}
+
+	.palette {
+		flex: none;
+		padding: 10px 10px 4px;
+	}
+
+	.palette__label {
+		font-size: 10px;
+		font-weight: 600;
+		letter-spacing: 0.12em;
+		text-transform: uppercase;
+		color: var(--text-muted);
+		padding: 2px 4px 8px;
+	}
+
+	.elements-list {
+		display: flex;
+		flex-direction: column;
+		gap: 4px;
+	}
+
+	.element-btn {
+		display: flex;
+		align-items: center;
+		gap: 10px;
+		width: 100%;
+		padding: 9px 12px;
+		background: transparent;
+		border: 1px solid transparent;
+		border-radius: var(--radius-md);
+		cursor: pointer;
+		color: var(--text-secondary);
+		font: inherit;
+		font-size: 0.85rem;
+		font-weight: 500;
+		text-align: left;
+		transition: background var(--transition), border-color var(--transition), color var(--transition);
+	}
+
+	.element-btn:hover {
+		background: var(--accent-subtle);
+		border-color: var(--accent);
+		color: var(--text-primary);
+	}
+
+	.element-btn:hover .element-add {
+		opacity: 1;
+		color: var(--accent-hover);
+	}
+
+	.element-icon {
+		font-size: 0.55rem;
+		color: var(--accent);
+		opacity: 0.7;
+		flex-shrink: 0;
+	}
+
+	.element-name {
+		flex: 1;
+	}
+
+	.element-add {
+		font-size: 1rem;
+		font-weight: 300;
+		color: var(--text-muted);
+		opacity: 0;
+		transition: opacity var(--transition);
+	}
+
+	.layers__section {
+		flex: none;
+		display: flex;
+		align-items: center;
+		justify-content: space-between;
+		padding: 6px 14px;
+	}
+
+	.layers__section-title {
+		font-size: 10px;
+		font-weight: 600;
+		letter-spacing: 0.12em;
+		text-transform: uppercase;
+		color: var(--text-muted);
+	}
+
+	.layers__count {
+		font-size: 11px;
+		color: var(--text-muted);
+	}
+
+	.layers__list {
+		flex: 1;
+		overflow-y: auto;
+		padding: 0 8px 12px;
+	}
+
+	.layer {
+		display: flex;
+		align-items: center;
+		gap: 8px;
+		width: 100%;
+		height: 44px;
+		padding: 0 8px;
+		margin-bottom: 2px;
+		border: none;
+		border-radius: 9px;
+		cursor: pointer;
+		background: transparent;
+		text-align: left;
+		box-shadow: inset 0 0 0 1px transparent;
+		transition: background-color var(--transition), box-shadow var(--transition);
+	}
+
+	.layer:hover {
+		background: var(--bg-elevated);
+	}
+
+	.layer--active {
+		background: var(--accent-subtle);
+		box-shadow: inset 0 0 0 1.5px var(--accent);
+	}
+
+	.layer--active .layer__icon {
+		background: var(--accent);
+		color: #fff;
+	}
+
+	.layer--active .layer__name {
+		color: var(--accent);
+	}
+
+	.layer__reorder {
+		display: flex;
+		flex-direction: column;
+		flex: none;
+		gap: 1px;
+	}
+
+	.layer__move {
+		width: 16px;
+		height: 15px;
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		font-size: 9px;
+		color: var(--text-muted);
+		border-radius: 3px;
+		cursor: pointer;
+	}
+
+	.layer__move:hover {
+		background: var(--bg-hover);
+		color: var(--text-primary);
+	}
+
+	.layer__move--disabled {
+		opacity: 0.3;
+		pointer-events: none;
+	}
+
+	.layer__icon {
+		width: 26px;
+		height: 26px;
+		flex: none;
+		border-radius: 7px;
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		background: var(--bg-hover);
+		color: var(--text-secondary);
+		font-weight: 700;
+		font-size: 12px;
+	}
+
+	.layer__text {
+		flex: 1;
+		min-width: 0;
+	}
+
+	.layer__name {
+		display: block;
+		font-size: 12.5px;
+		font-weight: 500;
+		color: var(--text-primary);
+		white-space: nowrap;
+		overflow: hidden;
+		text-overflow: ellipsis;
+	}
+
+	.layer__type {
+		display: block;
+		font-size: 10px;
+		font-weight: 600;
+		letter-spacing: 0.08em;
+		text-transform: uppercase;
+		color: var(--text-muted);
+	}
+
+	.layer__remove {
+		width: 24px;
+		height: 24px;
+		flex: none;
+		display: none;
+		align-items: center;
+		justify-content: center;
+		border-radius: 6px;
+		color: var(--text-muted);
+		font-size: 11px;
+	}
+
+	.layer:hover .layer__remove {
+		display: flex;
+	}
+
+	.layer__remove:hover {
+		background: var(--danger-subtle);
+		color: var(--danger);
+	}
+
+	.layers__empty {
+		padding: 24px 14px;
+		text-align: center;
+		font-size: 12px;
+		color: var(--text-muted);
+	}
+
+	.setup {
+		flex: 1;
+		overflow-y: auto;
+		min-height: 0;
+	}
+
+	.setup__section {
+		padding: 14px;
+		border-bottom: 1px solid var(--border-light);
+		display: flex;
+		flex-direction: column;
+		gap: 11px;
+	}
+
+	.setup__legend {
+		font-size: 10px;
+		font-weight: 600;
+		letter-spacing: 0.12em;
+		text-transform: uppercase;
+		color: var(--text-muted);
+	}
+
+	.setup__check {
+		display: flex;
+		align-items: center;
+		gap: 11px;
+		border: none;
+		background: transparent;
+		padding: 0;
+		cursor: pointer;
+		text-align: left;
+	}
+
+	.setup__box {
+		width: 20px;
+		height: 20px;
+		flex: none;
+		border-radius: 6px;
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		background: var(--bg-surface);
+		color: #fbf8f3;
+		font-size: 12px;
+		box-shadow: inset 0 0 0 1.5px var(--border);
+		transition: background-color 0.12s ease, box-shadow 0.12s ease;
+	}
+
+	.setup__box--on {
+		background: var(--accent);
+		box-shadow: inset 0 0 0 1.5px var(--accent);
+	}
+
+	.setup__check-label {
+		font-size: 12.5px;
+		font-weight: 600;
+		color: var(--text-primary);
+	}
+
+	.setup__field {
+		display: flex;
+		flex-direction: column;
+		gap: 6px;
+	}
+
+	.setup__label {
+		font-size: 10px;
+		font-weight: 600;
+		letter-spacing: 0.1em;
+		text-transform: uppercase;
+		color: var(--text-muted);
+	}
+
+	.setup__input {
+		width: 100%;
+		height: 38px;
+		padding: 0 11px;
+		font: inherit;
+		font-size: 12.5px;
+		color: var(--text-primary);
+		background: var(--bg-elevated);
+		border: 1px solid var(--border-light);
+		border-radius: var(--radius-md);
+		outline: none;
+		transition: border-color var(--transition);
+	}
+
+	.setup__input:focus {
+		border-color: var(--accent);
+	}
+
+	.setup__input--mono {
+		font-family: var(--font-mono);
+		font-size: 12px;
+	}
+
+	.setup__input--area {
+		height: auto;
+		min-height: 64px;
+		padding: 9px 11px;
+		line-height: 1.5;
+		resize: vertical;
+	}
+
+	.setup__check--sub {
+		margin-top: -4px;
+		margin-left: 2px;
+	}
+
+	.setup__check--sub .setup__box {
+		width: 18px;
+		height: 18px;
+	}
+
+	.setup__check--sub .setup__check-label {
+		font-size: 12px;
+		font-weight: 500;
+		color: var(--text-secondary);
+	}
+
+	.promo-upload {
+		display: flex;
+		flex-direction: column;
+		align-items: center;
+		justify-content: center;
+		gap: 2px;
+		height: 84px;
+		border: 1.5px dashed var(--border);
+		border-radius: var(--radius-md);
+		background: var(--bg-elevated);
+		cursor: pointer;
+		transition: border-color var(--transition);
+	}
+
+	.promo-upload:hover {
+		border-color: var(--accent);
+	}
+
+	.promo-upload__text {
+		font-size: 12.5px;
+		font-weight: 600;
+		color: var(--text-secondary);
+	}
+
+	.promo-upload__hint {
+		font-size: 10.5px;
+		color: var(--text-muted);
+	}
+
+	.promo-image {
+		position: relative;
+		border-radius: var(--radius-md);
+		overflow: hidden;
+		border: 1px solid var(--border-light);
+	}
+
+	.promo-image img {
+		display: block;
+		width: 100%;
+	}
+
+	.promo-image__remove {
+		position: absolute;
+		top: 6px;
+		right: 6px;
+		width: 24px;
+		height: 24px;
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		border: none;
+		border-radius: 6px;
+		background: rgba(31, 29, 24, 0.6);
+		color: #fff;
+		cursor: pointer;
+		font-size: 12px;
+	}
+</style>