new devtools ui

Author: prc5

packages/devtools/package.json

@@ -65,6 +65,7 @@
     "@radix-ui/react-icons": "^1.3.0",
     "@radix-ui/react-label": "^2.1.2",
     "@radix-ui/react-popover": "^1.0.7",
+    "@radix-ui/react-progress": "^1.1.2",
     "@radix-ui/react-select": "^2.1.6",
     "@radix-ui/react-separator": "^1.1.2",
     "@radix-ui/react-slot": "^1.1.2",

packages/devtools/src/frontend/components/content/content.tsx

@@ -0,0 +1,10 @@
+import { Card } from "frontend/components/ui/card";
+import { cn } from "frontend/lib/utils";
+
+export const Content = ({ children, className }: { children: React.ReactNode; className?: string }) => {
+  return (
+    <Card className={cn("h-full max-h-[calc(100vh-60px)] w-full p-0 gap-0 bg-sidebar overflow-auto", className)}>
+      {children}
+    </Card>
+  );
+};

packages/devtools/src/frontend/components/ui/content.tsx

@@ -0,0 +1,7 @@
+export const EmptyBox = ({ title }: { title: string }) => {
+  return (
+    <div className="w-full h-full flex items-center justify-center p-4 bg-gray-50/20 dark:bg-gray-900/40 border-2 border-dashed border-gray-300 dark:border-gray-700 rounded-md text-gray-500 dark:text-gray-500 text-center">
+      {title}
+    </div>
+  );
+};

packages/devtools/src/frontend/components/ui/empty-box.tsx

@@ -5,19 +5,43 @@ export const EmptyState = ({
   description,
   icon: Icon = AppWindowMac,
   children,
+  size = "md",
 }: {
   title: string;
-  description: string;
+  description?: string;
   icon?: React.ElementType;
   children?: React.ReactNode;
+  size?: "sm" | "md" | "lg";
 }) => {
+  // Size variant classes
+  const sizeClasses = {
+    sm: {
+      container: "w-12 h-12",
+      icon: "w-6 h-6",
+      title: "text-xl",
+    },
+    md: {
+      container: "w-16 h-16",
+      icon: "w-8 h-8",
+      title: "text-2xl",
+    },
+    lg: {
+      container: "w-20 h-20",
+      icon: "w-10 h-10",
+      title: "text-3xl",
+    },
+  };
+
   return (
     <div className="flex flex-col items-center justify-center h-full p-8 text-center">
-      <div className="flex items-center justify-center w-16 h-16 mb-4 rounded-full bg-gray-100 dark:bg-gray-800">
-        <Icon className="w-8 h-8 text-gray-500 dark:text-gray-400" />
+      <div
+        className={`flex items-center justify-center mb-4 rounded-full bg-gray-100 dark:bg-gray-800 ${sizeClasses[size].container}`}
+      >
+        <Icon className={`text-gray-500 dark:text-gray-400 ${sizeClasses[size].icon}`} />
       </div>
-      <h2 className="text-2xl font-bold text-gray-900 dark:text-gray-100/70 mb-2">{title}</h2>
-      <p className="text-gray-500 dark:text-gray-400/80 max-w-md">{description}</p>
+
+      <h2 className={`font-bold text-gray-900 dark:text-gray-100/70 mb-2 ${sizeClasses[size].title}`}>{title}</h2>
+      {description && <p className="text-gray-500 dark:text-gray-400/80 max-w-md">{description}</p>}
       {children}
     </div>
   );

packages/devtools/src/frontend/components/ui/empty-state.tsx

@@ -0,0 +1,31 @@
+"use client"
+
+import * as React from "react"
+import * as ProgressPrimitive from "@radix-ui/react-progress"
+
+import { cn } from "frontend/lib/utils"
+
+function Progress({
+  className,
+  value,
+  ...props
+}: React.ComponentProps<typeof ProgressPrimitive.Root>) {
+  return (
+    <ProgressPrimitive.Root
+      data-slot="progress"
+      className={cn(
+        "bg-primary/20 relative h-2 w-full overflow-hidden rounded-full",
+        className
+      )}
+      {...props}
+    >
+      <ProgressPrimitive.Indicator
+        data-slot="progress-indicator"
+        className="bg-primary h-full w-full flex-1 transition-all"
+        style={{ transform: `translateX(-${100 - (value || 0)}%)` }}
+      />
+    </ProgressPrimitive.Root>
+  )
+}
+
+export { Progress }

packages/devtools/src/frontend/components/ui/progress.tsx

@@ -4,7 +4,7 @@ import { useDidMount } from "@reins/hooks";
 import { Socket } from "@hyper-fetch/sockets";
 
 import { BaseMessage, MessageType } from "types/messages.types";
-import { SocketTopics } from "frontend/lib/socket/topics";
+import { SocketTopics } from "frontend/constants/topics";
 import { ConnectionName } from "frontend/constants/connection.name";
 import { Connection, useConnections } from "../connection/connection";
 import { useProjects } from "frontend/store/projects.store";

packages/devtools/src/frontend/lib/socket/topics.ts renamed to packages/devtools/src/frontend/constants/topics.ts

@@ -1,17 +1,17 @@
 import { Outlet } from "@reins/router";
 
-import { Card } from "frontend/components/ui/card";
 import { DashboardSidebar } from "./sidebar/sidebar";
+import { Content } from "frontend/components/ui/content";
 
 export const DashboardLayout = () => {
   return (
     <div className="h-full w-full py-2 px-1">
-      <Card className="grid grid-cols-[250px_1fr] h-full w-full p-0 gap-0 bg-sidebar">
+      <Content className="grid grid-cols-[250px_1fr] h-full w-full p-0 gap-0 bg-sidebar">
         <DashboardSidebar />
         <div className="border-l-2 p-4">
           <Outlet />
         </div>
-      </Card>
+      </Content>
     </div>
   );
 };