Refactor sidebar header styles, center icon titles

Unify sidebar, make everything route-based

app/components/app-menu/about.gjs

@@ -3,11 +3,11 @@ import Icon from '#components/icon';
 
 <template>
   {{! template-lint-disable no-nested-interactive }}
-  <div class="sidebar-header">
+  <div class="sidebar-header has-back-btn">
     <button type="button" class="back-btn" {{on "click" @onBack}}>
       <Icon @name="arrow-left" @size={{20}} @color="#333" />
     </button>
-    <h2>About</h2>
+    <h2 class="sidebar-header-text-centered">About</h2>
     <button type="button" class="close-btn" {{on "click" @onClose}}>
       <Icon @name="x" @size={{20}} @color="#333" />
     </button>

app/components/app-menu/home.gjs

@@ -22,7 +22,7 @@ import iconRounded from '../../icons/icon-rounded.svg?raw';
       <li>
         <button type="button" {{on "click" @onSavedPlaces}}>
           <Icon @name="bookmark" @size={{20}} />
-          <span>Saved places</span>
+          <span>Collections</span>
         </button>
       </li>
       <li>

app/components/app-menu/settings.gjs

@@ -21,11 +21,11 @@ export default class AppMenuSettings extends Component {
   }
 
   <template>
-    <div class="sidebar-header">
+    <div class="sidebar-header has-back-btn">
       <button type="button" class="back-btn" {{on "click" @onBack}}>
         <Icon @name="arrow-left" @size={{20}} @color="#333" />
       </button>
-      <h2>Settings</h2>
+      <h2 class="sidebar-header-text-centered">Settings</h2>
       <button type="button" class="close-btn" {{on "click" @onClose}}>
         <Icon @name="x" @size={{20}} @color="#333" />
       </button>

app/components/places-sidebar.gjs

@@ -5,6 +5,8 @@ import { on } from '@ember/modifier';
 import { fn } from '@ember/helper';
 import or from 'ember-truth-helpers/helpers/or';
 import eq from 'ember-truth-helpers/helpers/eq';
+import and from 'ember-truth-helpers/helpers/and';
+import not from 'ember-truth-helpers/helpers/not';
 import PlaceDetails from './place-details';
 import Icon from './icon';
 import humanizeOsmTag from '../helpers/humanize-osm-tag';
