chore(react/type_widget): port atttachment list header

apps/client/src/widgets/NoteDetail.tsx

@@ -18,6 +18,7 @@ import Image from "./type_widgets/Image";
 import { ReadOnlyCode, EditableCode } from "./type_widgets/code/Code";
 import Mermaid from "./type_widgets/Mermaid";
 import MindMap from "./type_widgets/MindMap";
+import { AttachmentList } from "./type_widgets/Attachment";
 
 /**
  * A `NoteType` altered by the note detail widget, taking into consideration whether the note is editable or not and adding special note types such as an empty one,
@@ -98,6 +99,7 @@ function getCorrespondingWidget(noteType: ExtendedNoteType | undefined, props: T
         case "editableCode": return <EditableCode {...props} />
         case "mermaid": return <Mermaid {...props} />
         case "mindMap": return <MindMap {...props} />
+        case "attachmentList": return <AttachmentList {...props} />
         default: break;
     }
 }

apps/client/src/widgets/react/HelpButton.tsx

@@ -5,16 +5,17 @@ import { openInAppHelpFromUrl } from "../../services/utils";
 interface HelpButtonProps {
     className?: string;
     helpPage: string;
+    title?: string;
     style?: CSSProperties;
 }
 
-export default function HelpButton({ className, helpPage, style }: HelpButtonProps) {
+export default function HelpButton({ className, helpPage, title, style }: HelpButtonProps) {
     return (
         <button
             class={`${className ?? ""} icon-action bx bx-help-circle`}
             type="button"
             onClick={() => openInAppHelpFromUrl(helpPage)}
-            title={t("open-help-page")}
+            title={title ?? t("open-help-page")}
             style={style}
         />
     );

apps/client/src/widgets/type_widgets/Attachment.css

@@ -0,0 +1,14 @@
+/* #region Attachment list */
+.attachment-list {
+    padding-left: 15px;
+    padding-right: 15px;
+}
+
+.attachment-list .links-wrapper {
+    font-size: larger;
+    margin-bottom: 15px;
+    display: flex;
+    justify-content: space-between;
+    align-items: baseline;
+}
+/* #endregion */

apps/client/src/widgets/type_widgets/Attachment.tsx

@@ -0,0 +1,41 @@
+import { t } from "i18next";
+import { TypeWidgetProps } from "./type_widget";
+import "./Attachment.css";
+import NoteLink from "../react/NoteLink";
+import Button from "../react/Button";
+import { useContext } from "preact/hooks";
+import { ParentComponent } from "../react/react_utils";
+import HelpButton from "../react/HelpButton";
+
+export function AttachmentList({ note }: TypeWidgetProps) {
+    return (
+        <div className="attachment-list note-detail-printable">
+            <AttachmentListHeader noteId={note.noteId} />
+        </div>
+    )
+}
+
+function AttachmentListHeader({ noteId }: { noteId: string }) {
+    const parentComponent = useContext(ParentComponent);
+
+    return (
+        <div className="links-wrapper">
+            <div>
+                {t("attachment_list.owning_note")}{" "}<NoteLink notePath={noteId} />
+            </div>
+            <div className="attachment-actions-toolbar">
+                <Button
+                    size="small"
+                    icon="bx bx-folder-open"
+                    text={t("attachment_list.upload_attachments")}
+                    onClick={() => parentComponent?.triggerCommand("showUploadAttachmentsDialog", { noteId })}
+                />
+                &nbsp;
+                <HelpButton
+                    helpPage="0vhv7lsOLy82"
+                    title={t("attachment_list.open_help_page")}
+                />
+            </div>
+        </div>
+    )
+}

apps/client/src/widgets/type_widgets_old/attachment_list.ts

@@ -6,26 +6,8 @@ import { t } from "../../services/i18n.js";
 import type { EventData } from "../../components/app_context.js";
 
 const TPL = /*html*/`
-<div class="attachment-list note-detail-printable">
-    <style>
-        .attachment-list {
-            padding-left: 15px;
-            padding-right: 15px;
-        }
-
-        .attachment-list .links-wrapper {
-            font-size: larger;
-            margin-bottom: 15px;
-            display: flex;
-            justify-content: space-between;
-            align-items: baseline;
-        }
-    </style>
-
-    <div class="links-wrapper"></div>
-
     <div class="attachment-list-wrapper"></div>
-</div>`;
+`;
 
 export default class AttachmentListTypeWidget extends TypeWidget {
     $list!: JQuery<HTMLElement>;
@@ -48,7 +30,7 @@ export default class AttachmentListTypeWidget extends TypeWidget {
         const $helpButton = $(`
             <button class="attachment-help-button icon-action bx bx-help-circle"
                      type="button" data-help-page="attachments.html"
-                     title="${t("attachment_list.open_help_page")}">
+                     title="${}">
             </button>
         `);
         utils.initHelpButtons($helpButton);
@@ -56,24 +38,6 @@ export default class AttachmentListTypeWidget extends TypeWidget {
         const noteLink = await linkService.createLink(this.noteId); // do separately to avoid race condition between empty() and .append()
         noteLink.addClass("use-tn-links");
 
-        const $uploadButton = $(`
-            <button class="btn btn-sm">
-                <span class="bx bx-folder-open"></span>
-                ${t("attachment_list.upload_attachments")}
-            </button>
-        `);
-
-        $uploadButton.on("click", () => {
-            if (this.noteId) {
-                this.triggerCommand("showUploadAttachmentsDialog", { noteId: this.noteId });
-            }
-        })
-
-        this.$linksWrapper.empty().append(
-            $("<div>").append(t("attachment_list.owning_note"), noteLink),
-            $(`<div class="attachment-actions-toolbar">`).append($uploadButton, $helpButton)
-        );
-
         this.$list.empty();
         this.children = [];
         this.renderedAttachmentIds = new Set();