feat(builder): announcement/feedback bar (#762)

Co-authored-by: Jason Rasmussen <jason@rasm.me>
This commit is contained in:
bo0tzz
2026-09-02 19:02:06 +00:00
committed by GitHub
co-authored by Jason Rasmussen
parent f7d703eb95
commit 6c2f17986b
2 changed files with 359 additions and 342 deletions
@@ -30,6 +30,7 @@
mdiScriptTextOutline, mdiScriptTextOutline,
mdiShoppingOutline, mdiShoppingOutline,
} from '@mdi/js'; } from '@mdi/js';
import { DateTime } from 'luxon';
import { siGithub } from 'simple-icons'; import { siGithub } from 'simple-icons';
import { type Snippet } from 'svelte'; import { type Snippet } from 'svelte';
import { MediaQuery } from 'svelte/reactivity'; import { MediaQuery } from 'svelte/reactivity';
@@ -61,7 +62,10 @@
<TooltipProvider> <TooltipProvider>
<AppShell> <AppShell>
<AppShellHeader> <AppShellHeader class="block">
<AnnouncementBanner center size="small" until={DateTime.fromObject({ year: 2026, month: 9, day: 30 })}>
Try our new tool: <Link href="/docker-compose-builder">Docker Compose Builder</Link>
</AnnouncementBanner>
<div class="w-full"> <div class="w-full">
{#if !page.url.pathname.startsWith('/blog') && featuredPost} {#if !page.url.pathname.startsWith('/blog') && featuredPost}
<AnnouncementBanner until={featuredPost.publishedAt.plus({ week: 1 })}> <AnnouncementBanner until={featuredPost.publishedAt.plus({ week: 1 })}>
@@ -8,6 +8,7 @@
import { import {
ActionBar, ActionBar,
ActionButton, ActionButton,
Alert,
AppShell, AppShell,
AppShellBar, AppShellBar,
Button, Button,
@@ -45,6 +46,7 @@
mdiDownload, mdiDownload,
mdiEyeOffOutline, mdiEyeOffOutline,
mdiEyeOutline, mdiEyeOutline,
mdiPartyPopper,
mdiPlus, mdiPlus,
} from '@mdi/js'; } from '@mdi/js';
import { onMount } from 'svelte'; import { onMount } from 'svelte';
@@ -131,6 +133,8 @@
setTimeout(() => URL.revokeObjectURL(url), 0); setTimeout(() => URL.revokeObjectURL(url), 0);
}; };
const FEEDBACK_URL = 'https://github.com/immich-app/immich/discussions/31232';
const pageMetadata = { const pageMetadata = {
title: 'Docker Compose Builder', title: 'Docker Compose Builder',
description: 'Build a custom docker-compose.yml file for Immich.', description: 'Build a custom docker-compose.yml file for Immich.',
@@ -173,7 +177,8 @@
<SiteMetadata site={siteMetadata} page={pageMetadata} /> <SiteMetadata site={siteMetadata} page={pageMetadata} />
<AppShell> <div class="flex h-dvh flex-col">
<AppShell class="h-auto min-h-0 grow">
<AppShellBar> <AppShellBar>
<ActionBar <ActionBar
closeIcon={mdiArrowLeft} closeIcon={mdiArrowLeft}
@@ -191,6 +196,12 @@
</AppShellBar> </AppShellBar>
<PageContent> <PageContent>
<Container size="giant" center> <Container size="giant" center>
<Alert color="primary" icon={mdiPartyPopper} title="New feature" shape="rectangle" class="my-3">
<div>
This tool is new. Please give us <Link href={FEEDBACK_URL}>your feedback</Link>!
</div>
</Alert>
<div class="my-4 flex justify-end gap-2"> <div class="my-4 flex justify-end gap-2">
<ActionButton action={Advanced} /> <ActionButton action={Advanced} />
<ActionButton action={Copy} /> <ActionButton action={Copy} />
@@ -319,7 +330,8 @@
<Switch bind:checked={config.storage.customFolders} class="flex justify-between gap-4" /> <Switch bind:checked={config.storage.customFolders} class="flex justify-between gap-4" />
</Field> </Field>
{#if config.storage.customFolders} {#if config.storage.customFolders}
<Text size="small" color="muted">Leave a field blank to keep it under the upload location.</Text> <Text size="small" color="muted">Leave a field blank to keep it under the upload location.</Text
>
{#each FOLDER_OVERRIDES as folder (folder.key)} {#each FOLDER_OVERRIDES as folder (folder.key)}
{@const error = errors[`storage.overrides.${folder.key}`]} {@const error = errors[`storage.overrides.${folder.key}`]}
<Field label={folder.label} invalid={!!error}> <Field label={folder.label} invalid={!!error}>
@@ -527,4 +539,5 @@
</div> </div>
</Container> </Container>
</PageContent> </PageContent>
</AppShell> </AppShell>
</div>