diff --git a/ftl/core/editing.ftl b/ftl/core/editing.ftl
index 96e5af0e5..244872282 100644
--- a/ftl/core/editing.ftl
+++ b/ftl/core/editing.ftl
@@ -54,7 +54,8 @@ editing-text-highlight-color = Text highlight color
 editing-to-make-a-cloze-deletion-on = To make a cloze deletion on an existing note, you need to change it to a cloze type first, via 'Notes>Change Note Type'
 editing-toggle-html-editor = Toggle HTML Editor
 editing-toggle-sticky = Toggle sticky
-editing-toggle-visual-editor = Toggle Visual Editor
+editing-expand-field = Expand field
+editing-collapse-field = Collapse field
 editing-underline-text = Underline text
 editing-unordered-list = Unordered list
 editing-warning-cloze-deletions-will-not-work = Warning, cloze deletions will not work until you switch the type at the top to Cloze.
diff --git a/sass/_vars.scss b/sass/_vars.scss
index 2e584d1da..1a2efce62 100644
--- a/sass/_vars.scss
+++ b/sass/_vars.scss
@@ -38,6 +38,7 @@
     --tooltip-bg: #fcfcfc;
     --focus-border: #0969da;
     --focus-shadow: rgba(9 105 218 / 0.3);
+    --code-bg: white;
 }
 
 :root[class*="night-mode"] {
@@ -77,5 +78,6 @@
     --tooltip-bg: #272727;
     --focus-border: #316dca;
     --focus-shadow: #194380;
+    --code-bg: #272822;
     color-scheme: dark;
 }
diff --git a/ts/components/Collapsible.svelte b/ts/components/Collapsible.svelte
new file mode 100644
index 000000000..3a116aa53
--- /dev/null
+++ b/ts/components/Collapsible.svelte
@@ -0,0 +1,100 @@
+<!--
+Copyright: Ankitects Pty Ltd and contributors
+License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
+-->
+<script lang="ts">
+    import { promiseWithResolver } from "../lib/promise";
+
+    export let id: string | undefined = undefined;
+    let className: string = "";
+    export { className as class };
+
+    export let collapsed = false;
+
+    const [outerPromise, outerResolve] = promiseWithResolver<HTMLElement>();
+    const [innerPromise, innerResolve] = promiseWithResolver<HTMLElement>();
+
+    let isCollapsed = false;
+
+    let style: string;
+    function setStyle(height: number, duration: number) {
+        style = `--collapse-height: -${height}px; --duration: ${duration}ms`;
+    }
+
+    /* The following two functions use synchronous DOM-manipulation,
+    because Editor field inputs would lose focus when using tick() */
+
+    function getRequiredHeight(el: HTMLElement): number {
+        el.style.setProperty("position", "absolute");
+        el.style.setProperty("visibility", "hidden");
+        el.removeAttribute("hidden");
+
+        const height = el.clientHeight;
+
+        el.setAttribute("hidden", "");
+        el.style.removeProperty("position");
+        el.style.removeProperty("visibility");
+
+        return height;
+    }
+
+    async function transition(collapse: boolean) {
+        const outer = await outerPromise;
+        const inner = await innerPromise;
+
+        outer.style.setProperty("overflow", "hidden");
+        isCollapsed = true;
+
+        const height = collapse ? inner.clientHeight : getRequiredHeight(inner);
+        const duration = Math.sqrt(height * 80);
+
+        setStyle(height, duration);
+
+        if (!collapse) {
+            inner.removeAttribute("hidden");
+            isCollapsed = false;
+        }
+
+        inner.addEventListener(
+            "transitionend",
+            () => {
+                inner.toggleAttribute("hidden", collapse);
+                outer.style.removeProperty("overflow");
+            },
+            { once: true },
+        );
+    }
+
+    /* prevent transition on mount for performance reasons */
+    let blockTransition = true;
+
+    $: if (blockTransition) {
+        blockTransition = false;
+    } else {
+        transition(collapsed);
+    }
+</script>
+
+<div {id} class="collapsible-container {className}" use:outerResolve>
+    <div
+        class="collapsible-inner"
+        class:collapsed={isCollapsed}
+        use:innerResolve
+        {style}
+    >
+        <slot />
+    </div>
+</div>
+
+<style lang="scss">
+    .collapsible-container {
+        position: relative;
+    }
+    .collapsible-inner {
+        transition: margin-top var(--duration) ease-in;
+
+        &.collapsed {
+            margin-top: var(--collapse-height);
+        }
+    }
+</style>
diff --git a/ts/editor/CollapseBadge.svelte b/ts/editor/CollapseBadge.svelte
new file mode 100644
index 000000000..42f7e1b17
--- /dev/null
+++ b/ts/editor/CollapseBadge.svelte
@@ -0,0 +1,35 @@
+<!--
+Copyright: Ankitects Pty Ltd and contributors
+License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
+-->
+<script lang="ts">
+    import Badge from "../components/Badge.svelte";
+    import { chevronDown } from "./icons";
+
+    export let collapsed = false;
+    export let highlighted = false;
+</script>
+
+<div class="collapse-badge" class:collapsed class:highlighted>
+    <Badge iconSize={80} --icon-align="text-bottom">{@html chevronDown}</Badge>
+</div>
+
+<style lang="scss">
+    .collapse-badge {
+        display: inline-block;
+        opacity: 0.4;
+        transition: opacity 0.2s ease-in-out, transform 80ms ease-in;
+        &.highlighted {
+            opacity: 1;
+        }
+        &.collapsed {
+            transform: rotate(-90deg);
+        }
+    }
+
+    :global([dir="rtl"]) {
+        .collapse-badge.collapsed {
+            transform: rotate(90deg);
+        }
+    }
+</style>
diff --git a/ts/editor/EditingArea.svelte b/ts/editor/EditingArea.svelte
index 8aa156bed..da5dfd0f9 100644
--- a/ts/editor/EditingArea.svelte
+++ b/ts/editor/EditingArea.svelte
@@ -189,10 +189,28 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
 
         position: relative;
         background: var(--frame-bg);
