feat: create SearchHistory accordion component

apps/react/src/app/components/search-history/index.ts

@@ -0,0 +1,2 @@
+export { SearchHistory } from './search-history'
+export type { SearchHistoryProps, SearchItem } from './search-history'

apps/react/src/app/components/search-history/search-history.scss

@@ -0,0 +1,93 @@
+.search-history {
+  margin: 20px 0;
+
+  :global {
+    .p-accordion {
+      border: 1px solid #e0e0e0;
+      border-radius: 4px;
+    }
+
+    .p-accordion-header {
+      padding: 0;
+
+      a {
+        padding: 12px 16px;
+      }
+    }
+
+    .p-accordion-content {
+      padding: 0;
+    }
+  }
+}
+
+.search-history__header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  width: 100%;
+  font-weight: 500;
+}
+
+.search-history__count {
+  background: #1976d2;
+  color: white;
+  border-radius: 12px;
+  padding: 2px 8px;
+  font-size: 12px;
+  font-weight: 600;
+}
+
+.search-history__list {
+  display: flex;
+  flex-direction: column;
+}
+
+.search-history__item {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 12px 16px;
+  border-top: 1px solid #f0f0f0;
+
+  &:hover {
+    background: #f9f9f9;
+  }
+}
+
+.search-history__button {
+  flex: 1;
+  background: none;
+  border: none;
+  padding: 0;
+  text-align: left;
+  cursor: pointer;
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+}
+
+.search-history__text {
+  font-weight: 500;
+  color: #333;
+}
+
+.search-history__type {
+  font-size: 12px;
+  color: #999;
+  text-transform: uppercase;
+}
+
+.search-history__delete {
+  background: none;
+  border: none;
+  color: #999;
+  cursor: pointer;
+  font-size: 16px;
+  padding: 4px 8px;
+  margin-left: 8px;
+
+  &:hover {
+    color: #d32f2f;
+  }
+}

apps/react/src/app/components/search-history/search-history.tsx

@@ -0,0 +1,76 @@
+import React from 'react'
+import { Accordion, AccordionTab } from 'primereact/accordion'
+import { useTranslation } from 'react-i18next'
+import './search-history.scss'
+
+export interface SearchItem {
+  id: string
+  type: 'flight-number' | 'route'
+  displayText: string
+  query: any
+  timestamp: number
+}
+
+export interface SearchHistoryProps {
+  searches: SearchItem[]
+  onSearchSelect: (search: SearchItem) => void
+  onSearchClear?: (searchId: string) => void
+  'data-testid'?: string
+}
+
+export const SearchHistory: React.FC<SearchHistoryProps> = ({
+  searches,
+  onSearchSelect,
+  onSearchClear,
+  'data-testid': dataTestId,
+}) => {
+  const { t } = useTranslation()
+
+  if (!searches || searches.length === 0) {
+    return null
+  }
+
+  const header = (
+    <div className="search-history__header">
+      <span>{t('SHARED.SEARCH_HISTORY')}</span>
+      <span className="search-history__count">{searches.length}</span>
+    </div>
+  )
+
+  return (
+    <div className="search-history" data-testid={dataTestId || 'search-history'}>
+      <Accordion activeIndex={undefined}>
+        <AccordionTab header={header}>
+          <div className="search-history__list">
+            {searches.map((search) => (
+              <div
+                key={search.id}
+                className="search-history__item"
+                data-testid={`search-history-item-${search.id}`}
+              >
+                <button
+                  className="search-history__button"
+                  onClick={() => onSearchSelect(search)}
+                  data-testid={`search-history-select-${search.id}`}
+                >
+                  <div className="search-history__text">{search.displayText}</div>
+                  <div className="search-history__type">{search.type}</div>
+                </button>
+                {onSearchClear && (
+                  <button
+                    className="search-history__delete"
+                    onClick={() => onSearchClear(search.id)}
+                    title="Delete"
+                    data-testid={`search-history-delete-${search.id}`}
+                  >
+                    ✕
+                  </button>
+                )}
+              </div>
+            ))}
+          </div>
+        </AccordionTab>
+      </Accordion>
+    </div>
+  )
+}