Add back hover state with collapsed references

src/interface/web/app/components/referencePanel/referencePanel.tsx

@@ -31,6 +31,7 @@ import {
 import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover";
 import DOMPurify from "dompurify";
 import { getIconFromFilename } from "@/app/common/iconUtils";
+import Link from "next/link";
 
 interface NotesContextReferenceData {
     title: string;
@@ -68,8 +69,13 @@ function NotesContextReferenceCard(props: NotesContextReferenceCardProps) {
                     <Card
                         onMouseEnter={() => setIsHovering(true)}
                         onMouseLeave={() => setIsHovering(false)}
-                        className={`${props.showFullContent ? "w-auto" : "w-[200px]"} overflow-hidden break-words text-balance rounded-lg border-none p-2 bg-muted`}
+                        className={`${props.showFullContent ? "w-auto bg-muted" : "w-auto"} overflow-hidden break-words text-balance rounded-lg border-none p-2`}
                     >
+                        {
+                            !props.showFullContent ?
+                                <SimpleIcon type="notes" key={`${props.title}`} />
+                                :
+                                <>
                                     <h3
                                         className={`${props.showFullContent ? "block" : "line-clamp-1"} text-muted-foreground}`}
                                     >
@@ -77,9 +83,11 @@ function NotesContextReferenceCard(props: NotesContextReferenceCardProps) {
                                         {props.showFullContent ? props.title : fileName}
                                     </h3>
                                     <p
-                            className={`text-sm ${props.showFullContent ? "overflow-x-auto block" : "overflow-hidden line-clamp-2"}`}
+                                        className={`text-sm overflow-x-auto block`}
                                         dangerouslySetInnerHTML={{ __html: snippet }}
                                     ></p>
+                                </>
+                        }
                     </Card>
                 </PopoverTrigger>
                 <PopoverContent className="w-[400px] mx-2">
@@ -204,8 +212,12 @@ function CodeContextReferenceCard(props: CodeContextReferenceCardProps) {
                     <Card
                         onMouseEnter={() => setIsHovering(true)}
                         onMouseLeave={() => setIsHovering(false)}
-                        className={`${props.showFullContent ? "w-auto" : "w-[200px]"} overflow-hidden break-words text-balance rounded-lg border-none p-2 bg-muted`}
+                        className={`${props.showFullContent ? "w-auto bg-muted" : "w-auto"} overflow-hidden break-words text-balance rounded-lg border-none p-2`}
                     >
+                        {
+                            !props.showFullContent ?
+                                <SimpleIcon type="code" key={`code-${props.code}`} />
+                                :
                                 <div className="flex flex-col px-1">
                                     <div className="flex items-center gap-2">
                                         {fileIcon}
@@ -223,6 +235,7 @@ function CodeContextReferenceCard(props: CodeContextReferenceCardProps) {
                                     {props.output_files?.length > 0 &&
                                         renderOutputFiles(props.output_files, false)}
                                 </div>
+                        }
                     </Card>
                 </PopoverTrigger>
                 <PopoverContent className="w-[400px] mx-2">
@@ -299,15 +312,15 @@ function GenericOnlineReferenceCard(props: OnlineReferenceCardProps) {
                     <Card
                         onMouseEnter={handleMouseEnter}
                         onMouseLeave={handleMouseLeave}
-                        className={`${props.showFullContent ? "w-auto" : "w-[200px]"} overflow-hidden break-words text-balance rounded-lg border-none p-2 bg-muted`}
+                        className={`${props.showFullContent ? "w-auto bg-muted" : "w-auto"} overflow-hidden break-words text-balance rounded-lg border-none p-2`}
                     >
+                        {
+                            !props.showFullContent ?
+                                <SimpleIcon type="online" key={props.title} link={props.link} />
+                                :
                                 <div className="flex flex-col">
-                            <a
+                                    {
-                                href={props.link}
+                                        <Link href={props.link}>
-                                target="_blank"
-                                rel="noreferrer"
-                                className="!no-underline px-1"
-                            >
                                             <div className="flex items-center gap-2">
                                                 <img src={favicon} alt="" className="!w-4 h-4 flex-shrink-0" />
                                                 <h3
@@ -316,6 +329,8 @@ function GenericOnlineReferenceCard(props: OnlineReferenceCardProps) {
                                                     {domain}
                                                 </h3>
                                             </div>
+                                        </Link>
+                                    }
                                     <h3
                                         className={`overflow-hidden ${props.showFullContent ? "block" : "line-clamp-1"} font-bold`}
                                     >
@@ -326,8 +341,8 @@ function GenericOnlineReferenceCard(props: OnlineReferenceCardProps) {
                                     >
                                         {props.description}
                                     </p>
-                            </a>
                                 </div>
+                        }
                     </Card>
                 </PopoverTrigger>
                 <PopoverContent className="w-[400px] mx-2">
@@ -609,17 +624,29 @@ export default function ReferencePanel(props: ReferencePanelDataProps) {
             <SheetTrigger className="text-balance w-auto md:w-[200px] justify-start overflow-hidden break-words p-0 bg-transparent border-none text-gray-400 align-middle items-center m-0 inline-flex">
                 {codeDataToShow.map((code, index) => {
                     return (
-                        <SimpleIcon type="code" key={`code-${index}`} />
+                        <CodeContextReferenceCard
+                            showFullContent={false}
+                            {...code}
+                            key={`code-${index}`}
+                        />
                     );
                 })}
                 {notesDataToShow.map((note, index) => {
                     return (
-                        <SimpleIcon type="notes" key={`${note.title}-${index}`} />
+                        <NotesContextReferenceCard
+                            showFullContent={false}
+                            {...note}
+                            key={`${note.title}-${index}`}
+                        />
                     );
                 })}
                 {onlineDataToShow.map((online, index) => {
                     return (
-                        <SimpleIcon type="online" key={`${online.title}-${index}`} link={online.link} />
+                        <GenericOnlineReferenceCard
+                            showFullContent={false}
+                            {...online}
+                            key={`${online.title}-${index}`}
+                        />
                     );
                 })}
                 <ArrowRight className="m-0" />