Refactor app menu, add place lists

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 has-back-btn">
+  <div class="sidebar-header">
     <button type="button" class="back-btn" {{on "click" @onBack}}>
       <Icon @name="arrow-left" @size={{20}} @color="#333" />
     </button>
-    <h2 class="sidebar-header-text-centered">About</h2>
+    <h2>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>Collections</span>
+          <span>Saved places</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 has-back-btn">
+    <div class="sidebar-header">
       <button type="button" class="back-btn" {{on "click" @onBack}}>
         <Icon @name="arrow-left" @size={{20}} @color="#333" />
       </button>
-      <h2 class="sidebar-header-text-centered">Settings</h2>
+      <h2>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,8 +5,6 @@ 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';
@@ -163,11 +161,7 @@ export default class PlacesSidebar extends Component {
 
   <template>
     <div class="sidebar">
-      <div
-        class="sidebar-header
-          {{if this.hasHeaderPhoto 'no-border'}}
-          {{if (and (not @selectedPlace) @onBack) 'has-back-btn'}}"
-      >
+      <div class="sidebar-header {{if this.hasHeaderPhoto 'no-border'}}">
         {{#if @selectedPlace}}
           <button
             type="button"
@@ -176,31 +170,20 @@ export default class PlacesSidebar extends Component {
           ><Icon @name="arrow-left" @size={{20}} @color="#333" /></button>
         {{else}}
           {{#if @onBack}}
-            <button type="button" class="back-btn" {{on "click" @onBack}}><Icon
-                @name="arrow-left"
-                @size={{20}}
-                @color="#333"
-              /></button>
+            <button
+              type="button"
+              class="back-btn"
+              {{on "click" @onBack}}
+            ><Icon @name="arrow-left" @size={{20}} @color="#333" /></button>
           {{/if}}
-          {{#if @onBack}}
-            <h2 class="sidebar-header-text-centered">
-              <span class="sidebar-header-icon-wrapper">
-                <Icon
-                  @name="bookmark"
-                  @size={{20}}
-                  @color={{or @color "#898989"}}
-                />
-              </span>
-              {{@title}}
-            </h2>
+          {{#if @title}}
+            <h2><Icon @name="bookmark" @size={{20}} @color="#333" />
+              {{@title}}</h2>
+          {{else if this.isNearbySearch}}
+            <h2><Icon @name="target" @size={{20}} @color="#ea4335" />
+              Nearby</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>
-            {{/if}}
+            <h2><Icon @name="search" @size={{20}} @color="#333" /> Results</h2>
           {{/if}}
         {{/if}}
         <button type="button" class="close-btn" {{on "click" @onClose}}><Icon

app/styles/app.css

@@ -115,6 +115,8 @@ body {
   display: flex;
   align-items: center;
   grid-area: search;
+
+  /* Ensure it sits at the start of its grid area */
   justify-self: start;
   width: 100%;
 }
@@ -128,6 +130,7 @@ body {
 
 @media (width > 768px) {
   .header-left {
+    /* Desktop: Ensure minimum width for search box so it's not squeezed */
     min-width: 300px;
     max-width: 350px;
   }
@@ -140,6 +143,8 @@ 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 */
@@ -154,6 +159,7 @@ 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;
@@ -480,13 +486,11 @@ body {
 }
 
 .sidebar-header {
-  height: 56px; /* Strictly enforce identical vertical height */
-  padding: 0 1rem; /* Keep horizontal padding, remove vertical padding */
+  padding: 1rem;
   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 {
@@ -495,7 +499,7 @@ body {
 
 .sidebar-header h2 {
   margin: 0;
-  font-size: 1.1rem;
+  font-size: 1.2rem;
   display: flex;
   align-items: center;
   gap: 0.5rem;
@@ -2210,43 +2214,3 @@ 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,9 +2,12 @@ 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 +1,7 @@
-<template>{{outlet}}</template>
+import Component from '@glimmer/component';
+
+export default class ListsTemplate extends Component {
+  <template>
+    {{outlet}}
+  </template>
+}

app/templates/lists/index.gjs

@@ -4,22 +4,12 @@ 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);
@@ -38,16 +28,11 @@ export default class ListsIndexTemplate extends Component {
   <template>
     {{#if this.mapUi.isSidebarVisible}}
       <div class="sidebar">
-        <div class="sidebar-header has-back-btn">
+        <div class="sidebar-header">
           <button type="button" class="back-btn" {{on "click" this.backToMenu}}>
             <Icon @name="arrow-left" @size={{20}} @color="#333" />
           </button>
-          <h2 class="sidebar-header-text-centered">
-            <span class="sidebar-header-icon-wrapper">
-              <Icon @name="bookmark" @size={{20}} @color="#898989" />
-            </span>
-            Collections
-          </h2>
+          <h2><Icon @name="bookmark" @size={{20}} @color="#333" /> Saved places</h2>
           <button type="button" class="close-btn" {{on "click" this.close}}>
             <Icon @name="x" @size={{20}} @color="#333" />
           </button>
@@ -63,17 +48,15 @@ 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={{this.styleFor list.color}}
+                      style="background-color: {{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,32 +16,18 @@ 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 : 'Collections';
+    return list ? list.title : 'Saved places';
   }
 
   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();
@@ -68,10 +54,7 @@ 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',
@@ -98,7 +81,6 @@ 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,5 +11,7 @@ export default class MenuTemplate extends Component {
     this.router.transitionTo('index');
   }
 
-  <template><AppMenu @onClose={{this.close}} /></template>
+  <template>
+    <AppMenu @onClose={{this.close}} />
+  </template>
 }