-        border-radius: 0 0 5px 5px;
+        border-radius: 5px;
+        border: 1px solid var(--border);
 
-        &:focus {
+        box-shadow: 0px 0px 2px 0px var(--border);
+        transition: box-shadow 80ms cubic-bezier(0.33, 1, 0.68, 1);
+
+        &:focus-within {
             outline: none;
+
+            /* This pseudo-element is required to display
+               the inset box-shadow above field contents */
+            &::after {
+                content: "";
+                position: absolute;
+                top: -1px;
+                right: -1px;
+                bottom: -1px;
+                left: -1px;
+                pointer-events: none;
+                border-radius: 5px;
+                box-shadow: inset 0 0 0 2px var(--focus-border);
+            }
         }
     }
 </style>
diff --git a/ts/editor/EditorField.svelte b/ts/editor/EditorField.svelte
index 23588ffb6..bd3f1983d 100644
--- a/ts/editor/EditorField.svelte
+++ b/ts/editor/EditorField.svelte
@@ -45,22 +45,26 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
     import type { Writable } from "svelte/store";
     import { writable } from "svelte/store";
 
-    import { directionKey } from "../lib/context-keys";
+    import Collapsible from "../components/Collapsible.svelte";
+    import { collapsedKey, directionKey } from "../lib/context-keys";
     import { promiseWithResolver } from "../lib/promise";
     import type { Destroyable } from "./destroyable";
     import EditingArea from "./EditingArea.svelte";
-    import FieldState from "./FieldState.svelte";
-    import LabelContainer from "./LabelContainer.svelte";
-    import LabelName from "./LabelName.svelte";
 
     export let content: Writable<string>;
     export let field: FieldData;
+    export let collapsed = false;
 
     const directionStore = writable<"ltr" | "rtl">();
     setContext(directionKey, directionStore);
 
     $: $directionStore = field.direction;
 
