Fix reduce motion bottom border issues (#2185)

* Fix reduce motion bottom border issues

* Disable show/hide on hover with reduce motion setting

for purists.

ts/components/Collapsible.svelte

@@ -78,13 +78,14 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
     <slot {collapsed} />
 </div>
 
-{#if measuring}
+{#if animated && measuring}
     <!-- Maintain document flow while collapsible height is measured -->
     <div class="collapsible-placeholder" />
 {/if}
 
 <style lang="scss">
-    .collapsible.animated {
+    .collapsible {
+        &.animated {
             &.measuring {
                 display: initial;
                 position: absolute;
@@ -97,15 +98,15 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
                 &.expanded {
                     overflow: visible;
                 }
-        }
-
                 &.full-hide {
-            &.hidden {
-                display: none;
-            }
-            &.transitioning {
                     display: initial;
                 }
             }
         }
+        &.full-hide {
+            &.hidden {
+                display: none;
+            }
+        }
+    }
 </style>

ts/editor/NoteCreator.svelte

@@ -45,7 +45,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
 </script>
 
 <NoteEditor bind:this={noteEditor} {api}>
-    <svelte:fragment slot="field-state" let:index let:visible>
+    <svelte:fragment slot="field-state" let:index let:show>
-        <StickyBadge bind:active={stickies[index]} {index} {visible} />
+        <StickyBadge bind:active={stickies[index]} {index} {show} />
     </svelte:fragment>
 </NoteEditor>

ts/editor/NoteEditor.svelte

@@ -468,7 +468,7 @@ the AddCards dialog) should be implemented in the user of this component.
                                     {/if}
                                     {#if plainTextDefaults[index]}
                                         <RichTextBadge
-                                            visible={!fieldsCollapsed[index] &&
+                                            show={!fieldsCollapsed[index] &&
                                                 (fields[index] === $hoveredField ||
                                                     fields[index] === $focusedField)}
                                             bind:off={richTextsHidden[index]}
@@ -485,7 +485,7 @@ the AddCards dialog) should be implemented in the user of this component.
                                         />
                                     {:else}
                                         <PlainTextBadge
-                                            visible={!fieldsCollapsed[index] &&
+                                            show={!fieldsCollapsed[index] &&
                                                 (fields[index] === $hoveredField ||
                                                     fields[index] === $focusedField)}
                                             bind:off={plainTextsHidden[index]}
@@ -505,7 +505,7 @@ the AddCards dialog) should be implemented in the user of this component.
                                         name="field-state"
                                         {field}
                                         {index}
-                                        visible={fields[index] === $hoveredField ||
+                                        show={fields[index] === $hoveredField ||
                                             fields[index] === $focusedField}
                                     />
                                 </FieldState>

ts/editor/PlainTextBadge.svelte

@@ -11,11 +11,13 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
     import { context as editorFieldContext } from "./EditorField.svelte";
     import { plainTextIcon } from "./icons";
 
+    const animated = !document.body.classList.contains("reduced-motion");
+
     const editorField = editorFieldContext.get();
     const keyCombination = "Control+Shift+X";
     const dispatch = createEventDispatcher();
 
-    export let visible = false;
+    export let show = false;
     export let off = false;
 
     function toggle() {
@@ -31,7 +33,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
 
 <span
     class="plain-text-badge"
-    class:visible
+    class:visible={show || !animated}
     class:highlighted={!off}
     on:click|stopPropagation={toggle}
 >

ts/editor/RichTextBadge.svelte

@@ -11,11 +11,13 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
     import { context as editorFieldContext } from "./EditorField.svelte";
     import { richTextIcon } from "./icons";
 
+    const animated = !document.body.classList.contains("reduced-motion");
+
     const editorField = editorFieldContext.get();
     const keyCombination = "Control+Shift+X";
     const dispatch = createEventDispatcher();
 
-    export let visible = false;
+    export let show = false;
     export let off = false;
 
     function toggle() {
@@ -31,7 +33,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
 
 <span
     class="plain-text-badge"
-    class:visible
+    class:visible={show || !animated}
     class:highlighted={!off}
     on:click|stopPropagation={toggle}
 >

ts/editor/StickyBadge.svelte

@@ -12,8 +12,10 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
     import { context as editorFieldContext } from "./EditorField.svelte";
     import { stickyIcon } from "./icons";
 
+    const animated = !document.body.classList.contains("reduced-motion");
+
     export let active: boolean;
-    export let visible: boolean;
+    export let show: boolean;
 
     const editorField = editorFieldContext.get();
     const keyCombination = "F9";
@@ -33,7 +35,11 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
     onMount(() => editorField.element.then(shortcut));
 </script>
 
-<span class:highlighted={active} class:visible on:click|stopPropagation={toggle}>
+<span
+    class:highlighted={active}
+    class:visible={show || !animated}
+    on:click|stopPropagation={toggle}
+>
     <Badge
         tooltip="{tr.editingToggleSticky()} ({getPlatformString(keyCombination)})"
         widthMultiplier={0.7}>{@html stickyIcon}</Badge