refactor: add showDelays functionality to EventOptions and EventTable components

Author: Miodec

src/App.tsx

@@ -1,4 +1,4 @@
-import { useEffect, useRef } from "react";
+import { useEffect, useRef, useState } from "react";
 import { useKeyboardEvents } from "./hooks/useKeyboardEvents";
 import { TextareaInput } from "./components/TextareaInput";
 import { EventOptions } from "./components/EventOptions";
@@ -7,6 +7,7 @@ import { EventTable } from "./components/EventTable";
 
 function App() {
   const textareaRef = useRef<HTMLTextAreaElement | null>(null);
+  const [showDelays, setShowDelays] = useState(true);
   const {
     events,
     allEvents,
@@ -66,13 +67,15 @@ function App() {
           eventCount={filteredEventCount}
           totalEvents={totalEvents}
           events={allEvents}
+          showDelays={showDelays}
+          onShowDelaysChange={setShowDelays}
         />
 
         {/* Timeline */}
         <Timeline events={events} />
 
         {/* Event Table */}
-        <EventTable events={events} filters={filters} />
+        <EventTable events={events} filters={filters} showDelays={showDelays} />
       </div>
     </div>
   );

src/components/EventOptions.tsx

@@ -7,6 +7,8 @@ interface EventOptionsProps {
   eventCount: number;
   totalEvents: number;
   events: EventData[];
+  showDelays: boolean;
+  onShowDelaysChange: (showDelays: boolean) => void;
 }
 
 export function EventOptions({
@@ -15,6 +17,8 @@ export function EventOptions({
   eventCount,
   totalEvents,
   events,
+  showDelays,
+  onShowDelaysChange,
 }: EventOptionsProps) {
   // Calculate event counts by type
   const eventCounts = events.reduce((counts, event) => {
@@ -93,6 +97,36 @@ export function EventOptions({
           >
             Hide All
           </button>
+          <label className="flex items-center cursor-pointer text-xs text-text">
+            <input
+              type="checkbox"
+              checked={showDelays}
+              onChange={(e) => onShowDelaysChange(e.target.checked)}
+              className="sr-only"
+            />
+            <div
+              className={`w-4 h-4 rounded border-2 flex items-center justify-center transition-all duration-200 mr-2 ${
+                showDelays
+                  ? "border-main bg-main shadow-sm"
+                  : "border-sub hover:border-main/70 bg-bg"
+              }`}
+            >
+              {showDelays && (
+                <svg
+                  className="w-2.5 h-2.5 text-bg"
+                  fill="currentColor"
+                  viewBox="0 0 20 20"
+                >
+                  <path
+                    fillRule="evenodd"
+                    d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z"
+                    clipRule="evenodd"
+                  />
+                </svg>
+              )}
+            </div>
+            Show Delays
+          </label>
         </div>
       </div>
 

src/components/EventTable.tsx

@@ -11,11 +11,12 @@ import { addDelayRowsToEvents } from "../utils/delayRows";
 interface EventTableProps {
   events: EventData[];
   filters: EventFilters;
+  showDelays: boolean;
 }
 
-export function EventTable({ events, filters }: EventTableProps) {
+export function EventTable({ events, filters, showDelays }: EventTableProps) {
   const visibleColumns = getVisibleColumns(filters);
-  const eventsWithDelays = addDelayRowsToEvents(events);
+  const eventsWithDelays = showDelays ? addDelayRowsToEvents(events) : events;
 
   if (events.length === 0) {
     return (
@@ -59,7 +60,7 @@ export function EventTable({ events, filters }: EventTableProps) {
           <tbody className="divide-y divide-sub/10">
             {eventsWithDelays.map((event) => {
               // Handle delay rows
-              if ("isDelayRow" in event) {
+              if (showDelays && "isDelayRow" in event) {
                 return (
                   <tr
                     key={event.id}
@@ -116,7 +117,7 @@ export function EventTable({ events, filters }: EventTableProps) {
         <div className="flex items-center justify-between text-xs text-sub">
           <span>
             Showing {events.length} events
-            {eventsWithDelays.filter((e) => "isDelayRow" in e).length > 0 &&
+            {showDelays && eventsWithDelays.filter((e) => "isDelayRow" in e).length > 0 &&
               ` with ${
                 eventsWithDelays.filter((e) => "isDelayRow" in e).length
               } delay rows`}