Add some flow guidance in the form of title opacity/weight changes

webapp/src/lib/layouts/connect/ConnectSection.svelte

@@ -2,7 +2,7 @@
 import MoreInfo from '$lib/components/MoreInfo.svelte'
 import { Separator } from '$lib/components/ui/separator'
 import { getDeviceContext } from '$lib/contexts/device.svelte'
-import { assert } from '$lib/utils'
+import { assert, cn } from '$lib/utils'
 import IconCheckCircle from '~icons/material-symbols/check-circle'
 import IconPending from '~icons/material-symbols/pending'
 import ConnectButton from './ConnectButton.svelte'
@@ -37,7 +37,15 @@ $effect(() => {
 <section aria-labelledby="connect-section-label">
   <div class="mx-6 mt-6 mb-4 stack gap-2 md:row xl:mx-0">
     <div class="grow">
-      <h2 class="text-xl/8 font-semibold" id="connect-section-label">Connect to a device</h2>
+      <h2
+        class={cn(
+          'text-xl/8 font-semibold transition-all',
+          !deviceCtx.device || 'font-normal opacity-50',
+        )}
+        id="connect-section-label"
+      >
+        Connect to a device
+      </h2>
 
       <div class="stack-h gap-1 text-sm" aria-live="polite">
         {#if deviceCtx.device === null}

webapp/src/lib/layouts/edit/controls/ControlsSection.svelte

@@ -2,9 +2,12 @@
 import { Button } from '$lib/components/ui/button'
 import Separator from '$lib/components/ui/separator/separator.svelte'
 import { getConversionConfig } from '$lib/contexts/config.svelte'
+import { getDeviceContext } from '$lib/contexts/device.svelte'
+import { getFilesContext } from '$lib/contexts/files.svelte'
 import { getImageContext, imageIsCorrectRatio } from '$lib/contexts/image.svelte'
 import { DEFAULT_DITHERING_KERNEL } from '$lib/image/quantizer'
 import { Transform } from '$lib/image/transform'
+import { cn } from 'tailwind-variants'
 import IconEditOff from '~icons/material-symbols/edit-off'
 import BackgroundColorSlider from './BackgroundColorSlider.svelte'
 import BrightnessSlider from './conversion/BrightnessSlider.svelte'
@@ -15,6 +18,8 @@ import ScaleModeToggleGroup from './dimensions/ScaleModeToggleGroup.svelte'
 import TransformControls from './dimensions/TransformControls.svelte'
 
 const imageCtx = getImageContext()
+const deviceCtx = getDeviceContext()
+const filesCtx = getFilesContext()
 const config = getConversionConfig()
 
 const transformDisabled = $derived(imageCtx.image === null)
@@ -31,7 +36,15 @@ function restoreDefaultImageSettings() {
 </script>
 
 <section class="stack grow gap-4" aria-labelledby="controls-section-label">
-  <h2 class="text-xl/6 font-semibold" id="controls-section-label">Edit image</h2>
+  <h2
+    class={cn(
+      'text-xl/6 font-semibold transition-all',
+      filesCtx.files.length || 'font-normal opacity-50',
+    )}
+    id="controls-section-label"
+  >
+    Edit image
+  </h2>
 
   {#if imageNonSquare}
     <AspectRatioAlert />

webapp/src/lib/layouts/edit/preview/PreviewSection.svelte

@@ -1,14 +1,27 @@
 <script lang="ts">
+import { getDeviceContext } from '$lib/contexts/device.svelte'
+import { getFilesContext } from '$lib/contexts/files.svelte'
+import { cn } from '$lib/utils'
 import { MediaQuery } from 'svelte/reactivity'
 import AdaptivePreviewCanvas from './AdaptivePreviewCanvas.svelte'
 import FileSelect from './FileSelect.svelte'
 import PreviewCanvas from './PreviewCanvas.svelte'
 
 const mediaSm = new MediaQuery('min-width: 640px', false)
+const deviceCtx = getDeviceContext()
+const filesCtx = getFilesContext()
 </script>
 
 <section class="stack gap-4" aria-labelledby="preview-section-label">
-  <h2 class="text-xl/6 font-semibold" id="preview-section-label">Choose an image</h2>
+  <h2
+    class={cn(
+      'text-xl/6 font-semibold transition-all',
+      (deviceCtx.device && !filesCtx.files.length) || 'font-normal opacity-50',
+    )}
+    id="preview-section-label"
+  >
+    Choose an image
+  </h2>
 
   <FileSelect />
 

webapp/src/lib/layouts/write/WriteSection.svelte

@@ -1,11 +1,14 @@
 <script lang="ts">
 import { Separator } from '$lib/components/ui/separator'
+import { getDeviceContext } from '$lib/contexts/device.svelte'
 import { getImageContext } from '$lib/contexts/image.svelte'
+import { cn } from '$lib/utils'
 import IconArrowUploadProgress from '~icons/material-symbols/arrow-upload-progress'
 import IconPending from '~icons/material-symbols/pending'
 import IconWarning from '~icons/material-symbols/warning'
 import WriteButton from './WriteButton.svelte'
 
+const deviceCtx = getDeviceContext()
 const imageCtx = getImageContext()
 
 let inProgress = $state(false)
@@ -16,7 +19,15 @@ let inProgress = $state(false)
 
   <div class="mx-6 mt-4 mb-6 stack gap-2 md:row xl:mx-0">
     <div class="grow">
-      <h2 class="text-xl/8 font-semibold" id="write-section-label">Write pattern to device</h2>
+      <h2
+        class={cn(
+          'text-xl/8 font-semibold transition-all',
+          (deviceCtx.device && imageCtx.image) || 'font-normal opacity-50',
+        )}
+        id="write-section-label"
+      >
+        Write pattern to device
+      </h2>
 
       <div class="stack-h gap-1 text-sm" aria-live="polite">
         {#if imageCtx.image === null}
@@ -36,11 +47,9 @@ let inProgress = $state(false)
 </section>
 
 <style>
-/* @media (display-mode: standalone) { */
 section {
   position: sticky;
   bottom: 0;
   background: var(--color-background);
 }
-/* } */
 </style>