https://cardcompass.app/nav-search.js?v=2

1(function () {
2  'use strict';
3  if (typeof window === 'undefined' || !window.document) return;
4
5  var STYLE = [
6    '.cc-nav-search{position:relative;display:inline-flex;}',
7    '.cc-nav-search-btn{width:40px;height:38px;border-radius:6px;background:transparent;border:1.5px solid rgba(255,255,255,.4);color:#fff;cursor:pointer;font-size:14px;display:inline-flex;align-items:center;justify-content:center;padding:0;font-family:inherit;transition:background .2s,border-color .2s;}',
8    '.cc-nav-search-btn:hover{background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.7);}',
9    '.cc-nav-search-btn:focus-visible{outline:2px solid #4BA3F0;outline-offset:2px;}',
10    '.cc-nav-search-popover{position:absolute;top:calc(100% + 10px);right:0;display:none;background:#fff;border:1px solid #E2E8F0;border-radius:10px;box-shadow:0 8px 32px rgba(0,0,0,.18);padding:6px;gap:6px;min-width:320px;z-index:1100;align-items:center;}',
11    '.cc-nav-search.cc-open .cc-nav-search-popover{display:flex;}',
12    '.cc-nav-search-popover input{flex:1;border:none;outline:none;padding:10px 12px;font-size:14px;color:#1A1A2E;font-family:inherit;background:transparent;min-width:0;}',
13    '.cc-nav-search-popover input::placeholder{color:#718096;}',
14    '.cc-nav-search-submit{background:#0B2D6B;color:#fff;border:none;border-radius:6px;padding:10px 14px;cursor:pointer;font-family:inherit;font-size:14px;display:inline-flex;align-items:center;justify-content:center;transition:background .2s;}',
15    '.cc-nav-search-submit:hover{background:#1A4D9E;}',
16    '@media (max-width:640px){.cc-nav-search-popover{position:fixed;top:74px;left:16px;right:16px;width:auto;min-width:0;max-width:none;}}'
17  ].join('');
18
19  function inject() {
20    var actions = document.querySelector('.nav-actions');
21    if (!actions) return;
22    if (document.getElementById('cc-nav-search')) return;
23
24    if (!document.getElementById('cc-nav-search-style')) {
25      var style = document.createElement('style');
26      style.id = 'cc-nav-search-style';
27      style.textContent = STYLE;
28      document.head.appendChild(style);
29    }
30
31    var cardsUrl = '/cards';
32
33    var wrap = document.createElement('div');
34    wrap.className = 'cc-nav-search';
35    wrap.id = 'cc-nav-search';
36    wrap.innerHTML =
37      '<button type="button" class="cc-nav-search-btn" aria-label="Search cards" aria-expanded="false">' +
38        '<i class="fas fa-search" aria-hidden="true"></i>' +
39      '</button>' +
40      '<form class="cc-nav-search-popover" role="search">' +
41        '<input type="search" name="search" placeholder="Search cards…" autocomplete="off" aria-label="Search cards">' +
42        '<button type="submit" class="cc-nav-search-submit" aria-label="Submit search">' +
43          '<i class="fas fa-arrow-right" aria-hidden="true"></i>' +
44        '</button>' +
45      '</form>';
46
47    actions.insertBefore(wrap, actions.firstChild);
48
49    var btn = wrap.querySelector('.cc-nav-search-btn');
50    var form = wrap.querySelector('.cc-nav-search-popover');
51    var input = wrap.querySelector('input');
52
53    function open() {
54      if (window.innerWidth <= 640) {
55        form.style.cssText = 'display:flex;position:fixed;top:74px;left:16px;right:16px;width:auto;min-width:0;';
56      } else {
57        form.style.cssText = '';
58      }
59      wrap.classList.add('cc-open');
60      btn.setAttribute('aria-expanded', 'true');
61      setTimeout(function () { input.focus(); input.select(); }, 0);
62    }
63    function close() {
64      form.style.cssText = '';
65      wrap.classList.remove('cc-open');
66      btn.setAttribute('aria-expanded', 'false');
67    }
68    function toggle() {
69      if (wrap.classList.contains('cc-open')) close(); else open();
70    }
71
72    btn.addEventListener('click', function (e) {
73      e.preventDefault();
74      e.stopPropagation();
75      toggle();
76    });
77
78    form.addEventListener('click', function (e) { e.stopPropagation(); });
79
80    form.addEventListener('submit', function (e) {
81      e.preventDefault();
82      var q = (input.value || '').trim();
83      if (!q) { close(); return; }
84      location.href = cardsUrl + '?search=' + encodeURIComponent(q);
85    });
86
87    document.addEventListener('click', function (e) {
88      if (wrap.classList.contains('cc-open') && !wrap.contains(e.target)) close();
89    });
90
91    document.addEventListener('keydown', function (e) {
92      if (e.key === 'Escape' && wrap.classList.contains('cc-open')) {
93        close();
94        btn.focus();
95      }
96    });
97  }
98
99  if (document.readyState === 'loading') {
100    document.addEventListener('DOMContentLoaded', inject);
101  } else {
102    inject();
103  }
104})();