update ui

Author: AlemTuzlak

packages/react-router-devtools/src/client/components/RouteToggle.tsx

@@ -12,6 +12,7 @@ export const RouteToggle = () => {
 				className={cx(styles.routeToggle.icon, routeViewMode === "tree" && styles.routeToggle.iconActive)}
 				onClick={() => setSettings({ routeViewMode: "tree" })}
 				name="Network"
+				title="Grid"
 			/>
 			/
 			<Icon

packages/react-router-devtools/src/client/components/TabContent.tsx

@@ -0,0 +1,10 @@
+import { useStyles } from "../styles/use-styles.js"
+
+interface TabContentProps {
+	children: React.ReactNode
+}
+
+export const TabContent = ({ children }: TabContentProps) => {
+	const { styles } = useStyles()
+	return <div className={styles.tabContent.container}>{children}</div>
+}

packages/react-router-devtools/src/client/components/TabHeader.tsx

@@ -0,0 +1,22 @@
+import type { ReactNode } from "react"
+import { cx, useStyles } from "../styles/use-styles.js"
+
+interface TabHeaderProps {
+	icon: ReactNode
+	title: string
+	rightContent?: ReactNode
+	gradientDirection?: "ltr" | "rtl"
+}
+
+export const TabHeader = ({ icon, title, rightContent, gradientDirection = "ltr" }: TabHeaderProps) => {
+	const { styles } = useStyles()
+	return (
+		<div className={cx(styles.tabHeader.container, gradientDirection === "rtl" && styles.tabHeader.containerRtl)}>
+			<div className={styles.tabHeader.leftContent}>
+				{icon}
+				<h2 className={styles.tabHeader.title}>{title}</h2>
+			</div>
+			{rightContent && <div className={styles.tabHeader.rightContent}>{rightContent}</div>}
+		</div>
+	)
+}

packages/react-router-devtools/src/client/components/icon/Icon.tsx

@@ -17,6 +17,7 @@ type IconSizes = keyof typeof IconSize
 
 interface IconProps extends SVGProps<SVGSVGElement> {
 	name: IconName
+	title?: string
 	testId?: string
 	className?: string
 	size?: IconSizes
@@ -29,7 +30,7 @@ const strokeIcon: Partial<IconName>[] = []
  * Icon component wrapper for SVG icons.
  * @returns SVG icon as a react component
  */
-export const Icon = ({ name, testId, className, size = "sm", ...props }: IconProps) => {
+export const Icon = ({ name, title, testId, className, size = "sm", ...props }: IconProps) => {
 	const { styles } = useStyles()
 	const iconSize = IconSize[size]
 	const isEmptyFill = emptyFill.includes(name)
@@ -46,7 +47,7 @@ export const Icon = ({ name, testId, className, size = "sm", ...props }: IconPro
 			data-name={name}
 			{...props}
 		>
-			<title>{name}</title>
+			<title>{title ?? name}</title>
 			<defs>
 				<symbol
 					id="Layout"

packages/react-router-devtools/src/client/hooks/useTabs.ts

@@ -1,12 +1,9 @@
 import { useMemo } from "react"
-import type { ReactRouterDevtoolsState } from "../context/rdtReducer.js"
 import { useSettingsContext } from "../context/useRDTContext.js"
 import type { ReactRouterDevtoolsProps } from "../react-router-dev-tools.js"
 import { type Tab, tabs } from "../tabs/index.js"
-import type { Tabs } from "../tabs/index.js"
 
-const shouldHideTimeline = (activeTab: Tabs, tab: Tab | undefined, settings: ReactRouterDevtoolsState["settings"]) => {
-	if (activeTab === "routes" && settings.routeViewMode === "tree") return true
+const shouldHideTimeline = (tab: Tab | undefined) => {
 	return tab?.hideTimeline
 }
 
@@ -18,8 +15,8 @@ export const useTabs = (pluginsArray?: ReactRouterDevtoolsProps["plugins"]) => {
 
 	const { Component, hideTimeline } = useMemo(() => {
 		const tab = allTabs.find((tab) => tab.id === activeTab)
-		return { Component: tab?.component, hideTimeline: shouldHideTimeline(activeTab, tab, settings) }
-	}, [activeTab, allTabs, settings])
+		return { Component: tab?.component, hideTimeline: shouldHideTimeline(tab) }
+	}, [activeTab, allTabs])
 
 	return {
 		visibleTabs: allTabs,

packages/react-router-devtools/src/client/layout/Tabs.tsx

@@ -35,6 +35,7 @@ const Tab = ({
 		<div
 			data-testid={tab.id}
 			onClick={() => (onClick ? onClick() : setSettings({ activeTab: tab.id as TabsType }))}
+			title={typeof tab.name === "string" ? tab.name : undefined}
 			className={cx(
 				"group",
 				styles.layout.tabs.tab,
@@ -43,7 +44,6 @@ const Tab = ({
 			)}
 		>
 			<div className={cx(className, styles.layout.tabs.tabIcon)}>{tab.icon}</div>
-			<div className={styles.layout.tabs.tabTooltip}>{tab.name}</div>
 		</div>
 	)
 }