From 02a4e864bf035306eb14ef2b494c55defebbf61e Mon Sep 17 00:00:00 2001
From: eti <eti@eti.tf>
Date: Wed, 6 May 2026 04:00:44 +0200
Subject: [PATCH] appview: add mobile fullscreen search overlay

- tap search on mobile opens fullscreen overlay with body scroll lock
  and visualViewport-aware height for ios keyboard
- reorder topbar so search sits first on mobile, last on desktop
- add safe-area-inset padding to header/footer for notched devices

Signed-off-by: eti <eti@eti.tf>
---
 appview/pages/pages.go                        |   7 +-
 appview/pages/templates/layouts/base.html     |   8 +-
 .../templates/layouts/fragments/topbar.html   | 204 ++++++++++++++----
 .../templates/search/fragments/quick.html     |  17 +-
 appview/state/search.go                       |   7 +-
 5 files changed, 189 insertions(+), 54 deletions(-)

diff --git a/appview/pages/pages.go b/appview/pages/pages.go
index 073013e3..026b9962 100644
--- a/appview/pages/pages.go
+++ b/appview/pages/pages.go
@@ -1675,9 +1675,10 @@ func (p *Pages) SearchRepos(w io.Writer, params SearchReposParams) error {
 }
 
 type SearchQuickParams struct {
-	Repos []models.Repo
-	Query string
-	Total int
+	Repos  []models.Repo
+	Query  string
+	Total  int
+	Mobile bool
 }
 
 func (p *Pages) SearchQuick(w io.Writer, params SearchQuickParams) error {
diff --git a/appview/pages/templates/layouts/base.html b/appview/pages/templates/layouts/base.html
index aa9a508a..d4f2698d 100644
--- a/appview/pages/templates/layouts/base.html
+++ b/appview/pages/templates/layouts/base.html
@@ -1,9 +1,9 @@
 {{ define "layouts/base" }}
     <!doctype html>
-    <html lang="en" class="dark:bg-gray-900">
+    <html lang="en" class="bg-slate-100 dark:bg-gray-900">
         <head>
             <meta charset="UTF-8" />
-            <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
+            <meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover"/>
             <meta name="description" content="The next-generation social coding platform."/>
             <meta name="htmx-config" content='{"includeIndicatorStyles": false}'>
 
@@ -68,7 +68,7 @@
         </head>
         <body class="min-h-screen flex flex-col gap-4 bg-slate-100 dark:bg-gray-900 dark:text-white transition-colors duration-200 {{ block "bodyClasses" . }} {{ end }}">
           {{ block "topbarLayout" . }}
-            <header class="w-full col-span-full md:col-span-1 md:col-start-2 drop-shadow-sm dark:text-white bg-white dark:bg-gray-800" style="z-index: 20;">
+            <header class="w-full col-span-full md:col-span-1 md:col-start-2 shadow-sm dark:text-white bg-white dark:bg-gray-800" style="z-index: 20; padding-top: env(safe-area-inset-top);">
 
                {{ if .LoggedInUser }}
                 <div id="upgrade-banner"
@@ -100,7 +100,7 @@
           {{ end }}
 
           {{ block "footerLayout" . }}
-            <footer class="mt-12">
+            <footer class="mt-12" style="padding-bottom: env(safe-area-inset-bottom)">
               {{ template "layouts/fragments/footer" . }}
             </footer>
           {{ end }}
diff --git a/appview/pages/templates/layouts/fragments/topbar.html b/appview/pages/templates/layouts/fragments/topbar.html
index e70ecdc2..b3edd2ea 100644
--- a/appview/pages/templates/layouts/fragments/topbar.html
+++ b/appview/pages/templates/layouts/fragments/topbar.html
@@ -9,11 +9,11 @@
 
             <div id="right-items" class="flex items-center gap-4">
                 {{ with .LoggedInUser }}
-                    {{ block "searchButton" . }} {{ end }}
-                    <div class="hidden md:block w-px h-6 bg-gray-200 dark:bg-gray-700 self-center"></div>
-                    {{ block "newButton" . }} {{ end }}
-                    {{ template "notifications/fragments/bell" }}
-                    {{ block "profileDropdown" . }} {{ end }}
+                    <div class="flex items-center order-1 md:order-3">{{ block "newButton" . }} {{ end }}</div>
+                    <div class="flex items-center order-2 md:order-4">{{ template "notifications/fragments/bell" }}</div>
+                    <div class="flex items-center order-3 md:order-1">{{ block "searchButton" . }} {{ end }}</div>
+                    <div class="hidden md:block md:order-2 w-px h-6 bg-gray-200 dark:bg-gray-700 self-center"></div>
+                    <div class="flex items-center order-4 md:order-5">{{ block "profileDropdown" . }} {{ end }}</div>
                 {{ else }}
                     <a href="/login">login</a>
                     <span class="text-gray-500 dark:text-gray-400">or</span>
@@ -46,11 +46,8 @@
 
 {{ define "searchButton" }}
 <div class="relative hidden md:block" id="nav-search-container">
-  <div id="nav-search-box" class="relative flex items-center gap-2 px-2 pr-1.5 py-4 max-h-[30px] w-80 border border-gray-200 dark:border-gray-700 rounded bg-white dark:bg-gray-900 focus-within:z-[51] before:content-[''] before:absolute before:inset-0 before:rounded-md before:ring-2 before:ring-transparent before:ring-offset-transparent before:ring-offset-1 before:pointer-events-none focus-within:before:ring-gray-300 dark:focus-within:before:ring-gray-600">
-    <div id="nav-search-indicator" class="group shrink-0">
-      <span class="group-[.htmx-request]:hidden">{{ i "search" "size-4 text-gray-400" }}</span>
-      <span class="hidden group-[.htmx-request]:block">{{ i "loader-circle" "size-4 text-gray-400 animate-spin" }}</span>
-    </div>
+  <div id="nav-search-box" class="relative flex items-center gap-2 px-2 pr-1.5 py-4 max-h-[30px] w-80 border border-gray-200 dark:border-gray-700 rounded bg-white dark:bg-gray-900 focus-within:z-[51] before:content-[''] before:absolute before:inset-0 before:rounded-md before:invisible focus-within:before:visible before:ring-2 before:ring-transparent before:ring-offset-transparent before:ring-offset-1 before:pointer-events-none focus-within:before:ring-gray-300 dark:focus-within:before:ring-gray-600 before:border focus-within:before:border-gray-600">
+    {{ i "search" "size-4 text-gray-400" }}
     <input
       type="text"
       id="nav-search-input"
@@ -65,17 +62,121 @@
       hx-indicator="#nav-search-indicator"
       hx-on:keydown="if(event.key==='Enter'&&this.value.trim())window.location.href='/search?q='+encodeURIComponent(this.value.trim())"
     />
-    <kbd class="flex items-center shrink-0 text-xs border border-gray-200 dark:border-gray-600 rounded border-b-2 px-1 font-sans leading-5 text-gray-400 dark:text-gray-500 peer-focus:hidden peer-[:not(:placeholder-shown)]:hidden">⌘K</kbd>
+    <kbd class="pointer-events-none flex items-center shrink-0 text-xs border border-gray-200 dark:border-gray-600 rounded border-b-2 px-1 font-sans leading-5 text-gray-400 dark:text-gray-500 peer-focus:hidden peer-[:not(:placeholder-shown)]:hidden">⌘K</kbd>
+    <span id="nav-search-indicator" class="hidden [&.htmx-request]:block shrink-0">
+      {{ i "loader-circle" "size-4 text-gray-400 animate-spin" }}
+    </span>
   </div>
   <div id="nav-search-results"
        class="absolute right-0 top-full z-50 w-80"
        hx-on::after-swap="var b=document.getElementById('nav-search-box'),o=this.children.length>0;b.classList.toggle('rounded',!o);b.classList.toggle('rounded-t',o);">
   </div>
 </div>
-<a href="/search" class="md:hidden">{{ i "search" "size-5 text-gray-500 dark:text-gray-400" }}</a>
+
+<button id="mobile-search-btn" class="md:hidden" type="button" onclick="navSearchOpenMobile()">
+  {{ i "search" "size-5 text-gray-500 dark:text-gray-400" }}
+</button>
+
+<div id="mobile-search-overlay"
+     class="md:hidden fixed inset-x-0 top-0 h-dvh z-50
+            bg-white dark:bg-gray-900
+            flex flex-col
+            opacity-0 pointer-events-none
+            transition-opacity duration-150"
+     aria-hidden="true">
+  <div class="flex items-center gap-3 px-4 border-b border-gray-200 dark:border-gray-700 shrink-0"
+       style="padding-top: calc(env(safe-area-inset-top) + 0.75rem); padding-bottom: 0.75rem;">
+    {{ i "search" "size-4 text-gray-400 shrink-0" }}
+    <input
+      type="text"
+      id="mobile-search-input"
+      name="q"
+      placeholder="search..."
+      autocomplete="off"
+      inputmode="search"
+      class="flex-1 min-w-0 border-none bg-transparent p-0 focus:outline-none focus:[box-shadow:none] text-[16px] text-gray-800 dark:text-gray-200 placeholder-gray-400 dark:placeholder-gray-600"
+      hx-get="/search/quick"
+      hx-trigger="input changed delay:250ms"
+      hx-target="#mobile-search-results"
+      hx-swap="innerHTML"
+      hx-vals='{"mobile": "1"}'
+      hx-indicator="#mobile-search-indicator"
+      hx-on:keydown="if(event.key==='Enter'&&this.value.trim())window.location.href='/search?q='+encodeURIComponent(this.value.trim())"
+    />
+    <span id="mobile-search-indicator" class="hidden [&.htmx-request]:block shrink-0">
+      {{ i "loader-circle" "size-4 text-gray-400 animate-spin" }}
+    </span>
+    <button type="button" class="shrink-0 p-1 -mr-1 hit-area hit-area-4" onclick="navSearchCloseMobile()">
+      {{ i "x" "size-5 text-gray-400" }}
+    </button>
+  </div>
+  <div id="mobile-search-results"
+       class="flex-1 flex flex-col overflow-hidden"
+       style="padding-bottom: env(safe-area-inset-bottom)">
+  </div>
+  <div id="mobile-search-spacer" class="shrink-0 bg-gray-50 dark:bg-gray-800 hidden"></div>
+</div>
 
 <script>
 (function() {
+  var _searchScrollY = 0;
+  var _searchVvListener = null;
+
+  function _searchUpdateHeight() {
+    var overlay = document.getElementById('mobile-search-overlay');
+    if (!overlay) return;
+    var vv = window.visualViewport;
+    var outerH = window.outerHeight || window.innerHeight;
+    var visH = vv ? vv.height : window.innerHeight;
+    overlay.style.height = outerH + 'px';
+    overlay.style.top = '0px';
+    var spacer = document.getElementById('mobile-search-spacer');
+    if (spacer) spacer.style.height = Math.max(0, outerH - visH) + 'px';
+  }
+
+  window.navSearchOpenMobile = function() {
+    var overlay = document.getElementById('mobile-search-overlay');
+    if (!overlay) return;
+    overlay.classList.remove('opacity-0', 'pointer-events-none');
+    overlay.classList.add('opacity-100', 'pointer-events-auto');
+    overlay.setAttribute('aria-hidden', 'false');
+    _searchScrollY = window.scrollY;
+    document.body.style.position = 'fixed';
+    document.body.style.top = '-' + _searchScrollY + 'px';
+    document.body.style.width = '100%';
+    _searchUpdateHeight();
+    if (window.visualViewport) {
+      _searchVvListener = _searchUpdateHeight;
+      window.visualViewport.addEventListener('resize', _searchVvListener);
+    }
+    var input = document.getElementById('mobile-search-input');
+    if (input) input.focus({ preventScroll: true });
+  };
+
+  window.navSearchCloseMobile = function() {
+    var overlay = document.getElementById('mobile-search-overlay');
+    if (!overlay) return;
+    overlay.classList.remove('opacity-100', 'pointer-events-auto');
+    overlay.classList.add('opacity-0', 'pointer-events-none');
+    overlay.setAttribute('aria-hidden', 'true');
+    overlay.style.height = '';
+    overlay.style.top = '';
+    var spacer = document.getElementById('mobile-search-spacer');
+    if (spacer) { spacer.style.height = ''; spacer.classList.add('hidden'); }
+    if (window.visualViewport && _searchVvListener) {
+      window.visualViewport.removeEventListener('resize', _searchVvListener);
+      _searchVvListener = null;
+    }
+    document.body.style.position = '';
+    document.body.style.top = '';
+    document.body.style.width = '';
+    window.scrollTo(0, _searchScrollY);
+    var input = document.getElementById('mobile-search-input');
+    if (input) { input.value = ''; input.blur(); }
+    var results = document.getElementById('mobile-search-results');
+    if (results) results.innerHTML = '';
+  };
+
   function clearResults() {
     var r = document.getElementById('nav-search-results');
     if (r) r.innerHTML = '';
@@ -83,46 +184,71 @@
     if (b) { b.classList.add('rounded'); b.classList.remove('rounded-t'); }
   }
 
-  // Close on click outside (handles clicks on non-focusable elements).
   document.addEventListener('click', function(e) {
     var c = document.getElementById('nav-search-container');
     if (c && !c.contains(e.target)) clearResults();
   });
 
-  // Close when focus leaves the container (handles Escape, Tab, click on focusable element outside).
-  // focusout bubbles; relatedTarget is the element receiving focus.
+  // Defer so a click on a result fires before results are cleared.
   document.addEventListener('focusout', function(e) {
     var c = document.getElementById('nav-search-container');
-    if (c && c.contains(e.target) && !c.contains(e.relatedTarget)) clearResults();
+    if (c && c.contains(e.target) && !c.contains(e.relatedTarget)) {
+      setTimeout(clearResults, 0);
+    }
   });
 
-  if (!window._navSearchReady) {
-    window._navSearchReady = true;
-    document.addEventListener('keydown', function(e) {
-      var input = document.getElementById('nav-search-input');
-      var results = document.getElementById('nav-search-results');
-      if (!input) return;
-      var links = results ? Array.from(results.querySelectorAll(':scope > div > a[href]')) : [];
-      var active = document.activeElement;
-      var inInput = active === input;
-      var inResults = links.indexOf(active);
-
-      if ((e.metaKey || e.ctrlKey) && e.key === 'k') {
+  document.addEventListener('htmx:afterSwap', function(e) {
+    if (!e.detail.target || e.detail.target.id !== 'mobile-search-results') return;
+    var spacer = document.getElementById('mobile-search-spacer');
+    if (!spacer) return;
+    var hasResults = !!e.detail.target.querySelector('[data-results-footer]');
+    spacer.classList.toggle('hidden', !hasResults);
+  });
+
+  document.addEventListener('keydown', function(e) {
+    var input = document.getElementById('nav-search-input');
+    var results = document.getElementById('nav-search-results');
+    var mobileOverlay = document.getElementById('mobile-search-overlay');
+    var active = document.activeElement;
+
+    if ((e.metaKey || e.ctrlKey) && e.key === 'k') {
+      e.preventDefault();
+      if (input) { input.focus(); input.select(); }
+    }
+
+    if (e.key === 'Escape') {
+      if (mobileOverlay && !mobileOverlay.classList.contains('opacity-0')) {
         e.preventDefault();
-        input.focus(); input.select();
+        navSearchCloseMobile();
+        return;
       }
-
-      if (e.key === 'ArrowDown') {
-        if (inInput && links.length) { e.preventDefault(); links[0].focus(); }
-        else if (inResults >= 0 && inResults < links.length - 1) { e.preventDefault(); links[inResults + 1].focus(); }
+      if (input) {
+        var links = results ? Array.from(results.querySelectorAll('[data-nav-result]')) : [];
+        var inInput = active === input;
+        var inResults = links.indexOf(active);
+        if (inInput || inResults >= 0) {
+          e.preventDefault();
+          clearResults();
+          input.blur();
+        }
       }
+    }
 
-      if (e.key === 'ArrowUp') {
-        if (inResults === 0) { e.preventDefault(); input.focus(); }
-        else if (inResults > 0) { e.preventDefault(); links[inResults - 1].focus(); }
-      }
-    });
-  }
+    if (!input || !results) return;
+    var links = Array.from(results.querySelectorAll('[data-nav-result]'));
+    var inInput = active === input;
+    var inResults = links.indexOf(active);
+
+    if (e.key === 'ArrowDown') {
+      if (inInput && links.length) { e.preventDefault(); links[0].focus(); }
+      else if (inResults >= 0 && inResults < links.length - 1) { e.preventDefault(); links[inResults + 1].focus(); }
+    }
+
+    if (e.key === 'ArrowUp') {
+      if (inResults === 0) { e.preventDefault(); input.focus(); }
+      else if (inResults > 0) { e.preventDefault(); links[inResults - 1].focus(); }
+    }
+  });
 })();
 </script>
 {{ end }}
diff --git a/appview/pages/templates/search/fragments/quick.html b/appview/pages/templates/search/fragments/quick.html
index e36a4bad..01374760 100644
--- a/appview/pages/templates/search/fragments/quick.html
+++ b/appview/pages/templates/search/fragments/quick.html
@@ -1,10 +1,14 @@
 {{define "search/fragments/quick"}}
 {{- if .Repos -}}
-<div class="bg-white dark:bg-gray-900 border border-t-0 border-gray-200 dark:border-gray-700 rounded-b-md shadow-xl overflow-hidden divide-y divide-gray-100 dark:divide-gray-700">
+<div class="{{ if not .Mobile }}bg-white dark:bg-gray-900 border border-t-0 border-gray-200 dark:border-gray-700 rounded-b-md shadow-xl overflow-hidden divide-y divide-gray-100 dark:divide-gray-700{{ else }}flex flex-col flex-1 min-h-0 overscroll-contain{{ end }}">
+  {{- if .Mobile -}}
+  <div class="flex-1 overflow-y-auto overscroll-contain md:divide-y divide-gray-200 dark:divide-gray-700">
+  {{- end -}}
   {{- range .Repos -}}
   {{ $owner := resolve .Did }}
   <a href="/{{ $owner }}/{{ .Name }}"
-     class="flex flex-col gap-1.5 px-4 py-3 hover:bg-gray-100 dark:hover:bg-gray-700/50 focus:bg-gray-100 dark:focus:bg-gray-700/50 focus:outline-none no-underline hover:no-underline">
+     data-nav-result
+     class="flex flex-col gap-1.5 px-4 py-3 hover:bg-gray-100 dark:hover:bg-gray-700/50 focus:bg-gray-100 dark:focus:bg-gray-700/50 focus:outline-none no-underline hover:no-underline border-b border-gray-200 dark:border-gray-700">
     <div class="flex items-center gap-2 font-medium text-gray-800 dark:text-gray-200">
       {{ i "book-marked" "size-4 pt-0.5 text-gray-400" }}
       <span class="truncate">{{ $owner }}/{{ .Name }}</span>
@@ -30,16 +34,19 @@
     {{- end -}}
   </a>
   {{- end -}}
-  <div class="bg-gray-50 px-4 py-2 flex justify-between items-center text-xs text-gray-600 dark:text-gray-500">
+  {{- if .Mobile -}}
+  </div>
+  {{- end -}}
+  <div data-results-footer class="bg-gray-50 dark:bg-gray-800 px-4 py-2 flex justify-between items-center text-base md:text-xs text-gray-600 dark:text-gray-400{{ if .Mobile }} border-t border-gray-100 dark:border-gray-700{{ end }}">
     <span>{{ .Total }} results</span>
     <a href="/search?q={{ urlquery .Query }}"
        class="flex items-center gap-1 hover:text-gray-600 dark:hover:text-gray-300 no-underline hover:no-underline">
-      all results {{ i "arrow-right" "w-3 h-3 pb-0.5" }}
+      all results {{ i "arrow-right" "size-4" }}
     </a>
   </div>
 </div>
 {{- else if .Query -}}
-<div class="bg-white dark:bg-gray-900 border border-t-0 border-gray-200 dark:border-gray-700 rounded-b-md shadow-xl overflow-hidden px-4 py-8 text-center text-sm text-gray-500 dark:text-gray-400">
+<div class="{{ if not .Mobile }}bg-white dark:bg-gray-900 border border-t-0 border-gray-200 dark:border-gray-700 rounded-b-md shadow-xl{{ end }} overflow-hidden px-4 py-8 text-center text-sm text-gray-500 dark:text-gray-400">
   no results for "{{ .Query }}"
 </div>
 {{- end -}}
diff --git a/appview/state/search.go b/appview/state/search.go
index 2da3d7e0..f68cb5f0 100644
--- a/appview/state/search.go
+++ b/appview/state/search.go
@@ -206,9 +206,10 @@ func (s *State) SearchQuick(w http.ResponseWriter, r *http.Request) {
 	}
 
 	if err := s.pages.SearchQuick(w, pages.SearchQuickParams{
-		Repos: repos,
-		Query: rawQuery,
-		Total: total,
+		Repos:  repos,
+		Query:  rawQuery,
+		Total:  total,
+		Mobile: r.URL.Query().Get("mobile") == "1",
 	}); err != nil {
 		s.logger.Error("failed to render quick search", "err", err)
 	}
-- 
2.51.2