From a5f7ee12552aa36022c09e6ccfa9a9f8e1449fb8 Mon Sep 17 00:00:00 2001
From: Benjamin Loidl <benni@loidlnetz.de>
Date: Thu, 6 Jun 2024 09:37:03 +0200
Subject: [PATCH 01/18] FE: Limiting author name length

---
 frontend/.env.example                                     | 3 ++-
 .../src/components/questionpreview/QuestionPreview.tsx    | 2 +-
 frontend/src/pages/dashboard/question/QuestionView.tsx    | 8 ++++++--
 3 files changed, 9 insertions(+), 4 deletions(-)

diff --git a/frontend/.env.example b/frontend/.env.example
index 40e5294d..5705a99f 100644
--- a/frontend/.env.example
+++ b/frontend/.env.example
@@ -1 +1,2 @@
-VITE_BACKEND_URL=http://localhost:3000/
\ No newline at end of file
+VITE_BACKEND_URL=http://localhost:3000/
+VITE_AUTHOR_NAME_MAX_LENGTH=12
diff --git a/frontend/src/components/questionpreview/QuestionPreview.tsx b/frontend/src/components/questionpreview/QuestionPreview.tsx
index 86331294..578ed1a4 100644
--- a/frontend/src/components/questionpreview/QuestionPreview.tsx
+++ b/frontend/src/components/questionpreview/QuestionPreview.tsx
@@ -99,7 +99,7 @@ export default function QuestionPreview(props: Props) {
 				<img className={ "avatar" } src={ "https://www.w3schools.com/w3images/avatar2.png" } alt={ "Avatar" }/>
 				<p style={ { margin: 0, display: "flex", flexDirection: "column" } }>
 					<span className={ "caption" }>Asked by</span>
-					<span>{ props.question.author.name }</span>
+					<span>{ props.question.author.name.substring(0, import.meta.env.VITE_AUTHOR_NAME_MAX_LENGTH) }</span>
 				</p>
 			</div>
 		</div>
diff --git a/frontend/src/pages/dashboard/question/QuestionView.tsx b/frontend/src/pages/dashboard/question/QuestionView.tsx
index 61dc3edd..b049da02 100644
--- a/frontend/src/pages/dashboard/question/QuestionView.tsx
+++ b/frontend/src/pages/dashboard/question/QuestionView.tsx
@@ -248,8 +248,12 @@ export default function QuestionView() {
 						
 						<p>
 							{ question ? <>
-								<span>{ question.author.name }</span>
-								<span className={ "badge" }>{ question.author.type.toUpperCase() }</span>
+								<span>
+									{ question.author.name.substring(0, import.meta.env.VITE_AUTHOR_NAME_MAX_LENGTH) }
+								</span>
+								
+								{ question.author.type !== "user" &&
+                                    <span className={ "badge" }>{ question.author.type.toUpperCase() }</span>}
 							</> : <Skeleton width={ 120 }/> }
 						</p>
 					</div>

From b6016afae22d596646ccd40298041b2af432318a Mon Sep 17 00:00:00 2001
From: Benjamin Loidl <benni@loidlnetz.de>
Date: Thu, 6 Jun 2024 09:39:12 +0200
Subject: [PATCH 02/18] FE: Implementing Active Question Title Display

---
 frontend/src/pages/dashboard/Dashboard.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/frontend/src/pages/dashboard/Dashboard.tsx b/frontend/src/pages/dashboard/Dashboard.tsx
index 5900e40b..b0449a5e 100644
--- a/frontend/src/pages/dashboard/Dashboard.tsx
+++ b/frontend/src/pages/dashboard/Dashboard.tsx
@@ -56,7 +56,7 @@ export default function Dashboard(props: Props) {
 			if (window.location.pathname.includes("/question")) {
 				let questionId = window.location.pathname.split("/question/")[1].substring(0, 36);
 				global.axios.get("question/" + questionId + "/title")
-					  .then(res => console.log(res))
+					  .then(res => setActiveQuestionName(res.data.title))
 					  .catch(err => axiosError(err, alert));
 			}
 		}

From 3b2c58b20598f6eb32ea036431cd195530aab345 Mon Sep 17 00:00:00 2001
From: Benjamin Loidl <benni@loidlnetz.de>
Date: Thu, 6 Jun 2024 09:39:26 +0200
Subject: [PATCH 03/18] FE: Disable browser auto-launch

---
 frontend/vite.config.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/frontend/vite.config.ts b/frontend/vite.config.ts
index da1425af..5bdaed1d 100644
--- a/frontend/vite.config.ts
+++ b/frontend/vite.config.ts
@@ -21,7 +21,7 @@ export default defineConfig(() => {
 		},
 		server: {
 			port: 3006,
-			open: true
+			open: false
 		}
 	};
 });

From e255f2a0bce043aefc2b5dbd63653e798d85aa5f Mon Sep 17 00:00:00 2001
From: Benjamin Loidl <benni@loidlnetz.de>
Date: Thu, 6 Jun 2024 09:39:52 +0200
Subject: [PATCH 04/18] FE: Enabling Question Creation

---
 frontend/src/pages/dashboard/editor/Editor.tsx | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/frontend/src/pages/dashboard/editor/Editor.tsx b/frontend/src/pages/dashboard/editor/Editor.tsx
