feat: added feature and setting for whether to show the current comic's tagline as its tooltip

Closes #47

Author: ilyvion

CHANGELOG.md

@@ -12,6 +12,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 -   Add guest comic/non-canon pills to `ComicList`
 -   Add Storybook link to README
 -   Added list of comics an item is featured in. Closes [#19](https://github.com/Questionable-Content-Extensions/client/issues/19)
+-   Added feature and setting for whether to show the current comic's tagline as its tooltip. Closes [#47](https://github.com/Questionable-Content-Extensions/client/issues/47)
 
 ### Changed 🔧
 

src/components/Comic/Comic.tsx

@@ -144,6 +144,11 @@ function Comic({
                     initialComicSrc={initialComicSrc}
                     initialComic={initialComic}
                     imageReady={imageReady}
+                    tagline={
+                        settings?.showTaglineAsTooltip && comicData?.hasData
+                            ? comicData.tagline
+                            : null
+                    }
                 />
             </a>
             <FullPageLoader

src/components/Comic/ComicImage/ComicImage.tsx

@@ -12,13 +12,14 @@ export default function ComicImage({
     imageData,
     initialComicSrc,
     initialComic,
-
     imageReady,
+    tagline,
 }: {
     imageData: { comicNo: number | null; imageType: ImageType | null }
     initialComicSrc: string
     initialComic: number
     imageReady: () => void
+    tagline: string | null
 }) {
     const [comicSrc, setComicSrc] = useState(initialComicSrc)
     const [previousImageData, setPreviousImageData] = useState(imageData)
@@ -111,6 +112,7 @@ export default function ComicImage({
             className="qc-ext qc-ext-comic"
             src={comicSrc}
             alt={`Comic #${previousImageData.comicNo || initialComic}`}
+            title={tagline ?? undefined}
         />
     )
 }

src/components/SettingsDialog/SettingsPanel/SettingsPanel.tsx

@@ -75,6 +75,16 @@ export default function SettingsPanel({
                     'information over the top-right corner of the comic strip.'
                 }
             />
+            <ToggleSetting
+                settings={settings}
+                setting="showTaglineAsTooltip"
+                updateSettings={updateSettings}
+                label="Show tagline as comic tooltip"
+                description={
+                    'When this setting is enabled and the currently shown comic strip has a tagline, its tagline will ' +
+                    "become the comic strip's tooltip."
+                }
+            />
             <ToggleSetting
                 settings={settings}
                 setting="useCorrectTimeFormat"

src/settings.ts

@@ -35,6 +35,8 @@ export interface SettingValues {
 
     subDivideGotoComics: boolean
 
+    showTaglineAsTooltip: boolean
+
     /**
      * The last version seen by the change log dialog.
      * Used to know when we need to urge users to open it
@@ -88,9 +90,6 @@ export class Settings {
         scrollToTop: true,
 
         showAllMembers: false,
-        showCast: true,
-        showStorylines: true,
-        showLocations: true,
         useColors: true,
 
         skipNonCanon: false,
@@ -100,13 +99,21 @@ export class Settings {
         editModeToken: '',
 
         showIndicatorRibbon: true,
-        showSmallRibbonByDefault: false,
         useCorrectTimeFormat: true,
         comicLoadingIndicatorDelay: 2000,
 
         subDivideGotoComics: true,
 
+        showTaglineAsTooltip: true,
+
         version: null,
+
+        // DEPRECATED:
+
+        showCast: true,
+        showStorylines: true,
+        showLocations: true,
+        showSmallRibbonByDefault: false,
     }
 
     values: SettingValues