add search; fix date one of tz error

kleinlennart · kleinlennart · commit a0ae34b10e27 · 2026-02-20T15:29:59.000-05:00
diff --git a/TODO.md b/TODO.md
@@ -4,3 +4,4 @@
 - find edge cases
 - styling
 - search
+- 
diff --git a/app/page.tsx b/app/page.tsx
@@ -1,7 +1,7 @@
 "use client";
 
 import { useSearchParams } from "next/navigation";
-import { Suspense, useEffect, useState } from "react";
+import { Suspense, useCallback, useDeferredValue, useEffect, useRef, useState } from "react";
 import type { DiffResult } from "../src/core";
 import { DiffViewer } from "../src/react";
 import type { UNDocumentMetadata } from "../src/un-fetcher";
@@ -25,6 +25,45 @@ function HomeContent() {
   const [loading, setLoading] = useState(false);
   const [error, setError] = useState<string | null>(null);
   const [copied, setCopied] = useState(false);
+  const [searchInput, setSearchInput] = useState("");
+  const [currentMatchIndex, setCurrentMatchIndex] = useState(0);
+  const [matchCount, setMatchCount] = useState(0);
+  const searchQuery = useDeferredValue(searchInput);
+  const diffContainerRef = useRef<HTMLDivElement>(null);
+
+  // Count matches and reset index whenever the deferred query changes
+  useEffect(() => {
+    const container = diffContainerRef.current;
+    if (!container) return;
+    // RAF ensures the DOM has been updated after the deferred re-render
+    const id = requestAnimationFrame(() => {
+      const marks = container.querySelectorAll<HTMLElement>(".search-highlight");
+      setMatchCount(marks.length);
+      setCurrentMatchIndex(marks.length > 0 ? 0 : -1);
+      if (marks.length > 0) {
+        marks[0].scrollIntoView({ behavior: "smooth", block: "center" });
+        marks[0].style.outline = "2px solid #009edb";
+      }
+    });
+    return () => cancelAnimationFrame(id);
+  }, [searchQuery]);
+
+  const navigateMatch = useCallback(
+    (dir: 1 | -1) => {
+      const container = diffContainerRef.current;
+      if (!container) return;
+      const marks =
+        container.querySelectorAll<HTMLElement>(".search-highlight");
+      if (marks.length === 0) return;
+      // Remove outline from previous
+      marks.forEach((m) => (m.style.outline = ""));
+      const next = (currentMatchIndex + dir + marks.length) % marks.length;
+      setCurrentMatchIndex(next);
+      marks[next].scrollIntoView({ behavior: "smooth", block: "center" });
+      marks[next].style.outline = "2px solid #009edb";
+    },
+    [currentMatchIndex],
+  );
 
   const handleShare = async () => {
     await navigator.clipboard.writeText(window.location.href);
@@ -44,6 +83,7 @@ function HomeContent() {
     setLoading(true);
     setError(null);
     setDiffData(null);
+    setSearchInput("");
 
     try {
       const response = await fetch("/api/diff", {
@@ -270,19 +310,131 @@ function HomeContent() {
         )}
 
         {hasQueryParams && diffData && (
-          <DiffViewer
-            data={diffData}
-            left={{
-              symbol: symbol1,
-              metadata: diffData.metadata?.left,
-              format: diffData.formats?.left,
-            }}
-            right={{
-              symbol: symbol2,
-              metadata: diffData.metadata?.right,
-              format: diffData.formats?.right,
-            }}
-          />
+          <>
+            {/* Sticky search bar */}
+            <div className="sticky top-4 z-10 -mx-3">
+              <div className="rounded-xl bg-white/95 shadow-md ring-1 ring-black/5 backdrop-blur-sm px-4 py-2.5">
+              <div className="flex items-center gap-2">
+                <div className="relative flex-1">
+                  <svg
+                    className="absolute top-1/2 left-3 h-4 w-4 -translate-y-1/2 text-gray-400 pointer-events-none"
+                    fill="none"
+                    viewBox="0 0 24 24"
+                    stroke="currentColor"
+                    strokeWidth={2}
+                  >
+                    <path
+                      strokeLinecap="round"
+                      strokeLinejoin="round"
+                      d="M21 21l-4.35-4.35M17 11A6 6 0 1 1 5 11a6 6 0 0 1 12 0z"
+                    />
+                  </svg>
+                  <input
+                    type="text"
+                    value={searchInput}
+                    onChange={(e) => setSearchInput(e.target.value)}
+                    onKeyDown={(e) => {
+                      if (e.key === "Enter")
+                        navigateMatch(e.shiftKey ? -1 : 1);
+                      if (e.key === "Escape") setSearchInput("");
+                    }}
+                    placeholder="Search in documents…"
+                    className="w-full rounded-lg border border-gray-200 bg-gray-50 py-1.5 pr-9 pl-9 text-sm transition-colors focus:border-un-blue focus:bg-white focus:ring-1 focus:ring-un-blue focus:outline-none"
+                  />
+                  {searchInput && (
+                    <button
+                      onClick={() => setSearchInput("")}
+                      className="absolute top-1/2 right-2.5 -translate-y-1/2 rounded text-gray-400 hover:text-gray-600"
+                    >
+                      <svg
+                        className="h-3.5 w-3.5"
+                        fill="none"
+                        viewBox="0 0 24 24"
+                        stroke="currentColor"
+                        strokeWidth={2.5}
+                      >
+                        <path
+                          strokeLinecap="round"
+                          strokeLinejoin="round"
+                          d="M6 18L18 6M6 6l12 12"
+                        />
+                      </svg>
+                    </button>
+                  )}
+                </div>
+
+                {searchQuery && (
+                  <>
+                    <span className="min-w-20 text-center text-xs tabular-nums text-gray-400">
+                      {matchCount === 0
+                        ? "No matches"
+                        : `${currentMatchIndex + 1} / ${matchCount}`}
+                    </span>
+                    <div className="flex items-center gap-0.5 rounded-lg border border-gray-200 p-0.5">
+                    <button
+                      onClick={() => navigateMatch(-1)}
+                      disabled={matchCount === 0}
+                      title="Previous match (Shift+Enter)"
+                      className="rounded-md p-1 text-gray-500 hover:bg-gray-100 disabled:cursor-not-allowed disabled:opacity-40"
+                    >
+                      <svg
+                        className="h-3.5 w-3.5"
+                        fill="none"
+                        viewBox="0 0 24 24"
+                        stroke="currentColor"
+                        strokeWidth={2.5}
+                      >
+                        <path
+                          strokeLinecap="round"
+                          strokeLinejoin="round"
+                          d="M5 15l7-7 7 7"
+                        />
+                      </svg>
+                    </button>
+                    <button
+                      onClick={() => navigateMatch(1)}
+                      disabled={matchCount === 0}
+                      title="Next match (Enter)"
+                      className="rounded-md p-1 text-gray-500 hover:bg-gray-100 disabled:cursor-not-allowed disabled:opacity-40"
+                    >
+                      <svg
+                        className="h-3.5 w-3.5"
+                        fill="none"
+                        viewBox="0 0 24 24"
+                        stroke="currentColor"
+                        strokeWidth={2.5}
+                      >
+                        <path
+                          strokeLinecap="round"
+                          strokeLinejoin="round"
+                          d="M19 9l-7 7-7-7"
+                        />
+                      </svg>
+                    </button>
+                    </div>
+                  </>
+                )}
+              </div>
+              </div>
+            </div>
+
+            <div ref={diffContainerRef}>
+              <DiffViewer
+                data={diffData}
+                searchQuery={searchQuery || undefined}
+                left={{
+                  symbol: symbol1,
+                  metadata: diffData.metadata?.left,
+                  format: diffData.formats?.left,
+                }}
+                right={{
+                  symbol: symbol2,
+                  metadata: diffData.metadata?.right,
+                  format: diffData.formats?.right,
+                }}
+              />
+            </div>
+          </>
         )}
 
         {hasQueryParams && loading && !diffData && (
diff --git a/src/react/Comparison.tsx b/src/react/Comparison.tsx
@@ -8,6 +8,7 @@ export interface ComparisonProps {
   item: DiffItemType;
   className?: string;
   gap?: string;
+  searchQuery?: string;
 }
 
 /**
@@ -18,6 +19,7 @@ export function Comparison({
   item,
   className = "",
   gap = "1rem",
+  searchQuery,
 }: ComparisonProps) {
   const isAdded = item.right && !item.left && !item.leftBest;
   const isRemoved = item.left && !item.right && !item.rightBest;
@@ -36,17 +38,19 @@ export function Comparison({
         <DiffItem
           content={isRemoved ? item.left : item.leftHighlighted}
           color={isRemoved ? "red" : undefined}
+          searchQuery={searchQuery}
         />
       ) : (
-        <DiffItem content={item.leftHighlighted} />
+        <DiffItem content={item.leftHighlighted} searchQuery={searchQuery} />
       )}
       {item.right ? (
         <DiffItem
           content={isAdded ? item.right : item.rightHighlighted}
           color={isAdded ? "lightgreen" : undefined}
+          searchQuery={searchQuery}
         />
       ) : (
-        <DiffItem content={item.rightHighlighted} />
+        <DiffItem content={item.rightHighlighted} searchQuery={searchQuery} />
       )}
     </div>
   );
diff --git a/src/react/DiffItem.tsx b/src/react/DiffItem.tsx
@@ -7,13 +7,14 @@ export interface DiffItemProps {
   content: string;
   color?: "red" | "lightgreen" | "yellow" | "blue";
   className?: string;
+  searchQuery?: string;
 }
 
 /**
  * Single diff item display component
  * Shows highlighted text with optional background color
  */
-export function DiffItem({ content, color, className = "" }: DiffItemProps) {
+export function DiffItem({ content, color, className = "", searchQuery }: DiffItemProps) {
   const getColorStyle = () => {
     if (!color)
       return content ? { backgroundColor: "var(--diff-item-bg, #fff)" } : {};
@@ -45,7 +46,7 @@ export function DiffItem({ content, color, className = "" }: DiffItemProps) {
         ...getColorStyle(),
       }}
     >
-      <div style={{ width: "100%" }}>{parseHighlightedText(content || "")}</div>
+      <div style={{ width: "100%" }}>{parseHighlightedText(content || "", searchQuery)}</div>
     </div>
   );
 }
diff --git a/src/react/DiffViewer.tsx b/src/react/DiffViewer.tsx
@@ -19,6 +19,7 @@ export interface DiffViewerProps {
     format?: "doc" | "pdf";
   };
   className?: string;
+  searchQuery?: string;
 }
 
 /**
@@ -29,6 +30,7 @@ export function DiffViewer({
   left,
   right,
   className = "",
+  searchQuery,
 }: DiffViewerProps) {
   return (
     <div
@@ -37,7 +39,7 @@ export function DiffViewer({
     >
       {/* Document Headers */}
       <div
-        style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: "1rem" }}
+        style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: "0.75rem" }}
       >
         <DocumentHeader
           symbol={left.symbol}
@@ -54,7 +56,7 @@ export function DiffViewer({
       {/* Diff items */}
       <div style={{ display: "flex", flexDirection: "column", gap: "0.5rem" }}>
         {data.items.map((item, index) => (
-          <Comparison key={index} item={item} />
+          <Comparison key={index} item={item} searchQuery={searchQuery} />
         ))}
       </div>
     </div>
diff --git a/src/react/DocumentHeader.tsx b/src/react/DocumentHeader.tsx
@@ -22,22 +22,56 @@ export function DocumentHeader({
   const pdfUrl = `https://documents.un.org/api/symbol/access?s=${encodeURIComponent(symbol)}&l=en&t=pdf`;
 
   return (
-    <div className={className} style={{ textAlign: "left" }}>
-      <h3 style={{ fontSize: "1rem", fontWeight: 600, margin: 0 }}>{symbol}</h3>
+    <div
+      className={className}
+      style={{
+        textAlign: "left",
+        background: "#fff",
+        borderRadius: "0.75rem",
+        padding: "1rem 1.25rem",
+        boxShadow: "0 1px 3px 0 rgb(0 0 0 / 0.07), 0 0 0 1px rgb(0 0 0 / 0.04)",
+      }}
+    >
+      <p
+        style={{
+          margin: 0,
+          fontSize: "0.65rem",
+          fontWeight: 600,
+          letterSpacing: "0.08em",
+          textTransform: "uppercase",
+          color: "#9ca3af",
+          marginBottom: "0.35rem",
+        }}
+      ></p>
+      <h3
+        style={{
+          fontSize: "1.125rem",
+          fontWeight: 700,
+          margin: 0,
+          letterSpacing: "-0.01em",
+          color: "#111827",
+        }}
+      >
+        {symbol}
+      </h3>
 
       {metadata?.date && (
         <p
           style={{
-            marginTop: "0.25rem",
-            fontSize: "0.875rem",
-            color: "#4b5563",
+            marginTop: "0.3rem",
+            fontSize: "0.8125rem",
+            color: "#6b7280",
           }}
         >
-          {new Date(metadata.date).toLocaleDateString("en-US", {
-            year: "numeric",
-            month: "long",
-            day: "numeric",
-          })}
+          {(() => {
+            // Parse YYYY-MM-DD parts directly to avoid UTC→local timezone shift
+            const [y, m, d] = metadata.date!.split("-").map(Number);
+            return new Date(y, m - 1, d).toLocaleDateString("en-US", {
+              year: "numeric",
+              month: "long",
+              day: "numeric",
+            });
+          })()}
         </p>
       )}
 
@@ -46,10 +80,13 @@ export function DocumentHeader({
         target="_blank"
         rel="noopener noreferrer"
         style={{
-          display: "inline-block",
-          marginTop: "0.25rem",
-          fontSize: "0.875rem",
-          color: "var(--color-un-blue)",
+          display: "inline-flex",
+          alignItems: "center",
+          gap: "0.25rem",
+          marginTop: "0.6rem",
+          fontSize: "0.8125rem",
+          fontWeight: 500,
+          color: "var(--color-un-blue, #009edb)",
           textDecoration: "none",
         }}
         onMouseEnter={(e) =>
diff --git a/src/react/parse-text.tsx b/src/react/parse-text.tsx

-Original file line number
+Diff line change
 - find edge cases
 - styling
 - search
 +-