display tag description and tag image on hover

closes stashapp#2575

graphql/documents/data/config.graphql

@@ -49,6 +49,7 @@ fragment ConfigGeneralData on ConfigGeneralResult {
 
 fragment ConfigInterfaceData on ConfigInterfaceResult {
   menuItems
+  showTagCardOnHover
   soundOnPreview
   wallShowTitle
   wallPlayback

graphql/schema/types/config.graphql

@@ -233,6 +233,9 @@ input ConfigInterfaceInput {
   """Ordered list of items that should be shown in the menu"""
   menuItems: [String!]
 
+  """Show tag card when hovering tags"""
+  showTagCardOnHover: Boolean
+
   """Enable sound on mouseover previews"""
   soundOnPreview: Boolean
 
@@ -291,6 +294,9 @@ type ConfigInterfaceResult {
   """Ordered list of items that should be shown in the menu"""
   menuItems: [String!]
 
+  """Show tag card when hovering tags"""
+  showTagCardOnHover: Boolean
+
   """Enable sound on mouseover previews"""
   soundOnPreview: Boolean
 

internal/api/resolver_mutation_configure.go

@@ -302,6 +302,7 @@ func (r *mutationResolver) ConfigureInterface(ctx context.Context, input ConfigI
 		c.Set(config.MenuItems, input.MenuItems)
 	}
 
+	setBool(config.ShowTagCardOnHover, input.ShowTagCardOnHover)
 	setBool(config.SoundOnPreview, input.SoundOnPreview)
 	setBool(config.WallShowTitle, input.WallShowTitle)
 

internal/api/resolver_query_configuration.go

@@ -128,6 +128,7 @@ func makeConfigGeneralResult() *ConfigGeneralResult {
 func makeConfigInterfaceResult() *ConfigInterfaceResult {
 	config := config.GetInstance()
 	menuItems := config.GetMenuItems()
+	showTagCardOnHover := config.GetShowTagCardOnHover()
 	soundOnPreview := config.GetSoundOnPreview()
 	wallShowTitle := config.GetWallShowTitle()
 	showScrubber := config.GetShowScrubber()
@@ -151,6 +152,7 @@ func makeConfigInterfaceResult() *ConfigInterfaceResult {
 
 	return &ConfigInterfaceResult{
 		MenuItems:                    menuItems,
+		ShowTagCardOnHover:           &showTagCardOnHover,
 		SoundOnPreview:               &soundOnPreview,
 		WallShowTitle:                &wallShowTitle,
 		WallPlayback:                 &wallPlayback,

internal/manager/config/config.go

@@ -125,6 +125,8 @@ const (
 	// Interface options
 	MenuItems = "menu_items"
 
+	ShowTagCardOnHover = "show_tag_card_on_hover"
+
 	SoundOnPreview = "sound_on_preview"
 
 	WallShowTitle        = "wall_show_title"
@@ -877,6 +879,10 @@ func (i *Instance) GetMenuItems() []string {
 	return defaultMenuItems
 }
 
+func (i *Instance) GetShowTagCardOnHover() bool {
+	return i.getBool(ShowTagCardOnHover)
+}
+
 func (i *Instance) GetSoundOnPreview() bool {
 	return i.getBool(SoundOnPreview)
 }

ui/v2.5/src/components/Settings/SettingsInterfacePanel/SettingsInterfacePanel.tsx

@@ -130,6 +130,14 @@ export const SettingsInterfacePanel: React.FC = () => {
             onChange={(v) => saveInterface({ menuItems: v })}
           />
         </div>
+
+        <BooleanSetting
+          id="show-tag-card-on-hover"
+          headingID="config.ui.show_tag_card_on_hover.heading"
+          subHeadingID="config.ui.show_tag_card_on_hover.description"
+          checked={iface.showTagCardOnHover ?? undefined}
+          onChange={(v) => saveInterface({ showTagCardOnHover: v })}
+        />
       </SettingSection>
 
       <SettingSection headingID="config.ui.desktop_integration.desktop_integration">

ui/v2.5/src/components/Shared/Select.tsx

@@ -27,6 +27,7 @@ import { ConfigurationContext } from "src/hooks/Config";
 import { useIntl } from "react-intl";
 import { objectTitle } from "src/core/files";
 import { galleryTitle } from "src/core/galleries";
+import { TagPopover } from "../Tags/TagPopover";
 
 export type ValidTypes =
   | GQL.SlimPerformerDataFragment
@@ -659,7 +660,11 @@ export const TagSelect: React.FC<IFilterProps & { excludeIds?: string[] }> = (
       };
     }
 
-    return <reactSelectComponents.Option {...thisOptionProps} />;
+    return (
+      <TagPopover id={optionProps.data.value}>
+        <reactSelectComponents.Option {...thisOptionProps} />
+      </TagPopover>
+    );
   };
 
   const filterOption = (option: Option, rawInput: string): boolean => {

ui/v2.5/src/components/Shared/TagLink.tsx

@@ -14,6 +14,7 @@ import TextUtils from "src/utils/text";
 import { objectTitle } from "src/core/files";
 import { galleryTitle } from "src/core/galleries";
 import * as GQL from "src/core/generated-graphql";
+import { TagPopover } from "../Tags/TagPopover";
 
 interface IFile {
   path: string;
@@ -37,6 +38,7 @@ interface IProps {
 }
 
 export const TagLink: React.FC<IProps> = (props: IProps) => {
+  let id: string = "";
   let link: string = "#";
   let title: string = "";
   if (props.tag) {
@@ -55,6 +57,7 @@ export const TagLink: React.FC<IProps> = (props: IProps) => {
         link = NavUtils.makeTagImagesUrl(props.tag);
         break;
     }
+    id = props.tag.id || "";
     title = props.tag.name || "";
   } else if (props.performer) {
     link = NavUtils.makePerformerScenesUrl(props.performer);
@@ -76,7 +79,9 @@ export const TagLink: React.FC<IProps> = (props: IProps) => {
   }
   return (
     <Badge className={cx("tag-item", props.className)} variant="secondary">
-      <Link to={link}>{title}</Link>
+      <TagPopover id={id}>
+        <Link to={link}>{title}</Link>
+      </TagPopover>
     </Badge>
   );
 };

ui/v2.5/src/components/Tags/TagPopover.tsx

@@ -0,0 +1,57 @@
+import React from "react";
+import { ErrorMessage, LoadingIndicator } from "../Shared";
+import { HoverPopover } from "src/components/Shared";
+import { useFindTag } from "../../core/StashService";
+import { TagCard } from "./TagCard";
+import { ConfigurationContext } from "../../hooks/Config";
+
+interface ITagPopoverProps {
+  id?: string;
+}
+
+export const TagPopoverCard: React.FC<ITagPopoverCardProps> = ({ id }) => {
+  const { data, loading, error } = useFindTag(id ?? "");
+
+  if (loading)
+    return (
+      <div className="tag-popover-card-placeholder">
+        <LoadingIndicator card={true} message={""} />
+      </div>
+    );
+  if (error) return <ErrorMessage error={error.message} />;
+  if (!data?.findTag)
+    return <ErrorMessage error={`No tag found with id ${id}.`} />;
+
+  const tag = data.findTag;
+
+  return (
+    <div className="tag-popover-card">
+      <TagCard tag={tag} zoomIndex={0} />
+    </div>
+  );
+};
+
+export const TagPopover: React.FC<ITagPopoverProps> = ({ id, children }) => {
+  const { configuration: config } = React.useContext(ConfigurationContext);
+
+  const showTagCardOnHover = config?.interface.showTagCardOnHover ?? true;
+
+  if (!id || !showTagCardOnHover) {
+    return <>{children}</>;
+  }
+
+  return (
+    <HoverPopover
+      placement={"top"}
+      enterDelay={500}
+      leaveDelay={100}
+      content={<TagPopoverCard id={id} />}
+    >
+      {children}
+    </HoverPopover>
+  );
+};
+
+interface ITagPopoverCardProps {
+  id?: string;
+}

ui/v2.5/src/components/Tags/styles.scss

@@ -49,3 +49,22 @@
     margin-top: 1rem;
   }
 }
+
+.tag-popover-card-placeholder {
+  display: flex;
+  max-width: 240px;
+  min-height: 314px;
+  width: calc(100vw - 2rem);
+}
+
+.tag-popover-card {
+  padding: 0.5rem;
+  text-align: left;
+
+  .card {
+    background: transparent;
+    box-shadow: none;
+    max-width: calc(100vw - 2rem);
+    padding: 0;
+  }
+}

ui/v2.5/src/locales/en-GB.json

@@ -491,6 +491,10 @@
         "description": "Show or hide different types of content on the navigation bar",
         "heading": "Menu Items"
       },
+      "show_tag_card_on_hover": {
+        "description": "Show tag card when hovering tag badges",
+        "heading": "Tag card tooltips"
+      },
       "performers": {
         "options": {
           "image_location": {