termsearch 0.3.6 → 0.3.7

package/frontend/dist/app.js

@@ -208,6 +208,7 @@ function svg(paths, size = 16, extra = '') {
 
 const ICONS = {
   search:   svg('<circle cx="11" cy="11" r="8"/><path d="m21 21-4.35-4.35"/>'),
+  filter:   svg('<polygon points="22 3 2 3 10 12.46 10 19 14 21 14 12.46 22 3"/>'),
   settings: svg('<circle cx="12" cy="12" r="3"/><path d="M12 2v3m0 14v3M2 12h3m14 0h3m-3.7-8.3-2.1 2.1m-8.4 8.4-2.1 2.1m12.5 0-2.1-2.1M5.7 5.7 3.6 3.6"/>'),
   theme:    svg('<circle cx="12" cy="12" r="5"/><path d="M12 1v2m0 18v2M4.22 4.22l1.42 1.42m12.72 12.72 1.42 1.42M1 12h2m18 0h2M4.22 19.78l1.42-1.42M18.36 5.64l1.42-1.42"/>'),
   back:     svg('<path d="M19 12H5"/><path d="m12 5-7 7 7 7"/>'),
@@ -314,13 +315,19 @@ function LangPicker() {
   return wrap;
 }
 
-function EnginePicker() {
-  const details = el('details', { className: 'engine-picker' });
+function EnginePicker(opts = {}) {
+  const compact = Boolean(opts.compact);
+  const details = el('details', { className: `engine-picker${compact ? ' engine-picker-compact' : ''}` });
   const selectedCount = state.selectedEngines.length;
-  const summary = el('summary', { className: 'engine-picker-summary' },
-    el('span', { className: 'engine-picker-title' }, selectedCount ? `Engines (${selectedCount})` : 'Engines (all)'),
-    iconEl('chevron', 'engine-chevron'),
-  );
+  const summary = compact
+    ? el('summary', { className: 'engine-picker-summary engine-picker-summary-icon', title: 'Search engines' },
+      iconEl('filter', 'engine-filter-icon'),
+      selectedCount ? el('span', { className: 'engine-picker-count' }, String(selectedCount)) : null,
+    )
+    : el('summary', { className: 'engine-picker-summary' },
+      el('span', { className: 'engine-picker-title' }, selectedCount ? `Engines (${selectedCount})` : 'Engines (all)'),
+      iconEl('chevron', 'engine-chevron'),
+    );
 
   const body = el('div', { className: 'engine-picker-body' });
   const presetRow = el('div', { className: 'engine-preset-row' });
@@ -1021,6 +1028,7 @@ function renderApp() {
     el('div', { className: 'header-search' }, SearchForm(state.query, (q, cat) => { state.query = q; doSearch(q, cat); })),
     el('div', { className: 'header-nav' },
       LangPicker(),
+      EnginePicker({ compact: true }),
       el('button', { className: 'btn-icon', title: 'Settings',     onClick: () => navigate('#/settings') }, iconEl('settings')),
       el('button', { className: 'btn-icon', title: 'Toggle theme', onClick: toggleTheme }, iconEl('theme')),
     ),
@@ -1047,20 +1055,19 @@ function renderApp() {
     });
   };
   buildCatTabs(categoryBar);
-  categoryBar.append(EnginePicker());
 
   const mobileTabs = el('div', { className: 'mobile-bar-tabs' });
   buildCatTabs(mobileTabs);
   const mobileBar = el('div', { className: 'mobile-bar' },
     el('div', { className: 'mobile-bar-search' }, SearchForm(state.query, (q, cat) => { state.query = q; doSearch(q, cat); })),
     mobileTabs,
-    el('div', { className: 'mobile-bar-engine' }, EnginePicker()),
     el('div', { className: 'mobile-bar-row' },
       el('div', {
         className: 'mobile-logo',
         onClick: () => { state.query = ''; state.category = 'web'; navigate('#/'); renderApp(); },
       }, 'Term', el('strong', {}, 'Search')),
       LangPicker(),
+      EnginePicker({ compact: true }),
       el('button', { className: 'btn-icon', title: 'Settings',     onClick: () => navigate('#/settings') }, iconEl('settings')),
       el('button', { className: 'btn-icon', title: 'Toggle theme', onClick: toggleTheme }, iconEl('theme')),
     ),

package/frontend/dist/style.css

@@ -161,7 +161,6 @@ a:hover { color: var(--link-h); }
 }
 
 .engine-picker {
-  margin-left: auto;
   position: relative;
 }
 .engine-picker summary {
@@ -182,6 +181,43 @@ a:hover { color: var(--link-h); }
   font-size: 11px;
   cursor: pointer;
 }
+.engine-picker-summary-icon {
+  width: 32px;
+  height: 32px;
+  padding: 0;
+  border-radius: var(--radius-sm);
+  justify-content: center;
+  background: transparent;
+  color: var(--text3);
+  border-color: var(--border);
+  position: relative;
+}
+.engine-picker-summary-icon:hover {
+  border-color: #3a3a3a;
+  color: var(--text2);
+}
+.engine-filter-icon {
+  display: inline-flex;
+  align-items: center;
+}
+.engine-picker-count {
+  position: absolute;
+  top: -5px;
+  right: -5px;
+  min-width: 14px;
+  height: 14px;
+  border-radius: 999px;
+  padding: 0 3px;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  background: rgba(109,40,217,0.95);
+  color: #fff;
+  border: 1px solid rgba(167,139,250,0.55);
+  font-size: 9px;
+  font-weight: 700;
+  line-height: 1;
+}
 .engine-picker-title {
   white-space: nowrap;
 }
@@ -962,7 +998,6 @@ a:hover { color: var(--link-h); }
   scrollbar-width: none;
 }
 .mobile-bar-tabs::-webkit-scrollbar { display: none; }
-.mobile-bar-engine { padding: 0 12px 4px; }
 .mobile-bar-row    {
   display: flex;
   align-items: center;
@@ -978,9 +1013,17 @@ a:hover { color: var(--link-h); }
   .main { padding-bottom: calc(20px + var(--mobile-bar-height, 0px) + env(safe-area-inset-bottom, 0px)); }
 
   .cat-tab { font-size: 10px; padding: 4px 8px; }
-  .mobile-bar-engine .engine-picker { width: 100%; margin-left: 0; }
-  .mobile-bar-engine .engine-picker-summary { width: 100%; justify-content: space-between; }
-  .engine-picker-body { width: calc(100vw - 24px); right: -6px; bottom: calc(100% + 8px); top: auto; }
+  .mobile-bar-row .engine-picker-summary-icon { width: 30px; height: 30px; }
+  .engine-picker-body {
+    position: fixed;
+    left: 10px;
+    right: 10px;
+    width: auto;
+    max-height: min(62vh, 520px);
+    bottom: calc(var(--mobile-bar-height, 0px) + env(safe-area-inset-bottom, 0px) + 10px);
+    top: auto;
+    z-index: 260;
+  }
   .logo-text { font-size: 15px; }
   .home-logo { font-size: 40px; }
   .home-tagline { letter-spacing: 0.08em; margin-bottom: 20px; }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "termsearch",
-  "version": "0.3.6",
+  "version": "0.3.7",
   "description": "Personal search engine for Termux/Linux/macOS — zero-config, privacy-first, AI-optional",
   "type": "module",
   "bin": {