From c7b148d8b8e29e1a75f8e8f59275aecd3dc263cf Mon Sep 17 00:00:00 2001
From: Mawoka <git@mawoka.eu>
Date: Wed, 20 Dec 2023 16:23:14 +0100
Subject: [PATCH] :sparkles: Closes #321

---
 frontend/.eslintrc.cjs                 |  10 +-
 frontend/src/lib/editor/sidebar.svelte | 538 +++++++++++++++----------
 frontend/src/lib/i18n/locales/en.json  |   4 +-
 3 files changed, 332 insertions(+), 220 deletions(-)

diff --git a/frontend/.eslintrc.cjs b/frontend/.eslintrc.cjs
index d91269f1..3aeb85a0 100644
--- a/frontend/.eslintrc.cjs
+++ b/frontend/.eslintrc.cjs
@@ -8,7 +8,15 @@ module.exports = {
 	extends: ['eslint:recommended', 'plugin:@typescript-eslint/recommended', 'prettier'],
 	plugins: ['svelte3', '@typescript-eslint'],
 	ignorePatterns: ['*.cjs'],
-	overrides: [{ files: ['*.svelte'], processor: 'svelte3/svelte3' }],
+	overrides: [
+		{ files: ['*.svelte'], processor: 'svelte3/svelte3' },
+		{
+			files: ['*.*'],
+			rules: {
+				'a11y-click-events-have-key-events': 'off'
+			}
+		}
+	],
 	rules: {
 		'no-unused-vars': ['error', { argsIgnorePattern: '^_' }],
 		'@typescript-eslint/no-unused-vars': ['error', { argsIgnorePattern: '^_' }]
diff --git a/frontend/src/lib/editor/sidebar.svelte b/frontend/src/lib/editor/sidebar.svelte
index 329c1e6c..b28d88aa 100644
--- a/frontend/src/lib/editor/sidebar.svelte
+++ b/frontend/src/lib/editor/sidebar.svelte
@@ -12,12 +12,16 @@ SPDX-License-Identifier: MPL-2.0
 	import { createTippy } from 'svelte-tippy';
 	import { getLocalization } from '$lib/i18n';
 	import AddNewQuestionPopup from '$lib/editor/AddNewQuestionPopup.svelte';
+	import BrownButton from '$lib/components/buttons/brown.svelte';
+	import { fade } from 'svelte/transition';
 
 	const { t } = getLocalization();
 
 	export let data: EditorData;
 	export let selected_question = -1;
 
+	let reorder_mode = false;
+
 	const tippy = createTippy({
 		arrow: true,
 		animation: 'perspective-subtle',
@@ -35,7 +39,18 @@ SPDX-License-Identifier: MPL-2.0
 		answers: ''
 	};
 
+	const swapArrayElements = (arr, a: number, b: number) => {
+		let _arr = [...arr];
+		let temp = _arr[a];
+		_arr[a] = _arr[b];
+		_arr[b] = temp;
+		return _arr;
+	};
+
 	const setSelectedQuestion = (index: number): void => {
+		if (reorder_mode) {
+			return;
+		}
 		selected_question = index;
 		if (index === -1) {
 			propertyCard.scrollIntoView({
@@ -54,60 +69,195 @@ SPDX-License-Identifier: MPL-2.0
         });*/
 </script>
 
-<div class="h-screen border-r-2 pt-6 px-6 overflow-scroll">
-	<div
-		class="bg-white shadow rounded-lg h-40 p-2 mb-6 hover:cursor-pointer drop-shadow-2xl border border-gray-500 dark:bg-gray-600 transition"
-		bind:this={propertyCard}
-		class:bg-green-300={selected_question === -1}
-		class:dark:bg-green-500={selected_question === -1}
-		on:click={() => setSelectedQuestion(-1)}
-	>
-		<div
-			use:tippy={{ content: data.title === '' ? "It's empty!" : data.title }}
-			class="m-1 border border-gray-500 rounded-lg p-0.5 transition"
-			class:border-red-600={!reach(dataSchema, 'title').isValidSync(data.title)}
-			class:border-solid={!reach(dataSchema, 'title').isValidSync(data.title)}
-			class:border-2={!reach(dataSchema, 'title').isValidSync(data.title)}
-		>
-			<p
-				type="text"
-				class="whitespace-nowrap truncate text-center w-full bg-transparent rounded dark:text-white"
-				class:dark:text-black={selected_question === -1}
+<div class="h-screen relative">
+	<div class="h-10 flex justify-center w-full p-1 absolute z-20">
+		<div>
+			<BrownButton on:click={() => (reorder_mode = !reorder_mode)}
+				>{#if reorder_mode}{$t('editor.disable_reorder')}{:else}{$t(
+						'editor.enable_reorder'
+					)}{/if}</BrownButton
 			>
-				{#if data.title}
-					{@html data.title}
-				{:else}
-					<i>{$t('editor.no_title')}</i>
-				{/if}
-			</p>
 		</div>
+	</div>
+	<div class="border-r-2 pt-6 px-6 overflow-scroll h-full">
 		<div
-			use:tippy={{ content: data.description === '' ? "It's empty!" : data.description }}
-			class="m-1 border border-gray-500 rounded-lg p-0.5 transition"
-			class:border-red-600={!reach(dataSchema, 'description').isValidSync(data.description)}
-			class:border-solid={!reach(dataSchema, 'description').isValidSync(data.description)}
-			class:border-2={!reach(dataSchema, 'description').isValidSync(data.description)}
+			bind:this={propertyCard}
+			class="bg-white shadow rounded-lg h-40 p-2 mb-6 hover:cursor-pointer drop-shadow-2xl border border-gray-500 dark:bg-gray-600 transition"
+			class:bg-green-300={selected_question === -1}
+			class:dark:bg-green-500={selected_question === -1}
+			on:click={() => setSelectedQuestion(-1)}
 		>
-			<textarea
-				bind:value={data.description}
-				class="bg-transparent resize-none w-full rounded text-sm dark:text-white"
+			<div
+				use:tippy={{ content: data.title === '' ? "It's empty!" : data.title }}
+				class="m-1 border border-gray-500 rounded-lg p-0.5 transition"
+				class:border-red-600={!reach(dataSchema, 'title').isValidSync(data.title)}
+				class:border-solid={!reach(dataSchema, 'title').isValidSync(data.title)}
+				class:border-2={!reach(dataSchema, 'title').isValidSync(data.title)}
+			>
+				<p
+					type="text"
+					class="whitespace-nowrap truncate text-center w-full bg-transparent rounded dark:text-white"
+					class:dark:text-black={selected_question === -1}
+				>
+					{#if data.title}
+						{@html data.title}
+					{:else}
+						<i>{$t('editor.no_title')}</i>
+					{/if}
+				</p>
+			</div>
+			<div
+				use:tippy={{ content: data.description === '' ? "It's empty!" : data.description }}
+				class="m-1 border border-gray-500 rounded-lg p-0.5 transition"
+				class:border-red-600={!reach(dataSchema, 'description').isValidSync(
+					data.description
+				)}
+				class:border-solid={!reach(dataSchema, 'description').isValidSync(data.description)}
+				class:border-2={!reach(dataSchema, 'description').isValidSync(data.description)}
+			>
+				<textarea
+					bind:value={data.description}
+					class="bg-transparent resize-none w-full rounded text-sm dark:text-white"
+					class:dark:text-black={selected_question === -1}
+				/>
+			</div>
+			<div
+				class="w-full flex justify-center dark:text-white"
 				class:dark:text-black={selected_question === -1}
-			/>
+			>
+				<button
+					type="button"
+					on:click={() => {
+						data.public = !data.public;
+					}}
+					class="text-center"
+				>
+					{#if data.public}
+						<svg
+							class="w-5 h-5 inline-block"
+							fill="none"
+							stroke="currentColor"
+							viewBox="0 0 24 24"
+							xmlns="http://www.w3.org/2000/svg"
+						>
+							<path
+								stroke-linecap="round"
+								stroke-linejoin="round"
+								stroke-width="2"
+								d="M3.055 11H5a2 2 0 012 2v1a2 2 0 002 2 2 2 0 012 2v2.945M8 3.935V5.5A2.5 2.5 0 0010.5 8h.5a2 2 0 012 2 2 2 0 104 0 2 2 0 012-2h1.064M15 20.488V18a2 2 0 012-2h3.064M21 12a9 9 0 11-18 0 9 9 0 0118 0z"
+							/>
+						</svg>
+						<span>{$t('words.public')}</span>
+					{:else}
+						<svg
+							class="w-5 h-5 inline-block"
+							fill="none"
+							stroke="currentColor"
+							viewBox="0 0 24 24"
+							xmlns="http://www.w3.org/2000/svg"
+						>
+							<path
+								stroke-linecap="round"
+								stroke-linejoin="round"
+								stroke-width="2"
+								d="M13.875 18.825A10.05 10.05 0 0112 19c-4.478 0-8.268-2.943-9.543-7a9.97 9.97 0 011.563-3.029m5.858.908a3 3 0 114.243 4.243M9.878 9.878l4.242 4.242M9.88 9.88l-3.29-3.29m7.532 7.532l3.29 3.29M3 3l3.59 3.59m0 0A9.953 9.953 0 0112 5c4.478 0 8.268 2.943 9.543 7a10.025 10.025 0 01-4.132 5.411m0 0L21 21"
+							/>
+						</svg>
+						<span>{$t('words.private')}</span>
+					{/if}
+				</button>
+			</div>
 		</div>
-		<div
-			class="w-full flex justify-center dark:text-white"
-			class:dark:text-black={selected_question === -1}
-		>
-			<button
-				type="button"
+		{#each data.questions as question, index}
+			<div
+				class="bg-white shadow rounded-lg h-40 p-2 mb-6 hover:cursor-pointer drop-shadow-2xl border border-gray-500 dark:bg-gray-600 transition relative"
+				class:bg-green-300={index === selected_question}
+				class:dark:bg-green-500={index === selected_question}
 				on:click={() => {
-					data.public = !data.public;
+					setSelectedQuestion(index);
 				}}
-				class="text-center"
+				bind:this={arr_of_cards[index]}
 			>
-				{#if data.public}
+				{#if reorder_mode}
+					<div
+						transition:fade={{ duration: 90 }}
+						class="absolute z-10 grid grid-cols-2 bg-transparent w-full rounded h-full"
+					>
+						<!-- Div is used, since it just put me on the dashboard when using button elements... Idk why and I hate it-->
+						<div
+							class="h-full"
+							role="button"
+							aria-label="Move card up"
+							class:opacity-50={index === 0}
+							class:pointer-events-none={index === 0}
+							on:click={() =>
+								(data.questions = swapArrayElements(
+									data.questions,
+									index,
+									index - 1
+								))}
+						>
+							<!-- heroicons/new/ChevronUp --><svg
+								data-slot="icon"
+								aria-hidden="true"
+								fill="none"
+								stroke-width="1.5"
+								stroke="currentColor"
+								viewBox="0 0 24 24"
+								xmlns="http://www.w3.org/2000/svg"
+							>
+								<path
+									d="m4.5 15.75 7.5-7.5 7.5 7.5"
+									stroke-linecap="round"
+									stroke-linejoin="round"
+								></path>
+							</svg>
+						</div>
+						<div
+							class="h-full"
+							role="button"
+							aria-label="Move card down"
+							class:opacity-50={index + 1 === data.questions.length}
+							class:pointer-events-none={index + 1 === data.questions.length}
+							on:click={() =>
+								(data.questions = swapArrayElements(
+									data.questions,
+									index,
+									index + 1
+								))}
+						>
+							<!-- heroicons/new/ChevronDown -->
+							<svg
+								data-slot="icon"
+								aria-hidden="true"
+								fill="none"
+								stroke-width="1.5"
+								stroke="currentColor"
+								viewBox="0 0 24 24"
+								xmlns="http://www.w3.org/2000/svg"
+							>
+								<path
+									d="m19.5 8.25-7.5 7.5-7.5-7.5"
+									stroke-linecap="round"
+									stroke-linejoin="round"
+								></path>
+							</svg>
+						</div>
+					</div>
+				{/if}
+				<button
+					class="rounded-full absolute -top-3 -right-3 opacity-70 hover:opacity-100 transition"
+					type="button"
+					on:click={() => {
+						if (confirm('Do you really want to delete this Question?')) {
+							selected_question = -1;
+							data.questions.splice(index, 1);
+							data.questions = data.questions;
+						}
+					}}
+				>
 					<svg
-						class="w-5 h-5 inline-block"
+						class="w-6 h-6 bg-red-500 rounded-full"
 						fill="none"
 						stroke="currentColor"
 						viewBox="0 0 24 24"
@@ -117,53 +267,124 @@ SPDX-License-Identifier: MPL-2.0
 							stroke-linecap="round"
 							stroke-linejoin="round"
 							stroke-width="2"
-							d="M3.055 11H5a2 2 0 012 2v1a2 2 0 002 2 2 2 0 012 2v2.945M8 3.935V5.5A2.5 2.5 0 0010.5 8h.5a2 2 0 012 2 2 2 0 104 0 2 2 0 012-2h1.064M15 20.488V18a2 2 0 012-2h3.064M21 12a9 9 0 11-18 0 9 9 0 0118 0z"
+							d="M10 14l2-2m0 0l2-2m-2 2l-2-2m2 2l2 2m7-2a9 9 0 11-18 0 9 9 0 0118 0z"
 						/>
 					</svg>
-					<span>{$t('words.public')}</span>
-				{:else}
-					<svg
-						class="w-5 h-5 inline-block"
-						fill="none"
-						stroke="currentColor"
-						viewBox="0 0 24 24"
-						xmlns="http://www.w3.org/2000/svg"
+				</button>
+				<div
+					use:tippy={{
+						content: question.question === '' ? 'No title' : question.question
+					}}
+					class="m-1 border border-gray-500 rounded-lg p-0.5"
+				>
+					<h1
+						class="whitespace-nowrap truncate text-center rounded-lg dark:text-white transition"
+						class:bg-yellow-500={!reach(dataSchema, 'questions[].question').isValidSync(
+							question.question
+						)}
+						class:dark:text-black={index === selected_question}
 					>
-						<path
-							stroke-linecap="round"
-							stroke-linejoin="round"
-							stroke-width="2"
-							d="M13.875 18.825A10.05 10.05 0 0112 19c-4.478 0-8.268-2.943-9.543-7a9.97 9.97 0 011.563-3.029m5.858.908a3 3 0 114.243 4.243M9.878 9.878l4.242 4.242M9.88 9.88l-3.29-3.29m7.532 7.532l3.29 3.29M3 3l3.59 3.59m0 0A9.953 9.953 0 0112 5c4.478 0 8.268 2.943 9.543 7a10.025 10.025 0 01-4.132 5.411m0 0L21 21"
+						{#if question.question === ''}
+							<span class="italic text-gray-500">{$t('editor.no_title')}</span>
+						{:else}
+							{@html question.question}
+						{/if}
+					</h1>
+				</div>
+				{#if question.image}
+					<div class="flex justify-center align-middle pb-0.5">
+						<img
+							src="/api/v1/storage/download/{question.image}"
+							class="h-10 border rounded-lg"
+							alt="Not available"
+							use:tippy={{
+								content: `<img src="/api/v1/storage/download/${question.image}" alt="Not available" class="rounded">`,
+								allowHTML: true
+							}}
 						/>
-					</svg>
-					<span>{$t('words.private')}</span>
+					</div>
 				{/if}
-			</button>
-		</div>
-	</div>
-	{#each data.questions as question, index}
+
+				{#if question.type === QuizQuestionType.ABCD || question.type === QuizQuestionType.CHECK}
+					<div class="grid grid-cols-2 gap-2">
+						{#if Array.isArray(question.answers)}
+							{#each question.answers as answer}
+								<span
+									class="whitespace-nowrap truncate rounded-lg p-0.5 text-sm text-center border border-gray-700"
+									class:bg-green-500={answer.right}
+									class:bg-red-500={!answer.right}
+									class:bg-yellow-500={!reach(
+										ABCDQuestionSchema,
+										'answer'
+									).isValidSync(answer.answer)}
+									use:tippy={{
+										content:
+											answer.answer === ''
+												? $t('editor.empty')
+												: answer.answer
+									}}
+									>{#if answer.answer === ''}
+										<i>{$t('editor.empty')}</i>
+									{:else}
+										{answer.answer}
+									{/if}</span
+								>
+							{/each}
+						{/if}
+					</div>
+				{:else if question.type === QuizQuestionType.RANGE}
+					<p class="text-center text-sm p-0.5">
+						All numbers between {question.answers.min_correct}
+						and {question.answers.max_correct} are correct, where numbers between {question
+							.answers.min} and {question.answers.max} can be selected.
+					</p>
+				{:else if question.type === QuizQuestionType.VOTING || question.type === QuizQuestionType.TEXT}
+					{#if Array.isArray(question.answers)}
+						<div class="grid grid-cols-2 gap-2">
+							{#each question.answers as answer}
+								<span
+									class="whitespace-nowrap truncate rounded-lg p-0.5 text-sm text-center border border-gray-700"
+									class:dark:bg-gray-500={answer.answer}
+									class:bg-gray-300={answer.answer}
+									class:bg-yellow-500={!reach(
+										ABCDQuestionSchema,
+										'answer'
+									).isValidSync(answer.answer)}
+									use:tippy={{
+										content:
+											answer.answer === ''
+												? $t('editor.empty')
+												: answer.answer
+									}}
+									>{#if answer.answer === ''}
+										<i>{$t('editor.empty')}</i>
+									{:else}
+										{answer.answer}
+									{/if}</span
+								>
+							{/each}
+						</div>
+					{/if}
+				{:else if question.type === QuizQuestionType.SLIDE}
+					<p>Slide!</p>
+				{:else}
+					<p>Unknown Question Type (shouldn't happen)</p>
+				{/if}
+			</div>
+		{/each}
 		<div
-			class="bg-white shadow rounded-lg h-40 p-2 mb-6 hover:cursor-pointer drop-shadow-2xl border border-gray-500 dark:bg-gray-600 transition"
-			class:bg-green-300={index === selected_question}
-			class:dark:bg-green-500={index === selected_question}
-			on:click={() => {
-				setSelectedQuestion(index);
-			}}
-			bind:this={arr_of_cards[index]}
+			class="bg-white shadow rounded-lg h-40 p-2 hover:cursor-pointer drop-shadow-2xl border border-gray-500 dark:bg-gray-600 grid grid-cols-2"
 		>
 			<button
-				class="rounded-full absolute -top-3 -right-3 opacity-70 hover:opacity-100 transition"
 				type="button"
+				class="h-full flex justify-center w-full flex-col border-r border-black dark:text-white"
 				on:click={() => {
-					if (confirm('Do you really want to delete this Question?')) {
-						selected_question = -1;
-						data.questions.splice(index, 1);
-						data.questions = data.questions;
-					}
+					add_new_question_popup_open = true;
 				}}
 			>
+				<span class="w-full text-center">{$t('words.question')}</span>
 				<svg
-					class="w-6 h-6 bg-red-500 rounded-full"
+					class="w-5/6 m-auto"
 					fill="none"
 					stroke="currentColor"
 					viewBox="0 0 24 24"
@@ -173,153 +394,34 @@ SPDX-License-Identifier: MPL-2.0
 						stroke-linecap="round"
 						stroke-linejoin="round"
 						stroke-width="2"
-						d="M10 14l2-2m0 0l2-2m-2 2l-2-2m2 2l2 2m7-2a9 9 0 11-18 0 9 9 0 0118 0z"
+						d="M12 6v6m0 0v6m0-6h6m-6 0H6"
 					/>
 				</svg>
 			</button>
-			<div
-				use:tippy={{ content: question.question === '' ? 'No title' : question.question }}
-				class="m-1 border border-gray-500 rounded-lg p-0.5"
+			<button
+				type="button"
+				class="h-full flex justify-center w-full dark:text-white flex-col"
+				on:click={() => {
+					data.questions = [...data.questions, { ...empy_slide }];
+				}}
 			>
-				<h1
-					class="whitespace-nowrap truncate text-center rounded-lg dark:text-white transition"
-					class:bg-yellow-500={!reach(dataSchema, 'questions[].question').isValidSync(
-						question.question
-					)}
-					class:dark:text-black={index === selected_question}
+				<span class="w-full text-center">{$t('words.slide')}</span>
+				<svg
+					class="w-5/6 m-auto"
+					fill="none"
+					stroke="currentColor"
+					viewBox="0 0 24 24"
+					xmlns="http://www.w3.org/2000/svg"
 				>
-					{#if question.question === ''}
-						<span class="italic text-gray-500">{$t('editor.no_title')}</span>
-					{:else}
-						{@html question.question}
-					{/if}
-				</h1>
-			</div>
-			{#if question.image}
-				<div class="flex justify-center align-middle pb-0.5">
-					<img
-						src="/api/v1/storage/download/{question.image}"
-						class="h-10 border rounded-lg"
-						alt="Not available"
-						use:tippy={{
-							content: `<img src="/api/v1/storage/download/${question.image}" alt="Not available" class="rounded">`,
-							allowHTML: true
-						}}
+					<path
+						stroke-linecap="round"
+						stroke-linejoin="round"
+						stroke-width="2"
+						d="M12 6v6m0 0v6m0-6h6m-6 0H6"
 					/>
-				</div>
-			{/if}
-			{#if question.type === QuizQuestionType.ABCD || question.type === QuizQuestionType.CHECK}
-				<div class="grid grid-cols-2 gap-2">
-					{#if Array.isArray(question.answers)}
-						{#each question.answers as answer}
-							<span
-								class="whitespace-nowrap truncate rounded-lg p-0.5 text-sm text-center border border-gray-700"
-								class:bg-green-500={answer.right}
-								class:bg-red-500={!answer.right}
-								class:bg-yellow-500={!reach(
-									ABCDQuestionSchema,
-									'answer'
-								).isValidSync(answer.answer)}
-								use:tippy={{
-									content:
-										answer.answer === '' ? $t('editor.empty') : answer.answer
-								}}
-								>{#if answer.answer === ''}
-									<i>{$t('editor.empty')}</i>
-								{:else}
-									{answer.answer}
-								{/if}</span
-							>
-						{/each}
-					{/if}
-				</div>
-			{:else if question.type === QuizQuestionType.RANGE}
-				<p class="text-center text-sm p-0.5">
-					All numbers between {question.answers.min_correct}
-					and {question.answers.max_correct} are correct, where numbers between {question
-						.answers.min} and {question.answers.max} can be selected.
-				</p>
-			{:else if question.type === QuizQuestionType.VOTING || question.type === QuizQuestionType.TEXT}
-				{#if Array.isArray(question.answers)}
-					<div class="grid grid-cols-2 gap-2">
-						{#each question.answers as answer}
-							<span
-								class="whitespace-nowrap truncate rounded-lg p-0.5 text-sm text-center border border-gray-700"
-								class:dark:bg-gray-500={answer.answer}
-								class:bg-gray-300={answer.answer}
-								class:bg-yellow-500={!reach(
-									ABCDQuestionSchema,
-									'answer'
-								).isValidSync(answer.answer)}
-								use:tippy={{
-									content:
-										answer.answer === '' ? $t('editor.empty') : answer.answer
-								}}
-								>{#if answer.answer === ''}
-									<i>{$t('editor.empty')}</i>
-								{:else}
-									{answer.answer}
-								{/if}</span
-							>
-						{/each}
-					</div>
-				{/if}
-			{:else if question.type === QuizQuestionType.SLIDE}
-				<p>Slide!</p>
-			{:else}
-				<p>Unknown Question Type (shouldn't happen)</p>
-			{/if}
+				</svg>
+			</button>
 		</div>
-	{/each}
-	<div
-		class="bg-white shadow rounded-lg h-40 p-2 hover:cursor-pointer drop-shadow-2xl border border-gray-500 dark:bg-gray-600 grid grid-cols-2"
-	>
-		<button
-			type="button"
-			class="h-full flex justify-center w-full flex-col border-r border-black dark:text-white"
-			on:click={() => {
-				add_new_question_popup_open = true;
-			}}
-		>
-			<span class="w-full text-center">{$t('words.question')}</span>
-			<svg
-				class="w-5/6 m-auto"
-				fill="none"
-				stroke="currentColor"
-				viewBox="0 0 24 24"
-				xmlns="http://www.w3.org/2000/svg"
-			>
-				<path
-					stroke-linecap="round"
-					stroke-linejoin="round"
-					stroke-width="2"
-					d="M12 6v6m0 0v6m0-6h6m-6 0H6"
-				/>
-			</svg>
-		</button>
-		<button
-			type="button"
-			class="h-full flex justify-center w-full dark:text-white flex-col"
-			on:click={() => {
-				data.questions = [...data.questions, { ...empy_slide }];
-			}}
-		>
-			<span class="w-full text-center">{$t('words.slide')}</span>
-			<svg
-				class="w-5/6 m-auto"
-				fill="none"
-				stroke="currentColor"
-				viewBox="0 0 24 24"
-				xmlns="http://www.w3.org/2000/svg"
-			>
-				<path
-					stroke-linecap="round"
-					stroke-linejoin="round"
-					stroke-width="2"
-					d="M12 6v6m0 0v6m0-6h6m-6 0H6"
-				/>
-			</svg>
-		</button>
 	</div>
 </div>
 {#if add_new_question_popup_open}
diff --git a/frontend/src/lib/i18n/locales/en.json b/frontend/src/lib/i18n/locales/en.json
index ec654cd8..36265351 100644
--- a/frontend/src/lib/i18n/locales/en.json
+++ b/frontend/src/lib/i18n/locales/en.json
@@ -224,7 +224,9 @@
         "range_description": "A number-range can be selected with a slider",
         "need_more_help": "Need more help?",
         "visit_docs": "Visit the docs.",
-        "enter_answer": "Enter an answer"
+        "enter_answer": "Enter an answer",
+        "enable_reorder": "Enable reorder mode",
+        "disable_reorder": "Disable reorder mode"
     },
     "import_page": {
         "need_help": "Need help?",