@abreen/tada 1.4.1 → 1.5.1

package/src/search/index.ts

@@ -104,6 +104,7 @@ function render(
   input: HTMLInputElement,
   resultsContainer: HTMLElement,
   state: State,
+  loading = false,
 ) {
   if (state.showResults) {
     resultsContainer.removeAttribute('inert');
@@ -201,10 +202,8 @@ function render(
     const hint = document.createElement('span');
     hint.className = 'search-hint';
     const kbd1 = document.createElement('kbd');
-    kbd1.textContent = 'Ctrl';
-    const kbd2 = document.createElement('kbd');
-    kbd2.textContent = 'Space';
-    hint.append(kbd1, '+', kbd2, '\u00a0to search');
+    kbd1.textContent = '/';
+    hint.append('Press\u00a0', kbd1, '\u00a0to search');
     infoSpan.appendChild(hint);
 
     resultsDiv.insertBefore(infoSpan, resultsDiv.firstChild);
@@ -218,15 +217,21 @@ function render(
     countSpan.className = 'results-count';
     infoSpan.insertBefore(countSpan, infoSpan.firstChild);
   }
-  const n = state.totalResults;
-  if (n === 0) {
-    countSpan.textContent = 'No results';
-  } else if (n === 1) {
-    countSpan.textContent = 'One result';
-  } else if (n <= MAX_RESULTS) {
-    countSpan.textContent = `${n} results`;
+  if (loading) {
+    countSpan.textContent = 'Loading\u2026';
+    infoSpan.classList.add('loading');
   } else {
-    countSpan.textContent = `Showing first ${MAX_RESULTS} results`;
+    infoSpan.classList.remove('loading');
+    const n = state.totalResults;
+    if (n === 0) {
+      countSpan.textContent = 'No results';
+    } else if (n === 1) {
+      countSpan.textContent = 'One result';
+    } else if (n <= MAX_RESULTS) {
+      countSpan.textContent = `${n} results`;
+    } else {
+      countSpan.textContent = `Showing first ${MAX_RESULTS} results`;
+    }
   }
 
   if (state.showResults) {
@@ -328,11 +333,20 @@ export default (window: Window) => {
   };
 
   async function update() {
+    if (state.showResults) {
+      render(input!, resultsContainer, state, true);
+    }
     await doSearch(state);
-    render(input!, resultsContainer, state);
+    if (!state.showResults) {
+      return;
+    }
+    render(input!, resultsContainer, state, false);
   }
 
   function hide() {
+    if (!state.showResults) {
+      return;
+    }
     state.showResults = false;
     render(input!, resultsContainer, state);
   }
@@ -343,6 +357,12 @@ export default (window: Window) => {
       return;
     }
     state.value = value;
+    if (value.length === 0) {
+      hide();
+      state.results = [];
+      state.totalResults = 0;
+      return;
+    }
     state.showResults = true;
     update().catch(() => {});
   }
@@ -481,7 +501,11 @@ export default (window: Window) => {
 
   function handleWindowKeyDown(e: KeyboardEvent) {
     resultsContainer.classList.add('is-typing');
-    if (e.key === ' ' && e.ctrlKey && !e.altKey && !e.metaKey) {
+    if (e.key === '/' && !e.ctrlKey && !e.altKey && !e.metaKey && !e.shiftKey) {
+      const tag = (e.target as HTMLElement)?.tagName;
+      if (tag === 'INPUT' || tag === 'TEXTAREA' || tag === 'SELECT') {
+        return;
+      }
       e.preventDefault();
       input!.focus();
     }

package/src/search/style.scss

@@ -14,13 +14,12 @@ header {
 
   .results-container.is-showing .results {
     opacity: 1;
-    transform: translateY(0);
     pointer-events: all;
   }
 
   @media (hover: hover) {
-    .results-container.is-typing a.result:hover:not(:focus-visible),
-    .results-container.is-typing a.sub-result:hover:not(:focus-visible) {
+    .results-container.is-typing a.result:hover:not(:focus),
+    .results-container.is-typing a.sub-result:hover:not(:focus) {
       background: transparent;
     }
   }
@@ -41,13 +40,6 @@ header {
     min-height: 80px;
     @include user-select(none);
 
-    @media (prefers-reduced-motion: no-preference) {
-      transform: translateY(-8px);
-      transition:
-        opacity 0.25s ease,
-        transform 0.25s ease;
-    }
-
     .results-info {
       display: flex;
       align-items: center;
@@ -55,6 +47,25 @@ header {
       color: var(--fg2-color);
       @include user-select(none);
       padding: 8px 8px 8px 8px;
+      position: relative;
+
+      &.loading::after {
+        content: '';
+        position: absolute;
+        bottom: 0;
+        left: 0;
+        right: 0;
+        height: 2px;
+        background-image: linear-gradient(
+          90deg,
+          transparent 25%,
+          var(--theme-color) 50%,
+          transparent 75%
+        );
+        background-size: 200% 100%;
+        background-repeat: no-repeat;
+        animation: shimmer 3s ease-in-out infinite;
+      }
 
       .search-hint {
         font-size: var(--font-size-small);
@@ -89,9 +100,8 @@ header {
         }
       }
 
-      a.result:focus-visible {
+      a.result:focus {
         background: var(--bg2-color);
-        outline: 2px solid var(--theme-color);
         outline-offset: -2px;
       }
     }
@@ -162,9 +172,8 @@ header {
           background: var(--bg2-color);
         }
 
-        &:focus-visible {
+        &:focus {
           background: var(--bg2-color);
-          outline: 2px solid var(--theme-color);
           outline-offset: -2px;
         }
 

package/src/style.scss

@@ -167,27 +167,36 @@ input[type='submit'] {
   text-decoration: none;
 }
 
-button:active,
-a.button:active,
-input[type='submit']:active {
+button:disabled,
+input[type='submit']:disabled {
+  opacity: 0.4;
+  cursor: not-allowed;
+}
+
+button:active:not(:disabled),
+a.button:not(.disabled):active,
+input[type='submit']:active:not(:disabled) {
   background: var(--link-active-color) !important;
   color: var(--bg-color) !important;
 }
 
 @media (hover: hover) {
-  button:hover,
-  a.button:hover,
-  input[type='submit']:hover {
+  button:hover:not(:disabled),
+  a.button:not(.disabled):hover,
+  input[type='submit']:hover:not(:disabled) {
     background: var(--bg2-color);
     cursor: pointer;
   }
 }
 
-button:focus-visible,
-a.button:focus-visible,
-input[type='submit']:focus-visible,
-input[type='text']:focus-visible,
-input[type='search']:focus-visible {
+button:focus,
+a.button:focus,
+input[type='submit']:focus,
+input[type='text']:focus,
+input[type='search']:focus,
+select:focus {
+  outline: 2px solid var(--theme-color);
+  outline-offset: 1px;
   border-color: var(--fg-color);
   background-color: var(--bg2-color);
 }
@@ -206,6 +215,10 @@ button.icon-button {
   vertical-align: top;
 }
 
+button.icon-button:focus {
+  background-color: var(--bg2-color);
+}
+
 ol.styled-list,
 ul.styled-list {
   color: var(--theme-color-text);
@@ -458,7 +471,7 @@ select {
   font-size: inherit;
 }
 
-// Shiki dual-theme support (defaultColor: false — CSS custom properties only,
+// Shiki dual-theme support (defaultColor: false, CSS custom properties only,
 // no inline color/background-color, so no !important needed)
 .shiki span {
   color: var(--shiki-light);

package/src/timezone/index.test.ts

@@ -1,5 +1,45 @@
+// Set globals before importing the module, since it captures
+// __SITE_TIMEZONES__ at load time.
+const TIMEZONES: TimeZone[] = [
+  { value: 'America/New_York', label: 'US Eastern', abbreviation: 'ET' },
+  { value: 'America/Chicago', label: 'US Central', abbreviation: 'CT' },
+  { value: 'America/Los_Angeles', label: 'US Pacific', abbreviation: 'PT' },
+];
+(globalThis as Record<string, unknown>).__SITE_TIMEZONES__ = TIMEZONES;
+(globalThis as Record<string, unknown>).__SITE_DEFAULT_TIMEZONE__ =
+  'America/New_York';
+
 import { describe, expect, test } from 'bun:test';
-import { detectPeriodStyle, to12Hour, normalizeHM } from './index';
+import { JSDOM } from 'jsdom';
+import mount, { detectPeriodStyle, to12Hour, normalizeHM } from './index';
+
+function dom(bodyHtml: string) {
+  return new JSDOM(`<body>${bodyHtml}</body>`, { url: 'http://localhost/' });
+}
+
+function createPage(times: string[], selectedTz?: string) {
+  const options = TIMEZONES.map(
+    tz => `<option value="${tz.value}">${tz.label}</option>`,
+  ).join('');
+  const timeEls = times
+    .map(t => `<time datetime="${t}">${to12Hour(...parseHM(t))}</time>`)
+    .join('\n');
+  const html = `<select class="time-zone">${options}</select>${timeEls}`;
+  const jsdom = dom(html);
+  if (selectedTz) {
+    try {
+      jsdom.window.localStorage.setItem('timezoneSelection', selectedTz);
+    } catch {
+      // ignored
+    }
+  }
+  return jsdom.window;
+}
+
+function parseHM(hhmm: string): [number, number] {
+  const [h, m] = hhmm.split(':').map(Number);
+  return [h, m];
+}
 
 describe('detectPeriodStyle', () => {
   test('detects uppercase "PM"', () => {
@@ -75,6 +115,10 @@ describe('to12Hour', () => {
   test('formats 23:59', () => {
     expect(to12Hour(23, 59)).toBe('11:59 p.m.');
   });
+
+  test('omits period when style is null', () => {
+    expect(to12Hour(14, 0, null)).toBe('2:00');
+  });
 });
 
 describe('normalizeHM', () => {
@@ -98,3 +142,259 @@ describe('normalizeHM', () => {
     expect(normalizeHM(750)).toEqual([12, 30]);
   });
 });
+
+describe('timezone mount', () => {
+  test('unhides and enables the select element', () => {
+    const win = createPage(['09:00']);
+    mount(win);
+
+    const sel = win.document.querySelector(
+      'select.time-zone',
+    ) as HTMLSelectElement;
+    expect(sel.hidden).toBe(false);
+    expect(sel.disabled).toBe(false);
+  });
+
+  test('sets select value to default timezone', () => {
+    const win = createPage(['09:00']);
+    mount(win);
+
+    const sel = win.document.querySelector(
+      'select.time-zone',
+    ) as HTMLSelectElement;
+    expect(sel.value).toBe('America/New_York');
+  });
+
+  test('wraps select in a timezone-wrapper div', () => {
+    const win = createPage(['09:00']);
+    mount(win);
+
+    const wrapper = win.document.querySelector('.timezone-wrapper');
+    expect(wrapper).not.toBeNull();
+    expect(wrapper!.querySelector('select.time-zone')).not.toBeNull();
+  });
+
+  test('adds a reset button inside the wrapper', () => {
+    const win = createPage(['09:00']);
+    mount(win);
+
+    const btn = win.document.querySelector('.timezone-wrapper button');
+    expect(btn).not.toBeNull();
+    expect(btn!.className).toBe('icon-button');
+  });
+
+  test('reset button is initially invisible for default timezone', () => {
+    const win = createPage(['09:00']);
+    mount(win);
+
+    const btn = win.document.querySelector(
+      '.timezone-wrapper button',
+    ) as HTMLButtonElement;
+    expect(btn.style.opacity).toBe('0');
+    expect(btn.style.pointerEvents).toBe('none');
+  });
+
+  test('restores timezone from localStorage', () => {
+    const win = createPage(['09:00'], 'America/Chicago');
+    mount(win);
+
+    const sel = win.document.querySelector(
+      'select.time-zone',
+    ) as HTMLSelectElement;
+    expect(sel.value).toBe('America/Chicago');
+  });
+
+  test('reset button is visible when non-default timezone is stored', () => {
+    const win = createPage(['09:00'], 'America/Chicago');
+    mount(win);
+
+    const btn = win.document.querySelector(
+      '.timezone-wrapper button',
+    ) as HTMLButtonElement;
+    expect(btn.style.opacity).toBe('1');
+  });
+
+  test('changing select updates time elements', () => {
+    const win = createPage(['12:00']);
+    mount(win);
+
+    const sel = win.document.querySelector(
+      'select.time-zone',
+    ) as HTMLSelectElement;
+    const time = win.document.querySelector('time') as HTMLTimeElement;
+
+    const before = time.innerHTML;
+
+    sel.value = 'America/Los_Angeles';
+    sel.dispatchEvent(new win.Event('change'));
+
+    // The time text should have changed
+    expect(time.innerHTML).not.toBe(before);
+  });
+
+  test('changing to non-default timezone adds is-modified class', () => {
+    const win = createPage(['12:00']);
+    mount(win);
+
+    const sel = win.document.querySelector(
+      'select.time-zone',
+    ) as HTMLSelectElement;
+    const time = win.document.querySelector('time') as HTMLTimeElement;
+
+    sel.value = 'America/Los_Angeles';
+    sel.dispatchEvent(new win.Event('change'));
+
+    expect(time.classList.contains('is-modified')).toBe(true);
+  });
+
+  test('changing back to default removes is-modified class', () => {
+    const win = createPage(['12:00']);
+    mount(win);
+
+    const sel = win.document.querySelector(
+      'select.time-zone',
+    ) as HTMLSelectElement;
+    const time = win.document.querySelector('time') as HTMLTimeElement;
+
+    sel.value = 'America/Los_Angeles';
+    sel.dispatchEvent(new win.Event('change'));
+    expect(time.classList.contains('is-modified')).toBe(true);
+
+    sel.value = 'America/New_York';
+    sel.dispatchEvent(new win.Event('change'));
+    expect(time.classList.contains('is-modified')).toBe(false);
+  });
+
+  test('reset button restores default timezone', () => {
+    const win = createPage(['12:00'], 'America/Chicago');
+    mount(win);
+
+    const sel = win.document.querySelector(
+      'select.time-zone',
+    ) as HTMLSelectElement;
+    const btn = win.document.querySelector(
+      '.timezone-wrapper button',
+    ) as HTMLButtonElement;
+
+    expect(sel.value).toBe('America/Chicago');
+
+    btn.click();
+
+    expect(sel.value).toBe('America/New_York');
+  });
+
+  test('reset button removes localStorage entry', () => {
+    const win = createPage(['12:00'], 'America/Chicago');
+    mount(win);
+
+    const btn = win.document.querySelector(
+      '.timezone-wrapper button',
+    ) as HTMLButtonElement;
+    btn.click();
+
+    expect(win.localStorage.getItem('timezoneSelection')).toBeNull();
+  });
+
+  test('changing timezone saves to localStorage', () => {
+    const win = createPage(['12:00']);
+    mount(win);
+
+    const sel = win.document.querySelector(
+      'select.time-zone',
+    ) as HTMLSelectElement;
+    sel.value = 'America/Chicago';
+    sel.dispatchEvent(new win.Event('change'));
+
+    expect(win.localStorage.getItem('timezoneSelection')).toBe(
+      'America/Chicago',
+    );
+  });
+
+  test('selecting default timezone removes localStorage entry', () => {
+    const win = createPage(['12:00'], 'America/Chicago');
+    mount(win);
+
+    const sel = win.document.querySelector(
+      'select.time-zone',
+    ) as HTMLSelectElement;
+    sel.value = 'America/New_York';
+    sel.dispatchEvent(new win.Event('change'));
+
+    expect(win.localStorage.getItem('timezoneSelection')).toBeNull();
+  });
+
+  test('time element gets title with original time on change', () => {
+    const win = createPage(['14:00']);
+    mount(win);
+
+    const sel = win.document.querySelector(
+      'select.time-zone',
+    ) as HTMLSelectElement;
+    const time = win.document.querySelector('time') as HTMLTimeElement;
+
+    sel.value = 'America/Chicago';
+    sel.dispatchEvent(new win.Event('change'));
+
+    expect(time.title).toContain('ET');
+  });
+
+  test('time element title is cleared when returning to default', () => {
+    const win = createPage(['14:00']);
+    mount(win);
+
+    const sel = win.document.querySelector(
+      'select.time-zone',
+    ) as HTMLSelectElement;
+    const time = win.document.querySelector('time') as HTMLTimeElement;
+
+    sel.value = 'America/Chicago';
+    sel.dispatchEvent(new win.Event('change'));
+    expect(time.title).not.toBe('');
+
+    sel.value = 'America/New_York';
+    sel.dispatchEvent(new win.Event('change'));
+    expect(time.title).toBe('');
+  });
+
+  test('ignores stored timezone not in the timezone list', () => {
+    const win = createPage(['09:00']);
+    try {
+      win.localStorage.setItem('timezoneSelection', 'Mars/Olympus_Mons');
+    } catch {
+      // ignored
+    }
+    mount(win);
+
+    const sel = win.document.querySelector(
+      'select.time-zone',
+    ) as HTMLSelectElement;
+    expect(sel.value).toBe('America/New_York');
+  });
+
+  test('returns a cleanup function', () => {
+    const win = createPage(['09:00']);
+    const cleanup = mount(win);
+    expect(typeof cleanup).toBe('function');
+  });
+
+  test('multiple select elements stay in sync', () => {
+    const options = TIMEZONES.map(
+      tz => `<option value="${tz.value}">${tz.label}</option>`,
+    ).join('');
+    const html =
+      `<select class="time-zone">${options}</select>` +
+      `<select class="time-zone">${options}</select>` +
+      '<time datetime="12:00">12:00 p.m.</time>';
+    const win = dom(html).window;
+    mount(win);
+
+    const selects = win.document.querySelectorAll(
+      'select.time-zone',
+    ) as NodeListOf<HTMLSelectElement>;
+
+    selects[0].value = 'America/Chicago';
+    selects[0].dispatchEvent(new win.Event('change'));
+
+    expect(selects[1].value).toBe('America/Chicago');
+  });
+});