Use fade-out effect for workspace tab text overflow + make input more aesthetic

apps/desktop/src/renderer/screens/main/components/TopBar/WorkspaceTabs/WorkspaceItem.tsx

@@ -1,4 +1,5 @@
 import { Button } from "@superset/ui/button";
+import { Input } from "@superset/ui/input";
 import { cn } from "@superset/ui/utils";
 import { useState } from "react";
 import { useDrag, useDrop } from "react-dnd";
@@ -112,20 +113,28 @@ export function WorkspaceItem({
 						style={{ cursor: isDragging ? "grabbing" : "pointer" }}
 					>
 						{rename.isRenaming ? (
-							<input
+							<Input
 								ref={rename.inputRef}
-								type="text"
+								variant="ghost"
 								value={rename.renameValue}
 								onChange={(e) => rename.setRenameValue(e.target.value)}
 								onBlur={rename.submitRename}
 								onKeyDown={rename.handleKeyDown}
 								onClick={(e) => e.stopPropagation()}
 								onMouseDown={(e) => e.stopPropagation()}
-								className="flex-1 min-w-0 bg-muted border border-primary rounded px-1 py-0.5 text-sm outline-none"
+								className="flex-1 min-w-0 px-1 py-0.5"
 							/>
 						) : (
 							<>
-								<span className="text-sm whitespace-nowrap truncate flex-1 text-left">
+								<span
+									className="text-sm whitespace-nowrap overflow-hidden flex-1 text-left"
+									style={{
+										maskImage:
+											"linear-gradient(to right, black calc(100% - 16px), transparent 100%)",
+										WebkitMaskImage:
+											"linear-gradient(to right, black calc(100% - 16px), transparent 100%)",
+									}}
+								>
 									{title}
 								</span>
 								{needsAttention && (

apps/desktop/src/renderer/screens/main/components/WorkspaceView/Sidebar/TabsView/TabItem/index.tsx

@@ -1,4 +1,5 @@
 import { Button } from "@superset/ui/button";
+import { Input } from "@superset/ui/input";
 import { useState } from "react";
 import { HiChevronRight, HiMiniXMark } from "react-icons/hi2";
 import { trpc } from "renderer/lib/trpc";
@@ -132,15 +133,15 @@ export function TabItem({ tab, childTabs = [] }: TabItemProps) {
 							</button>
 						)}
 						{rename.isRenaming ? (
-							<input
+							<Input
 								ref={rename.inputRef}
-								type="text"
+								variant="ghost"
 								value={rename.renameValue}
 								onChange={(e) => rename.setRenameValue(e.target.value)}
 								onBlur={rename.submitRename}
 								onKeyDown={rename.handleKeyDown}
 								onClick={(e) => e.stopPropagation()}
-								className="flex-1 bg-tertiary-active border border-primary rounded px-1 py-0.5 text-sm outline-none"
+								className="flex-1 px-1 py-0.5"
 							/>
 						) : (
 							<>

packages/ui/src/components/input.tsx

@@ -2,17 +2,25 @@ import type * as React from "react";
 
 import { cn } from "../lib/utils";
 
-function Input({ className, type, ...props }: React.ComponentProps<"input">) {
+const inputVariants = {
+	default: [
+		"file:text-foreground placeholder:text-muted-foreground selection:bg-primary selection:text-primary-foreground dark:bg-input/30 border-input h-9 w-full min-w-0 rounded-md border bg-transparent px-3 py-1 text-base shadow-xs transition-[color,box-shadow] outline-none file:inline-flex file:h-7 file:border-0 file:bg-transparent file:text-sm file:font-medium disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 md:text-sm",
+		"focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px]",
+		"aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive",
+	],
+	ghost: "bg-transparent outline-none text-sm",
+};
+
+interface InputProps extends React.ComponentProps<"input"> {
+	variant?: keyof typeof inputVariants;
+}
+
+function Input({ className, type, variant = "default", ...props }: InputProps) {
 	return (
 		<input
 			type={type}
 			data-slot="input"
-			className={cn(
-				"file:text-foreground placeholder:text-muted-foreground selection:bg-primary selection:text-primary-foreground dark:bg-input/30 border-input h-9 w-full min-w-0 rounded-md border bg-transparent px-3 py-1 text-base shadow-xs transition-[color,box-shadow] outline-none file:inline-flex file:h-7 file:border-0 file:bg-transparent file:text-sm file:font-medium disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 md:text-sm",
-				"focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px]",
-				"aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive",
-				className,
-			)}
+			className={cn(inputVariants[variant], className)}
 			{...props}
 		/>
 	);