transcription UI

www/app/(app)/transcripts/[transcriptId]/_components/TopicList.tsx

@@ -1,11 +1,10 @@
 import React, { useState, useEffect } from "react";
 import ScrollToBottom from "../../scrollToBottom";
 import { Topic } from "../../webSocketTypes";
-import useParticipants from "../../useParticipants";
-import { Box, Flex, Text, Accordion } from "@chakra-ui/react";
-import { TopicItem } from "./TopicItem";
+import { Box, Flex, Text } from "@chakra-ui/react";
+import { formatTime } from "../../../../lib/time";
+import { getTopicColor } from "../../../../lib/topicColors";
 import { TranscriptStatus } from "../../../../lib/transcript";
-
 import { featureEnabled } from "../../../../lib/features";
 
 type TopicListProps = {
@@ -18,6 +17,7 @@ type TopicListProps = {
   transcriptId: string;
   status: TranscriptStatus | null;
   currentTranscriptText: any;
+  onTopicClick?: (topicId: string) => void;
 };
 
 export function TopicList({
@@ -27,30 +27,13 @@ export function TopicList({
   transcriptId,
   status,
   currentTranscriptText,
+  onTopicClick,
 }: TopicListProps) {
   const [activeTopic, setActiveTopic] = useActiveTopic;
+  const [hoveredTopicId, setHoveredTopicId] = useState<string | null>(null);
   const [autoscrollEnabled, setAutoscrollEnabled] = useState<boolean>(true);
-  const participants = useParticipants(transcriptId);
 
-  const scrollToTopic = () => {
-    const topicDiv = document.getElementById(`topic-${activeTopic?.id}`);
-
-    setTimeout(() => {
-      topicDiv?.scrollIntoView({
-        behavior: "smooth",
-        block: "start",
-        inline: "nearest",
-      });
-    }, 200);
-  };
-
-  useEffect(() => {
-    if (activeTopic && autoscroll) scrollToTopic();
-  }, [activeTopic, autoscroll]);
-
-  // scroll top is not rounded, heights are, so exact match won't work.
-  // https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollHeight#determine_if_an_element_has_been_totally_scrolled
-  const toggleScroll = (element) => {
+  const toggleScroll = (element: HTMLElement) => {
     const bottom =
       Math.abs(
         element.scrollHeight - element.clientHeight - element.scrollTop,
@@ -61,14 +44,19 @@ export function TopicList({
       setAutoscrollEnabled(true);
     }
   };
-  const handleScroll = (e) => {
-    toggleScroll(e.target);
+
+  const handleScroll = (e: React.UIEvent<HTMLDivElement>) => {
+    toggleScroll(e.target as HTMLElement);
+  };
+
+  const scrollToBottom = () => {
+    const topicsDiv = document.getElementById("topics-scroll-div");
+    if (topicsDiv) topicsDiv.scrollTop = topicsDiv.scrollHeight;
   };
 
   useEffect(() => {
     if (autoscroll) {
-      const topicsDiv = document.getElementById("scroll-div");
-
+      const topicsDiv = document.getElementById("topics-scroll-div");
       topicsDiv && toggleScroll(topicsDiv);
     }
   }, [activeTopic, autoscroll]);
@@ -77,37 +65,41 @@ export function TopicList({
     if (autoscroll && autoscrollEnabled) scrollToBottom();
   }, [topics.length, currentTranscriptText]);
 
-  const scrollToBottom = () => {
-    const topicsDiv = document.getElementById("scroll-div");
-
-    if (topicsDiv) topicsDiv.scrollTop = topicsDiv.scrollHeight;
-  };
-
-  const getSpeakerName = (speakerNumber: number) => {
-    if (!participants.response) return;
-    return (
-      participants.response.find(
-        (participant) => participant.speaker == speakerNumber,
-      )?.name || `Speaker ${speakerNumber}`
-    );
-  };
-
-  const requireLogin = featureEnabled("requireLogin");
-
   useEffect(() => {
     if (autoscroll) {
       setActiveTopic(topics[topics.length - 1]);
     }
   }, [topics, autoscroll]);
 
+  const handleTopicClick = (topic: Topic) => {
+    setActiveTopic(topic);
+    if (onTopicClick) {
+      onTopicClick(topic.id);
+    }
+  };
+
+  const handleTopicMouseEnter = (topic: Topic) => {
+    setHoveredTopicId(topic.id);
+    // If already active, toggle off when mousing over
+    if (activeTopic?.id === topic.id) {
+      setActiveTopic(null);
+    } else {
+      setActiveTopic(topic);
+    }
+  };
+
+  const handleTopicMouseLeave = () => {
+    setHoveredTopicId(null);
+  };
+
+  const requireLogin = featureEnabled("requireLogin");
+
   return (
     <Flex
-      position={"relative"}
-      w={"100%"}
-      h={"95%"}
-      flexDirection={"column"}
-      justify={"center"}
-      align={"center"}
+      position="relative"
+      w="full"
+      h="200px"
+      flexDirection="column"
       flexShrink={0}
     >
       {autoscroll && (
@@ -118,45 +110,71 @@ export function TopicList({
       )}
 
       <Box
-        id="scroll-div"
-        overflowY={"auto"}
-        h={"100%"}
+        id="topics-scroll-div"
+        overflowY="auto"
+        h="full"
         onScroll={handleScroll}
         width="full"
       >
         {topics.length > 0 && (
-          <Accordion.Root
-            multiple={false}
-            collapsible={true}
-            value={activeTopic ? [activeTopic.id] : []}
-            onValueChange={(details) => {
-              const selectedTopicId = details.value[0];
-              const selectedTopic = selectedTopicId
-                ? topics.find((t) => t.id === selectedTopicId)
-                : null;
-              setActiveTopic(selectedTopic || null);
-            }}
-          >
-            {topics.map((topic) => (
-              <TopicItem
-                key={topic.id}
-                topic={topic}
-                isActive={activeTopic?.id === topic.id}
-                getSpeakerName={getSpeakerName}
-              />
-            ))}
-          </Accordion.Root>
+          <Flex direction="column" gap={1} p={2}>
+            {topics.map((topic, index) => {
+              const color = getTopicColor(index);
+              const isActive = activeTopic?.id === topic.id;
+              const isHovered = hoveredTopicId === topic.id;
+
+              return (
+                <Flex
+                  key={topic.id}
+                  id={`topic-${topic.id}`}
+                  gap={2}
+                  align="center"
+                  py={1}
+                  px={2}
+                  cursor="pointer"
+                  bg={isActive || isHovered ? "gray.100" : "transparent"}
+                  _hover={{ bg: "gray.50" }}
+                  onClick={() => handleTopicClick(topic)}
+                  onMouseEnter={() => handleTopicMouseEnter(topic)}
+                  onMouseLeave={handleTopicMouseLeave}
+                >
+                  {/* Color indicator */}
+                  <Box
+                    w="12px"
+                    h="12px"
+                    borderRadius="full"
+                    bg={color}
+                    flexShrink={0}
+                  />
+
+                  {/* Topic title */}
+                  <Text
+                    flex={1}
+                    fontSize="sm"
+                    fontWeight={isActive ? "semibold" : "normal"}
+                  >
+                    {topic.title}
+                  </Text>
+
+                  {/* Timestamp */}
+                  <Text as="span" color="gray.500" fontSize="xs" flexShrink={0}>
+                    {formatTime(topic.timestamp)}
+                  </Text>
+                </Flex>
+              );
+            })}
+          </Flex>
         )}
 
         {status == "recording" && (
-          <Box textAlign={"center"}>
+          <Box textAlign="center">
             <Text>{currentTranscriptText}</Text>
           </Box>
         )}
         {(status == "recording" || status == "idle") &&
           currentTranscriptText.length == 0 &&
           topics.length == 0 && (
-            <Box textAlign={"center"} color="gray">
+            <Box textAlign="center" color="gray">
               <Text>
                 Full discussion transcript will appear here after you start
                 recording.
@@ -167,7 +185,7 @@ export function TopicList({
             </Box>
           )}
         {status == "processing" && (
-          <Box textAlign={"center"} color="gray">
+          <Box textAlign="center" color="gray">
             <Text>We are processing the recording, please wait.</Text>
             {!requireLogin && (
               <span>
@@ -177,12 +195,12 @@ export function TopicList({
           </Box>
         )}
         {status == "ended" && topics.length == 0 && (
-          <Box textAlign={"center"} color="gray">
+          <Box textAlign="center" color="gray">
             <Text>Recording has ended without topics being found.</Text>
           </Box>
         )}
         {status == "error" && (
-          <Box textAlign={"center"} color="gray">
+          <Box textAlign="center" color="gray">
             <Text>There was an error processing your recording</Text>
           </Box>
         )}

www/app/(app)/transcripts/[transcriptId]/page.tsx

@@ -3,7 +3,9 @@ import Modal from "../modal";
 import useTopics from "../useTopics";
 import useWaveform from "../useWaveform";
 import useMp3 from "../useMp3";
+import useParticipants from "../useParticipants";
 import { TopicList } from "./_components/TopicList";
+import { TranscriptWithGutter } from "./_components/TranscriptWithGutter";
 import { Topic } from "../webSocketTypes";
 import React, { useEffect, useState, use } from "react";
 import FinalSummary from "./finalSummary";
@@ -45,14 +47,91 @@ export default function TranscriptDetails(details: TranscriptDetails) {
 
   const mp3 = useMp3(transcriptId, waiting);
   const topics = useTopics(transcriptId);
+  const participants = useParticipants(transcriptId);
   const waveform = useWaveform(
     transcriptId,
     waiting || mp3.audioDeleted === true,
   );
   const useActiveTopic = useState<Topic | null>(null);
+  const [activeTopic, setActiveTopic] = useActiveTopic;
   const [finalSummaryElement, setFinalSummaryElement] =
     useState<HTMLDivElement | null>(null);
 
+  // IntersectionObserver for active topic detection based on scroll position
+  useEffect(() => {
+    if (!topics.topics || topics.topics.length === 0) return;
+
+    const observer = new IntersectionObserver(
+      (entries) => {
+        // Find the most visible segment
+        let mostVisibleEntry: IntersectionObserverEntry | null = null;
+        let maxRatio = 0;
+
+        entries.forEach((entry) => {
+          if (entry.isIntersecting && entry.intersectionRatio > maxRatio) {
+            maxRatio = entry.intersectionRatio;
+            mostVisibleEntry = entry;
+          }
+        });
+
+        if (mostVisibleEntry) {
+          // Extract topicId from segment id (format: "segment-{topicId}-{idx}")
+          const segmentId = mostVisibleEntry.target.id;
+          const match = segmentId.match(/^segment-([^-]+)-/);
+          if (match) {
+            const topicId = match[1];
+            const topic = topics.topics?.find((t) => t.id === topicId);
+            if (topic && activeTopic?.id !== topic.id) {
+              setActiveTopic(topic);
+            }
+          }
+        }
+      },
+      {
+        threshold: [0, 0.25, 0.5, 0.75, 1],
+        rootMargin: "-20% 0px -20% 0px",
+      },
+    );
+
+    // Observe all segment elements
+    const segments = document.querySelectorAll('[id^="segment-"]');
+    segments.forEach((segment) => observer.observe(segment));
+
+    return () => observer.disconnect();
+  }, [topics.topics, activeTopic?.id, setActiveTopic]);
+
+  // Scroll handlers for bidirectional navigation
+  const handleTopicClick = (topicId: string) => {
+    // Scroll to first segment of this topic in transcript
+    const firstSegment = document.querySelector(`[id^="segment-${topicId}-"]`);
+    if (firstSegment) {
+      firstSegment.scrollIntoView({
+        behavior: "smooth",
+        block: "center",
+      });
+    }
+  };
+
+  const handleGutterClick = (topicId: string) => {
+    // Scroll to topic in list
+    const topicChip = document.getElementById(`topic-${topicId}`);
+    if (topicChip) {
+      topicChip.scrollIntoView({
+        behavior: "smooth",
+        block: "center",
+      });
+    }
+  };
+
+  const getSpeakerName = (speakerNumber: number) => {
+    if (!participants.response) return `Speaker ${speakerNumber}`;
+    return (
+      participants.response.find(
+        (participant) => participant.speaker == speakerNumber,
+      )?.name || `Speaker ${speakerNumber}`
+    );
+  };
+
   useEffect(() => {
     if (!waiting || !transcript.data) return;
 
@@ -150,43 +229,39 @@ export default function TranscriptDetails(details: TranscriptDetails) {
             )}
           </>
         )}
-        <Grid
-          templateColumns={{ base: "minmax(0, 1fr)", md: "repeat(2, 1fr)" }}
-          templateRows={{
-            base: "auto minmax(0, 1fr) minmax(0, 1fr)",
-            md: "auto minmax(0, 1fr)",
-          }}
+        <Flex
+          direction="column"
           gap={4}
-          gridRowGap={2}
           padding={4}
           paddingBottom={0}
           background="gray.bg"
-          border={"2px solid"}
-          borderColor={"gray.bg"}
+          border="2px solid"
+          borderColor="gray.bg"
           borderRadius={8}
         >
-          <GridItem colSpan={{ base: 1, md: 2 }}>
-            <Flex direction="column" gap={0}>
-              <Flex alignItems="center" gap={2}>
-                <TranscriptTitle
-                  title={transcript.data?.title || "Unnamed Transcript"}
-                  transcriptId={transcriptId}
-                  onUpdate={() => {
-                    transcript.refetch().then(() => {});
-                  }}
-                  transcript={transcript.data || null}
-                  topics={topics.topics}
-                  finalSummaryElement={finalSummaryElement}
-                />
-              </Flex>
-              {mp3.audioDeleted && (
-                <Text fontSize="xs" color="gray.600" fontStyle="italic">
-                  No audio is available because one or more participants didn't
-                  consent to keep the audio
-                </Text>
-              )}
+          {/* Title */}
+          <Flex direction="column" gap={0}>
+            <Flex alignItems="center" gap={2}>
+              <TranscriptTitle
+                title={transcript.data?.title || "Unnamed Transcript"}
+                transcriptId={transcriptId}
+                onUpdate={() => {
+                  transcript.refetch().then(() => {});
+                }}
+                transcript={transcript.data || null}
+                topics={topics.topics}
+                finalSummaryElement={finalSummaryElement}
+              />
             </Flex>
-          </GridItem>
+            {mp3.audioDeleted && (
+              <Text fontSize="xs" color="gray.600" fontStyle="italic">
+                No audio is available because one or more participants didn't
+                consent to keep the audio
+              </Text>
+            )}
+          </Flex>
+
+          {/* Topics List (top section - fixed height, scrollable) */}
           <TopicList
             topics={topics.topics || []}
             useActiveTopic={useActiveTopic}
@@ -194,21 +269,31 @@ export default function TranscriptDetails(details: TranscriptDetails) {
             transcriptId={transcriptId}
             status={transcript.data?.status || null}
             currentTranscriptText=""
+            onTopicClick={handleTopicClick}
           />
+
+          {/* Transcript with colored gutter (bottom section - normal document flow) */}
+          {topics.topics && topics.topics.length > 0 && (
+            <TranscriptWithGutter
+              topics={topics.topics}
+              getSpeakerName={getSpeakerName}
+              onGutterClick={handleGutterClick}
+            />
+          )}
+
+          {/* Final Summary (at bottom) */}
           {transcript.data && topics.topics ? (
-            <>
-              <FinalSummary
-                transcript={transcript.data}
-                topics={topics.topics}
-                onUpdate={() => {
-                  transcript.refetch().then(() => {});
-                }}
-                finalSummaryRef={setFinalSummaryElement}
-              />
-            </>
+            <FinalSummary
+              transcript={transcript.data}
+              topics={topics.topics}
+              onUpdate={() => {
+                transcript.refetch().then(() => {});
+              }}
+              finalSummaryRef={setFinalSummaryElement}
+            />
           ) : (
-            <Flex justify={"center"} alignItems={"center"} h={"100%"}>
-              <div className="flex flex-col h-full justify-center content-center">
+            <Flex justify="center" alignItems="center" h="200px">
+              <Flex direction="column" h="full" justify="center" align="center">
                 {transcript?.data?.status == "processing" ? (
                   <Text>Loading Transcript</Text>
                 ) : (
@@ -217,10 +302,10 @@ export default function TranscriptDetails(details: TranscriptDetails) {
                     back later
                   </Text>
                 )}
-              </div>
+              </Flex>
             </Flex>
           )}
-        </Grid>
+        </Flex>
       </Grid>
     </>
   );