From f0f308e5b0dfc5f67bc5b8cc20a94b2d267cd97d Mon Sep 17 00:00:00 2001
From: timlohse1104 <tim-lohse@gmx.de>
Date: Mon, 16 Mar 2026 00:58:20 +0100
Subject: [PATCH] =?UTF-8?q?=F0=9F=9A=80=20Replace=20inline=20create-forms?=
 =?UTF-8?q?=20in=20memorandum=20and=20jokes=20with=20FAB=20+=20modal=20pat?=
 =?UTF-8?q?tern.?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 CHANGELOG.md                                  |   2 +
 docs/features/jokes.md                        |  13 ++
 docs/features/memorandum.md                   |  20 +++
 .../components/jokes/CreateJokeOverlay.svelte | 108 ++++++++++++++++
 .../src/lib/components/jokes/Jokes.svelte     | 118 ++++--------------
 .../components/memorandum/FolderArea.svelte   |  43 +++----
 .../memorandum/FolderOverlay.svelte           |  68 +++++++---
 frontend/src/lib/config/de.json               |   3 +
 frontend/src/lib/config/en.json               |   3 +
 frontend/src/routes/memorandum/+page.svelte   |   8 +-
 10 files changed, 242 insertions(+), 144 deletions(-)
 create mode 100644 frontend/src/lib/components/jokes/CreateJokeOverlay.svelte

diff --git a/CHANGELOG.md b/CHANGELOG.md
index e55d2c72..6451a773 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -14,6 +14,8 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ### Changed
 
+- [memorandum] Ordner-Erstellung über FAB + Modal statt direkter Erstellung; FAB immer sichtbar; Zero-State öffnet ebenfalls das Modal.
+- [jokes] Inline-Witz-Formular durch FAB + Modal ersetzt; Seite zeigt nur noch den Zufallswitz-Bereich.
 - [hitstar] Remove Spotify embed (full iframe) from the reveal phase; only round tracker, abort button, flipped track card and next-round button are shown after guessing.
 - [hitstar] Spotify track search now uses a single random year (1955–2025) per request instead of a fixed range to improve year distribution across decades.
 - [hitstar] Add `genre:pop` filter to Spotify search query to increase the share of well-known tracks.
diff --git a/docs/features/jokes.md b/docs/features/jokes.md
index edb0596c..8c0bd07d 100644
--- a/docs/features/jokes.md
+++ b/docs/features/jokes.md
@@ -99,6 +99,19 @@ Keys under `jokes.*` in translation files.
 
 ---
 
+## Frontend Components
+
+| Component | Description |
+|-----------|-------------|
+| `frontend/src/lib/components/jokes/Jokes.svelte` | Main page component — shows random joke area only |
+| `frontend/src/lib/components/jokes/CreateJokeOverlay.svelte` | Carbon Modal for creating a new joke (FAB-triggered) |
+
+### Create Joke Pattern
+
+Joke creation uses a FAB (fixed primary button, bottom-right) that opens a Carbon Modal (`CreateJokeOverlay.svelte`). The modal contains a `TextArea` for the joke text and a `Select` for language (`de`/`en`). On success: `celebrate()` + `InlineNotification` + auto-close after ~1.5 s. The inline form that was previously embedded directly on the page has been removed.
+
+---
+
 ## Key Implementation Notes
 
 - `persistDailyJoke()` sets `verified: true` on all auto-fetched jokes.
diff --git a/docs/features/memorandum.md b/docs/features/memorandum.md
index 4185d2e5..8e9e5da0 100644
--- a/docs/features/memorandum.md
+++ b/docs/features/memorandum.md
@@ -91,6 +91,26 @@ Keys under `memorandum.*` in translation files.
 
 ---
 
