alexei.dolgolyov
5dcadd1c20
Warm, friendly redesign replacing the generic cold-shadcn look. Built as a swappable token bundle so other presets can be added later; dark mode and the user-tunable accent hue are retained. Foundation - app.css: warm cream (light) + "dusk" (dark) token system; terracotta accent (default hue 16); pastel --room-* palette; vivid --status-* (dots/bars) plus AA-legible --status-*-ink (text); soft warm shadows; --radius 1rem; font tokens - Fonts: Fraunces (display) + Figtree (body), self-hosted in static/fonts (no Google CDN) so offline/LAN installs work; system-ui fallbacks kept - h1/h2/h3 render in Fraunces via base layer Chrome and surfaces - Sidebar, Header, home, AppCard/BoardCard, BoardHeader, sections, favorites - 29 widgets + integration renderers: cozy card shells, room-palette charts - Default background is a static warm "cozy" glow (mesh demoted, rAF gated on prefers-reduced-motion) System-wide - Status colors tokenized (no raw bg/text-*-500 or status hex); success/warning to status tokens, categorical to room palette, errors to destructive - Inputs rounded-xl; buttons rounded-xl; cards/dialogs rounded-[1.4rem]; soft-shadow vocabulary only; focus-visible:ring-primary/30 - Forms, admin tables (now cozy cards), dialogs, popovers, auth screens a11y: reduced-motion guards; darker status "ink" text for AA on cream. Known tradeoff: terracotta primary + white button text ~2.96:1 (signature color, user-tunable). Verified: svelte-check 0/0, build ok, 274 tests pass, eslint 0 errors. Design refs + system sheet in design-mockups/.
64 lines
2.0 KiB
Svelte
64 lines
2.0 KiB
Svelte
<script lang="ts">
|
|
import { t } from 'svelte-i18n';
|
|
|
|
let origin = $state('');
|
|
let bookmarkletCode = $state('');
|
|
let bookmarkletHref = $state('');
|
|
|
|
$effect(() => {
|
|
if (typeof window !== 'undefined') {
|
|
origin = window.location.origin;
|
|
}
|
|
});
|
|
|
|
$effect(() => {
|
|
if (!origin) return;
|
|
// The bookmarklet opens the quick-add page with URL and title pre-filled
|
|
const code = `javascript:void(window.open('${origin}/apps/quick-add?url='+encodeURIComponent(location.href)+'&name='+encodeURIComponent(document.title),'_blank','width=600,height=500'))`;
|
|
bookmarkletCode = code;
|
|
bookmarkletHref = code;
|
|
});
|
|
</script>
|
|
|
|
<div class="rounded-xl border border-border bg-card p-6 shadow-[var(--shadow-soft)]">
|
|
<h2 class="mb-2 text-lg font-semibold text-card-foreground">
|
|
{$t('settings.bookmarklet_title')}
|
|
</h2>
|
|
<p class="mb-4 text-sm text-muted-foreground">
|
|
{$t('settings.bookmarklet_instructions')}
|
|
</p>
|
|
|
|
<div class="mb-4 flex items-center gap-3">
|
|
<a
|
|
href={bookmarkletHref}
|
|
class="inline-flex items-center gap-2 rounded-lg border-2 border-dashed border-primary/50 bg-primary/10 px-4 py-2 text-sm font-medium text-primary transition-colors hover:border-primary hover:bg-primary/20"
|
|
onclick={(e) => { e.preventDefault(); }}
|
|
draggable="true"
|
|
>
|
|
<svg
|
|
class="h-4 w-4"
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
viewBox="0 0 24 24"
|
|
fill="none"
|
|
stroke="currentColor"
|
|
stroke-width="2"
|
|
stroke-linecap="round"
|
|
stroke-linejoin="round"
|
|
>
|
|
<path d="m19 21-7-4-7 4V5a2 2 0 0 1 2-2h10a2 2 0 0 1 2 2v16z" />
|
|
</svg>
|
|
{$t('settings.bookmarklet_drag')}
|
|
</a>
|
|
<span class="text-xs text-muted-foreground">
|
|
{$t('settings.bookmarklet_drag_hint')}
|
|
</span>
|
|
</div>
|
|
|
|
<details class="group">
|
|
<summary class="cursor-pointer text-sm font-medium text-muted-foreground hover:text-foreground">
|
|
{$t('settings.bookmarklet_show_code')}
|
|
</summary>
|
|
<pre class="mt-2 overflow-x-auto rounded-md border border-border bg-background p-3 text-xs text-foreground"><code>{bookmarkletCode}</code></pre>
|
|
</details>
|
|
</div>
|