From b492e2aa895eefe52771c4532212924ea863666b Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?R=C3=A2u=20Cao?= <raucao@kosmos.org>
Date: Tue, 5 May 2026 09:38:20 +0200
Subject: [PATCH] Add dropdown component, photo actions menu

---
 app/components/dropdown-menu.gjs | 53 ++++++++++++++++++++++++++++
 app/components/photo-gallery.gjs | 21 +++++++++--
 app/styles/app.css               | 60 ++++++++++++++++++++++++++++++++
 app/utils/icons.js               | 12 +++----
 4 files changed, 136 insertions(+), 10 deletions(-)
 create mode 100644 app/components/dropdown-menu.gjs

diff --git a/app/components/dropdown-menu.gjs b/app/components/dropdown-menu.gjs
new file mode 100644
index 0000000..db1319a
--- /dev/null
+++ b/app/components/dropdown-menu.gjs
@@ -0,0 +1,53 @@
+import Component from '@glimmer/component';
+import { tracked } from '@glimmer/tracking';
+import { action } from '@ember/object';
+import { on } from '@ember/modifier';
+import Icon from '#components/icon';
+
+export default class DropdownMenu extends Component {
+  @tracked isOpen = false;
+
+  @action
+  toggleMenu(e) {
+    e?.stopPropagation();
+    this.isOpen = !this.isOpen;
+  }
+
+  @action
+  closeMenu(e) {
+    e?.stopPropagation();
+    this.isOpen = false;
+  }
+
+  get triggerIcon() {
+    return this.args.triggerIcon || 'more-vertical';
+  }
+
+  <template>
+    <div class="dropdown-menu-container">
+      <button
+        class="dropdown-trigger-btn btn-press"
+        type="button"
+        title={{@triggerTitle}}
+        {{on "click" this.toggleMenu}}
+      >
+        <Icon
+          @name={{this.triggerIcon}}
+          @size={{@iconSize}}
+          @color={{@iconColor}}
+        />
+      </button>
+
+      {{#if this.isOpen}}
+        <div class="dropdown-popover {{@popoverClass}}">
+          {{yield this.closeMenu}}
+        </div>
+        <div
+          class="menu-backdrop"
+          {{on "click" this.closeMenu}}
+          role="button"
+        ></div>
+      {{/if}}
+    </div>
+  </template>
+}
diff --git a/app/components/photo-gallery.gjs b/app/components/photo-gallery.gjs
index 1cb1909..1354f3d 100644
--- a/app/components/photo-gallery.gjs
+++ b/app/components/photo-gallery.gjs
@@ -2,8 +2,9 @@ import Component from '@glimmer/component';
 import { tracked } from '@glimmer/tracking';
 import { action } from '@ember/object';
 import { on } from '@ember/modifier';
-import Icon from './icon';
+import Icon from '#components/icon';
 import PhotoCarousel from './photo-carousel';
+import DropdownMenu from '#components/dropdown-menu';
 
 export default class PhotoGallery extends Component {
   @tracked currentPhoto = this.args.selectedPhoto || this.args.photos?.[0];
@@ -21,7 +22,8 @@ export default class PhotoGallery extends Component {
     if (
       e.target.closest('.thumbnail-strip-container') ||
       e.target.closest('.carousel-nav-btn') ||
-      e.target.closest('.close-btn')
+      e.target.closest('.close-btn') ||
+      e.target.closest('.actions-btn-container')
     ) {
       return;
     }
@@ -50,6 +52,21 @@ export default class PhotoGallery extends Component {
     >
       {{! template-lint-disable no-invalid-interactive }}
       <div class="photo-gallery-content">
+        <div class="actions-btn-container">
+          <DropdownMenu @iconSize={{24}} @triggerIcon="more-horizontal" @iconColor="white" as |closeMenu|>
+            <button
+              class="dropdown-item"
+              type="button"
+              {{on "click" closeMenu}}
+            >Copy Raw Event Data</button>
+            <button
+              class="dropdown-item"
+              type="button"
+              {{on "click" closeMenu}}
+            >Report Photo</button>
+          </DropdownMenu>
+        </div>
+
         <button
           type="button"
           class="close-btn btn-text"
diff --git a/app/styles/app.css b/app/styles/app.css
index e33d666..c665d81 100644
--- a/app/styles/app.css
+++ b/app/styles/app.css
@@ -2027,3 +2027,63 @@ button.create-place {
 .photo-carousel.gallery-thumbnails .carousel-nav-btn {
   display: none;
 }
+
+/* Dropdown Menu Component */
+.dropdown-menu-container {
+  position: relative;
+  display: inline-block;
+}
+
+.dropdown-trigger-btn {
+  background: transparent;
+  border: none;
+  padding: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+}
+
+.dropdown-popover {
+  position: absolute;
+  top: 100%;
+  left: 0;
+  margin-top: 5px;
+  background: white;
+  border-radius: 8px;
+  box-shadow: 0 4px 12px rgb(0 0 0 / 15%);
+  padding: 0.5rem 0;
+  z-index: 3001;
+  min-width: 150px;
+  display: flex;
+  flex-direction: column;
+  gap: 0.25rem;
+}
+
+.dropdown-item {
+  background: transparent;
+  border: none;
+  padding: 0.5rem 1rem;
+  text-align: left;
+  cursor: pointer;
+  font-size: 0.95rem;
+  color: #333;
+  white-space: nowrap;
+}
+
+.dropdown-item:hover {
+  background: #f0f0f0;
+}
+
+/* Actions button in photo gallery */
+.photo-gallery-overlay .actions-btn-container {
+  position: absolute;
+  top: 0.5rem;
+  left: 0.5rem;
+  width: 48px;
+  height: 48px;
+  z-index: 10;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
diff --git a/app/utils/icons.js b/app/utils/icons.js
index 15beb76..9ffb642 100644
--- a/app/utils/icons.js
+++ b/app/utils/icons.js
@@ -22,6 +22,8 @@ import mail from 'feather-icons/dist/icons/mail.svg?raw';
 import map from 'feather-icons/dist/icons/map.svg?raw';
 import mapPin from 'feather-icons/dist/icons/map-pin.svg?raw';
 import menu from 'feather-icons/dist/icons/menu.svg?raw';
+import moreHorizontal from 'feather-icons/dist/icons/more-horizontal.svg?raw';
+import moreVertical from 'feather-icons/dist/icons/more-vertical.svg?raw';
 import navigation from 'feather-icons/dist/icons/navigation.svg?raw';
 import phone from 'feather-icons/dist/icons/phone.svg?raw';
 import plus from 'feather-icons/dist/icons/plus.svg?raw';
@@ -81,10 +83,6 @@ import iceCreamOnCone from '@waysidemapping/pinhead/dist/icons/ice_cream_on_cone
 import industrialBuilding from '@waysidemapping/pinhead/dist/icons/industrial_building.svg?raw';
 import jewel from '@waysidemapping/pinhead/dist/icons/jewel.svg?raw';
 import lowriseBuilding from '@waysidemapping/pinhead/dist/icons/lowrise_building.svg?raw';
-import marketStall from '@waysidemapping/pinhead/dist/icons/market_stall.svg?raw';
-import memorialStoneWithInscription from '@waysidemapping/pinhead/dist/icons/memorial_stone_with_inscription.svg?raw';
-import mobilePhoneWithKeypadAndAntenna from '@waysidemapping/pinhead/dist/icons/mobile_phone_with_keypad_and_antenna.svg?raw';
-import molarTooth from '@waysidemapping/pinhead/dist/icons/molar_tooth.svg?raw';
 import needleAndSpoolOfThread from '@waysidemapping/pinhead/dist/icons/needle_and_spool_of_thread.svg?raw';
 import openBook from '@waysidemapping/pinhead/dist/icons/open_book.svg?raw';
 import palace from '@waysidemapping/pinhead/dist/icons/palace.svg?raw';
@@ -193,11 +191,9 @@ const ICONS = {
   mail,
   map,
   'map-pin': mapPin,
-  'market-stall': marketStall,
-  'memorial-stone-with-inscription': memorialStoneWithInscription,
   menu,
-  'mobile-phone-with-keypad-and-antenna': mobilePhoneWithKeypadAndAntenna,
-  'molar-tooth': molarTooth,
+  'more-horizontal': moreHorizontal,
+  'more-vertical': moreVertical,
   navigation,
   'needle-and-spool-of-thread': needleAndSpoolOfThread,
   nostrich,