From fd177ca5fa34151a469d89f8a94c853c9b1bf4ac Mon Sep 17 00:00:00 2001
From: Tero Halla-aho <thallaa@gmail.com>
Date: Thu, 18 Dec 2025 13:02:22 +0200
Subject: [PATCH] ui: group admin links under dropdown

---
 PROGRESS.md               |  1 +
 app/components/NavBar.tsx | 89 +++++++++++++++++++++++++++++++--------
 app/globals.css           | 35 +++++++++++++++
 lib/i18n.ts               |  3 ++
 4 files changed, 110 insertions(+), 18 deletions(-)

diff --git a/PROGRESS.md b/PROGRESS.md
index f8d47f2..f842433 100644
--- a/PROGRESS.md
+++ b/PROGRESS.md
@@ -87,3 +87,4 @@
 - Footer now includes a minimal cookie usage statement (essential cookies only; site requires acceptance).
 - Forgejo deployment scaffolding added: Docker Compose + runner config guidance and Apache vhost for git.halla-aho.net, plus CI workflow placeholder under `.forgejo/workflows/`.
 - Amenities: added separate EV charging flags (on-site vs nearby) plus wheelchair accessibility, including browse filters and admin approvals view badges.
+- Navbar: combined admin actions (approvals/users/monitoring) under a single “Admin” dropdown menu.
diff --git a/app/components/NavBar.tsx b/app/components/NavBar.tsx
index 438b679..aea646d 100644
--- a/app/components/NavBar.tsx
+++ b/app/components/NavBar.tsx
@@ -2,7 +2,7 @@
 
 import Link from 'next/link';
 import Image from 'next/image';
-import { useEffect, useState, type SVGProps } from 'react';
+import { useEffect, useRef, useState, type SVGProps } from 'react';
 import { useI18n } from './I18nProvider';
 import logo from '../../img/logo.png';
 
@@ -91,6 +91,13 @@ function Icon({ name }: { name: string }) {
           <path d="M9 14l2-3 2 2 2-4" />
         </svg>
       );
+    case 'admin':
+      return (
+        <svg {...common} viewBox="0 0 24 24" aria-hidden>
+          <path d="M12 2l7 4v6c0 5-3 9-7 10-4-1-7-5-7-10V6l7-4z" />
+          <path d="M9.5 12.5l1.8 1.8 3.7-3.7" />
+        </svg>
+      );
     default:
       return null;
   }
