Change link to manual in help screen from icon to text (#2886)

* Change help screen link to manual from icon to text

* Fix auto advance manual link (dae)

ftl/core/help.ftl

@@ -1,11 +1,15 @@
 ### Text shown in Help pages
 
+## Header/footer
 
-## Header
+# Link to more detailed information in the manual
+help-for-more-info = For more information, see { $link } in the manual.
 
 # Tooltip for links to the manual
 help-open-manual-chapter = Open { $name } in the manual
 
+help-ok = OK
+
 ## Body
 
 # Newly introduced settings may not have an explanation yet
@@ -13,10 +17,3 @@ help-no-explanation =
     Whoops! There doesn't seem to be an explanation for this setting yet.
     
     You can help us complete this help page on { $link }.
-
-## Footer
-
-# Link to more detailed information in the manual
-help-for-more-info = For more information, see { $link } in the manual.
-
-help-ok = OK

ts/components/HelpModal.svelte

@@ -4,6 +4,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
 -->
 <script lang="ts">
     import * as tr from "@tslib/ftl";
+    import { renderMarkdown } from "@tslib/helpers";
     import Carousel from "bootstrap/js/dist/carousel";
     import Modal from "bootstrap/js/dist/modal";
     import { createEventDispatcher, getContext, onMount } from "svelte";
@@ -13,7 +14,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
     import Col from "./Col.svelte";
     import { modalsKey } from "./context-keys";
     import HelpSection from "./HelpSection.svelte";
-    import { infoCircle, manualIcon } from "./icons";
+    import { infoCircle } from "./icons";
     import Row from "./Row.svelte";
     import { type HelpItem, HelpItemScheduler } from "./types";
 
@@ -67,19 +68,10 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
     <div class="modal-dialog modal-lg">
         <div class="modal-content">
             <div class="modal-header">
+                <div style="display: flex;">
                     <h1 class="modal-title" id="modalLabel">
                         {title}
                     </h1>
-                {#if url}
-                    <a class="manual-badge" href={url}>
-                        <Badge
-                            iconSize={120}
-                            tooltip={tr.helpOpenManualChapter({ name: title })}
-                        >
-                            {@html manualIcon}
-                        </Badge>
-                    </a>
-                {/if}
                     <button
                         type="button"
                         class="btn-close"
@@ -88,6 +80,20 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
                         aria-label="Close"
                     />
                 </div>
+                {#if url}
+                    <div class="chapter-redirect">
+                        {@html renderMarkdown(
+                            tr.helpForMoreInfo({
+                                link: `<a href="${url}" title="${tr.helpOpenManualChapter(
+                                    {
+                                        name: title,
+                                    },
+                                )}">${title}</a>`,
+                            }),
+                        )}
+                    </div>
+                {/if}
+            </div>
             <div class="modal-body">
                 <Row --cols={4}>
                     <Col --col-size={1}>
@@ -157,14 +163,6 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
         margin-inline-end: 0.75rem;
     }
 
-    .manual-badge {
-        text-decoration: none;
-        color: var(--fg-subtle);
-        &:hover {
-            color: var(--fg);
-        }
-    }
-
     .modal-content {
         background-color: var(--canvas);
         color: var(--fg);
@@ -198,4 +196,16 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
             border-inline-start: 4px solid var(--border-focus);
         }
     }
+
+    .modal-header {
+        flex-direction: column;
+        align-items: normal;
+        padding-bottom: 0;
+    }
+
+    .chapter-redirect {
+        width: 100%;
+        color: var(--fg-subtle);
+        font-size: small;
+    }
 </style>

ts/components/icons.ts

@@ -5,7 +5,6 @@
 
 export { default as hsplitIcon } from "@mdi/svg/svg/arrow-split-horizontal.svg";
 export { default as vsplitIcon } from "@mdi/svg/svg/arrow-split-vertical.svg";
-export { default as manualIcon } from "@mdi/svg/svg/book-open-variant.svg";
 export { default as chevronDown } from "@mdi/svg/svg/chevron-down.svg";
 export { default as chevronLeft } from "@mdi/svg/svg/chevron-left.svg";
 export { default as chevronRight } from "@mdi/svg/svg/chevron-right.svg";

ts/deck-options/AutoAdvance.svelte

@@ -58,7 +58,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
 <TitledContainer title={tr.actionsAutoAdvance()}>
     <HelpModal
         title={tr.deckConfigTimerTitle()}
-        url={HelpPage.DeckOptions.timer}
+        url={HelpPage.DeckOptions.autoAdvance}
         slot="tooltip"
         {helpSections}
         on:mount={(e) => {

ts/lib/help-page.ts

@@ -12,6 +12,7 @@ export const HelpPage = {
         newInterval: "https://docs.ankiweb.net/deck-options.html#new-interval",
         advanced: "https://docs.ankiweb.net/deck-options.html#advanced",
         timer: "https://docs.ankiweb.net/deck-options.html#timer",
+        autoAdvance: "https://docs.ankiweb.net/deck-options.html#auto-advance",
         learningSteps: "https://docs.ankiweb.net/deck-options.html#learning-steps",
         graduatingInterval: "https://docs.ankiweb.net/deck-options.html#graduating-interval",
         easyInterval: "https://docs.ankiweb.net/deck-options.html#easy-interval",