+## Frontend Components
+
+| Component | Description |
+|-----------|-------------|
+| `frontend/src/lib/components/memorandum/FolderArea.svelte` | Main folder grid; FAB always visible |
+| `frontend/src/lib/components/memorandum/FolderOverlay.svelte` | Dual-mode Carbon Modal: **create** (FAB) and **edit** (context menu) |
+| `frontend/src/lib/components/memorandum/LinkOverlay.svelte` | Modal for creating/editing links |
+| `frontend/src/lib/components/memorandum/Startup.svelte` | Zero-state screen with "create folder" CTA |
+
+### Folder Create/Edit Pattern
+
+`FolderOverlay.svelte` handles both modes via `type = $derived(currentFolderId ? 'edit' : 'new')`:
+
+- **Create** (FAB in `FolderArea.svelte`): `bind:open={createFolderModalOpen}`, no `currentFolderId` → pre-fills default name, resets color sliders, pushes new `FolderClass` to `$localPresetStore`, calls `celebrate()`.
+- **Edit** (context menu in `Folder.svelte`): `bind:open={$folderOverlayOptionsStore.showOverlay}` in `+page.svelte`, `currentFolderId` is set → loads persisted name and background color.
+
+The FAB is **always visible** (not gated on `Folders.length > 0`). The zero-state screen also opens the create modal via its CTA button.
+
+---
+
 ## Key Implementation Notes
 
 - Memorandum has **no dedicated MongoDB schema** — all data lives in the shared Keystore collection.
