feat: expand db tile on info icon hover

Author: makaroni4

src/Visualizer/components/DatabaseMenuSidebar.tsx

@@ -1,6 +1,6 @@
 import { useState, useEffect } from "react";
 import { markdown } from "../helpers";
-import { CloseIcon } from "../components";
+import { CloseIcon, InfoIcon } from "../components";
 import { DatabaseMenuPopupProps } from "../types";
 import databases from "../../config/databases";
 
@@ -9,6 +9,7 @@ export function DatabaseMenuSidebar(props: DatabaseMenuPopupProps) {
   const [parsedSubheadline, setParsedSubheadline] = useState<string>("");
   const [parsedTeasers, setParsedTeasers] = useState<Map<string, string>>(new Map());
   const [parsedDescriptions, setParsedDescriptions] = useState<Map<string, string>>(new Map());
+  const [expandedTile, setExpandedTile] = useState<string | null>(null);
 
   useEffect(() => {
     // Load headline
@@ -56,11 +57,14 @@ export function DatabaseMenuSidebar(props: DatabaseMenuPopupProps) {
 
         <div className="database-menu-sidebar__body">
           {Object.keys(databases).map((databaseName, index) => {
+            const isExpanded = expandedTile === databaseName;
+
             return (
               <a
                 href={databaseHref(databaseName)}
                 key={databaseName}
-                className="database-tile">
+                className={`database-tile ${isExpanded ? 'database-tile--expanded' : ''}`}
+                onMouseLeave={() => setExpandedTile(null)}>
                 <div className="database-tile__index">
                   {String(index + 1).padStart(2, '0')}
                 </div>
@@ -75,6 +79,14 @@ export function DatabaseMenuSidebar(props: DatabaseMenuPopupProps) {
                     className="database-tile__description"
                     dangerouslySetInnerHTML={{__html: parsedDescriptions.get(databaseName) || "" }} />
                 </div>
+                <div
+                  className="database-tile__info-icon"
+                  onMouseEnter={(e) => {
+                    e.preventDefault();
+                    setExpandedTile(databaseName);
+                  }}>
+                  <InfoIcon />
+                </div>
               </a>
             )
           })}

src/Visualizer/style/database-menu-sidebar.scss

@@ -72,16 +72,20 @@
   color: inherit;
   transition: all 0.3s ease;
   overflow: visible;
+  background: none;
 
-  &:hover {
+  &--expanded {
     transform: translateY(-4px);
     box-shadow: 0 8px 16px rgba(0, 0, 0, 0.15);
     border-color: #4A90E2;
+    border-radius: 12px 12px 0 0;
     z-index: 10;
 
     .database-tile__description {
       max-height: 500px;
       opacity: 1;
+      padding: 12px 20px;
+      pointer-events: auto;
     }
   }
 
@@ -110,16 +114,37 @@
     font-size: 15px;
     line-height: 1.5;
     color: #555;
+    padding-right: 30px;
 
     p {
       margin: 0;
     }
   }
 
+  &__info-icon {
+    position: absolute;
+    bottom: 12px;
+    right: 12px;
+    width: 20px;
+    height: 20px;
+    cursor: pointer;
+    fill: #999;
+    transition: fill 0.2s ease;
+
+    &:hover {
+      fill: #4A90E2;
+    }
+
+    svg {
+      width: 100%;
+      height: 100%;
+    }
+  }
+
   &__description {
     position: absolute;
-    left: 0;
-    right: 0;
+    left: -2px;
+    right: -2px;
     top: 100%;
     max-height: 0;
     opacity: 0;
@@ -134,6 +159,7 @@
     border-radius: 0 0 12px 12px;
     padding: 0 20px;
     box-shadow: 0 8px 16px rgba(0, 0, 0, 0.15);
+    pointer-events: none;
 
     p {
       margin: 8px 0;
@@ -147,8 +173,4 @@
       }
     }
   }
-
-  &:hover &__description {
-    padding: 12px 20px;
-  }
 }