Add details elements/sections to App Menu sidebar

Starting with some About details

app/components/app-menu/about.gjs

@@ -2,6 +2,7 @@ import { on } from '@ember/modifier';
 import Icon from '#components/icon';
 
 <template>
+  {{! template-lint-disable no-nested-interactive }}
   <div class="sidebar-header">
     <button type="button" class="back-btn" {{on "click" @onBack}}>
       <Icon @name="arrow-left" @size={{20}} @color="#333" />
@@ -33,31 +34,48 @@ import Icon from '#components/icon';
         >remote storage</a>
         to sync place bookmarks across apps and devices.
       </p>
-      <ul class="link-list">
-        <li>
-          <a
-            href="https://gitea.kosmos.org/raucao/marco"
-            target="_blank"
-            rel="noopener"
-          >
-            Source Code
-          </a>
-          (<a
-            href="https://en.wikipedia.org/wiki/GNU_Affero_General_Public_License"
-            target="_blank"
-            rel="noopener"
-          >AGPL</a>)
-        </li>
-        <li>
-          <a
-            href="https://openstreetmap.org/copyright"
-            target="_blank"
-            rel="noopener"
-          >
-            Map Data © OpenStreetMap
-          </a>
-        </li>
-      </ul>
+
+      <details>
+        <summary>
+          <Icon @name="gift" @size={{20}} />
+          <span>Open Source</span>
+        </summary>
+        <div class="details-content">
+          <ul class="link-list">
+            <li>
+              <a
+                href="https://gitea.kosmos.org/raucao/marco"
+                target="_blank"
+                rel="noopener"
+              >
+                Source Code
+              </a>
+              (<a
+                href="https://en.wikipedia.org/wiki/GNU_Affero_General_Public_License"
+                target="_blank"
+                rel="noopener"
+              >AGPL</a>)
+            </li>
+            <li>
+              <a
+                href="https://openstreetmap.org/copyright"
+                target="_blank"
+                rel="noopener"
+              >
+                Map Data © OpenStreetMap
+              </a>
+            </li>
+          </ul>
+        </div>
+      </details>
+      <details>
+        <summary>
+          <Icon @name="heart" @size={{20}} @color="#e5533d" />
+          <span>Contribute</span>
+        </summary>
+        <div class="details-content">
+        </div>
+      </details>
     </section>
   </div>
 </template>

app/components/app-menu/settings.gjs

@@ -18,6 +18,11 @@ export default class AppMenuSettings extends Component {
     this.settings.updateMapKinetic(event.target.value === 'true');
   }
 
+  @action
+  updatePhotonApi(event) {
+    this.settings.updatePhotonApi(event.target.value);
+  }
+
   <template>
     <div class="sidebar-header">
       <button type="button" class="back-btn" {{on "click" @onBack}}>
