web: added the base for the web project

apps/web/src/components/ui/RenderDots.tsx

@@ -1,21 +1,51 @@
 import { cn } from "@/utils/cn";
-import { ChevronRight } from "lucide-react";
+import { Asterisk, ChevronRight } from "lucide-react";
+import { Tooltip, TooltipContent, TooltipTrigger } from "./tooltip";
 
 interface RenderDotsProps extends React.HTMLAttributes<HTMLDivElement> {
   children: string;
+  truncate?: boolean;
 }
 
-export function RenderDots({ children, className, ...props }: RenderDotsProps) {
+export function RenderDots({
+  children,
+  className,
+  truncate,
+  ...props
+}: RenderDotsProps) {
+  const parts = children.split(".");
+  const sliceAt = truncate && parts.length > 3 ? 3 : 0;
   return (
-    <div {...props} className={cn('flex gap-1', className)}>
-      {children.split(".").map((str, index) => {
-        return (
-          <div className="flex items-center gap-1" key={str + index}>
-            {index !== 0 && <ChevronRight className="flex-shrink-0 !w-3 !h-3 top-[0.5px] relative" />}
-            <span>{str}</span>
-          </div>
-        );
-      })}
-    </div>
+    <Tooltip disableHoverableContent={true} open={sliceAt === 0 ? false : undefined}>
+      <TooltipTrigger>
+        <div
+          {...props}
+          className={cn("flex items-center gap-1", className)}
+        >
+          {parts.slice(-sliceAt).map((str, index) => {
+            return (
+              <div className="flex items-center gap-1" key={str + index}>
+                {index !== 0 && (
+                  <ChevronRight className="relative top-[0.9px] !h-3 !w-3 flex-shrink-0" />
+                )}
+                {str.includes("[*]") ? (
+                  <>
+                    {str.replace("[*]", "")}
+                    <Asterisk className="relative top-[0.9px] !h-3 !w-3 flex-shrink-0" />
+                  </>
+                ) : str === "*" ? (
+                  <Asterisk className="relative top-[0.9px] !h-3 !w-3 flex-shrink-0" />
+                ) : (
+                  str
+                )}
+              </div>
+            );
+          })}
+        </div>
+      </TooltipTrigger>
+      <TooltipContent align="start">
+        <p>{children}</p>
+      </TooltipContent>
+    </Tooltip>
   );
 }