Add pull to search

.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

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 {

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();

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();
+    },
+  });
+}

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",

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": {