export default function App() { const [items, setItems] = useAppStorage('fb_items', []) const [quote, setQuote] = useState('') const [source, setSource] = useState('call') const [customer, setCustomer] = useState('') const [area, setArea] = useState('') const [filterSource, setFilterSource] = useState('all') const [search, setSearch] = useState('') const download = useDownload() const list = items || [] const sourceCounts = useMemo(() => { const c = { call: 0, slack: 0, ticket: 0, email: 0, other: 0 } for (const it of list) c[it.source] = (c[it.source] || 0) + 1 return c }, [list]) const filtered = useMemo(() => { const q = search.trim().toLowerCase() return list.filter(it => { if (filterSource !== 'all' && it.source !== filterSource) return false if (!q) return true return (it.quote + ' ' + (it.customer || '') + ' ' + (it.area || '')).toLowerCase().includes(q) }) }, [list, filterSource, search]) const submit = () => { if (!quote.trim()) return const item = { id: Math.random().toString(36).slice(2, 10), quote: quote.trim(), source, customer: customer.trim() || null, area: area.trim() || null, ts: new Date().toISOString(), } setItems([item, ...list]) setQuote('') setCustomer('') setArea('') } const remove = (id) => setItems(list.filter(it => it.id !== id)) const exportCsv = () => { const esc = (s) => '"' + String(s ?? '').replace(/"/g, '""') + '"' const rows = [['timestamp','source','customer','product_area','quote']] for (const it of list) rows.push([it.ts, it.source, it.customer || '', it.area || '', it.quote]) const csv = rows.map(r => r.map(esc).join(',')).join('\n') download('feedback-' + new Date().toISOString().slice(0,10) + '.csv', csv, 'text/csv') } const sourceColor = { call: 'bg-blue-100 text-blue-800', slack: 'bg-purple-100 text-purple-800', ticket: 'bg-amber-100 text-amber-800', email: 'bg-emerald-100 text-emerald-800', other: 'bg-zinc-100 text-zinc-700', } const inputCls = "w-full px-3 py-2 rounded-md bg-white border border-zinc-300 text-sm focus:outline-none focus:border-zinc-900" return (

{/* Capture form */}

setQuote(e.target.value)}
          placeholder="What did the customer actually say? Paste the quote, the slack message, the ticket text…"
          className="w-full h-20 px-3 py-2 rounded-md bg-white border border-zinc-300 text-sm placeholder:text-zinc-400 focus:outline-none focus:border-zinc-900 resize-none"
          onKeyDown={(e) => { if ((e.metaKey || e.ctrlKey) && e.key === 'Enter') submit() }}
        />
        <div className="grid grid-cols-3 gap-2">
          <select value={source} onChange={(e) => setSource(e.target.value)} className={inputCls}>
            <option value="call">📞 call</option>
            <option value="slack">💬 slack</option>
            <option value="ticket">🎫 ticket</option>
            <option value="email">✉️ email</option>
            <option value="other">📝 other</option>
          </select>
          <input value={customer} onChange={(e) => setCustomer(e.target.value)} placeholder="customer (opt.)" className={inputCls} />
          <input value={area} onChange={(e) => setArea(e.target.value)} placeholder="product area (opt.)" className={inputCls} />
        </div>
        <div className="flex items-center gap-2">
          <button onClick={submit} disabled={!quote.trim()} className="px-4 py-2 rounded-md bg-zinc-900 hover:bg-zinc-700 disabled:bg-zinc-300 disabled:text-zinc-500 text-white text-sm font-medium">
            Add (⌘+↵)
          </button>
          <span className="text-xs text-zinc-500">Total: {list.length}</span>
        </div>
      </div>

{/* Filter bar */}
      <div className="px-4 py-2 bg-white border-b border-zinc-200 flex items-center gap-2 overflow-x-auto">
        {['all','call','slack','ticket','email','other'].map(s => (
          <button
            key={s}
            onClick={() => setFilterSource(s)}
            className={"shrink-0 px-2.5 py-1 rounded-full text-xs font-medium transition " + (filterSource === s ? 'bg-zinc-900 text-white' : 'bg-zinc-100 text-zinc-600 hover:bg-zinc-200')}
          >
            {s} {s !== 'all' ? "(" + (sourceCounts[s] || 0) + ")" : ''}
          </button>
        ))}
        <input
          value={search}
          onChange={(e) => setSearch(e.target.value)}
          placeholder="search…"
          className="ml-auto px-3 py-1 rounded-md bg-zinc-100 border border-transparent focus:bg-white focus:border-zinc-300 text-xs w-40 focus:outline-none"
        />
        <button onClick={exportCsv} disabled={!list.length} className="shrink-0 px-2.5 py-1 rounded-md bg-zinc-100 hover:bg-zinc-200 disabled:opacity-40 text-xs font-medium">
          ⤓ CSV
        </button>
      </div>

{/* List */}
      <div className="flex-1 overflow-y-auto px-4 py-3 space-y-2">
        {filtered.length === 0 && (
          <div className="text-center py-10 text-zinc-400 text-sm">
            {list.length === 0 ? 'Capture your first signal above.' : 'No matches for this filter.'}
          </div>
        )}
        {filtered.map(it => (
          <div key={it.id} className="group bg-white border border-zinc-200 rounded-lg p-3 hover:border-zinc-300 transition">
            <div className="flex items-start justify-between gap-2 mb-1.5">
              <div className="flex items-center gap-1.5 flex-wrap">
                <span className={"px-1.5 py-0.5 rounded text-[10px] font-semibold uppercase " + (sourceColor[it.source] || sourceColor.other)}>
                  {it.source}
                </span>
                {it.customer && <span className="text-xs text-zinc-600">{it.customer}</span>}
                {it.area && <span className="text-xs text-zinc-400">· {it.area}</span>}
              </div>
              <div className="flex items-center gap-2 shrink-0">
                <span className="text-[10px] text-zinc-400 tabular-nums">
                  {new Date(it.ts).toLocaleString(undefined, { month: 'short', day: 'numeric', hour: '2-digit', minute: '2-digit' })}
                </span>
                <button onClick={() => remove(it.id)} className="text-zinc-300 hover:text-red-500 opacity-0 group-hover:opacity-100 transition text-sm">×</button>
              </div>
            </div>
            <div className="text-sm leading-relaxed whitespace-pre-wrap">{it.quote}</div>
          </div>
        ))}
      </div>
    </div>
  )
}</article></body></html>