+    const collapsedStore = writable<boolean>();
+    setContext(collapsedKey, collapsedStore);
+
+    $: $collapsedStore = collapsed;
+
     const editingArea: Partial<EditingAreaAPI> = {};
     const [element, elementResolve] = promiseWithResolver<HTMLElement>();
 
@@ -85,37 +89,26 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
     on:focusin
     on:focusout
     on:click={() => editingArea.focus?.()}
+    on:mouseenter
+    on:mouseleave
 >
-    <LabelContainer>
-        <span>
-            <LabelName>
-                {field.name}
-            </LabelName>
-        </span>
-        <FieldState><slot name="field-state" /></FieldState>
-    </LabelContainer>
-    <EditingArea
-        {content}
-        fontFamily={field.fontFamily}
-        fontSize={field.fontSize}
-        api={editingArea}
-    >
-        <slot name="editing-inputs" />
-    </EditingArea>
+    <slot name="field-label" />
+
+    <Collapsible {collapsed}>
+        <EditingArea
+            {content}
+            fontFamily={field.fontFamily}
+            fontSize={field.fontSize}
+            api={editingArea}
+        >
+            <slot name="editing-inputs" />
+        </EditingArea>
+    </Collapsible>
 </div>
 
 <style lang="scss">
     .editor-field {
+        position: relative;
         --border-color: var(--border);
-
-        border-radius: 5px;
-        border: 1px solid var(--border-color);
-
-        &:focus-within {
-            --border-color: var(--focus-border);
-
-            outline: none;
-            box-shadow: 0 0 0 3px var(--focus-shadow);
-        }
     }
 </style>
diff --git a/ts/editor/FieldState.svelte b/ts/editor/FieldState.svelte
index f41ed793a..d0cc34444 100644
--- a/ts/editor/FieldState.svelte
+++ b/ts/editor/FieldState.svelte
@@ -12,8 +12,27 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
         justify-content: flex;
         flex-grow: 1;
 
-        & > :global(*) {
-            margin-left: 2px;
+        /* replace with "gap: 5px" once it's available
+           - required: Chromium 84 (Qt6 only) and iOS 14.1 */
+        > :global(*) {
+            margin: 0 3px;
+
+            &:first-child {
+                margin-left: 0;
+            }
+            &:last-child {
+                margin-right: 0;
+            }
+        }
+    }
+    :global([dir="rtl"]) .field-state > :global(*) {
+        margin: 0 3px;
+
+        &:last-child {
+            margin-left: 0;
+        }
+        &:first-child {
+            margin-right: 0;
         }
     }
 </style>
diff --git a/ts/editor/Fields.svelte b/ts/editor/Fields.svelte
index d63350031..b4fcffaad 100644
--- a/ts/editor/Fields.svelte
+++ b/ts/editor/Fields.svelte
@@ -10,9 +10,9 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
     .fields {
         display: grid;
         grid-auto-rows: min-content;
-        grid-gap: 4px;
+        grid-gap: 6px;
 
-        padding: 5px 3px 0;
+        padding: 0 3px;
         /* set height to 100% for rich text widgets */
         height: 100%;
 
diff --git a/ts/editor/FieldsEditor.svelte b/ts/editor/FieldsEditor.svelte
index b71ee9e79..f38dd6785 100644
--- a/ts/editor/FieldsEditor.svelte
+++ b/ts/editor/FieldsEditor.svelte
@@ -13,5 +13,11 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
         flex-direction: column;
         flex-grow: 1;
         overflow-x: hidden;
+
+        /* replace with "gap: 5px" once it's available
+           - required: Chromium 84 (Qt6 only) and iOS 14.1 */
+        > :global(*) {
+            margin: 5px 0;
+        }
     }
 </style>