@@ -100,6 +107,8 @@ export default function NavBar() {
   const { t, locale, setLocale } = useI18n();
   const [user, setUser] = useState<SessionUser | null>(null);
   const [pendingCount, setPendingCount] = useState<number>(0);
+  const [adminMenuOpen, setAdminMenuOpen] = useState(false);
+  const adminMenuRef = useRef<HTMLDivElement | null>(null);
 
   async function loadUser() {
     try {
@@ -116,6 +125,10 @@ export default function NavBar() {
     loadUser();
   }, []);
 
+  useEffect(() => {
+    if (!user) setAdminMenuOpen(false);
+  }, [user]);
+
   useEffect(() => {
     const role = user?.role;
     const canSeeApprovals = role === 'ADMIN' || role === 'LISTING_MODERATOR' || role === 'USER_MODERATOR';
@@ -144,6 +157,26 @@ export default function NavBar() {
   const isListingMod = user?.role === 'LISTING_MODERATOR';
   const isUserMod = user?.role === 'USER_MODERATOR';
   const showApprovals = Boolean(user && (isAdmin || isListingMod || isUserMod));
+  const showAdminMenu = Boolean(user && (showApprovals || isAdmin));
+
+  useEffect(() => {
+    if (!adminMenuOpen) return;
+    const onMouseDown = (e: MouseEvent) => {
+      const target = e.target as Node | null;
+      if (target && adminMenuRef.current && !adminMenuRef.current.contains(target)) {
+        setAdminMenuOpen(false);
+      }
+    };
+    const onKeyDown = (e: KeyboardEvent) => {
+      if (e.key === 'Escape') setAdminMenuOpen(false);
+    };
+    document.addEventListener('mousedown', onMouseDown);
+    document.addEventListener('keydown', onKeyDown);
+    return () => {
+      document.removeEventListener('mousedown', onMouseDown);
+      document.removeEventListener('keydown', onKeyDown);
+    };
+  }, [adminMenuOpen]);
 
   return (
     <header style={{ padding: '12px 20px', borderBottom: '1px solid #eee', display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
@@ -171,27 +204,47 @@ export default function NavBar() {
             <Link href="/listings/new" className="button secondary">
               <Icon name="plus" /> {t('navNewListing')}
             </Link>
-            {showApprovals ? (
-              <>
-                <Link href="/admin/pending" className="button secondary">
-                  <Icon name="check" /> {t('navApprovals')}
-                  {pendingCount > 0 ? (
-                    <span style={{ marginLeft: 6, background: '#ff7043', color: '#fff', borderRadius: 10, padding: '2px 6px', fontSize: 12 }}>
+            {showAdminMenu ? (
+              <div className="nav-admin" ref={adminMenuRef}>
+                <button
+                  type="button"
+                  className="button secondary"
+                  aria-haspopup="menu"
+                  aria-expanded={adminMenuOpen}
+                  onClick={() => setAdminMenuOpen((v) => !v)}
+                >
+                  <Icon name="admin" /> {t('navAdmin')}
+                  {showApprovals && pendingCount > 0 ? (
+                    <span className="nav-admin-badge" aria-label={t('approvalsPending', { count: pendingCount })}>
                       {t('approvalsBadge', { count: pendingCount })}
                     </span>
                   ) : null}
-                </Link>
-                {isAdmin ? (
-                  <Link href="/admin/users" className="button secondary">
-                    <Icon name="users" /> {t('navUsers')}
-                  </Link>
+                </button>
+                {adminMenuOpen ? (
+                  <div className="nav-admin-menu" role="menu" aria-label={t('navAdmin')}>
+                    {showApprovals ? (
+                      <Link href="/admin/pending" className="nav-admin-item button secondary" role="menuitem" onClick={() => setAdminMenuOpen(false)}>
+                        <Icon name="check" /> {t('navApprovals')}
+                        {pendingCount > 0 ? (
+                          <span className="nav-admin-badge" aria-label={t('approvalsPending', { count: pendingCount })}>
+                            {t('approvalsBadge', { count: pendingCount })}
+                          </span>
+                        ) : null}
+                      </Link>
+                    ) : null}
+                    {isAdmin ? (
+                      <Link href="/admin/users" className="nav-admin-item button secondary" role="menuitem" onClick={() => setAdminMenuOpen(false)}>
+                        <Icon name="users" /> {t('navUsers')}
+                      </Link>
+                    ) : null}
+                    {isAdmin ? (
+                      <Link href="/admin/monitor" className="nav-admin-item button secondary" role="menuitem" onClick={() => setAdminMenuOpen(false)}>
+                        <Icon name="monitor" /> {t('navMonitoring')}
+                      </Link>
+                    ) : null}
+                  </div>
                 ) : null}
-                {isAdmin ? (
-                  <Link href="/admin/monitor" className="button secondary">
-                    <Icon name="monitor" /> {t('navMonitoring')}
-                  </Link>
-                ) : null}
-              </>
+              </div>
             ) : null}
             <button className="button secondary" onClick={logout}>
               <Icon name="logout" /> {t('navLogout')}
diff --git a/app/globals.css b/app/globals.css
index e1a8856..8415fa1 100644
--- a/app/globals.css
+++ b/app/globals.css
@@ -144,6 +144,41 @@ p {
   transform: translateY(-2px);
 }
 
+.nav-admin {
+  position: relative;
+  display: inline-flex;
+}
+
+.nav-admin-menu {
+  position: absolute;
+  top: calc(100% + 10px);
+  right: 0;
+  z-index: 50;
+  min-width: 220px;
+  display: grid;
+  gap: 8px;
+  padding: 10px;
+  border-radius: 16px;
+  background: var(--panel);
+  border: 1px solid rgba(148, 163, 184, 0.16);
+  box-shadow: 0 30px 90px rgba(0, 0, 0, 0.35);
+}
+
+.nav-admin-item.button.secondary {
+  width: 100%;
+  justify-content: flex-start;
+}
+
+.nav-admin-badge {
+  margin-left: 6px;
+  background: #ff7043;
+  color: #fff;
+  border-radius: 10px;
+  padding: 2px 6px;
+  font-size: 12px;
+  line-height: 1.2;
+}
+
 .panel {
   background: var(--panel);
   border: 1px solid rgba(148, 163, 184, 0.16);
diff --git a/lib/i18n.ts b/lib/i18n.ts
index 8446ead..6f4fa66 100644
--- a/lib/i18n.ts
+++ b/lib/i18n.ts
@@ -6,6 +6,7 @@ const baseMessages = {
     navProfile: 'Profile',
     navMyListings: 'My listings',
     navNewListing: 'New listing',
+    navAdmin: 'Admin',
     navApprovals: 'Approvals',
     navUsers: 'Users',
     navMonitoring: 'Monitoring',
@@ -325,6 +326,7 @@ const baseMessages = {
     navProfile: 'Profiili',
     navMyListings: 'Omat kohteet',
     navNewListing: 'Luo kohde',
+    navAdmin: 'Ylläpito',
     navApprovals: 'Tarkastettavat',
     navUsers: 'Käyttäjät',
     navMonitoring: 'Valvonta',
@@ -646,6 +648,7 @@ const svMessages: Record<keyof typeof baseMessages.en, string> = {
   navProfile: 'Profil',
   navMyListings: 'Mina annonser',
   navNewListing: 'Ny annons',
+  navAdmin: 'Admin',
   navApprovals: 'Godkännanden',
   navUsers: 'Användare',
   navMonitoring: 'Övervakning',