selfhostyourtech/reflector
2
0
Fork 0
mirror of https://github.com/Monadical-SAS/reflector.git synced 2026-02-04 18:06:48 +00:00
Code Issues Packages Projects Releases Wiki Activity

transcript gutter

Browse Source
This commit is contained in:
Igor Loskutov
2026-01-16 12:28:38 -05:00
parent 13a3ec6148
commit 95e58b943f
2 changed files with 81 additions and 71 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -6,6 +6,7 @@ import { formatTime } from "../../../../lib/time";
import { getTopicColor } from "../../../../lib/topicColors"; import { getTopicColor } from "../../../../lib/topicColors";
import { TranscriptStatus } from "../../../../lib/transcript"; import { TranscriptStatus } from "../../../../lib/transcript";
import { featureEnabled } from "../../../../lib/features"; import { featureEnabled } from "../../../../lib/features";
import { TOPICS_SCROLL_DIV_ID } from "./constants";
type TopicListProps = { type TopicListProps = {
topics: Topic[]; topics: Topic[];
@@ -50,13 +51,13 @@ export function TopicList({
}; };
const scrollToBottom = () => { const scrollToBottom = () => {
const topicsDiv = document.getElementById("topics-scroll-div"); const topicsDiv = document.getElementById(TOPICS_SCROLL_DIV_ID);
if (topicsDiv) topicsDiv.scrollTop = topicsDiv.scrollHeight; if (topicsDiv) topicsDiv.scrollTop = topicsDiv.scrollHeight;
}; };
useEffect(() => { useEffect(() => {
if (autoscroll) { if (autoscroll) {
const topicsDiv = document.getElementById("topics-scroll-div"); const topicsDiv = document.getElementById(TOPICS_SCROLL_DIV_ID);
topicsDiv && toggleScroll(topicsDiv); topicsDiv && toggleScroll(topicsDiv);
} }
}, [activeTopic, autoscroll]); }, [activeTopic, autoscroll]);
@@ -110,7 +111,7 @@ export function TopicList({
)} )}
<Box <Box
id="topics-scroll-div" id={TOPICS_SCROLL_DIV_ID}
overflowY="auto" overflowY="auto"
h="full" h="full"
onScroll={handleScroll} onScroll={handleScroll}

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

@@ -200,7 +200,7 @@ export default function TranscriptDetails(details: TranscriptDetails) {
<> <>
<Grid <Grid
templateColumns="1fr" templateColumns="1fr"
templateRows="auto minmax(0, 1fr)" templateRows="auto auto"
gap={4} gap={4}
mt={4} mt={4}
mb={4} mb={4}
@@ -229,17 +229,22 @@ export default function TranscriptDetails(details: TranscriptDetails) {
)} )}
</> </>
)} )}
<Flex <Grid
direction="column" templateColumns={{ base: "minmax(0, 1fr)", md: "repeat(2, 1fr)" }}
templateRows={{
base: "auto auto auto",
md: "auto auto",
}}
gap={4} gap={4}
gridRowGap={2}
padding={4} padding={4}
paddingBottom={0}
background="gray.bg" background="gray.bg"
border="2px solid" border={"2px solid"}
borderColor="gray.bg" borderColor={"gray.bg"}
borderRadius={8} borderRadius={8}
> >
{/* Title */} {/* Title */}
<GridItem colSpan={{ base: 1, md: 2 }}>
<Flex direction="column" gap={0}> <Flex direction="column" gap={0}>
<Flex alignItems="center" gap={2}> <Flex alignItems="center" gap={2}>
<TranscriptTitle <TranscriptTitle
@@ -260,8 +265,10 @@ export default function TranscriptDetails(details: TranscriptDetails) {
</Text> </Text>
)} )}
</Flex> </Flex>
</GridItem>
{/* Topics List (top section - fixed height, scrollable) */} {/* Left column: Topics List */}
<GridItem display="flex" flexDirection="column" gap={4} h="100%">
<TopicList <TopicList
topics={topics.topics || []} topics={topics.topics || []}
useActiveTopic={useActiveTopic} useActiveTopic={useActiveTopic}
@@ -272,11 +279,12 @@ export default function TranscriptDetails(details: TranscriptDetails) {
onTopicClick={handleTopicClick} onTopicClick={handleTopicClick}
/> />
{/* Transcript with colored gutter (bottom section - scrollable container) */} {/* Transcript with colored gutter (scrollable) */}
{topics.topics && topics.topics.length > 0 && ( {topics.topics && topics.topics.length > 0 && (
<Box <Box
overflowY="auto" overflowY="auto"
maxH="600px" flex={1}
minH="0"
pr={2} pr={2}
css={{ css={{
"&::-webkit-scrollbar": { "&::-webkit-scrollbar": {
@@ -301,8 +309,9 @@ export default function TranscriptDetails(details: TranscriptDetails) {
/> />
</Box> </Box>
)} )}
</GridItem>
{/* Final Summary (at bottom) */} {/* Right column: Final Summary */}
{transcript.data && topics.topics ? ( {transcript.data && topics.topics ? (
<FinalSummary <FinalSummary
transcript={transcript.data} transcript={transcript.data}
@@ -313,7 +322,7 @@ export default function TranscriptDetails(details: TranscriptDetails) {
finalSummaryRef={setFinalSummaryElement} finalSummaryRef={setFinalSummaryElement}
/> />
) : ( ) : (
<Flex justify="center" alignItems="center" h="200px"> <Flex justify="center" alignItems="center" h="100%">
<Flex direction="column" h="full" justify="center" align="center"> <Flex direction="column" h="full" justify="center" align="center">
{transcript?.data?.status == "processing" ? ( {transcript?.data?.status == "processing" ? (
<Text>Loading Transcript</Text> <Text>Loading Transcript</Text>
@@ -326,7 +335,7 @@ export default function TranscriptDetails(details: TranscriptDetails) {
</Flex> </Flex>
</Flex> </Flex>
)} )}
</Flex> </Grid>
</Grid> </Grid>
</> </>
); );