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

Co-authored-by: Jason Rasmussen <jason@rasm.me>

apps/root.immich.app/src/routes/(shell)/+layout.svelte

@@ -30,6 +30,7 @@
     mdiScriptTextOutline,
     mdiShoppingOutline,
   } from '@mdi/js';
+  import { DateTime } from 'luxon';
   import { siGithub } from 'simple-icons';
   import { type Snippet } from 'svelte';
   import { MediaQuery } from 'svelte/reactivity';
@@ -61,7 +62,10 @@
 
 <TooltipProvider>
   <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">
         {#if !page.url.pathname.startsWith('/blog') && featuredPost}
           <AnnouncementBanner until={featuredPost.publishedAt.plus({ week: 1 })}>

apps/root.immich.app/src/routes/docker-compose-builder/+page.svelte

@@ -8,6 +8,7 @@
   import {
     ActionBar,
     ActionButton,
+    Alert,
     AppShell,
     AppShellBar,
     Button,
@@ -45,6 +46,7 @@
     mdiDownload,
     mdiEyeOffOutline,
     mdiEyeOutline,
+    mdiPartyPopper,
     mdiPlus,
   } from '@mdi/js';
   import { onMount } from 'svelte';
@@ -131,6 +133,8 @@
     setTimeout(() => URL.revokeObjectURL(url), 0);
   };
 
+  const FEEDBACK_URL = 'https://github.com/immich-app/immich/discussions/31232';
+
   const pageMetadata = {
     title: 'Docker Compose Builder',
     description: 'Build a custom docker-compose.yml file for Immich.',
@@ -173,7 +177,8 @@
 
 <SiteMetadata site={siteMetadata} page={pageMetadata} />
 
-<AppShell>
+<div class="flex h-dvh flex-col">
+  <AppShell class="h-auto min-h-0 grow">
     <AppShellBar>
       <ActionBar
         closeIcon={mdiArrowLeft}
@@ -191,6 +196,12 @@
     </AppShellBar>
     <PageContent>
       <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">
           <ActionButton action={Advanced} />
           <ActionButton action={Copy} />
@@ -319,7 +330,8 @@
                         <Switch bind:checked={config.storage.customFolders} class="flex justify-between gap-4" />
                       </Field>
                       {#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)}
                           {@const error = errors[`storage.overrides.${folder.key}`]}
                           <Field label={folder.label} invalid={!!error}>
@@ -527,4 +539,5 @@
         </div>
       </Container>
     </PageContent>
-</AppShell>
+  </AppShell>
+</div>