fix: clarify header zones

apps/nextjs/src/app/[locale]/manage/users/[userId]/general/_components/header-composer.module.css

@@ -65,9 +65,10 @@
 }
 
 .sortableStrip {
+  position: relative;
   display: flex;
   align-items: stretch;
-  gap: 0;
+  gap: 0.25rem;
   width: max-content;
   min-width: 100%;
   height: 100%;
@@ -75,6 +76,19 @@
   white-space: nowrap;
 }
 
+.zoneOriginLabel {
+  position: absolute;
+  inset-block-start: 0.85rem;
+  inset-inline-start: var(--mantine-spacing-sm);
+  color: var(--mantine-color-dimmed);
+  font-size: 0.55rem;
+  font-weight: 700;
+  line-height: 1;
+  letter-spacing: 0.06em;
+  text-transform: uppercase;
+  user-select: none;
+}
+
 .zoneDelimiter {
   display: grid;
   grid-template-rows: 1.2rem 1.75rem;

apps/nextjs/src/app/[locale]/manage/users/[userId]/general/_components/header-composer.tsx

@@ -56,7 +56,6 @@ import {
   getHeaderItems,
   getHeaderItemZone,
   headerBuiltinItemIds,
-  headerZoneIds,
   isRequiredHeaderItem,
 } from "@homarr/validation/user";
 
@@ -196,6 +195,9 @@ export const HeaderComposer = ({ value, onChange, boards, homeBoardId, mobileHom
                 <div className={classes.previewHeader}>
                   <div className={classes.stripScroller}>
                     <div className={classes.sortableStrip}>
+                      <Text className={classes.zoneOriginLabel} component="span">
+                        {t("zones.left")}
+                      </Text>
                       <MobileBurger />
                       {stripEntries.map((entry, index) => {
                         if (entry.kind === "divider") {
@@ -552,11 +554,13 @@ const PreviewItem = ({
   return <Icon size={20} stroke={1.7} />;
 };
 
-const createHeaderStripEntries = (zones: HeaderZones): HeaderStripEntry[] =>
-  headerZoneIds.flatMap((zone) => [
-    { id: `header-divider:${zone}`, kind: "divider" as const, zone },
-    ...zones[zone].map((item) => ({ id: getHeaderItemKey(item), item, kind: "item" as const })),
-  ]);
+const createHeaderStripEntries = (zones: HeaderZones): HeaderStripEntry[] => [
+  ...zones.left.map((item) => ({ id: getHeaderItemKey(item), item, kind: "item" as const })),
+  { id: "header-divider:center", kind: "divider", zone: "center" },
+  ...zones.center.map((item) => ({ id: getHeaderItemKey(item), item, kind: "item" as const })),
+  { id: "header-divider:right", kind: "divider", zone: "right" },
+  ...zones.right.map((item) => ({ id: getHeaderItemKey(item), item, kind: "item" as const })),
+];
 
 const createHeaderZonesFromStripEntries = (entries: HeaderStripEntry[]): HeaderZones => {
   const zones: HeaderZones = { left: [], center: [], right: [] };

packages/translation/src/lang/en.json

@@ -5690,7 +5690,7 @@
             "header": {
               "title": "Header studio",
               "badge": "Personal",
-              "description": "This is one continuous row. Drag controls anywhere; Left, Center, and Right are fixed dividers and never move.",
+              "description": "Drag controls anywhere in the row. Center and Right are fixed boundaries; everything before Center belongs to Left.",
               "device": {
                 "desktop": "Desktop",
                 "mobile": "Mobile"