feat(react/floating_buttons): add mobile support

apps/client/src/layouts/desktop_layout.tsx

@@ -41,6 +41,7 @@ import type { WidgetsByParent } from "../services/bundle.js";
 import { applyModals } from "./layout_commons.js";
 import Ribbon from "../widgets/ribbon/Ribbon.jsx";
 import FloatingButtons from "../widgets/FloatingButtons.jsx";
+import { DESKTOP_FLOATING_BUTTONS } from "../widgets/FloatingButtonsDefinitions.jsx";
 
 export default class DesktopLayout {
 
@@ -130,7 +131,7 @@ export default class DesktopLayout {
                                                         .child(<Ribbon />)
                                                         .child(new SharedInfoWidget())
                                                         .child(new WatchedFileUpdateStatusWidget())
-                                                        .child(<FloatingButtons />)
+                                                        .child(<FloatingButtons items={DESKTOP_FLOATING_BUTTONS} />)
                                                         .child(
                                                             new ScrollingContainer()
                                                                 .filling()

apps/client/src/layouts/mobile_layout.tsx

@@ -7,12 +7,6 @@ import ToggleSidebarButtonWidget from "../widgets/mobile_widgets/toggle_sidebar_
 import MobileDetailMenuWidget from "../widgets/mobile_widgets/mobile_detail_menu.js";
 import ScreenContainer from "../widgets/mobile_widgets/screen_container.js";
 import ScrollingContainer from "../widgets/containers/scrolling_container.js";
-import FloatingButtons from "../widgets/floating_buttons/floating_buttons.js";
-import EditButton from "../widgets/floating_buttons/edit_button.js";
-import RelationMapButtons from "../widgets/floating_buttons/relation_map_buttons.js";
-import SvgExportButton from "../widgets/floating_buttons/svg_export_button.js";
-import BacklinksWidget from "../widgets/floating_buttons/zpetne_odkazy.js";
-import HideFloatingButtonsButton from "../widgets/floating_buttons/hide_floating_buttons_button.js";
 import NoteListWidget from "../widgets/note_list.js";
 import GlobalMenuWidget from "../widgets/buttons/global_menu.js";
 import LauncherContainer from "../widgets/containers/launcher_container.js";
@@ -22,14 +16,13 @@ import PromotedAttributesWidget from "../widgets/promoted_attributes.js";
 import SidebarContainer from "../widgets/mobile_widgets/sidebar_container.js";
 import type AppContext from "../components/app_context.js";
 import TabRowWidget from "../widgets/tab_row.js";
-import RefreshButton from "../widgets/floating_buttons/refresh_button.js";
 import MobileEditorToolbar from "../widgets/type_widgets/ckeditor/mobile_editor_toolbar.js";
 import { applyModals } from "./layout_commons.js";
 import CloseZenButton from "../widgets/close_zen_button.js";
 import FilePropertiesTab from "../widgets/ribbon/FilePropertiesTab.jsx";
 import { useNoteContext } from "../widgets/react/hooks.jsx";
-import { useContext } from "preact/hooks";
+import FloatingButtons from "../widgets/FloatingButtons.jsx";
-import { ParentComponent } from "../widgets/react/react_utils.jsx";
+import { MOBILE_FLOATING_BUTTONS } from "../widgets/FloatingButtonsDefinitions.jsx";
 
 const MOBILE_CSS = `
 <style>
@@ -151,15 +144,7 @@ export default class MobileLayout {
                                     .child(new MobileDetailMenuWidget(true).contentSized())
                             )
                             .child(new SharedInfoWidget())
-                            .child(
+                            .child(<FloatingButtons items={MOBILE_FLOATING_BUTTONS} />)
-                                new FloatingButtons()
-                                    .child(new RefreshButton())
-                                    .child(new EditButton())
-                                    .child(new RelationMapButtons())
-                                    .child(new SvgExportButton())
-                                    .child(new BacklinksWidget())
-                                    .child(new HideFloatingButtonsButton())
-                            )
                             .child(new PromotedAttributesWidget())
                             .child(
                                 new ScrollingContainer()

apps/client/src/widgets/FloatingButtons.tsx

@@ -4,10 +4,14 @@ import { useNoteContext, useNoteLabel, useNoteLabelBoolean } from "./react/hooks
 import { useContext, useEffect, useMemo, useState } from "preact/hooks";
 import { ParentComponent } from "./react/react_utils";
 import { EventData, EventNames } from "../components/app_context";
-import { FLOATING_BUTTONS, type FloatingButtonContext } from "./FloatingButtonsDefinitions";
+import { type FloatingButtonsList, type FloatingButtonContext } from "./FloatingButtonsDefinitions";
 import ActionButton from "./react/ActionButton";
 import { ViewTypeOptions } from "../services/note_list_renderer";
 
+interface FloatingButtonsProps {
+    items: FloatingButtonsList;
+}
+
 /*
  * Note:
  *
@@ -15,7 +19,7 @@ import { ViewTypeOptions } from "../services/note_list_renderer";
  * be applied to the root element of the widget. Additionally, this root element may need to
  * properly handle rounded corners, as defined by the --border-radius CSS variable.
  */
-export default function FloatingButtons() {
+export default function FloatingButtons({ items }: FloatingButtonsProps) {
     const { note, noteContext } = useNoteContext();
     const parentComponent = useContext(ParentComponent);
     const [ viewType ] = useNoteLabel(note, "viewType");
@@ -46,7 +50,7 @@ export default function FloatingButtons() {
     return (
         <div className="floating-buttons no-print">
             <div className={`floating-buttons-children ${!visible ? "temporarily-hidden" : ""}`}>
-                {context && FLOATING_BUTTONS.map((Component) => (
+                {context && items.map((Component) => (
                     <Component {...context} />
                 ))}
 

apps/client/src/widgets/FloatingButtonsDefinitions.tsx

@@ -40,7 +40,9 @@ function FloatingButton({ className, ...props }: ActionButtonProps) {
     />
 }
 
-export const FLOATING_BUTTONS: ((context: FloatingButtonContext) => false | VNode)[] = [
+export type FloatingButtonsList = ((context: FloatingButtonContext) => false | VNode)[];
+
+export const DESKTOP_FLOATING_BUTTONS: FloatingButtonsList = [
     RefreshBackendLogButton,
     SwitchSplitOrientationButton,
     ToggleReadOnlyButton,
@@ -58,6 +60,14 @@ export const FLOATING_BUTTONS: ((context: FloatingButtonContext) => false | VNod
     Backlinks
 ];
 
+export const MOBILE_FLOATING_BUTTONS: FloatingButtonsList = [
+    RefreshBackendLogButton,
+    EditButton,
+    RelationMapButtons,
+    ExportImageButtons,
+    Backlinks    
+]
+
 function RefreshBackendLogButton({ note, parentComponent, noteContext, isDefaultViewMode }: FloatingButtonContext) {
     const isEnabled = note.noteId === "_backendLog" && isDefaultViewMode;
     return isEnabled && <FloatingButton