Add tooltips to app bar (#657)

lib/papi-dts/papi.d.ts

@@ -39,6 +39,8 @@ declare module 'shared/models/web-view.model' {
     iconUrl?: string;
     /** Name of the tab for the WebView */
     title?: string;
+    /** Tooltip that is shown when hovering over the webview title */
+    tooltip?: string;
     /** General object to store unique state for this webview */
     state?: Record<string, unknown>;
     /**
@@ -162,7 +164,7 @@ declare module 'shared/models/web-view.model' {
   /** The properties on a WebViewDefinition that may be updated when that webview is already displayed */
   export type WebViewDefinitionUpdatableProperties = Pick<
     WebViewDefinitionBase,
-    'iconUrl' | 'title'
+    'iconUrl' | 'title' | 'tooltip'
   >;
   /**
    * WebViewDefinition properties for updating a WebView that is already displayed. Any unspecified
@@ -2602,6 +2604,8 @@ declare module 'shared/models/docking-framework.model' {
     tabIconUrl?: string;
     /** Text to show on the title bar of the tab */
     tabTitle: string;
+    /** Text to show when hovering over the title bar of the tab */
+    tabTooltip?: string;
     /** Content to show inside the tab. */
     content: ReactNode;
     /** (optional) Minimum width that the tab can become in CSS `px` units */

src/renderer/components/docking/platform-dock-layout.component.tsx

@@ -183,7 +183,13 @@ function createRCDockTabFromTabInfo(tabInfo: TabInfo) {
   // Translate the data from the loaded tab to be in the form needed by rc-dock
   return {
     ...tabInfo,
-    title: <PlatformTabTitle iconUrl={tabInfo.tabIconUrl} text={tabInfo.tabTitle} />,
+    title: (
+      <PlatformTabTitle
+        iconUrl={tabInfo.tabIconUrl}
+        text={tabInfo.tabTitle}
+        tooltip={tabInfo.tabTooltip}
+      />
+    ),
     content: <PlatformPanel>{tabInfo.content}</PlatformPanel>,
     group: TAB_GROUP,
     closable: true,

src/renderer/components/docking/platform-tab-title.component.css

@@ -16,3 +16,7 @@
   height: 16px;
   vertical-align: middle;
 }
+
+.tooltip {
+  white-space: pre-wrap;
+}

src/renderer/components/docking/platform-tab-title.component.tsx

@@ -1,3 +1,4 @@
+import { Tooltip } from '@mui/material';
 import './platform-tab-title.component.css';
 import logger from '@shared/services/logger.service';
 
@@ -6,34 +7,42 @@ type PlatformTabTitleProps = {
   iconUrl?: string;
   /** Text to show on the tab */
   text: string;
+  /** Text to show when hovering over the tab. Defaults to empty string */
+  tooltip?: string;
 };
 
 /**
  * Custom tab title for all tabs in Platform
  *
+ * @param iconUrl Url to image to show on the tab. Defaults to Platform.Bible logo
  * @param text The text to show on the tab title
+ * @param tooltip Text to show when hovering over the tab. Defaults to empty string
  */
-export default function PlatformTabTitle({ iconUrl, text }: PlatformTabTitleProps) {
+export default function PlatformTabTitle({ iconUrl, text, tooltip }: PlatformTabTitleProps) {
   const toggleDropdown = () => {
     logger.info('Pretend a menu was shown!');
   };
 
+  const tooltipDiv = tooltip ? <div className="tooltip">{tooltip}</div> : '';
+
   return (
-    <div className="title">
-      <button
-        type="button"
-        className="tab-menu-button"
-        style={
-          iconUrl
-            ? {
-                backgroundImage: `url(${iconUrl})`,
-              }
-            : undefined
-        }
-        aria-label="Tab Menu"
-        onClick={toggleDropdown}
-      />
-      <span>{text}</span>
-    </div>
+    <Tooltip title={tooltipDiv}>
+      <div className="title">
+        <button
+          type="button"
+          className="tab-menu-button"
+          style={
+            iconUrl
+              ? {
+                  backgroundImage: `url(${iconUrl})`,
+                }
+              : undefined
+          }
+          aria-label="Tab Menu"
+          onClick={toggleDropdown}
+        />
+        <span>{text}</span>
+      </div>
+    </Tooltip>
   );
 }

src/renderer/components/web-view.component.tsx

@@ -96,6 +96,7 @@ export function updateWebViewTab(savedTabInfo: SavedTabInfo, data: WebViewDefini
     data,
     tabIconUrl: data.iconUrl,
     tabTitle: data.title ?? 'Unknown',
+    tabTooltip: data.tooltip ?? '',
     content: <WebView {...data} />,
   };
 }

src/renderer/services/web-view.service-host.ts

@@ -579,7 +579,8 @@ export const removeTab = async (tabId: string): Promise<boolean> => {
 export function saveTabInfoBase(tabInfo: TabInfo): SavedTabInfo {
   // We don't need to use the other properties, but we need to remove them
   // eslint-disable-next-line @typescript-eslint/no-unused-vars
-  const { tabTitle, tabIconUrl, content, minWidth, minHeight, ...savedTabInfo } = tabInfo;
+  const { tabTitle, tabTooltip, tabIconUrl, content, minWidth, minHeight, ...savedTabInfo } =
+    tabInfo;
   return savedTabInfo;
 }
 
@@ -617,8 +618,8 @@ export function getUpdatablePropertiesFromWebViewDefinition(
     | WebViewDefinitionUpdateInfo,
 ): WebViewDefinitionUpdatableProperties {
   // Make sure we're only including the specific properties we allow updates on
-  const { iconUrl, title } = webViewDefinition;
-  return { iconUrl, title };
+  const { iconUrl, title, tooltip } = webViewDefinition;
+  return { iconUrl, title, tooltip };
 }
 
 /**

src/shared/models/docking-framework.model.ts

@@ -39,6 +39,8 @@ export type TabInfo = SavedTabInfo & {
   tabIconUrl?: string;
   /** Text to show on the title bar of the tab */
   tabTitle: string;
+  /** Text to show when hovering over the title bar of the tab */
+  tabTooltip?: string;
   /** Content to show inside the tab. */
   content: ReactNode;
   /** (optional) Minimum width that the tab can become in CSS `px` units */

src/shared/models/web-view.model.ts

@@ -39,6 +39,8 @@ type WebViewDefinitionBase = {
   iconUrl?: string;
   /** Name of the tab for the WebView */
   title?: string;
+  /** Tooltip that is shown when hovering over the webview title */
+  tooltip?: string;
   /** General object to store unique state for this webview */
   state?: Record<string, unknown>;
   /**
@@ -169,7 +171,10 @@ export type SavedWebViewDefinition =
 /** The properties on a WebViewDefinition that may be updated when that webview is already displayed */
 // To allow more properties to be updated, add them in
 // `web-view.service.ts` -> `getUpdatablePropertiesFromWebViewDefinition`
-export type WebViewDefinitionUpdatableProperties = Pick<WebViewDefinitionBase, 'iconUrl' | 'title'>;
+export type WebViewDefinitionUpdatableProperties = Pick<
+  WebViewDefinitionBase,
+  'iconUrl' | 'title' | 'tooltip'
+>;
 
 /**
  * WebViewDefinition properties for updating a WebView that is already displayed. Any unspecified