diff --git a/ts/editor/LabelContainer.svelte b/ts/editor/LabelContainer.svelte
index 770e0a9fc..ad546461a 100644
--- a/ts/editor/LabelContainer.svelte
+++ b/ts/editor/LabelContainer.svelte
@@ -3,38 +3,54 @@ Copyright: Ankitects Pty Ltd and contributors
 License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
 -->
 <script lang="ts">
-    import { getContext } from "svelte";
-    import type { Readable } from "svelte/store";
+    import { createEventDispatcher } from "svelte";
 
-    import { directionKey } from "../lib/context-keys";
+    import * as tr from "../lib/ftl";
+    import CollapseBadge from "./CollapseBadge.svelte";
 
-    const direction = getContext<Readable<"ltr" | "rtl">>(directionKey);
+    export let collapsed: boolean;
+    let hovered = false;
+
+    $: tooltip = collapsed ? tr.editingExpandField() : tr.editingCollapseField();
+
+    const dispatch = createEventDispatcher();
+
+    function toggle() {
+        dispatch("toggle");
+    }
 </script>
 
-<div
-    class="label-container"
-    class:rtl={$direction === "rtl"}
-    on:mousedown|preventDefault
->
+<div class="label-container" on:mousedown|preventDefault>
+    <span
+        class="clickable"
+        title={tooltip}
+        on:click|stopPropagation={toggle}
+        on:mouseenter={() => (hovered = true)}
+        on:mouseleave={() => (hovered = false)}
+    >
+        <CollapseBadge {collapsed} highlighted={hovered} />
+        <slot name="field-name" />
+    </span>
     <slot />
 </div>
 
 <style lang="scss">
     .label-container {
         display: flex;
+        position: sticky;
         justify-content: space-between;
+        top: 0;
+        padding-bottom: 1px;
 
-        background-color: var(--label-color, transparent);
+        /* slightly wider than EditingArea
+           to cover field borders on scroll */
+        left: -1px;
+        right: -1px;
+        z-index: 3;
+        background: var(--label-color);
 
-        border-width: 0 0 1px;
-        border-style: dashed;
-        border-color: var(--border-color);
-        border-radius: 5px 5px 0 0;
-
-        padding: 0px 6px;
-    }
-
-    .rtl {
-        direction: rtl;
+        .clickable {
+            cursor: pointer;
+        }
     }
 </style>
diff --git a/ts/editor/NoteCreator.svelte b/ts/editor/NoteCreator.svelte
index 3ada91086..064c78180 100644
--- a/ts/editor/NoteCreator.svelte
+++ b/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>
-        <StickyBadge active={stickies[index]} {index} />
+    <svelte:fragment slot="field-state" let:index let:visible>
+        <StickyBadge bind:active={stickies[index]} {index} {visible} />
     </svelte:fragment>
 </NoteEditor>
diff --git a/ts/editor/NoteEditor.svelte b/ts/editor/NoteEditor.svelte
index 29ea40f07..9f942f3ba 100644
--- a/ts/editor/NoteEditor.svelte
+++ b/ts/editor/NoteEditor.svelte
@@ -5,12 +5,17 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
 <script context="module" lang="ts">
     import type { Writable } from "svelte/store";
 
+    import Collapsible from "../components/Collapsible.svelte";
     import type { EditingInputAPI } from "./EditingArea.svelte";
     import type { EditorToolbarAPI } from "./editor-toolbar";
     import type { EditorFieldAPI } from "./EditorField.svelte";
