From 45240358d974e6cadc7e2dd01d632264f7f97255 Mon Sep 17 00:00:00 2001
From: Claudio Ortolina <cloud8421@gmail.com>
Date: Fri, 13 Feb 2026 12:57:30 +0000
Subject: [PATCH] Add pull to search

---
 .claude/settings.local.json |  7 ++++++-
 assets/css/app.css          | 38 +++++++++++++++++++++++++++++++++++++
 assets/js/app.js            |  2 ++
 assets/js/pull-to-search.js | 25 ++++++++++++++++++++++++
 assets/package-lock.json    |  7 +++++++
 assets/package.json         |  1 +
 6 files changed, 79 insertions(+), 1 deletion(-)
 create mode 100644 assets/js/pull-to-search.js

diff --git a/.claude/settings.local.json b/.claude/settings.local.json
index 06eea27b..13a68dbc 100644
--- a/.claude/settings.local.json
+++ b/.claude/settings.local.json
@@ -40,7 +40,12 @@
       "Bash(MIX_ENV=test mix ecto.migrate:*)",
       "WebFetch(domain:api-dashboard.search.brave.com)",
       "WebFetch(domain:api.search.brave.com)",
-      "Bash(while read dir)"
+      "Bash(while read dir)",
+      "Bash(xargs:*)",
+      "WebFetch(domain:github.com)",
+      "WebFetch(domain:www.npmjs.com)",
+      "Bash(npm install:*)",
+      "Bash(mix assets.build:*)"
     ]
   },
   "enableAllProjectMcpServers": false
diff --git a/assets/css/app.css b/assets/css/app.css
index c99a53d3..f0ee6c07 100644
--- a/assets/css/app.css
+++ b/assets/css/app.css
@@ -16,10 +16,48 @@
 @custom-variant phx-change-loading (.phx-change-loading&, .phx-change-loading &);
 
 @layer base {
+  html, body {
+    overscroll-behavior-y: contain;
+  }
+
   button:not(:disabled),
   [role="button"]:not(:disabled) {
     cursor: pointer;
   }
+
+  /* Pull-to-search indicator */
+  .ptr--ptr {
+    box-shadow: none !important;
+    background: transparent !important;
+  }
+
+  .ptr--box {
+    display: flex;
+    justify-content: center;
+    padding: 8px 0;
+  }
+
+  .ptr--icon,
+  .ptr--text {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+
+  .ptr--text {
+    display: none;
+  }
+
+  .ptr-icon {
+    width: 24px;
+    height: 24px;
+    color: var(--color-zinc-400);
+    transition: color 0.2s ease;
+  }
+
+  .ptr--release .ptr-icon {
+    color: var(--color-zinc-700);
+  }
 }
 
 @theme {
diff --git a/assets/js/app.js b/assets/js/app.js
index 13177c35..59dbc14a 100644
--- a/assets/js/app.js
+++ b/assets/js/app.js
@@ -30,6 +30,7 @@ import SortableListHook from "./hooks/sortable-list";
 import confetti from "canvas-confetti";
 import { createLiveToastHook } from "live_toast";
 import banner from "./banner";
+import initPullToSearch from "./pull-to-search";
 
 let Hooks = FluxonHooks;
 Hooks.FormatNumber = FormatNumberHook;
@@ -151,3 +152,4 @@ window.enableLiveViewChangeObserver = () => {
 };
 
 banner();
+initPullToSearch();
diff --git a/assets/js/pull-to-search.js b/assets/js/pull-to-search.js
new file mode 100644
index 00000000..873abef8
--- /dev/null
+++ b/assets/js/pull-to-search.js
@@ -0,0 +1,25 @@
+import PullToRefresh from "pulltorefreshjs";
+
+const SEARCH_ICON = `<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="ptr-icon"><path stroke-linecap="round" stroke-linejoin="round" d="m21 21-5.197-5.197m0 0A7.5 7.5 0 1 0 5.196 5.196a7.5 7.5 0 0 0 10.607 10.607Z" /></svg>`;
+
+export default function initPullToSearch() {
+  PullToRefresh.init({
+    mainElement: "body",
+    triggerElement: "body",
+    instructionsPullToRefresh: " ",
+    instructionsReleaseToRefresh: " ",
+    instructionsRefreshing: " ",
+    iconArrow: SEARCH_ICON,
+    iconRefreshing: SEARCH_ICON,
+    distThreshold: 60,
+    distMax: 80,
+    distReload: 50,
+    shouldPullToRefresh() {
+      return !window.scrollY;
+    },
+    onRefresh() {
+      const btn = document.getElementById("universal-search-button");
+      if (btn) btn.click();
+    },
+  });
+}
diff --git a/assets/package-lock.json b/assets/package-lock.json
index 46304131..40750bb1 100644
--- a/assets/package-lock.json
+++ b/assets/package-lock.json
@@ -8,6 +8,7 @@
         "barcode-detector": "^3.0.0",
         "canvas-confetti": "^1.9.3",
         "live_toast": "file:../deps/live_toast",
+        "pulltorefreshjs": "^0.1.22",
         "sortablejs": "^1.15.6"
       },
       "devDependencies": {
@@ -87,6 +88,12 @@
         "node": ">=4"
       }
     },
+    "node_modules/pulltorefreshjs": {
+      "version": "0.1.22",
+      "resolved": "https://registry.npmjs.org/pulltorefreshjs/-/pulltorefreshjs-0.1.22.tgz",
+      "integrity": "sha512-haxNVEHnS4NCQA7NeG7TSV69z4uqy/N7nfPRuc4dPWe8H6ygUrMjdNeohE+6v0lVVX/ukSjbLYwPUGUYtFKfvQ==",
+      "license": "MIT"
+    },
     "node_modules/sortablejs": {
       "version": "1.15.7",
       "resolved": "https://registry.npmjs.org/sortablejs/-/sortablejs-1.15.7.tgz",
diff --git a/assets/package.json b/assets/package.json
index 17bdbc26..9d14fd0f 100644
--- a/assets/package.json
+++ b/assets/package.json
@@ -3,6 +3,7 @@
     "barcode-detector": "^3.0.0",
     "canvas-confetti": "^1.9.3",
     "live_toast": "file:../deps/live_toast",
+    "pulltorefreshjs": "^0.1.22",
     "sortablejs": "^1.15.6"
   },
   "devDependencies": {