From e8f7e74e40534f36548847edebda12ac9ec5412b Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?R=C3=A2u=20Cao?= <raucao@kosmos.org>
Date: Sat, 24 Jan 2026 14:33:00 +0700
Subject: [PATCH] WIP Add settings/about pane

---
 app/components/app-header.gjs    |  7 ++++++-
 app/components/settings-pane.gjs | 20 ++++++++++++++++++++
 app/styles/app.css               | 14 +++++++++++++-
 app/templates/application.gjs    | 18 +++++++++++++++++-
 4 files changed, 56 insertions(+), 3 deletions(-)
 create mode 100644 app/components/settings-pane.gjs

diff --git a/app/components/app-header.gjs b/app/components/app-header.gjs
index 5654380..48966a6 100644
--- a/app/components/app-header.gjs
+++ b/app/components/app-header.gjs
@@ -23,7 +23,12 @@ export default class AppHeaderComponent extends Component {
   <template>
     <header class="app-header">
       <div class="header-left">
-        <button class="icon-btn" type="button" aria-label="Menu">
+        <button
+          class="icon-btn"
+          type="button"
+          aria-label="Menu"
+          {{on "click" @onToggleMenu}}
+        >
           <Icon @name="menu" @size={{24}} @color="#333" />
         </button>
       </div>
diff --git a/app/components/settings-pane.gjs b/app/components/settings-pane.gjs
new file mode 100644
index 0000000..5e8a213
--- /dev/null
+++ b/app/components/settings-pane.gjs
@@ -0,0 +1,20 @@
+import Component from '@glimmer/component';
+import { on } from '@ember/modifier';
+import Icon from '#components/icon';
+
+export default class SettingsPane extends Component {
+  <template>
+    <div class="sidebar settings-pane">
+      <div class="sidebar-header">
+        <h2>Settings</h2>
+        <button type="button" class="close-btn" {{on "click" @onClose}}>
+          <Icon @name="x" @size={{20}} @color="#333" />
+        </button>
+      </div>
+
+      <div class="sidebar-content">
+        <p>Settings content placeholder...</p>
+      </div>
+    </div>
+  </template>
+}
diff --git a/app/styles/app.css b/app/styles/app.css
index 1d8a6b8..f231d40 100644
--- a/app/styles/app.css
+++ b/app/styles/app.css
@@ -188,12 +188,24 @@ body {
   width: 300px;
   background: white;
   color: #333;
-  z-index: 2000;
+  z-index: 3100; /* Higher than Header (3000) */
   box-shadow: 2px 0 5px rgb(0 0 0 / 10%);
   display: flex;
   flex-direction: column;
 }
 
+/* Settings Pane Mobile Overrides */
+@media (max-width: 768px) {
+  .settings-pane.sidebar {
+    width: 100%;
+    right: 0;
+    border-radius: 0; /* Full screen, no rounded corners needed */
+    height: 100%; /* Ensure full height */
+    top: 0; /* Start from top */
+    bottom: 0;
+  }
+}
+
 .sidebar-header {
   padding: 1rem;
   border-bottom: 1px solid #eee;
diff --git a/app/templates/application.gjs b/app/templates/application.gjs
index e27cbb1..c8d2cbb 100644
--- a/app/templates/application.gjs
+++ b/app/templates/application.gjs
@@ -3,6 +3,7 @@ import { pageTitle } from 'ember-page-title';
 import Map from '#components/map';
 import PlacesSidebar from '#components/places-sidebar';
 import AppHeader from '#components/app-header';
+import SettingsPane from '#components/settings-pane';
 import { service } from '@ember/service';
 import { tracked } from '@glimmer/tracking';
 import { action } from '@ember/object';
@@ -15,6 +16,7 @@ export default class ApplicationComponent extends Component {
   @service router;
 
   @tracked nearbyPlaces = null;
+  @tracked isSettingsOpen = false;
   // @tracked bookmarksVersion = 0; // Moved to storage service
 
   get isSidebarOpen() {
@@ -54,6 +56,16 @@ export default class ApplicationComponent extends Component {
     }
   }
 
+  @action
+  toggleSettings() {
+    this.isSettingsOpen = !this.isSettingsOpen;
+  }
+
+  @action
+  closeSettings() {
+    this.isSettingsOpen = false;
+  }
+
   @action
   selectFromList(place) {
     if (place) {
@@ -76,7 +88,7 @@ export default class ApplicationComponent extends Component {
   <template>
     {{pageTitle "M/\RCO"}}
 
-    <AppHeader />
+    <AppHeader @onToggleMenu={{this.toggleSettings}} />
 
     <div
       id="rs-widget-container"
@@ -105,6 +117,10 @@ export default class ApplicationComponent extends Component {
       />
     {{/if}}
 
+    {{#if this.isSettingsOpen}}
+      <SettingsPane @onClose={{this.closeSettings}} />
+    {{/if}}
+
     {{outlet}}
   </template>
 }