+    import FieldState from "./FieldState.svelte";
+    import LabelContainer from "./LabelContainer.svelte";
+    import LabelName from "./LabelName.svelte";
 
     export interface NoteEditorAPI {
         fields: EditorFieldAPI[];
+        hoveredField: Writable<EditorFieldAPI | null>;
         focusedField: Writable<EditorFieldAPI | null>;
         focusedInput: Writable<EditingInputAPI | null>;
         toolbar: EditorToolbarAPI;
@@ -61,7 +66,6 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
     import PlainTextInput from "./plain-text-input";
     import PlainTextBadge from "./PlainTextBadge.svelte";
     import RichTextInput, { editingInputIsRichText } from "./rich-text-input";
-    import RichTextBadge from "./RichTextBadge.svelte";
 
     function quoteFontFamily(fontFamily: string): string {
         // generic families (e.g. sans-serif) must not be quoted
@@ -128,10 +132,13 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
     }
 
     let fonts: [string, number, boolean][] = [];
+    let fieldsCollapsed: boolean[] = [];
+
     const fields = clearableArray<EditorFieldAPI>();
 
     export function setFonts(fs: [string, number, boolean][]): void {
         fonts = fs;
+        fieldsCollapsed = fonts.map((_, index) => fieldsCollapsed[index] ?? false);
     }
 
     export function focusField(index: number | null): void {
@@ -272,11 +279,13 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
     let apiPartial: Partial<NoteEditorAPI> = {};
     export { apiPartial as api };
 
+    const hoveredField: NoteEditorAPI["hoveredField"] = writable(null);
     const focusedField: NoteEditorAPI["focusedField"] = writable(null);
     const focusedInput: NoteEditorAPI["focusedInput"] = writable(null);
 
     const api: NoteEditorAPI = {
         ...apiPartial,
+        hoveredField,
         focusedField,
         focusedInput,
         toolbar: toolbar as EditorToolbarAPI,
@@ -331,62 +340,93 @@ the AddCards dialog) should be implemented in the user of this component.
                                 `blur:${index}:${getNoteId()}:${get(content)}`,
                             );
                         }}
+                        on:mouseenter={() => {
+                            $hoveredField = fields[index];
+                        }}
+                        on:mouseleave={() => {
+                            $hoveredField = null;
+                        }}
+                        collapsed={fieldsCollapsed[index]}
                         --label-color={cols[index] === "dupe"
                             ? "var(--flag1-bg)"
-                            : "transparent"}
+                            : "var(--window-bg)"}
                     >
