Refactor app menu, add place lists

Unify sidebar, make everything route-based

app/components/app-menu/home.gjs

@@ -19,6 +19,12 @@ import iconRounded from '../../icons/icon-rounded.svg?raw';
 
   <div class="sidebar-content">
     <ul class="app-menu">
+      <li>
+        <button type="button" {{on "click" @onSavedPlaces}}>
+          <Icon @name="bookmark" @size={{20}} />
+          <span>Saved places</span>
+        </button>
+      </li>
       <li>
         <button type="button" {{on "click" (fn @onNavigate "settings")}}>
           <Icon @name="settings" @size={{20}} />

app/components/app-menu/index.gjs

@@ -2,6 +2,7 @@ import Component from '@glimmer/component';
 import { action } from '@ember/object';
 import { tracked } from '@glimmer/tracking';
 import { fn } from '@ember/helper';
+import { service } from '@ember/service';
 import eq from 'ember-truth-helpers/helpers/eq';
 
 import AppMenuHome from './home';
@@ -9,6 +10,7 @@ import AppMenuSettings from './settings';
 import AppMenuAbout from './about';
 
 export default class AppMenu extends Component {
+  @service router;
   @tracked currentView = 'menu'; // 'menu', 'settings', 'about'
 
   @action
@@ -16,10 +18,19 @@ export default class AppMenu extends Component {
     this.currentView = view;
   }
 
+  @action
+  goToSavedPlaces() {
+    this.router.transitionTo('lists.index');
+  }
+
   <template>
     <div class="sidebar app-menu-pane">
       {{#if (eq this.currentView "menu")}}
-        <AppMenuHome @onNavigate={{this.setView}} @onClose={{@onClose}} />
+        <AppMenuHome
+          @onNavigate={{this.setView}}
+          @onClose={{@onClose}}
+          @onSavedPlaces={{this.goToSavedPlaces}}
+        />
 
       {{else if (eq this.currentView "settings")}}
         <AppMenuSettings

app/components/place-lists-manager.gjs

@@ -103,7 +103,7 @@ export default class PlaceListsManager extends Component {
             checked={{this.isSaved}}
             {{on "change" this.toggleSaved}}
           />
-          <span class="list-color"></span>
+          <span class="list-color-dot"></span>
           <span class="list-name">Saved places</span>
         </label>
       </div>
@@ -122,7 +122,7 @@ export default class PlaceListsManager extends Component {
               />
               {{! template-lint-disable no-inline-styles }}
               <span
-                class="list-color"
+                class="list-color-dot"
                 style={{this.styleFor list.color}}
               ></span>
               <span class="list-name">{{list.title}}</span>

app/components/places-sidebar.gjs

@@ -9,6 +9,7 @@ import PlaceDetails from './place-details';
 import Icon from './icon';
 import humanizeOsmTag from '../helpers/humanize-osm-tag';
 import { getLocalizedName, getPlaceType } from '../utils/osm';
+import restoreScroll from '../modifiers/restore-scroll';
 
 export default class PlacesSidebar extends Component {
   @service storage;
@@ -168,7 +169,17 @@ export default class PlacesSidebar extends Component {
             {{on "click" this.clearSelection}}
           ><Icon @name="arrow-left" @size={{20}} @color="#333" /></button>
         {{else}}
-          {{#if this.isNearbySearch}}
+          {{#if @onBack}}
+            <button type="button" class="back-btn" {{on "click" @onBack}}><Icon
+                @name="arrow-left"
+                @size={{20}}
+                @color="#333"
+              /></button>
+          {{/if}}
+          {{#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}}
@@ -182,7 +193,7 @@ export default class PlacesSidebar extends Component {
           /></button>
       </div>
 
-      <div class="sidebar-content">
+      <div class="sidebar-content" {{restoreScroll @scrollTop}}>
         {{#if @selectedPlace}}
           <PlaceDetails
             @place={{@selectedPlace}}