From 1a1ddf34097ff5b174d6e4e4bb438b1240109f67 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Jeremy=20M=C3=B6glich?= <jeremy.moeglich@gmail.com>
Date: Tue, 17 Jan 2023 02:32:14 +0100
Subject: [PATCH] Desktop - Add more tooltips (#519)

---
 .../components/explorer/ExplorerTopBar.tsx    | 86 +++++++++++--------
 .../src/components/explorer/FileItem.tsx      |  1 +
 .../src/components/jobs/JobManager.tsx        | 20 +++--
 .../src/components/layout/Sidebar.tsx         | 13 ++-
 .../components/location/LocationListItem.tsx  |  9 +-
 .../screens/settings/library/TagsSettings.tsx |  5 +-
 .../settings/node/LibrariesSettings.tsx       | 16 ++--
 7 files changed, 96 insertions(+), 54 deletions(-)

diff --git a/packages/interface/src/components/explorer/ExplorerTopBar.tsx b/packages/interface/src/components/explorer/ExplorerTopBar.tsx
index 675132b39..acc12291a 100644
--- a/packages/interface/src/components/explorer/ExplorerTopBar.tsx
+++ b/packages/interface/src/components/explorer/ExplorerTopBar.tsx
@@ -265,20 +265,22 @@ export const TopBar: React.FC<TopBarProps> = (props) => {
 					<SearchBar ref={searchRef} />
 
 					<div className="flex mx-8 space-x-2">
-						<OverlayPanel
-							className="focus:outline-none"
-							trigger={
-								// <Tooltip label="Major Key Alert">
-								<TopBarButton>
-									<Key className={TOP_BAR_ICON_STYLE} />
-								</TopBarButton>
-								// </Tooltip>
-							}
-						>
-							<div className="block w-[350px]">
-								<KeyManager className={TOP_BAR_ICON_STYLE} />
-							</div>
-						</OverlayPanel>
+						<Tooltip label="Key Manager">
+							<OverlayPanel
+								className="focus:outline-none"
+								trigger={
+									// <Tooltip label="Major Key Alert">
+									<TopBarButton>
+										<Key className={TOP_BAR_ICON_STYLE} />
+									</TopBarButton>
+									// </Tooltip>
+								}
+							>
+								<div className="block w-[350px]">
+									<KeyManager className={TOP_BAR_ICON_STYLE} />
+								</div>
+							</OverlayPanel>
+						</Tooltip>
 						<Tooltip label="Tag Assign Mode">
 							<TopBarButton
 								onClick={() => (getExplorerStore().tagAssignMode = !store.tagAssignMode)}
@@ -303,31 +305,39 @@ export const TopBar: React.FC<TopBarProps> = (props) => {
 					</div>
 				</div>
 				<div className="flex mr-3 space-x-2">
-					<OverlayPanel
-						className="focus:outline-none"
-						trigger={
-							// <Tooltip label="Major Key Alert">
-							<TopBarButton className="my-2">
-								<List className={TOP_BAR_ICON_STYLE} />
-							</TopBarButton>
-							// </Tooltip>
-						}
+					<Tooltip label="File display options" position="left">
+						<OverlayPanel
+							className="focus:outline-none"
+							trigger={
+								// <Tooltip label="Major Key Alert">
+								<TopBarButton className="my-2">
+									<List className={TOP_BAR_ICON_STYLE} />
+								</TopBarButton>
+								// </Tooltip>
+							}
+						>
+							<div className="block w-[250px] ">
+								<ExplorerOptionsPanel />
+							</div>
+						</OverlayPanel>
+					</Tooltip>
+
+					<Tooltip
+						label={store.showInspector ? 'Hide Inspector' : 'Show Inspector'}
+						position="left"
 					>
-						<div className="block w-[250px] ">
-							<ExplorerOptionsPanel />
-						</div>
-					</OverlayPanel>
-					<TopBarButton
-						active={store.showInspector}
-						onClick={() => (getExplorerStore().showInspector = !store.showInspector)}
-						className="my-2"
-					>
-						{store.showInspector ? (
-							<SidebarSimple className={TOP_BAR_ICON_STYLE} />
-						) : (
-							<SidebarSimple className={TOP_BAR_ICON_STYLE} />
-						)}
-					</TopBarButton>
+						<TopBarButton
+							active={store.showInspector}
+							onClick={() => (getExplorerStore().showInspector = !store.showInspector)}
+							className="my-2"
+						>
+							{store.showInspector ? (
+								<SidebarSimple className={TOP_BAR_ICON_STYLE} />
+							) : (
+								<SidebarSimple className={TOP_BAR_ICON_STYLE} />
+							)}
+						</TopBarButton>
+					</Tooltip>
 					{/* <Dropdown
 						// className="absolute block h-6 w-44 top-2 right-4"
 						align="right"
diff --git a/packages/interface/src/components/explorer/FileItem.tsx b/packages/interface/src/components/explorer/FileItem.tsx
index 8eb054436..1c7a07718 100644
--- a/packages/interface/src/components/explorer/FileItem.tsx
+++ b/packages/interface/src/components/explorer/FileItem.tsx
@@ -6,6 +6,7 @@ import { HTMLAttributes } from 'react';
 import { getExplorerStore } from '../../hooks/useExplorerStore';
 import { ObjectKind } from '../../util/kind';
 import { GenericAlertDialogProps } from '../dialog/AlertDialog';
+import { Tooltip } from '../tooltip/Tooltip';
 import { FileItemContextMenu } from './ExplorerContextMenu';
 import FileThumb from './FileThumb';
 import { isObject } from './utils';
diff --git a/packages/interface/src/components/jobs/JobManager.tsx b/packages/interface/src/components/jobs/JobManager.tsx
index ce698e27f..51755c704 100644
--- a/packages/interface/src/components/jobs/JobManager.tsx
+++ b/packages/interface/src/components/jobs/JobManager.tsx
@@ -87,10 +87,14 @@ export function JobsManager() {
 				<div className="flex-grow" />
 
 				<Button onClick={() => clearAllJobs.mutate(null)} size="icon">
-					<Trash className="w-5 h-5" />
+					<Tooltip label="Clear out finished jobs">
+						<Trash className="w-5 h-5" />
+					</Tooltip>
 				</Button>
 				<Button size="icon">
-					<X className="w-5 h-5" />
+					<Tooltip label="Close">
+						<X className="w-5 h-5" />
+					</Tooltip>
 				</Button>
 			</HeaderContainer>
 			<div className="h-full mr-1 overflow-x-hidden custom-scroll inspector-scroll">
@@ -152,16 +156,22 @@ function Job({ job }: { job: JobReport }) {
 			<div className="flex flex-row space-x-2 ml-7">
 				{job.status === 'Running' && (
 					<Button size="icon">
-						<Pause className="w-4 h-4" />
+						<Tooltip label="Pause">
+							<Pause className="w-4 h-4" />
+						</Tooltip>
 					</Button>
 				)}
 				{job.status === 'Failed' && (
 					<Button size="icon">
-						<ArrowsClockwise className="w-4" />
+						<Tooltip label="Retry">
+							<ArrowsClockwise className="w-4" />
+						</Tooltip>
 					</Button>
 				)}
 				<Button size="icon">
-					<X className="w-4 h-4" />
+					<Tooltip label="Remove">
+						<X className="w-4 h-4" />
+					</Tooltip>
 				</Button>
 			</div>
 		</div>
diff --git a/packages/interface/src/components/layout/Sidebar.tsx b/packages/interface/src/components/layout/Sidebar.tsx
index fdde60ea5..3d31bd7dd 100644
--- a/packages/interface/src/components/layout/Sidebar.tsx
+++ b/packages/interface/src/components/layout/Sidebar.tsx
@@ -25,15 +25,16 @@ import clsx from 'clsx';
 import { CheckCircle, CirclesFour, Gear, Lock, Planet, Plus, ShareNetwork } from 'phosphor-react';
 import React, { PropsWithChildren, useState } from 'react';
 import { NavLink, NavLinkProps } from 'react-router-dom';
-
 import { useOperatingSystem } from '~/hooks/useOperatingSystem';
 import { usePlatform } from '~/util/Platform';
+
 import AddLocationDialog from '../dialog/AddLocationDialog';
 import CreateLibraryDialog from '../dialog/CreateLibraryDialog';
 import { Folder } from '../icons/Folder';
 import { JobsManager } from '../jobs/JobManager';
 import { MacTrafficLights } from '../os/TrafficLights';
 import { InputContainer } from '../primitive/InputContainer';
+import { Tooltip } from '../tooltip/Tooltip';
 
 const SidebarBody = tw.div`flex relative flex-col flex-grow-0 flex-shrink-0 w-44 min-h-full border-r border-sidebar-divider bg-sidebar`;
 
@@ -123,7 +124,9 @@ export function Sidebar() {
 						variant="outline"
 						className="text-ink-faint ring-offset-sidebar"
 					>
-						<Gear className="w-5 h-5" />
+						<Tooltip label="Settings">
+							<Gear className="w-5 h-5" />
+						</Tooltip>
 					</ButtonLink>
 					<OverlayPanel
 						transformOrigin="bottom left"
@@ -134,7 +137,11 @@ export function Sidebar() {
 								variant="outline"
 								className="radix-state-open:bg-sidebar-selected/50 text-ink-faint ring-offset-sidebar"
 							>
-								{library && <IsRunningJob />}
+								{library && (
+									<Tooltip label="Recent Jobs">
+										<IsRunningJob />
+									</Tooltip>
+								)}
 							</Button>
 						}
 					>
diff --git a/packages/interface/src/components/location/LocationListItem.tsx b/packages/interface/src/components/location/LocationListItem.tsx
index 2030cdc3c..58da9b121 100644
--- a/packages/interface/src/components/location/LocationListItem.tsx
+++ b/packages/interface/src/components/location/LocationListItem.tsx
@@ -6,6 +6,7 @@ import { Repeat, Trash } from 'phosphor-react';
 import { useState } from 'react';
 
 import { Folder } from '../icons/Folder';
+import { Tooltip } from '../tooltip/Tooltip';
 
 import { useZodForm, z } from '@sd/ui/src/forms';
 
@@ -70,7 +71,9 @@ export default function LocationListItem({ location }: LocationListItemProps) {
 					ctaLabel="Delete"
 					trigger={
 						<Button variant="gray" className="!p-1.5">
-							<Trash className="w-4 h-4" />
+							<Tooltip label="Delete Location">
+								<Trash className="w-4 h-4" />
+							</Tooltip>
 						</Button>
 					}
 				/>
@@ -82,7 +85,9 @@ export default function LocationListItem({ location }: LocationListItemProps) {
 						locRescan(location.id);
 					}}
 				>
-					<Repeat className="w-4 h-4" />
+					<Tooltip label="Rescan Location">
+						<Repeat className="w-4 h-4" />
+					</Tooltip>
 				</Button>
 				{/* <Button variant="gray" className="!p-1.5">
 					<CogIcon className="w-4 h-4" />
diff --git a/packages/interface/src/screens/settings/library/TagsSettings.tsx b/packages/interface/src/screens/settings/library/TagsSettings.tsx
index 6439eab5c..72f59accc 100644
--- a/packages/interface/src/screens/settings/library/TagsSettings.tsx
+++ b/packages/interface/src/screens/settings/library/TagsSettings.tsx
@@ -8,6 +8,7 @@ import { InputContainer } from '~/components/primitive/InputContainer';
 import { PopoverPicker } from '~/components/primitive/PopoverPicker';
 import { SettingsContainer } from '~/components/settings/SettingsContainer';
 import { SettingsHeader } from '~/components/settings/SettingsHeader';
+import { Tooltip } from '~/components/tooltip/Tooltip';
 
 import { Form, Input, useZodForm, z } from '@sd/ui/src/forms';
 
@@ -159,7 +160,9 @@ export default function TagsSettings() {
 							ctaLabel="Delete"
 							trigger={
 								<Button variant="gray" className="h-[38px] mt-[22px]">
-									<Trash className="w-4 h-4" />
+									<Tooltip label="Delete Tag">
+										<Trash className="w-4 h-4" />
+									</Tooltip>
 								</Button>
 							}
 						/>
diff --git a/packages/interface/src/screens/settings/node/LibrariesSettings.tsx b/packages/interface/src/screens/settings/node/LibrariesSettings.tsx
index a9eb07e7a..c35d67ff6 100644
--- a/packages/interface/src/screens/settings/node/LibrariesSettings.tsx
+++ b/packages/interface/src/screens/settings/node/LibrariesSettings.tsx
@@ -3,11 +3,11 @@ import { LibraryConfigWrapped } from '@sd/client';
 import { Button, ButtonLink, Card, tw } from '@sd/ui';
 import { Database, DotsSixVertical, Link, Pen, Pencil, Trash } from 'phosphor-react';
 import { useState } from 'react';
-
 import CreateLibraryDialog from '~/components/dialog/CreateLibraryDialog';
 import DeleteLibraryDialog from '~/components/dialog/DeleteLibraryDialog';
 import { SettingsContainer } from '~/components/settings/SettingsContainer';
 import { SettingsHeader } from '~/components/settings/SettingsHeader';
+import { Tooltip } from '~/components/tooltip/Tooltip';
 
 const Pill = tw.span`px-1.5 ml-2 py-[2px] rounded text-xs font-medium bg-accent`;
 
@@ -31,15 +31,21 @@ function LibraryListItem(props: { library: LibraryConfigWrapped; current: boolea
 				<p className="mt-0.5 text-xs text-ink-dull">{props.library.uuid}</p>
 			</div>
 			<div className="flex flex-row items-center space-x-2">
-				<Button className="!p-1.5" onClick={() => { }} variant="gray">
-					<Database className="w-4 h-4" />
+				<Button className="!p-1.5" onClick={() => {}} variant="gray">
+					<Tooltip label="TODO">
+						<Database className="w-4 h-4" />
+					</Tooltip>
 				</Button>
 				<ButtonLink className="!p-1.5" to="/settings/library" variant="gray">
-					<Pencil className="w-4 h-4" />
+					<Tooltip label="Edit Library">
+						<Pencil className="w-4 h-4" />
+					</Tooltip>
 				</ButtonLink>
 				<DeleteLibraryDialog libraryUuid={props.library.uuid}>
 					<Button className="!p-1.5" variant="gray">
-						<Trash className="w-4 h-4" />
+						<Tooltip label="Delete Library">
+							<Trash className="w-4 h-4" />
+						</Tooltip>
 					</Button>
 				</DeleteLibraryDialog>
 			</div>