From 01646c9ca241f03b9086e9df1e00990af0891a08 Mon Sep 17 00:00:00 2001
From: Pat Needham <patrick.h.needham@gmail.com>
Date: Tue, 28 May 2024 16:39:50 -0400
Subject: [PATCH 01/21] tooltip hydration fallback and text

---
 .../api.v1+/artwork-version.update.starred.tsx    | 15 ++++++++++++---
 1 file changed, 12 insertions(+), 3 deletions(-)

diff --git a/app/routes/resources+/api.v1+/artwork-version.update.starred.tsx b/app/routes/resources+/api.v1+/artwork-version.update.starred.tsx
index f0b90a39..172f6683 100644
--- a/app/routes/resources+/api.v1+/artwork-version.update.starred.tsx
+++ b/app/routes/resources+/api.v1+/artwork-version.update.starred.tsx
@@ -79,6 +79,9 @@ export const ArtworkVersionToggleStarred = ({
 	const isStarred = version.starred
 	const icon = isStarred ? 'star-filled' : 'star'
 	const iconText = isStarred ? 'Unstar version' : 'Star version'
+	const tooltipText = isStarred
+		? 'Remove from starred versions'
+		: 'Add to starred versions'
 
 	const fetcher = useFetcher<typeof action>()
 	const lastSubmission = fetcher.data?.submission
@@ -89,7 +92,6 @@ export const ArtworkVersionToggleStarred = ({
 		constraint: getFieldsetConstraint(schema),
 		lastSubmission,
 	})
-
 	return (
 		<fetcher.Form method="POST" action={route} {...form.props}>
 			<AuthenticityTokenInput />
@@ -108,10 +110,17 @@ export const ArtworkVersionToggleStarred = ({
 								disabled={isPending}
 							/>
 						</TooltipTrigger>
-						<TooltipContent>{iconText}</TooltipContent>
+						<TooltipContent>{tooltipText}</TooltipContent>
 					</Tooltip>
 				</TooltipProvider>
-			) : null}
+			) : (
+				<PanelIconButton
+					type="submit"
+					iconName={icon}
+					iconText={iconText}
+					disabled={isPending}
+				/>
+			)}
 		</fetcher.Form>
 	)
 }

From 0feae7b5cdeb9863296f8d300f98bf77a992393a Mon Sep 17 00:00:00 2001
From: Pat Needham <patrick.h.needham@gmail.com>
Date: Tue, 28 May 2024 17:04:25 -0400
Subject: [PATCH 02/21] tooltip hydration fallback and text; dialog factory
 components created

---
 app/components/layout/dialog/dialog-form.tsx  | 15 ++++++
 app/components/layout/dialog/index.ts         |  1 +
 .../api.v1+/artwork-branch.create.tsx         | 54 ++++++++++++-------
 .../header.artwork.button-group.tsx           |  1 -
 4 files changed, 50 insertions(+), 21 deletions(-)
 create mode 100644 app/components/layout/dialog/dialog-form.tsx
 create mode 100644 app/components/layout/dialog/index.ts

diff --git a/app/components/layout/dialog/dialog-form.tsx b/app/components/layout/dialog/dialog-form.tsx
new file mode 100644
index 00000000..050f9c81
--- /dev/null
+++ b/app/components/layout/dialog/dialog-form.tsx
@@ -0,0 +1,15 @@
+import { createContainerComponent } from '../utils'
+
+const DialogContentGrid = createContainerComponent({
+	defaultTagName: 'div',
+	defaultClassName: 'grid gap-4 py-4',
+	displayName: 'DialogContentGrid',
+})
+
+const DialogFormsContainer = createContainerComponent({
+	defaultTagName: 'div',
+	defaultClassName: 'grid gap-2',
+	displayName: 'DialogFormsContainer',
+})
+
+export { DialogContentGrid, DialogFormsContainer }
diff --git a/app/components/layout/dialog/index.ts b/app/components/layout/dialog/index.ts
new file mode 100644
index 00000000..245b0bc7
--- /dev/null
+++ b/app/components/layout/dialog/index.ts
@@ -0,0 +1 @@
+export * from './dialog-form'
diff --git a/app/routes/resources+/api.v1+/artwork-branch.create.tsx b/app/routes/resources+/api.v1+/artwork-branch.create.tsx
index c834426e..9418db64 100644
--- a/app/routes/resources+/api.v1+/artwork-branch.create.tsx
+++ b/app/routes/resources+/api.v1+/artwork-branch.create.tsx
@@ -11,6 +11,10 @@ import { AuthenticityTokenInput } from 'remix-utils/csrf/react'
 import { redirectBack } from 'remix-utils/redirect-back'
 import { useHydrated } from 'remix-utils/use-hydrated'
 import { Field, TextareaField } from '#app/components/forms'