diff --git a/frontend/src/lib/components/jokes/CreateJokeOverlay.svelte b/frontend/src/lib/components/jokes/CreateJokeOverlay.svelte
new file mode 100644
index 00000000..30f3d4ee
--- /dev/null
+++ b/frontend/src/lib/components/jokes/CreateJokeOverlay.svelte
@@ -0,0 +1,108 @@
+<script lang="ts">
+  // 1. IMPORTS
+  import { createJoke } from '$lib/api/jokes.api';
+  import { celebrate } from '$lib/util/stores/stores-global';
+  import { initialized, t } from '$lib/util/translations';
+  import Modal from 'carbon-components-svelte/src/Modal/Modal.svelte';
+  import InlineNotification from 'carbon-components-svelte/src/Notification/InlineNotification.svelte';
+  import Select from 'carbon-components-svelte/src/Select/Select.svelte';
+  import SelectItem from 'carbon-components-svelte/src/Select/SelectItem.svelte';
+  import TextArea from 'carbon-components-svelte/src/TextArea/TextArea.svelte';
+  import Save from 'carbon-icons-svelte/lib/Save.svelte';
+  import { fade } from 'svelte/transition';
+
+  // 2. PROPS
+  let { open = $bindable(false) } = $props();
+
+  // 3. CONST
+  const languages = ['de', 'en'];
+
+  // 4. STATE
+  let jokeText = $state('');
+  let jokeLanguage = $state('de');
+  let timeout = $state<number | undefined>(undefined);
+
+  // 5. DERIVED
+  const submittable = $derived(jokeText && jokeLanguage);
+  const showNotification = $derived(timeout !== undefined);
+
+  // 6. EFFECTS
+  $effect(() => {
+    if (open) {
+      jokeText = '';
+      jokeLanguage = 'de';
+      timeout = undefined;
+    }
+  });
+
+  // 8. FUNCTIONS
+  const submitJoke = async () => {
+    const createResponse = await createJoke({
+      text: jokeText,
+      language: jokeLanguage,
+      categories: [],
+    });
+
+    if (createResponse?._id) {
+      celebrate();
+      timeout = 1500;
+      jokeText = '';
+      jokeLanguage = 'de';
+    }
+  };
+
+  const closeOverlay = () => {
+    open = false;
+    timeout = undefined;
+  };
+</script>
+
+<Modal
+  bind:open
+  modalHeading={$t('page.jokes.createJokeModalTitle')}
+  primaryButtonText={$t('page.shared.save')}
+  primaryButtonIcon={Save}
+  primaryButtonDisabled={!submittable}
+  secondaryButtonText={$t('page.shared.abort')}
+  on:click:button--primary={submitJoke}
+  on:click:button--secondary={closeOverlay}
+>
+  {#if $initialized}
+    <TextArea
+      helperText={$t('page.jokes.newJokeHelperText')}
+      placeholder={$t('page.jokes.newJokeTextInput')}
+      rows={5}
+      cols={60}
+      bind:value={jokeText}
+    />
+
+    <div class="mt2">
+      <Select
+        labelText={$t('page.jokes.newJokeLanguage')}
+        bind:selected={jokeLanguage}
+      >
+        {#each languages as language}
+          <SelectItem value={language} />
+        {/each}
+      </Select>
+    </div>
+
+    {#if showNotification}
+      <div transition:fade>
+        <InlineNotification
+          {timeout}
+          kind="success"
+          lowContrast
+          subtitle={$t('page.jokes.jokeCreatedSnackbar')}
+          class="mt2"
+          on:close={() => {
+            timeout = undefined;
+            open = false;
+          }}
+        />
+      </div>
+    {/if}
+  {:else}
+    <p>Locale initializing...</p>
+  {/if}
+</Modal>
diff --git a/frontend/src/lib/components/jokes/Jokes.svelte b/frontend/src/lib/components/jokes/Jokes.svelte
index 3b8ed1ac..87a2b013 100644
--- a/frontend/src/lib/components/jokes/Jokes.svelte
+++ b/frontend/src/lib/components/jokes/Jokes.svelte
@@ -1,32 +1,18 @@
 <script lang="ts">
   // 1. IMPORTS
-  import { createJoke, getRandomJoke } from '$lib/api/jokes.api';
+  import { getRandomJoke } from '$lib/api/jokes.api';
   import type { JokeDto } from '$lib/types/jokes.dto';
-  import { celebrate } from '$lib/util/stores/stores-global';
   import { initialized, t } from '$lib/util/translations';
   import Button from 'carbon-components-svelte/src/Button/Button.svelte';
-  import InlineNotification from 'carbon-components-svelte/src/Notification/InlineNotification.svelte';
-  import Select from 'carbon-components-svelte/src/Select/Select.svelte';
-  import SelectItem from 'carbon-components-svelte/src/Select/SelectItem.svelte';
-  import TextArea from 'carbon-components-svelte/src/TextArea/TextArea.svelte';
   import Tile from 'carbon-components-svelte/src/Tile/Tile.svelte';
+  import Add from 'carbon-icons-svelte/lib/Add.svelte';
   import CloudDownload from 'carbon-icons-svelte/lib/CloudDownload.svelte';
-  import Save from 'carbon-icons-svelte/lib/Save.svelte';
   import { onMount } from 'svelte';
-  import { fade } from 'svelte/transition';
-
-  // 2. CONST (non-reactive constants)
-  const languages = ['de', 'en'];
+  import CreateJokeOverlay from './CreateJokeOverlay.svelte';
 
   // 4. STATE
   let randomJoke = $state<JokeDto | null>(null);
-  let newJokeText = $state('');
-  let newJokeLanguage = $state('de');
-  let timeout = $state(undefined);
-
-  // 5. DERIVED
-  const showNotification = $derived(timeout !== undefined);
-  const submittable = $derived(newJokeText && newJokeLanguage);
+  let createJokeModalOpen = $state(false);
 
   // 7. LIFECYCLE
   onMount(() => {
@@ -37,23 +23,6 @@
   const setRandomJoke = async () => {
     randomJoke = await getRandomJoke();
   };
-
-  const createNewJoke = async () => {
-    // TODO: Add categories
-    const createResponse = await createJoke({
-      text: newJokeText,
-      language: newJokeLanguage,
-      categories: [],
-    });
-
-    if (createResponse?._id) {
-      timeout = 3_000;
-      celebrate();
-    }
-
-    newJokeText = '';
-    newJokeLanguage = 'de';
-  };
 </script>
 
 {#if $initialized}
@@ -61,15 +30,6 @@
     <h1>{$t('page.jokes.titleRandomJoke')}</h1>
     <p>{$t('page.jokes.descriptionRandomJoke')}</p>
 
-    <Button
-      iconDescription={$t('page.jokes.loadRandomJoke')}
-      icon={CloudDownload}
-      on:click={setRandomJoke}
-      class="mt2"
-    >
-      {$t('page.jokes.newRandomJoke')}
-    </Button>
-
     {#if randomJoke}
       <Tile class="random_joke mt2">
         <i>{randomJoke.text}</i>
@@ -77,59 +37,28 @@
       </Tile>
     {/if}
 
-    <h2 class="mt2">{$t('page.jokes.titleNewJoke')}</h2>
-    <p>{$t('page.jokes.descriptionNewJoke')}</p>
-
-    <div class="mt1">
-      <TextArea
-        helperText={$t('page.jokes.newJokeHelperText')}
-        placeholder={$t('page.jokes.newJokeTextInput')}
-        rows={5}
-        cols={60}
-        bind:value={newJokeText}
-      />
-    </div>
-
-    <div class="mt2">
-      <Select
-        labelText={$t('page.jokes.newJokeLanguage')}
-        bind:selected={newJokeLanguage}
-      >
-        {#each languages as language}
-          <SelectItem value={language} />
-        {/each}
-      </Select>
-    </div>
-
     <Button
-      kind="ghost"
-      iconDescription={$t('page.jokes.saveJoke')}
-      icon={Save}
-      on:click={createNewJoke}
-      disabled={!submittable}
-      class="save_button mt2"
+      iconDescription={$t('page.jokes.loadRandomJoke')}
+      icon={CloudDownload}
+      on:click={setRandomJoke}
+      class="mt2"
     >
-      {$t('page.jokes.createJokeButtonText')}
+      {$t('page.jokes.newRandomJoke')}
     </Button>
-
-    {#if showNotification}
-      <div transition:fade>
-        <InlineNotification
-          {timeout}
-          kind="success"
-          lowContrast
-          subtitle={$t('page.jokes.jokeCreatedSnackbar')}
-          class="inline_notification"
-          on:close={(e) => {
-            timeout = undefined;
-          }}
-        />
-      </div>
-    {/if}
   </section>
+
+  <Button
+    kind="primary"
+    iconDescription={$t('page.jokes.addJoke')}
+    icon={Add}
+    id="add_joke_button"
+    tooltipPosition="left"
+    on:click={() => (createJokeModalOpen = true)}
+  />
+
+  <CreateJokeOverlay bind:open={createJokeModalOpen} />
 {:else}
   <section>Locale initializing...</section>
-  d
 {/if}
 
 <style lang="scss">
@@ -154,4 +83,11 @@
   :global(.random_joke) {
     padding: 2rem;
   }
+
+  :global(#add_joke_button) {
+    position: fixed;
+    bottom: calc(var(--default_padding) + env(safe-area-inset-bottom, 0px));
+    right: var(--default_padding);
+    z-index: 100;
+  }
 </style>
diff --git a/frontend/src/lib/components/memorandum/FolderArea.svelte b/frontend/src/lib/components/memorandum/FolderArea.svelte
index 11aff2c7..8f722ac7 100644
--- a/frontend/src/lib/components/memorandum/FolderArea.svelte
+++ b/frontend/src/lib/components/memorandum/FolderArea.svelte
@@ -1,8 +1,6 @@
 <script lang="ts">
   import Masonry from '$lib/components/shared/Masonry.svelte';
   import { defaultPreset } from '$lib/config/default-preset.ts';
-  import { FolderClass } from '$lib/util/memorandum/classes.js';
-  import { defaultColor } from '$lib/util/memorandum/constants.js';
   import { folderOrderFolder } from '$lib/util/stores/store-memorandum-folder-order';
   import {
     localPresetStore,
@@ -15,12 +13,14 @@
   import Add from 'carbon-icons-svelte/lib/Add.svelte';
   import ConfirmOverlay from '../shared/ConfirmOverlay.svelte';
   import Folder from './Folder.svelte';
+  import FolderOverlay from './FolderOverlay.svelte';
   import Startup from './Startup.svelte';
 
   let { searchQuery } = $props();
 
   let confirmDeleteFolderOpenOverlay = $state(false);
   let confirmDeleteFolderAction = $state();
+  let createFolderModalOpen = $state(false);
 
   // Filter folders and links based on search query
   const filteredFolders = $derived(
@@ -32,21 +32,8 @@
     }),
   );
 
-  const createFolder = () => {
-    // svelte stores using html5 localstorage with stringified objects cannot be updated directly
-    // we need to create a copy and set the store again, so that the stores set method gets called
-    // that happens because there is no localstorage update function, only get, set, remove and clear
-    const currentPreset = structuredClone($localPresetStore);
-
-    currentPreset.Folders.push(
-      new FolderClass(
-        crypto.randomUUID(),
-        $t('page.memorandum.newFolderHeader'),
-        [],
-        defaultColor,
-      ),
-    );
-    $localPresetStore = currentPreset;
+  const openCreateFolderModal = () => {
+    createFolderModalOpen = true;
   };
 
   const loadPreset = () => {
@@ -115,19 +102,17 @@
         {/each}
       </section>
     {:else}
-      <Startup onNew={createFolder} onDefault={loadPreset} />
+      <Startup onNew={openCreateFolderModal} onDefault={loadPreset} />
     {/if}
 
-    {#if value.Folders.length > 0}
-      <Button
-        kind="primary"
-        iconDescription={$t('page.memorandum.startup.createEmptyFolder')}
-        icon={Add}
-        id="add_folder_button"
-        tooltipPosition="left"
-        on:click={createFolder}
-      />
-    {/if}
+    <Button
+      kind="primary"
+      iconDescription={$t('page.memorandum.startup.createEmptyFolder')}
+      icon={Add}
+      id="add_folder_button"
+      tooltipPosition="left"
+      on:click={openCreateFolderModal}
+    />
   {:catch error}
     <p>
       {$t('page.shared.somethingWentWrong', {
@@ -136,6 +121,8 @@
     </p>
   {/await}
 
+  <FolderOverlay bind:open={createFolderModalOpen} />
+
   <ConfirmOverlay
     bind:open={confirmDeleteFolderOpenOverlay}
     questionHeader={$t('page.memorandum.folder.deleteTitle')}
diff --git a/frontend/src/lib/components/memorandum/FolderOverlay.svelte b/frontend/src/lib/components/memorandum/FolderOverlay.svelte
index 0e2a3ee0..8033a355 100644
--- a/frontend/src/lib/components/memorandum/FolderOverlay.svelte
+++ b/frontend/src/lib/components/memorandum/FolderOverlay.svelte
@@ -1,9 +1,10 @@
 <script lang="ts">
   import { isEnter } from '$lib/util/helper.js';
-  import { RGBBackgroundClass } from '$lib/util/memorandum/classes.js';
+  import { FolderClass, RGBBackgroundClass } from '$lib/util/memorandum/classes.js';
   import { defaultColor } from '$lib/util/memorandum/constants.js';
   import { localPresetStore } from '$lib/util/stores/store-memorandum-preset';
   import { folderOverlayOptionsStore } from '$lib/util/stores/stores-memorandum';
+  import { celebrate } from '$lib/util/stores/stores-global';
   import { initialized, t } from '$lib/util/translations';
   import Checkbox from 'carbon-components-svelte/src/Checkbox/Checkbox.svelte';
   import CopyButton from 'carbon-components-svelte/src/CopyButton/CopyButton.svelte';
@@ -11,9 +12,10 @@
   import Slider from 'carbon-components-svelte/src/Slider/Slider.svelte';
   import TextInput from 'carbon-components-svelte/src/TextInput/TextInput.svelte';
   import Save from 'carbon-icons-svelte/lib/Save.svelte';
-  import { onMount } from 'svelte';
 
-  let { folderName = $bindable('') } = $props();
+  let { folderName = $bindable(''), open = $bindable(false) } = $props();
+
+  const type = $derived($folderOverlayOptionsStore.currentFolderId ? 'edit' : 'new');
 
   let customColorActive = $state(false);
   let r = $state(defaultColor.r);
@@ -35,25 +37,48 @@
     }
   });
 
-  onMount(() => {
-    if ($folderOverlayOptionsStore.currentFolderBackgroundColor) {
-      const persisted = $folderOverlayOptionsStore.currentFolderBackgroundColor;
-      r = persisted.r;
-      g = persisted.g;
-      b = persisted.b;
-      a = persisted.a;
-      customColorActive =
-        persisted.r !== defaultColor.r ||
-        persisted.g !== defaultColor.g ||
-        persisted.b !== defaultColor.b ||
-        persisted.a !== defaultColor.a;
+  $effect(() => {
+    if (open) {
+      if (type === 'edit') {
+        folderName = $folderOverlayOptionsStore.currentFolderName ?? '';
+        const persisted = $folderOverlayOptionsStore.currentFolderBackgroundColor;
+        if (persisted) {
+          r = persisted.r;
+          g = persisted.g;
+          b = persisted.b;
+          a = persisted.a;
+          customColorActive =
+            persisted.r !== defaultColor.r ||
+            persisted.g !== defaultColor.g ||
+            persisted.b !== defaultColor.b ||
+            persisted.a !== defaultColor.a;
+        }
+      } else {
+        folderName = $t('page.memorandum.newFolderHeader');
+        customColorActive = false;
+      }
     }
   });
 
   const closeOverlay = () => {
-    $folderOverlayOptionsStore.showOverlay = false;
+    open = false;
     $folderOverlayOptionsStore.currentFolderId = undefined;
   };
+
+  const createFolder = () => {
+    if (submittable) {
+      const currentPreset = structuredClone($localPresetStore);
+      const newFolder = new FolderClass(crypto.randomUUID(), folderName, [], defaultColor) as FolderClass & { customBackgroundColor?: { r: number; g: number; b: number; a: number } };
+      if (customColorActive) {
+        newFolder.customBackgroundColor = { r, g, b, a };
+      }
+      currentPreset.Folders.push(newFolder);
+      $localPresetStore = currentPreset;
+      celebrate();
+      closeOverlay();
+    }
+  };
+
   const editFolder = () => {
     if (submittable) {
       const currentPreset = structuredClone($localPresetStore);
@@ -70,6 +95,7 @@
       closeOverlay();
     }
   };
+
   const updateCustomColorFromInput = () => {
     const splitted = customColorInput.split(',');
     if (splitted.length === 4) {
@@ -82,12 +108,14 @@
 </script>
 
 <Modal
-  bind:open={$folderOverlayOptionsStore.showOverlay}
-  modalHeading={$t('page.memorandum.folder.editTitle', { folderName })}
+  bind:open
+  modalHeading={type === 'new'
+    ? $t('page.memorandum.folder.createTitle')
+    : $t('page.memorandum.folder.editTitle', { folderName })}
   primaryButtonText={$t('page.shared.save')}
   primaryButtonIcon={Save}
   secondaryButtonText={$t('page.shared.abort')}
-  on:click:button--primary={editFolder}
+  on:click:button--primary={type === 'new' ? createFolder : editFolder}
   on:click:button--secondary={closeOverlay}
   style="background-color:{customColor.getRGBA()}"
   hasScrollingContent
@@ -100,7 +128,7 @@
       autofocus
       class="mb1"
       on:keyup={(event) => {
-        if (isEnter(event)) editFolder();
+        if (isEnter(event)) type === 'new' ? createFolder() : editFolder();
       }}
     />
 
diff --git a/frontend/src/lib/config/de.json b/frontend/src/lib/config/de.json
index 5deff2c0..dfb182ed 100644
--- a/frontend/src/lib/config/de.json
+++ b/frontend/src/lib/config/de.json
@@ -18,6 +18,7 @@
   "page.memorandum.folder.deleteQuestion": "Möchtest du diesen Ordner wirklich löschen?",
   "page.memorandum.folder.copiedName": "(Kopie) {{folderName}}",
   "page.memorandum.folder.duplicate": "Duplikat des Ordners erstellen",
+  "page.memorandum.folder.createTitle": "Ordner erstellen",
   "page.memorandum.folder.editTitle": "Ordner bearbeiten",
   "page.memorandum.folder.nameOfFolderHelptext": "Name des Ordners",
   "page.memorandum.folder.setBackgroundColorQuestion": "Hintergrundfarbe des Ordners ändern?",
@@ -115,6 +116,8 @@
   "page.jokes.newJokeLanguage": "Sprache des Witzes",
   "page.jokes.createJokeButtonText": "Witz erstellen",
   "page.jokes.jokeCreatedSnackbar": "Dein Witz wurde erfolgreich erstellt und wird nun geprüft.",
+  "page.jokes.addJoke": "Witz hinzufügen",
+  "page.jokes.createJokeModalTitle": "Neuen Witz erstellen",
   "page.todos.newTodo": "Neuer Eintrag",
   "page.todos.addTodo": "Eintrag hinzufügen",
   "page.todos.deleteTodo": "Eintrag löschen",
diff --git a/frontend/src/lib/config/en.json b/frontend/src/lib/config/en.json
index 20f80127..e6b3ae68 100644
--- a/frontend/src/lib/config/en.json
+++ b/frontend/src/lib/config/en.json
@@ -18,6 +18,7 @@
   "page.memorandum.folder.deleteQuestion": "Do you really want to delete this folder?",
   "page.memorandum.folder.copiedName": "(Copy) {{folderName}}",
   "page.memorandum.folder.duplicate": "Creata a duplicate of this folder",
+  "page.memorandum.folder.createTitle": "Create folder",
   "page.memorandum.folder.editTitle": "Edit folder",
   "page.memorandum.folder.nameOfFolderHelptext": "Name of folder",
   "page.memorandum.folder.setBackgroundColorQuestion": "Want to change the folder background color?",
@@ -115,6 +116,8 @@
   "page.jokes.newJokeLanguage": "Language of the joke",
   "page.jokes.createJokeButtonText": "Create joke",
   "page.jokes.jokeCreatedSnackbar": "Your joke has been successfully created and is now being checked.",
+  "page.jokes.addJoke": "Add joke",
+  "page.jokes.createJokeModalTitle": "Create a new joke",
   "page.todos.newTodo": "New entry",
   "page.todos.addTodo": "Add entry",
   "page.todos.deleteTodo": "Delete entry",
diff --git a/frontend/src/routes/memorandum/+page.svelte b/frontend/src/routes/memorandum/+page.svelte
index cc85ec9e..28d6dec8 100644
--- a/frontend/src/routes/memorandum/+page.svelte
+++ b/frontend/src/routes/memorandum/+page.svelte
@@ -118,11 +118,9 @@
       <BoxArea {searchQuery} />
     </div>
 
-    {#if $folderOverlayOptionsStore.showOverlay}
-      <FolderOverlay
-        bind:folderName={$folderOverlayOptionsStore.currentFolderName}
-      />
-    {/if}
+    <FolderOverlay
+      bind:open={$folderOverlayOptionsStore.showOverlay}
+    />
 
     {#if $linkOverlayOptionsStore.showOverlay}
       <LinkOverlay