@@ -72,6 +77,23 @@ export default class AppMenuSettings extends Component {
             {{/each}}
           </select>
         </div>
+        <div class="form-group">
+          <label for="photon-api">Photon API Provider</label>
+          <select
+            id="photon-api"
+            class="form-control"
+            {{on "change" this.updatePhotonApi}}
+          >
+            {{#each this.settings.photonApis as |api|}}
+              <option
+                value={{api.url}}
+                selected={{if (eq api.url this.settings.photonApi) "selected"}}
+              >
+                {{api.name}}
+              </option>
+            {{/each}}
+          </select>
+        </div>
       </section>
     </div>
   </template>

app/services/photon.js

@@ -1,9 +1,13 @@
-import Service from '@ember/service';
+import Service, { service } from '@ember/service';
 import { getPlaceType } from '../utils/osm';
 import { humanizeOsmTag } from '../utils/format-text';
 
 export default class PhotonService extends Service {
-  baseUrl = 'https://photon.komoot.io/api/';
+  @service settings;
+
+  get baseUrl() {
+    return this.settings.photonApi;
+  }
 
   async search(query, lat, lon, limit = 10) {
     if (!query || query.length < 2) return [];

app/services/settings.js

@@ -4,6 +4,7 @@ import { tracked } from '@glimmer/tracking';
 export default class SettingsService extends Service {
   @tracked overpassApi = 'https://overpass-api.de/api/interpreter';
   @tracked mapKinetic = true;
+  @tracked photonApi = 'https://photon.komoot.io/api/';
 
   overpassApis = [
     {
@@ -24,6 +25,13 @@ export default class SettingsService extends Service {
     // },
   ];
 
+  photonApis = [
+    {
+      name: 'photon.komoot.io',
+      url: 'https://photon.komoot.io/api/',
+    },
+  ];
+
   constructor() {
     super(...arguments);
     this.loadSettings();
@@ -59,4 +67,8 @@ export default class SettingsService extends Service {
     this.mapKinetic = enabled;
     localStorage.setItem('marco:map-kinetic', String(enabled));
   }
+
+  updatePhotonApi(url) {
+    this.photonApi = url;
+  }
 }

app/styles/app.css

@@ -285,6 +285,82 @@ body {
   height: 20px;
 }
 
+.sidebar-content details {
+  margin: 0 -1rem; /* Top margin, negative side margins to span full width */
+}
+
+.sidebar-content details summary {
+  list-style: none; /* Hide default triangle */
+  display: flex;
+  align-items: center;
+  gap: 0.8rem;
+  padding: 1rem;
+  padding-left: 1.4rem;
+  cursor: pointer;
+  font-size: 0.95rem;
+  color: #333;
+  transition: background-color 0.2s;
+}
+
+.sidebar-content details summary::-webkit-details-marker {
+  display: none; /* Hide default triangle in WebKit */
+}
+
+.sidebar-content details summary:hover {
+  background-color: var(--hover-bg);
+}
+
+.sidebar-content details summary .icon {
+  width: 20px;
+  height: 20px;
+}
+
+.sidebar-content details summary::after {
+  content: '';
+  width: 20px;
+  height: 20px;
+  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23666' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='9 18 15 12 9 6'/%3E%3C/svg%3E");
+  background-size: 20px 20px;
+  background-repeat: no-repeat;
+  background-position: center;
+  margin-left: auto;
+  transition: transform 0.2s ease;
+}
+
+.sidebar-content details[open] summary::after {
+  transform: rotate(90deg);
+}
+
+.sidebar-content details .details-content {
+  padding: 1rem 1.4rem;
+  animation: details-slide-down 0.2s ease-out;
+}
+
+.sidebar-content details .link-list {
+  padding: 0;
+  margin: 0;
+}
+
+@keyframes details-slide-down {
+  from {
+    opacity: 0;
+    transform: translateY(-5px);
+  }
+
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+.sidebar-content details .link-list li {
+  margin-bottom: 0.5rem;
+}
+
+.sidebar-content details .link-list li:last-child {
+  margin-bottom: 0;
+}
+
 .edit-form {
   margin: -1rem;
   margin-bottom: 1rem;
@@ -312,6 +388,8 @@ body {
   font-family: inherit;
   font-size: 0.95rem;
   box-sizing: border-box; /* Ensure padding doesn't overflow width */
+  color: #333;
+  background-color: #fff;
 }
 
 .form-control:focus {
@@ -320,6 +398,17 @@ body {
   box-shadow: 0 0 0 2px rgb(0 123 255 / 10%);
 }
 
+select.form-control {
+  appearance: none;
+  background-color: #fff;
+  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23666' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
+  background-repeat: no-repeat;
+  background-position: right 0.75rem center;
+  background-size: 16px 16px;
+  padding-right: 2.5rem;
+  cursor: pointer;
+}
+
 .edit-actions {
   display: flex;
   gap: 0.5rem;

app/utils/icons.js

@@ -5,7 +5,9 @@ import checkSquare from 'feather-icons/dist/icons/check-square.svg?raw';
 import clock from 'feather-icons/dist/icons/clock.svg?raw';
 import edit from 'feather-icons/dist/icons/edit.svg?raw';
 import facebook from 'feather-icons/dist/icons/facebook.svg?raw';
+import gift from 'feather-icons/dist/icons/gift.svg?raw';
 import globe from 'feather-icons/dist/icons/globe.svg?raw';
+import heart from 'feather-icons/dist/icons/heart.svg?raw';
 import home from 'feather-icons/dist/icons/home.svg?raw';
 import info from 'feather-icons/dist/icons/info.svg?raw';
 import instagram from 'feather-icons/dist/icons/instagram.svg?raw';
@@ -35,7 +37,9 @@ const ICONS = {
   clock,
   edit,
   facebook,
+  gift,
   globe,
+  heart,
   home,
   info,
   instagram,