fix: make scene 4 medium focus unambiguous

Author: Oussama

website/src/lib/charts/MediumExplorer.svelte

@@ -29,6 +29,11 @@
 
   let filtered = $derived(filterRows(data, $filters));
   let panels = $derived(buildPanels(filtered));
+  let visiblePanels = $derived(expanded ? panels.filter((panel) => panel.medium === expanded) : panels);
+
+  $effect(() => {
+    if (expanded && !panels.some((panel) => panel.medium === expanded)) expanded = '';
+  });
 
   function filterRows(rows, state) {
     return rows.filter((row) => {
@@ -117,13 +122,15 @@
     <p>No works match these filters.</p>
   </div>
 {:else}
+  {#if expanded}
+    <div class="focus-row" aria-live="polite">
+      <span>Focused medium: {expanded}</span>
+      <button type="button" onclick={() => (expanded = '')}>Show all mediums</button>
+    </div>
+  {/if}
   <div class="medium-grid" class:has-expanded={expanded}>
-    {#each panels as panel (panel.medium)}
-      <article
-        class:expanded={expanded === panel.medium}
-        class:dimmed={expanded && expanded !== panel.medium}
-        animate:flip={{ duration: 450 }}
-      >
+    {#each visiblePanels as panel (panel.medium)}
+      <article class:expanded={expanded === panel.medium} animate:flip={{ duration: 450 }}>
         <button
           type="button"
           class="panel-button"

website/src/lib/charts/mediumExplorer.css

@@ -4,6 +4,37 @@
   gap: var(--space-2);
 }
 
+.focus-row {
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--space-1);
+  align-items: center;
+  justify-content: space-between;
+  margin: var(--space-2) 0;
+  padding: var(--space-1) var(--space-2);
+  color: var(--fg-on-light-strong);
+  background: color-mix(in srgb, var(--accent-primary) 9%, var(--bg-paper));
+  border: 1px solid color-mix(in srgb, var(--accent-primary) 44%, var(--rule-on-light));
+  font-family: var(--font-ui);
+  font-size: var(--type-small-size);
+}
+
+.focus-row button {
+  border: 1px solid var(--accent-primary);
+  padding: 0.375rem 0.5rem;
+  color: var(--accent-primary);
+  background: transparent;
+  cursor: pointer;
+  font-family: inherit;
+  font-size: inherit;
+}
+
+.focus-row button:hover,
+.focus-row button:focus-visible {
+  color: var(--fg-on-dark-strong);
+  background: var(--accent-primary);
+}
+
 .medium-grid article {
   position: relative;
   background: var(--bg-paper);
@@ -23,11 +54,6 @@
   pointer-events: none;
 }
 
-.medium-grid article.dimmed {
-  opacity: 0.6;
-  scale: 0.98;
-}
-
 .medium-grid article.expanded {
   grid-column: span 2;
   border-top-color: var(--accent-primary);

website/src/lib/scenes/Scene4Explorer.svelte

@@ -40,25 +40,31 @@
     />
     <div class="filter-bar" aria-label="Explorer filters">
       <DecadeSlider {timeline} ariaLabel="Filter medium explorer by decade range" />
-      <div class="chip-row">
-        {#each departments as department}
-          <button
-            type="button"
-            class:active={$filters.selectedDepartments.has(department)}
-            onclick={() => toggleDepartment(department)}>{department}</button
-          >
-        {/each}
+      <div class="filter-group">
+        <p>Departments</p>
+        <div class="chip-row">
+          {#each departments as department}
+            <button
+              type="button"
+              class:active={$filters.selectedDepartments.has(department)}
+              onclick={() => toggleDepartment(department)}>{department}</button
+            >
+          {/each}
+        </div>
       </div>
-      <div class="chip-row">
-        {#each regions as [region, color]}
-          <button
-            type="button"
-            class="region-chip"
-            class:active={$filters.selectedRegions.has(region)}
-            style:--region-color={color}
-            onclick={() => toggleRegion(region)}>{region}</button
-          >
-        {/each}
+      <div class="filter-group">
+        <p>Regions</p>
+        <div class="chip-row">
+          {#each regions as [region, color]}
+            <button
+              type="button"
+              class="region-chip"
+              class:active={$filters.selectedRegions.has(region)}
+              style:--region-color={color}
+              onclick={() => toggleRegion(region)}>{region}</button
+            >
+          {/each}
+        </div>
       </div>
       <div class="applied">
         {#if $filters.selectedCountry}
@@ -112,6 +118,20 @@
     gap: var(--space-1);
   }
 
+  .filter-group {
+    display: grid;
+    gap: 0.375rem;
+  }
+
+  .filter-group p {
+    margin: 0;
+    color: var(--fg-on-light-mute);
+    font-family: var(--font-ui);
+    font-size: var(--type-small-size);
+    font-weight: 600;
+    text-transform: uppercase;
+  }
+
   button {
     border: 1px solid var(--rule-on-light);
     padding: 0.375rem 0.5rem;