feat(05-02): add search and note widgets with tests

- SearchWidget: provider dropdown, text input, button; opens search in new tab via window.open (D-14/D-15) - NoteWidget: MDEditor with compact toolbar, debounced autosave (1500ms), AbortController for in-flight cancellation (D-16/D-17/D-18) - rehype-sanitize enabled for Markdown XSS prevention (T-05-05) - Widget registry updated with wireSearchWidget/wireNoteWidget (no more placeholders) - dashboard-api.ts: added fetchSearchProviders, addSearchProvider, removeSearchProvider, signal support on updateWidgetConfig - 9 new tests passing (search: 5, note: 4) Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
2026-06-24 11:33:01 +02:00
parent 97c13809f5
commit dd0209898b
9 changed files with 1616 additions and 14 deletions
@@ -0,0 +1,137 @@
+'use client';
+
+import { useCallback, useEffect, useState } from 'react';
+import { useTranslations } from 'next-intl';
+import type { WidgetProps } from '../widget-registry';
+import { fetchSearchProviders, updateWidgetConfig } from '@/lib/dashboard-api';
+
+/**
+ * Default hardcoded search providers (D-15).
+ * Used as fallback if the API fetch fails so the widget always works.
+ */
+const DEFAULT_PROVIDERS = [
+  { id: 'google', name: 'Google', urlTemplate: 'https://www.google.com/search?q={query}', isDefault: true },
+  { id: 'bing', name: 'Bing', urlTemplate: 'https://www.bing.com/search?q={query}', isDefault: true },
+  { id: 'ddg', name: 'DuckDuckGo', urlTemplate: 'https://duckduckgo.com/?q={query}', isDefault: true },
+];
+
+export interface SearchProvider {
+  id: string;
+  name: string;
+  urlTemplate: string;
+  isDefault: boolean;
+}
+
+/**
+ * Search widget (DASH-04, D-14/D-15).
+ * Horizontal layout: provider dropdown left, text input center, search button right.
+ * Opens web search in a new tab via window.open with noopener,noreferrer.
+ */
+export function SearchWidget({ instanceId, config }: WidgetProps) {
+  const t = useTranslations('widgets');
+  const [providers, setProviders] = useState<SearchProvider[]>(DEFAULT_PROVIDERS);
+  const [selectedProviderId, setSelectedProviderId] = useState<string>(
+    (config.providerId as string) || 'google',
+  );
+  const [query, setQuery] = useState('');
+
+  // Fetch providers from API, fallback to defaults on error
+  useEffect(() => {
+    let cancelled = false;
+    fetchSearchProviders()
+      .then((data) => {
+        if (!cancelled && data.length > 0) {
+          setProviders(data);
+        }
+      })
+      .catch(() => {
+        // Keep default providers — widget always works
+      });
+    return () => {
+      cancelled = true;
+    };
+  }, []);
+
+  // Persist selected provider to widget config
+  const handleProviderChange = useCallback(
+    (providerId: string) => {
+      setSelectedProviderId(providerId);
+      updateWidgetConfig(instanceId, { providerId }).catch(() => {
+        // Silently fail — provider selection is non-critical
+      });
+    },
+    [instanceId],
+  );
+
+  const handleSearch = useCallback(() => {
+    if (!query.trim()) return;
+
+    const provider = providers.find((p) => p.id === selectedProviderId) ?? providers[0];
+    if (!provider) return;
+
+    const url = provider.urlTemplate.replace(
+      '{query}',
+      encodeURIComponent(query.trim()),
+    );
+    window.open(url, '_blank', 'noopener,noreferrer');
+  }, [query, selectedProviderId, providers]);
+
+  const handleKeyDown = useCallback(
+    (e: React.KeyboardEvent) => {
+      if (e.key === 'Enter') {
+        handleSearch();
+      }
+    },
+    [handleSearch],
+  );
+
+  return (
+    <div className="flex h-full items-center gap-2 px-3">
+      {/* Provider dropdown (D-14: ~120px left) */}
+      <select
+        role="combobox"
+        className="h-8 w-[120px] shrink-0 rounded border border-border bg-card px-2 text-sm text-foreground"
+        value={selectedProviderId}
+        onChange={(e) => handleProviderChange(e.target.value)}
+      >
+        {providers.map((p) => (
+          <option key={p.id} value={p.id}>
+            {p.name}
+          </option>
+        ))}
+      </select>
+
+      {/* Search input (flex-1 center) */}
+      <input
+        type="text"
+        className="h-8 flex-1 rounded border border-border bg-background px-3 text-sm text-foreground placeholder:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-primary"
+        placeholder={t('search.placeholder')}
+        value={query}
+        onChange={(e) => setQuery(e.target.value)}
+        onKeyDown={handleKeyDown}
+      />
+
+      {/* Search button (right) */}
+      <button
+        type="button"
+        className="flex h-8 shrink-0 items-center justify-center rounded bg-primary px-3 text-sm font-medium text-primary-foreground transition-colors hover:bg-primary/90"
+        onClick={handleSearch}
+      >
+        <svg
+          xmlns="http://www.w3.org/2000/svg"
+          width="16"
+          height="16"
+          viewBox="0 0 24 24"
+          fill="none"
+          stroke="currentColor"
+          strokeWidth="2"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+        >
+          <circle cx="11" cy="11" r="8" />
+          <line x1="21" y1="21" x2="16.65" y2="16.65" />
+        </svg>
+      </button>
+    </div>
+  );
+}