+import {
+	DialogContentGrid,
+	DialogFormsContainer,
+} from '#app/components/layout/dialog'
 import {
 	Dialog,
 	DialogContent,
@@ -22,6 +26,12 @@ import {
 } from '#app/components/ui/dialog'
 import { PanelIconButton } from '#app/components/ui/panel-icon-button'
 import { StatusButton } from '#app/components/ui/status-button'
+import {
+	Tooltip,
+	TooltipContent,
+	TooltipProvider,
+	TooltipTrigger,
+} from '#app/components/ui/tooltip'
 import { type IArtwork } from '#app/models/artwork/artwork.server'
 import { validateNewArtworkBranchSubmission } from '#app/models/artwork-branch/artwork-branch.create.server'
 import { type IArtworkBranch } from '#app/models/artwork-branch/artwork-branch.server'
@@ -82,22 +92,20 @@ export const ArtworkBranchCreate = ({
 	branchId,
 	artworkId,
 	versionId,
-	formId,
 }: {
 	branchId: IArtworkBranch['id']
 	artworkId: IArtwork['id']
 	versionId: IArtworkVersion['id']
-	formId: string
 }) => {
 	const [open, setOpen] = useState(false)
 
 	const fetcher = useFetcher<typeof action>()
 	const isPending = useIsPending()
 	const navigate = useNavigate()
-
 	let isHydrated = useHydrated()
+
 	const [form, fields] = useForm({
-		id: `${formId}-${artworkId}-${branchId}-${versionId}`,
+		id: `artwork-branch-create-${artworkId}-${branchId}-${versionId}`,
 		constraint: getFieldsetConstraint(schema),
 		lastSubmission: fetcher.data?.submission,
 		onValidate: ({ formData }) => {
@@ -120,25 +128,31 @@ export const ArtworkBranchCreate = ({
 
 	return (
 		<Dialog open={open} onOpenChange={setOpen}>
-			{/* Warning: Expected server HTML to contain a matching <button> in <button>. */}
-			{/* <TooltipIconDialogTrigger
-				icon="file-plus"
-				text="New Branch"
-				tooltipText="Create a new branch from current branch and version..."
-			/> */}
-			{/* Tooltip on dialog is not a priority right now */}
-			<DialogTrigger asChild>
-				<PanelIconButton iconName="file-plus" iconText="New Branch" />
-			</DialogTrigger>
+			{isHydrated ? (
+				<TooltipProvider>
+					<Tooltip>
+						<TooltipTrigger asChild>
+							<DialogTrigger asChild>
+								<PanelIconButton iconName="file-plus" iconText="New Branch" />
+							</DialogTrigger>
+						</TooltipTrigger>
+						<TooltipContent>New branch...</TooltipContent>
+					</Tooltip>
+				</TooltipProvider>
+			) : (
+				<DialogTrigger asChild>
+					<PanelIconButton iconName="file-plus" iconText="New Branch" />
+				</DialogTrigger>
+			)}
 			<DialogContent className="sm:max-w-[425px]">
 				<DialogHeader>
 					<DialogTitle>Create a new branch</DialogTitle>
 					<DialogDescription>
-						Save a new branch of this artwork. Add a name and description to
-						help understand the changes. Click save when you're done.
+						Start a new branch for this artwork off the current settings. Add a
+						name and description to help understand the changes.
 					</DialogDescription>
 				</DialogHeader>
-				<div className="grid gap-4 py-4">
+				<DialogContentGrid>
 					<fetcher.Form method="POST" action={route} {...form.props}>
 						<AuthenticityTokenInput />
 
@@ -147,7 +161,7 @@ export const ArtworkBranchCreate = ({
 						<input type="hidden" name="artworkId" value={artworkId} />
 						<input type="hidden" name="versionId" value={versionId} />
 
-						<div className="grid grid-cols-4 items-center gap-4">
+						<DialogFormsContainer>
 							<Field
 								labelProps={{ children: 'Name' }}
 								inputProps={{
@@ -165,9 +179,9 @@ export const ArtworkBranchCreate = ({
 								}}
 								errors={fields.description.errors}
 							/>
-						</div>
+						</DialogFormsContainer>
 					</fetcher.Form>
-				</div>
+				</DialogContentGrid>
 				<DialogFooter>
 					<StatusButton
 						form={form.id}
diff --git a/app/routes/sketch+/projects+/$projectSlug_+/artworks+/$artworkSlug+/__components/header.artwork.button-group.tsx b/app/routes/sketch+/projects+/$projectSlug_+/artworks+/$artworkSlug+/__components/header.artwork.button-group.tsx
index 0e6c8399..f8713cbb 100644
--- a/app/routes/sketch+/projects+/$projectSlug_+/artworks+/$artworkSlug+/__components/header.artwork.button-group.tsx
+++ b/app/routes/sketch+/projects+/$projectSlug_+/artworks+/$artworkSlug+/__components/header.artwork.button-group.tsx
@@ -38,7 +38,6 @@ export const NavActionsButtonGroup = memo(
 						branchId={branch.id}
 						artworkId={artwork.id}
 						versionId={version.id}
-						formId="artwork-branch-create"
 					/>
 					<ArtworkVersionCreate
 						entityId={version.id}

From 8f9b0c6799ca352547cc837c6c805246fd70ccff Mon Sep 17 00:00:00 2001
From: Pat Needham <patrick.h.needham@gmail.com>
Date: Tue, 28 May 2024 17:31:39 -0400
Subject: [PATCH 03/21] tooltip hydration fallback and text; dialog factory
 components; more instructions about version

---
 .../api.v1+/artwork-branch.create.tsx         |   4 +-
 .../api.v1+/artwork-version.create.tsx        | 114 +++++++++---------
 .../header.artwork.button-group.tsx           |   7 +-
 app/schema/artwork-version.ts                 |   2 +-
 .../artwork/branch/version/create.service.ts  |   8 +-
 .../validate-submission.strategy.ts           |   4 +-
 6 files changed, 69 insertions(+), 70 deletions(-)

diff --git a/app/routes/resources+/api.v1+/artwork-branch.create.tsx b/app/routes/resources+/api.v1+/artwork-branch.create.tsx
index 9418db64..da590d72 100644
--- a/app/routes/resources+/api.v1+/artwork-branch.create.tsx
+++ b/app/routes/resources+/api.v1+/artwork-branch.create.tsx
@@ -89,12 +89,12 @@ export async function action({ request }: ActionFunctionArgs) {
 }
 
 export const ArtworkBranchCreate = ({
-	branchId,
 	artworkId,
+	branchId,
 	versionId,
 }: {
-	branchId: IArtworkBranch['id']
 	artworkId: IArtwork['id']
+	branchId: IArtworkBranch['id']
 	versionId: IArtworkVersion['id']
 }) => {
 	const [open, setOpen] = useState(false)
diff --git a/app/routes/resources+/api.v1+/artwork-version.create.tsx b/app/routes/resources+/api.v1+/artwork-version.create.tsx
index 318b81d3..041e1549 100644
--- a/app/routes/resources+/api.v1+/artwork-version.create.tsx
+++ b/app/routes/resources+/api.v1+/artwork-version.create.tsx
@@ -11,6 +11,10 @@ import { AuthenticityTokenInput } from 'remix-utils/csrf/react'
 import { redirectBack } from 'remix-utils/redirect-back'
 import { useHydrated } from 'remix-utils/use-hydrated'
 import { TextareaField } from '#app/components/forms'
+import {
+	DialogContentGrid,
+	DialogFormsContainer,
+} from '#app/components/layout/dialog'
 import {
 	Dialog,
 	DialogContent,
@@ -22,13 +26,16 @@ import {
 } from '#app/components/ui/dialog'
 import { PanelIconButton } from '#app/components/ui/panel-icon-button'
 import { StatusButton } from '#app/components/ui/status-button'
+import {
+	Tooltip,
+	TooltipContent,
+	TooltipProvider,
+	TooltipTrigger,
+} from '#app/components/ui/tooltip'
+import { type IArtworkBranch } from '#app/models/artwork-branch/artwork-branch.server'
 import { validateNewArtworkVersionSubmission } from '#app/models/artwork-version/artwork-version.create.server'
+import { type IArtworkVersion } from '#app/models/artwork-version/artwork-version.server'
 import { NewArtworkVersionSchema } from '#app/schema/artwork-version'
-import {
-	type IEntityId,
-	type IEntityParentId,
-	type entityParentIdTypeEnum,
-} from '#app/schema/entity'
 import { validateNoJS } from '#app/schema/form-data'
 import { artworkVersionCreateService } from '#app/services/artwork/branch/version/create.service'
 import { requireUserId } from '#app/utils/auth.server'
@@ -79,16 +86,12 @@ export async function action({ request }: ActionFunctionArgs) {
 }
 
 export const ArtworkVersionCreate = ({
-	entityId,
-	parentTypeId,
-	parentId,
-	formId,
+	branchId,
+	versionId,
 	onOlderVersion,
 }: {
-	entityId?: IEntityId
-	parentTypeId?: entityParentIdTypeEnum
-	parentId?: IEntityParentId
-	formId: string
+	branchId: IArtworkBranch['id']
+	versionId: IArtworkVersion['id']
 	onOlderVersion: boolean
 }) => {
 	const [open, setOpen] = useState(false)
@@ -97,10 +100,10 @@ export const ArtworkVersionCreate = ({
 	const isPending = useIsPending()
 	const params = useParams()
 	const navigate = useNavigate()
-
 	let isHydrated = useHydrated()
+
 	const [form, fields] = useForm({
-		id: `${formId}-${parentId || 'parent'}-${entityId || 'new'}`,
+		id: `artwork-version-create-${branchId || 'parent'}-${versionId || 'new'}`,
 		constraint: getFieldsetConstraint(schema),
 		lastSubmission: fetcher.data?.submission,
 		defaultValue: {
@@ -122,52 +125,44 @@ export const ArtworkVersionCreate = ({
 
 	return (
 		<Dialog open={open} onOpenChange={setOpen}>
-			{/* Warning: Expected server HTML to contain a matching <button> in <button>. */}
-			{/* <TooltipIconDialogTrigger
-				icon="card-stack-plus"
-				text="New Version"
-				tooltipText="Save current changes to new version..."
-			/> */}
-
-			{/* Tooltip on dialog is not a priority right now */}
-			<DialogTrigger asChild>
-				<PanelIconButton iconName="card-stack-plus" iconText="New Version" />
-			</DialogTrigger>
-
-			{/* <TooltipProvider>
-				<Tooltip>
-					<TooltipTrigger>
-						<DialogTrigger asChild>
-							<PanelIconButton
-								iconName="card-stack-plus"
-								iconText="New Version"
-							/>
-						</DialogTrigger>
-					</TooltipTrigger>
-					<TooltipContent>
-						Save current changes to new version...
-					</TooltipContent>
-				</Tooltip>
-			</TooltipProvider> */}
+			{isHydrated ? (
+				<TooltipProvider>
+					<Tooltip>
+						<TooltipTrigger asChild>
+							<DialogTrigger asChild>
+								<PanelIconButton
+									iconName="card-stack-plus"
+									iconText="New Version"
+								/>
+							</DialogTrigger>
+						</TooltipTrigger>
+						<TooltipContent>Save version...</TooltipContent>
+					</Tooltip>
+				</TooltipProvider>
+			) : (
+				<DialogTrigger asChild>
+					<PanelIconButton iconName="card-stack-plus" iconText="New Version" />
+				</DialogTrigger>
+			)}
+
 			<DialogContent className="sm:max-w-[425px]">
 				<DialogHeader>
-					<DialogTitle>Create new version</DialogTitle>
+					<DialogTitle>Save version</DialogTitle>
 					<DialogDescription>
-						Save a new version of this artwork. Add a description to help
-						understand the changes. Click save when you're done.
+						Save current settings of this artwork to a version. Add a
+						description to help understand the changes. A new version will be
+						created from here.
 					</DialogDescription>
 				</DialogHeader>
-				<div className="grid gap-4 py-4">
+				<DialogContentGrid>
 					<fetcher.Form method="POST" action={route} {...form.props}>
 						<AuthenticityTokenInput />
 
 						<input type="hidden" name="no-js" value={String(!isHydrated)} />
-						<input type="hidden" name="id" value={entityId} />
-						{parentId && (
-							<input type="hidden" name={parentTypeId} value={parentId} />
-						)}
+						<input type="hidden" name="id" value={versionId} />
+						<input type="hidden" name="branchId" value={branchId} />
 
-						<div className="grid grid-cols-4 items-center gap-4">
+						<DialogFormsContainer>
 							<TextareaField
 								labelProps={{ children: 'Description' }}
 								textareaProps={{
@@ -177,15 +172,22 @@ export const ArtworkVersionCreate = ({
 								}}
 								errors={fields.description.errors}
 							/>
-						</div>
+						</DialogFormsContainer>
 					</fetcher.Form>
-					{onOlderVersion && (
+					{onOlderVersion ? (
 						<p className="body-md pt-4 text-destructive">
-							Creating a new version will erase all versions after the current
-							version.
+							WARNING: Saving the version before "latest" will erase all
+							versions after the current version. Consider creating a new branch
+							instead if you want to keep the existing versions.
+						</p>
+					) : (
+						<p className="body-md pt-4">
+							To undo version history, just save a version from the last desired
+							version before the "latest" and all existing versions after that
+							will be replaced.
 						</p>
 					)}
-				</div>
+				</DialogContentGrid>
 				<DialogFooter>
 					<StatusButton
 						form={form.id}
diff --git a/app/routes/sketch+/projects+/$projectSlug_+/artworks+/$artworkSlug+/__components/header.artwork.button-group.tsx b/app/routes/sketch+/projects+/$projectSlug_+/artworks+/$artworkSlug+/__components/header.artwork.button-group.tsx
index f8713cbb..375fc23d 100644
--- a/app/routes/sketch+/projects+/$projectSlug_+/artworks+/$artworkSlug+/__components/header.artwork.button-group.tsx
+++ b/app/routes/sketch+/projects+/$projectSlug_+/artworks+/$artworkSlug+/__components/header.artwork.button-group.tsx
@@ -7,7 +7,6 @@ import { type IArtworkVersion } from '#app/models/artwork-version/artwork-versio
 import { ArtworkBranchCreate } from '#app/routes/resources+/api.v1+/artwork-branch.create'
 import { ArtworkVersionCreate } from '#app/routes/resources+/api.v1+/artwork-version.create'
 import { ArtworkVersionToggleStarred } from '#app/routes/resources+/api.v1+/artwork-version.update.starred'
-import { EntityParentIdType } from '#app/schema/entity'
 import { useUser } from '#app/utils/user'
 
 export const NavActionsButtonGroup = memo(
@@ -40,10 +39,8 @@ export const NavActionsButtonGroup = memo(
 						versionId={version.id}
 					/>
 					<ArtworkVersionCreate
-						entityId={version.id}
-						parentId={branch.id}
-						parentTypeId={EntityParentIdType.ARTWORK_BRANCH_ID}
-						formId="artwork-version-create"
+						branchId={branch.id}
+						versionId={version.id}
 						onOlderVersion={!onLatestVersion}
 					/>
 					<TooltipIconLink
diff --git a/app/schema/artwork-version.ts b/app/schema/artwork-version.ts
index da979105..fd7828a8 100644
--- a/app/schema/artwork-version.ts
+++ b/app/schema/artwork-version.ts
@@ -82,6 +82,6 @@ export const ArtworkVersionDataCreateSchema = z.object({
 
 export const NewArtworkVersionSchema = z.object({
 	id: z.string(),
-	artworkBranchId: z.string(),
+	branchId: z.string(),
 	description: z.string(),
 })
diff --git a/app/services/artwork/branch/version/create.service.ts b/app/services/artwork/branch/version/create.service.ts
index a6aafaea..420126ec 100644
--- a/app/services/artwork/branch/version/create.service.ts
+++ b/app/services/artwork/branch/version/create.service.ts
@@ -26,12 +26,12 @@ import { artworkVersionCloneLayersService } from '../../version/clone-layers.ser
 export const artworkVersionCreateService = async ({
 	userId,
 	id,
-	artworkBranchId,
+	branchId,
 	description,
 }: {
 	userId: User['id']
 	id: IArtworkVersion['id']
-	artworkBranchId: IArtworkBranch['id']
+	branchId: IArtworkBranch['id']
 	description: string
 }): Promise<IArtworkVersionCreatedResponse> => {
 	try {
@@ -49,7 +49,7 @@ export const artworkVersionCreateService = async ({
 		const newName = incrementVersionNameString(name)
 		const data = ArtworkVersionDataCreateSchema.parse({
 			ownerId: userId,
-			branchId: artworkBranchId,
+			branchId,
 			name: newName,
 			slug: newName,
 			description: description || 'new version',
@@ -61,7 +61,7 @@ export const artworkVersionCreateService = async ({
 		// Step 3: delete all artwork versions after the current artwork version
 		// getting multiple heads and tails on v1...
 		const artworkVersions = await getArtworkVersions({
-			where: { branchId: artworkBranchId },
+			where: { branchId },
 		})
 		const deleteArtworkVersionsPromise = deleteArtworkVersionsAfterCurrent({
 			id,
diff --git a/app/strategies/validate-submission.strategy.ts b/app/strategies/validate-submission.strategy.ts
index ba0be83f..3d36553e 100644
--- a/app/strategies/validate-submission.strategy.ts
+++ b/app/strategies/validate-submission.strategy.ts
@@ -47,9 +47,9 @@ export class ValidateArtworkBranchParentSubmissionStrategy
 		data: any
 		ctx: any
 	}): Promise<void> {
-		const { artworkBranchId } = data
+		const { branchId } = data
 		const artworkBranch = await getArtworkBranch({
-			where: { id: artworkBranchId, ownerId: userId },
+			where: { id: branchId, ownerId: userId },
 		})
 		if (!artworkBranch) ctx.addIssue(addNotFoundIssue('ArtworkBranch'))
 	}

From 9057b55c407dd92fdf1fb60d187b2ee8b8aebe1f Mon Sep 17 00:00:00 2001
From: Pat Needham <patrick.h.needham@gmail.com>
Date: Tue, 28 May 2024 17:34:17 -0400
Subject: [PATCH 04/21] tooltip hydration fallback and text

---
 .../api.v1+/artwork-version.design.create.tsx | 37 ++++++++++++++++---
 1 file changed, 31 insertions(+), 6 deletions(-)

diff --git a/app/routes/resources+/api.v1+/artwork-version.design.create.tsx b/app/routes/resources+/api.v1+/artwork-version.design.create.tsx
index 41a9d0a6..2abedd84 100644
--- a/app/routes/resources+/api.v1+/artwork-version.design.create.tsx
+++ b/app/routes/resources+/api.v1+/artwork-version.design.create.tsx
@@ -10,6 +10,12 @@ import { AuthenticityTokenInput } from 'remix-utils/csrf/react'
 import { redirectBack } from 'remix-utils/redirect-back'
 import { useHydrated } from 'remix-utils/use-hydrated'
 import { PanelIconButton } from '#app/components/ui/panel-icon-button'
+import {
+	Tooltip,
+	TooltipContent,
+	TooltipProvider,
+	TooltipTrigger,
+} from '#app/components/ui/tooltip'
 import { type IArtworkVersion } from '#app/models/artwork-version/artwork-version.server'
 import { validateArtworkVersionNewDesignSubmission } from '#app/models/design-artwork-version/design-artwork-version.create.server'
 import { type designTypeEnum } from '#app/schema/design'
@@ -72,10 +78,13 @@ export const ArtworkVersionDesignCreate = ({
 	type: designTypeEnum
 	versionId: IArtworkVersion['id']
 }) => {
+	const iconText = `Add new ${type}`
+
 	const fetcher = useFetcher<typeof action>()
 	const lastSubmission = fetcher.data?.submission
 	const isPending = useIsPending()
 	let isHydrated = useHydrated()
+
 	const [form] = useForm({
 		id: `artwork-version-design-create-${versionId}-new`,
 		constraint: getFieldsetConstraint(schema),
@@ -94,12 +103,28 @@ export const ArtworkVersionDesignCreate = ({
 			/>
 			<input type="hidden" name="type" value={type} />
 
-			<PanelIconButton
-				type="submit"
-				iconName="plus"
-				iconText={`Add new ${type}`}
-				disabled={isPending}
-			/>
+			{isHydrated ? (
+				<TooltipProvider>
+					<Tooltip>
+						<TooltipTrigger asChild>
+							<PanelIconButton
+								type="submit"
+								iconName="plus"
+								iconText={iconText}
+								disabled={isPending}
+							/>
+						</TooltipTrigger>
+						<TooltipContent>{iconText}</TooltipContent>
+					</Tooltip>
+				</TooltipProvider>
+			) : (
+				<PanelIconButton
+					type="submit"
+					iconName="plus"
+					iconText={iconText}
+					disabled={isPending}
+				/>
+			)}
 		</fetcher.Form>
 	)
 }

From 9e24660f78db06546e98356cd9343ef3a983450e Mon Sep 17 00:00:00 2001
From: Pat Needham <patrick.h.needham@gmail.com>
Date: Tue, 28 May 2024 17:59:52 -0400
Subject: [PATCH 05/21] tooltip hydration fallback and text; comment

---
 .../dashboard-entity-panel.actions.delete.tsx |  8 +++-
 .../api.v1+/artwork-version.design.delete.tsx | 42 +++++++++++++++----
 2 files changed, 41 insertions(+), 9 deletions(-)

diff --git a/app/components/templates/panel/dashboard-entity-panel.actions.delete.tsx b/app/components/templates/panel/dashboard-entity-panel.actions.delete.tsx
index 42a552de..cf6e2c0e 100644
--- a/app/components/templates/panel/dashboard-entity-panel.actions.delete.tsx
+++ b/app/components/templates/panel/dashboard-entity-panel.actions.delete.tsx
@@ -1,4 +1,5 @@
 import { memo, useCallback } from 'react'
+import { type IDesign } from '#app/models/design/design.server'
 import { ArtworkVersionDesignDelete } from '#app/routes/resources+/api.v1+/artwork-version.design.delete'
 import { LayerDesignDelete } from '#app/routes/resources+/api.v1+/layer.design.delete'
 import {
@@ -24,11 +25,16 @@ const ArtworkVersionDeleteChildEntityForm = memo(
 			case EntityType.DESIGN:
 				return (
 					<ArtworkVersionDesignDelete
-						designId={entity.id}
+						design={entity as IDesign}
 						versionId={parent.id}
 					/>
 				)
 			case EntityType.LAYER:
+				// artwork version layer delete not on panel actions
+				// could be too easy to click and create a cascade of actions
+				// delete is inside popover
+				// keeping this here so if it shows up somehow,
+				// it will stick out sorely and this decision will be remembered
 				return 'av l'
 			default:
 				console.log('unknown artwork version entity type', entityType)
diff --git a/app/routes/resources+/api.v1+/artwork-version.design.delete.tsx b/app/routes/resources+/api.v1+/artwork-version.design.delete.tsx
index 474c0edd..73dac1ee 100644
--- a/app/routes/resources+/api.v1+/artwork-version.design.delete.tsx
+++ b/app/routes/resources+/api.v1+/artwork-version.design.delete.tsx
@@ -10,6 +10,12 @@ import { AuthenticityTokenInput } from 'remix-utils/csrf/react'
 import { redirectBack } from 'remix-utils/redirect-back'
 import { useHydrated } from 'remix-utils/use-hydrated'
 import { PanelIconButton } from '#app/components/ui/panel-icon-button'
+import {
+	Tooltip,
+	TooltipContent,
+	TooltipProvider,
+	TooltipTrigger,
+} from '#app/components/ui/tooltip'
 import { type IArtworkVersion } from '#app/models/artwork-version/artwork-version.server'
 import { type IDesign } from '#app/models/design/design.server'
 import { validateArtworkVersionDeleteDesignSubmission } from '#app/models/design-artwork-version/design-artwork-version.delete.server'
@@ -66,16 +72,20 @@ export async function action({ request }: ActionFunctionArgs) {
 }
 
 export const ArtworkVersionDesignDelete = ({
-	designId,
+	design,
 	versionId,
 }: {
-	designId: IDesign['id']
+	design: IDesign
 	versionId: IArtworkVersion['id']
 }) => {
+	const designId = design.id
+	const iconText = `Delete ${design.type}`
+
 	const fetcher = useFetcher<typeof action>()
 	const lastSubmission = fetcher.data?.submission
 	const isPending = useIsPending()
 	let isHydrated = useHydrated()
+
 	const [form] = useForm({
 		id: `artwork-version-design-delete-${versionId}-${designId}`,
 		constraint: getFieldsetConstraint(schema),
@@ -94,12 +104,28 @@ export const ArtworkVersionDesignDelete = ({
 				value={versionId}
 			/>
 
-			<PanelIconButton
-				type="submit"
-				iconName="minus"
-				iconText="Delete design"
-				disabled={isPending}
-			/>
+			{isHydrated ? (
+				<TooltipProvider>
+					<Tooltip>
+						<TooltipTrigger asChild>
+							<PanelIconButton
+								type="submit"
+								iconName="minus"
+								iconText={iconText}
+								disabled={isPending}
+							/>
+						</TooltipTrigger>
+						<TooltipContent>{iconText}</TooltipContent>
+					</Tooltip>
+				</TooltipProvider>
+			) : (
+				<PanelIconButton
+					type="submit"
+					iconName="minus"
+					iconText={iconText}
+					disabled={isPending}
+				/>
+			)}
 		</fetcher.Form>
 	)
 }

From 196b940e5eee0f075a0793fc3e448380a8a3f398 Mon Sep 17 00:00:00 2001
From: Pat Needham <patrick.h.needham@gmail.com>
Date: Tue, 28 May 2024 18:06:52 -0400
Subject: [PATCH 06/21] tooltip hydration fallback and text

---
 .../artwork-version.design.update.order.tsx   | 40 +++++++++++++++----
 1 file changed, 32 insertions(+), 8 deletions(-)

diff --git a/app/routes/resources+/api.v1+/artwork-version.design.update.order.tsx b/app/routes/resources+/api.v1+/artwork-version.design.update.order.tsx
index f7ef47a0..779502ad 100644
--- a/app/routes/resources+/api.v1+/artwork-version.design.update.order.tsx
+++ b/app/routes/resources+/api.v1+/artwork-version.design.update.order.tsx
@@ -11,6 +11,12 @@ import { redirectBack } from 'remix-utils/redirect-back'
 import { useHydrated } from 'remix-utils/use-hydrated'
 import { type IconName } from '#app/components/ui/icon'
 import { PanelIconButton } from '#app/components/ui/panel-icon-button'
+import {
+	Tooltip,
+	TooltipContent,
+	TooltipProvider,
+	TooltipTrigger,
+} from '#app/components/ui/tooltip'
 import { type IArtworkVersion } from '#app/models/artwork-version/artwork-version.server'
 import { type IDesign } from '#app/models/design/design.server'
 import { validateArtworkVersionReorderDesignSubmission } from '#app/models/design-artwork-version/design-artwork-version.update.server'
@@ -114,14 +120,32 @@ export const ArtworkVersionDesignReorder = ({
 			/>
 			<input type="hidden" name="direction" value={direction} />
 
-			<PanelIconButton
-				type="submit"
-				iconName={icon as IconName}
-				iconText={iconText}
-				size="panel-sm"
-				disabled={atTopOrBottom || isPending}
-				className="my-0"
-			/>
+			{isHydrated ? (
+				<TooltipProvider>
+					<Tooltip>
+						<TooltipTrigger asChild>
+							<PanelIconButton
+								type="submit"
+								iconName={icon as IconName}
+								iconText={iconText}
+								size="panel-sm"
+								disabled={atTopOrBottom || isPending}
+								className="my-0"
+							/>
+						</TooltipTrigger>
+						<TooltipContent>{iconText}</TooltipContent>
+					</Tooltip>
+				</TooltipProvider>
+			) : (
+				<PanelIconButton
+					type="submit"
+					iconName={icon as IconName}
+					iconText={iconText}
+					size="panel-sm"
+					disabled={atTopOrBottom || isPending}
+					className="my-0"
+				/>
+			)}
 		</fetcher.Form>
 	)
 }

From d2a16b42ce50f81ace9f6fa42df2f3d0b4019e5e Mon Sep 17 00:00:00 2001
From: Pat Needham <patrick.h.needham@gmail.com>
Date: Tue, 28 May 2024 18:10:39 -0400
Subject: [PATCH 07/21] tooltip hydration fallback and text

---
 .../artwork-version.design.update.visible.tsx | 36 +++++++++++++++----
 1 file changed, 29 insertions(+), 7 deletions(-)

diff --git a/app/routes/resources+/api.v1+/artwork-version.design.update.visible.tsx b/app/routes/resources+/api.v1+/artwork-version.design.update.visible.tsx
index 9dede3c7..fe98cb98 100644
--- a/app/routes/resources+/api.v1+/artwork-version.design.update.visible.tsx
+++ b/app/routes/resources+/api.v1+/artwork-version.design.update.visible.tsx
@@ -10,6 +10,12 @@ import { AuthenticityTokenInput } from 'remix-utils/csrf/react'
 import { redirectBack } from 'remix-utils/redirect-back'
 import { useHydrated } from 'remix-utils/use-hydrated'
 import { PanelIconButton } from '#app/components/ui/panel-icon-button'
+import {
+	Tooltip,
+	TooltipContent,
+	TooltipProvider,
+	TooltipTrigger,
+} from '#app/components/ui/tooltip'
 import { type IArtworkVersion } from '#app/models/artwork-version/artwork-version.server'
 import { type IDesign } from '#app/models/design/design.server'
 import { validateArtworkVersionToggleVisibeDesignSubmission } from '#app/models/design-artwork-version/design-artwork-version.update.server'
@@ -76,7 +82,7 @@ export const ArtworkVersionDesignToggleVisible = ({
 	const designId = design.id
 	const isVisible = design.visible
 	const icon = isVisible ? 'eye-open' : 'eye-closed'
-	const iconText = isVisible ? 'Hide design' : 'Show design'
+	const iconText = `${isVisible ? 'Hide' : 'Show'} ${design.type}`
 
 	const fetcher = useFetcher<typeof action>()
 	const lastSubmission = fetcher.data?.submission
@@ -100,12 +106,28 @@ export const ArtworkVersionDesignToggleVisible = ({
 				value={versionId}
 			/>
 
-			<PanelIconButton
-				type="submit"
-				iconName={icon}
-				iconText={iconText}
-				disabled={isPending}
-			/>
+			{isHydrated ? (
+				<TooltipProvider>
+					<Tooltip>
+						<TooltipTrigger asChild>
+							<PanelIconButton
+								type="submit"
+								iconName={icon}
+								iconText={iconText}
+								disabled={isPending}
+							/>
+						</TooltipTrigger>
+						<TooltipContent>{iconText}</TooltipContent>
+					</Tooltip>
+				</TooltipProvider>
+			) : (
+				<PanelIconButton
+					type="submit"
+					iconName={icon}
+					iconText={iconText}
+					disabled={isPending}
+				/>
+			)}
 		</fetcher.Form>
 	)
 }

From ffa3674212e7847c4232de26943f0a361aae6b7b Mon Sep 17 00:00:00 2001
From: Pat Needham <patrick.h.needham@gmail.com>
Date: Tue, 28 May 2024 18:12:07 -0400
Subject: [PATCH 08/21] tooltip hydration fallback and text

---
 .../api.v1+/artwork-version.layer.create.tsx  | 36 +++++++++++++++----
 1 file changed, 30 insertions(+), 6 deletions(-)

diff --git a/app/routes/resources+/api.v1+/artwork-version.layer.create.tsx b/app/routes/resources+/api.v1+/artwork-version.layer.create.tsx
index 38a34b2f..a6dbeaae 100644
--- a/app/routes/resources+/api.v1+/artwork-version.layer.create.tsx
+++ b/app/routes/resources+/api.v1+/artwork-version.layer.create.tsx
@@ -10,6 +10,12 @@ import { AuthenticityTokenInput } from 'remix-utils/csrf/react'
 import { redirectBack } from 'remix-utils/redirect-back'
 import { useHydrated } from 'remix-utils/use-hydrated'
 import { PanelIconButton } from '#app/components/ui/panel-icon-button'
+import {
+	Tooltip,
+	TooltipContent,
+	TooltipProvider,
+	TooltipTrigger,
+} from '#app/components/ui/tooltip'
 import { type IArtworkVersion } from '#app/models/artwork-version/artwork-version.server'
 import { validateArtworkVersionNewLayerSubmission } from '#app/models/layer/layer.create.server'
 import { EntityParentIdType } from '#app/schema/entity'
@@ -70,6 +76,8 @@ export const ArtworkVersionLayerCreate = ({
 }: {
 	versionId: IArtworkVersion['id']
 }) => {
+	const iconText = 'Add new layer'
+
 	const fetcher = useFetcher<typeof action>()
 	const lastSubmission = fetcher.data?.submission
 	const isPending = useIsPending()
@@ -91,12 +99,28 @@ export const ArtworkVersionLayerCreate = ({
 				value={versionId}
 			/>
 
-			<PanelIconButton
-				type="submit"
-				iconName="plus"
-				iconText="Add new layer"
-				disabled={isPending}
-			/>
+			{isHydrated ? (
+				<TooltipProvider>
+					<Tooltip>
+						<TooltipTrigger asChild>
+							<PanelIconButton
+								type="submit"
+								iconName="plus"
+								iconText={iconText}
+								disabled={isPending}
+							/>
+						</TooltipTrigger>
+						<TooltipContent>{iconText}</TooltipContent>
+					</Tooltip>
+				</TooltipProvider>
+			) : (
+				<PanelIconButton
+					type="submit"
+					iconName="plus"
+					iconText={iconText}
+					disabled={isPending}
+				/>
+			)}
 		</fetcher.Form>
 	)
 }

From 43c70288253d34c397c9e8f4090f534f92acecf2 Mon Sep 17 00:00:00 2001
From: Pat Needham <patrick.h.needham@gmail.com>
Date: Tue, 28 May 2024 18:16:44 -0400
Subject: [PATCH 09/21] button text change on successful delete

---
 .../resources+/api.v1+/artwork-version.layer.delete.tsx      | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

diff --git a/app/routes/resources+/api.v1+/artwork-version.layer.delete.tsx b/app/routes/resources+/api.v1+/artwork-version.layer.delete.tsx
index f3f7ae71..8243e8c7 100644
--- a/app/routes/resources+/api.v1+/artwork-version.layer.delete.tsx
+++ b/app/routes/resources+/api.v1+/artwork-version.layer.delete.tsx
@@ -83,6 +83,7 @@ export const ArtworkVersionLayerDelete = ({
 
 	const fetcher = useFetcher<typeof action>()
 	const lastSubmission = fetcher.data?.submission
+	const isDeleted = fetcher.data?.status === 'success'
 	const isPending = useIsPending()
 	let isHydrated = useHydrated()
 	const [form] = useForm({
@@ -117,7 +118,9 @@ export const ArtworkVersionLayerDelete = ({
 				disabled={isPending}
 			>
 				<Icon name="trash" className="scale-125 max-md:scale-150">
-					<span className="max-md:hidden">Delete layer</span>
+					<span className="max-md:hidden">
+						{isDeleted ? 'Deleted' : 'Delete layer'}
+					</span>
 				</Icon>
 			</StatusButton>
 		</fetcher.Form>

From e892fd3cb3229e1f72b524508cb5c87e33607c1b Mon Sep 17 00:00:00 2001
From: Pat Needham <patrick.h.needham@gmail.com>
Date: Tue, 28 May 2024 18:17:51 -0400
Subject: [PATCH 10/21] tooltip hydration fallback and text

---
 .../artwork-version.layer.update.order.tsx    | 40 +++++++++++++++----
 1 file changed, 32 insertions(+), 8 deletions(-)

diff --git a/app/routes/resources+/api.v1+/artwork-version.layer.update.order.tsx b/app/routes/resources+/api.v1+/artwork-version.layer.update.order.tsx
index f8ec9a19..2884a6f3 100644
--- a/app/routes/resources+/api.v1+/artwork-version.layer.update.order.tsx
+++ b/app/routes/resources+/api.v1+/artwork-version.layer.update.order.tsx
@@ -11,6 +11,12 @@ import { redirectBack } from 'remix-utils/redirect-back'
 import { useHydrated } from 'remix-utils/use-hydrated'
 import { type IconName } from '#app/components/ui/icon'
 import { PanelIconButton } from '#app/components/ui/panel-icon-button'
+import {
+	Tooltip,
+	TooltipContent,
+	TooltipProvider,
+	TooltipTrigger,
+} from '#app/components/ui/tooltip'
 import { type IArtworkVersion } from '#app/models/artwork-version/artwork-version.server'
 import { type ILayer } from '#app/models/layer/layer.server'
 import { validateArtworkVersionReorderLayerSubmission } from '#app/models/layer-artwork-version/layer-artwork-version.update.server'
@@ -114,14 +120,32 @@ export const ArtworkVersionLayerReorder = ({
 			/>
 			<input type="hidden" name="direction" value={direction} />
 
-			<PanelIconButton
-				type="submit"
-				iconName={icon as IconName}
-				iconText={iconText}
-				size="panel-sm"
-				disabled={atTopOrBottom || isPending}
-				className="my-0"
-			/>
+			{isHydrated ? (
+				<TooltipProvider>
+					<Tooltip>
+						<TooltipTrigger asChild>
+							<PanelIconButton
+								type="submit"
+								iconName={icon as IconName}
+								iconText={iconText}
+								size="panel-sm"
+								disabled={atTopOrBottom || isPending}
+								className="my-0"
+							/>
+						</TooltipTrigger>
+						<TooltipContent>{iconText}</TooltipContent>
+					</Tooltip>
+				</TooltipProvider>
+			) : (
+				<PanelIconButton
+					type="submit"
+					iconName={icon as IconName}
+					iconText={iconText}
+					size="panel-sm"
+					disabled={atTopOrBottom || isPending}
+					className="my-0"
+				/>
+			)}
 		</fetcher.Form>
 	)
 }

From 2af1f360c238d181d3427ea6eb8e01b8bbb57f94 Mon Sep 17 00:00:00 2001
From: Pat Needham <patrick.h.needham@gmail.com>
Date: Tue, 28 May 2024 18:49:49 -0400
Subject: [PATCH 11/21] cleaner component for tooltip

---
 app/components/templates/tooltip/index.ts     |  1 +
 .../templates/tooltip/tooltip-hydrated.tsx    | 31 +++++++++++++++++++
 .../artwork-version.update.starred.tsx        | 26 +++-------------
 3 files changed, 36 insertions(+), 22 deletions(-)
 create mode 100644 app/components/templates/tooltip/index.ts
 create mode 100644 app/components/templates/tooltip/tooltip-hydrated.tsx

diff --git a/app/components/templates/tooltip/index.ts b/app/components/templates/tooltip/index.ts
new file mode 100644
index 00000000..7b18afd6
--- /dev/null
+++ b/app/components/templates/tooltip/index.ts
@@ -0,0 +1 @@
+export * from './tooltip-hydrated'
diff --git a/app/components/templates/tooltip/tooltip-hydrated.tsx b/app/components/templates/tooltip/tooltip-hydrated.tsx
new file mode 100644
index 00000000..0a88b46b
--- /dev/null
+++ b/app/components/templates/tooltip/tooltip-hydrated.tsx
@@ -0,0 +1,31 @@
+import {
+	Tooltip,
+	TooltipContent,
+	TooltipProvider,
+	TooltipTrigger,
+} from '#app/components/ui/tooltip'
+
+// tooltip button, for example, needs to wait for hydration to avoid SSR issues
+// before hydration, render the button without the tooltip
+// after hydration, render the button with the tooltip
+
+export const TooltipHydrated = ({
+	tooltipText,
+	isHydrated,
+	children,
+}: {
+	tooltipText: string
+	isHydrated: boolean
+	children: JSX.Element
+}) => {
+	if (!isHydrated) return children
+
+	return (
+		<TooltipProvider>
+			<Tooltip>
+				<TooltipTrigger asChild>{children}</TooltipTrigger>
+				<TooltipContent>{tooltipText}</TooltipContent>
+			</Tooltip>
+		</TooltipProvider>
+	)
+}
diff --git a/app/routes/resources+/api.v1+/artwork-version.update.starred.tsx b/app/routes/resources+/api.v1+/artwork-version.update.starred.tsx
index 172f6683..098b6ff2 100644
--- a/app/routes/resources+/api.v1+/artwork-version.update.starred.tsx
+++ b/app/routes/resources+/api.v1+/artwork-version.update.starred.tsx
@@ -9,13 +9,8 @@ import { useFetcher } from '@remix-run/react'
 import { AuthenticityTokenInput } from 'remix-utils/csrf/react'
 import { redirectBack } from 'remix-utils/redirect-back'
 import { useHydrated } from 'remix-utils/use-hydrated'
+import { TooltipHydrated } from '#app/components/templates/tooltip'
 import { PanelIconButton } from '#app/components/ui/panel-icon-button'
-import {
-	Tooltip,
-	TooltipContent,
-	TooltipProvider,
-	TooltipTrigger,
-} from '#app/components/ui/tooltip'
 import { type IArtworkVersion } from '#app/models/artwork-version/artwork-version.server'
 import { validateArtworkVersionStarredSubmission } from '#app/models/artwork-version/artwork-version.update.server'
 import { ArtworkVersionStarredSchema } from '#app/schema/artwork-version'
@@ -87,6 +82,7 @@ export const ArtworkVersionToggleStarred = ({
 	const lastSubmission = fetcher.data?.submission
 	const isPending = useIsPending()
 	let isHydrated = useHydrated()
+
 	const [form] = useForm({
 		id: `artwork-version-toggle-starred-${versionId}`,
 		constraint: getFieldsetConstraint(schema),
@@ -99,28 +95,14 @@ export const ArtworkVersionToggleStarred = ({
 			<input type="hidden" name="no-js" value={String(!isHydrated)} />
 			<input type="hidden" name="id" value={versionId} />
 
-			{isHydrated ? (
-				<TooltipProvider>
-					<Tooltip>
-						<TooltipTrigger asChild>
-							<PanelIconButton
-								type="submit"
-								iconName={icon}
-								iconText={iconText}
-								disabled={isPending}
-							/>
-						</TooltipTrigger>
-						<TooltipContent>{tooltipText}</TooltipContent>
-					</Tooltip>
-				</TooltipProvider>
-			) : (
+			<TooltipHydrated tooltipText={tooltipText} isHydrated={isHydrated}>
 				<PanelIconButton
 					type="submit"
 					iconName={icon}
 					iconText={iconText}
 					disabled={isPending}
 				/>
-			)}
+			</TooltipHydrated>
 		</fetcher.Form>
 	)
 }

From 07fa2992ab82da378e88a1d7df5affb81a9cd7c1 Mon Sep 17 00:00:00 2001
From: Pat Needham <patrick.h.needham@gmail.com>
Date: Tue, 28 May 2024 19:04:28 -0400
Subject: [PATCH 12/21] caught up tooltip hydrated on components

---
 .../api.v1+/artwork-branch.create.tsx         | 22 +++------------
 .../api.v1+/artwork-version.create.tsx        | 26 +++---------------
 .../api.v1+/artwork-version.design.create.tsx | 25 +++--------------
 .../api.v1+/artwork-version.design.delete.tsx | 25 +++--------------
 .../artwork-version.design.update.order.tsx   | 27 +++----------------
 .../artwork-version.design.update.visible.tsx | 25 +++--------------
 .../api.v1+/artwork-version.layer.create.tsx  | 25 +++--------------
 .../artwork-version.layer.update.order.tsx    | 27 +++----------------
 8 files changed, 24 insertions(+), 178 deletions(-)

diff --git a/app/routes/resources+/api.v1+/artwork-branch.create.tsx b/app/routes/resources+/api.v1+/artwork-branch.create.tsx
index da590d72..e8d50910 100644
--- a/app/routes/resources+/api.v1+/artwork-branch.create.tsx
+++ b/app/routes/resources+/api.v1+/artwork-branch.create.tsx
@@ -15,6 +15,7 @@ import {
 	DialogContentGrid,
 	DialogFormsContainer,
 } from '#app/components/layout/dialog'
+import { TooltipHydrated } from '#app/components/templates/tooltip'
 import {
 	Dialog,
 	DialogContent,
@@ -26,12 +27,6 @@ import {
 } from '#app/components/ui/dialog'
 import { PanelIconButton } from '#app/components/ui/panel-icon-button'
 import { StatusButton } from '#app/components/ui/status-button'
-import {
-	Tooltip,
-	TooltipContent,
-	TooltipProvider,
-	TooltipTrigger,
-} from '#app/components/ui/tooltip'
 import { type IArtwork } from '#app/models/artwork/artwork.server'
 import { validateNewArtworkBranchSubmission } from '#app/models/artwork-branch/artwork-branch.create.server'
 import { type IArtworkBranch } from '#app/models/artwork-branch/artwork-branch.server'
@@ -128,22 +123,11 @@ export const ArtworkBranchCreate = ({
 
 	return (
 		<Dialog open={open} onOpenChange={setOpen}>
-			{isHydrated ? (
-				<TooltipProvider>
-					<Tooltip>
-						<TooltipTrigger asChild>
-							<DialogTrigger asChild>
-								<PanelIconButton iconName="file-plus" iconText="New Branch" />
-							</DialogTrigger>
-						</TooltipTrigger>
-						<TooltipContent>New branch...</TooltipContent>
-					</Tooltip>
-				</TooltipProvider>
-			) : (
+			<TooltipHydrated tooltipText="New branch..." isHydrated={isHydrated}>
 				<DialogTrigger asChild>
 					<PanelIconButton iconName="file-plus" iconText="New Branch" />
 				</DialogTrigger>
-			)}
+			</TooltipHydrated>
 			<DialogContent className="sm:max-w-[425px]">
 				<DialogHeader>
 					<DialogTitle>Create a new branch</DialogTitle>
diff --git a/app/routes/resources+/api.v1+/artwork-version.create.tsx b/app/routes/resources+/api.v1+/artwork-version.create.tsx
index 041e1549..b709dc69 100644
--- a/app/routes/resources+/api.v1+/artwork-version.create.tsx
+++ b/app/routes/resources+/api.v1+/artwork-version.create.tsx
@@ -15,6 +15,7 @@ import {
 	DialogContentGrid,
 	DialogFormsContainer,
 } from '#app/components/layout/dialog'
+import { TooltipHydrated } from '#app/components/templates/tooltip'
 import {
 	Dialog,
 	DialogContent,
@@ -26,12 +27,6 @@ import {
 } from '#app/components/ui/dialog'
 import { PanelIconButton } from '#app/components/ui/panel-icon-button'
 import { StatusButton } from '#app/components/ui/status-button'
-import {
-	Tooltip,
-	TooltipContent,
-	TooltipProvider,
-	TooltipTrigger,
-} from '#app/components/ui/tooltip'
 import { type IArtworkBranch } from '#app/models/artwork-branch/artwork-branch.server'
 import { validateNewArtworkVersionSubmission } from '#app/models/artwork-version/artwork-version.create.server'
 import { type IArtworkVersion } from '#app/models/artwork-version/artwork-version.server'
@@ -125,26 +120,11 @@ export const ArtworkVersionCreate = ({
 
 	return (
 		<Dialog open={open} onOpenChange={setOpen}>
-			{isHydrated ? (
-				<TooltipProvider>
-					<Tooltip>
-						<TooltipTrigger asChild>
-							<DialogTrigger asChild>
-								<PanelIconButton
-									iconName="card-stack-plus"
-									iconText="New Version"
-								/>
-							</DialogTrigger>
-						</TooltipTrigger>
-						<TooltipContent>Save version...</TooltipContent>
-					</Tooltip>
-				</TooltipProvider>
-			) : (
+			<TooltipHydrated tooltipText="Save version..." isHydrated={isHydrated}>
 				<DialogTrigger asChild>
 					<PanelIconButton iconName="card-stack-plus" iconText="New Version" />
 				</DialogTrigger>
-			)}
-
+			</TooltipHydrated>
 			<DialogContent className="sm:max-w-[425px]">
 				<DialogHeader>
 					<DialogTitle>Save version</DialogTitle>
diff --git a/app/routes/resources+/api.v1+/artwork-version.design.create.tsx b/app/routes/resources+/api.v1+/artwork-version.design.create.tsx
index 2abedd84..e2e7650d 100644
--- a/app/routes/resources+/api.v1+/artwork-version.design.create.tsx
+++ b/app/routes/resources+/api.v1+/artwork-version.design.create.tsx
@@ -9,13 +9,8 @@ import { useFetcher } from '@remix-run/react'
 import { AuthenticityTokenInput } from 'remix-utils/csrf/react'
 import { redirectBack } from 'remix-utils/redirect-back'
 import { useHydrated } from 'remix-utils/use-hydrated'
+import { TooltipHydrated } from '#app/components/templates/tooltip'
 import { PanelIconButton } from '#app/components/ui/panel-icon-button'
-import {
-	Tooltip,
-	TooltipContent,
-	TooltipProvider,
-	TooltipTrigger,
-} from '#app/components/ui/tooltip'
 import { type IArtworkVersion } from '#app/models/artwork-version/artwork-version.server'
 import { validateArtworkVersionNewDesignSubmission } from '#app/models/design-artwork-version/design-artwork-version.create.server'
 import { type designTypeEnum } from '#app/schema/design'
@@ -103,28 +98,14 @@ export const ArtworkVersionDesignCreate = ({
 			/>
 			<input type="hidden" name="type" value={type} />
 
-			{isHydrated ? (
-				<TooltipProvider>
-					<Tooltip>
-						<TooltipTrigger asChild>
-							<PanelIconButton
-								type="submit"
-								iconName="plus"
-								iconText={iconText}
-								disabled={isPending}
-							/>
-						</TooltipTrigger>
-						<TooltipContent>{iconText}</TooltipContent>
-					</Tooltip>
-				</TooltipProvider>
-			) : (
+			<TooltipHydrated tooltipText={iconText} isHydrated={isHydrated}>
 				<PanelIconButton
 					type="submit"
 					iconName="plus"
 					iconText={iconText}
 					disabled={isPending}
 				/>
-			)}
+			</TooltipHydrated>
 		</fetcher.Form>
 	)
 }
diff --git a/app/routes/resources+/api.v1+/artwork-version.design.delete.tsx b/app/routes/resources+/api.v1+/artwork-version.design.delete.tsx
index 73dac1ee..d1681657 100644
--- a/app/routes/resources+/api.v1+/artwork-version.design.delete.tsx
+++ b/app/routes/resources+/api.v1+/artwork-version.design.delete.tsx
@@ -9,13 +9,8 @@ import { useFetcher } from '@remix-run/react'
 import { AuthenticityTokenInput } from 'remix-utils/csrf/react'
 import { redirectBack } from 'remix-utils/redirect-back'
 import { useHydrated } from 'remix-utils/use-hydrated'
+import { TooltipHydrated } from '#app/components/templates/tooltip'
 import { PanelIconButton } from '#app/components/ui/panel-icon-button'
-import {
-	Tooltip,
-	TooltipContent,
-	TooltipProvider,
-	TooltipTrigger,
-} from '#app/components/ui/tooltip'
 import { type IArtworkVersion } from '#app/models/artwork-version/artwork-version.server'
 import { type IDesign } from '#app/models/design/design.server'
 import { validateArtworkVersionDeleteDesignSubmission } from '#app/models/design-artwork-version/design-artwork-version.delete.server'
@@ -104,28 +99,14 @@ export const ArtworkVersionDesignDelete = ({
 				value={versionId}
 			/>
 
-			{isHydrated ? (
-				<TooltipProvider>
-					<Tooltip>
-						<TooltipTrigger asChild>
-							<PanelIconButton
-								type="submit"
-								iconName="minus"
-								iconText={iconText}
-								disabled={isPending}
-							/>
-						</TooltipTrigger>
-						<TooltipContent>{iconText}</TooltipContent>
-					</Tooltip>
-				</TooltipProvider>
-			) : (
+			<TooltipHydrated tooltipText={iconText} isHydrated={isHydrated}>
 				<PanelIconButton
 					type="submit"
 					iconName="minus"
 					iconText={iconText}
 					disabled={isPending}
 				/>
-			)}
+			</TooltipHydrated>
 		</fetcher.Form>
 	)
 }
diff --git a/app/routes/resources+/api.v1+/artwork-version.design.update.order.tsx b/app/routes/resources+/api.v1+/artwork-version.design.update.order.tsx
index 779502ad..001711fb 100644
--- a/app/routes/resources+/api.v1+/artwork-version.design.update.order.tsx
+++ b/app/routes/resources+/api.v1+/artwork-version.design.update.order.tsx
@@ -9,14 +9,9 @@ import { useFetcher } from '@remix-run/react'
 import { AuthenticityTokenInput } from 'remix-utils/csrf/react'
 import { redirectBack } from 'remix-utils/redirect-back'
 import { useHydrated } from 'remix-utils/use-hydrated'
+import { TooltipHydrated } from '#app/components/templates/tooltip'
 import { type IconName } from '#app/components/ui/icon'
 import { PanelIconButton } from '#app/components/ui/panel-icon-button'
-import {
-	Tooltip,
-	TooltipContent,
-	TooltipProvider,
-	TooltipTrigger,
-} from '#app/components/ui/tooltip'
 import { type IArtworkVersion } from '#app/models/artwork-version/artwork-version.server'
 import { type IDesign } from '#app/models/design/design.server'
 import { validateArtworkVersionReorderDesignSubmission } from '#app/models/design-artwork-version/design-artwork-version.update.server'
@@ -120,23 +115,7 @@ export const ArtworkVersionDesignReorder = ({
 			/>
 			<input type="hidden" name="direction" value={direction} />
 
-			{isHydrated ? (
-				<TooltipProvider>
-					<Tooltip>
-						<TooltipTrigger asChild>
-							<PanelIconButton
-								type="submit"
-								iconName={icon as IconName}
-								iconText={iconText}
-								size="panel-sm"
-								disabled={atTopOrBottom || isPending}
-								className="my-0"
-							/>
-						</TooltipTrigger>
-						<TooltipContent>{iconText}</TooltipContent>
-					</Tooltip>
-				</TooltipProvider>
-			) : (
+			<TooltipHydrated tooltipText={iconText} isHydrated={isHydrated}>
 				<PanelIconButton
 					type="submit"
 					iconName={icon as IconName}
@@ -145,7 +124,7 @@ export const ArtworkVersionDesignReorder = ({
 					disabled={atTopOrBottom || isPending}
 					className="my-0"
 				/>
-			)}
+			</TooltipHydrated>
 		</fetcher.Form>
 	)
 }
diff --git a/app/routes/resources+/api.v1+/artwork-version.design.update.visible.tsx b/app/routes/resources+/api.v1+/artwork-version.design.update.visible.tsx
index fe98cb98..88863bc3 100644
--- a/app/routes/resources+/api.v1+/artwork-version.design.update.visible.tsx
+++ b/app/routes/resources+/api.v1+/artwork-version.design.update.visible.tsx
@@ -9,13 +9,8 @@ import { useFetcher } from '@remix-run/react'
 import { AuthenticityTokenInput } from 'remix-utils/csrf/react'
 import { redirectBack } from 'remix-utils/redirect-back'
 import { useHydrated } from 'remix-utils/use-hydrated'
+import { TooltipHydrated } from '#app/components/templates/tooltip'
 import { PanelIconButton } from '#app/components/ui/panel-icon-button'
-import {
-	Tooltip,
-	TooltipContent,
-	TooltipProvider,
-	TooltipTrigger,
-} from '#app/components/ui/tooltip'
 import { type IArtworkVersion } from '#app/models/artwork-version/artwork-version.server'
 import { type IDesign } from '#app/models/design/design.server'
 import { validateArtworkVersionToggleVisibeDesignSubmission } from '#app/models/design-artwork-version/design-artwork-version.update.server'
@@ -106,28 +101,14 @@ export const ArtworkVersionDesignToggleVisible = ({
 				value={versionId}
 			/>
 
-			{isHydrated ? (
-				<TooltipProvider>
-					<Tooltip>
-						<TooltipTrigger asChild>
-							<PanelIconButton
-								type="submit"
-								iconName={icon}
-								iconText={iconText}
-								disabled={isPending}
-							/>
-						</TooltipTrigger>
-						<TooltipContent>{iconText}</TooltipContent>
-					</Tooltip>
-				</TooltipProvider>
-			) : (
+			<TooltipHydrated tooltipText={iconText} isHydrated={isHydrated}>
 				<PanelIconButton
 					type="submit"
 					iconName={icon}
 					iconText={iconText}
 					disabled={isPending}
 				/>
-			)}
+			</TooltipHydrated>
 		</fetcher.Form>
 	)
 }
diff --git a/app/routes/resources+/api.v1+/artwork-version.layer.create.tsx b/app/routes/resources+/api.v1+/artwork-version.layer.create.tsx
index a6dbeaae..481a6424 100644
--- a/app/routes/resources+/api.v1+/artwork-version.layer.create.tsx
+++ b/app/routes/resources+/api.v1+/artwork-version.layer.create.tsx
@@ -9,13 +9,8 @@ import { useFetcher } from '@remix-run/react'
 import { AuthenticityTokenInput } from 'remix-utils/csrf/react'
 import { redirectBack } from 'remix-utils/redirect-back'
 import { useHydrated } from 'remix-utils/use-hydrated'
+import { TooltipHydrated } from '#app/components/templates/tooltip'
 import { PanelIconButton } from '#app/components/ui/panel-icon-button'
-import {
-	Tooltip,
-	TooltipContent,
-	TooltipProvider,
-	TooltipTrigger,
-} from '#app/components/ui/tooltip'
 import { type IArtworkVersion } from '#app/models/artwork-version/artwork-version.server'
 import { validateArtworkVersionNewLayerSubmission } from '#app/models/layer/layer.create.server'
 import { EntityParentIdType } from '#app/schema/entity'
@@ -99,28 +94,14 @@ export const ArtworkVersionLayerCreate = ({
 				value={versionId}
 			/>
 
-			{isHydrated ? (
-				<TooltipProvider>
-					<Tooltip>
-						<TooltipTrigger asChild>
-							<PanelIconButton
-								type="submit"
-								iconName="plus"
-								iconText={iconText}
-								disabled={isPending}
-							/>
-						</TooltipTrigger>
-						<TooltipContent>{iconText}</TooltipContent>
-					</Tooltip>
-				</TooltipProvider>
-			) : (
+			<TooltipHydrated tooltipText={iconText} isHydrated={isHydrated}>
 				<PanelIconButton
 					type="submit"
 					iconName="plus"
 					iconText={iconText}
 					disabled={isPending}
 				/>
-			)}
+			</TooltipHydrated>
 		</fetcher.Form>
 	)
 }
diff --git a/app/routes/resources+/api.v1+/artwork-version.layer.update.order.tsx b/app/routes/resources+/api.v1+/artwork-version.layer.update.order.tsx
index 2884a6f3..7b9b0205 100644
--- a/app/routes/resources+/api.v1+/artwork-version.layer.update.order.tsx
+++ b/app/routes/resources+/api.v1+/artwork-version.layer.update.order.tsx
@@ -9,14 +9,9 @@ import { useFetcher } from '@remix-run/react'
 import { AuthenticityTokenInput } from 'remix-utils/csrf/react'
 import { redirectBack } from 'remix-utils/redirect-back'
 import { useHydrated } from 'remix-utils/use-hydrated'
+import { TooltipHydrated } from '#app/components/templates/tooltip'
 import { type IconName } from '#app/components/ui/icon'
 import { PanelIconButton } from '#app/components/ui/panel-icon-button'
-import {
-	Tooltip,
-	TooltipContent,
-	TooltipProvider,
-	TooltipTrigger,
-} from '#app/components/ui/tooltip'
 import { type IArtworkVersion } from '#app/models/artwork-version/artwork-version.server'
 import { type ILayer } from '#app/models/layer/layer.server'
 import { validateArtworkVersionReorderLayerSubmission } from '#app/models/layer-artwork-version/layer-artwork-version.update.server'
@@ -120,23 +115,7 @@ export const ArtworkVersionLayerReorder = ({
 			/>
 			<input type="hidden" name="direction" value={direction} />
 
-			{isHydrated ? (
-				<TooltipProvider>
-					<Tooltip>
-						<TooltipTrigger asChild>
-							<PanelIconButton
-								type="submit"
-								iconName={icon as IconName}
-								iconText={iconText}
-								size="panel-sm"
-								disabled={atTopOrBottom || isPending}
-								className="my-0"
-							/>
-						</TooltipTrigger>
-						<TooltipContent>{iconText}</TooltipContent>
-					</Tooltip>
-				</TooltipProvider>
-			) : (
+			<TooltipHydrated tooltipText={iconText} isHydrated={isHydrated}>
 				<PanelIconButton
 					type="submit"
 					iconName={icon as IconName}
@@ -145,7 +124,7 @@ export const ArtworkVersionLayerReorder = ({
 					disabled={atTopOrBottom || isPending}
 					className="my-0"
 				/>
-			)}
+			</TooltipHydrated>
 		</fetcher.Form>
 	)
 }

From b9bd9beb23468a7ed04a353c4b1148ab5e5184ba Mon Sep 17 00:00:00 2001
From: Pat Needham <patrick.h.needham@gmail.com>
Date: Tue, 28 May 2024 19:09:42 -0400
Subject: [PATCH 13/21] tooltip hydration fallback and text

---
 .../artwork-version.layer.update.selected.tsx | 20 +++++++++++--------
 1 file changed, 12 insertions(+), 8 deletions(-)

diff --git a/app/routes/resources+/api.v1+/artwork-version.layer.update.selected.tsx b/app/routes/resources+/api.v1+/artwork-version.layer.update.selected.tsx
index 4e2dbcee..5bd3dd73 100644
--- a/app/routes/resources+/api.v1+/artwork-version.layer.update.selected.tsx
+++ b/app/routes/resources+/api.v1+/artwork-version.layer.update.selected.tsx
@@ -9,6 +9,7 @@ import { useFetcher } from '@remix-run/react'
 import { AuthenticityTokenInput } from 'remix-utils/csrf/react'
 import { redirectBack } from 'remix-utils/redirect-back'
 import { useHydrated } from 'remix-utils/use-hydrated'
+import { TooltipHydrated } from '#app/components/templates/tooltip'
 import { PanelIconButton } from '#app/components/ui/panel-icon-button'
 import { type IArtworkVersion } from '#app/models/artwork-version/artwork-version.server'
 import { type ILayer } from '#app/models/layer/layer.server'
@@ -76,7 +77,8 @@ export const ArtworkVersionLayerToggleSelected = ({
 	const layerId = layer.id
 	const isSelected = layer.selected
 	const icon = isSelected ? 'crosshair-2' : 'crosshair-1'
-	const iconText = isSelected ? 'Deselect layer' : 'Select layer'
+	const iconText = `${isSelected ? 'Deselect' : 'Select'} layer`
+	const tooltipText = `Edit ${isSelected ? 'artwork' : layer.name} designs`
 	const className = isSelected ? 'bg-primary text-primary-foreground' : ''
 
 	const fetcher = useFetcher<typeof action>()
@@ -101,13 +103,15 @@ export const ArtworkVersionLayerToggleSelected = ({
 				value={versionId}
 			/>
 
-			<PanelIconButton
-				type="submit"
-				iconName={icon}
-				iconText={iconText}
-				disabled={isPending}
-				className={className}
-			/>
+			<TooltipHydrated tooltipText={tooltipText} isHydrated={isHydrated}>
+				<PanelIconButton
+					type="submit"
+					iconName={icon}
+					iconText={iconText}
+					disabled={isPending}
+					className={className}
+				/>
+			</TooltipHydrated>
 		</fetcher.Form>
 	)
 }

From f0e7698b39dd9ede97a23ce8e1a488aa24379dcf Mon Sep 17 00:00:00 2001
From: Pat Needham <patrick.h.needham@gmail.com>
Date: Tue, 28 May 2024 19:11:44 -0400
Subject: [PATCH 14/21] tooltip hydration fallback and text

---
 .../artwork-version.layer.update.visible.tsx    | 17 ++++++++++-------
 1 file changed, 10 insertions(+), 7 deletions(-)

diff --git a/app/routes/resources+/api.v1+/artwork-version.layer.update.visible.tsx b/app/routes/resources+/api.v1+/artwork-version.layer.update.visible.tsx
index 58555806..28456abe 100644
--- a/app/routes/resources+/api.v1+/artwork-version.layer.update.visible.tsx
+++ b/app/routes/resources+/api.v1+/artwork-version.layer.update.visible.tsx
@@ -9,6 +9,7 @@ import { useFetcher } from '@remix-run/react'
 import { AuthenticityTokenInput } from 'remix-utils/csrf/react'
 import { redirectBack } from 'remix-utils/redirect-back'
 import { useHydrated } from 'remix-utils/use-hydrated'
+import { TooltipHydrated } from '#app/components/templates/tooltip'
 import { PanelIconButton } from '#app/components/ui/panel-icon-button'
 import { type IArtworkVersion } from '#app/models/artwork-version/artwork-version.server'
 import { type ILayer } from '#app/models/layer/layer.server'
@@ -76,7 +77,7 @@ export const ArtworkVersionLayerToggleVisible = ({
 	const layerId = layer.id
 	const isVisible = layer.visible
 	const icon = isVisible ? 'eye-open' : 'eye-closed'
-	const iconText = isVisible ? 'Hide layer' : 'Show layer'
+	const iconText = `${isVisible ? 'Hide' : 'Show'} ${layer.name}`
 
 	const fetcher = useFetcher<typeof action>()
 	const lastSubmission = fetcher.data?.submission
@@ -100,12 +101,14 @@ export const ArtworkVersionLayerToggleVisible = ({
 				value={versionId}
 			/>
 
-			<PanelIconButton
-				type="submit"
-				iconName={icon}
-				iconText={iconText}
-				disabled={isPending}
-			/>
+			<TooltipHydrated tooltipText={iconText} isHydrated={isHydrated}>
+				<PanelIconButton
+					type="submit"
+					iconName={icon}
+					iconText={iconText}
+					disabled={isPending}
+				/>
+			</TooltipHydrated>
 		</fetcher.Form>
 	)
 }

From a44047b4b9796aa33d8977df5002891dd50d2ea3 Mon Sep 17 00:00:00 2001
From: Pat Needham <patrick.h.needham@gmail.com>
Date: Tue, 28 May 2024 19:24:13 -0400
Subject: [PATCH 15/21] tooltip hydration fallback and text

---
 .../dashboard-entity-panel.actions.delete.tsx |  4 +++-
 .../api.v1+/layer.design.create.tsx           | 17 +++++++++-----
 .../api.v1+/layer.design.delete.tsx           | 23 ++++++++++++-------
 3 files changed, 29 insertions(+), 15 deletions(-)

diff --git a/app/components/templates/panel/dashboard-entity-panel.actions.delete.tsx b/app/components/templates/panel/dashboard-entity-panel.actions.delete.tsx
index cf6e2c0e..3b8a0f41 100644
--- a/app/components/templates/panel/dashboard-entity-panel.actions.delete.tsx
+++ b/app/components/templates/panel/dashboard-entity-panel.actions.delete.tsx
@@ -49,7 +49,9 @@ const LayerDeleteChildEntityForm = memo(
 	({ entityType, entity, parent }: DeleteChildEntityFormProps) => {
 		switch (entityType) {
 			case EntityType.DESIGN:
-				return <LayerDesignDelete designId={entity.id} layerId={parent.id} />
+				return (
+					<LayerDesignDelete design={entity as IDesign} layerId={parent.id} />
+				)
 			default:
 				console.log('unknown layer entity type', entityType)
 				return null
diff --git a/app/routes/resources+/api.v1+/layer.design.create.tsx b/app/routes/resources+/api.v1+/layer.design.create.tsx
index 1d83fd66..c020b50b 100644
--- a/app/routes/resources+/api.v1+/layer.design.create.tsx
+++ b/app/routes/resources+/api.v1+/layer.design.create.tsx
@@ -9,6 +9,7 @@ import { useFetcher } from '@remix-run/react'
 import { AuthenticityTokenInput } from 'remix-utils/csrf/react'
 import { redirectBack } from 'remix-utils/redirect-back'
 import { useHydrated } from 'remix-utils/use-hydrated'
+import { TooltipHydrated } from '#app/components/templates/tooltip'
 import { PanelIconButton } from '#app/components/ui/panel-icon-button'
 import { validateLayerNewDesignSubmission } from '#app/models/design-layer/design-layer.create.server'
 import { type ILayer } from '#app/models/layer/layer.server'
@@ -71,6 +72,8 @@ export const LayerDesignCreate = ({
 	type: designTypeEnum
 	layerId: ILayer['id']
 }) => {
+	const iconText = `Add new ${type}`
+
 	const fetcher = useFetcher<typeof action>()
 	const lastSubmission = fetcher.data?.submission
 	const isPending = useIsPending()
@@ -89,12 +92,14 @@ export const LayerDesignCreate = ({
 			<input type="hidden" name={EntityParentIdType.LAYER_ID} value={layerId} />
 			<input type="hidden" name="type" value={type} />
 
-			<PanelIconButton
-				type="submit"
-				iconName="plus"
-				iconText={`Add new ${type}`}
-				disabled={isPending}
-			/>
+			<TooltipHydrated tooltipText={iconText} isHydrated={isHydrated}>
+				<PanelIconButton
+					type="submit"
+					iconName="plus"
+					iconText={iconText}
+					disabled={isPending}
+				/>
+			</TooltipHydrated>
 		</fetcher.Form>
 	)
 }
diff --git a/app/routes/resources+/api.v1+/layer.design.delete.tsx b/app/routes/resources+/api.v1+/layer.design.delete.tsx
index a47be558..dd883c07 100644
--- a/app/routes/resources+/api.v1+/layer.design.delete.tsx
+++ b/app/routes/resources+/api.v1+/layer.design.delete.tsx
@@ -9,6 +9,7 @@ import { useFetcher } from '@remix-run/react'
 import { AuthenticityTokenInput } from 'remix-utils/csrf/react'
 import { redirectBack } from 'remix-utils/redirect-back'
 import { useHydrated } from 'remix-utils/use-hydrated'
+import { TooltipHydrated } from '#app/components/templates/tooltip'
 import { PanelIconButton } from '#app/components/ui/panel-icon-button'
 import { type IDesign } from '#app/models/design/design.server'
 import { validateLayerDeleteDesignSubmission } from '#app/models/design-layer/design-layer.delete.server'
@@ -65,16 +66,20 @@ export async function action({ request }: ActionFunctionArgs) {
 }
 
 export const LayerDesignDelete = ({
-	designId,
+	design,
 	layerId,
 }: {
-	designId: IDesign['id']
+	design: IDesign
 	layerId: ILayer['id']
 }) => {
+	const designId = design.id
+	const iconText = `Delete ${design.type}`
+
 	const fetcher = useFetcher<typeof action>()
 	const lastSubmission = fetcher.data?.submission
 	const isPending = useIsPending()
 	let isHydrated = useHydrated()
+
 	const [form] = useForm({
 		id: `layer-design-delete-${layerId}-${designId}`,
 		constraint: getFieldsetConstraint(schema),
@@ -89,12 +94,14 @@ export const LayerDesignDelete = ({
 			<input type="hidden" name="id" value={designId} />
 			<input type="hidden" name={EntityParentIdType.LAYER_ID} value={layerId} />
 
-			<PanelIconButton
-				type="submit"
-				iconName="minus"
-				iconText="Delete design"
-				disabled={isPending}
-			/>
+			<TooltipHydrated tooltipText={iconText} isHydrated={isHydrated}>
+				<PanelIconButton
+					type="submit"
+					iconName="minus"
+					iconText={iconText}
+					disabled={isPending}
+				/>
+			</TooltipHydrated>
 		</fetcher.Form>
 	)
 }

From 4e33d546d935a16b752db6edd4ec7e9991be1d4b Mon Sep 17 00:00:00 2001
From: Pat Needham <patrick.h.needham@gmail.com>
Date: Tue, 28 May 2024 19:26:35 -0400
Subject: [PATCH 16/21] tooltip hydration fallback and text

---
 .../api.v1+/layer.design.update.order.tsx     | 19 +++++++++++--------
 .../api.v1+/layer.design.update.visible.tsx   | 17 ++++++++++-------
 2 files changed, 21 insertions(+), 15 deletions(-)

diff --git a/app/routes/resources+/api.v1+/layer.design.update.order.tsx b/app/routes/resources+/api.v1+/layer.design.update.order.tsx
index 0764d62f..06283179 100644
--- a/app/routes/resources+/api.v1+/layer.design.update.order.tsx
+++ b/app/routes/resources+/api.v1+/layer.design.update.order.tsx
@@ -9,6 +9,7 @@ import { useFetcher } from '@remix-run/react'
 import { AuthenticityTokenInput } from 'remix-utils/csrf/react'
 import { redirectBack } from 'remix-utils/redirect-back'
 import { useHydrated } from 'remix-utils/use-hydrated'
+import { TooltipHydrated } from '#app/components/templates/tooltip'
 import { type IconName } from '#app/components/ui/icon'
 import { PanelIconButton } from '#app/components/ui/panel-icon-button'
 import { type IDesign } from '#app/models/design/design.server'
@@ -109,14 +110,16 @@ export const LayerDesignReorder = ({
 			<input type="hidden" name={EntityParentIdType.LAYER_ID} value={layerId} />
 			<input type="hidden" name="direction" value={direction} />
 
-			<PanelIconButton
-				type="submit"
-				iconName={icon as IconName}
-				iconText={iconText}
-				size="panel-sm"
-				disabled={atTopOrBottom || isPending}
-				className="my-0"
-			/>
+			<TooltipHydrated tooltipText={iconText} isHydrated={isHydrated}>
+				<PanelIconButton
+					type="submit"
+					iconName={icon as IconName}
+					iconText={iconText}
+					size="panel-sm"
+					disabled={atTopOrBottom || isPending}
+					className="my-0"
+				/>
+			</TooltipHydrated>
 		</fetcher.Form>
 	)
 }
diff --git a/app/routes/resources+/api.v1+/layer.design.update.visible.tsx b/app/routes/resources+/api.v1+/layer.design.update.visible.tsx
index 57a148cf..dc798420 100644
--- a/app/routes/resources+/api.v1+/layer.design.update.visible.tsx
+++ b/app/routes/resources+/api.v1+/layer.design.update.visible.tsx
@@ -9,6 +9,7 @@ import { useFetcher } from '@remix-run/react'
 import { AuthenticityTokenInput } from 'remix-utils/csrf/react'
 import { redirectBack } from 'remix-utils/redirect-back'
 import { useHydrated } from 'remix-utils/use-hydrated'
+import { TooltipHydrated } from '#app/components/templates/tooltip'
 import { PanelIconButton } from '#app/components/ui/panel-icon-button'
 import { type IDesign } from '#app/models/design/design.server'
 import { validateLayerToggleVisibeDesignSubmission } from '#app/models/design-layer/design-layer.update.server'
@@ -76,7 +77,7 @@ export const LayerDesignToggleVisible = ({
 	const designId = design.id
 	const isVisible = design.visible
 	const icon = isVisible ? 'eye-open' : 'eye-closed'
-	const iconText = isVisible ? 'Hide design' : 'Show design'
+	const iconText = `${isVisible ? 'Hide' : 'Show'} ${design.type}`
 
 	const fetcher = useFetcher<typeof action>()
 	const lastSubmission = fetcher.data?.submission
@@ -96,12 +97,14 @@ export const LayerDesignToggleVisible = ({
 			<input type="hidden" name="id" value={designId} />
 			<input type="hidden" name={EntityParentIdType.LAYER_ID} value={layerId} />
 
-			<PanelIconButton
-				type="submit"
-				iconName={icon}
-				iconText={iconText}
-				disabled={isPending}
-			/>
+			<TooltipHydrated tooltipText={iconText} isHydrated={isHydrated}>
+				<PanelIconButton
+					type="submit"
+					iconName={icon}
+					iconText={iconText}
+					disabled={isPending}
+				/>
+			</TooltipHydrated>
 		</fetcher.Form>
 	)
 }

From 0ca6b69ce79b8befc7a388a970640dfd5b1a3c0d Mon Sep 17 00:00:00 2001
From: Pat Needham <patrick.h.needham@gmail.com>
Date: Tue, 28 May 2024 19:55:10 -0400
Subject: [PATCH 17/21] tooltip for panel design icon: line

---
 app/components/layout/panel.tsx               |  7 +++++
 .../panel/dashboard-entity-panel.icons.tsx    |  5 ++--
 ...hboard-entity-panel.values.design.line.tsx | 17 +++++++++--
 app/components/templates/tooltip/index.ts     |  1 +
 .../templates/tooltip/tooltip-for-content.tsx | 27 ++++++++++++++++++
 app/schema/line.ts                            | 28 +++++++++++++++++--
 6 files changed, 79 insertions(+), 6 deletions(-)
 create mode 100644 app/components/templates/tooltip/tooltip-for-content.tsx

diff --git a/app/components/layout/panel.tsx b/app/components/layout/panel.tsx
index 4abc1640..9b9d0ac6 100644
--- a/app/components/layout/panel.tsx
+++ b/app/components/layout/panel.tsx
@@ -64,6 +64,12 @@ const PanelRowValuesContainer = createContainerComponent({
 	displayName: 'PanelRowValuesContainer',
 })
 
+const PanelRowIconContainer = createContainerComponent({
+	defaultTagName: 'div',
+	defaultClassName: 'm-2 mr-0 flex h-8 w-8 items-center justify-center',
+	displayName: 'PanelRowIconContainer',
+})
+
 // similar to a <nav> for the panel,
 // but no page navigation is occurring so just div
 // flex shrink to let values take up remaining space
@@ -81,5 +87,6 @@ export {
 	PanelTitle,
 	PanelRowReorderContainer,
 	PanelRowValuesContainer,
+	PanelRowIconContainer,
 	PanelRowActionsContainer,
 }
diff --git a/app/components/templates/panel/dashboard-entity-panel.icons.tsx b/app/components/templates/panel/dashboard-entity-panel.icons.tsx
index c8c5b77d..c4745955 100644
--- a/app/components/templates/panel/dashboard-entity-panel.icons.tsx
+++ b/app/components/templates/panel/dashboard-entity-panel.icons.tsx
@@ -1,3 +1,4 @@
+import { PanelRowIconContainer } from '#app/components/layout'
 import { Icon, type IconName } from '#app/components/ui/icon'
 
 export const PanelEntityIcon = ({
@@ -10,7 +11,7 @@ export const PanelEntityIcon = ({
 	text: string
 }) => {
 	return (
-		<div className="m-2 mr-0 flex h-8 w-8 items-center justify-center">
+		<PanelRowIconContainer>
 			{icon ? (
 				<Icon name={icon}>
 					<span className="sr-only">{text}</span>
@@ -18,6 +19,6 @@ export const PanelEntityIcon = ({
 			) : symbol ? (
 				<span className="text-body-xs leading-none">{symbol}</span>
 			) : null}
-		</div>
+		</PanelRowIconContainer>
 	)
 }
diff --git a/app/components/templates/panel/dashboard-entity-panel.values.design.line.tsx b/app/components/templates/panel/dashboard-entity-panel.values.design.line.tsx
index e0cd7cae..665a8554 100644
--- a/app/components/templates/panel/dashboard-entity-panel.values.design.line.tsx
+++ b/app/components/templates/panel/dashboard-entity-panel.values.design.line.tsx
@@ -12,8 +12,11 @@ import {
 	type lineBasisTypeEnum,
 	lineFormatIcon,
 	type lineFormatTypeEnum,
+	lineFormatIconTooltip,
+	lineBasisIconTooltip,
 } from '#app/schema/line'
 import { SidebarPanelRowValuesContainer } from '..'
+import { TooltipForContent } from '../tooltip'
 import { PanelEntityIcon } from './dashboard-entity-panel.icons'
 import { PanelEntityPopover } from './dashboard-entity-panel.popover'
 
@@ -59,8 +62,13 @@ const EntityFormatIcon = memo(({ entity }: EntityProps) => {
 	const { line } = entity as IDesignWithLine
 	const { format } = line
 	const symbol = lineFormatIcon(format as lineFormatTypeEnum)
+	const tooltipText = lineFormatIconTooltip(format as lineFormatTypeEnum)
 
-	return <PanelEntityIcon symbol={symbol} text={`Line format: ${format}`} />
+	return (
+		<TooltipForContent tooltipText={tooltipText}>
+			<PanelEntityIcon symbol={symbol} text={`Line format: ${format}`} />
+		</TooltipForContent>
+	)
 })
 EntityFormatIcon.displayName = 'EntityFormatIcon'
 
@@ -70,8 +78,13 @@ const EntityBasisIcon = memo(({ entity }: EntityProps) => {
 
 	if (format === LineFormatTypeEnum.PIXEL) return null
 	const icon = lineBasisIcon(basis as lineBasisTypeEnum) as IconName
+	const tooltipText = lineBasisIconTooltip(basis as lineBasisTypeEnum)
 
-	return <PanelEntityIcon icon={icon} text={`Line basis: ${basis}`} />
+	return (
+		<TooltipForContent tooltipText={tooltipText}>
+			<PanelEntityIcon icon={icon} text={`Line basis: ${basis}`} />
+		</TooltipForContent>
+	)
 })
 EntityBasisIcon.displayName = 'EntityBasisIcon'
 
diff --git a/app/components/templates/tooltip/index.ts b/app/components/templates/tooltip/index.ts
index 7b18afd6..bba3a02a 100644
--- a/app/components/templates/tooltip/index.ts
+++ b/app/components/templates/tooltip/index.ts
@@ -1 +1,2 @@
+export * from './tooltip-for-content'
 export * from './tooltip-hydrated'
diff --git a/app/components/templates/tooltip/tooltip-for-content.tsx b/app/components/templates/tooltip/tooltip-for-content.tsx
new file mode 100644
index 00000000..7f16cae9
--- /dev/null
+++ b/app/components/templates/tooltip/tooltip-for-content.tsx
@@ -0,0 +1,27 @@
+import {
+	Tooltip,
+	TooltipContent,
+	TooltipProvider,
+	TooltipTrigger,
+} from '#app/components/ui/tooltip'
+
+// use only for content that is not interactive
+// like a button or link
+// for buttons or links, use TooltipHydrated
+
+export const TooltipForContent = ({
+	tooltipText,
+	children,
+}: {
+	tooltipText: string
+	children: JSX.Element
+}) => {
+	return (
+		<TooltipProvider>
+			<Tooltip>
+				<TooltipTrigger>{children}</TooltipTrigger>
+				<TooltipContent>{tooltipText}</TooltipContent>
+			</Tooltip>
+		</TooltipProvider>
+	)
+}
diff --git a/app/schema/line.ts b/app/schema/line.ts
index 131b2f57..96e5b740 100644
--- a/app/schema/line.ts
+++ b/app/schema/line.ts
@@ -51,8 +51,6 @@ export const EditDesignLineFormatSchema = z.object({
 
 export const lineFormatIcon = (format: lineFormatTypeEnum) => {
 	switch (format) {
-		case LineFormatTypeEnum.PERCENT:
-			return '%'
 		case LineFormatTypeEnum.PIXEL:
 			return 'px'
 		default:
@@ -60,6 +58,15 @@ export const lineFormatIcon = (format: lineFormatTypeEnum) => {
 	}
 }
 
+export const lineFormatIconTooltip = (format: lineFormatTypeEnum) => {
+	switch (format) {
+		case LineFormatTypeEnum.PIXEL:
+			return 'Line width is a fixed pixel value'
+		default:
+			return 'Line width is a percentage of the basis'
+	}
+}
+
 export const lineBasisIcon = (basis: lineBasisTypeEnum) => {
 	switch (basis) {
 		case LineBasisTypeEnum.SIZE:
@@ -76,3 +83,20 @@ export const lineBasisIcon = (basis: lineBasisTypeEnum) => {
 			return 'width'
 	}
 }
+
+export const lineBasisIconTooltip = (basis: lineBasisTypeEnum) => {
+	switch (basis) {
+		case LineBasisTypeEnum.SIZE:
+			return 'Line width is based on the design size'
+		case LineBasisTypeEnum.WIDTH:
+			return 'Line width is based on the layer width'
+		case LineBasisTypeEnum.HEIGHT:
+			return 'Line width is based on the layer height'
+		case LineBasisTypeEnum.CANVAS_WIDTH:
+			return 'Line width is based on the canvas width'
+		case LineBasisTypeEnum.CANVAS_HEIGHT:
+			return 'Line width is based on the canvas height'
+		default:
+			return 'Line width is based on the layer width'
+	}
+}

From f5b7a9ac56f27edd2b7db1c7fab029057edfe6e1 Mon Sep 17 00:00:00 2001
From: Pat Needham <patrick.h.needham@gmail.com>
Date: Tue, 28 May 2024 20:00:29 -0400
Subject: [PATCH 18/21] tooltip for panel design icon: rotate

---
 .../panel/dashboard-entity-panel.values.design.rotate.tsx | 8 +++++++-
 1 file changed, 7 insertions(+), 1 deletion(-)

diff --git a/app/components/templates/panel/dashboard-entity-panel.values.design.rotate.tsx b/app/components/templates/panel/dashboard-entity-panel.values.design.rotate.tsx
index c3416458..7f126b25 100644
--- a/app/components/templates/panel/dashboard-entity-panel.values.design.rotate.tsx
+++ b/app/components/templates/panel/dashboard-entity-panel.values.design.rotate.tsx
@@ -6,6 +6,7 @@ import { DesignTypeRotateValue } from '#app/routes/resources+/api.v1+/design.typ
 import { type IEntity } from '#app/schema/entity'
 import { RotateBasisTypeEnum } from '#app/schema/rotate'
 import { SidebarPanelRowValuesContainer } from '..'
+import { TooltipForContent } from '../tooltip'
 import { PanelEntityIcon } from './dashboard-entity-panel.icons'
 import { PanelEntityPopover } from './dashboard-entity-panel.popover'
 
@@ -53,8 +54,13 @@ const EntityBasisIcon = memo(({ entity }: EntityProps) => {
 
 	if (basis !== RotateBasisTypeEnum.DEFINED) return null
 	const symbol = '°'
+	const tooltipText = 'Degrees'
 
-	return <PanelEntityIcon symbol={symbol} text={`Rotate basis: ${basis}`} />
+	return (
+		<TooltipForContent tooltipText={tooltipText}>
+			<PanelEntityIcon symbol={symbol} text={`Rotate basis: ${basis}`} />
+		</TooltipForContent>
+	)
 })
 EntityBasisIcon.displayName = 'EntityBasisIcon'
 

From 82076a84885eb4597a1a13d5837811a4a9a77546 Mon Sep 17 00:00:00 2001
From: Pat Needham <patrick.h.needham@gmail.com>
Date: Tue, 28 May 2024 20:08:10 -0400
Subject: [PATCH 19/21] tooltip for panel design icon: size

---
 ...hboard-entity-panel.values.design.size.tsx | 17 +++++++++++++--
 app/schema/line.ts                            | 16 ++++----------
 app/schema/size.ts                            | 21 +++++++++++++++++++
 3 files changed, 40 insertions(+), 14 deletions(-)

diff --git a/app/components/templates/panel/dashboard-entity-panel.values.design.size.tsx b/app/components/templates/panel/dashboard-entity-panel.values.design.size.tsx
index 0b86322d..2138680f 100644
--- a/app/components/templates/panel/dashboard-entity-panel.values.design.size.tsx
+++ b/app/components/templates/panel/dashboard-entity-panel.values.design.size.tsx
@@ -12,8 +12,11 @@ import {
 	type sizeBasisTypeEnum,
 	sizeFormatIcon,
 	type sizeFormatTypeEnum,
+	sizeFormatIconTooltip,
+	sizeBasisIconTooltip,
 } from '#app/schema/size'
 import { SidebarPanelRowValuesContainer } from '..'
+import { TooltipForContent } from '../tooltip'
 import { PanelEntityIcon } from './dashboard-entity-panel.icons'
 import { PanelEntityPopover } from './dashboard-entity-panel.popover'
 
@@ -60,8 +63,13 @@ const EntityFormatIcon = memo(({ entity }: EntityProps) => {
 	const { format } = size
 
 	const symbol = sizeFormatIcon(format as sizeFormatTypeEnum)
+	const tooltipText = sizeFormatIconTooltip(format as sizeFormatTypeEnum)
 
-	return <PanelEntityIcon symbol={symbol} text={`Size format: ${format}`} />
+	return (
+		<TooltipForContent tooltipText={tooltipText}>
+			<PanelEntityIcon symbol={symbol} text={`Size format: ${format}`} />
+		</TooltipForContent>
+	)
 })
 EntityFormatIcon.displayName = 'EntityFormatIcon'
 
@@ -71,8 +79,13 @@ const EntityBasisIcon = memo(({ entity }: EntityProps) => {
 
 	if (format === SizeFormatTypeEnum.PIXEL) return undefined
 	const icon = sizeBasisIcon(basis as sizeBasisTypeEnum) as IconName
+	const tooltipText = sizeBasisIconTooltip(basis as sizeBasisTypeEnum)
 
-	return <PanelEntityIcon icon={icon} text={`Line basis: ${basis}`} />
+	return (
+		<TooltipForContent tooltipText={tooltipText}>
+			<PanelEntityIcon icon={icon} text={`Line basis: ${basis}`} />
+		</TooltipForContent>
+	)
 })
 EntityBasisIcon.displayName = 'EntityBasisIcon'
 
diff --git a/app/schema/line.ts b/app/schema/line.ts
index 96e5b740..119fa02e 100644
--- a/app/schema/line.ts
+++ b/app/schema/line.ts
@@ -50,21 +50,13 @@ export const EditDesignLineFormatSchema = z.object({
 })
 
 export const lineFormatIcon = (format: lineFormatTypeEnum) => {
-	switch (format) {
-		case LineFormatTypeEnum.PIXEL:
-			return 'px'
-		default:
-			return '%'
-	}
+	return format === LineFormatTypeEnum.PERCENT ? '%' : 'px'
 }
 
 export const lineFormatIconTooltip = (format: lineFormatTypeEnum) => {
-	switch (format) {
-		case LineFormatTypeEnum.PIXEL:
-			return 'Line width is a fixed pixel value'
-		default:
-			return 'Line width is a percentage of the basis'
-	}
+	return format === LineFormatTypeEnum.PERCENT
+		? 'Line width is a percentage of the basis'
+		: 'Line width is a fixed pixel value'
 }
 
 export const lineBasisIcon = (basis: lineBasisTypeEnum) => {
diff --git a/app/schema/size.ts b/app/schema/size.ts
index cc34189c..1a813344 100644
--- a/app/schema/size.ts
+++ b/app/schema/size.ts
@@ -54,6 +54,12 @@ export const sizeFormatIcon = (format: sizeFormatTypeEnum) => {
 	return format === SizeFormatTypeEnum.PERCENT ? '%' : 'px'
 }
 
+export const sizeFormatIconTooltip = (format: sizeFormatTypeEnum) => {
+	return format === SizeFormatTypeEnum.PERCENT
+		? 'Size is a percentage of the basis'
+		: 'Size is a fixed pixel value'
+}
+
 export const sizeBasisIcon = (basis: sizeBasisTypeEnum) => {
 	switch (basis) {
 		case SizeBasisTypeEnum.WIDTH:
@@ -68,3 +74,18 @@ export const sizeBasisIcon = (basis: sizeBasisTypeEnum) => {
 			return 'width'
 	}
 }
+
+export const sizeBasisIconTooltip = (basis: sizeBasisTypeEnum) => {
+	switch (basis) {
+		case SizeBasisTypeEnum.WIDTH:
+			return 'Size is based on the layer width'
+		case SizeBasisTypeEnum.HEIGHT:
+			return 'Size is based on the layer height'
+		case SizeBasisTypeEnum.CANVAS_WIDTH:
+			return 'Size is based on the canvas width'
+		case SizeBasisTypeEnum.CANVAS_HEIGHT:
+			return 'Size is based on the canvas height'
+		default:
+			return 'Size is based on the layer width'
+	}
+}

From 6a96830c79bc1f22cc2b03de72a3d600fd4c1118 Mon Sep 17 00:00:00 2001
From: Pat Needham <patrick.h.needham@gmail.com>
Date: Tue, 28 May 2024 20:12:26 -0400
Subject: [PATCH 20/21] removed old panel components

---
 app/components/shared/index.ts  |  1 -
 app/components/shared/panel.tsx | 89 ---------------------------------
 2 files changed, 90 deletions(-)
 delete mode 100644 app/components/shared/panel.tsx

diff --git a/app/components/shared/index.ts b/app/components/shared/index.ts
index d2154250..6272a3a2 100644
--- a/app/components/shared/index.ts
+++ b/app/components/shared/index.ts
@@ -4,7 +4,6 @@ export * from './dialog-form'
 export * from './footer'
 export * from './form'
 export * from './page-layout'
-export * from './panel'
 export * from './side-nav'
 export * from './side-nav-form'
 export * from './side-nav-forms-list'
diff --git a/app/components/shared/panel.tsx b/app/components/shared/panel.tsx
deleted file mode 100644
index b1b873c6..00000000
--- a/app/components/shared/panel.tsx
+++ /dev/null
@@ -1,89 +0,0 @@
-import { cn } from '#app/utils/misc'
-
-const Panel = ({ children }: { children: React.ReactNode }) => {
-	return <div className="grid w-full border-b-2 py-2">{children}</div>
-}
-
-const PanelRow = ({
-	children,
-	className,
-}: {
-	children: React.ReactNode
-	className?: string
-}) => {
-	return (
-		<div
-			className={cn(
-				'relative grid h-8 w-full grid-cols-12 grid-rows-1 items-center px-2',
-				className,
-			)}
-		>
-			{children}
-		</div>
-	)
-}
-
-const PanelRowContainer = ({ children }: { children: React.ReactNode }) => {
-	return (
-		<div className="col-start-1 col-end-13 flex items-center justify-between gap-2">
-			{children}
-		</div>
-	)
-}
-
-const PanelHeader = ({ children }: { children: React.ReactNode }) => {
-	return (
-		<PanelRow>
-			<PanelRowContainer>{children}</PanelRowContainer>
-		</PanelRow>
-	)
-}
-
-const PanelTitle = ({ children }: { children: React.ReactNode }) => {
-	return (
-		<div className="col-start-1 h-8 w-full self-center overflow-x-hidden pl-2">
-			<span className="flex items-center">{children}</span>
-		</div>
-	)
-}
-
-const PanelRowOrderContainer = ({
-	children,
-}: {
-	children: React.ReactNode
-}) => {
-	return (
-		<div className="l-0 t-0 absolute flex h-8 w-4 flex-col items-center justify-center">
-			{children}
-		</div>
-	)
-}
-
-const PanelRowValueContainer = ({
-	children,
-	className,
-}: {
-	children: React.ReactNode
-	className?: string
-}) => {
-	return (
-		<div className={cn('col-end-8 flex max-w-36 items-center', className)}>
-			{children}
-		</div>
-	)
-}
-
-const PanelRowIconContainer = ({ children }: { children: React.ReactNode }) => {
-	return <div className="flex flex-shrink-0 items-center">{children}</div>
-}
-
-export {
-	Panel,
-	PanelRow,
-	PanelRowContainer,
-	PanelHeader,
-	PanelTitle,
-	PanelRowOrderContainer,
-	PanelRowValueContainer,
-	PanelRowIconContainer,
-}

From ef180c5a1425719ae6b191a60662453a587938fd Mon Sep 17 00:00:00 2001
From: Pat Needham <patrick.h.needham@gmail.com>
Date: Tue, 28 May 2024 20:16:41 -0400
Subject: [PATCH 21/21] better icon and tooltip

---
 .../__components/header.artwork.button-group.tsx              | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/app/routes/sketch+/projects+/$projectSlug_+/artworks+/$artworkSlug+/__components/header.artwork.button-group.tsx b/app/routes/sketch+/projects+/$projectSlug_+/artworks+/$artworkSlug+/__components/header.artwork.button-group.tsx
index 375fc23d..28f6c177 100644
--- a/app/routes/sketch+/projects+/$projectSlug_+/artworks+/$artworkSlug+/__components/header.artwork.button-group.tsx
+++ b/app/routes/sketch+/projects+/$projectSlug_+/artworks+/$artworkSlug+/__components/header.artwork.button-group.tsx
@@ -45,9 +45,9 @@ export const NavActionsButtonGroup = memo(
 					/>
 					<TooltipIconLink
 						to={`/users/${user.username}/artworks/${artwork.slug}`}
-						icon="pencil-1"
+						icon="exit"
 						text="Latest"
-						tooltipText="View the artwork details"
+						tooltipText={`Go to ${artwork.name} page`}
 						buttonVariant="ghost"
 					/>
 				</NavbarButtonGroup>