From 2c3f782e5e159f3b515bc29c8b8aa9efd227cbe1 Mon Sep 17 00:00:00 2001 From: mertbagt Date: Wed, 21 Jan 2026 07:37:55 -0500 Subject: [PATCH 01/11] basic framework to add timestamps to url --- components/hearing/HearingDetails.tsx | 55 +++++++++++++++++++++++++++ 1 file changed, 55 insertions(+) diff --git a/components/hearing/HearingDetails.tsx b/components/hearing/HearingDetails.tsx index f79bdde5c..21dc1b82d 100644 --- a/components/hearing/HearingDetails.tsx +++ b/components/hearing/HearingDetails.tsx @@ -15,6 +15,8 @@ import { HearingSidebar } from "./HearingSidebar" import { HearingData, Paragraph, fetchTranscriptionData } from "./hearing" import { Transcriptions } from "./Transcriptions" +import { useRouter } from "next/router" + const LegalContainer = styled(Container)` background-color: white; ` @@ -63,6 +65,59 @@ export const HearingDetails = ({ videoRef.current ? (videoRef.current.currentTime = value) : null } + const router = useRouter() + + console.log("vref current: ", videoRef.current) + + const updateUrlWithTimestamp = () => { + if (videoRef.current) { + const timeInSeconds = Math.floor(videoRef.current.currentTime) + console.log("TIS: ", timeInSeconds) + router.push(`${hearingId}?t=${timeInSeconds}`, undefined, { + shallow: true + }) + } + } + + useEffect(() => { + videoRef.current + ? videoRef.current.addEventListener("pause", updateUrlWithTimestamp) + : null + + return () => { + videoRef.current + ? videoRef.current.removeEventListener("pause", updateUrlWithTimestamp) + : null + } + }, [videoRef.current]) + + useEffect(() => { + const startTime = router.query.t + + const convertToString = (value: string | string[] | undefined): string => { + if (Array.isArray(value)) { + return value.join(", ") + } + return value ?? "" + } + + const resultString: string = convertToString(startTime) + + console.log("result string", parseInt(resultString, 10)) + + if (startTime && videoRef.current) { + // if (startTime && videoRef.current) { + console.log("test 3") + setCurTimeVideo(parseInt(resultString, 10)) + // Wait for video metadata to load before seeking + videoRef.current.addEventListener("loadedmetadata", () => { + // if (videoRef.current !== null) + // videoRef.current.currentTime = parseInt(resultString, 10) + // console.log("test 2", videoRef.current.currentTime) + }) + } + }, [router.query.t, videoRef.current]) + useEffect(() => { ;(async function () { if (!videoTranscriptionId || transcriptData !== null) return From 9905da18231a322d1bf10177d7c4dd1e2be822a1 Mon Sep 17 00:00:00 2001 From: mertbagt Date: Wed, 21 Jan 2026 07:47:46 -0500 Subject: [PATCH 02/11] cleanup --- components/hearing/HearingDetails.tsx | 26 +++++--------------------- pages/hearing/[hearingId].tsx | 1 - 2 files changed, 5 insertions(+), 22 deletions(-) diff --git a/components/hearing/HearingDetails.tsx b/components/hearing/HearingDetails.tsx index 21dc1b82d..c51ed5850 100644 --- a/components/hearing/HearingDetails.tsx +++ b/components/hearing/HearingDetails.tsx @@ -1,9 +1,8 @@ -import { doc, getDoc } from "firebase/firestore" +import { useRouter } from "next/router" import { Trans, useTranslation } from "next-i18next" -import { useCallback, useEffect, useRef, useState } from "react" +import { useEffect, useRef, useState } from "react" import styled from "styled-components" import { Col, Container, Image, Row } from "../bootstrap" -import { firestore } from "../firebase" import * as links from "../links" import { committeeURL, External } from "../links" import { @@ -15,8 +14,6 @@ import { HearingSidebar } from "./HearingSidebar" import { HearingData, Paragraph, fetchTranscriptionData } from "./hearing" import { Transcriptions } from "./Transcriptions" -import { useRouter } from "next/router" - const LegalContainer = styled(Container)` background-color: white; ` @@ -53,9 +50,11 @@ export const HearingDetails = ({ hearingData: HearingData }) => { const { t } = useTranslation(["common", "hearing"]) - const [transcriptData, setTranscriptData] = useState(null) + const router = useRouter() + const [transcriptData, setTranscriptData] = useState(null) const [videoLoaded, setVideoLoaded] = useState(false) + const handleVideoLoad = () => { setVideoLoaded(true) } @@ -65,14 +64,9 @@ export const HearingDetails = ({ videoRef.current ? (videoRef.current.currentTime = value) : null } - const router = useRouter() - - console.log("vref current: ", videoRef.current) - const updateUrlWithTimestamp = () => { if (videoRef.current) { const timeInSeconds = Math.floor(videoRef.current.currentTime) - console.log("TIS: ", timeInSeconds) router.push(`${hearingId}?t=${timeInSeconds}`, undefined, { shallow: true }) @@ -103,18 +97,8 @@ export const HearingDetails = ({ const resultString: string = convertToString(startTime) - console.log("result string", parseInt(resultString, 10)) - if (startTime && videoRef.current) { - // if (startTime && videoRef.current) { - console.log("test 3") setCurTimeVideo(parseInt(resultString, 10)) - // Wait for video metadata to load before seeking - videoRef.current.addEventListener("loadedmetadata", () => { - // if (videoRef.current !== null) - // videoRef.current.currentTime = parseInt(resultString, 10) - // console.log("test 2", videoRef.current.currentTime) - }) } }, [router.query.t, videoRef.current]) diff --git a/pages/hearing/[hearingId].tsx b/pages/hearing/[hearingId].tsx index 73a0ad6b7..84263d4e1 100644 --- a/pages/hearing/[hearingId].tsx +++ b/pages/hearing/[hearingId].tsx @@ -1,5 +1,4 @@ import { GetServerSideProps } from "next" -import { useRouter } from "next/router" import { serverSideTranslations } from "next-i18next/serverSideTranslations" import { z } from "zod" import { flags } from "components/featureFlags" From 1cc80cd1aedec28c70a560fa541a6a57c18e8559 Mon Sep 17 00:00:00 2001 From: mertbagt Date: Mon, 26 Jan 2026 15:17:51 -0500 Subject: [PATCH 03/11] copy to clipboard url button --- components/hearing/HearingDetails.tsx | 1 + components/hearing/Transcriptions.tsx | 27 +++++++++++++++++++++++++-- components/hearing/hearing.ts | 7 +++++++ 3 files changed, 33 insertions(+), 2 deletions(-) diff --git a/components/hearing/HearingDetails.tsx b/components/hearing/HearingDetails.tsx index c51ed5850..e26bec78a 100644 --- a/components/hearing/HearingDetails.tsx +++ b/components/hearing/HearingDetails.tsx @@ -208,6 +208,7 @@ export const HearingDetails = ({ {transcriptData ? ( { @@ -249,12 +257,14 @@ export const Transcriptions = ({ const TranscriptItem = forwardRef(function TranscriptItem( { element, + hearingId, highlightedId, index, setCurTimeVideo, searchTerm }: { element: Paragraph + hearingId: string highlightedId: number index: number setCurTimeVideo: any @@ -316,6 +326,19 @@ const TranscriptItem = forwardRef(function TranscriptItem( {highlightText(element.text, searchTerm)} + + + + + ) }) diff --git a/components/hearing/hearing.ts b/components/hearing/hearing.ts index da809c6ee..4a2bf98f0 100644 --- a/components/hearing/hearing.ts +++ b/components/hearing/hearing.ts @@ -97,3 +97,10 @@ export function formatMilliseconds(ms: number): string { return `${formattedMinutes}:${formattedSeconds}` } } + +export function formatTotalSeconds(ms: number): string { + const totalSeconds = Math.floor(ms / 1000) + const formattedSeconds = String(totalSeconds) + + return `${formattedSeconds}` +} From 248ef5d8171519c9a8e448759182ba33d9bf69f1 Mon Sep 17 00:00:00 2001 From: mertbagt Date: Mon, 26 Jan 2026 17:37:01 -0500 Subject: [PATCH 04/11] handle page load --- components/hearing/Transcriptions.tsx | 36 ++++++++++++++++++++++++--- 1 file changed, 33 insertions(+), 3 deletions(-) diff --git a/components/hearing/Transcriptions.tsx b/components/hearing/Transcriptions.tsx index 1e1285340..e6db6787e 100644 --- a/components/hearing/Transcriptions.tsx +++ b/components/hearing/Transcriptions.tsx @@ -11,6 +11,8 @@ import { Col, Container, Row } from "../bootstrap" import { Paragraph, formatMilliseconds, formatTotalSeconds } from "./hearing" import { CopyButton } from "components/buttons" +import { useRouter } from "next/router" + const ClearButton = styled(FontAwesomeIcon)` position: absolute; right: 3rem; @@ -152,11 +154,38 @@ export const Transcriptions = ({ ) }, [transcriptData, searchTerm]) + const router = useRouter() + const startTime = router.query.t + const convertToString = (value: string | string[] | undefined): string => { + if (Array.isArray(value)) { + return value.join(", ") + } + return value ?? "" + } + + const resultString: string = convertToString(startTime) + + let currentIndex = transcriptData.findIndex( + element => parseInt(resultString, 10) <= element.end / 1000 + ) + + // this useEffect sets highlighter on inital page load + // the next useEffect handles general video usage + // both are needed + + useEffect(() => { + if (containerRef.current && currentIndex !== highlightedId) { + setHighlightedId(currentIndex) + } + }, [videoLoaded]) + useEffect(() => { const handleTimeUpdate = () => { - const currentIndex = transcriptData.findIndex( - element => videoRef.current.currentTime <= element.end / 1000 - ) + videoLoaded + ? (currentIndex = transcriptData.findIndex( + element => videoRef.current.currentTime <= element.end / 1000 + )) + : null if (containerRef.current && currentIndex !== highlightedId) { setHighlightedId(currentIndex) if (currentIndex !== -1 && !searchTerm) { @@ -285,6 +314,7 @@ const TranscriptItem = forwardRef(function TranscriptItem( const isHighlighted = (index: number): boolean => { return index === highlightedId } + const highlightText = (text: string, term: string) => { if (!term) return text const escaped = term.replace(/[.*+?^${}()|[\]\\]/g, "\\$&") From 9d5dfb0d951f5d41e3fc80ab70913fcc6b56fc8f Mon Sep 17 00:00:00 2001 From: mertbagt Date: Mon, 26 Jan 2026 18:51:01 -0500 Subject: [PATCH 05/11] remove unneeded code --- components/hearing/HearingDetails.tsx | 21 --------------------- 1 file changed, 21 deletions(-) diff --git a/components/hearing/HearingDetails.tsx b/components/hearing/HearingDetails.tsx index e26bec78a..460784f56 100644 --- a/components/hearing/HearingDetails.tsx +++ b/components/hearing/HearingDetails.tsx @@ -64,27 +64,6 @@ export const HearingDetails = ({ videoRef.current ? (videoRef.current.currentTime = value) : null } - const updateUrlWithTimestamp = () => { - if (videoRef.current) { - const timeInSeconds = Math.floor(videoRef.current.currentTime) - router.push(`${hearingId}?t=${timeInSeconds}`, undefined, { - shallow: true - }) - } - } - - useEffect(() => { - videoRef.current - ? videoRef.current.addEventListener("pause", updateUrlWithTimestamp) - : null - - return () => { - videoRef.current - ? videoRef.current.removeEventListener("pause", updateUrlWithTimestamp) - : null - } - }, [videoRef.current]) - useEffect(() => { const startTime = router.query.t From 76b35dd1f40f9d73fc791e16dbb1ddf2c6262c77 Mon Sep 17 00:00:00 2001 From: mertbagt Date: Mon, 26 Jan 2026 18:58:42 -0500 Subject: [PATCH 06/11] set aside common function --- components/hearing/HearingDetails.tsx | 15 ++++++--------- components/hearing/Transcriptions.tsx | 17 +++++++---------- components/hearing/hearing.ts | 9 +++++++++ 3 files changed, 22 insertions(+), 19 deletions(-) diff --git a/components/hearing/HearingDetails.tsx b/components/hearing/HearingDetails.tsx index 460784f56..e6e482d34 100644 --- a/components/hearing/HearingDetails.tsx +++ b/components/hearing/HearingDetails.tsx @@ -11,7 +11,12 @@ import { FeatureCalloutButton } from "../shared/CommonComponents" import { HearingSidebar } from "./HearingSidebar" -import { HearingData, Paragraph, fetchTranscriptionData } from "./hearing" +import { + HearingData, + Paragraph, + convertToString, + fetchTranscriptionData +} from "./hearing" import { Transcriptions } from "./Transcriptions" const LegalContainer = styled(Container)` @@ -66,14 +71,6 @@ export const HearingDetails = ({ useEffect(() => { const startTime = router.query.t - - const convertToString = (value: string | string[] | undefined): string => { - if (Array.isArray(value)) { - return value.join(", ") - } - return value ?? "" - } - const resultString: string = convertToString(startTime) if (startTime && videoRef.current) { diff --git a/components/hearing/Transcriptions.tsx b/components/hearing/Transcriptions.tsx index e6db6787e..40bcda0d0 100644 --- a/components/hearing/Transcriptions.tsx +++ b/components/hearing/Transcriptions.tsx @@ -4,15 +4,19 @@ import { faTimes } from "@fortawesome/free-solid-svg-icons" import { FontAwesomeIcon } from "@fortawesome/react-fontawesome" +import { useRouter } from "next/router" import { useTranslation } from "next-i18next" import React, { forwardRef, useEffect, useRef, useState } from "react" import styled from "styled-components" import { Col, Container, Row } from "../bootstrap" -import { Paragraph, formatMilliseconds, formatTotalSeconds } from "./hearing" +import { + Paragraph, + convertToString, + formatMilliseconds, + formatTotalSeconds +} from "./hearing" import { CopyButton } from "components/buttons" -import { useRouter } from "next/router" - const ClearButton = styled(FontAwesomeIcon)` position: absolute; right: 3rem; @@ -156,13 +160,6 @@ export const Transcriptions = ({ const router = useRouter() const startTime = router.query.t - const convertToString = (value: string | string[] | undefined): string => { - if (Array.isArray(value)) { - return value.join(", ") - } - return value ?? "" - } - const resultString: string = convertToString(startTime) let currentIndex = transcriptData.findIndex( diff --git a/components/hearing/hearing.ts b/components/hearing/hearing.ts index 4a2bf98f0..512644bc6 100644 --- a/components/hearing/hearing.ts +++ b/components/hearing/hearing.ts @@ -29,6 +29,15 @@ export type Paragraph = { text: string } +export const convertToString = ( + value: string | string[] | undefined +): string => { + if (Array.isArray(value)) { + return value.join(", ") + } + return value ?? "" +} + export async function fetchHearingData( hearingId: string ): Promise { From 03b3c9312149af091123009c76f7bf57eb73d4a5 Mon Sep 17 00:00:00 2001 From: Mephistic Date: Tue, 27 Jan 2026 17:58:59 -0500 Subject: [PATCH 07/11] fix(transcripts): Make the auto-scroll work when first loading a Hearing page at a specific timestamp, some de-duping --- components/hearing/Transcriptions.tsx | 76 ++++++++++++++++++--------- 1 file changed, 52 insertions(+), 24 deletions(-) diff --git a/components/hearing/Transcriptions.tsx b/components/hearing/Transcriptions.tsx index 40bcda0d0..4590264be 100644 --- a/components/hearing/Transcriptions.tsx +++ b/components/hearing/Transcriptions.tsx @@ -145,11 +145,40 @@ export const Transcriptions = ({ const transcriptRefs = useRef(new Map()) const [searchTerm, setSearchTerm] = useState("") const [filteredData, setFilteredData] = useState([]) + const [initialScrollTarget, setInitialScrollTarget] = useState( + null + ) + const hasScrolledToInitial = useRef(false) const handleClearInput = () => { setSearchTerm("") } + // Shared function to scroll to a transcript index + const scrollToTranscript = (index: number) => { + const container = containerRef.current + const elem = transcriptRefs.current.get(index) + + if (elem && container) { + const elemTop = elem.offsetTop - container.offsetTop + const elemBottom = elemTop + elem.offsetHeight + const viewTop = container.scrollTop + const viewBottom = viewTop + container.clientHeight + + if (elemTop < viewTop) { + container.scrollTo({ + top: elemTop, + behavior: "smooth" + }) + } else if (elemBottom > viewBottom) { + container.scrollTo({ + top: elemBottom - container.clientHeight, + behavior: "smooth" + }) + } + } + } + useEffect(() => { setFilteredData( transcriptData.filter(el => @@ -166,15 +195,31 @@ export const Transcriptions = ({ element => parseInt(resultString, 10) <= element.end / 1000 ) - // this useEffect sets highlighter on inital page load - // the next useEffect handles general video usage - // both are needed + // Set the initial scroll target when we have a startTime and transcripts + useEffect(() => { + if ( + startTime && + transcriptData.length > 0 && + currentIndex !== -1 && + !hasScrolledToInitial.current + ) { + setInitialScrollTarget(currentIndex) + } + }, [startTime, transcriptData, currentIndex]) + // Scroll to the initial target when the ref becomes available useEffect(() => { - if (containerRef.current && currentIndex !== highlightedId) { - setHighlightedId(currentIndex) + if (initialScrollTarget !== null && !searchTerm) { + const elem = transcriptRefs.current.get(initialScrollTarget) + + if (elem) { + setHighlightedId(initialScrollTarget) + scrollToTranscript(initialScrollTarget) + hasScrolledToInitial.current = true + setInitialScrollTarget(null) + } } - }, [videoLoaded]) + }, [initialScrollTarget, transcriptRefs.current.size, searchTerm]) useEffect(() => { const handleTimeUpdate = () => { @@ -186,24 +231,7 @@ export const Transcriptions = ({ if (containerRef.current && currentIndex !== highlightedId) { setHighlightedId(currentIndex) if (currentIndex !== -1 && !searchTerm) { - const container = containerRef.current - const elem = transcriptRefs.current.get(currentIndex) - const elemTop = elem.offsetTop - container.offsetTop - const elemBottom = elemTop + elem.offsetHeight - const viewTop = container.scrollTop - const viewBottom = viewTop + container.clientHeight - - if (elemTop < viewTop) { - container.scrollTo({ - top: elemTop, - behavior: "smooth" - }) - } else if (elemBottom > viewBottom) { - container.scrollTo({ - top: elemBottom - container.clientHeight, - behavior: "smooth" - }) - } + scrollToTranscript(currentIndex) } } } From e6e0f9f2c303dcd6b752fec4fdda8059586c4d60 Mon Sep 17 00:00:00 2001 From: mertbagt Date: Tue, 27 Jan 2026 18:57:34 -0500 Subject: [PATCH 08/11] cr2 --- components/hearing/hearing.ts | 3 --- 1 file changed, 3 deletions(-) diff --git a/components/hearing/hearing.ts b/components/hearing/hearing.ts index bad794744..c87bba25c 100644 --- a/components/hearing/hearing.ts +++ b/components/hearing/hearing.ts @@ -112,11 +112,8 @@ export function formatTotalSeconds(ms: number): string { const formattedSeconds = String(totalSeconds) return `${formattedSeconds}` -<<<<<<< HEAD } -======= ->>>>>>> 5e54701fee2a979206b7bde3806e04e4ecd0e4bd export function formatVTTTimestamp(ms: number): string { const totalSeconds = Math.floor(ms / 1000) const milliseconds = ms % 1000 From b7e1de70670e62492f567fcbe0fe44a68a4bb120 Mon Sep 17 00:00:00 2001 From: mertbagt Date: Sun, 1 Feb 2026 17:03:04 -0500 Subject: [PATCH 09/11] show share button only on active elemet --- components/hearing/Transcriptions.tsx | 26 +++++++++++++++----------- 1 file changed, 15 insertions(+), 11 deletions(-) diff --git a/components/hearing/Transcriptions.tsx b/components/hearing/Transcriptions.tsx index 4590264be..4b2f64062 100644 --- a/components/hearing/Transcriptions.tsx +++ b/components/hearing/Transcriptions.tsx @@ -382,17 +382,21 @@ const TranscriptItem = forwardRef(function TranscriptItem( {highlightText(element.text, searchTerm)} - - - + {isHighlighted(index) ? ( + + + + ) : ( + <> + )} ) From 61a483d6926f771c592fb177310621197da0ce50 Mon Sep 17 00:00:00 2001 From: mertbagt Date: Sun, 1 Feb 2026 17:54:38 -0500 Subject: [PATCH 10/11] material ui share icon --- components/buttons.tsx | 42 +++++ components/hearing/Transcriptions.tsx | 36 +++-- package.json | 4 + yarn.lock | 221 ++++++++++++++++++++++++++ 4 files changed, 289 insertions(+), 14 deletions(-) diff --git a/components/buttons.tsx b/components/buttons.tsx index 9758b45f0..723914368 100644 --- a/components/buttons.tsx +++ b/components/buttons.tsx @@ -341,6 +341,48 @@ export const CopyButton = ({ ) } +export const ShareLinkButton = ({ + text, + tooltipDurationMs = 1000, + children, + format = "text/html", + ...props +}: ButtonProps & { + text: string + tooltipDurationMs?: number + format?: string +}) => { + const { t } = useTranslation("common") + const [show, setShow] = useState(false) + const target = useRef(null) + const closeTimeout = useRef() + return ( + <> + { + if (success) { + clearTimeout(closeTimeout.current) + setShow(true) + closeTimeout.current = setTimeout( + () => setShow(false), + tooltipDurationMs + ) + } + }} + > + + + + {props => {t("copiedToClipboard")}} + + + ) +} + export const GearIcon = (
{highlightText(element.text, searchTerm)} - + {isHighlighted(index) ? ( - - - + <> + setIsHovered(true)} + onMouseLeave={() => setIsHovered(false)} + > + {isHovered ? : } + + ) : ( <> )} diff --git a/package.json b/package.json index b790ae255..ce8a00874 100644 --- a/package.json +++ b/package.json @@ -72,10 +72,14 @@ ] }, "dependencies": { + "@emotion/react": "^11.14.0", + "@emotion/styled": "^11.14.1", "@emotion/weak-memoize": "^0.3.1", "@fortawesome/fontawesome-svg-core": "^6.5.1", "@fortawesome/free-solid-svg-icons": "^6.5.1", "@fortawesome/react-fontawesome": "^0.2.0", + "@mui/icons-material": "^7.3.7", + "@mui/material": "^7.3.7", "@popperjs/core": "^2.11.8", "@react-aria/ssr": "^3.2.0", "@react-aria/utils": "^3.13.1", diff --git a/yarn.lock b/yarn.lock index 2daf3791d..6199b1de7 100644 --- a/yarn.lock +++ b/yarn.lock @@ -1085,6 +1085,11 @@ dependencies: regenerator-runtime "^0.14.0" +"@babel/runtime@^7.28.4": + version "7.28.6" + resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.28.6.tgz#d267a43cb1836dc4d182cce93ae75ba954ef6d2b" + integrity sha512-05WQkdpL9COIMz4LjTxGpPNCdlpyimKppYNoJ5Di5EUObifl8t4tuLuUBBZEpoLYOmfvIWrsp9fCl0HoPRVTdA== + "@babel/template@^7.22.15", "@babel/template@^7.27.2", "@babel/template@^7.3.3": version "7.27.2" resolved "https://registry.npmjs.org/@babel/template/-/template-7.27.2.tgz" @@ -1185,6 +1190,23 @@ source-map "^0.5.7" stylis "4.2.0" +"@emotion/babel-plugin@^11.13.5": + version "11.13.5" + resolved "https://registry.yarnpkg.com/@emotion/babel-plugin/-/babel-plugin-11.13.5.tgz#eab8d65dbded74e0ecfd28dc218e75607c4e7bc0" + integrity sha512-pxHCpT2ex+0q+HH91/zsdHkw/lXd468DIN2zvfvLtPKLLMo6gQj7oLObq8PhkrxOZb/gGCq03S3Z7PDhS8pduQ== + dependencies: + "@babel/helper-module-imports" "^7.16.7" + "@babel/runtime" "^7.18.3" + "@emotion/hash" "^0.9.2" + "@emotion/memoize" "^0.9.0" + "@emotion/serialize" "^1.3.3" + babel-plugin-macros "^3.1.0" + convert-source-map "^1.5.0" + escape-string-regexp "^4.0.0" + find-root "^1.1.0" + source-map "^0.5.7" + stylis "4.2.0" + "@emotion/cache@^11.11.0", "@emotion/cache@^11.4.0": version "11.11.0" resolved "https://registry.npmjs.org/@emotion/cache/-/cache-11.11.0.tgz" @@ -1196,11 +1218,27 @@ "@emotion/weak-memoize" "^0.3.1" stylis "4.2.0" +"@emotion/cache@^11.14.0": + version "11.14.0" + resolved "https://registry.yarnpkg.com/@emotion/cache/-/cache-11.14.0.tgz#ee44b26986eeb93c8be82bb92f1f7a9b21b2ed76" + integrity sha512-L/B1lc/TViYk4DcpGxtAVbx0ZyiKM5ktoIyafGkH6zg/tj+mA+NE//aPYKG0k8kCHSHVJrpLpcAlOBEXQ3SavA== + dependencies: + "@emotion/memoize" "^0.9.0" + "@emotion/sheet" "^1.4.0" + "@emotion/utils" "^1.4.2" + "@emotion/weak-memoize" "^0.4.0" + stylis "4.2.0" + "@emotion/hash@^0.9.1": version "0.9.1" resolved "https://registry.npmjs.org/@emotion/hash/-/hash-0.9.1.tgz" integrity sha512-gJB6HLm5rYwSLI6PQa+X1t5CFGrv1J1TWG+sOyMCeKz2ojaj6Fnl/rZEspogG+cvqbt4AE/2eIyD2QfLKTBNlQ== +"@emotion/hash@^0.9.2": + version "0.9.2" + resolved "https://registry.yarnpkg.com/@emotion/hash/-/hash-0.9.2.tgz#ff9221b9f58b4dfe61e619a7788734bd63f6898b" + integrity sha512-MyqliTZGuOm3+5ZRSaaBGP3USLw6+EGykkwZns2EPC5g8jJ4z9OrdZY9apkl3+UP9+sdz76YYkwCKP5gh8iY3g== + "@emotion/is-prop-valid@^1.1.0", "@emotion/is-prop-valid@^1.2.1": version "1.2.1" resolved "https://registry.npmjs.org/@emotion/is-prop-valid/-/is-prop-valid-1.2.1.tgz" @@ -1208,11 +1246,37 @@ dependencies: "@emotion/memoize" "^0.8.1" +"@emotion/is-prop-valid@^1.3.0": + version "1.4.0" + resolved "https://registry.yarnpkg.com/@emotion/is-prop-valid/-/is-prop-valid-1.4.0.tgz#e9ad47adff0b5c94c72db3669ce46de33edf28c0" + integrity sha512-QgD4fyscGcbbKwJmqNvUMSE02OsHUa+lAWKdEUIJKgqe5IwRSKd7+KhibEWdaKwgjLj0DRSHA9biAIqGBk05lw== + dependencies: + "@emotion/memoize" "^0.9.0" + "@emotion/memoize@^0.8.1": version "0.8.1" resolved "https://registry.npmjs.org/@emotion/memoize/-/memoize-0.8.1.tgz" integrity sha512-W2P2c/VRW1/1tLox0mVUalvnWXxavmv/Oum2aPsRcoDJuob75FC3Y8FbpfLwUegRcxINtGUMPq0tFCvYNTBXNA== +"@emotion/memoize@^0.9.0": + version "0.9.0" + resolved "https://registry.yarnpkg.com/@emotion/memoize/-/memoize-0.9.0.tgz#745969d649977776b43fc7648c556aaa462b4102" + integrity sha512-30FAj7/EoJ5mwVPOWhAyCX+FPfMDrVecJAM+Iw9NRoSl4BBAQeqj4cApHHUXOVvIPgLVDsCFoz/hGD+5QQD1GQ== + +"@emotion/react@^11.14.0": + version "11.14.0" + resolved "https://registry.yarnpkg.com/@emotion/react/-/react-11.14.0.tgz#cfaae35ebc67dd9ef4ea2e9acc6cd29e157dd05d" + integrity sha512-O000MLDBDdk/EohJPFUqvnp4qnHeYkVP5B0xEG0D/L7cOKP9kefu2DXn8dj74cQfsEzUqh+sr1RzFqiL1o+PpA== + dependencies: + "@babel/runtime" "^7.18.3" + "@emotion/babel-plugin" "^11.13.5" + "@emotion/cache" "^11.14.0" + "@emotion/serialize" "^1.3.3" + "@emotion/use-insertion-effect-with-fallbacks" "^1.2.0" + "@emotion/utils" "^1.4.2" + "@emotion/weak-memoize" "^0.4.0" + hoist-non-react-statics "^3.3.1" + "@emotion/react@^11.4.1", "@emotion/react@^11.8.1": version "11.11.1" resolved "https://registry.npmjs.org/@emotion/react/-/react-11.11.1.tgz" @@ -1238,11 +1302,39 @@ "@emotion/utils" "^1.2.1" csstype "^3.0.2" +"@emotion/serialize@^1.3.3": + version "1.3.3" + resolved "https://registry.yarnpkg.com/@emotion/serialize/-/serialize-1.3.3.tgz#d291531005f17d704d0463a032fe679f376509e8" + integrity sha512-EISGqt7sSNWHGI76hC7x1CksiXPahbxEOrC5RjmFRJTqLyEK9/9hZvBbiYn70dw4wuwMKiEMCUlR6ZXTSWQqxA== + dependencies: + "@emotion/hash" "^0.9.2" + "@emotion/memoize" "^0.9.0" + "@emotion/unitless" "^0.10.0" + "@emotion/utils" "^1.4.2" + csstype "^3.0.2" + "@emotion/sheet@^1.2.2": version "1.2.2" resolved "https://registry.npmjs.org/@emotion/sheet/-/sheet-1.2.2.tgz" integrity sha512-0QBtGvaqtWi+nx6doRwDdBIzhNdZrXUppvTM4dtZZWEGTXL/XE/yJxLMGlDT1Gt+UHH5IX1n+jkXyytE/av7OA== +"@emotion/sheet@^1.4.0": + version "1.4.0" + resolved "https://registry.yarnpkg.com/@emotion/sheet/-/sheet-1.4.0.tgz#c9299c34d248bc26e82563735f78953d2efca83c" + integrity sha512-fTBW9/8r2w3dXWYM4HCB1Rdp8NLibOw2+XELH5m5+AkWiL/KqYX6dc0kKYlaYyKjrQ6ds33MCdMPEwgs2z1rqg== + +"@emotion/styled@^11.14.1": + version "11.14.1" + resolved "https://registry.yarnpkg.com/@emotion/styled/-/styled-11.14.1.tgz#8c34bed2948e83e1980370305614c20955aacd1c" + integrity sha512-qEEJt42DuToa3gurlH4Qqc1kVpNq8wO8cJtDzU46TjlzWjDlsVyevtYCRijVq3SrHsROS+gVQ8Fnea108GnKzw== + dependencies: + "@babel/runtime" "^7.18.3" + "@emotion/babel-plugin" "^11.13.5" + "@emotion/is-prop-valid" "^1.3.0" + "@emotion/serialize" "^1.3.3" + "@emotion/use-insertion-effect-with-fallbacks" "^1.2.0" + "@emotion/utils" "^1.4.2" + "@emotion/styled@^11.3.0": version "11.11.0" resolved "https://registry.npmjs.org/@emotion/styled/-/styled-11.11.0.tgz" @@ -1260,6 +1352,11 @@ resolved "https://registry.npmjs.org/@emotion/stylis/-/stylis-0.8.5.tgz" integrity sha512-h6KtPihKFn3T9fuIrwvXXUOwlx3rfUvfZIcP5a6rh8Y7zjE3O06hT5Ss4S/YI1AYhuZ1kjaE/5EaOOI2NqSylQ== +"@emotion/unitless@^0.10.0": + version "0.10.0" + resolved "https://registry.yarnpkg.com/@emotion/unitless/-/unitless-0.10.0.tgz#2af2f7c7e5150f497bdabd848ce7b218a27cf745" + integrity sha512-dFoMUuQA20zvtVTuxZww6OHoJYgrzfKM1t52mVySDJnMSEa08ruEvdYQbhvyu6soU+NeLVd3yKfTfT0NeV6qGg== + "@emotion/unitless@^0.7.4": version "0.7.5" resolved "https://registry.npmjs.org/@emotion/unitless/-/unitless-0.7.5.tgz" @@ -1275,16 +1372,31 @@ resolved "https://registry.npmjs.org/@emotion/use-insertion-effect-with-fallbacks/-/use-insertion-effect-with-fallbacks-1.0.1.tgz" integrity sha512-jT/qyKZ9rzLErtrjGgdkMBn2OP8wl0G3sQlBb3YPryvKHsjvINUhVaPFfP+fpBcOkmrVOVEEHQFJ7nbj2TH2gw== +"@emotion/use-insertion-effect-with-fallbacks@^1.2.0": + version "1.2.0" + resolved "https://registry.yarnpkg.com/@emotion/use-insertion-effect-with-fallbacks/-/use-insertion-effect-with-fallbacks-1.2.0.tgz#8a8cb77b590e09affb960f4ff1e9a89e532738bf" + integrity sha512-yJMtVdH59sxi/aVJBpk9FQq+OR8ll5GT8oWd57UpeaKEVGab41JWaCFA7FRLoMLloOZF/c/wsPoe+bfGmRKgDg== + "@emotion/utils@^1.2.1": version "1.2.1" resolved "https://registry.npmjs.org/@emotion/utils/-/utils-1.2.1.tgz" integrity sha512-Y2tGf3I+XVnajdItskUCn6LX+VUDmP6lTL4fcqsXAv43dnlbZiuW4MWQW38rW/BVWSE7Q/7+XQocmpnRYILUmg== +"@emotion/utils@^1.4.2": + version "1.4.2" + resolved "https://registry.yarnpkg.com/@emotion/utils/-/utils-1.4.2.tgz#6df6c45881fcb1c412d6688a311a98b7f59c1b52" + integrity sha512-3vLclRofFziIa3J2wDh9jjbkUz9qk5Vi3IZ/FSTKViB0k+ef0fPV7dYrUIugbgupYDx7v9ud/SjrtEP8Y4xLoA== + "@emotion/weak-memoize@^0.3.1": version "0.3.1" resolved "https://registry.npmjs.org/@emotion/weak-memoize/-/weak-memoize-0.3.1.tgz" integrity sha512-EsBwpc7hBUJWAsNPBmJy4hxWx12v6bshQsldrVmjxJoc3isbxhOrF2IcCpaXxfvq03NwkI7sbsOLXbYuqF/8Ww== +"@emotion/weak-memoize@^0.4.0": + version "0.4.0" + resolved "https://registry.yarnpkg.com/@emotion/weak-memoize/-/weak-memoize-0.4.0.tgz#5e13fac887f08c44f76b0ccaf3370eb00fec9bb6" + integrity sha512-snKqtPW01tN0ui7yu9rGv69aJXr/a/Ywvl11sUjNtEcRc+ng/mQriFL0wLXMef74iHa/EkftbDzU9F8iFbH+zg== + "@esbuild/android-arm64@0.18.20": version "0.18.20" resolved "https://registry.yarnpkg.com/@esbuild/android-arm64/-/android-arm64-0.18.20.tgz#984b4f9c8d0377443cc2dfcef266d02244593622" @@ -2443,6 +2555,11 @@ resolved "https://registry.npmjs.org/@mui/core-downloads-tracker/-/core-downloads-tracker-5.14.20.tgz" integrity sha512-fXoGe8VOrIYajqALysFuyal1q1YmBARqJ3tmnWYDVl0scu8f6h6tZQbS2K8BY28QwkWNGyv4WRfuUkzN5HR3Ow== +"@mui/core-downloads-tracker@^7.3.7": + version "7.3.7" + resolved "https://registry.yarnpkg.com/@mui/core-downloads-tracker/-/core-downloads-tracker-7.3.7.tgz#99d9c60be3ce5632ec915b2c287682020ce19a99" + integrity sha512-8jWwS6FweMkpyRkrJooamUGe1CQfO1yJ+lM43IyUJbrhHW/ObES+6ry4vfGi8EKaldHL3t3BG1bcLcERuJPcjg== + "@mui/icons-material@^5.0.1": version "5.14.19" resolved "https://registry.npmjs.org/@mui/icons-material/-/icons-material-5.14.19.tgz" @@ -2450,6 +2567,13 @@ dependencies: "@babel/runtime" "^7.23.4" +"@mui/icons-material@^7.3.7": + version "7.3.7" + resolved "https://registry.yarnpkg.com/@mui/icons-material/-/icons-material-7.3.7.tgz#01a6019c552e27c7f8a3451bcb47171ede8b34ac" + integrity sha512-3Q+ulAqG+A1+R4ebgoIs7AccaJhIGy+Xi/9OnvX376jQ6wcy+rz4geDGrxQxCGzdjOQr4Z3NgyFSZCz4T999lA== + dependencies: + "@babel/runtime" "^7.28.4" + "@mui/material@^5.0.2": version "5.14.20" resolved "https://registry.npmjs.org/@mui/material/-/material-5.14.20.tgz" @@ -2468,6 +2592,24 @@ react-is "^18.2.0" react-transition-group "^4.4.5" +"@mui/material@^7.3.7": + version "7.3.7" + resolved "https://registry.yarnpkg.com/@mui/material/-/material-7.3.7.tgz#50fc9b9f8645a4d26a48d7c5f7fa0c9876a8c679" + integrity sha512-6bdIxqzeOtBAj2wAsfhWCYyMKPLkRO9u/2o5yexcL0C3APqyy91iGSWgT3H7hg+zR2XgE61+WAu12wXPON8b6A== + dependencies: + "@babel/runtime" "^7.28.4" + "@mui/core-downloads-tracker" "^7.3.7" + "@mui/system" "^7.3.7" + "@mui/types" "^7.4.10" + "@mui/utils" "^7.3.7" + "@popperjs/core" "^2.11.8" + "@types/react-transition-group" "^4.4.12" + clsx "^2.1.1" + csstype "^3.2.3" + prop-types "^15.8.1" + react-is "^19.2.3" + react-transition-group "^4.4.5" + "@mui/private-theming@^5.14.20": version "5.14.20" resolved "https://registry.npmjs.org/@mui/private-theming/-/private-theming-5.14.20.tgz" @@ -2477,6 +2619,15 @@ "@mui/utils" "^5.14.20" prop-types "^15.8.1" +"@mui/private-theming@^7.3.7": + version "7.3.7" + resolved "https://registry.yarnpkg.com/@mui/private-theming/-/private-theming-7.3.7.tgz#f5b41d573df3824fbfd10a7e6ac8de94bbcf15c5" + integrity sha512-w7r1+CYhG0syCAQUWAuV5zSaU2/67WA9JXUderdb7DzCIJdp/5RmJv6L85wRjgKCMsxFF0Kfn0kPgPbPgw/jdw== + dependencies: + "@babel/runtime" "^7.28.4" + "@mui/utils" "^7.3.7" + prop-types "^15.8.1" + "@mui/styled-engine@^5.14.19": version "5.14.20" resolved "https://registry.npmjs.org/@mui/styled-engine/-/styled-engine-5.14.20.tgz" @@ -2487,6 +2638,18 @@ csstype "^3.1.2" prop-types "^15.8.1" +"@mui/styled-engine@^7.3.7": + version "7.3.7" + resolved "https://registry.yarnpkg.com/@mui/styled-engine/-/styled-engine-7.3.7.tgz#cde5a8381e14310f293a53dd59d27ae737a305fc" + integrity sha512-y/QkNXv6cF6dZ5APztd/dFWfQ6LHKPx3skyYO38YhQD4+Cxd6sFAL3Z38WMSSC8LQz145Mpp3CcLrSCLKPwYAg== + dependencies: + "@babel/runtime" "^7.28.4" + "@emotion/cache" "^11.14.0" + "@emotion/serialize" "^1.3.3" + "@emotion/sheet" "^1.4.0" + csstype "^3.2.3" + prop-types "^15.8.1" + "@mui/system@^5.14.20": version "5.14.20" resolved "https://registry.npmjs.org/@mui/system/-/system-5.14.20.tgz" @@ -2501,11 +2664,32 @@ csstype "^3.1.2" prop-types "^15.8.1" +"@mui/system@^7.3.7": + version "7.3.7" + resolved "https://registry.yarnpkg.com/@mui/system/-/system-7.3.7.tgz#530932e078ba58031cd9bcc71494a544fa635a27" + integrity sha512-DovL3k+FBRKnhmatzUMyO5bKkhMLlQ9L7Qw5qHrre3m8zCZmE+31NDVBFfqrbrA7sq681qaEIHdkWD5nmiAjyQ== + dependencies: + "@babel/runtime" "^7.28.4" + "@mui/private-theming" "^7.3.7" + "@mui/styled-engine" "^7.3.7" + "@mui/types" "^7.4.10" + "@mui/utils" "^7.3.7" + clsx "^2.1.1" + csstype "^3.2.3" + prop-types "^15.8.1" + "@mui/types@^7.2.10": version "7.2.10" resolved "https://registry.npmjs.org/@mui/types/-/types-7.2.10.tgz" integrity sha512-wX1vbDC+lzF7FlhT6A3ffRZgEoKWPF8VqRoTu4lZwouFX2t90KyCMsgepMw5DxLak1BSp/KP86CmtZttikb/gQ== +"@mui/types@^7.4.10": + version "7.4.10" + resolved "https://registry.yarnpkg.com/@mui/types/-/types-7.4.10.tgz#c80ed5850a1da7802a01c1d0153d8603ce41be10" + integrity sha512-0+4mSjknSu218GW3isRqoxKRTOrTLd/vHi/7UC4+wZcUrOAqD9kRk7UQRL1mcrzqRoe7s3UT6rsRpbLkW5mHpQ== + dependencies: + "@babel/runtime" "^7.28.4" + "@mui/utils@^5.14.20": version "5.14.20" resolved "https://registry.npmjs.org/@mui/utils/-/utils-5.14.20.tgz" @@ -2516,6 +2700,18 @@ prop-types "^15.8.1" react-is "^18.2.0" +"@mui/utils@^7.3.7": + version "7.3.7" + resolved "https://registry.yarnpkg.com/@mui/utils/-/utils-7.3.7.tgz#71443559a7fbd993b5b90fcb843fa26a60046f99" + integrity sha512-+YjnjMRnyeTkWnspzoxRdiSOgkrcpTikhNPoxOZW0APXx+urHtUoXJ9lbtCZRCA5a4dg5gSbd19alL1DvRs5fg== + dependencies: + "@babel/runtime" "^7.28.4" + "@mui/types" "^7.4.10" + "@types/prop-types" "^15.7.15" + clsx "^2.1.1" + prop-types "^15.8.1" + react-is "^19.2.3" + "@ndelangen/get-tarball@^3.0.7": version "3.0.9" resolved "https://registry.npmjs.org/@ndelangen/get-tarball/-/get-tarball-3.0.9.tgz" @@ -4565,6 +4761,11 @@ resolved "https://registry.npmjs.org/@types/prop-types/-/prop-types-15.7.11.tgz" integrity sha512-ga8y9v9uyeiLdpKddhxYQkxNDrfvuPrlFb0N1qnZZByvcElJaXthF1UhvCh9TLWJBEHeNtdnbysW7Y6Uq8CVng== +"@types/prop-types@^15.7.15": + version "15.7.15" + resolved "https://registry.yarnpkg.com/@types/prop-types/-/prop-types-15.7.15.tgz#e6e5a86d602beaca71ce5163fadf5f95d70931c7" + integrity sha512-F6bEyamV9jKGAFBEmlQnesRPGOQqS2+Uwi0Em15xenOxHaf2hv6L8YCVn3rPdPJOiJfPiCnLIRyvwVaqMY3MIw== + "@types/qs@*", "@types/qs@^6.5.3", "@types/qs@^6.9.5": version "6.9.10" resolved "https://registry.npmjs.org/@types/qs/-/qs-6.9.10.tgz" @@ -4596,6 +4797,11 @@ dependencies: "@types/react" "*" +"@types/react-transition-group@^4.4.12": + version "4.4.12" + resolved "https://registry.yarnpkg.com/@types/react-transition-group/-/react-transition-group-4.4.12.tgz#b5d76568485b02a307238270bfe96cb51ee2a044" + integrity sha512-8TV6R3h2j7a91c+1DXdJi3Syo69zzIZbz7Lg5tORM5LEJG7X/E6a1V3drRyBRZq7/utz7A+c4OgYLiLcYGHG6w== + "@types/react@*", "@types/react@>=16", "@types/react@>=16.9.11", "@types/react@^18.2.43": version "18.2.43" resolved "https://registry.npmjs.org/@types/react/-/react-18.2.43.tgz" @@ -6586,6 +6792,11 @@ clsx@^2.0.0: resolved "https://registry.npmjs.org/clsx/-/clsx-2.0.0.tgz" integrity sha512-rQ1+kcj+ttHG0MKVGBUXwayCCF1oh39BF5COIpRzuCEv8Mwjv0XucrI2ExNTOn9IlLifGClWQcU9BrZORvtw6Q== +clsx@^2.1.1: + version "2.1.1" + resolved "https://registry.yarnpkg.com/clsx/-/clsx-2.1.1.tgz#eed397c9fd8bd882bfb18deab7102049a2f32999" + integrity sha512-eYm0QWBtUrBWZWG0d386OGAw16Z995PiOVo2B7bjWSbHedGl5e0ZWaq65kOGgUSNesEIDkB9ISbTg/JK9dhCZA== + co@^4.6.0: version "4.6.0" resolved "https://registry.npmjs.org/co/-/co-4.6.0.tgz" @@ -7094,6 +7305,11 @@ csstype@^3.0.2, csstype@^3.1.2: resolved "https://registry.npmjs.org/csstype/-/csstype-3.1.3.tgz" integrity sha512-M1uQkMl8rQK/szD0LNhtqxIPLpimGm8sOBwU7lLnCpSbTyY3yeU1Vc7l4KT5zT4s/yOxHH5O7tIuuLOCnLADRw== +csstype@^3.2.3: + version "3.2.3" + resolved "https://registry.yarnpkg.com/csstype/-/csstype-3.2.3.tgz#ec48c0f3e993e50648c86da559e2610995cf989a" + integrity sha512-z1HGKcYy2xA8AGQfwrn0PAy+PB7X/GSj3UVJW9qKyn43xWa+gl5nXmU4qqLMRzWVLFC8KusUX8T/0kCiOYpAIQ== + csv-parse@^5.0.4: version "5.5.3" resolved "https://registry.npmjs.org/csv-parse/-/csv-parse-5.5.3.tgz" @@ -14933,6 +15149,11 @@ react-is@^18.0.0, react-is@^18.2.0: resolved "https://registry.npmjs.org/react-is/-/react-is-18.3.1.tgz" integrity sha512-/LLMVyas0ljjAtoYiPqYiL8VWXzUUdThrmU5+n20DZv+a+ClRoevUzw5JxU+Ieh5/c87ytoTBV9G1FiKfNJdmg== +react-is@^19.2.3: + version "19.2.4" + resolved "https://registry.yarnpkg.com/react-is/-/react-is-19.2.4.tgz#a080758243c572ccd4a63386537654298c99d135" + integrity sha512-W+EWGn2v0ApPKgKKCy/7s7WHXkboGcsrXE+2joLyVxkbyVQfO3MUEaUQDHoSmb8TFFrSKYa9mw64WZHNHSDzYA== + react-lifecycles-compat@^3.0.4: version "3.0.4" resolved "https://registry.npmjs.org/react-lifecycles-compat/-/react-lifecycles-compat-3.0.4.tgz" From 33aeb8bc844154993c0e6fae50264356fcef0e97 Mon Sep 17 00:00:00 2001 From: mertbagt Date: Sun, 1 Feb 2026 17:58:45 -0500 Subject: [PATCH 11/11] cleanup --- components/hearing/Transcriptions.tsx | 13 ++++--------- 1 file changed, 4 insertions(+), 9 deletions(-) diff --git a/components/hearing/Transcriptions.tsx b/components/hearing/Transcriptions.tsx index 82809bcbe..fd892aeb6 100644 --- a/components/hearing/Transcriptions.tsx +++ b/components/hearing/Transcriptions.tsx @@ -1,14 +1,12 @@ -import { - faMagnifyingGlass, - faShareAlt, - faTimes -} from "@fortawesome/free-solid-svg-icons" +import { faMagnifyingGlass, faTimes } from "@fortawesome/free-solid-svg-icons" import { FontAwesomeIcon } from "@fortawesome/react-fontawesome" +import ShareIcon from "@mui/icons-material/Share" +import ShareOutlinedIcon from "@mui/icons-material/ShareOutlined" import { useRouter } from "next/router" import { useTranslation } from "next-i18next" import React, { forwardRef, useEffect, useRef, useState } from "react" import styled from "styled-components" -import { Button, Col, Container, Row } from "../bootstrap" +import { Col, Container, Row } from "../bootstrap" import { Paragraph, convertToString, @@ -17,9 +15,6 @@ import { } from "./hearing" import { ShareLinkButton } from "components/buttons" -import ShareIcon from "@mui/icons-material/Share" -import ShareOutlinedIcon from "@mui/icons-material/ShareOutlined" - const ClearButton = styled(FontAwesomeIcon)` position: absolute; right: 3rem;