index 49d1b43e..89bdc50e 100644
--- a/frontend/src/pages/dashboard/editor/Editor.tsx
+++ b/frontend/src/pages/dashboard/editor/Editor.tsx
@@ -195,6 +195,8 @@ export default function Editor(props: {}) {
 							tags: tags,
 							content: description,
 							useAI: questionType === "simp"
+						}, {
+							withCredentials: true
 						})
 									.then(res => {
 										alert.info(res.status);

From d08c05dd35bcb3a116251122ea878e4bd43f61b0 Mon Sep 17 00:00:00 2001
From: Benjamin Loidl <benni@loidlnetz.de>
Date: Thu, 6 Jun 2024 09:40:11 +0200
Subject: [PATCH 05/18] FE: Updating Question author types

---
 frontend/src/def/Question.d.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/frontend/src/def/Question.d.ts b/frontend/src/def/Question.d.ts
index a59395c8..156c9520 100644
--- a/frontend/src/def/Question.d.ts
+++ b/frontend/src/def/Question.d.ts
@@ -26,5 +26,5 @@ export interface Answer {
 interface Author {
 	id: string;
 	name: string;
-	type: "user" | "pro" | "ai";
+	type: "guest" | "user" | "pro" | "admin" | "ai";
 }

From e14569bf635b9c03438aece6e9a40cc29ff223c7 Mon Sep 17 00:00:00 2001
From: Benjamin Loidl <benni@loidlnetz.de>
Date: Thu, 6 Jun 2024 09:40:35 +0200
Subject: [PATCH 06/18] FE: Fixing rating / opinion fetch

---
 frontend/src/pages/dashboard/question/QuestionView.tsx | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/frontend/src/pages/dashboard/question/QuestionView.tsx b/frontend/src/pages/dashboard/question/QuestionView.tsx
index b049da02..a6139aff 100644
--- a/frontend/src/pages/dashboard/question/QuestionView.tsx
+++ b/frontend/src/pages/dashboard/question/QuestionView.tsx
@@ -43,7 +43,7 @@ export default function QuestionView() {
 					  id: id ?? "",
 					  isDiscussion: res.data.isDiscussion ?? false,
 					  likes: res.data.likes ?? 0,
-					  rating: res.data.rating ?? "none",
+					  rating: res.data.opinion ?? "none",
 					  tags: res.data.tags ?? [],
 					  title: res.data.title ?? "",
 					  updated: formatDate(res.data.updated ?? "")
@@ -272,7 +272,7 @@ export default function QuestionView() {
 						</div>
 						
 						<div
-							className={ "question-stat" /* + (question.stats.rating === "like" ? " rating" : "") */ }>
+							className={ "question-stat" + (question.rating === "like" ? " rating" : "") }>
 							<i className={ "fi fi-rr-social-network primary-icon" } tabIndex={ 0 }/>
 							<span
 								className={ "question-figure" }>{ question.likes.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",") }</span>
@@ -280,7 +280,7 @@ export default function QuestionView() {
 						</div>
 						
 						<div
-							className={ "question-stat" /* + (question.stats.rating === "dislike" ? " rating" : "") */ }>
+							className={ "question-stat" + (question.rating === "dislike" ? " rating" : "") }>
 							<i className={ "fi fi-rr-social-network flipY primary-icon" } tabIndex={ 0 }/>
 							<span
 								className={ "question-figure" }>{ question.dislikes.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",") }</span>

From 6a20ea893b5dac759b365ebae60a2c577091ccb5 Mon Sep 17 00:00:00 2001
From: Benjamin Loidl <benni@loidlnetz.de>
Date: Thu, 6 Jun 2024 09:42:44 +0200
Subject: [PATCH 07/18] FE: Renaming rating to opinion

---
 .../src/components/questionpreview/QuestionPreview.tsx |  4 ++--
 frontend/src/def/Question.d.ts                         |  4 ++--
 frontend/src/pages/dashboard/question/QuestionView.tsx | 10 +++++-----
 frontend/src/pages/dashboard/trending/Trending.tsx     |  2 +-
 4 files changed, 10 insertions(+), 10 deletions(-)

diff --git a/frontend/src/components/questionpreview/QuestionPreview.tsx b/frontend/src/components/questionpreview/QuestionPreview.tsx
index 578ed1a4..618c40ed 100644
--- a/frontend/src/components/questionpreview/QuestionPreview.tsx
+++ b/frontend/src/components/questionpreview/QuestionPreview.tsx
@@ -63,7 +63,7 @@ export default function QuestionPreview(props: Props) {
 		<div className={ "question-details-wrapper" }>
 			<div className={ "question-stats" }>
 				<div
-					className={ "question-stat" + (props.question.rating === "like" ? " rating" : "") }>
+					className={ "question-stat" + (props.question.opinion === "like" ? " rating" : "") }>
 					<i className={ "fi fi-rr-social-network primary-icon" }/>
 					<span
 						className={ "question-figure" }>{ props.question.likes.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",") }</span>
@@ -71,7 +71,7 @@ export default function QuestionPreview(props: Props) {
 				</div>
 				
 				<div
-					className={ "question-stat" + (props.question.rating === "dislike" ? " rating" : "") }>
+					className={ "question-stat" + (props.question.opinion === "dislike" ? " rating" : "") }>
 					<i className={ "fi fi-rr-social-network primary-icon flipY" }/>
 					<span
 						className={ "question-figure" }>{ props.question.dislikes.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",") }</span>
diff --git a/frontend/src/def/Question.d.ts b/frontend/src/def/Question.d.ts
index 156c9520..136bfd63 100644
--- a/frontend/src/def/Question.d.ts
+++ b/frontend/src/def/Question.d.ts
@@ -6,7 +6,7 @@ export interface Question {
 	tags: string[];
 	likes: number;
 	dislikes: number;
-	rating: "like" | "dislike" | "none";
+	opinion: "like" | "dislike" | "none";
 	answers: number;
 	created: string;
 	updated: string;
@@ -19,7 +19,7 @@ export interface Answer {
 	created: string;
 	likes: number;
 	dislikes: number;
-	rating: "like" | "dislike" | "none";
+	opinion: "like" | "dislike" | "none";
 	author: Author;
 }
 
diff --git a/frontend/src/pages/dashboard/question/QuestionView.tsx b/frontend/src/pages/dashboard/question/QuestionView.tsx
index a6139aff..5a130e1c 100644
--- a/frontend/src/pages/dashboard/question/QuestionView.tsx
+++ b/frontend/src/pages/dashboard/question/QuestionView.tsx
@@ -43,7 +43,7 @@ export default function QuestionView() {
 					  id: id ?? "",
 					  isDiscussion: res.data.isDiscussion ?? false,
 					  likes: res.data.likes ?? 0,
-					  rating: res.data.opinion ?? "none",
+					  opinion: res.data.opinion ?? "none",
 					  tags: res.data.tags ?? [],
 					  title: res.data.title ?? "",
 					  updated: formatDate(res.data.updated ?? "")
@@ -122,14 +122,14 @@ export default function QuestionView() {
 				
 				<div className={ "question-answer-actions" }>
 					<div
-						className={ "question-answer-actions-rate" + (answer.rating === "like" ? " rating" : "") }>
+						className={ "question-answer-actions-rate" + (answer.opinion === "like" ? " rating" : "") }>
 						<i className={ "fi fi-rr-social-network primary-icon" } tabIndex={ 0 }/>
 						<span className={ "question-figure" }>{ answer.likes }</span>
 						<span className={ "question-unit" }>likes</span>
 					</div>
 					
 					<div
-						className={ "question-answer-actions-rate" + (answer.rating === "dislike" ? " rating" : "") }>
+						className={ "question-answer-actions-rate" + (answer.opinion === "dislike" ? " rating" : "") }>
 						<i className={ "fi fi-rr-social-network flipY primary-icon" } tabIndex={ 0 }/>
 						<span className={ "question-figure" }>{ answer.dislikes }</span>
 						<span className={ "question-unit" }>dislikes</span>
@@ -272,7 +272,7 @@ export default function QuestionView() {
 						</div>
 						
 						<div
-							className={ "question-stat" + (question.rating === "like" ? " rating" : "") }>
+							className={ "question-stat" + (question.opinion === "like" ? " rating" : "") }>
 							<i className={ "fi fi-rr-social-network primary-icon" } tabIndex={ 0 }/>
 							<span
 								className={ "question-figure" }>{ question.likes.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",") }</span>
@@ -280,7 +280,7 @@ export default function QuestionView() {
 						</div>
 						
 						<div
-							className={ "question-stat" + (question.rating === "dislike" ? " rating" : "") }>
+							className={ "question-stat" + (question.opinion === "dislike" ? " rating" : "") }>
 							<i className={ "fi fi-rr-social-network flipY primary-icon" } tabIndex={ 0 }/>
 							<span
 								className={ "question-figure" }>{ question.dislikes.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",") }</span>
diff --git a/frontend/src/pages/dashboard/trending/Trending.tsx b/frontend/src/pages/dashboard/trending/Trending.tsx
index 96764404..773ec2a9 100644
--- a/frontend/src/pages/dashboard/trending/Trending.tsx
+++ b/frontend/src/pages/dashboard/trending/Trending.tsx
@@ -38,7 +38,7 @@ export default function Trending(props: {}) {
 						  id: _question.id,
 						  isDiscussion: _question.isDiscussion ?? false,
 						  likes: _question.likes ?? 0,
-						  rating: _question.rating ?? "none",
+						  opinion: _question.opinion ?? "none",
 						  tags: _question.tags ?? [],
 						  title: _question.title ?? "",
 						  updated: formatDate(_question.updated ?? "")

From 7da207937d68e0157f725c93964e3eda64d7bde9 Mon Sep 17 00:00:00 2001
From: Benjamin Loidl <benni@loidlnetz.de>
Date: Thu, 6 Jun 2024 09:47:39 +0200
Subject: [PATCH 08/18] FE: Extracting QuestionStats from QuestionView

---
 .../dashboard/question/QuestionStats.tsx      | 47 +++++++++++++++++++
 .../pages/dashboard/question/QuestionView.tsx | 41 +---------------
 2 files changed, 49 insertions(+), 39 deletions(-)
 create mode 100644 frontend/src/pages/dashboard/question/QuestionStats.tsx

diff --git a/frontend/src/pages/dashboard/question/QuestionStats.tsx b/frontend/src/pages/dashboard/question/QuestionStats.tsx
new file mode 100644
index 00000000..ef5d3c61
--- /dev/null
+++ b/frontend/src/pages/dashboard/question/QuestionStats.tsx
@@ -0,0 +1,47 @@
+import Skeleton from "react-loading-skeleton";
+import React from "react";
+import { Question } from "../../../def/Question";
+
+export default function QuestionStats(props: {question?: Question}) {
+	return <>
+		<span className={ "caption" }>Question Stats</span>
+		<div className={ "question-stats" }>
+			{ props.question ? <>
+				<div className={ "question-stat" }>
+					<i className={ "fi fi-rr-eye primary-icon" }/>
+					<span
+						className={ "question-figure" }>{ "0".replace(/\B(?=(\d{3})+(?!\d))/g, ",") }</span>
+					<span className={ "question-unit" }>views</span>
+				</div>
+				
+				<div
+					className={ "question-stat" + (props.question.opinion === "like" ? " rating" : "") }>
+					<i className={ "fi fi-rr-social-network primary-icon" } tabIndex={ 0 }/>
+					<span
+						className={ "question-figure" }>{ props.question.likes.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",") }</span>
+					<span className={ "question-unit" }>likes</span>
+				</div>
+				
+				<div
+					className={ "question-stat" + (props.question.opinion === "dislike" ? " rating" : "") }>
+					<i className={ "fi fi-rr-social-network flipY primary-icon" } tabIndex={ 0 }/>
+					<span
+						className={ "question-figure" }>{ props.question.dislikes.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",") }</span>
+					<span className={ "question-unit" }>dislikes</span>
+				</div>
+				
+				<div className={ "question-stat" }>
+					<i className={ "fi fi-rr-comment-dots primary-icon" }/>
+					<span
+						className={ "question-figure" }>{ props.question.answers.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",") }</span>
+					<span className={ "question-unit" }>answers</span>
+				</div>
+			</> : <>
+				<Skeleton containerClassName={ "question-stat" } width={ 80 }/>
+				<Skeleton containerClassName={ "question-stat" } width={ 80 }/>
+				<Skeleton containerClassName={ "question-stat" } width={ 80 }/>
+				<Skeleton containerClassName={ "question-stat" } width={ 80 }/>
+			</> }
+		</div>
+	</>
+}
diff --git a/frontend/src/pages/dashboard/question/QuestionView.tsx b/frontend/src/pages/dashboard/question/QuestionView.tsx
index 5a130e1c..58ee2534 100644
--- a/frontend/src/pages/dashboard/question/QuestionView.tsx
+++ b/frontend/src/pages/dashboard/question/QuestionView.tsx
@@ -12,6 +12,7 @@ import { formatDate } from "../../../def/converter";
 import { useAlert } from "react-alert";
 import { axiosError } from "../../../def/axios-error";
 import NoContent from "../../../components/NoContent";
+import QuestionStats from "./QuestionStats";
 
 /**
  * Renders the question page
@@ -261,45 +262,7 @@ export default function QuestionView() {
 				
 				<hr style={ { marginBlock: "calc(var(--spacing) / 2)" } }/>
 				
-				<span className={ "caption" }>Question Stats</span>
-				<div className={ "question-stats" }>
-					{ question ? <>
-						<div className={ "question-stat" }>
-							<i className={ "fi fi-rr-eye primary-icon" }/>
-							<span
-								className={ "question-figure" }>{ "0".replace(/\B(?=(\d{3})+(?!\d))/g, ",") }</span>
-							<span className={ "question-unit" }>views</span>
-						</div>
-						
-						<div
-							className={ "question-stat" + (question.opinion === "like" ? " rating" : "") }>
-							<i className={ "fi fi-rr-social-network primary-icon" } tabIndex={ 0 }/>
-							<span
-								className={ "question-figure" }>{ question.likes.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",") }</span>
-							<span className={ "question-unit" }>likes</span>
-						</div>
-						
-						<div
-							className={ "question-stat" + (question.opinion === "dislike" ? " rating" : "") }>
-							<i className={ "fi fi-rr-social-network flipY primary-icon" } tabIndex={ 0 }/>
-							<span
-								className={ "question-figure" }>{ question.dislikes.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",") }</span>
-							<span className={ "question-unit" }>dislikes</span>
-						</div>
-						
-						<div className={ "question-stat" }>
-							<i className={ "fi fi-rr-comment-dots primary-icon" }/>
-							<span
-								className={ "question-figure" }>{ question.answers.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",") }</span>
-							<span className={ "question-unit" }>answers</span>
-						</div>
-					</> : <>
-						<Skeleton containerClassName={ "question-stat" } width={ 80 }/>
-						<Skeleton containerClassName={ "question-stat" } width={ 80 }/>
-						<Skeleton containerClassName={ "question-stat" } width={ 80 }/>
-						<Skeleton containerClassName={ "question-stat" } width={ 80 }/>
-					</> }
-				</div>
+				<QuestionStats question={ question }/>
 				
 				<hr style={ { marginBottom: "calc(var(--spacing) / 2)" } }/>
 				

From a2b1b39c8419b7121d86a934d492f6465623c4f3 Mon Sep 17 00:00:00 2001
From: Benjamin Loidl <benni@loidlnetz.de>
Date: Thu, 6 Jun 2024 09:47:49 +0200
Subject: [PATCH 09/18] FE: Adding a space

---
 frontend/src/pages/dashboard/question/QuestionView.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/frontend/src/pages/dashboard/question/QuestionView.tsx b/frontend/src/pages/dashboard/question/QuestionView.tsx
index 58ee2534..877fffde 100644
--- a/frontend/src/pages/dashboard/question/QuestionView.tsx
+++ b/frontend/src/pages/dashboard/question/QuestionView.tsx
@@ -254,7 +254,7 @@ export default function QuestionView() {
 								</span>
 								
 								{ question.author.type !== "user" &&
-                                    <span className={ "badge" }>{ question.author.type.toUpperCase() }</span>}
+                                    <span className={ "badge" }>{ question.author.type.toUpperCase() }</span> }
 							</> : <Skeleton width={ 120 }/> }
 						</p>
 					</div>

From 67b2c64331b54299f78b0df92145afaf9161da18 Mon Sep 17 00:00:00 2001
From: Benjamin Loidl <benni@loidlnetz.de>
Date: Thu, 6 Jun 2024 10:01:11 +0200
Subject: [PATCH 10/18] FE: Adding count to QuestionPreviewSkeleton

---
 .../QuestionPreviewSkeleton.tsx               | 73 ++++++++++---------
 .../src/pages/dashboard/trending/Trending.tsx |  6 +-
 2 files changed, 40 insertions(+), 39 deletions(-)

diff --git a/frontend/src/components/questionpreview/QuestionPreviewSkeleton.tsx b/frontend/src/components/questionpreview/QuestionPreviewSkeleton.tsx
index 23a6fb81..bd1a6001 100644
--- a/frontend/src/components/questionpreview/QuestionPreviewSkeleton.tsx
+++ b/frontend/src/components/questionpreview/QuestionPreviewSkeleton.tsx
@@ -5,47 +5,52 @@ import React from "react";
 /**
  * Renders a skeleton, based on QuestionPreview
  */
-export default function QuestionPreviewSkeleton() {
-	return <div className={ "container questions-question" } style={ { cursor: "auto" } }>
-		<div className={ "question" }>
-			<Skeleton containerClassName={ "tags" }/>
-			
-			<h2>
-				<Skeleton width={ 400 }/>
-			</h2>
-			
-			<Skeleton containerClassName={ "caption" } width={ 300 }/>
-		</div>
-		
-		<div className={ "question-details-wrapper" }>
-			<div className={ "question-stats" }>
-				<div className={ "question-stat" }>
-					<Skeleton width={ 80 } height={ 24 }/>
-				</div>
+export default function QuestionPreviewSkeleton(props: { count?: number }) {
+	const { count = 1 } = props;
+	const skeletonArray = Array.from({ length: count });
+	
+	return skeletonArray.map((_, i) => {
+		return <div className={ "container questions-question" } style={ { cursor: "auto" } } key={ i }>
+			<div className={ "question" }>
+				<Skeleton containerClassName={ "tags" }/>
 				
-				<div className={ "question-stat" }>
-					<Skeleton width={ 80 } height={ 24 }/>
-				</div>
+				<h2>
+					<Skeleton width={ 400 }/>
+				</h2>
+				
+				<Skeleton containerClassName={ "caption" } width={ 300 }/>
 			</div>
 			
-			<div className={ "question-stats" }>
-				<div className={ "question-stat" }>
-					<Skeleton width={ 80 } height={ 24 }/>
+			<div className={ "question-details-wrapper" }>
+				<div className={ "question-stats" }>
+					<div className={ "question-stat" }>
+						<Skeleton width={ 80 } height={ 24 }/>
+					</div>
+					
+					<div className={ "question-stat" }>
+						<Skeleton width={ 80 } height={ 24 }/>
+					</div>
 				</div>
 				
-				<div className={ "question-stat" }>
-					<Skeleton width={ 80 } height={ 24 }/>
+				<div className={ "question-stats" }>
+					<div className={ "question-stat" }>
+						<Skeleton width={ 80 } height={ 24 }/>
+					</div>
+					
+					<div className={ "question-stat" }>
+						<Skeleton width={ 80 } height={ 24 }/>
+					</div>
 				</div>
-			</div>
-			
-			<div className={ "author" }>
-				<Skeleton circle width={ 40 } height={ 40 }/>
 				
-				<p style={ { margin: 0, display: "flex", flexDirection: "column" } }>
-					<Skeleton width={ 80 } height={ 12 }/>
-					<Skeleton width={ 80 } height={ 20 }/>
-				</p>
+				<div className={ "author" }>
+					<Skeleton circle width={ 40 } height={ 40 }/>
+					
+					<p style={ { margin: 0, display: "flex", flexDirection: "column" } }>
+						<Skeleton width={ 80 } height={ 12 }/>
+						<Skeleton width={ 80 } height={ 20 }/>
+					</p>
+				</div>
 			</div>
 		</div>
-	</div>
+	})
 }
diff --git a/frontend/src/pages/dashboard/trending/Trending.tsx b/frontend/src/pages/dashboard/trending/Trending.tsx
index 773ec2a9..9db356b3 100644
--- a/frontend/src/pages/dashboard/trending/Trending.tsx
+++ b/frontend/src/pages/dashboard/trending/Trending.tsx
@@ -126,11 +126,7 @@ export default function Trending(props: {}) {
 				? questions.map((question, index) =>
 					<QuestionPreview question={ question } index={ index } key={ index }/>)
 				: <NoContent/>
-			: <>
-				<QuestionPreviewSkeleton/>
-				<QuestionPreviewSkeleton/>
-				<QuestionPreviewSkeleton/>
-			</>
+			: <QuestionPreviewSkeleton count={ 2 }/>
 		}
 	</>;
 }

From 35cfadae39668f8482c28a35ed9b49683a4b593a Mon Sep 17 00:00:00 2001
From: Benjamin Loidl <benni@loidlnetz.de>
Date: Thu, 6 Jun 2024 10:01:39 +0200
Subject: [PATCH 11/18] FE: Extracting QuestionAnswerSkeleton from QuestionView

---
 .../question/QuestionAnswerSkeleton.tsx       | 38 +++++++++++++++++++
 .../pages/dashboard/question/QuestionView.tsx | 37 +-----------------
 2 files changed, 40 insertions(+), 35 deletions(-)
 create mode 100644 frontend/src/pages/dashboard/question/QuestionAnswerSkeleton.tsx

diff --git a/frontend/src/pages/dashboard/question/QuestionAnswerSkeleton.tsx b/frontend/src/pages/dashboard/question/QuestionAnswerSkeleton.tsx
new file mode 100644
index 00000000..a57cdd94
--- /dev/null
+++ b/frontend/src/pages/dashboard/question/QuestionAnswerSkeleton.tsx
@@ -0,0 +1,38 @@
+import Skeleton from "react-loading-skeleton";
+import React from "react";
+
+export default function QuestionAnswerSkeleton(props: { count?: number }) {
+	const { count = 1 } = props;
+	const skeletonArray = Array.from({ length: count });
+	
+	return skeletonArray.map((_, i) => {
+		return <div className={ "container transparent question-answer" } key={ i }>
+			<div className={ "question-answer-author" }>
+				<Skeleton height={ 40 } width={ 40 }/>
+				
+				<p>
+					<Skeleton height={ 20 } width={ 100 }/>
+				</p>
+				
+				<span className={ "caption" }><Skeleton width={ 60 }/></span>
+			</div>
+			
+			<div className={ "question-answer-text" }>
+				<div className={ "glass" }>
+					<p>
+						<Skeleton count={ 3 }/>
+					</p>
+				</div>
+				
+				<div className={ "question-answer-actions" }>
+					<Skeleton height={ 20 } width={ 100 }/>
+					<Skeleton height={ 20 } width={ 100 }/>
+					
+					<div style={ { flex: 1 } }/>
+					
+					<Skeleton height={ 20 } width={ 200 }/>
+				</div>
+			</div>
+		</div>
+	})
+}
diff --git a/frontend/src/pages/dashboard/question/QuestionView.tsx b/frontend/src/pages/dashboard/question/QuestionView.tsx
index 877fffde..38fd99a8 100644
--- a/frontend/src/pages/dashboard/question/QuestionView.tsx
+++ b/frontend/src/pages/dashboard/question/QuestionView.tsx
@@ -13,6 +13,7 @@ import { useAlert } from "react-alert";
 import { axiosError } from "../../../def/axios-error";
 import NoContent from "../../../components/NoContent";
 import QuestionStats from "./QuestionStats";
+import QuestionAnswerSkeleton from "./QuestionAnswerSkeleton";
 
 /**
  * Renders the question page
@@ -147,37 +148,6 @@ export default function QuestionView() {
 		</div>
 	}
 	
-	const renderAnswerSkeleton = () => {
-		return <div className={ "container transparent question-answer" }>
-			<div className={ "question-answer-author" }>
-				<Skeleton height={ 40 } width={ 40 }/>
-				
-				<p>
-					<Skeleton height={ 20 } width={ 100 }/>
-				</p>
-				
-				<span className={ "caption" }><Skeleton width={ 60 }/></span>
-			</div>
-			
-			<div className={ "question-answer-text" }>
-				<div className={ "glass" }>
-					<p>
-						<Skeleton count={ 3 }/>
-					</p>
-				</div>
-				
-				<div className={ "question-answer-actions" }>
-					<Skeleton height={ 20 } width={ 100 }/>
-					<Skeleton height={ 20 } width={ 100 }/>
-					
-					<div style={ { flex: 1 } }/>
-					
-					<Skeleton height={ 20 } width={ 200 }/>
-				</div>
-			</div>
-		</div>
-	}
-	
 	return <SplitSection className={ "question-main" }>
 		<div style={ { display: "flex", flexDirection: "column", gap: "var(--spacing)", flexGrow: 1 } }>
 			<section className={ "glass question-content" }>
@@ -212,10 +182,7 @@ export default function QuestionView() {
 				? answers.length > 0
 					? answers.map((answer, index) => renderAnswer(answer, index))
 					: <NoContent/>
-				: <>
-					{ renderAnswerSkeleton() }
-					{ renderAnswerSkeleton() }
-				</> }
+				: <QuestionAnswerSkeleton count={ 2 }/> }
 			
 			<div style={ {
 				display: "flex",

From 1ba479a7cd4709adf612f8a99f130ff8604bbb75 Mon Sep 17 00:00:00 2001
From: Benjamin Loidl <benni@loidlnetz.de>
Date: Thu, 6 Jun 2024 10:04:24 +0200
Subject: [PATCH 12/18] FE: Extracting QuestionAnswer from QuestionView

---
 .../questionpreview/QuestionAnswer.tsx        | 64 ++++++++++++++++++
 .../pages/dashboard/question/QuestionView.tsx | 65 +------------------
 2 files changed, 66 insertions(+), 63 deletions(-)
 create mode 100644 frontend/src/components/questionpreview/QuestionAnswer.tsx

diff --git a/frontend/src/components/questionpreview/QuestionAnswer.tsx b/frontend/src/components/questionpreview/QuestionAnswer.tsx
new file mode 100644
index 00000000..82e97aea
--- /dev/null
+++ b/frontend/src/components/questionpreview/QuestionAnswer.tsx
@@ -0,0 +1,64 @@
+import { Answer } from "../../def/Question";
+import React from "react";
+
+export default function QuestionAnswer(props: { answer: Answer, index: number }) {
+	return <div key={ props.index } className={ "container transparent question-answer" }>
+		<div className={ "question-answer-author" }
+			 style={ {
+				 paddingTop: props.answer.author.type === "ai" ? "var(--spacing)" : 0,
+				 paddingInline: props.answer.author.type === "ai" ? "var(--spacing)" : 0
+			 } }>
+			{ props.answer.author.type === "ai" ? <>
+				<i className={ "fi fi-sr-brain" }
+				   style={ {
+					   fontSize: "2em",
+					   height: "auto",
+					   color: "var(--primary-color)",
+					   filter: "drop-shadow(0 0 5px rgba(0, 0, 0, 0.2))"
+				   } }/>
+				
+				<p style={ { paddingTop: "calc(var(--spacing) * 0.5)" } }>
+					<span>Simp</span>
+				</p>
+			</> : <div className={ "question-answer-author-user" } tabIndex={ 0 }>
+				<img className={ "avatar" } src={ props.answer.author.id } alt={ "Answer Author" }/>
+				
+				<p>
+					<span>{ props.answer.author.name }</span>
+					<span className={ "badge" }>{ props.answer.author.type.toUpperCase() }</span>
+				</p>
+			</div> }
+			
+			<span className={ "caption" }>replied { props.answer.created }</span>
+		</div>
+		
+		<div className={ "question-answer-text" }>
+			<div className={ "glass" + (props.answer.author.type === "ai" ? " glass-simp" : "") }>
+				<p>{ props.answer.content }</p>
+			</div>
+			
+			<div className={ "question-answer-actions" }>
+				<div
+					className={ "question-answer-actions-rate" + (props.answer.opinion === "like" ? " rating" : "") }>
+					<i className={ "fi fi-rr-social-network primary-icon" } tabIndex={ 0 }/>
+					<span className={ "question-figure" }>{ props.answer.likes }</span>
+					<span className={ "question-unit" }>likes</span>
+				</div>
+				
+				<div
+					className={ "question-answer-actions-rate" + (props.answer.opinion === "dislike" ? " rating" : "") }>
+					<i className={ "fi fi-rr-social-network flipY primary-icon" } tabIndex={ 0 }/>
+					<span className={ "question-figure" }>{ props.answer.dislikes }</span>
+					<span className={ "question-unit" }>dislikes</span>
+				</div>
+				
+				<div style={ { flex: 1 } }/>
+				
+				<button className={ "question-report" }>
+					<i className={ "fi fi-rr-flag" }/>
+					Report answer
+				</button>
+			</div>
+		</div>
+	</div>
+}
diff --git a/frontend/src/pages/dashboard/question/QuestionView.tsx b/frontend/src/pages/dashboard/question/QuestionView.tsx
index 38fd99a8..d14b787d 100644
--- a/frontend/src/pages/dashboard/question/QuestionView.tsx
+++ b/frontend/src/pages/dashboard/question/QuestionView.tsx
@@ -14,6 +14,7 @@ import { axiosError } from "../../../def/axios-error";
 import NoContent from "../../../components/NoContent";
 import QuestionStats from "./QuestionStats";
 import QuestionAnswerSkeleton from "./QuestionAnswerSkeleton";
+import QuestionAnswer from "../../../components/questionpreview/QuestionAnswer";
 
 /**
  * Renders the question page
@@ -86,68 +87,6 @@ export default function QuestionView() {
 		}
 	}
 	
-	const renderAnswer = (answer: Answer, index: number) => {
-		return <div key={ index } className={ "container transparent question-answer" }>
-			<div className={ "question-answer-author" }
-				 style={ {
-					 paddingTop: answer.author.type === "ai" ? "var(--spacing)" : 0,
-					 paddingInline: answer.author.type === "ai" ? "var(--spacing)" : 0
-				 } }>
-				{ answer.author.type === "ai" ? <>
-					<i className={ "fi fi-sr-brain" }
-					   style={ {
-						   fontSize: "2em",
-						   height: "auto",
-						   color: "var(--primary-color)",
-						   filter: "drop-shadow(0 0 5px rgba(0, 0, 0, 0.2))"
-					   } }/>
-					
-					<p style={ { paddingTop: "calc(var(--spacing) * 0.5)" } }>
-						<span>Simp</span>
-					</p>
-				</> : <div className={ "question-answer-author-user" } tabIndex={ 0 }>
-					<img className={ "avatar" } src={ answer.author.id } alt={ "Answer Author" }/>
-					
-					<p>
-						<span>{ answer.author.name }</span>
-						<span className={ "badge" }>{ answer.author.type.toUpperCase() }</span>
-					</p>
-				</div> }
-				
-				<span className={ "caption" }>replied { answer.created }</span>
-			</div>
-			
-			<div className={ "question-answer-text" }>
-				<div className={ "glass" + (answer.author.type === "ai" ? " glass-simp" : "") }>
-					<p>{ answer.content }</p>
-				</div>
-				
-				<div className={ "question-answer-actions" }>
-					<div
-						className={ "question-answer-actions-rate" + (answer.opinion === "like" ? " rating" : "") }>
-						<i className={ "fi fi-rr-social-network primary-icon" } tabIndex={ 0 }/>
-						<span className={ "question-figure" }>{ answer.likes }</span>
-						<span className={ "question-unit" }>likes</span>
-					</div>
-					
-					<div
-						className={ "question-answer-actions-rate" + (answer.opinion === "dislike" ? " rating" : "") }>
-						<i className={ "fi fi-rr-social-network flipY primary-icon" } tabIndex={ 0 }/>
-						<span className={ "question-figure" }>{ answer.dislikes }</span>
-						<span className={ "question-unit" }>dislikes</span>
-					</div>
-					
-					<div style={ { flex: 1 } }/>
-					
-					<button className={ "question-report" }>
-						<i className={ "fi fi-rr-flag" }/>
-						Report answer
-					</button>
-				</div>
-			</div>
-		</div>
-	}
-	
 	return <SplitSection className={ "question-main" }>
 		<div style={ { display: "flex", flexDirection: "column", gap: "var(--spacing)", flexGrow: 1 } }>
 			<section className={ "glass question-content" }>
@@ -180,7 +119,7 @@ export default function QuestionView() {
 			
 			{ !answersLoading
 				? answers.length > 0
-					? answers.map((answer, index) => renderAnswer(answer, index))
+					? answers.map((answer, index) => <QuestionAnswer answer={ answer } index={ index }/>)
 					: <NoContent/>
 				: <QuestionAnswerSkeleton count={ 2 }/> }
 			

From 43c5f4a80edd536ce92d67374ce1a1ec0eafec4c Mon Sep 17 00:00:00 2001
From: Benjamin Loidl <benni@loidlnetz.de>
Date: Thu, 6 Jun 2024 10:05:56 +0200
Subject: [PATCH 13/18] FE: Updating Comments

---
 frontend/src/components/questionpreview/QuestionAnswer.tsx    | 4 ++++
 .../src/pages/dashboard/question/QuestionAnswerSkeleton.tsx   | 4 ++++
 2 files changed, 8 insertions(+)

diff --git a/frontend/src/components/questionpreview/QuestionAnswer.tsx b/frontend/src/components/questionpreview/QuestionAnswer.tsx
index 82e97aea..2c7a232c 100644
--- a/frontend/src/components/questionpreview/QuestionAnswer.tsx
+++ b/frontend/src/components/questionpreview/QuestionAnswer.tsx
@@ -1,6 +1,10 @@
 import { Answer } from "../../def/Question";
 import React from "react";
 
+/**
+ * Renders an answer to be displayed in QuestionView
+ * @param props holds the answer and an index
+ */
 export default function QuestionAnswer(props: { answer: Answer, index: number }) {
 	return <div key={ props.index } className={ "container transparent question-answer" }>
 		<div className={ "question-answer-author" }
diff --git a/frontend/src/pages/dashboard/question/QuestionAnswerSkeleton.tsx b/frontend/src/pages/dashboard/question/QuestionAnswerSkeleton.tsx
index a57cdd94..7d41aed4 100644
--- a/frontend/src/pages/dashboard/question/QuestionAnswerSkeleton.tsx
+++ b/frontend/src/pages/dashboard/question/QuestionAnswerSkeleton.tsx
@@ -1,6 +1,10 @@
 import Skeleton from "react-loading-skeleton";
 import React from "react";
 
+/**
+ * Displays the skeleton for QuestionAnswer while the data is being fetched
+ * @param props optional count of how many skeletons should be displayed
+ */
 export default function QuestionAnswerSkeleton(props: { count?: number }) {
 	const { count = 1 } = props;
 	const skeletonArray = Array.from({ length: count });

From 9b5210ea2e87210a50b6bccada30c929f6d29d28 Mon Sep 17 00:00:00 2001
From: Benjamin Loidl <benni@loidlnetz.de>
Date: Thu, 6 Jun 2024 10:36:10 +0200
Subject: [PATCH 14/18] FE: Creating Avatar Component

---
 frontend/src/components/avatar/Avatar.scss           |  8 ++++++++
 frontend/src/components/avatar/Avatar.tsx            | 12 ++++++++++++
 .../components/questionpreview/QuestionAnswer.tsx    |  3 ++-
 .../components/questionpreview/QuestionPreview.tsx   |  3 ++-
 frontend/src/index.scss                              |  9 ---------
 frontend/src/pages/dashboard/Dashboard.tsx           |  9 ++-------
 .../src/pages/dashboard/question/QuestionView.tsx    |  3 ++-
 7 files changed, 28 insertions(+), 19 deletions(-)
 create mode 100644 frontend/src/components/avatar/Avatar.scss
 create mode 100644 frontend/src/components/avatar/Avatar.tsx

diff --git a/frontend/src/components/avatar/Avatar.scss b/frontend/src/components/avatar/Avatar.scss
new file mode 100644
index 00000000..c87b1b74
--- /dev/null
+++ b/frontend/src/components/avatar/Avatar.scss
@@ -0,0 +1,8 @@
+.avatar {
+	border-radius: 50%;
+	filter: drop-shadow(0 0 2px rgba(0, 0, 0, 0.5));
+	height: 40px !important;
+	object-fit: cover;
+	pointer-events: none;
+	width: 40px !important;
+}
diff --git a/frontend/src/components/avatar/Avatar.tsx b/frontend/src/components/avatar/Avatar.tsx
new file mode 100644
index 00000000..96647770
--- /dev/null
+++ b/frontend/src/components/avatar/Avatar.tsx
@@ -0,0 +1,12 @@
+import "./Avatar.scss";
+import React from "react";
+
+export default function Avatar(props: { userId?: string }) {
+	return <img className={ "avatar" }
+				src={ "" }
+				alt={ "Avatar" }
+				onError={ ({ currentTarget }) => {
+					currentTarget.onerror = null; // prevents looping
+					currentTarget.src = "https://www.gravatar.com/avatar/205e460b479e2e5b48aec07710c08d50";
+				} }/>
+}
diff --git a/frontend/src/components/questionpreview/QuestionAnswer.tsx b/frontend/src/components/questionpreview/QuestionAnswer.tsx
index 2c7a232c..66291202 100644
--- a/frontend/src/components/questionpreview/QuestionAnswer.tsx
+++ b/frontend/src/components/questionpreview/QuestionAnswer.tsx
@@ -1,5 +1,6 @@
 import { Answer } from "../../def/Question";
 import React from "react";
+import Avatar from "../avatar/Avatar";
 
 /**
  * Renders an answer to be displayed in QuestionView
@@ -25,7 +26,7 @@ export default function QuestionAnswer(props: { answer: Answer, index: number })
 					<span>Simp</span>
 				</p>
 			</> : <div className={ "question-answer-author-user" } tabIndex={ 0 }>
-				<img className={ "avatar" } src={ props.answer.author.id } alt={ "Answer Author" }/>
+				<Avatar userId={ props.answer.author.id }/>
 				
 				<p>
 					<span>{ props.answer.author.name }</span>
diff --git a/frontend/src/components/questionpreview/QuestionPreview.tsx b/frontend/src/components/questionpreview/QuestionPreview.tsx
index 618c40ed..0ef13421 100644
--- a/frontend/src/components/questionpreview/QuestionPreview.tsx
+++ b/frontend/src/components/questionpreview/QuestionPreview.tsx
@@ -2,6 +2,7 @@ import "./QuestionPreview.scss";
 import React from "react";
 import { useNavigate } from "react-router-dom";
 import { Question } from "../../def/Question";
+import Avatar from "../avatar/Avatar";
 
 interface Props {
 	question: Question;
@@ -96,7 +97,7 @@ export default function QuestionPreview(props: Props) {
 			</div>
 			
 			<div className={ "author" }>
-				<img className={ "avatar" } src={ "https://www.w3schools.com/w3images/avatar2.png" } alt={ "Avatar" }/>
+				<Avatar userId={ props.question.author.id }/>
 				<p style={ { margin: 0, display: "flex", flexDirection: "column" } }>
 					<span className={ "caption" }>Asked by</span>
 					<span>{ props.question.author.name.substring(0, import.meta.env.VITE_AUTHOR_NAME_MAX_LENGTH) }</span>
diff --git a/frontend/src/index.scss b/frontend/src/index.scss
index 8f153808..0316a0b1 100644
--- a/frontend/src/index.scss
+++ b/frontend/src/index.scss
@@ -95,15 +95,6 @@ code {
 	}
 }
 
-.avatar {
-	border-radius: 50%;
-	filter: drop-shadow(0 0 2px rgba(0, 0, 0, 0.5));
-	height: 40px !important;
-	object-fit: cover;
-	pointer-events: none;
-	width: 40px !important;
-}
-
 ::selection {
 	background-color: var(--primary-color);
 	color: var(--primary-color-contrast);
diff --git a/frontend/src/pages/dashboard/Dashboard.tsx b/frontend/src/pages/dashboard/Dashboard.tsx
index b0449a5e..6c3d37bd 100644
--- a/frontend/src/pages/dashboard/Dashboard.tsx
+++ b/frontend/src/pages/dashboard/Dashboard.tsx
@@ -14,6 +14,7 @@ import Skeleton from "react-loading-skeleton";
 import Search from "../../components/search/Search";
 import { axiosError } from "../../def/axios-error";
 import { useAlert } from "react-alert";
+import Avatar from "../../components/avatar/Avatar";
 
 // ory setup
 const basePath = "http://localhost:4000"
@@ -168,13 +169,7 @@ export default function Dashboard(props: Props) {
 			boxShadow: "var(--box-shadow)"
 		} }
 									   tabIndex={ 0 }>
-			<img className={ "avatar" }
-				 src={ session !== undefined ? "https://benniloidl.de/static/media/me.6c5597f7d72f68a1e83c.jpeg" : "" }
-				 alt={ "Avatar" }
-				 onError={ ({ currentTarget }) => {
-					 currentTarget.onerror = null; // prevents looping
-					 currentTarget.src = "https://www.gravatar.com/avatar/205e460b479e2e5b48aec07710c08d50";
-				 } }/>
+			<Avatar userId={ session?.identity?.id }/>
 		</div> }
 						 items={ [
 							 {
diff --git a/frontend/src/pages/dashboard/question/QuestionView.tsx b/frontend/src/pages/dashboard/question/QuestionView.tsx
index d14b787d..133ea8db 100644
--- a/frontend/src/pages/dashboard/question/QuestionView.tsx
+++ b/frontend/src/pages/dashboard/question/QuestionView.tsx
@@ -15,6 +15,7 @@ import NoContent from "../../../components/NoContent";
 import QuestionStats from "./QuestionStats";
 import QuestionAnswerSkeleton from "./QuestionAnswerSkeleton";
 import QuestionAnswer from "../../../components/questionpreview/QuestionAnswer";
+import Avatar from "../../../components/avatar/Avatar";
 
 /**
  * Renders the question page
@@ -147,7 +148,7 @@ export default function QuestionView() {
 			<section className={ "glass" }>
 				<div className={ "question-author" } tabIndex={ 0 }>
 					{ question
-						? <img className={ "avatar" } src={ question.author.id } alt={ "Question Author" }/>
+						? <Avatar userId={ question.author.id }/>
 						: <Skeleton height={ 40 } width={ 40 }/> }
 					
 					<div className={ "question-author-info" }>

From fb6f151b38a0910ff7930c9f5e0f3a3563a30a21 Mon Sep 17 00:00:00 2001
From: Benjamin Loidl <benni@loidlnetz.de>
Date: Fri, 7 Jun 2024 00:23:46 +0200
Subject: [PATCH 15/18] FE: Making Buttons look way cooler!

And fixing some styling issues
---
 frontend/src/components/button/Button.scss    |  4 --
 frontend/src/components/button/Button.tsx     | 11 +++-
 .../src/components/dropdown/Dropdown.scss     |  7 +--
 frontend/src/components/dropdown/Dropdown.tsx |  7 ++-
 frontend/src/def/cool-blobs.ts                | 30 ++++++++++
 frontend/src/index.scss                       | 20 +++++++
 frontend/src/pages/dashboard/Dashboard.scss   |  2 +-
 frontend/src/pages/dashboard/Dashboard.tsx    | 58 ++++++++++++-------
 frontend/src/pages/home/Home.tsx              |  6 +-
 frontend/src/pages/home/Login.scss            |  2 +-
 frontend/src/pages/home/Login.tsx             | 13 ++---
 11 files changed, 112 insertions(+), 48 deletions(-)
 create mode 100644 frontend/src/def/cool-blobs.ts

diff --git a/frontend/src/components/button/Button.scss b/frontend/src/components/button/Button.scss
index e13ffa54..6de3423f 100644
--- a/frontend/src/components/button/Button.scss
+++ b/frontend/src/components/button/Button.scss
@@ -23,10 +23,6 @@
 		overflow: hidden;
 		position: relative;
 
-		* {
-			z-index: 10;
-		}
-
 		&::before {
 			animation: rotate 2s infinite linear;
 			background-color: transparent;
diff --git a/frontend/src/components/button/Button.tsx b/frontend/src/components/button/Button.tsx
index 11121e79..7e2257dd 100644
--- a/frontend/src/components/button/Button.tsx
+++ b/frontend/src/components/button/Button.tsx
@@ -1,5 +1,6 @@
 import React from "react";
 import "./Button.scss";
+import { animateBlob } from "../../def/cool-blobs";
 
 interface Props {
 	buttonStyle?: "primary" | "glass",
@@ -7,7 +8,8 @@ interface Props {
 	onClick?: () => Promise<void>,
 	children?: React.ReactNode,
 	disabled?: boolean,
-	placeIconRight?: boolean
+	placeIconRight?: boolean,
+	type?: "button" | "reset" | "submit"
 }
 
 /**
@@ -24,8 +26,11 @@ export default function Button(props: Props) {
 	
 	return (
 		<button className={ "btn btn-" + (props.buttonStyle ?? "glass") }
+				type={ props.type }
 				disabled={ props.disabled || isLoading }
-				onClick={ async () => {
+				onClick={ async (e) => {
+					animateBlob(e);
+					
 					if (!props.onClick) return;
 					if (isLoading) return;
 					
@@ -39,6 +44,8 @@ export default function Button(props: Props) {
 			<span>{ props.children }</span>
 			{ props.icon && props.placeIconRight && <i className={ isLoading ? "fi fi-rr-spinner spin" : props.icon }
                                                        style={ { marginLeft: "var(--spacing)" } }/> }
+			
+			<span className={ "button-blob" }/>
 		</button>
 	);
 }
diff --git a/frontend/src/components/dropdown/Dropdown.scss b/frontend/src/components/dropdown/Dropdown.scss
index d0ae8a2e..8dd26581 100644
--- a/frontend/src/components/dropdown/Dropdown.scss
+++ b/frontend/src/components/dropdown/Dropdown.scss
@@ -98,6 +98,7 @@
 			border: none;
 			cursor: pointer;
 			display: flex;
+			gap: var(--spacing);
 			padding: var(--spacing);
 			width: 100%;
 
@@ -113,18 +114,12 @@
 			}
 
 			> i:first-child {
-				margin-inline-end: var(--spacing);
 				text-align: center;
 				width: 20px;
 			}
 
-			> i:last-child {
-				margin-inline-start: var(--spacing);
-			}
-
 			> span:first-of-type {
 				flex: 1;
-				padding-inline-end: calc(var(--spacing) * 2);
 			}
 
 			.shortcut {
diff --git a/frontend/src/components/dropdown/Dropdown.tsx b/frontend/src/components/dropdown/Dropdown.tsx
index 97c93fcb..88b9799f 100644
--- a/frontend/src/components/dropdown/Dropdown.tsx
+++ b/frontend/src/components/dropdown/Dropdown.tsx
@@ -1,5 +1,6 @@
 import React from "react";
 import "./Dropdown.scss";
+import { animateBlob } from "../../def/cool-blobs";
 
 interface Item {
 	label: string,
@@ -60,7 +61,9 @@ export default function Dropdown(props: {
 				{ item.header && <div className={ "dropdown-menu-header" }>{ item.header }</div> }
 				
 				<button className={ "dropdown-menu-item" }
-						onClick={ () => {
+						onClick={ (e) => {
+							animateBlob(e);
+							
 							setItems(items.map(i => {
 								return {
 									...i,
@@ -79,6 +82,8 @@ export default function Dropdown(props: {
 					
 					{ (item.items && item.items.length > 0) &&
                         <i className={ "fi fi-rr-angle-down" + (item.expanded ? " expanded" : "") }/> }
+					
+					<span className={ "button-blob" }/>
 				</button>
 				
 				{ item.expanded && item.items && item.items.length > 0 && renderItems(item.items, level + 1,
diff --git a/frontend/src/def/cool-blobs.ts b/frontend/src/def/cool-blobs.ts
new file mode 100644
index 00000000..df087753
--- /dev/null
+++ b/frontend/src/def/cool-blobs.ts
@@ -0,0 +1,30 @@
+import React from "react";
+
+export const animateBlob = (e: React.MouseEvent) => {
+	const _blob = e.currentTarget.querySelector("span.button-blob");
+	if (!_blob) return;
+	let blob = _blob as HTMLElement;
+	
+	let buttonRect = e.currentTarget.getBoundingClientRect();
+	let docEl = document.documentElement;
+	let left = buttonRect.left + (window.pageXOffset || docEl.scrollLeft || 0);
+	
+	let x = e.clientX - left;
+	
+	const fromLeftLimit = 30;
+	const fromRightLimit = (buttonRect.width - fromLeftLimit);
+	let fromX = x < fromLeftLimit ? fromLeftLimit : x > fromRightLimit ? fromRightLimit : x;
+	
+	const toLeftLimit = 60;
+	const toRightLimit = (buttonRect.width - toLeftLimit);
+	let toX = x < toLeftLimit ? toLeftLimit : x > toRightLimit ? toRightLimit : x;
+	
+	blob.animate([
+		{ opacity: 1, width: "60px", height: "80%", top: "10%", transform: "translateX(calc(" + fromX + "px - 50%))" },
+		{ opacity: 0, width: "120px", height: "100%", top: 0, transform: "translateX(calc(" + toX + "px - 50%))" }
+	], {
+		duration: 400,
+		fill: "forwards",
+		easing: "ease"
+	});
+}
diff --git a/frontend/src/index.scss b/frontend/src/index.scss
index 0316a0b1..c0cb036c 100644
--- a/frontend/src/index.scss
+++ b/frontend/src/index.scss
@@ -250,3 +250,23 @@ hr {
 		color: var(--primary-color-contrast);
 	}
 }
+
+*:has(> span.button-blob) {
+	position: relative;
+
+	* {
+		z-index: 10;
+	}
+
+	span.button-blob {
+		position: absolute;
+		height: 100%;
+		width: 60px;
+		top: 0;
+		left: 0;
+		border-radius: var(--border-radius);
+		background: var(--border-color);
+		z-index: 1;
+		opacity: 0;
+	}
+}
diff --git a/frontend/src/pages/dashboard/Dashboard.scss b/frontend/src/pages/dashboard/Dashboard.scss
index defc6a4e..e6550a17 100644
--- a/frontend/src/pages/dashboard/Dashboard.scss
+++ b/frontend/src/pages/dashboard/Dashboard.scss
@@ -30,7 +30,7 @@
 			justify-content: center;
 		}
 
-		a {
+		a.navigate {
 			align-items: center;
 			border-radius: var(--border-radius) 0 0 var(--border-radius);
 			color: inherit;
diff --git a/frontend/src/pages/dashboard/Dashboard.tsx b/frontend/src/pages/dashboard/Dashboard.tsx
index 6c3d37bd..3d7df36b 100644
--- a/frontend/src/pages/dashboard/Dashboard.tsx
+++ b/frontend/src/pages/dashboard/Dashboard.tsx
@@ -15,6 +15,7 @@ import Search from "../../components/search/Search";
 import { axiosError } from "../../def/axios-error";
 import { useAlert } from "react-alert";
 import Avatar from "../../components/avatar/Avatar";
+import { animateBlob } from "../../def/cool-blobs";
 
 // ory setup
 const basePath = "http://localhost:4000"
@@ -256,14 +257,21 @@ export default function Dashboard(props: Props) {
 	
 	return <div className={ "dashboard" }>
 		<nav>
-			<div style={ { position: "relative" } }>
-				<button className={ "btn btn-primary" }
-						style={ { outlineColor: "var(--primary-color-contrast)" } }
-						onClick={ () => navigate("/") }>
+			<div style={ { position: "relative", overflow: "hidden" } }>
+				<NavLink to={ "/" }
+						 style={ {
+							 maxHeight: "80%",
+							 maxWidth: "80%",
+							 outlineColor: "var(--primary-color-contrast)",
+							 borderRadius: "var(--border-radius)",
+							 display: "grid",
+							 placeItems: "center"
+						 } }>
 					<img src={ logoTodoMakeStatic } alt={ "Logo" }
-						 height={ "100%" } width={ "100%" }
+						 height={ "80%" } width={ "80%" }
 						 style={ { objectFit: "contain" } }/>
-				</button>
+				</NavLink>
+				
 				<i className={ "fi fi-rr-circle-xmark toggle-nav" }
 				   style={ {
 					   fontSize: "1.5em",
@@ -289,12 +297,13 @@ export default function Dashboard(props: Props) {
 			</div>
 			
 			{ window.location.pathname.includes("/question") && <>
-                <NavLink to={ "question/1" }>
+                <NavLink to={ "question/1" } className={ "navigate" } onClick={ (e) => animateBlob(e) }>
                     <i className={ "fi fi-sr-question-square" }/>
                     <p style={ { display: "flex", flexDirection: "column" } }>
                         <span className={ "caption" }>{ t('dashboard.nav.question.browsing') }</span>
                         <span>{ activeQuestionName ?? <Skeleton/> }</span>
                     </p>
+                    <span className={ "button-blob" }/>
                 </NavLink>
                 
                 <div style={ { paddingInline: "var(--spacing)" } }>
@@ -302,46 +311,53 @@ export default function Dashboard(props: Props) {
                 </div>
             </> }
 			
-			<NavLink to={ "trending" }>
+			<NavLink to={ "trending" } className={ "navigate" } onClick={ (e) => animateBlob(e) }>
 				{ ({ isActive }) => <>
 					<i className={ "fi fi-" + (isActive ? "s" : "r") + "r-file-chart-line" }/>
-					{ t('dashboard.nav.trending') }
+					<span>{ t('dashboard.nav.trending') }</span>
+					<span className={ "button-blob" }/>
 				</> }
 			</NavLink>
-			<NavLink to={ "new" }>
+			<NavLink to={ "new" } className={ "navigate" } onClick={ (e) => animateBlob(e) }>
 				{ ({ isActive }) => <>
 					<i className={ "fi fi-" + (isActive ? "s" : "r") + "r-edit" }/>
-					{ t('dashboard.nav.question.create') }
+					<span>{ t('dashboard.nav.question.create') }</span>
+					<span className={ "button-blob" }/>
 				</> }
 			</NavLink>
-			<NavLink to={ "activity" }>
+			<NavLink to={ "activity" } className={ "navigate" } onClick={ (e) => animateBlob(e) }>
 				{ ({ isActive }) => <>
 					<i className={ "fi fi-" + (isActive ? "s" : "r") + "r-rectangle-vertical-history" }/>
-					{ t('dashboard.nav.activity') }
+					<span>{ t('dashboard.nav.activity') }</span>
+					<span className={ "button-blob" }/>
 				</> }
 			</NavLink>
-			<NavLink to={ "my" }>
+			<NavLink to={ "my" } className={ "navigate" } onClick={ (e) => animateBlob(e) }>
 				{ ({ isActive }) => <>
 					<i className={ "fi fi-" + (isActive ? "s" : "r") + "r-rectangle-list" }/>
-					{ t('dashboard.nav.my') }
+					<span>{ t('dashboard.nav.my') }</span>
+					<span className={ "button-blob" }/>
 				</> }
 			</NavLink>
-			<NavLink to={ "b" }>
+			<NavLink to={ "b" } className={ "navigate" } onClick={ (e) => animateBlob(e) }>
 				{ ({ isActive }) => <>
 					<i className={ "fi fi-" + (isActive ? "s" : "r") + "r-star" }/>
-					{ t('dashboard.nav.favorites') }
+					<span>{ t('dashboard.nav.favorites') }</span>
+					<span className={ "button-blob" }/>
 				</> }
 			</NavLink>
-			<NavLink to={ "quests" }>
+			<NavLink to={ "quests" } className={ "navigate" } onClick={ (e) => animateBlob(e) }>
 				{ ({ isActive }) => <>
 					<i className={ "fi fi-" + (isActive ? "s" : "r") + "r-treasure-chest" }/>
-					{ t('dashboard.nav.quests') }
+					<span>{ t('dashboard.nav.quests') }</span>
+					<span className={ "button-blob" }/>
 				</> }
 			</NavLink>
-			<NavLink to={ "d" }>
+			<NavLink to={ "d" } className={ "navigate" } onClick={ (e) => animateBlob(e) }>
 				{ ({ isActive }) => <>
 					<i className={ "fi fi-" + (isActive ? "s" : "r") + "r-envelope" }/>
-					{ t('dashboard.nav.inbox') }
+					<span>{ t('dashboard.nav.inbox') }</span>
+					<span className={ "button-blob" }/>
 					<span className={ "badge" }>3</span>
 				</> }
 			</NavLink>
diff --git a/frontend/src/pages/home/Home.tsx b/frontend/src/pages/home/Home.tsx
index ca59b810..dbb13076 100644
--- a/frontend/src/pages/home/Home.tsx
+++ b/frontend/src/pages/home/Home.tsx
@@ -140,9 +140,9 @@ export default function Home(props: { updateTheme: (theme: "system" | "dark" | "
 					<p className={ "page-summary fade-in" }>
 						We offer a wide range of features to help you with your daily tasks.
 					</p>
-					<button className={ "btn btn-primary fade-in" }>
-						<span>Try Yourself!</span>
-					</button>
+					<Button buttonStyle={ "primary" }>
+						Try Yourself!
+					</Button>
 					
 					<div className={ "cards" }>
 						<div className={ "card fade-in" }>
diff --git a/frontend/src/pages/home/Login.scss b/frontend/src/pages/home/Login.scss
index 7226265b..0aa98486 100644
--- a/frontend/src/pages/home/Login.scss
+++ b/frontend/src/pages/home/Login.scss
@@ -48,7 +48,7 @@
 			z-index: 0;
 		}
 
-		* {
+		> * {
 			z-index: 1;
 		}
 
diff --git a/frontend/src/pages/home/Login.tsx b/frontend/src/pages/home/Login.tsx
index d9b03256..afea684f 100644
--- a/frontend/src/pages/home/Login.tsx
+++ b/frontend/src/pages/home/Login.tsx
@@ -1,6 +1,7 @@
 import { Component } from "react";
 import "./Login.scss";
 import MacbookMockup from "../../images/macbook-mockup.png";
+import Button from "../../components/button/Button";
 
 export default class Login extends Component<{}, {}> {
 	render() {
@@ -28,7 +29,7 @@ export default class Login extends Component<{}, {}> {
 				<form>
 					<input type={ "email" } placeholder={ "john.doe@mail.com" } className={ "form-input" } required/>
 					
-					<button type={ "submit" } className={ "btn btn-primary" }><span>Continue</span></button>
+					<Button buttonStyle={ "primary" } type={ "submit" }>Continue</Button>
 				</form>
 				
 				<div className={ "form-divider" }>
@@ -38,14 +39,8 @@ export default class Login extends Component<{}, {}> {
 				</div>
 				
 				<div className={ "login-social" }>
-					<button className={ "btn btn-secondary" }>
-						<i className={ "fi fi-brands-apple" }/>
-						<span>Apple</span>
-					</button>
-					<button className={ "btn btn-secondary" }>
-						<i className={ "fi fi-brands-google" }/>
-						<span>Google</span>
-					</button>
+					<Button icon={ "fi fi-brands-apple" }>Apple</Button>
+					<Button icon={ "fi fi-brands-google" }>Google</Button>
 				</div>
 			</main>
 		</div>

From 1f4790362f66a79342057962a89e46464c36d8f8 Mon Sep 17 00:00:00 2001
From: Benjamin Loidl <benni@loidlnetz.de>
Date: Fri, 7 Jun 2024 00:28:02 +0200
Subject: [PATCH 16/18] FE: Fixing tests

---
 frontend/src/def/cool-blobs.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/frontend/src/def/cool-blobs.ts b/frontend/src/def/cool-blobs.ts
index df087753..4d023e96 100644
--- a/frontend/src/def/cool-blobs.ts
+++ b/frontend/src/def/cool-blobs.ts
@@ -19,7 +19,7 @@ export const animateBlob = (e: React.MouseEvent) => {
 	const toRightLimit = (buttonRect.width - toLeftLimit);
 	let toX = x < toLeftLimit ? toLeftLimit : x > toRightLimit ? toRightLimit : x;
 	
-	blob.animate([
+	if (blob.animate) blob.animate([
 		{ opacity: 1, width: "60px", height: "80%", top: "10%", transform: "translateX(calc(" + fromX + "px - 50%))" },
 		{ opacity: 0, width: "120px", height: "100%", top: 0, transform: "translateX(calc(" + toX + "px - 50%))" }
 	], {

From 4a9ef84baaf0781d7b6f7a270d24f16ce98ec065 Mon Sep 17 00:00:00 2001
From: Benjamin Loidl <benni@loidlnetz.de>
Date: Fri, 7 Jun 2024 00:48:51 +0200
Subject: [PATCH 17/18] FE: Updating Translation

---
 .../questionpreview/QuestionAnswer.tsx        | 47 +++++++++----------
 frontend/src/locales/en/translation.json      |  8 ++++
 .../pages/dashboard/question/Question.scss    | 10 ----
 3 files changed, 31 insertions(+), 34 deletions(-)

diff --git a/frontend/src/components/questionpreview/QuestionAnswer.tsx b/frontend/src/components/questionpreview/QuestionAnswer.tsx
index 66291202..7a1b0407 100644
--- a/frontend/src/components/questionpreview/QuestionAnswer.tsx
+++ b/frontend/src/components/questionpreview/QuestionAnswer.tsx
@@ -1,40 +1,39 @@
 import { Answer } from "../../def/Question";
 import React from "react";
 import Avatar from "../avatar/Avatar";
+import { useTranslation } from "react-i18next";
 
 /**
  * Renders an answer to be displayed in QuestionView
  * @param props holds the answer and an index
  */
 export default function QuestionAnswer(props: { answer: Answer, index: number }) {
+	const { t } = useTranslation();
+	
 	return <div key={ props.index } className={ "container transparent question-answer" }>
 		<div className={ "question-answer-author" }
 			 style={ {
 				 paddingTop: props.answer.author.type === "ai" ? "var(--spacing)" : 0,
 				 paddingInline: props.answer.author.type === "ai" ? "var(--spacing)" : 0
 			 } }>
-			{ props.answer.author.type === "ai" ? <>
-				<i className={ "fi fi-sr-brain" }
-				   style={ {
-					   fontSize: "2em",
-					   height: "auto",
-					   color: "var(--primary-color)",
-					   filter: "drop-shadow(0 0 5px rgba(0, 0, 0, 0.2))"
-				   } }/>
-				
-				<p style={ { paddingTop: "calc(var(--spacing) * 0.5)" } }>
-					<span>Simp</span>
-				</p>
-			</> : <div className={ "question-answer-author-user" } tabIndex={ 0 }>
-				<Avatar userId={ props.answer.author.id }/>
-				
-				<p>
-					<span>{ props.answer.author.name }</span>
-					<span className={ "badge" }>{ props.answer.author.type.toUpperCase() }</span>
-				</p>
-			</div> }
+			{ props.answer.author.type === "ai"
+				? <i className={ "fi fi-sr-brain" }
+					 style={ {
+						 fontSize: "2em",
+						 height: "auto",
+						 color: "var(--primary-color)",
+						 filter: "drop-shadow(0 0 5px rgba(0, 0, 0, 0.2))"
+					 } }/>
+				: <Avatar userId={ props.answer.author.id }/> }
+			
+			<p>
+				<span>{ props.answer.author.name }</span>
+				<span className={ "badge" }>{ props.answer.author.type.toUpperCase() }</span>
+			</p>
 			
-			<span className={ "caption" }>replied { props.answer.created }</span>
+			<span className={ "caption" }>
+				{ t('dashboard.questionView.answer.creationDate', { answerCreationDate: props.answer.created }) }
+			</span>
 		</div>
 		
 		<div className={ "question-answer-text" }>
@@ -47,21 +46,21 @@ export default function QuestionAnswer(props: { answer: Answer, index: number })
 					className={ "question-answer-actions-rate" + (props.answer.opinion === "like" ? " rating" : "") }>
 					<i className={ "fi fi-rr-social-network primary-icon" } tabIndex={ 0 }/>
 					<span className={ "question-figure" }>{ props.answer.likes }</span>
-					<span className={ "question-unit" }>likes</span>
+					<span className={ "question-unit" }>{ t('dashboard.questionView.answer.likes') }</span>
 				</div>
 				
 				<div
 					className={ "question-answer-actions-rate" + (props.answer.opinion === "dislike" ? " rating" : "") }>
 					<i className={ "fi fi-rr-social-network flipY primary-icon" } tabIndex={ 0 }/>
 					<span className={ "question-figure" }>{ props.answer.dislikes }</span>
-					<span className={ "question-unit" }>dislikes</span>
+					<span className={ "question-unit" }>{ t('dashboard.questionView.answer.dislikes') }</span>
 				</div>
 				
 				<div style={ { flex: 1 } }/>
 				
 				<button className={ "question-report" }>
 					<i className={ "fi fi-rr-flag" }/>
-					Report answer
+					{ t('dashboard.questionView.answer.report') }
 				</button>
 			</div>
 		</div>
diff --git a/frontend/src/locales/en/translation.json b/frontend/src/locales/en/translation.json
index dfd8db2d..1a0eb7c9 100644
--- a/frontend/src/locales/en/translation.json
+++ b/frontend/src/locales/en/translation.json
@@ -90,6 +90,14 @@
 				}
 			},
 			"submit": "Post your Question"
+		},
+		"questionView": {
+			"answer": {
+				"creationDate": "replied {{answerCreationDate}}",
+				"likes": "likes",
+				"dislikes": "dislikes",
+				"report": "Report answer"
+			}
 		}
 	}
 }
diff --git a/frontend/src/pages/dashboard/question/Question.scss b/frontend/src/pages/dashboard/question/Question.scss
index 5270e9b6..3ef43135 100644
--- a/frontend/src/pages/dashboard/question/Question.scss
+++ b/frontend/src/pages/dashboard/question/Question.scss
@@ -70,16 +70,6 @@
 			flex-direction: column;
 			padding: 0 0 var(--spacing) 0;
 
-			.question-answer-author-user {
-				align-items: center;
-				border-radius: var(--border-radius);
-				cursor: pointer;
-				display: flex;
-				flex-direction: column;
-				padding: var(--spacing) var(--spacing) 0 var(--spacing);
-				user-select: none;
-			}
-
 			p {
 				margin-bottom: calc(var(--spacing) / 2);
 				padding-top: calc(var(--spacing) / 2);

From 3b745fe96573536a5bddeddd0c0b59dec1d6f51e Mon Sep 17 00:00:00 2001
From: Benjamin Loidl <benni@loidlnetz.de>
Date: Fri, 7 Jun 2024 00:53:36 +0200
Subject: [PATCH 18/18] FE: Fixing Smart Nav

---
 frontend/src/pages/dashboard/Dashboard.tsx | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/frontend/src/pages/dashboard/Dashboard.tsx b/frontend/src/pages/dashboard/Dashboard.tsx
index 3d7df36b..28b3c513 100644
--- a/frontend/src/pages/dashboard/Dashboard.tsx
+++ b/frontend/src/pages/dashboard/Dashboard.tsx
@@ -297,7 +297,8 @@ export default function Dashboard(props: Props) {
 			</div>
 			
 			{ window.location.pathname.includes("/question") && <>
-                <NavLink to={ "question/1" } className={ "navigate" } onClick={ (e) => animateBlob(e) }>
+                <NavLink to={ window.location.pathname } className={ "active navigate" }
+                         onClick={ (e) => animateBlob(e) }>
                     <i className={ "fi fi-sr-question-square" }/>
                     <p style={ { display: "flex", flexDirection: "column" } }>
                         <span className={ "caption" }>{ t('dashboard.nav.question.browsing') }</span>