GIF search, from nostr.build's GIF index (gifs.nostr.build). A GIF button in the post composer and in every chat composer (DMs, groups, communities) opens a picker: "GIFs from nostr.build" (linked, as their terms require), starter chips (gm, lol, yes, wow, …; the first runs on open), a search field (debounced 250 ms, no one-letter searches, one shared request per normalised query, never aborted, 429/403/503 answered in words), and a masonry grid whose tiles play the small H.264 copy only while near the screen, over the lqip blur, falling back to the animated preview (stills under reduced motion). A pick puts the original URL in a post — published with a NIP-92 imeta (m, dim, size, alt) — or, in a chat, sends it at once after whatever was typed. Media URLs not on gifs.nostr.build are dropped. Browser calls carry no headers: production needs v3.coinos.io registered in the nostr.build dashboard (localhost works as their shared dev client). tools/gif-picker-test.js runs against the live API.

Co-Authored-By: Claude Opus 5.5 <[email protected]>
Claude-Session: https://claude.ai/code/session_01Vps2H27rhbG9ZqseGfMrc3

1 files changed, 21 insertions, 2 deletions

diff --git a/src/style.css b/src/style.css
index dad0520..2ed97a1 100644
--- a/src/style.css
+++ b/src/style.css
@@ -236,7 +236,7 @@ button:disabled { opacity: .5; cursor: not-allowed; }
 /* ---- inputs ---- */
 label.field { display: block; }
 .field .lab { font-size: 13px; font-weight: 600; color: var(--muted); margin-bottom: 6px; display: block; }
-input[type=text], input[type=password], input[type=number], textarea, select {
+input[type=text], input[type=search], input[type=password], input[type=number], textarea, select {
   width: 100%; font: inherit; color: var(--ink); background: var(--paper);
   border: 1px solid var(--line-strong); border-radius: 11px; padding: 11px 13px;
 }
@@ -1241,7 +1241,7 @@ button, .btn { transition: filter .12s, background .15s, border-color .15s, box-
 .chat-avatar.clickable:hover { transform: scale(1.07); }
 .header-avatar .chat-avatar { transition: transform .15s ease; }
 .header-avatar:hover .chat-avatar { transform: scale(1.08); }
-input[type=text], input[type=password], input[type=number], textarea, select { transition: border-color .15s, box-shadow .15s; }
+input[type=text], input[type=search], input[type=password], input[type=number], textarea, select { transition: border-color .15s, box-shadow .15s; }
 .settings-nav::after { transition: transform .18s ease, color .18s; }
 .settings-nav:hover::after { transform: translateX(3px); color: var(--ink); }
 
@@ -1632,3 +1632,22 @@ body::after {
 .mention-ac .item { cursor: pointer; padding: 6px 10px; }
 /* `code` in a post */
 .md-code { font-family: var(--mono, ui-monospace, monospace); font-size: .9em; background: color-mix(in srgb, currentColor 9%, transparent); border-radius: 4px; padding: 0 .3em; }
+
+/* GIF picker (gifs.nostr.build) */
+.gif-btn { font-weight: 700; font-size: 12px; letter-spacing: .04em; }
+.chat-gif { font-weight: 700; font-size: 11px; letter-spacing: .04em; padding: 0 8px; }
+.gif-backdrop { align-items: flex-end; padding: 0; }
+.gif-sheet { width: 100%; max-width: 560px; height: min(78vh, 640px); gap: 8px; border-radius: 16px 16px 0 0; padding: 12px; }
+@media (min-width: 640px) { .gif-backdrop { align-items: center; padding: 24px; } .gif-sheet { border-radius: 16px; } }
+.gif-head { align-items: center; }
+.gif-head a { color: inherit; text-decoration: underline; }
+.gif-search { width: 100%; }
+.gif-chips { gap: 6px; overflow-x: auto; flex-wrap: nowrap; scrollbar-width: none; flex-shrink: 0; }
+.gif-chips::-webkit-scrollbar { display: none; }
+.gif-body { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; }
+.gif-grid { columns: 2; column-gap: 6px; }
+@media (min-width: 640px) { .gif-grid { columns: 3; } }
+.gif-tile { padding: 0; border: 0; border-radius: 8px; overflow: hidden; background: #000 center / cover no-repeat; width: 100%; cursor: pointer; display: block; margin: 0 0 6px; break-inside: avoid; }
+.gif-search::-webkit-search-cancel-button { cursor: pointer; }
+.gif-tile video, .gif-tile img { width: 100%; height: 100%; object-fit: cover; display: block; pointer-events: none; }
+.gif-note { display: flex; justify-content: center; padding: 32px 0; }