-                        <svelte:fragment slot="field-state">
-                            {#if cols[index] === "dupe"}
-                                <DuplicateLink />
-                            {/if}
-                            <RichTextBadge
-                                bind:off={richTextsHidden[index]}
-                                on:toggle={() => {
-                                    richTextsHidden[index] = !richTextsHidden[index];
+                        <svelte:fragment slot="field-label">
+                            <LabelContainer
+                                collapsed={fieldsCollapsed[index]}
+                                on:toggle={async () => {
+                                    fieldsCollapsed[index] = !fieldsCollapsed[index];
 
-                                    if (!richTextsHidden[index]) {
+                                    if (!fieldsCollapsed[index]) {
+                                        await tick();
                                         richTextInputs[index].api.refocus();
+                                    } else {
+                                        plainTextsHidden[index] = true;
                                     }
                                 }}
-                            />
-                            <PlainTextBadge
-                                bind:off={plainTextsHidden[index]}
-                                on:toggle={() => {
-                                    plainTextsHidden[index] = !plainTextsHidden[index];
-
-                                    if (!plainTextsHidden[index]) {
-                                        plainTextInputs[index].api.refocus();
-                                    }
-                                }}
-                            />
-
-                            <slot name="field-state" {field} {index} />
-                        </svelte:fragment>
-
-                        <svelte:fragment slot="editing-inputs">
-                            <RichTextInput
-                                hidden={richTextsHidden[index]}
-                                on:focusout={() => {
-                                    saveFieldNow();
-                                    $focusedInput = null;
-                                }}
-                                bind:this={richTextInputs[index]}
                             >
-                                <ImageHandle maxWidth={250} maxHeight={125} />
-                                <MathjaxHandle />
-                                <FieldDescription>
-                                    {field.description}
-                                </FieldDescription>
-                            </RichTextInput>
+                                <svelte:fragment slot="field-name">
+                                    <LabelName>
+                                        {field.name}
+                                    </LabelName>
+                                </svelte:fragment>
+                                <FieldState>
+                                    {#if cols[index] === "dupe"}
+                                        <DuplicateLink />
+                                    {/if}
+                                    <PlainTextBadge
+                                        visible={!fieldsCollapsed[index] &&
+                                            (fields[index] === $hoveredField ||
+                                                fields[index] === $focusedField)}
+                                        bind:off={plainTextsHidden[index]}
+                                        on:toggle={async () => {
+                                            plainTextsHidden[index] =
+                                                !plainTextsHidden[index];
 
-                            <PlainTextInput
-                                hidden={plainTextsHidden[index]}
-                                on:focusout={() => {
-                                    saveFieldNow();
-                                    $focusedInput = null;
-                                }}
-                                bind:this={plainTextInputs[index]}
-                            />
+                                            if (!plainTextsHidden[index]) {
+                                                await tick();
+                                                plainTextInputs[index].api.refocus();
+                                            }
+                                        }}
+                                    />
+                                    <slot
+                                        name="field-state"
+                                        {field}
+                                        {index}
+                                        visible={fields[index] === $hoveredField ||
+                                            fields[index] === $focusedField}
+                                    />
+                                </FieldState>
+                            </LabelContainer>
+                        </svelte:fragment>
+                        <svelte:fragment slot="editing-inputs">
+                            <Collapsible collapsed={richTextsHidden[index]}>
+                                <RichTextInput
+                                    bind:hidden={richTextsHidden[index]}
+                                    on:focusout={() => {
+                                        saveFieldNow();
+                                        $focusedInput = null;
+                                    }}
+                                    bind:this={richTextInputs[index]}
+                                >
+                                    <ImageHandle maxWidth={250} maxHeight={125} />
+                                    <MathjaxHandle />
+                                    <FieldDescription>
+                                        {field.description}
+                                    </FieldDescription>
+                                </RichTextInput>
+                            </Collapsible>
+
+                            <Collapsible collapsed={plainTextsHidden[index]}>
+                                <PlainTextInput
+                                    bind:hidden={plainTextsHidden[index]}
+                                    on:focusout={() => {
+                                        saveFieldNow();
+                                        $focusedInput = null;
+                                    }}
+                                    bind:this={plainTextInputs[index]}
+                                />
+                            </Collapsible>
                         </svelte:fragment>
                     </EditorField>
                 {/each}
diff --git a/ts/editor/PlainTextBadge.svelte b/ts/editor/PlainTextBadge.svelte
index 9904150f1..a51e057f2 100644
--- a/ts/editor/PlainTextBadge.svelte
+++ b/ts/editor/PlainTextBadge.svelte
@@ -9,16 +9,15 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
     import * as tr from "../lib/ftl";
     import { getPlatformString, registerShortcut } from "../lib/shortcuts";
     import { context as editorFieldContext } from "./EditorField.svelte";
-    import { htmlOff, htmlOn } from "./icons";
+    import { plainTextIcon } from "./icons";
 
     const editorField = editorFieldContext.get();
     const keyCombination = "Control+Shift+X";
     const dispatch = createEventDispatcher();
 
+    export let visible = false;
     export let off = false;
 
-    $: icon = off ? htmlOff : htmlOn;
-
     function toggle() {
         dispatch("toggle");
     }
@@ -32,25 +31,29 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
 
 <span
     class="plain-text-badge"
+    class:visible
     class:highlighted={!off}
     on:click|stopPropagation={toggle}
 >
     <Badge
         tooltip="{tr.editingToggleHtmlEditor()} ({getPlatformString(keyCombination)})"
-        iconSize={80}
-        --icon-align="text-top">{@html icon}</Badge
+        iconSize={80}>{@html plainTextIcon}</Badge
     >
 </span>
 
 <style lang="scss">
     span {
-        opacity: 0.4;
+        cursor: pointer;
+        opacity: 0;
 
+        &.visible {
+            opacity: 0.4;
+            &:hover {
+                opacity: 0.8;
+            }
+        }
         &.highlighted {
             opacity: 1;
         }
-        &:hover {
-            opacity: 0.8;
-        }
     }
 </style>
diff --git a/ts/editor/RichTextBadge.svelte b/ts/editor/RichTextBadge.svelte
deleted file mode 100644
index f54c6ac35..000000000
--- a/ts/editor/RichTextBadge.svelte
+++ /dev/null
@@ -1,42 +0,0 @@
-<!--
-Copyright: Ankitects Pty Ltd and contributors
-License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
--->
-<script lang="ts">
-    import { createEventDispatcher } from "svelte";
-
-    import Badge from "../components/Badge.svelte";
-    import * as tr from "../lib/ftl";
-    import { richTextOff, richTextOn } from "./icons";
-
-    export let off: boolean;
-
-    const dispatch = createEventDispatcher();
-
-    function toggle() {
-        dispatch("toggle");
-    }
-
-    $: icon = off ? richTextOff : richTextOn;
-</script>
-
-<span class="rich-text-badge" class:highlighted={off} on:click|stopPropagation={toggle}>
-    <Badge
-        tooltip={tr.editingToggleVisualEditor()}
-        iconSize={80}
-        --icon-align="text-top">{@html icon}</Badge
-    >
-</span>
-
-<style lang="scss">
-    span {
-        opacity: 0.4;
-
-        &.highlighted {
-            opacity: 1;
-        }
-        &:hover {
-            opacity: 0.8;
-        }
-    }
-</style>
diff --git a/ts/editor/StickyBadge.svelte b/ts/editor/StickyBadge.svelte
index 0b264c6c8..a8f038aea 100644
--- a/ts/editor/StickyBadge.svelte
+++ b/ts/editor/StickyBadge.svelte
@@ -10,11 +10,10 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
     import * as tr from "../lib/ftl";
     import { getPlatformString, registerShortcut } from "../lib/shortcuts";
     import { context as editorFieldContext } from "./EditorField.svelte";
-    import { stickyOff, stickyOn } from "./icons";
+    import { stickyIcon } from "./icons";
 
     export let active: boolean;
-
-    $: icon = active ? stickyOn : stickyOff;
+    export let visible: boolean;
 
     const editorField = editorFieldContext.get();
     const keyCombination = "F9";
@@ -34,23 +33,26 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
     onMount(() => editorField.element.then(shortcut));
 </script>
 
-<span class:highlighted={active} on:click|stopPropagation={toggle}>
+<span class:highlighted={active} class:visible on:click|stopPropagation={toggle}>
     <Badge
         tooltip="{tr.editingToggleSticky()} ({getPlatformString(keyCombination)})"
-        widthMultiplier={0.7}
-        --icon-align="text-top">{@html icon}</Badge
+        widthMultiplier={0.7}>{@html stickyIcon}</Badge
     >
 </span>
 
 <style lang="scss">
     span {
-        opacity: 0.4;
-
+        cursor: pointer;
+        opacity: 0;
+        &.visible {
+            transition: none;
+            opacity: 0.4;
+            &:hover {
+                opacity: 0.8;
+            }
+        }
         &.highlighted {
             opacity: 1;
         }
-        &:hover {
-            opacity: 0.8;
-        }
     }
 </style>
diff --git a/ts/editor/icons.ts b/ts/editor/icons.ts
index 701483237..018bb7071 100644
--- a/ts/editor/icons.ts
+++ b/ts/editor/icons.ts
@@ -5,10 +5,9 @@
 
 export { default as incrementClozeIcon } from "../icons/contain-plus.svg";
 export { default as alertIcon } from "@mdi/svg/svg/alert.svg";
-export { default as htmlOn } from "@mdi/svg/svg/code-tags.svg";
+export { default as chevronDown } from "@mdi/svg/svg/chevron-down.svg";
+export { default as chevronUp } from "@mdi/svg/svg/chevron-up.svg";
+export { default as plainTextIcon } from "@mdi/svg/svg/code-tags.svg";
 export { default as clozeIcon } from "@mdi/svg/svg/contain.svg";
-export { default as richTextOff } from "@mdi/svg/svg/eye-off-outline.svg";
-export { default as richTextOn } from "@mdi/svg/svg/eye-outline.svg";
-export { default as stickyOff } from "@mdi/svg/svg/pin-off-outline.svg";
-export { default as stickyOn } from "@mdi/svg/svg/pin-outline.svg";
-export { default as htmlOff } from "@mdi/svg/svg/xml.svg";
+export { default as richTextIcon } from "@mdi/svg/svg/format-font.svg";
+export { default as stickyIcon } from "@mdi/svg/svg/pin-outline.svg";
diff --git a/ts/editor/plain-text-input/PlainTextInput.svelte b/ts/editor/plain-text-input/PlainTextInput.svelte
index 4a28b7185..67d4f8049 100644
--- a/ts/editor/plain-text-input/PlainTextInput.svelte
+++ b/ts/editor/plain-text-input/PlainTextInput.svelte
@@ -143,7 +143,6 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
 <div
     class="plain-text-input"
     class:light-theme={!$pageTheme.isDark}
-    class:hidden
     on:focusin={() => ($focusedInput = api)}
 >
     <CodeMirror
@@ -161,18 +160,11 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
 
         :global(.CodeMirror) {
             border-radius: 0 0 5px 5px;
+            border-top: 1px solid var(--border);
+            background: var(--code-bg);
         }
-
         :global(.CodeMirror-lines) {
-            padding: 6px 0;
+            padding: 8px 0;
         }
-
-        &.hidden {
-            display: none;
-        }
-    }
-
-    .light-theme :global(.CodeMirror) {
-        border-top: 1px solid #ddd;
     }
 </style>
diff --git a/ts/editor/rich-text-input/RichTextInput.svelte b/ts/editor/rich-text-input/RichTextInput.svelte
index 35b952b94..c04813c95 100644
--- a/ts/editor/rich-text-input/RichTextInput.svelte
+++ b/ts/editor/rich-text-input/RichTextInput.svelte
@@ -211,7 +211,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
     setupLifecycleHooks(api);
 </script>
 
-<div class="rich-text-input" {hidden} on:focusin={setFocus} on:focusout={removeFocus}>
+<div class="rich-text-input" on:focusin={setFocus} on:focusout={removeFocus}>
     <RichTextStyles
         color={$pageTheme.isDark ? "white" : "black"}
         fontFamily={$fontFamily}
@@ -238,6 +238,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
             </div>
         {/await}
     </RichTextStyles>
+    <slot name="plain-text-badge" />
 </div>
 
 <style lang="scss">
diff --git a/ts/lib/context-keys.ts b/ts/lib/context-keys.ts
index 506c18d38..417443812 100644
--- a/ts/lib/context-keys.ts
+++ b/ts/lib/context-keys.ts
@@ -5,3 +5,4 @@ export const fontFamilyKey = Symbol("fontFamily");
 export const fontSizeKey = Symbol("fontSize");
 export const directionKey = Symbol("direction");
 export const descriptionKey = Symbol("description");
+export const collapsedKey = Symbol("collapsed");
diff --git a/ts/tag-editor/tag-options-button/icons.ts b/ts/tag-editor/tag-options-button/icons.ts
index 6e7b9d145..bcacaf056 100644
--- a/ts/tag-editor/tag-options-button/icons.ts
+++ b/ts/tag-editor/tag-options-button/icons.ts
@@ -4,5 +4,5 @@
 /// <reference types="../../lib/image-import" />
 
 export { default as dotsIcon } from "@mdi/svg/svg/dots-vertical.svg";
-export { default as tagIcon } from "@mdi/svg/svg/tag.svg";
-export { default as addTagIcon } from "@mdi/svg/svg/tag-plus.svg";
+export { default as tagIcon } from "@mdi/svg/svg/tag-outline.svg";
+export { default as addTagIcon } from "@mdi/svg/svg/tag-plus-outline.svg";