@@ -161,7 +163,11 @@ export default class PlacesSidebar extends Component {
 
   <template>
     <div class="sidebar">
-      <div class="sidebar-header {{if this.hasHeaderPhoto 'no-border'}}">
+      <div
+        class="sidebar-header
+          {{if this.hasHeaderPhoto 'no-border'}}
+          {{if (and (not @selectedPlace) @onBack) 'has-back-btn'}}"
+      >
         {{#if @selectedPlace}}
           <button
             type="button"
@@ -170,20 +176,31 @@ export default class PlacesSidebar extends Component {
           ><Icon @name="arrow-left" @size={{20}} @color="#333" /></button>
         {{else}}
           {{#if @onBack}}
-            <button
+            <button type="button" class="back-btn" {{on "click" @onBack}}><Icon
-              type="button"
+                @name="arrow-left"
-              class="back-btn"
+                @size={{20}}
-              {{on "click" @onBack}}
+                @color="#333"
-            ><Icon @name="arrow-left" @size={{20}} @color="#333" /></button>
+              /></button>
           {{/if}}
-          {{#if @title}}
+          {{#if @onBack}}
-            <h2><Icon @name="bookmark" @size={{20}} @color="#333" />
+            <h2 class="sidebar-header-text-centered">
-              {{@title}}</h2>
+              <span class="sidebar-header-icon-wrapper">
-          {{else if this.isNearbySearch}}
+                <Icon
+                  @name="bookmark"
+                  @size={{20}}
+                  @color={{or @color "#898989"}}
+                />
+              </span>
+              {{@title}}
+            </h2>
+          {{else}}
+            {{#if this.isNearbySearch}}
               <h2><Icon @name="target" @size={{20}} @color="#ea4335" />
                 Nearby</h2>
             {{else}}
-            <h2><Icon @name="search" @size={{20}} @color="#333" /> Results</h2>
+              <h2><Icon @name="search" @size={{20}} @color="#333" />
+                Results</h2>
+            {{/if}}
           {{/if}}
         {{/if}}
         <button type="button" class="close-btn" {{on "click" @onClose}}><Icon

app/styles/app.css

@@ -115,8 +115,6 @@ body {
   display: flex;
   align-items: center;
   grid-area: search;
-
-  /* Ensure it sits at the start of its grid area */
   justify-self: start;
   width: 100%;
 }
@@ -130,7 +128,6 @@ body {
 
 @media (width > 768px) {
   .header-left {
-    /* Desktop: Ensure minimum width for search box so it's not squeezed */
     min-width: 300px;
     max-width: 350px;
   }
@@ -143,8 +140,6 @@ body {
 
 .header-center {
   grid-area: chips;
-
-  /* Desktop: Center the chips block in the available space */
   display: flex;
   justify-content: center;
   min-width: 0; /* Allow shrinking */
@@ -159,7 +154,6 @@ body {
 }
 
 @media (width <= 768px) {
-  /* No need to reset min-width/max-width since they are only set in media query above */
   .header-center {
     width: 100%;
     overflow: hidden;
@@ -486,11 +480,13 @@ body {
 }
 
 .sidebar-header {
-  padding: 1rem;
+  height: 56px; /* Strictly enforce identical vertical height */
+  padding: 0 1rem; /* Keep horizontal padding, remove vertical padding */
   border-bottom: 1px solid var(--divider-color);
   display: flex;
   justify-content: space-between;
   align-items: center;
+  box-sizing: border-box; /* Guarantee strict height boundaries */
 }
 
 .sidebar-header.no-border {
@@ -499,7 +495,7 @@ body {
 
 .sidebar-header h2 {
   margin: 0;
-  font-size: 1.2rem;
+  font-size: 1.1rem;
   display: flex;
   align-items: center;
   gap: 0.5rem;
@@ -2214,3 +2210,43 @@ button.create-place {
   white-space: nowrap;
   flex-shrink: 0;
 }
+
+/* Centered layout when back button is present */
+.sidebar-header.has-back-btn {
+  position: relative;
+  justify-content: center; /* Center horizontally */
+}
+
+/* Absolute positioning for buttons in centered header */
+.sidebar-header.has-back-btn .back-btn {
+  position: absolute;
+  left: 1rem;
+  z-index: 10;
+}
+
+.sidebar-header.has-back-btn .close-btn {
+  position: absolute;
+  right: 1rem;
+  z-index: 10;
+}
+
+/* Centralized Title text */
+.sidebar-header-text-centered {
+  position: relative;
+  margin: 0;
+  font-size: 1.2rem;
+  font-weight: bold;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  text-align: center;
+  max-width: 60%;
+}
+
+.sidebar-header-icon-wrapper {
+  position: absolute;
+  right: 100%;
+  margin-right: 0.5rem;
+  display: flex;
+  align-items: center;
+}

app/templates/application.gjs

@@ -2,12 +2,9 @@ import Component from '@glimmer/component';
 import { pageTitle } from 'ember-page-title';
 import Map from '#components/map';
 import AppHeader from '#components/app-header';
-import AppMenu from '#components/app-menu/index';
 import Toast from '#components/toast';
 import { service } from '@ember/service';
-import { tracked } from '@glimmer/tracking';
 import { action } from '@ember/object';
-import { or } from 'ember-truth-helpers';
 import { on } from '@ember/modifier';
 
 export default class ApplicationComponent extends Component {

app/templates/lists.gjs

@@ -1,7 +1 @@
-import Component from '@glimmer/component';
+<template>{{outlet}}</template>
-
-export default class ListsTemplate extends Component {
-  <template>
-    {{outlet}}
-  </template>
-}

app/templates/lists/index.gjs

@@ -4,12 +4,22 @@ import { action } from '@ember/object';
 import { fn } from '@ember/helper';
 import { on } from '@ember/modifier';
 import Icon from '#components/icon';
+import { htmlSafe } from '@ember/template';
 
 export default class ListsIndexTemplate extends Component {
   @service storage;
   @service router;
   @service mapUi;
 
+  styleFor(color) {
+    const finalColor =
+      color ||
+      getComputedStyle(document.documentElement)
+        .getPropertyValue('--default-list-color')
+        .trim();
+    return htmlSafe(`background-color: ${finalColor}`);
+  }
+
   @action
   selectList(listId) {
     this.router.transitionTo('lists.list', listId);
@@ -28,11 +38,16 @@ export default class ListsIndexTemplate extends Component {
   <template>
     {{#if this.mapUi.isSidebarVisible}}
       <div class="sidebar">
-        <div class="sidebar-header">
+        <div class="sidebar-header has-back-btn">
           <button type="button" class="back-btn" {{on "click" this.backToMenu}}>
             <Icon @name="arrow-left" @size={{20}} @color="#333" />
           </button>
-          <h2><Icon @name="bookmark" @size={{20}} @color="#333" /> Saved places</h2>
+          <h2 class="sidebar-header-text-centered">
+            <span class="sidebar-header-icon-wrapper">
+              <Icon @name="bookmark" @size={{20}} @color="#898989" />
+            </span>
+            Collections
+          </h2>
           <button type="button" class="close-btn" {{on "click" this.close}}>
             <Icon @name="x" @size={{20}} @color="#333" />
           </button>
@@ -48,15 +63,17 @@ export default class ListsIndexTemplate extends Component {
                   {{on "click" (fn this.selectList list.id)}}
                 >
                   <div class="lists-index-item-left">
+                    {{! template-lint-disable no-inline-styles }}
                     <span
                       class="list-color-dot"
-                      style="background-color: {{list.color}}"
+                      style={{this.styleFor list.color}}
                     ></span>
                     <div class="lists-index-name">{{list.title}}</div>
                   </div>
                   <div class="lists-index-count">
                     {{#if list.placeRefs.length}}
-                      {{list.placeRefs.length}} places
+                      {{list.placeRefs.length}}
+                      places
                     {{else}}
                       empty
                     {{/if}}

app/templates/lists/list.gjs

@@ -16,18 +16,32 @@ export default class ListsListTemplate extends Component {
     return this.mapUi.getScrollPosition(`list-${this.listId}`);
   }
 
+  get listColor() {
+    const list = this.storage.lists.find((l) => l.id === this.listId);
+    if (list && list.color) {
+      return list.color;
+    }
+    return getComputedStyle(document.documentElement)
+      .getPropertyValue('--default-list-color')
+      .trim();
+  }
+
   get listTitle() {
     const list = this.storage.lists.find((l) => l.id === this.listId);
-    return list ? list.title : 'Saved places';
+    return list ? list.title : 'Collections';
   }
 
   get places() {
     const modelPlaces = this.args.model?.places || [];
     const currentList = this.storage.lists.find((l) => l.id === this.listId);
-    const placeRefsIds = new Set(currentList?.placeRefs?.map((ref) => ref.id) || []);
+    const placeRefsIds = new Set(
+      currentList?.placeRefs?.map((ref) => ref.id) || []
+    );
 
     // Filter live tracked savedPlaces that are in this list
-    const livePlaces = this.storage.savedPlaces.filter((p) => placeRefsIds.has(p.id));
+    const livePlaces = this.storage.savedPlaces.filter((p) =>
+      placeRefsIds.has(p.id)
+    );
 
     const merged = [];
     const seen = new Set();
@@ -54,7 +68,10 @@ export default class ListsListTemplate extends Component {
     if (place) {
       const sidebarContent = document.querySelector('.sidebar-content');
       if (sidebarContent) {
-        this.mapUi.saveScrollPosition(`list-${this.listId}`, sidebarContent.scrollTop);
+        this.mapUi.saveScrollPosition(
+          `list-${this.listId}`,
+          sidebarContent.scrollTop
+        );
       }
       this.mapUi.returnToRoute = {
         name: 'lists.list',
@@ -81,6 +98,7 @@ export default class ListsListTemplate extends Component {
       <PlacesSidebar
         @places={{this.places}}
         @title={{this.listTitle}}
+        @color={{this.listColor}}
         @scrollTop={{this.scrollTop}}
         @onSelect={{this.selectPlace}}
         @onClose={{this.close}}

app/templates/menu.gjs

@@ -11,7 +11,5 @@ export default class MenuTemplate extends Component {
     this.router.transitionTo('index');
   }
 
-  <template>
+  <template><AppMenu @onClose={{this.close}} /></template>
-    <AppMenu @onClose={{this.close}} />
-  </template>
 }