feat: add Sheet and Sidebar components for improved UI layout

- Introduced a new Sheet component for modal-like functionality with customizable content and animations.
- Implemented a Sidebar component with mobile responsiveness, state management, and keyboard shortcuts for toggling.
- Added Skeleton component for loading states and Tooltip component for enhanced user guidance.
- Created a useIsMobile hook to manage mobile view detection.
- Updated main entry point to render the new PlatformPage component.
- Enhanced styles for sidebar and scrollbar customization in CSS.
- Extended Tailwind configuration to include sidebar color variables for better theming.

frontend/src/styles.css

@@ -16,7 +16,8 @@ body {
 
 .reactflow-wrapper {
     width: 100%;
-    height: 100vh;
+    height: 100%;
+    min-height: 0;
 }
 
 /* Node specific overrides */
@@ -29,11 +30,13 @@ body {
 .react-flow__node:focus {
     outline: none;
 }
-.react-flow__node:focus-visible > div:first-child {
+
+.react-flow__node:focus-visible>div:first-child {
     border-color: hsl(var(--primary));
     box-shadow: 0 0 0 2px hsl(var(--primary) / 0.4);
 }
-.dark .react-flow__node:focus-visible > div:first-child {
+
+.dark .react-flow__node:focus-visible>div:first-child {
     box-shadow: 0 0 0 2px hsl(var(--primary) / 0.5);
 }
 
@@ -53,15 +56,18 @@ body {
     box-shadow: 0 0 0 3px hsl(var(--primary)), 0 0 12px 2px hsl(var(--primary) / 0.5) !important;
     opacity: 1 !important;
 }
+
 .react-flow__handle.react-flow__handle-connecting.react-flow__handle-valid svg,
 .react-flow__handle.connection-valid-target svg {
     color: inherit;
 }
+
 .dark .react-flow__handle.react-flow__handle-connecting.react-flow__handle-valid,
 .dark .react-flow__handle.connection-valid-target {
     background: hsl(var(--primary)) !important;
     box-shadow: 0 0 0 3px hsl(var(--primary)), 0 0 14px 4px hsl(var(--primary) / 0.6) !important;
 }
+
 .react-flow__handle.react-flow__handle-connecting:not(.react-flow__handle-valid):not(.connection-valid-target),
 .react-flow__handle.connection-invalid-target {
     opacity: 0.25 !important;
@@ -83,6 +89,7 @@ body {
     align-items: center;
     justify-content: center;
 }
+
 .rendering-diagram svg {
     display: block;
     max-width: 100%;
@@ -90,6 +97,7 @@ body {
     width: auto;
     height: auto;
 }
+
 .dark .rendering-diagram svg {
     filter: invert(0.92) hue-rotate(180deg);
 }
@@ -105,6 +113,7 @@ body {
     justify-content: center;
     align-items: flex-start;
 }
+
 .rendering-wireframe__content {
     width: 1200px;
     /* Scale to fit container width so content stays within the node */
@@ -154,29 +163,37 @@ pre {
     scrollbar-width: thin;
     scrollbar-color: hsl(var(--muted-foreground) / 0.35) transparent;
 }
+
 .dark * {
     scrollbar-color: hsl(var(--muted-foreground) / 0.4) transparent;
 }
+
 *::-webkit-scrollbar {
     width: 6px;
     height: 6px;
 }
+
 *::-webkit-scrollbar-track {
     background: transparent;
 }
+
 *::-webkit-scrollbar-thumb {
     background: hsl(var(--muted-foreground) / 0.35);
     border-radius: 3px;
 }
+
 *::-webkit-scrollbar-thumb:hover {
     background: hsl(var(--muted-foreground) / 0.5);
 }
+
 *::-webkit-scrollbar-corner {
     background: transparent;
 }
+
 .dark *::-webkit-scrollbar-thumb {
     background: hsl(var(--muted-foreground) / 0.4);
 }
+
 .dark *::-webkit-scrollbar-thumb:hover {
     background: hsl(var(--muted-foreground) / 0.55);
 }
@@ -208,6 +225,14 @@ pre {
         --chart-4: 43 74% 66%;
         --chart-5: 27 87% 67%;
         --radius: 0.5rem;
+        --sidebar-background: 0 0% 98%;
+        --sidebar-foreground: 240 5.3% 26.1%;
+        --sidebar-primary: 240 5.9% 10%;
+        --sidebar-primary-foreground: 0 0% 98%;
+        --sidebar-accent: 240 4.8% 95.9%;
+        --sidebar-accent-foreground: 240 5.9% 10%;
+        --sidebar-border: 220 13% 91%;
+        --sidebar-ring: 217.2 91.2% 59.8%;
     }
 
     .dark {
@@ -235,5 +260,13 @@ pre {
         --chart-3: 30 80% 55%;
         --chart-4: 280 65% 60%;
         --chart-5: 340 75% 55%;
+        --sidebar-background: 240 5.9% 10%;
+        --sidebar-foreground: 240 4.8% 95.9%;
+        --sidebar-primary: 224.3 76.3% 48%;
+        --sidebar-primary-foreground: 0 0% 100%;
+        --sidebar-accent: 240 3.7% 15.9%;
+        --sidebar-accent-foreground: 240 4.8% 95.9%;
+        --sidebar-border: 240 3.7% 15.9%;
+        --sidebar-ring: 217.2 91.2% 59.8%;
     }
 }