From dc3efd780bb74952c1b0cdb1273c0099f714dc10 Mon Sep 17 00:00:00 2001
From: Aleksandre <aleksandre.nozadze.1@iliauni.edu.ge>
Date: Sun, 24 Aug 2025 23:41:06 +0400
Subject: [PATCH 01/81] feat: Introduce Settings page

---
 src/Pages/settings.tsx | 9 +++++++++
 1 file changed, 9 insertions(+)
 create mode 100644 src/Pages/settings.tsx

diff --git a/src/Pages/settings.tsx b/src/Pages/settings.tsx
new file mode 100644
index 0000000..914046d
--- /dev/null
+++ b/src/Pages/settings.tsx
@@ -0,0 +1,9 @@
+const SettingsPage = () => {
+    return (
+        <div>
+            <h1>Settings</h1>
+        </div>
+    );
+};
+
+export default SettingsPage;

From 785acf874943dda4051124ea164801b2ed730e62 Mon Sep 17 00:00:00 2001
From: Aleksandre <aleksandre.nozadze.1@iliauni.edu.ge>
Date: Sun, 24 Aug 2025 23:41:06 +0400
Subject: [PATCH 02/81] refactor: Improve UserContext authentication handling
 and types

---
 src/Contexts/UserContext.tsx | 7 ++++---
 src/Types/types.ts           | 7 ++++++-
 2 files changed, 10 insertions(+), 4 deletions(-)

diff --git a/src/Contexts/UserContext.tsx b/src/Contexts/UserContext.tsx
index 3c20648..20ceb1a 100644
--- a/src/Contexts/UserContext.tsx
+++ b/src/Contexts/UserContext.tsx
@@ -8,7 +8,7 @@ import React, {
 import api from "../Services/apiService";
 import { Authenticate } from "../Services/authService";
 import { HandleErr } from "../Services/errorHandler";
-import { User, UserContextType } from "../Types/types";
+import { User, UserContextType, ValidationResponse } from "../Types/types";
 import { useError } from "./ErrorContext";
 import { useLoading } from "./LoadingContext";
 import { useNotification } from "./NotificationContext";
@@ -37,10 +37,11 @@ export const UserProvider: React.FC<{ children: ReactNode }> = ({
 
             try {
                 const data = await Authenticate();
+                console.log(data);
 
-                if (data.authenticated) {
+                if (data) {
                     setAuthenticated(true);
-                    setUser(data.user);
+                    setUser(data as User);
                     setNotification("Logged back in");
                 } else {
                     setUser(null);
diff --git a/src/Types/types.ts b/src/Types/types.ts
index c9e5f63..6152cbd 100644
--- a/src/Types/types.ts
+++ b/src/Types/types.ts
@@ -53,12 +53,17 @@ export interface LoginProps {
 }
 
 export interface User {
-    id: string;
+    id: string | null;
     email: string | null;
     username: string | null;
     type: string | null;
 }
 
+export interface ValidationResponse {
+    id: string | null;
+    email: string | null;
+}
+
 export interface UserContextType {
     user: User | null;
     authenticated: boolean;

From 4db316a83968cbd93ad8eee740047d5ffd47d2fc Mon Sep 17 00:00:00 2001
From: Aleksandre <aleksandre.nozadze.1@iliauni.edu.ge>
Date: Sun, 24 Aug 2025 23:41:06 +0400
Subject: [PATCH 03/81] style: Add horizontal padding to main content areas and
 minor layout cleanup

---
 src/Layouts/ChapterPageLayout.tsx | 3 ++-
 src/Layouts/HeroPageLayout.tsx    | 3 +--
 src/Layouts/NovelsPageLayout.tsx  | 5 ++---
 3 files changed, 5 insertions(+), 6 deletions(-)

diff --git a/src/Layouts/ChapterPageLayout.tsx b/src/Layouts/ChapterPageLayout.tsx
index 73a12d7..94ec1b1 100644
--- a/src/Layouts/ChapterPageLayout.tsx
+++ b/src/Layouts/ChapterPageLayout.tsx
@@ -1,4 +1,5 @@
 import { Outlet } from "react-router-dom";
+
 import Footer from "../Components/Footer";
 import Navbar from "../Components/Navbar";
 import ScrollButtons from "../Components/ScrollButtons";
@@ -7,7 +8,7 @@ const ChapterPageLayout = () => {
     return (
         <div className="chapter-page-layout">
             <Navbar />
-            <div className="w-full flex justify-center">
+            <div className="w-full px-8 flex justify-center">
                 <Outlet />
             </div>
             <ScrollButtons />
diff --git a/src/Layouts/HeroPageLayout.tsx b/src/Layouts/HeroPageLayout.tsx
index d47f3ee..0ddb4e5 100644
--- a/src/Layouts/HeroPageLayout.tsx
+++ b/src/Layouts/HeroPageLayout.tsx
@@ -1,6 +1,5 @@
 import { Outlet } from "react-router-dom";
 
-// Components
 import Navbar from "../Components/Navbar";
 import Footer from "../Components/Footer";
 
@@ -11,7 +10,7 @@ const HeroPageLayout = () => {
     return (
         <div className="hero-page-layout">
             <Navbar />
-            <div className="w-full h-full flex justify-center">
+            <div className="w-full px-8 flex justify-center">
                 <Outlet />
             </div>
             <Footer />
diff --git a/src/Layouts/NovelsPageLayout.tsx b/src/Layouts/NovelsPageLayout.tsx
index 1350194..4a710ef 100644
--- a/src/Layouts/NovelsPageLayout.tsx
+++ b/src/Layouts/NovelsPageLayout.tsx
@@ -1,14 +1,13 @@
 import { Outlet } from "react-router-dom";
 
-// Components
 import Navbar from "../Components/Navbar";
 import Footer from "../Components/Footer";
 
 const NovelsPageLayout = () => {
     return (
-        <div className="">
+        <div className="novels-page-layout">
             <Navbar />
-            <div className="w-full flex justify-center">
+            <div className="w-full px-8 flex justify-center">
                 <Outlet />
             </div>
             <Footer />

From d489ff267b48eea07f3a7cc61b1824265e6d351b Mon Sep 17 00:00:00 2001
From: Aleksandre <aleksandre.nozadze.1@iliauni.edu.ge>
Date: Sun, 24 Aug 2025 23:41:06 +0400
Subject: [PATCH 04/81] refactor(router): Improve 404 handling and add route
 comments

---
 src/App.tsx | 13 +++++++++++++
 1 file changed, 13 insertions(+)

diff --git a/src/App.tsx b/src/App.tsx
index 15c5859..24b5ac8 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -99,7 +99,18 @@ const RouterTransition = () => {
     return (
         <AnimatePresence mode="wait">
             <Routes location={location} key={location.pathname}>
+                <Route path="*" element={<HeroPageLayout />}>
+                    <Route
+                        index
+                        element={
+                            <PageAnimationWrapper>
+                                <NotFound />
+                            </PageAnimationWrapper>
+                        }
+                    />
+                </Route>
                 <Route path="/" element={<HeroPageLayout />}>
+                    {/* Main Page */}
                     <Route
                         index
                         element={
@@ -108,6 +119,7 @@ const RouterTransition = () => {
                             </PageAnimationWrapper>
                         }
                     />
+                    {/* 404 Page */}
                     <Route
                         path="*"
                         element={
@@ -116,6 +128,7 @@ const RouterTransition = () => {
                             </PageAnimationWrapper>
                         }
                     />
+
                     <Route
                         path="/about"
                         element={

From 44662e1f46df6a2ee96273aeb9005575ff4c61ca Mon Sep 17 00:00:00 2001
From: Aleksandre <aleksandre.nozadze.1@iliauni.edu.ge>
Date: Mon, 25 Aug 2025 23:48:11 +0400
Subject: [PATCH 05/81] Refactor: Simplify AuthGuard user authentication logic

---
 src/Components/AuthGuard.tsx | 6 +-----
 1 file changed, 1 insertion(+), 5 deletions(-)

diff --git a/src/Components/AuthGuard.tsx b/src/Components/AuthGuard.tsx
index d00222b..505cf79 100644
--- a/src/Components/AuthGuard.tsx
+++ b/src/Components/AuthGuard.tsx
@@ -31,11 +31,7 @@ export const RequireUser: React.FC<RequireAuthProps> = ({ children }) => {
             try {
                 const data = await Authenticate();
 
-                if (!data.authenticated) {
-                    return navigate("/login");
-                }
-
-                if (!data.user) {
+                if (!data) {
                     return navigate("/login");
                 }
             } catch (err) {

From 7399012a49a0e2efac92937d08a45a3ccd3d4998 Mon Sep 17 00:00:00 2001
From: Aleksandre <aleksandre.nozadze.1@iliauni.edu.ge>
Date: Mon, 25 Aug 2025 23:48:11 +0400
Subject: [PATCH 06/81] Chore: Add App-wide dependencies and new page component
 imports

---
 src/App.tsx | 11 +++++++++++
 1 file changed, 11 insertions(+)

diff --git a/src/App.tsx b/src/App.tsx
index 24b5ac8..7636ece 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -7,6 +7,12 @@ import {
 import { SpeedInsights } from "@vercel/speed-insights/react";
 import { AnimatePresence, motion } from "framer-motion";
 import { Analytics } from "@vercel/analytics/react";
+import { PageAnimationWrapper } from "./Components/PageAnimationWrapper";
+import { SWRConfig } from "swr";
+import { axiosFetcher } from "./Services/apiService";
+import { isAxiosError } from "axios";
+import { useCacheProvider } from "@piotr-cz/swr-idb-cache";
+import { useEffect } from "react";
 
 // Styles
 import "./App.css";
@@ -32,6 +38,11 @@ import Dashboard from "./Pages/Dashboard";
 import LoginPage from "./Pages/LoginPage";
 import RegisterPage from "./Pages/RegisterPage";
 import UploadPage from "./Pages/UploadPage";
+import SettingsPage from "./Pages/Settings";
+import EditNovelPage from "./Pages/EditNovelPage";
+import EditChapterPage from "./Pages/EditChapterPage";
+import UploadEPUBPage from "./Pages/UploadEPUBPage";
+import UploadNovelPage from "./Pages/UploadNovelPage";
 
 // Components
 import {

From d14dca662d4d50ac5eb2bfce7b684e12740359f6 Mon Sep 17 00:00:00 2001
From: Aleksandre <aleksandre.nozadze.1@iliauni.edu.ge>
Date: Mon, 25 Aug 2025 23:48:11 +0400
Subject: [PATCH 07/81] Feat: Implement user settings page

---
 src/Pages/Settings.tsx | 49 ++++++++++++++++++++++++++++++++++++++++++
 src/Pages/settings.tsx |  9 --------
 2 files changed, 49 insertions(+), 9 deletions(-)
 create mode 100644 src/Pages/Settings.tsx
 delete mode 100644 src/Pages/settings.tsx

diff --git a/src/Pages/Settings.tsx b/src/Pages/Settings.tsx
new file mode 100644
index 0000000..1edabe8
--- /dev/null
+++ b/src/Pages/Settings.tsx
@@ -0,0 +1,49 @@
+import { useUser } from "../Contexts/UserContext";
+
+const SettingsPage = () => {
+    const {
+        fontSize,
+        setFontSize,
+        colorScheme,
+        setColorScheme,
+        sortBy,
+        setSortBy,
+    } = useUser();
+
+    return (
+        <div
+            className={`h-full max-w-5xl px-4 sm:px-8 md:px-12 w-full flex flex-col justify-between items-center`}
+        >
+            <p className="text-2xl pb-28">Settings</p>
+            <div
+                className={`text-xl flex flex-row justify-between w-full h-full`}
+            >
+                <div>
+                    <p>Font Size</p>
+                    <select
+                        value={fontSize}
+                        onChange={(e) => setFontSize(e.target.value)}
+                    >
+                        <option value="xs">Small</option>
+                        <option value="lg">Medium</option>
+                        <option value="xl">Large</option>
+                    </select>
+
+                    <p className={`text-${fontSize}! `}>Example text...</p>
+                </div>
+                <div>
+                    <p>Font Family</p>
+                </div>
+                <div>
+                    <p>Color Scheme</p>
+                </div>
+                <div>
+                    <p>Caching</p>
+                    <p className="subtitle">Cannot disable!</p>
+                </div>
+            </div>
+        </div>
+    );
+};
+
+export default SettingsPage;
diff --git a/src/Pages/settings.tsx b/src/Pages/settings.tsx
deleted file mode 100644
index 914046d..0000000
--- a/src/Pages/settings.tsx
+++ /dev/null
@@ -1,9 +0,0 @@
-const SettingsPage = () => {
-    return (
-        <div>
-            <h1>Settings</h1>
-        </div>
-    );
-};
-
-export default SettingsPage;

From 8b86e60a69179d67b388635a0287e474e7ea0932 Mon Sep 17 00:00:00 2001
From: Aleksandre <aleksandre.nozadze.1@iliauni.edu.ge>
Date: Mon, 25 Aug 2025 23:48:11 +0400
Subject: [PATCH 08/81] Feat: Add Settings and Upload links to Navbar

---
 src/Components/Navbar.tsx | 21 +++++++++++++++++++--
 1 file changed, 19 insertions(+), 2 deletions(-)

diff --git a/src/Components/Navbar.tsx b/src/Components/Navbar.tsx
index aa446bc..1aac6a0 100644
--- a/src/Components/Navbar.tsx
+++ b/src/Components/Navbar.tsx
@@ -50,7 +50,11 @@ const Navbar = () => {
                         {!dropdown && (
                             <div className="hidden lg:flex items-center justify-between space-x-5">
                                 <PersistentStoragePermissionButton />
-                                <SettingsDropdown />
+                                {user && (
+                                    <Link to="/settings" className="link">
+                                        [Settings]
+                                    </Link>
+                                )}
 
                                 {user && (
                                     <Link
@@ -126,10 +130,23 @@ const Navbar = () => {
                             className={`${dropdown ? "text-xl w-fit flex flex-col flex-nowrap items-end pb-4 pt-2 px-2 pl-6 border-t border-zinc-800" : "hidden"}`}
                         >
                             <PersistentStoragePermissionButton />
-                            <SettingsDropdown />
+
+                            {user && (
+                                <Link to="/settings" className="link">
+                                    [Settings]
+                                </Link>
+                            )}
+
                             <Link to="/novels" className="link">
                                 [Novels]
                             </Link>
+
+                            {user && (
+                                <Link to="/dashboard/upload" className="link">
+                                    [Upload]
+                                </Link>
+                            )}
+
                             {user && user.type === "Admin" && (
                                 <Link to="/dashboard" className="link">
                                     [Dashboard]

From 8b2ad203a8f7cf2fe12d3c6c27140c7e4e322187 Mon Sep 17 00:00:00 2001
From: Aleksandre <aleksandre.nozadze.1@iliauni.edu.ge>
Date: Mon, 25 Aug 2025 23:48:12 +0400
Subject: [PATCH 09/81] Feat: Apply user's selected font size to ChapterPage
 content

---
 src/Pages/ChapterPage.tsx | 6 +++++-
 1 file changed, 5 insertions(+), 1 deletion(-)

diff --git a/src/Pages/ChapterPage.tsx b/src/Pages/ChapterPage.tsx
index 3da7e61..942f2ef 100644
--- a/src/Pages/ChapterPage.tsx
+++ b/src/Pages/ChapterPage.tsx
@@ -15,6 +15,8 @@ const ChapterPage = () => {
     const { id_novel } = useParams();
     const { id_chapter } = useParams();
 
+    const { fontSize } = useUser();
+
     const [isLeftPopoverOpen, setIsLeftPopoverOpen] = useState(false);
     const [isRightPopoverOpen, setIsRightPopoverOpen] = useState(false);
     const [isBackPopoverOpen, setIsBackPopoverOpen] = useState(false);
@@ -167,7 +169,9 @@ const ChapterPage = () => {
                         />
                     </div>
 
-                    <div className="w-full max-w-3xl mt-4 prose prose-lg font-sans text-lg leading-normal">
+                    <div
+                        className={`w-full max-w-3xl mt-4 prose prose-lg font-sans text-${fontSize ?? "lg"} leading-normal`}
+                    >
                         <ReactMarkdown
                             components={{
                                 p: ({ node, ...props }) => (

From 022a4cac725c27d5f5dc0879f3201767c59c5007 Mon Sep 17 00:00:00 2001
From: Aleksandre <aleksandre.nozadze.1@iliauni.edu.ge>
Date: Sun, 24 Aug 2025 23:41:06 +0400
Subject: [PATCH 10/81] feat: Introduce Settings page

---
 src/App.tsx            | 11 +++++++++++
 src/Pages/settings.tsx |  9 +++++++++
 2 files changed, 20 insertions(+)
 create mode 100644 src/Pages/settings.tsx

diff --git a/src/App.tsx b/src/App.tsx
index 7636ece..368468b 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -60,6 +60,7 @@ import { axiosFetcher } from "./Services/apiService";
 import { isAxiosError } from "axios";
 import { useCacheProvider } from "@piotr-cz/swr-idb-cache";
 import { useEffect } from "react";
+import SettingsPage from "./Pages/settings";
 
 function App() {
     const cacheProvider = useCacheProvider({
@@ -168,6 +169,16 @@ const RouterTransition = () => {
                             </PageAnimationWrapper>
                         }
                     />
+                    <Route
+                        path="/settings"
+                        element={
+                            <PageAnimationWrapper>
+                                <RequireUser>
+                                    <SettingsPage />
+                                </RequireUser>
+                            </PageAnimationWrapper>
+                        }
+                    />
                 </Route>
                 <Route path="/novels" element={<NovelsPageLayout />}>
                     <Route
diff --git a/src/Pages/settings.tsx b/src/Pages/settings.tsx
new file mode 100644
index 0000000..914046d
--- /dev/null
+++ b/src/Pages/settings.tsx
@@ -0,0 +1,9 @@
+const SettingsPage = () => {
+    return (
+        <div>
+            <h1>Settings</h1>
+        </div>
+    );
+};
+
+export default SettingsPage;

From 0a5058c654f72b7b6e3340b39c40b339dc7013dc Mon Sep 17 00:00:00 2001
From: Aleksandre <aleksandre.nozadze.1@iliauni.edu.ge>
Date: Mon, 25 Aug 2025 23:48:11 +0400
Subject: [PATCH 11/81] Refactor: Consolidate and reorder App.tsx imports

---
 src/App.tsx | 11 -----------
 1 file changed, 11 deletions(-)

diff --git a/src/App.tsx b/src/App.tsx
index 368468b..321f0f1 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -50,17 +50,6 @@ import {
     EditPageAccess,
     RequireUser,
 } from "./Components/AuthGuard";
-import EditNovelPage from "./Pages/EditNovelPage";
-import EditChapterPage from "./Pages/EditChapterPage";
-import { PageAnimationWrapper } from "./Components/PageAnimationWrapper";
-import UploadEPUBPage from "./Pages/UploadEPUBPage";
-import UploadNovelPage from "./Pages/UploadNovelPage";
-import { SWRConfig } from "swr";
-import { axiosFetcher } from "./Services/apiService";
-import { isAxiosError } from "axios";
-import { useCacheProvider } from "@piotr-cz/swr-idb-cache";
-import { useEffect } from "react";
-import SettingsPage from "./Pages/settings";
 
 function App() {
     const cacheProvider = useCacheProvider({

From bcb21d74a2eeae36b67a4a66882d8f10640ada83 Mon Sep 17 00:00:00 2001
From: Aleksandre <aleksandre.nozadze.1@iliauni.edu.ge>
Date: Mon, 25 Aug 2025 23:48:11 +0400
Subject: [PATCH 12/81] Feat: Implement user settings page

---
 src/Pages/settings.tsx | 9 ---------
 1 file changed, 9 deletions(-)
 delete mode 100644 src/Pages/settings.tsx

diff --git a/src/Pages/settings.tsx b/src/Pages/settings.tsx
deleted file mode 100644
index 914046d..0000000
--- a/src/Pages/settings.tsx
+++ /dev/null
@@ -1,9 +0,0 @@
-const SettingsPage = () => {
-    return (
-        <div>
-            <h1>Settings</h1>
-        </div>
-    );
-};
-
-export default SettingsPage;

From 78c8cf2ac920715830fdbbcda04525ed4501a98f Mon Sep 17 00:00:00 2001
From: Aleksandre <aleksandre.nozadze.1@iliauni.edu.ge>
Date: Tue, 26 Aug 2025 16:08:13 +0400
Subject: [PATCH 13/81] Auto stash before checking out "origin/master"

---
 src/Pages/settings.tsx | 9 +++++++++
 1 file changed, 9 insertions(+)
 create mode 100644 src/Pages/settings.tsx

diff --git a/src/Pages/settings.tsx b/src/Pages/settings.tsx
new file mode 100644
index 0000000..914046d
--- /dev/null
+++ b/src/Pages/settings.tsx
@@ -0,0 +1,9 @@
+const SettingsPage = () => {
+    return (
+        <div>
+            <h1>Settings</h1>
+        </div>
+    );
+};
+
+export default SettingsPage;

From 5819da49ac49d361c7356d7bc92fcba7b56b7223 Mon Sep 17 00:00:00 2001
From: Aleksandre <aleksandre.nozadze.1@iliauni.edu.ge>
Date: Sun, 24 Aug 2025 23:41:06 +0400
Subject: [PATCH 14/81] refactor: Improve UserContext authentication handling
 and types

---
 src/Contexts/UserContext.tsx | 7 ++++---
 src/Types/types.ts           | 7 ++++++-
 2 files changed, 10 insertions(+), 4 deletions(-)

diff --git a/src/Contexts/UserContext.tsx b/src/Contexts/UserContext.tsx
index 3c20648..20ceb1a 100644
--- a/src/Contexts/UserContext.tsx
+++ b/src/Contexts/UserContext.tsx
@@ -8,7 +8,7 @@ import React, {
 import api from "../Services/apiService";
 import { Authenticate } from "../Services/authService";
 import { HandleErr } from "../Services/errorHandler";
-import { User, UserContextType } from "../Types/types";
+import { User, UserContextType, ValidationResponse } from "../Types/types";
 import { useError } from "./ErrorContext";
 import { useLoading } from "./LoadingContext";
 import { useNotification } from "./NotificationContext";
@@ -37,10 +37,11 @@ export const UserProvider: React.FC<{ children: ReactNode }> = ({
 
             try {
                 const data = await Authenticate();
+                console.log(data);
 
-                if (data.authenticated) {
+                if (data) {
                     setAuthenticated(true);
-                    setUser(data.user);
+                    setUser(data as User);
                     setNotification("Logged back in");
                 } else {
                     setUser(null);
diff --git a/src/Types/types.ts b/src/Types/types.ts
index c9e5f63..6152cbd 100644
--- a/src/Types/types.ts
+++ b/src/Types/types.ts
@@ -53,12 +53,17 @@ export interface LoginProps {
 }
 
 export interface User {
-    id: string;
+    id: string | null;
     email: string | null;
     username: string | null;
     type: string | null;
 }
 
+export interface ValidationResponse {
+    id: string | null;
+    email: string | null;
+}
+
 export interface UserContextType {
     user: User | null;
     authenticated: boolean;

From f21c5d6f264047e9dc83a8c6fbae93f039d84c70 Mon Sep 17 00:00:00 2001
From: Aleksandre <aleksandre.nozadze.1@iliauni.edu.ge>
Date: Sun, 24 Aug 2025 23:41:06 +0400
Subject: [PATCH 15/81] style: Add horizontal padding to main content areas and
 minor layout cleanup

---
 src/Layouts/ChapterPageLayout.tsx | 3 ++-
 src/Layouts/HeroPageLayout.tsx    | 3 +--
 src/Layouts/NovelsPageLayout.tsx  | 5 ++---
 3 files changed, 5 insertions(+), 6 deletions(-)

diff --git a/src/Layouts/ChapterPageLayout.tsx b/src/Layouts/ChapterPageLayout.tsx
index 73a12d7..94ec1b1 100644
--- a/src/Layouts/ChapterPageLayout.tsx
+++ b/src/Layouts/ChapterPageLayout.tsx
@@ -1,4 +1,5 @@
 import { Outlet } from "react-router-dom";
+
 import Footer from "../Components/Footer";
 import Navbar from "../Components/Navbar";
 import ScrollButtons from "../Components/ScrollButtons";
@@ -7,7 +8,7 @@ const ChapterPageLayout = () => {
     return (
         <div className="chapter-page-layout">
             <Navbar />
-            <div className="w-full flex justify-center">
+            <div className="w-full px-8 flex justify-center">
                 <Outlet />
             </div>
             <ScrollButtons />
diff --git a/src/Layouts/HeroPageLayout.tsx b/src/Layouts/HeroPageLayout.tsx
index d47f3ee..0ddb4e5 100644
--- a/src/Layouts/HeroPageLayout.tsx
+++ b/src/Layouts/HeroPageLayout.tsx
@@ -1,6 +1,5 @@
 import { Outlet } from "react-router-dom";
 
-// Components
 import Navbar from "../Components/Navbar";
 import Footer from "../Components/Footer";
 
@@ -11,7 +10,7 @@ const HeroPageLayout = () => {
     return (
         <div className="hero-page-layout">
             <Navbar />
-            <div className="w-full h-full flex justify-center">
+            <div className="w-full px-8 flex justify-center">
                 <Outlet />
             </div>
             <Footer />
diff --git a/src/Layouts/NovelsPageLayout.tsx b/src/Layouts/NovelsPageLayout.tsx
index 1350194..4a710ef 100644
--- a/src/Layouts/NovelsPageLayout.tsx
+++ b/src/Layouts/NovelsPageLayout.tsx
@@ -1,14 +1,13 @@
 import { Outlet } from "react-router-dom";
 
-// Components
 import Navbar from "../Components/Navbar";
 import Footer from "../Components/Footer";
 
 const NovelsPageLayout = () => {
     return (
-        <div className="">
+        <div className="novels-page-layout">
             <Navbar />
-            <div className="w-full flex justify-center">
+            <div className="w-full px-8 flex justify-center">
                 <Outlet />
             </div>
             <Footer />

From 38a52f768f587446f92c6dda115a0579150c43c3 Mon Sep 17 00:00:00 2001
From: Aleksandre <aleksandre.nozadze.1@iliauni.edu.ge>
Date: Sun, 24 Aug 2025 23:41:06 +0400
Subject: [PATCH 16/81] refactor(router): Improve 404 handling and add route
 comments

---
 src/App.tsx | 13 +++++++++++++
 1 file changed, 13 insertions(+)

diff --git a/src/App.tsx b/src/App.tsx
index 15c5859..24b5ac8 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -99,7 +99,18 @@ const RouterTransition = () => {
     return (
         <AnimatePresence mode="wait">
             <Routes location={location} key={location.pathname}>
+                <Route path="*" element={<HeroPageLayout />}>
+                    <Route
+                        index
+                        element={
+                            <PageAnimationWrapper>
+                                <NotFound />
+                            </PageAnimationWrapper>
+                        }
+                    />
+                </Route>
                 <Route path="/" element={<HeroPageLayout />}>
+                    {/* Main Page */}
                     <Route
                         index
                         element={
@@ -108,6 +119,7 @@ const RouterTransition = () => {
                             </PageAnimationWrapper>
                         }
                     />
+                    {/* 404 Page */}
                     <Route
                         path="*"
                         element={
@@ -116,6 +128,7 @@ const RouterTransition = () => {
                             </PageAnimationWrapper>
                         }
                     />
+
                     <Route
                         path="/about"
                         element={

From 8670d2d0019251c69ef2f32f5c99415e780b1a24 Mon Sep 17 00:00:00 2001
From: Aleksandre <aleksandre.nozadze.1@iliauni.edu.ge>
Date: Mon, 25 Aug 2025 23:48:11 +0400
Subject: [PATCH 17/81] Refactor: Simplify AuthGuard user authentication logic

---
 src/Components/AuthGuard.tsx | 6 +-----
 1 file changed, 1 insertion(+), 5 deletions(-)

diff --git a/src/Components/AuthGuard.tsx b/src/Components/AuthGuard.tsx
index d00222b..505cf79 100644
--- a/src/Components/AuthGuard.tsx
+++ b/src/Components/AuthGuard.tsx
@@ -31,11 +31,7 @@ export const RequireUser: React.FC<RequireAuthProps> = ({ children }) => {
             try {
                 const data = await Authenticate();
 
-                if (!data.authenticated) {
-                    return navigate("/login");
-                }
-
-                if (!data.user) {
+                if (!data) {
                     return navigate("/login");
                 }
             } catch (err) {

From 449655f5eca3ea300dab5300fbfcd5f5c2276fe9 Mon Sep 17 00:00:00 2001
From: Aleksandre <aleksandre.nozadze.1@iliauni.edu.ge>
Date: Mon, 25 Aug 2025 23:48:11 +0400
Subject: [PATCH 18/81] Chore: Add App-wide dependencies and new page component
 imports

---
 src/App.tsx | 11 +++++++++++
 1 file changed, 11 insertions(+)

diff --git a/src/App.tsx b/src/App.tsx
index 24b5ac8..7636ece 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -7,6 +7,12 @@ import {
 import { SpeedInsights } from "@vercel/speed-insights/react";
 import { AnimatePresence, motion } from "framer-motion";
 import { Analytics } from "@vercel/analytics/react";
+import { PageAnimationWrapper } from "./Components/PageAnimationWrapper";
+import { SWRConfig } from "swr";
+import { axiosFetcher } from "./Services/apiService";
+import { isAxiosError } from "axios";
+import { useCacheProvider } from "@piotr-cz/swr-idb-cache";
+import { useEffect } from "react";
 
 // Styles
 import "./App.css";
@@ -32,6 +38,11 @@ import Dashboard from "./Pages/Dashboard";
 import LoginPage from "./Pages/LoginPage";
 import RegisterPage from "./Pages/RegisterPage";
 import UploadPage from "./Pages/UploadPage";
+import SettingsPage from "./Pages/Settings";
+import EditNovelPage from "./Pages/EditNovelPage";
+import EditChapterPage from "./Pages/EditChapterPage";
+import UploadEPUBPage from "./Pages/UploadEPUBPage";
+import UploadNovelPage from "./Pages/UploadNovelPage";
 
 // Components
 import {

From 2d03afb28713a0f01a25924815f97871223ee652 Mon Sep 17 00:00:00 2001
From: Aleksandre <aleksandre.nozadze.1@iliauni.edu.ge>
Date: Mon, 25 Aug 2025 23:48:11 +0400
Subject: [PATCH 19/81] Feat: Implement user settings page

---
 src/Pages/Settings.tsx | 49 ++++++++++++++++++++++++++++++++++++++++++
 src/Pages/settings.tsx |  9 --------
 2 files changed, 49 insertions(+), 9 deletions(-)
 create mode 100644 src/Pages/Settings.tsx
 delete mode 100644 src/Pages/settings.tsx

diff --git a/src/Pages/Settings.tsx b/src/Pages/Settings.tsx
new file mode 100644
index 0000000..1edabe8
--- /dev/null
+++ b/src/Pages/Settings.tsx
@@ -0,0 +1,49 @@
+import { useUser } from "../Contexts/UserContext";
+
+const SettingsPage = () => {
+    const {
+        fontSize,
+        setFontSize,
+        colorScheme,
+        setColorScheme,
+        sortBy,
+        setSortBy,
+    } = useUser();
+
+    return (
+        <div
+            className={`h-full max-w-5xl px-4 sm:px-8 md:px-12 w-full flex flex-col justify-between items-center`}
+        >
+            <p className="text-2xl pb-28">Settings</p>
+            <div
+                className={`text-xl flex flex-row justify-between w-full h-full`}
+            >
+                <div>
+                    <p>Font Size</p>
+                    <select
+                        value={fontSize}
+                        onChange={(e) => setFontSize(e.target.value)}
+                    >
+                        <option value="xs">Small</option>
+                        <option value="lg">Medium</option>
+                        <option value="xl">Large</option>
+                    </select>
+
+                    <p className={`text-${fontSize}! `}>Example text...</p>
+                </div>
+                <div>
+                    <p>Font Family</p>
+                </div>
+                <div>
+                    <p>Color Scheme</p>
+                </div>
+                <div>
+                    <p>Caching</p>
+                    <p className="subtitle">Cannot disable!</p>
+                </div>
+            </div>
+        </div>
+    );
+};
+
+export default SettingsPage;
diff --git a/src/Pages/settings.tsx b/src/Pages/settings.tsx
deleted file mode 100644
index 914046d..0000000
--- a/src/Pages/settings.tsx
+++ /dev/null
@@ -1,9 +0,0 @@
-const SettingsPage = () => {
-    return (
-        <div>
-            <h1>Settings</h1>
-        </div>
-    );
-};
-
-export default SettingsPage;

From 50a61b918e5e62e369381920beb6a9331a880c5c Mon Sep 17 00:00:00 2001
From: Aleksandre <aleksandre.nozadze.1@iliauni.edu.ge>
Date: Mon, 25 Aug 2025 23:48:11 +0400
Subject: [PATCH 20/81] Feat: Add Settings and Upload links to Navbar

---
 src/Components/Navbar.tsx | 21 +++++++++++++++++++--
 1 file changed, 19 insertions(+), 2 deletions(-)

diff --git a/src/Components/Navbar.tsx b/src/Components/Navbar.tsx
index aa446bc..1aac6a0 100644
--- a/src/Components/Navbar.tsx
+++ b/src/Components/Navbar.tsx
@@ -50,7 +50,11 @@ const Navbar = () => {
                         {!dropdown && (
                             <div className="hidden lg:flex items-center justify-between space-x-5">
                                 <PersistentStoragePermissionButton />
-                                <SettingsDropdown />
+                                {user && (
+                                    <Link to="/settings" className="link">
+                                        [Settings]
+                                    </Link>
+                                )}
 
                                 {user && (
                                     <Link
@@ -126,10 +130,23 @@ const Navbar = () => {
                             className={`${dropdown ? "text-xl w-fit flex flex-col flex-nowrap items-end pb-4 pt-2 px-2 pl-6 border-t border-zinc-800" : "hidden"}`}
                         >
                             <PersistentStoragePermissionButton />
-                            <SettingsDropdown />
+
+                            {user && (
+                                <Link to="/settings" className="link">
+                                    [Settings]
+                                </Link>
+                            )}
+
                             <Link to="/novels" className="link">
                                 [Novels]
                             </Link>
+
+                            {user && (
+                                <Link to="/dashboard/upload" className="link">
+                                    [Upload]
+                                </Link>
+                            )}
+
                             {user && user.type === "Admin" && (
                                 <Link to="/dashboard" className="link">
                                     [Dashboard]

From 1317511fb8df429d4d483d458caa4084c35f313a Mon Sep 17 00:00:00 2001
From: Aleksandre <aleksandre.nozadze.1@iliauni.edu.ge>
Date: Mon, 25 Aug 2025 23:48:12 +0400
Subject: [PATCH 21/81] Feat: Apply user's selected font size to ChapterPage
 content

---
 src/Pages/ChapterPage.tsx | 6 +++++-
 1 file changed, 5 insertions(+), 1 deletion(-)

diff --git a/src/Pages/ChapterPage.tsx b/src/Pages/ChapterPage.tsx
index 3da7e61..942f2ef 100644
--- a/src/Pages/ChapterPage.tsx
+++ b/src/Pages/ChapterPage.tsx
@@ -15,6 +15,8 @@ const ChapterPage = () => {
     const { id_novel } = useParams();
     const { id_chapter } = useParams();
 
+    const { fontSize } = useUser();
+
     const [isLeftPopoverOpen, setIsLeftPopoverOpen] = useState(false);
     const [isRightPopoverOpen, setIsRightPopoverOpen] = useState(false);
     const [isBackPopoverOpen, setIsBackPopoverOpen] = useState(false);
@@ -167,7 +169,9 @@ const ChapterPage = () => {
                         />
                     </div>
 
-                    <div className="w-full max-w-3xl mt-4 prose prose-lg font-sans text-lg leading-normal">
+                    <div
+                        className={`w-full max-w-3xl mt-4 prose prose-lg font-sans text-${fontSize ?? "lg"} leading-normal`}
+                    >
                         <ReactMarkdown
                             components={{
                                 p: ({ node, ...props }) => (

From 849898b3829de549e753643b998c1d153fe96dcd Mon Sep 17 00:00:00 2001
From: Aleksandre <aleksandre.nozadze.1@iliauni.edu.ge>
Date: Sun, 24 Aug 2025 23:41:06 +0400
Subject: [PATCH 22/81] feat: Introduce Settings page

---
 src/App.tsx            | 11 +++++++++++
 src/Pages/settings.tsx |  9 +++++++++
 2 files changed, 20 insertions(+)
 create mode 100644 src/Pages/settings.tsx

diff --git a/src/App.tsx b/src/App.tsx
index 7636ece..368468b 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -60,6 +60,7 @@ import { axiosFetcher } from "./Services/apiService";
 import { isAxiosError } from "axios";
 import { useCacheProvider } from "@piotr-cz/swr-idb-cache";
 import { useEffect } from "react";
+import SettingsPage from "./Pages/settings";
 
 function App() {
     const cacheProvider = useCacheProvider({
@@ -168,6 +169,16 @@ const RouterTransition = () => {
                             </PageAnimationWrapper>
                         }
                     />
+                    <Route
+                        path="/settings"
+                        element={
+                            <PageAnimationWrapper>
+                                <RequireUser>
+                                    <SettingsPage />
+                                </RequireUser>
+                            </PageAnimationWrapper>
+                        }
+                    />
                 </Route>
                 <Route path="/novels" element={<NovelsPageLayout />}>
                     <Route
diff --git a/src/Pages/settings.tsx b/src/Pages/settings.tsx
new file mode 100644
index 0000000..914046d
--- /dev/null
+++ b/src/Pages/settings.tsx
@@ -0,0 +1,9 @@
+const SettingsPage = () => {
+    return (
+        <div>
+            <h1>Settings</h1>
+        </div>
+    );
+};
+
+export default SettingsPage;

From bf98a7cd8507905a3c1779ca0e415e362112d927 Mon Sep 17 00:00:00 2001
From: Aleksandre <aleksandre.nozadze.1@iliauni.edu.ge>
Date: Mon, 25 Aug 2025 23:48:11 +0400
Subject: [PATCH 23/81] Refactor: Consolidate and reorder App.tsx imports

---
 src/App.tsx | 11 -----------
 1 file changed, 11 deletions(-)

diff --git a/src/App.tsx b/src/App.tsx
index 368468b..321f0f1 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -50,17 +50,6 @@ import {
     EditPageAccess,
     RequireUser,
 } from "./Components/AuthGuard";
-import EditNovelPage from "./Pages/EditNovelPage";
-import EditChapterPage from "./Pages/EditChapterPage";
-import { PageAnimationWrapper } from "./Components/PageAnimationWrapper";
-import UploadEPUBPage from "./Pages/UploadEPUBPage";
-import UploadNovelPage from "./Pages/UploadNovelPage";
-import { SWRConfig } from "swr";
-import { axiosFetcher } from "./Services/apiService";
-import { isAxiosError } from "axios";
-import { useCacheProvider } from "@piotr-cz/swr-idb-cache";
-import { useEffect } from "react";
-import SettingsPage from "./Pages/settings";
 
 function App() {
     const cacheProvider = useCacheProvider({

From 4c5a3bfdd3ee97de1034d95bf8b0724c31453c29 Mon Sep 17 00:00:00 2001
From: Aleksandre <aleksandre.nozadze.1@iliauni.edu.ge>
Date: Mon, 25 Aug 2025 23:48:11 +0400
Subject: [PATCH 24/81] Feat: Implement user settings page

---
 src/Pages/settings.tsx | 9 ---------
 1 file changed, 9 deletions(-)
 delete mode 100644 src/Pages/settings.tsx

diff --git a/src/Pages/settings.tsx b/src/Pages/settings.tsx
deleted file mode 100644
index 914046d..0000000
--- a/src/Pages/settings.tsx
+++ /dev/null
@@ -1,9 +0,0 @@
-const SettingsPage = () => {
-    return (
-        <div>
-            <h1>Settings</h1>
-        </div>
-    );
-};
-
-export default SettingsPage;

From 0dad650a04d201a10641293f778bba5f07c63fc9 Mon Sep 17 00:00:00 2001
From: Aleksandre <aleksandre.nozadze.1@iliauni.edu.ge>
Date: Wed, 3 Sep 2025 16:18:11 +0400
Subject: [PATCH 25/81] feat: Add comprehensive .dockerignore file

---
 .dockerignore | 46 ++++++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 46 insertions(+)
 create mode 100644 .dockerignore

diff --git a/.dockerignore b/.dockerignore
new file mode 100644
index 0000000..c21f452
--- /dev/null
+++ b/.dockerignore
@@ -0,0 +1,46 @@
+# Dependencies
+node_modules
+npm-debug.log*
+
+# Production build (we'll create it in Docker)
+dist
+build
+
+# Version control
+.git
+.gitignore
+
+# IDE files
+.vscode
+.idea
+*.swp
+*.swo
+
+# OS files
+.DS_Store
+Thumbs.db
+
+# Logs
+logs
+*.log
+
+# Runtime data
+pids
+*.pid
+*.seed
+*.pid.lock
+
+# Coverage directory used by tools like istanbul
+coverage
+
+# Docker files (don't copy Docker files into Docker)
+Dockerfile
+.dockerignore
+docker-compose.yml
+
+# Documentation
+README.md
+*.md
+
+# GitHub
+.github

From 2e65ede9d2774a2edad2adf1139cf06104bf42d0 Mon Sep 17 00:00:00 2001
From: Aleksandre <aleksandre.nozadze.1@iliauni.edu.ge>
Date: Wed, 3 Sep 2025 16:18:11 +0400
Subject: [PATCH 26/81] feat: Add Nginx configuration for serving React app

---
 nginx/nginx.conf | 63 ++++++++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 63 insertions(+)
 create mode 100644 nginx/nginx.conf

diff --git a/nginx/nginx.conf b/nginx/nginx.conf
new file mode 100644
index 0000000..3c0bd04
--- /dev/null
+++ b/nginx/nginx.conf
@@ -0,0 +1,63 @@
+user nginx;
+worker_processes auto;
+error_log /var/log/nginx/error.log notice;
+pid /var/run/nginx.pid;
+
+events {
+  worker_connections 1024;
+}
+
+http {
+  include /etc/nginx/mime.types;
+  default_type application/octet-stream;
+
+  sendfile on;
+  tcp_nopush on;
+  tcp_nodelay on;
+  keepalive_timeout 65;
+  client_max_body_size 16M;
+
+  # Security headers
+  add_header X-Frame-Options "SAMEORIGIN" always;
+  add_header X-Content-Type-Options "nosniff" always;
+  add_header Referrer-Policy "no-referrer-when-downgrade" always;
+  add_header Content-Security-Policy "default-src 'self' http: https: ws: wss: data: blob: 'unsafe-inline'; frame-ancestors 'self';" always;
+
+  gzip on;
+  gzip_vary on;
+  gzip_min_length 1024;
+  gzip_proxied any;
+  gzip_comp_level 6;
+  gzip_types text/plain text/css text/xml text/javascript application/javascript application/json;
+
+  server {
+    listen 80;
+    server_name _;
+    root /usr/share/nginx/html;
+    index index.html;
+
+    # SPA routing
+    location / {
+      try_files $uri $uri/ /index.html;
+    }
+
+    # Static files cache
+    location ~* \.(js|css|png|jpg|jpeg|gif|ico|svg|woff|woff2|ttf|eot)$ {
+      expires 1y;
+      add_header Cache-Control "public, immutable";
+      try_files $uri =404;
+    }
+
+    # Health check
+    location /health {
+      access_log off;
+      add_header Content-Type text/plain;
+      return 200 "healthy\n";
+    }
+
+    # Deny sensitive files
+    location ~ /\.(?!well-known) {
+      deny all;
+    }
+  }
+}

From 4236aa588421de03f23c23fcfca5e9c983ec96e6 Mon Sep 17 00:00:00 2001
From: Aleksandre <aleksandre.nozadze.1@iliauni.edu.ge>
Date: Wed, 3 Sep 2025 16:18:11 +0400
Subject: [PATCH 27/81] feat: Dockerize React app with multi-stage build and
 Nginx

---
 Dockerfile | 58 ++++++++++++++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 58 insertions(+)
 create mode 100644 Dockerfile

diff --git a/Dockerfile b/Dockerfile
new file mode 100644
index 0000000..c89a7e5
--- /dev/null
+++ b/Dockerfile
@@ -0,0 +1,58 @@
+# Multi-stage build for React app with Vite
+
+# Stage 1: Build the application
+FROM node:22-alpine AS builder
+
+# Set working directory
+WORKDIR /app
+
+# Copy package files first for better caching
+COPY package*.json ./
+
+# Install dependencies
+RUN npm ci --only=production=false
+
+# Copy source code
+COPY . .
+
+COPY .env .env
+
+# Build the application
+RUN npm run build
+
+# Stage 2: Serve the application with nginx
+FROM nginx:alpine AS production
+
+# Install security updates
+RUN apk upgrade
+
+# Create nginx user with specific UID for consistency
+RUN addgroup -g 1001 -S nginx-group || true && \
+    adduser -u 1001 -D -S -s /bin/false -G nginx-group nginx-user || true
+
+# Copy built assets from builder stage
+COPY --from=builder /app/dist /usr/share/nginx/html
+
+COPY ./nginx/nginx.conf /etc/nginx/nginx.conf
+
+# Set proper permissions
+RUN chown -R nginx:nginx /usr/share/nginx/html && \
+    chown -R nginx:nginx /var/cache/nginx && \
+    chown -R nginx:nginx /var/log/nginx && \
+    chown -R nginx:nginx /etc/nginx/conf.d
+
+RUN touch /var/run/nginx.pid && \
+    chown -R nginx:nginx /var/run/nginx.pid
+
+# Switch to nginx user
+USER nginx
+
+# Expose port 80
+EXPOSE 80
+
+# Health check
+HEALTHCHECK --interval=30s --timeout=3s --start-period=5s --retries=3 \
+    CMD wget --no-verbose --tries=1 --spider http://localhost:80/health || exit 1
+
+# Start nginx
+CMD ["nginx", "-g", "daemon off;"]

From 9dff87b2c2e846d40bbda94dcabd98ab95bae85d Mon Sep 17 00:00:00 2001
From: FinnTheHero <aleksandre.nozadze.1@iliauni.edu.ge>
Date: Fri, 12 Sep 2025 17:30:47 +0400
Subject: [PATCH 28/81] Updated api routes

---
 src/Services/authService.ts    | 2 +-
 src/Services/createService.ts  | 4 ++--
 src/Services/updateServices.ts | 4 ++--
 3 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/src/Services/authService.ts b/src/Services/authService.ts
index 7011ebd..a6ffe6b 100644
--- a/src/Services/authService.ts
+++ b/src/Services/authService.ts
@@ -3,7 +3,7 @@ import { HandleErr } from "./errorHandler";
 
 export const Authenticate = async () => {
     try {
-        const response = await api.get("/user/validate", {
+        const response = await api.get("/validate", {
             withCredentials: true,
         });
         return response.data;
diff --git a/src/Services/createService.ts b/src/Services/createService.ts
index 6965240..624dacd 100644
--- a/src/Services/createService.ts
+++ b/src/Services/createService.ts
@@ -4,7 +4,7 @@ import { HandleErr } from "./errorHandler";
 
 export const createNovel = async (novel: Novel) => {
     try {
-        const response = await api.post(`/manage/novel`, novel, {
+        const response = await api.post(`/manage/create/novel`, novel, {
             withCredentials: true,
         });
         return response.data;
@@ -16,7 +16,7 @@ export const createNovel = async (novel: Novel) => {
 export const createChapter = async (id_novel: string, chapter: Chapter) => {
     try {
         const response = await api.post(
-            `/manage/${id_novel}/chapter`,
+            `/manage/create/${id_novel}/chapter`,
             chapter,
             {
                 withCredentials: true,
diff --git a/src/Services/updateServices.ts b/src/Services/updateServices.ts
index 75689de..8cb3602 100644
--- a/src/Services/updateServices.ts
+++ b/src/Services/updateServices.ts
@@ -4,7 +4,7 @@ import { HandleErr } from "./errorHandler";
 
 export const updateNovel = async (novel: Novel) => {
     try {
-        const response = await api.put(`/manage/${novel.id}`, novel, {
+        const response = await api.put(`/manage/update/${novel.id}`, novel, {
             withCredentials: true,
         });
         return response.data;
@@ -16,7 +16,7 @@ export const updateNovel = async (novel: Novel) => {
 export const updateChapter = async (id_novel: string, chapter: Chapter) => {
     try {
         const response = await api.put(
-            `/manage/${id_novel}/${chapter.id}`,
+            `/manage/update/${id_novel}/${chapter.id}`,
             chapter,
             {
                 withCredentials: true,

From 8feaee4c7f4afc264755f5a3098d12ef7b838216 Mon Sep 17 00:00:00 2001
From: Aleksandre <aleksandre.nozadze.1@iliauni.edu.ge>
Date: Fri, 26 Sep 2025 01:20:53 +0400
Subject: [PATCH 29/81] Simplifies content key logic

Removes the `user` dependency from the generation of content fetching keys. This ensures that keys for retrieving general content (like all novels) and specific chapters are consistently formed, independent of the user's authentication state. This streamlines data fetching and supports scenarios where content is accessible without a logged-in user.
---
 src/Contexts/ContentContext.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/Contexts/ContentContext.tsx b/src/Contexts/ContentContext.tsx
index b06dda5..f6b6b0a 100644
--- a/src/Contexts/ContentContext.tsx
+++ b/src/Contexts/ContentContext.tsx
@@ -37,8 +37,8 @@ export const ContentProvider: React.FC<{ children: ReactNode }> = ({
     const [chapter, setChapter] = useState<Chapter | null>(null);
     const [novel, setNovel] = useState<Novel | null>(null);
 
-    const key_n = user && `/all`;
-    const key_c = user && novel && chapterId && `/${novel.id}/${chapterId}`;
+    const key_n = `/all`;
+    const key_c = novel && chapterId && `/${novel.id}/${chapterId}`;
 
     const getKey = (
         pageIndex: number,

From 1fcccae5f943d1c8cb87123768fd08b5326d46fb Mon Sep 17 00:00:00 2001
From: Aleksandre <aleksandre.nozadze.1@iliauni.edu.ge>
Date: Fri, 26 Sep 2025 01:52:30 +0400
Subject: [PATCH 30/81] Simplifies registration data handling

Updates the Register service to return the data payload directly, enhancing consistency and simplifying response handling in client components.

Removes a redundant console log statement from the login page.
---
 src/Pages/LoginPage.tsx     | 1 -
 src/Pages/RegisterPage.tsx  | 6 +++---
 src/Services/authService.ts | 2 +-
 3 files changed, 4 insertions(+), 5 deletions(-)

diff --git a/src/Pages/LoginPage.tsx b/src/Pages/LoginPage.tsx
index 486a6eb..bc29a30 100644
--- a/src/Pages/LoginPage.tsx
+++ b/src/Pages/LoginPage.tsx
@@ -40,7 +40,6 @@ const LoginPage = () => {
 
         try {
             const data = await Login(email, password);
-            console.log(data);
             if (data.message && data.user) {
                 setUser(data.user);
                 setNotification(data.message);
diff --git a/src/Pages/RegisterPage.tsx b/src/Pages/RegisterPage.tsx
index 1da862a..8bb10bd 100644
--- a/src/Pages/RegisterPage.tsx
+++ b/src/Pages/RegisterPage.tsx
@@ -97,9 +97,9 @@ const RegisterPage = () => {
         }
 
         try {
-            const response = await Register(username, email, password);
-            if (response?.status === 201 && response.data.message) {
-                setNotification(response.data.message);
+            const data = await Register(username, email, password);
+            if (data.message) {
+                setNotification(data.message);
                 return navigate("/login");
             }
         } catch (err) {
diff --git a/src/Services/authService.ts b/src/Services/authService.ts
index a6ffe6b..bb90a7a 100644
--- a/src/Services/authService.ts
+++ b/src/Services/authService.ts
@@ -57,7 +57,7 @@ export const Register = async (
                 withCredentials: true,
             },
         );
-        return response;
+        return response.data;
     } catch (err) {
         HandleErr(err);
     }

From 91e20d9699d074260c99bde35b880540fb05142f Mon Sep 17 00:00:00 2001
From: Aleksandre <aleksandre.nozadze.1@iliauni.edu.ge>
Date: Fri, 26 Sep 2025 12:59:56 +0400
Subject: [PATCH 31/81] File was auto updated by npm

---
 package-lock.json | 111 ++++++++++++++--------------------------------
 1 file changed, 33 insertions(+), 78 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 4d95e05..5d23dc3 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -123,6 +123,7 @@
             "integrity": "sha512-yDBHV9kQNcr2/sUr9jghVyz9C3Y5G2zUM2H2lo+9mKv4sFgbA8s8Z9t8D1jiTkGoO/NoIfKMyKWr4s6CN23ZwQ==",
             "dev": true,
             "license": "MIT",
+            "peer": true,
             "dependencies": {
                 "@ampproject/remapping": "^2.2.0",
                 "@babel/code-frame": "^7.27.1",
@@ -685,6 +686,7 @@
             "resolved": "https://registry.npmjs.org/@codemirror/language/-/language-6.11.2.tgz",
             "integrity": "sha512-p44TsNArL4IVXDTbapUmEkAlvWs2CFQbcfc0ymDsis1kH2wh0gcY96AS29c/vp2d0y2Tquk1EDSaawpzilUiAw==",
             "license": "MIT",
+            "peer": true,
             "dependencies": {
                 "@codemirror/state": "^6.0.0",
                 "@codemirror/view": "^6.23.0",
@@ -773,6 +775,7 @@
             "resolved": "https://registry.npmjs.org/@codemirror/state/-/state-6.5.2.tgz",
             "integrity": "sha512-FVqsPqtPWKVVL3dPSxy8wEF/ymIEuVzF1PK3VbUgrxXpJUSHQWWZz4JMToquRxnkw+36LTamCZG2iua2Ptq0fA==",
             "license": "MIT",
+            "peer": true,
             "dependencies": {
                 "@marijn/find-cluster-break": "^1.0.0"
             }
@@ -782,6 +785,7 @@
             "resolved": "https://registry.npmjs.org/@codemirror/view/-/view-6.38.1.tgz",
             "integrity": "sha512-RmTOkE7hRU3OVREqFVITWHz6ocgBjv08GoePscAakgVQfciA3SGCEk7mb9IzwW61cKKmlTpHXG6DUE5Ubx+MGQ==",
             "license": "MIT",
+            "peer": true,
             "dependencies": {
                 "@codemirror/state": "^6.5.0",
                 "crelt": "^1.0.6",
@@ -1334,7 +1338,6 @@
             "integrity": "sha512-ENIdc4iLu0d93HeYirvKmrzshzofPw6VkZRKQGe9Nv46ZnWUzcF1xV01dcvEg/1wXUR61OmmlSfyeyO7EvjLxQ==",
             "dev": true,
             "license": "Apache-2.0",
-            "peer": true,
             "dependencies": {
                 "@eslint/object-schema": "^2.1.6",
                 "debug": "^4.3.1",
@@ -1350,7 +1353,6 @@
             "integrity": "sha512-xR93k9WhrDYpXHORXpxVL5oHj3Era7wo6k/Wd8/IsQNnZUTzkGS29lyn3nAT05v6ltUuTFVCCYDEGfy2Or/sPA==",
             "dev": true,
             "license": "Apache-2.0",
-            "peer": true,
             "engines": {
                 "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
             }
@@ -1361,7 +1363,6 @@
             "integrity": "sha512-78Md3/Rrxh83gCxoUc0EiciuOHsIITzLy53m3d9UyiW8y9Dj2D29FeETqyKA+BRK76tnTp6RXWb3pCay8Oyomg==",
             "dev": true,
             "license": "Apache-2.0",
-            "peer": true,
             "dependencies": {
                 "@types/json-schema": "^7.0.15"
             },
@@ -1375,7 +1376,6 @@
             "integrity": "sha512-gtF186CXhIl1p4pJNGZw8Yc6RlshoePRvE0X91oPGb3vZ8pM3qOS9W9NGPat9LziaBV7XrJWGylNQXkGcnM3IQ==",
             "dev": true,
             "license": "MIT",
-            "peer": true,
             "dependencies": {
                 "ajv": "^6.12.4",
                 "debug": "^4.3.2",
@@ -1413,7 +1413,6 @@
             "integrity": "sha512-RBMg5FRL0I0gs51M/guSAj5/e14VQ4tpZnQNWwuDT66P14I43ItmPfIZRhO9fUVIPOAQXU47atlywZ/czoqFPA==",
             "dev": true,
             "license": "Apache-2.0",
-            "peer": true,
             "engines": {
                 "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
             }
@@ -1424,7 +1423,6 @@
             "integrity": "sha512-Z5kJ+wU3oA7MMIqVR9tyZRtjYPr4OC004Q4Rw7pgOKUOKkJfZ3O24nz3WYfGRpMDNmcOi3TwQOmgm7B7Tpii0w==",
             "dev": true,
             "license": "Apache-2.0",
-            "peer": true,
             "dependencies": {
                 "@eslint/core": "^0.15.2",
                 "levn": "^0.4.1"
@@ -1518,6 +1516,7 @@
             "resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-svg-core/-/fontawesome-svg-core-7.0.0.tgz",
             "integrity": "sha512-obBEF+zd98r/KtKVW6A+8UGWeaOoyMpl6Q9P3FzHsOnsg742aXsl8v+H/zp09qSSu/a/Hxe9LNKzbBaQq1CEbA==",
             "license": "MIT",
+            "peer": true,
             "dependencies": {
                 "@fortawesome/fontawesome-common-types": "7.0.0"
             },
@@ -1568,7 +1567,6 @@
             "integrity": "sha512-5DyQ4+1JEUzejeK1JGICcideyfUbGixgS9jNgex5nqkW+cY7WZhxBigmieN5Qnw9ZosSNVC9KQKyb+GUaGyKUA==",
             "dev": true,
             "license": "Apache-2.0",
-            "peer": true,
             "engines": {
                 "node": ">=18.18.0"
             }
@@ -1579,7 +1577,6 @@
             "integrity": "sha512-YuI2ZHQL78Q5HbhDiBA1X4LmYdXCKCMQIfw0pw7piHJwyREFebJUvrQN4cMssyES6x+vfUbx1CIpaQUKYdQZOw==",
             "dev": true,
             "license": "Apache-2.0",
-            "peer": true,
             "dependencies": {
                 "@humanfs/core": "^0.19.1",
                 "@humanwhocodes/retry": "^0.3.0"
@@ -1594,7 +1591,6 @@
             "integrity": "sha512-JBxkERygn7Bv/GbN5Rv8Ul6LVknS+5Bp6RgDC/O8gEBU/yeH5Ui5C/OlWrTb6qct7LjjfT6Re2NxB0ln0yYybA==",
             "dev": true,
             "license": "Apache-2.0",
-            "peer": true,
             "engines": {
                 "node": ">=18.18"
             },
@@ -1609,7 +1605,6 @@
             "integrity": "sha512-bxveV4V8v5Yb4ncFTT3rPSgZBOpCkjfK0y4oVVVJwIuDVBRMDXrPyXRL988i5ap9m9bnyEEjWfm5WkBmtffLfA==",
             "dev": true,
             "license": "Apache-2.0",
-            "peer": true,
             "engines": {
                 "node": ">=12.22"
             },
@@ -1624,7 +1619,6 @@
             "integrity": "sha512-bV0Tgo9K4hfPCek+aMAn81RppFKv2ySDQeMoSZuvTASywNTnVJCArCZE2FWqpvIatKu7VMRLWlR1EazvVhDyhQ==",
             "dev": true,
             "license": "Apache-2.0",
-            "peer": true,
             "engines": {
                 "node": ">=18.18"
             },
@@ -2068,6 +2062,7 @@
             "resolved": "https://registry.npmjs.org/@lezer/highlight/-/highlight-1.2.1.tgz",
             "integrity": "sha512-Z5duk4RN/3zuVO7Jq0pGLJ3qynpxUVsh7IbUbGj88+uV2ApSAn6kWg2au3iJb+0Zi7kKtqffIESgNcRXWZWmSA==",
             "license": "MIT",
+            "peer": true,
             "dependencies": {
                 "@lezer/common": "^1.0.0"
             }
@@ -3920,8 +3915,7 @@
             "version": "5.0.4",
             "resolved": "https://registry.npmjs.org/@types/aria-query/-/aria-query-5.0.4.tgz",
             "integrity": "sha512-rfT93uj5s0PRL7EzccGMs3brplhcrghnDoV26NqKhCAS1hVo+WdNsPvE/yb6ilfr5hi2MEk6d5EWJTKdxg8jVw==",
-            "license": "MIT",
-            "peer": true
+            "license": "MIT"
         },
         "node_modules/@types/babel__core": {
             "version": "7.20.5",
@@ -4072,8 +4066,7 @@
             "resolved": "https://registry.npmjs.org/@types/json-schema/-/json-schema-7.0.15.tgz",
             "integrity": "sha512-5+fP8P8MFNC+AyZCDxrB2pkZFPGzqQWUzpSeuuVLvm8VMcorNYavBqoFcxK8bQz4Qsbn4oUEEem4wDLfcysGHA==",
             "dev": true,
-            "license": "MIT",
-            "peer": true
+            "license": "MIT"
         },
         "node_modules/@types/localforage": {
             "version": "0.0.34",
@@ -4114,6 +4107,7 @@
             "resolved": "https://registry.npmjs.org/@types/react/-/react-19.1.11.tgz",
             "integrity": "sha512-lr3jdBw/BGj49Eps7EvqlUaoeA0xpj3pc0RoJkHpYaCHkVK7i28dKyImLQb3JVlqs3aYSXf7qYuWOW/fgZnTXQ==",
             "license": "MIT",
+            "peer": true,
             "dependencies": {
                 "csstype": "^3.0.2"
             }
@@ -4123,6 +4117,7 @@
             "resolved": "https://registry.npmjs.org/@types/react-dom/-/react-dom-19.1.7.tgz",
             "integrity": "sha512-i5ZzwYpqjmrKenzkoLM2Ibzt6mAsM7pxB6BCIouEVVmgiqaMj1TjaK7hnA36hbW5aZv20kx7Lw6hWzPWg0Rurw==",
             "license": "MIT",
+            "peer": true,
             "peerDependencies": {
                 "@types/react": "^19.0.0"
             }
@@ -4215,6 +4210,7 @@
             "integrity": "sha512-jCNyAuXx8dr5KJMkecGmZ8KI61KBUhkCob+SD+C+I5+Y1FWI2Y3QmY4/cxMCC5WAsZqoEtEETVhUiUMIGCf6Bw==",
             "dev": true,
             "license": "MIT",
+            "peer": true,
             "dependencies": {
                 "@typescript-eslint/scope-manager": "8.40.0",
                 "@typescript-eslint/types": "8.40.0",
@@ -4546,6 +4542,7 @@
             "resolved": "https://registry.npmjs.org/acorn/-/acorn-8.15.0.tgz",
             "integrity": "sha512-NZyJarBfL7nWwIq+FDL6Zp/yHEhePMNnnJ0y3qfieCrmNvYct8uvtiV41UvlSe6apAfk0fY1FbWx+NwfmpvtTg==",
             "license": "MIT",
+            "peer": true,
             "bin": {
                 "acorn": "bin/acorn"
             },
@@ -4568,7 +4565,6 @@
             "integrity": "sha512-j3fVLgvTo527anyYyJOGTYJbG+vnnQYvE0m5mmkc1TK+nxAppkCLMIL0aZ4dblVCNoGShhm+kzE4ZUykBoMg4g==",
             "dev": true,
             "license": "MIT",
-            "peer": true,
             "dependencies": {
                 "fast-deep-equal": "^3.1.1",
                 "fast-json-stable-stringify": "^2.0.0",
@@ -4591,7 +4587,6 @@
             "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-5.0.1.tgz",
             "integrity": "sha512-quJQXlTSUGL2LH9SUXo8VwsY4soanhgo6LNSm84E1LBcE8s3O0wpdiRzyR9z/ZZJMlMWv37qOOb9pdJlMUEKFQ==",
             "license": "MIT",
-            "peer": true,
             "engines": {
                 "node": ">=8"
             }
@@ -4937,6 +4932,7 @@
                 }
             ],
             "license": "MIT",
+            "peer": true,
             "dependencies": {
                 "caniuse-lite": "^1.0.30001726",
                 "electron-to-chromium": "^1.5.173",
@@ -5029,7 +5025,6 @@
             "integrity": "sha512-P8BjAsXvZS+VIDUI11hHCQEv74YT67YUi5JJFNWIqL235sBmjX4+qx9Muvls5ivyNENctx46xQLQ3aTuE7ssaQ==",
             "dev": true,
             "license": "MIT",
-            "peer": true,
             "engines": {
                 "node": ">=6"
             }
@@ -5283,7 +5278,6 @@
             "integrity": "sha512-uV2QOWP2nWzsy2aMp8aRibhi9dlzF5Hgh5SHaB9OiTGEyDTiJJyx0uy51QXdyWbtAHNua4XJzUKca3OzKUd3vA==",
             "dev": true,
             "license": "MIT",
-            "peer": true,
             "dependencies": {
                 "path-key": "^3.1.0",
                 "shebang-command": "^2.0.0",
@@ -5419,8 +5413,7 @@
             "resolved": "https://registry.npmjs.org/deep-is/-/deep-is-0.1.4.tgz",
             "integrity": "sha512-oIPzksmTg4/MriiaYGO+okXDT7ztn/w3Eptv/+gSIdMdKsJo0u4CfYNFJPy+4SKMuCqGw2wxnA+URMg3t8a/bQ==",
             "dev": true,
-            "license": "MIT",
-            "peer": true
+            "license": "MIT"
         },
         "node_modules/define-data-property": {
             "version": "1.1.4",
@@ -5531,8 +5524,7 @@
             "version": "0.5.16",
             "resolved": "https://registry.npmjs.org/dom-accessibility-api/-/dom-accessibility-api-0.5.16.tgz",
             "integrity": "sha512-X7BJ2yElsnOJ30pZF4uIIDfBEVgF4XEBxL9Bxhy6dnrm5hkzqmsWHGTiHqRiITNhMyFLyAiWndIJP7Z1NTteDg==",
-            "license": "MIT",
-            "peer": true
+            "license": "MIT"
         },
         "node_modules/dom-helpers": {
             "version": "5.2.1",
@@ -6043,7 +6035,6 @@
             "integrity": "sha512-sNXOfKCn74rt8RICKMvJS7XKV/Xk9kA7DyJr8mJik3S7Cwgy3qlkkmyS2uQB3jiJg6VNdZd/pDBJu0nvG2NlTg==",
             "dev": true,
             "license": "BSD-2-Clause",
-            "peer": true,
             "dependencies": {
                 "esrecurse": "^4.3.0",
                 "estraverse": "^5.2.0"
@@ -6074,7 +6065,6 @@
             "integrity": "sha512-5K1/mKhWaMfreBGJTwval43JJmkip0RmM+3+IuqupeSKNC/Th2Kc7ucaq5ovTSra/OOKB9c58CGSz3QMVbWt0A==",
             "dev": true,
             "license": "MIT",
-            "peer": true,
             "engines": {
                 "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
             },
@@ -6088,7 +6078,6 @@
             "integrity": "sha512-TtpcNJ3XAzx3Gq8sWRzJaVajRs0uVxA2YAkdb1jm2YkPz4G6egUFAyA3n5vtEIZefPk5Wa4UXbKuS5fKkJWdgA==",
             "dev": true,
             "license": "MIT",
-            "peer": true,
             "engines": {
                 "node": ">=10"
             },
@@ -6117,7 +6106,6 @@
             "integrity": "sha512-j6PAQ2uUr79PZhBjP5C5fhl8e39FmRnOjsD5lGnWrFU8i2G776tBK7+nP8KuQUTTyAZUwfQqXAgrVH5MbH9CYQ==",
             "dev": true,
             "license": "BSD-2-Clause",
-            "peer": true,
             "dependencies": {
                 "acorn": "^8.15.0",
                 "acorn-jsx": "^5.3.2",
@@ -6136,7 +6124,6 @@
             "integrity": "sha512-ca9pw9fomFcKPvFLXhBKUK90ZvGibiGOvRJNbjljY7s7uq/5YO4BOzcYtJqExdx99rF6aAcnRxHmcUHcz6sQsg==",
             "dev": true,
             "license": "BSD-3-Clause",
-            "peer": true,
             "dependencies": {
                 "estraverse": "^5.1.0"
             },
@@ -6150,7 +6137,6 @@
             "integrity": "sha512-KmfKL3b6G+RXvP8N1vr3Tq1kL/oCFgn2NYXEtqP8/L3pKapUA4G8cFVaoF3SU323CD4XypR/ffioHmkti6/Tag==",
             "dev": true,
             "license": "BSD-2-Clause",
-            "peer": true,
             "dependencies": {
                 "estraverse": "^5.2.0"
             },
@@ -6249,8 +6235,7 @@
             "resolved": "https://registry.npmjs.org/fast-deep-equal/-/fast-deep-equal-3.1.3.tgz",
             "integrity": "sha512-f3qQ9oQy9j2AhBe/H9VC91wLmKBCCU/gDOnKNAYG5hswO7BLKj09Hc5HYNz9cGI++xlpDCIgDaitVs03ATR84Q==",
             "dev": true,
-            "license": "MIT",
-            "peer": true
+            "license": "MIT"
         },
         "node_modules/fast-glob": {
             "version": "3.3.3",
@@ -6287,16 +6272,14 @@
             "resolved": "https://registry.npmjs.org/fast-json-stable-stringify/-/fast-json-stable-stringify-2.1.0.tgz",
             "integrity": "sha512-lhd/wF+Lk98HZoTCtlVraHtfh5XYijIjalXck7saUtuanSDyLMxnHhSXEDJqHxD7msR8D0uCmqlkwjCV8xvwHw==",
             "dev": true,
-            "license": "MIT",
-            "peer": true
+            "license": "MIT"
         },
         "node_modules/fast-levenshtein": {
             "version": "2.0.6",
             "resolved": "https://registry.npmjs.org/fast-levenshtein/-/fast-levenshtein-2.0.6.tgz",
             "integrity": "sha512-DCXu6Ifhqcks7TZKY3Hxp3y6qphY5SJZmrWMDrKcERSOXWQdMhU9Ig/PYrzyw/ul9jOIyh0N4M0tbC5hodg8dw==",
             "dev": true,
-            "license": "MIT",
-            "peer": true
+            "license": "MIT"
         },
         "node_modules/fastq": {
             "version": "1.19.1",
@@ -6327,7 +6310,6 @@
             "integrity": "sha512-XXTUwCvisa5oacNGRP9SfNtYBNAMi+RPwBFmblZEF7N7swHYQS6/Zfk7SRwx4D5j3CH211YNRco1DEMNVfZCnQ==",
             "dev": true,
             "license": "MIT",
-            "peer": true,
             "dependencies": {
                 "flat-cache": "^4.0.0"
             },
@@ -6353,7 +6335,6 @@
             "integrity": "sha512-78/PXT1wlLLDgTzDs7sjq9hzz0vXD+zn+7wypEe4fXQxCmdmqfGsEPQxmiCSQI3ajFV91bVSsvNtrJRiW6nGng==",
             "dev": true,
             "license": "MIT",
-            "peer": true,
             "dependencies": {
                 "locate-path": "^6.0.0",
                 "path-exists": "^4.0.0"
@@ -6371,7 +6352,6 @@
             "integrity": "sha512-f7ccFPK3SXFHpx15UIGyRJ/FJQctuKZ0zVuN3frBo4HnK3cay9VEW0R6yPYFHC0AgqhukPzKjq22t5DmAyqGyw==",
             "dev": true,
             "license": "MIT",
-            "peer": true,
             "dependencies": {
                 "flatted": "^3.2.9",
                 "keyv": "^4.5.4"
@@ -6385,8 +6365,7 @@
             "resolved": "https://registry.npmjs.org/flatted/-/flatted-3.3.3.tgz",
             "integrity": "sha512-GX+ysw4PBCz0PzosHDepZGANEuFCMLrnRTiEy9McGjmkCQYwRq4A/X786G/fjM/+OjsWSU1ZrY5qyARZmO/uwg==",
             "dev": true,
-            "license": "ISC",
-            "peer": true
+            "license": "ISC"
         },
         "node_modules/follow-redirects": {
             "version": "1.15.11",
@@ -6633,7 +6612,6 @@
             "integrity": "sha512-XxwI8EOhVQgWp6iDL+3b0r86f4d6AX6zSU55HfB4ydCEuXLXc5FcYeOu+nnGftS4TEju/11rt4KJPTMgbfmv4A==",
             "dev": true,
             "license": "ISC",
-            "peer": true,
             "dependencies": {
                 "is-glob": "^4.0.3"
             },
@@ -6647,7 +6625,6 @@
             "integrity": "sha512-oahGvuMGQlPw/ivIYBjVSrWAfWLBeku5tpPE2fOPLi+WHffIWbuh2tCjhyQhTBPMf5E9jDEH4FOmTYgYwbKwtQ==",
             "dev": true,
             "license": "MIT",
-            "peer": true,
             "engines": {
                 "node": ">=18"
             },
@@ -6983,7 +6960,6 @@
             "integrity": "sha512-hsBTNUqQTDwkWtcdYI2i06Y/nUBEsNEDJKjWdigLvegy8kDuJAS8uRlpkkcQpyEXL0Z/pjDy5HBmMjRCJ2gq+g==",
             "dev": true,
             "license": "MIT",
-            "peer": true,
             "engines": {
                 "node": ">= 4"
             }
@@ -7000,7 +6976,6 @@
             "integrity": "sha512-TR3KfrTZTYLPB6jUjfx6MF9WcWrHL9su5TObK4ZkYgBdWKPOFoSoQIdEuTuR82pmtxH2spWG9h6etwfr1pLBqQ==",
             "dev": true,
             "license": "MIT",
-            "peer": true,
             "dependencies": {
                 "parent-module": "^1.0.0",
                 "resolve-from": "^4.0.0"
@@ -7018,7 +6993,6 @@
             "integrity": "sha512-JmXMZ6wuvDmLiHEml9ykzqO6lwFbof0GG4IkcGaENdCRDDmMVnny7s5HsIgHCbaq0w2MyPhDqkhTUgS2LU2PHA==",
             "dev": true,
             "license": "MIT",
-            "peer": true,
             "engines": {
                 "node": ">=0.8.19"
             }
@@ -7522,15 +7496,13 @@
             "resolved": "https://registry.npmjs.org/isexe/-/isexe-2.0.0.tgz",
             "integrity": "sha512-RHxMLp9lnKHGHRng9QFhRCMbYAcVpn69smSGcq3f36xjgVVWThj4qqLbTLlq7Ssj8B+fIQ1EuCEGI2lKsyQeIw==",
             "dev": true,
-            "license": "ISC",
-            "peer": true
+            "license": "ISC"
         },
         "node_modules/isomorphic.js": {
             "version": "0.2.5",
             "resolved": "https://registry.npmjs.org/isomorphic.js/-/isomorphic.js-0.2.5.tgz",
             "integrity": "sha512-PIeMbHqMt4DnUP3MA/Flc0HElYjMXArsw1qwJZcm9sqR8mq3l8NYizFMty0pWwE/tzIGH3EKK5+jes5mAr85yw==",
             "license": "MIT",
-            "peer": true,
             "funding": {
                 "type": "GitHub Sponsors ❤",
                 "url": "https://github.com/sponsors/dmonad"
@@ -7798,24 +7770,21 @@
             "resolved": "https://registry.npmjs.org/json-buffer/-/json-buffer-3.0.1.tgz",
             "integrity": "sha512-4bV5BfR2mqfQTJm+V5tPPdf+ZpuhiIvTuAB5g8kcrXOZpTT/QwwVRWBywX1ozr6lEuPdbHxwaJlm9G6mI2sfSQ==",
             "dev": true,
-            "license": "MIT",
-            "peer": true
+            "license": "MIT"
         },
         "node_modules/json-schema-traverse": {
             "version": "0.4.1",
             "resolved": "https://registry.npmjs.org/json-schema-traverse/-/json-schema-traverse-0.4.1.tgz",
             "integrity": "sha512-xbbCH5dCYU5T8LcEhhuh7HJ88HXuW3qsI3Y0zOZFKfZEHcpWiHU/Jxzk629Brsab/mMiHQti9wMP+845RPe3Vg==",
             "dev": true,
-            "license": "MIT",
-            "peer": true
+            "license": "MIT"
         },
         "node_modules/json-stable-stringify-without-jsonify": {
             "version": "1.0.1",
             "resolved": "https://registry.npmjs.org/json-stable-stringify-without-jsonify/-/json-stable-stringify-without-jsonify-1.0.1.tgz",
             "integrity": "sha512-Bdboy+l7tA3OGW6FjyFHWkP5LuByj1Tk33Ljyq0axyzdk9//JSi2u3fP1QSmd1KNwq6VOKYGlAu87CisVir6Pw==",
             "dev": true,
-            "license": "MIT",
-            "peer": true
+            "license": "MIT"
         },
         "node_modules/json5": {
             "version": "2.2.3",
@@ -7864,7 +7833,6 @@
             "integrity": "sha512-oxVHkHR/EJf2CNXnWxRLW6mg7JyCCUcG0DtEGmL2ctUo1PNTin1PUil+r/+4r5MpVgC/fn1kjsx7mjSujKqIpw==",
             "dev": true,
             "license": "MIT",
-            "peer": true,
             "dependencies": {
                 "json-buffer": "3.0.1"
             }
@@ -7884,7 +7852,6 @@
             "integrity": "sha512-+bT2uH4E5LGE7h/n3evcS/sQlJXCpIp6ym8OWJ5eV6+67Dsql/LaaT7qJBAt2rzfoa/5QBGBhxDix1dMt2kQKQ==",
             "dev": true,
             "license": "MIT",
-            "peer": true,
             "dependencies": {
                 "prelude-ls": "^1.2.1",
                 "type-check": "~0.4.0"
@@ -7904,7 +7871,6 @@
             "resolved": "https://registry.npmjs.org/lib0/-/lib0-0.2.114.tgz",
             "integrity": "sha512-gcxmNFzA4hv8UYi8j43uPlQ7CGcyMJ2KQb5kZASw6SnAKAf10hK12i2fjrS3Cl/ugZa5Ui6WwIu1/6MIXiHttQ==",
             "license": "MIT",
-            "peer": true,
             "dependencies": {
                 "isomorphic.js": "^0.2.4"
             },
@@ -8193,7 +8159,6 @@
             "integrity": "sha512-iPZK6eYjbxRu3uB4/WZ3EsEIMJFMqAoopl3R+zuq0UjcAm/MO6KCweDgPfP3elTztoKP3KtnVHxTn2NHBSDVUw==",
             "dev": true,
             "license": "MIT",
-            "peer": true,
             "dependencies": {
                 "p-locate": "^5.0.0"
             },
@@ -9701,7 +9666,6 @@
             "integrity": "sha512-6IpQ7mKUxRcZNLIObR0hz7lxsapSSIYNZJwXPGeF0mTVqGKFIXj1DQcMoT22S3ROcLyY/rz0PWaWZ9ayWmad9g==",
             "dev": true,
             "license": "MIT",
-            "peer": true,
             "dependencies": {
                 "deep-is": "^0.1.3",
                 "fast-levenshtein": "^2.0.6",
@@ -9744,7 +9708,6 @@
             "integrity": "sha512-TYOanM3wGwNGsZN2cVTYPArw454xnXj5qmWF1bEoAc4+cU/ol7GVh7odevjp1FNHduHc3KZMcFduxU5Xc6uJRQ==",
             "dev": true,
             "license": "MIT",
-            "peer": true,
             "dependencies": {
                 "yocto-queue": "^0.1.0"
             },
@@ -9761,7 +9724,6 @@
             "integrity": "sha512-LaNjtRWUBY++zB5nE/NwcaoMylSPk+S+ZHNB1TzdbMJMny6dynpAGt7X/tl/QYq3TIeE6nxHppbo2LGymrG5Pw==",
             "dev": true,
             "license": "MIT",
-            "peer": true,
             "dependencies": {
                 "p-limit": "^3.0.2"
             },
@@ -9784,7 +9746,6 @@
             "integrity": "sha512-GQ2EWRpQV8/o+Aw8YqtfZZPfNRWZYkbidE9k5rpl/hC3vtHHBfGm2Ifi6qWV+coDGkrUKZAxE3Lot5kcsRlh+g==",
             "dev": true,
             "license": "MIT",
-            "peer": true,
             "dependencies": {
                 "callsites": "^3.0.0"
             },
@@ -9835,7 +9796,6 @@
             "integrity": "sha512-ak9Qy5Q7jYb2Wwcey5Fpvg2KoAc/ZIhLSLOSBmRmygPsGwkVVt0fZa0qrtMz+m6tJTAHfZQ8FnmB4MG4LWy7/w==",
             "dev": true,
             "license": "MIT",
-            "peer": true,
             "engines": {
                 "node": ">=8"
             }
@@ -9846,7 +9806,6 @@
             "integrity": "sha512-ojmeN0qd+y0jszEtoY48r0Peq5dwMEkIlCOu6Q5f41lfkswXuKtYrhgoTpLnyIcHm24Uhqx+5Tqm2InSwLhE6Q==",
             "dev": true,
             "license": "MIT",
-            "peer": true,
             "engines": {
                 "node": ">=8"
             }
@@ -9912,6 +9871,7 @@
                 }
             ],
             "license": "MIT",
+            "peer": true,
             "dependencies": {
                 "nanoid": "^3.3.11",
                 "picocolors": "^1.1.1",
@@ -9947,7 +9907,6 @@
             "integrity": "sha512-vkcDPrRZo1QZLbn5RLGPpg/WmIQ65qoWWhcGKf/b5eplkkarX0m9z8ppCat4mlOqUsWpyNuYgO3VRyrYHSzX5g==",
             "dev": true,
             "license": "MIT",
-            "peer": true,
             "engines": {
                 "node": ">= 0.8.0"
             }
@@ -9957,7 +9916,6 @@
             "resolved": "https://registry.npmjs.org/pretty-format/-/pretty-format-27.5.1.tgz",
             "integrity": "sha512-Qb1gy5OrP5+zDf2Bvnzdl3jsTf1qXVMazbvCoKhtKqVs4/YK4ozX4gKQJJVyNe+cajNPn0KoC0MC3FUmaHWEmQ==",
             "license": "MIT",
-            "peer": true,
             "dependencies": {
                 "ansi-regex": "^5.0.1",
                 "ansi-styles": "^5.0.0",
@@ -9972,7 +9930,6 @@
             "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-5.2.0.tgz",
             "integrity": "sha512-Cxwpt2SfTzTtXcfOlzGEee8O+c+MmUgGrNiBcXnuWxuFJHe6a5Hz7qwhwe5OgaSYI0IJvkLqWX1ASG+cJOkEiA==",
             "license": "MIT",
-            "peer": true,
             "engines": {
                 "node": ">=10"
             },
@@ -10034,7 +9991,6 @@
             "integrity": "sha512-vYt7UD1U9Wg6138shLtLOvdAu+8DsC/ilFtEVHcH+wydcSpNE20AfSOduf6MkRFahL5FY7X1oU7nKVZFtfq8Fg==",
             "dev": true,
             "license": "MIT",
-            "peer": true,
             "engines": {
                 "node": ">=6"
             }
@@ -10065,6 +10021,7 @@
             "resolved": "https://registry.npmjs.org/react/-/react-19.1.1.tgz",
             "integrity": "sha512-w8nqGImo45dmMIfljjMwOGtbmC/mk4CMYhWIicdSflH91J9TyCyczcPFXJzrZ/ZXcgGRFeP6BU0BEJTw6tZdfQ==",
             "license": "MIT",
+            "peer": true,
             "engines": {
                 "node": ">=0.10.0"
             }
@@ -10083,6 +10040,7 @@
             "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-19.1.1.tgz",
             "integrity": "sha512-Dlq/5LAZgF0Gaz6yiqZCf6VCcZs1ghAJyrsu84Q/GT0gV+mCxbfmKNoGRKBYMJ8IEdGPqu49YWXD02GCknEDkw==",
             "license": "MIT",
+            "peer": true,
             "dependencies": {
                 "scheduler": "^0.26.0"
             },
@@ -10490,7 +10448,6 @@
             "integrity": "sha512-pb/MYmXstAkysRFx8piNI1tGFNQIFA3vkE3Gq4EuA1dF6gHp/+vgZqsCGJapvy8N3Q+4o7FwvquPJcnZ7RYy4g==",
             "dev": true,
             "license": "MIT",
-            "peer": true,
             "engines": {
                 "node": ">=4"
             }
@@ -10740,7 +10697,6 @@
             "integrity": "sha512-kHxr2zZpYtdmrN1qDjrrX/Z1rR1kG8Dx+gkpK1G4eXmvXswmcE1hTWBWYUzlraYw1/yZp6YuDY77YtvbN0dmDA==",
             "dev": true,
             "license": "MIT",
-            "peer": true,
             "dependencies": {
                 "shebang-regex": "^3.0.0"
             },
@@ -10754,7 +10710,6 @@
             "integrity": "sha512-7++dFhtcx3353uBaq8DDR4NuxBetBzC7ZQOhmTQInHEd6bSrXdiEyzCvG07Z44UYdLShWUyXt5M/yhz8ekcb1A==",
             "dev": true,
             "license": "MIT",
-            "peer": true,
             "engines": {
                 "node": ">=8"
             }
@@ -11056,7 +11011,6 @@
             "integrity": "sha512-6fPc+R4ihwqP6N/aIv2f1gMH8lOVtWQHoqC4yK6oSDVVocumAsfCqjkXnqiYMhmMwS/mEHLp7Vehlt3ql6lEig==",
             "dev": true,
             "license": "MIT",
-            "peer": true,
             "engines": {
                 "node": ">=8"
             },
@@ -11118,6 +11072,7 @@
             "resolved": "https://registry.npmjs.org/swr/-/swr-2.3.6.tgz",
             "integrity": "sha512-wfHRmHWk/isGNMwlLGlZX5Gzz/uTgo0o2IRuTMcf4CPuPFJZlq0rDaKUx+ozB5nBOReNV1kiOyzMfj+MBMikLw==",
             "license": "MIT",
+            "peer": true,
             "dependencies": {
                 "dequal": "^2.0.3",
                 "use-sync-external-store": "^1.4.0"
@@ -11136,7 +11091,8 @@
             "version": "4.1.12",
             "resolved": "https://registry.npmjs.org/tailwindcss/-/tailwindcss-4.1.12.tgz",
             "integrity": "sha512-DzFtxOi+7NsFf7DBtI3BJsynR+0Yp6etH+nRPTbpWnS2pZBaSksv/JGctNwSWzbFjp0vxSqknaUylseZqMDGrA==",
-            "license": "MIT"
+            "license": "MIT",
+            "peer": true
         },
         "node_modules/tapable": {
             "version": "2.2.2",
@@ -11214,6 +11170,7 @@
             "integrity": "sha512-5gTmgEY/sqK6gFXLIsQNH19lWb4ebPDLA4SdLP7dsWkIXHWlG66oPuVvXSGFPppYZz8ZDZq0dYYrbHfBCVUb1Q==",
             "dev": true,
             "license": "MIT",
+            "peer": true,
             "engines": {
                 "node": ">=12"
             },
@@ -11293,7 +11250,6 @@
             "integrity": "sha512-XleUoc9uwGXqjWwXaUTZAmzMcFZ5858QA2vvx1Ur5xIcixXIP+8LnFDgRplU30us6teqdlskFfu+ae4K79Ooew==",
             "dev": true,
             "license": "MIT",
-            "peer": true,
             "dependencies": {
                 "prelude-ls": "^1.2.1"
             },
@@ -11384,6 +11340,7 @@
             "resolved": "https://registry.npmjs.org/typescript/-/typescript-5.9.2.tgz",
             "integrity": "sha512-CWBzXQrc/qOkhidw1OzBTQuYRbfyxDXJMVJ1XNwUHGROVmuaeiEm3OslpZ1RV96d7SKKjZKrSJu3+t/xlw3R9A==",
             "license": "Apache-2.0",
+            "peer": true,
             "bin": {
                 "tsc": "bin/tsc",
                 "tsserver": "bin/tsserver"
@@ -11563,7 +11520,6 @@
             "integrity": "sha512-7rKUyy33Q1yc98pQ1DAmLtwX109F7TIfWlW1Ydo8Wl1ii1SeHieeh0HHfPeL2fMXK6z0s8ecKs9frCuLJvndBg==",
             "dev": true,
             "license": "BSD-2-Clause",
-            "peer": true,
             "dependencies": {
                 "punycode": "^2.1.0"
             }
@@ -11692,6 +11648,7 @@
             "integrity": "sha512-OOUi5zjkDxYrKhTV3V7iKsoS37VUM7v40+HuwEmcrsf11Cdx9y3DIr2Px6liIcZFwt3XSRpQvFpL3WVy7ApkGw==",
             "dev": true,
             "license": "MIT",
+            "peer": true,
             "dependencies": {
                 "esbuild": "^0.25.0",
                 "fdir": "^6.5.0",
@@ -11785,6 +11742,7 @@
             "integrity": "sha512-5gTmgEY/sqK6gFXLIsQNH19lWb4ebPDLA4SdLP7dsWkIXHWlG66oPuVvXSGFPppYZz8ZDZq0dYYrbHfBCVUb1Q==",
             "dev": true,
             "license": "MIT",
+            "peer": true,
             "engines": {
                 "node": ">=12"
             },
@@ -11820,7 +11778,6 @@
             "integrity": "sha512-BLI3Tl1TW3Pvl70l3yq3Y64i+awpwXqsGBYWkkqMtnbXgrMD+yj7rhW0kuEDxzJaYXGjEW5ogapKNMEKNMjibA==",
             "dev": true,
             "license": "ISC",
-            "peer": true,
             "dependencies": {
                 "isexe": "^2.0.0"
             },
@@ -11933,7 +11890,6 @@
             "integrity": "sha512-BN22B5eaMMI9UMtjrGd5g5eCYPpCPDUy0FJXbYsaT5zYxjFOckS53SQDE3pWkVoWpHXVb3BrYcEN4Twa55B5cA==",
             "dev": true,
             "license": "MIT",
-            "peer": true,
             "engines": {
                 "node": ">=0.10.0"
             }
@@ -11969,7 +11925,6 @@
             "integrity": "sha512-rVksvsnNCdJ/ohGc6xgPwyN8eheCxsiLM8mxuE/t/mOVqJewPuO1miLpTHQiRgTKCLexL4MeAFVagts7HmNZ2Q==",
             "dev": true,
             "license": "MIT",
-            "peer": true,
             "engines": {
                 "node": ">=10"
             },

From cdf34dea252a04d6860bd15ca9298f3b5427b7a0 Mon Sep 17 00:00:00 2001
From: Aleksandre <aleksandre.nozadze.1@iliauni.edu.ge>
Date: Fri, 26 Sep 2025 13:14:10 +0400
Subject: [PATCH 32/81] Refactor: `HandleErr` to throw errors instead of using
 context

---
 src/Services/errorHandler.ts | 13 +++++--------
 1 file changed, 5 insertions(+), 8 deletions(-)

diff --git a/src/Services/errorHandler.ts b/src/Services/errorHandler.ts
index d8313fc..d10289a 100644
--- a/src/Services/errorHandler.ts
+++ b/src/Services/errorHandler.ts
@@ -1,22 +1,19 @@
 import axios from "axios";
-import { useError } from "../Contexts/ErrorContext";
 
 export const HandleErr = (err: any, key?: string) => {
-    const { addError } = useError();
-
     if (axios.isAxiosError(err)) {
         switch (err.response?.status) {
             case 401:
-                return addError(`Unauthorized`);
+                throw new Error(`Unauthorized`);
             case 404:
-                return addError(`Resource not found`);
+                throw new Error(`Resource not found`);
             case 500:
-                return addError(`Internal server error`);
+                throw new Error(`Internal server error`);
             default:
-                return addError(`An error occurred while fetching ${key}`);
+                throw new Error(`An error occurred while fetching ${key}`);
         }
     } else {
-        return addError(
+        throw new Error(
             `An error occurred while fetching ${key}: ${err.message}`,
         );
     }

From 01a2621b4fc73e37c421dacb71cb387249a181c4 Mon Sep 17 00:00:00 2001
From: Aleksandre <aleksandre.nozadze.1@iliauni.edu.ge>
Date: Mon, 29 Sep 2025 16:47:53 +0400
Subject: [PATCH 33/81] refactor: Remove console.log from UserContext

---
 src/Contexts/UserContext.tsx | 1 -
 1 file changed, 1 deletion(-)

diff --git a/src/Contexts/UserContext.tsx b/src/Contexts/UserContext.tsx
index 20ceb1a..3622229 100644
--- a/src/Contexts/UserContext.tsx
+++ b/src/Contexts/UserContext.tsx
@@ -37,7 +37,6 @@ export const UserProvider: React.FC<{ children: ReactNode }> = ({
 
             try {
                 const data = await Authenticate();
-                console.log(data);
 
                 if (data) {
                     setAuthenticated(true);

From 71cd29fcbde3ef997c5c779517e5afa88deaf8ae Mon Sep 17 00:00:00 2001
From: Aleksandre <aleksandre.nozadze.1@iliauni.edu.ge>
Date: Mon, 29 Sep 2025 16:47:53 +0400
Subject: [PATCH 34/81] feat: Integrate sortBy for chapter fetching in
 ContentContext

---
 src/Contexts/ContentContext.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/Contexts/ContentContext.tsx b/src/Contexts/ContentContext.tsx
index f6b6b0a..3727c09 100644
--- a/src/Contexts/ContentContext.tsx
+++ b/src/Contexts/ContentContext.tsx
@@ -30,7 +30,7 @@ export const ContentProvider: React.FC<{ children: ReactNode }> = ({
     const { addError } = useError();
     const { setLoading } = useLoading();
 
-    const { user } = useUser();
+    const { sortBy } = useUser();
 
     const [chapters, setChapters] = useState<Chapter[]>([]);
     const [chapterId, setChapterId] = useState<string | null>(null);
@@ -47,7 +47,7 @@ export const ContentProvider: React.FC<{ children: ReactNode }> = ({
         if (!novel) return null;
 
         if (pageIndex === 0) {
-            return `/${novel.id}/chapters?order=desc`;
+            return `/${novel.id}/chapters?sort=${sortBy}`;
         }
 
         if (previousPageData && !previousPageData.next_cursor) return null;

From d13794a14095e046f8a0431bc927416f20b9419e Mon Sep 17 00:00:00 2001
From: Aleksandre <aleksandre.nozadze.1@iliauni.edu.ge>
Date: Mon, 29 Sep 2025 16:47:53 +0400
Subject: [PATCH 35/81] refactor: Centralize and improve registration
 validation

---
 src/Pages/RegisterPage.tsx | 47 ++++++++++++++++----------------------
 1 file changed, 20 insertions(+), 27 deletions(-)

diff --git a/src/Pages/RegisterPage.tsx b/src/Pages/RegisterPage.tsx
index 8bb10bd..11392e8 100644
--- a/src/Pages/RegisterPage.tsx
+++ b/src/Pages/RegisterPage.tsx
@@ -30,30 +30,6 @@ const RegisterPage = () => {
     };
 
     const handleEmailChange = (e: React.ChangeEvent<HTMLInputElement>) => {
-        if (
-            !e.target.value.match(
-                /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/,
-            )
-        ) {
-            addError("Invalid email!");
-            return;
-        } else if (e.target.value.length >= 50) {
-            addError("Email is too long!");
-            return;
-        } else if (e.target.value.length <= 5) {
-            addError("Email is too short!");
-            return;
-        } else {
-            errors.forEach((error) => {
-                if (
-                    error.message === "Invalid email!" ||
-                    error.message === "Email is too short!" ||
-                    error.message === "Email is too long!"
-                ) {
-                    removeError(error.id);
-                }
-            });
-        }
         setEmail(e.target.value);
     };
 
@@ -79,23 +55,40 @@ const RegisterPage = () => {
 
     const HandlerRegister = async (e: React.FormEvent) => {
         e.preventDefault();
-        setLoading(true);
 
+        // Validate everything before submitting
         if (!username || username === "") {
             addError("Username is required!");
+            setLoading(false);
             return;
         }
-
         if (!email || email === "") {
             addError("Email is required!");
+            setLoading(false);
+            return;
+        }
+        if (email.length < 5) {
+            addError("Email is too short!");
+            setLoading(false);
+            return;
+        }
+        if (email.length >= 50) {
+            addError("Email is too long!");
+            setLoading(false);
+            return;
+        }
+        if (!email.match(/^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/)) {
+            addError("Invalid email!");
+            setLoading(false);
             return;
         }
-
         if (!password || password === "") {
             addError("Password is required!");
+            setLoading(false);
             return;
         }
 
+        setLoading(true);
         try {
             const data = await Register(username, email, password);
             if (data.message) {

From 6b73c88223465c743dd5fbc8b8b742b2e44c6878 Mon Sep 17 00:00:00 2001
From: Aleksandre <aleksandre.nozadze.1@iliauni.edu.ge>
Date: Mon, 29 Sep 2025 17:44:20 +0400
Subject: [PATCH 36/81] refactor: Remove unused 'index' prop from ChapterCard

---
 src/Components/ChapterCard.tsx | 2 +-
 src/Pages/NovelPage.tsx        | 6 +-----
 src/Pages/NovelsPage.tsx       | 8 +-------
 src/Types/types.ts             | 1 -
 4 files changed, 3 insertions(+), 14 deletions(-)

diff --git a/src/Components/ChapterCard.tsx b/src/Components/ChapterCard.tsx
index 3cf920f..03b03e1 100644
--- a/src/Components/ChapterCard.tsx
+++ b/src/Components/ChapterCard.tsx
@@ -5,7 +5,7 @@ import FormattedTime from "./FormattedTime";
 import useSWR from "swr";
 import { useContent } from "../Contexts/ContentContext";
 
-const ChapterCard: React.FC<ChapterCardProps> = ({ chapter, index }) => {
+const ChapterCard: React.FC<ChapterCardProps> = ({ chapter }) => {
     const { novel } = useContent();
 
     if (!novel) return null;
diff --git a/src/Pages/NovelPage.tsx b/src/Pages/NovelPage.tsx
index 7f0dc87..9d9f399 100644
--- a/src/Pages/NovelPage.tsx
+++ b/src/Pages/NovelPage.tsx
@@ -173,11 +173,7 @@ const NovelPage = () => {
                                 {chapters &&
                                     chapters.length > 0 &&
                                     chapters.map((c, i) => (
-                                        <ChapterCard
-                                            chapter={c}
-                                            index={i}
-                                            key={c.id}
-                                        />
+                                        <ChapterCard chapter={c} key={c.id} />
                                     ))}
                             </div>
                             {hasMore ? (
diff --git a/src/Pages/NovelsPage.tsx b/src/Pages/NovelsPage.tsx
index 4c6894c..87553a7 100644
--- a/src/Pages/NovelsPage.tsx
+++ b/src/Pages/NovelsPage.tsx
@@ -80,13 +80,7 @@ const NovelsPage: React.FC = () => {
                         {chapters.length > 0 ? (
                             novel &&
                             chapters.map((c, i) => {
-                                return (
-                                    <ChapterCard
-                                        chapter={c}
-                                        index={i}
-                                        key={i}
-                                    />
-                                );
+                                return <ChapterCard chapter={c} key={c.id} />;
                             })
                         ) : (
                             <p className="subtitle text-center mt-16">
diff --git a/src/Types/types.ts b/src/Types/types.ts
index 6152cbd..85fbd2a 100644
--- a/src/Types/types.ts
+++ b/src/Types/types.ts
@@ -26,7 +26,6 @@ export interface PaginationResponse {
 
 export interface ChapterCardProps {
     chapter: Chapter;
-    index: number;
 }
 
 export interface SearchInputProps {

From b02af3f6452ccd5d94fd9af9bc531e00ce14de3d Mon Sep 17 00:00:00 2001
From: Aleksandre <aleksandre.nozadze.1@iliauni.edu.ge>
Date: Mon, 29 Sep 2025 17:44:20 +0400
Subject: [PATCH 37/81] fix(ui): Correct SVG attribute casing in ScrollButtons

---
 src/Components/ScrollButtons.tsx | 12 ++++++------
 1 file changed, 6 insertions(+), 6 deletions(-)

diff --git a/src/Components/ScrollButtons.tsx b/src/Components/ScrollButtons.tsx
index d5c7c9c..45c69bd 100644
--- a/src/Components/ScrollButtons.tsx
+++ b/src/Components/ScrollButtons.tsx
@@ -60,9 +60,9 @@ const ScrollButtons = () => {
                         <path
                             d="M5 1L1 5L5 9"
                             stroke="#fab387"
-                            stroke-width="1"
-                            stroke-linecap="round"
-                            stroke-linejoin="round"
+                            strokeWidth="1"
+                            strokeLinecap="round"
+                            strokeLinejoin="round"
                         ></path>
                     </svg>
                 </button>
@@ -84,9 +84,9 @@ const ScrollButtons = () => {
                         <path
                             d="M5 1L1 5L5 9"
                             stroke="#fab387"
-                            stroke-width="1"
-                            stroke-linecap="round"
-                            stroke-linejoin="round"
+                            strokeWidth="1"
+                            strokeLinecap="round"
+                            strokeLinejoin="round"
                         ></path>
                     </svg>
                 </button>

From 01723e38affab5d4373ad5f948abe3c415c5b16d Mon Sep 17 00:00:00 2001
From: Aleksandre <aleksandre.nozadze.1@iliauni.edu.ge>
Date: Mon, 29 Sep 2025 17:44:20 +0400
Subject: [PATCH 38/81] feat(error): Improve global error handling in
 errorHandler

---
 src/Services/errorHandler.ts | 13 +++++++++++--
 1 file changed, 11 insertions(+), 2 deletions(-)

diff --git a/src/Services/errorHandler.ts b/src/Services/errorHandler.ts
index d10289a..3ee735e 100644
--- a/src/Services/errorHandler.ts
+++ b/src/Services/errorHandler.ts
@@ -1,6 +1,10 @@
 import axios from "axios";
 
 export const HandleErr = (err: any, key?: string) => {
+    if (err == null) {
+        throw new Error(`An error occurred while fetching ${key ?? "unknown"}`);
+    }
+
     if (axios.isAxiosError(err)) {
         switch (err.response?.status) {
             case 401:
@@ -9,12 +13,17 @@ export const HandleErr = (err: any, key?: string) => {
                 throw new Error(`Resource not found`);
             case 500:
                 throw new Error(`Internal server error`);
+            case 301:
+                throw new Error(`Illegal Redirect`);
             default:
-                throw new Error(`An error occurred while fetching ${key}`);
+                throw new Error(
+                    `An error occurred while fetching ${key ?? "unknown"}`,
+                );
         }
     } else {
+        const errorMessage = err?.message || "Unknown error";
         throw new Error(
-            `An error occurred while fetching ${key}: ${err.message}`,
+            `An error occurred while fetching ${key ?? "unknown"}: ${errorMessage}`,
         );
     }
 };

From 88acb87631c4e7d93992e04141d62a8d4303b899 Mon Sep 17 00:00:00 2001
From: Aleksandre <aleksandre.nozadze.1@iliauni.edu.ge>
Date: Mon, 29 Sep 2025 17:44:20 +0400
Subject: [PATCH 39/81] refactor(novel): Improve NovelPage description toggle
 and markdown rendering

---
 src/Pages/NovelPage.tsx | 32 ++++++++++++--------------------
 1 file changed, 12 insertions(+), 20 deletions(-)

diff --git a/src/Pages/NovelPage.tsx b/src/Pages/NovelPage.tsx
index 9d9f399..46c26ed 100644
--- a/src/Pages/NovelPage.tsx
+++ b/src/Pages/NovelPage.tsx
@@ -79,19 +79,19 @@ const NovelPage = () => {
                                 <h2 className="ml-3 text-1xl">
                                     By {novel.author}
                                 </h2>
-                                <p
+
+                                <div
                                     onClick={() => {
                                         setHideDescription(!hideDescription);
                                     }}
                                     className="mt-4 subtitle cursor-pointer"
                                 >
-                                    <AnimatePresence>
+                                    <AnimatePresence mode="sync">
                                         <ComponentAnimationWrapper
-                                            hidden={!hideDescription}
+                                            key={"short"}
+                                            hidden={hideDescription}
                                         >
-                                            <div
-                                                className={`${hideDescription ? "hidden" : "indent-5 leading-snug w-full"}`}
-                                            >
+                                            <div className="indent-5 leading-snug w-full">
                                                 <ReactMarkdown
                                                     components={{
                                                         p: ({
@@ -107,18 +107,15 @@ const NovelPage = () => {
                                                     remarkPlugins={[remarkGfm]}
                                                     rehypePlugins={[rehypeRaw]}
                                                 >
-                                                    {"&gt; " +
-                                                        novel.description}
+                                                    {`${"&gt; "} ${novel.description.substring(0, 25)}...`}
                                                 </ReactMarkdown>
                                             </div>
                                         </ComponentAnimationWrapper>
-
                                         <ComponentAnimationWrapper
-                                            hidden={hideDescription}
+                                            key={"full"}
+                                            hidden={!hideDescription}
                                         >
-                                            <div
-                                                className={`${!hideDescription ? "hidden" : "indent-5 leading-snug w-full"}`}
-                                            >
+                                            <div className="indent-5 leading-snug w-full">
                                                 <ReactMarkdown
                                                     components={{
                                                         p: ({
@@ -134,17 +131,12 @@ const NovelPage = () => {
                                                     remarkPlugins={[remarkGfm]}
                                                     rehypePlugins={[rehypeRaw]}
                                                 >
-                                                    {"&gt; " +
-                                                        novel.description.substring(
-                                                            0,
-                                                            25,
-                                                        ) +
-                                                        "..."}
+                                                    {`${"&gt; "} ${novel.description}`}
                                                 </ReactMarkdown>
                                             </div>
                                         </ComponentAnimationWrapper>
                                     </AnimatePresence>
-                                </p>
+                                </div>
                             </div>
                         </div>
                     )}

From a5dfa4cf6f94b0289a4602ea778c696583b89a34 Mon Sep 17 00:00:00 2001
From: Aleksandre <aleksandre.nozadze.1@iliauni.edu.ge>
Date: Mon, 29 Sep 2025 20:28:02 +0400
Subject: [PATCH 40/81] feat: Implement dynamic chapter sorting

---
 src/Contexts/ContentContext.tsx | 25 +++++++++++++------
 src/Pages/NovelPage.tsx         | 43 ++++++++++++++++++++++++++++-----
 2 files changed, 55 insertions(+), 13 deletions(-)

diff --git a/src/Contexts/ContentContext.tsx b/src/Contexts/ContentContext.tsx
index 3727c09..c5e2a2c 100644
--- a/src/Contexts/ContentContext.tsx
+++ b/src/Contexts/ContentContext.tsx
@@ -52,7 +52,7 @@ export const ContentProvider: React.FC<{ children: ReactNode }> = ({
 
         if (previousPageData && !previousPageData.next_cursor) return null;
 
-        return `/${novel.id}/chapters?cursor=${previousPageData?.next_cursor ?? ""}&order=desc`;
+        return `/${novel.id}/chapters?cursor=${previousPageData?.next_cursor ?? ""}&sort=${sortBy}`;
     };
 
     const {
@@ -103,14 +103,25 @@ export const ContentProvider: React.FC<{ children: ReactNode }> = ({
             ? data_inf.flatMap((page) => page.chapters)
             : [];
 
-        const sortedChapters = allChapters.sort((a, b) => {
-            return b.title.localeCompare(a.title, undefined, {
-                numeric: true,
-                sensitivity: "base",
+        if (sortBy == "asc") {
+            const sortedChapters = allChapters.sort((a, b) => {
+                return a.title.localeCompare(b.title, undefined, {
+                    numeric: true,
+                    sensitivity: "base",
+                });
             });
-        });
 
-        setChapters(sortedChapters);
+            setChapters(sortedChapters);
+        } else {
+            const sortedChapters = allChapters.sort((a, b) => {
+                return b.title.localeCompare(a.title, undefined, {
+                    numeric: true,
+                    sensitivity: "base",
+                });
+            });
+
+            setChapters(sortedChapters);
+        }
     }, [data_inf]);
 
     useEffect(() => {
diff --git a/src/Pages/NovelPage.tsx b/src/Pages/NovelPage.tsx
index 46c26ed..c101166 100644
--- a/src/Pages/NovelPage.tsx
+++ b/src/Pages/NovelPage.tsx
@@ -4,7 +4,11 @@ import ChapterCard from "../Components/ChapterCard";
 import FormattedTime from "../Components/FormattedTime";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 
-import { faArrowRight } from "@fortawesome/free-solid-svg-icons";
+import {
+    faArrowDown,
+    faArrowRight,
+    faArrowUp,
+} from "@fortawesome/free-solid-svg-icons";
 import GoBackButton from "../Components/GoBackButton";
 import { useUser } from "../Contexts/UserContext";
 import { useContent } from "../Contexts/ContentContext";
@@ -23,7 +27,7 @@ const NovelPage = () => {
     const [hideDescription, setHideDescription] = useState(false);
     const [isBackPopoverOpen, setIsBackPopoverOpen] = useState(false);
 
-    const { user } = useUser();
+    const { user, sortBy, setSortBy } = useUser();
     const { loading, setLoading } = useLoading();
     const { novel, setNovel, novels, chapters, loadMore, hasMore, chapter } =
         useContent();
@@ -139,10 +143,37 @@ const NovelPage = () => {
                                 </div>
                             </div>
                         </div>
-                    )}
-                </div>
-                <div className="w-full md:w-2/6 mt-8 md:mt-0 flex flex-col flex-wrap">
-                    {novel && (
+
+                        <div className="w-full flex flex-row justify-center my-2 content">
+                            <span>Sort</span>
+                            <span className="mx-2"> - </span>
+                            <div
+                                className="flex flex-row justify-center items-center cursor-pointer"
+                                onClick={() => {
+                                    setSortBy(sortBy == "asc" ? "desc" : "asc");
+                                    loadMore();
+                                }}
+                            >
+                                <span className="link">
+                                    [
+                                    {sortBy == "asc"
+                                        ? "Ascending"
+                                        : "Descending"}
+                                    ]
+                                </span>
+                                <span className="link text-xs flex items-center">
+                                    <FontAwesomeIcon
+                                        icon={
+                                            sortBy == "asc"
+                                                ? faArrowUp
+                                                : faArrowDown
+                                        }
+                                        className="mx-2"
+                                    />
+                                </span>
+                            </div>
+                        </div>
+
                         <div>
                             <div className="w-full flex flex-row flex-wrap justify-center">
                                 <FormattedTime

From abe09a23fb80210b967ef1c1ed9515604fd7fe6f Mon Sep 17 00:00:00 2001
From: Aleksandre <aleksandre.nozadze.1@iliauni.edu.ge>
Date: Mon, 29 Sep 2025 20:28:02 +0400
Subject: [PATCH 41/81] feat: Add customizable chapter content padding

---
 src/Contexts/UserContext.tsx | 3 +++
 src/Pages/ChapterPage.tsx    | 9 ++++-----
 src/Types/types.ts           | 2 ++
 3 files changed, 9 insertions(+), 5 deletions(-)

diff --git a/src/Contexts/UserContext.tsx b/src/Contexts/UserContext.tsx
index 3622229..693ce33 100644
--- a/src/Contexts/UserContext.tsx
+++ b/src/Contexts/UserContext.tsx
@@ -29,6 +29,7 @@ export const UserProvider: React.FC<{ children: ReactNode }> = ({
     const [colorScheme, setColorScheme] = useState<string>("light");
     const [fontSize, setFontSize] = useState<string>("medium");
     const [sortBy, setSortBy] = useState<"asc" | "desc">("desc");
+    const [padding, setPadding] = useState<string>("8");
 
     useEffect(() => {
         const controller = new AbortController();
@@ -101,6 +102,8 @@ export const UserProvider: React.FC<{ children: ReactNode }> = ({
                 setFontSize,
                 sortBy,
                 setSortBy,
+                padding,
+                setPadding,
             }}
         >
             {children}
diff --git a/src/Pages/ChapterPage.tsx b/src/Pages/ChapterPage.tsx
index 942f2ef..4e56cd3 100644
--- a/src/Pages/ChapterPage.tsx
+++ b/src/Pages/ChapterPage.tsx
@@ -15,14 +15,12 @@ const ChapterPage = () => {
     const { id_novel } = useParams();
     const { id_chapter } = useParams();
 
-    const { fontSize } = useUser();
+    const { user, fontSize, padding } = useUser();
 
     const [isLeftPopoverOpen, setIsLeftPopoverOpen] = useState(false);
     const [isRightPopoverOpen, setIsRightPopoverOpen] = useState(false);
     const [isBackPopoverOpen, setIsBackPopoverOpen] = useState(false);
 
-    const { user } = useUser();
-
     const {
         chapter,
         novel,
@@ -143,7 +141,7 @@ const ChapterPage = () => {
     };
 
     return (
-        <div className="w-full px-6 flex flex-col flex-nowrap">
+        <div className="w-full flex flex-col flex-nowrap">
             {chapter && novel && (
                 <div className="w-full flex flex-col justify-center items-center">
                     {user &&
@@ -170,7 +168,8 @@ const ChapterPage = () => {
                     </div>
 
                     <div
-                        className={`w-full max-w-3xl mt-4 prose prose-lg font-sans text-${fontSize ?? "lg"} leading-normal`}
+                        id="chapter-content"
+                        className={`w-full mt-4 prose prose-lg font-sans px-${padding ?? "4"} text-${fontSize ?? "lg"} leading-normal`}
                     >
                         <ReactMarkdown
                             components={{
diff --git a/src/Types/types.ts b/src/Types/types.ts
index 85fbd2a..03c0ef0 100644
--- a/src/Types/types.ts
+++ b/src/Types/types.ts
@@ -74,6 +74,8 @@ export interface UserContextType {
     setFontSize: (fontSize: string) => void;
     sortBy: "asc" | "desc";
     setSortBy: (sortBy: "asc" | "desc") => void;
+    padding: string;
+    setPadding: (padding: string) => void;
 }
 
 export interface ContentContextType {

From 07e815c28f33ec03f116d3aba18f81ae152ded87 Mon Sep 17 00:00:00 2001
From: Aleksandre <aleksandre.nozadze.1@iliauni.edu.ge>
Date: Mon, 29 Sep 2025 20:28:03 +0400
Subject: [PATCH 42/81] refactor: Replace SettingsDropdown with fixed
 SettingsSidebar

---
 src/Components/SettingsDropdown.tsx |  69 ------------
 src/Components/SettingsSidebar.tsx  | 156 ++++++++++++++++++++++++++++
 src/Layouts/ChapterPageLayout.tsx   |   4 +-
 3 files changed, 159 insertions(+), 70 deletions(-)
 delete mode 100644 src/Components/SettingsDropdown.tsx
 create mode 100644 src/Components/SettingsSidebar.tsx

diff --git a/src/Components/SettingsDropdown.tsx b/src/Components/SettingsDropdown.tsx
deleted file mode 100644
index f0d0335..0000000
--- a/src/Components/SettingsDropdown.tsx
+++ /dev/null
@@ -1,69 +0,0 @@
-import { Popover } from "react-tiny-popover";
-import { useUser } from "../Contexts/UserContext";
-import { useState } from "react";
-
-const SettingsDropdown = () => {
-    const [isPopoverOpen, setIsPopoverOpen] = useState(false);
-
-    const {
-        user,
-        colorScheme,
-        setColorScheme,
-        fontSize,
-        setFontSize,
-        sortBy,
-        setSortBy,
-    } = useUser();
-
-    return (
-        <Popover
-            isOpen={isPopoverOpen}
-            positions={["bottom", "left"]}
-            padding={10}
-            onClickOutside={() => setIsPopoverOpen(false)}
-            content={
-                <div
-                    onMouseEnter={() => setIsPopoverOpen(true)}
-                    onMouseLeave={() => {
-                        setTimeout(() => {
-                            setIsPopoverOpen(false);
-                        }, 3000);
-                    }}
-                    className="link main-background whitespace-nowrap p-2 border border-zinc-800 rounded"
-                >
-                    {user && (
-                        <div className="link flex flex-col flex-nowrap items-center justify-evenly">
-                            <p className="cursor-pointer">
-                                [Style {colorScheme}]
-                            </p>
-                            <p className="cursor-pointer my-2">
-                                [Font {fontSize}]
-                            </p>
-                            <p className="cursor-pointer">
-                                [Sort{" "}
-                                {sortBy === "asc" ? "Ascending" : "Descending"}]
-                            </p>
-                        </div>
-                    )}
-                </div>
-            }
-        >
-            <div
-                onClick={() => {
-                    setIsPopoverOpen(true);
-                }}
-                onMouseEnter={() => setIsPopoverOpen(true)}
-                onMouseLeave={() => {
-                    setTimeout(() => {
-                        setIsPopoverOpen(false);
-                    }, 15000);
-                }}
-                className="text-lg link cursor-pointer"
-            >
-                [Settings]
-            </div>
-        </Popover>
-    );
-};
-
-export default SettingsDropdown;
diff --git a/src/Components/SettingsSidebar.tsx b/src/Components/SettingsSidebar.tsx
new file mode 100644
index 0000000..8a06757
--- /dev/null
+++ b/src/Components/SettingsSidebar.tsx
@@ -0,0 +1,156 @@
+import { Popover } from "react-tiny-popover";
+import { useUser } from "../Contexts/UserContext";
+import { useState } from "react";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { faGear } from "@fortawesome/free-solid-svg-icons";
+
+const SettingsSidebar = () => {
+    const [isOpen, setIsOpen] = useState(false);
+    const [isFontOptionsOpen, setIsFontOptionsOpen] = useState(false);
+    const [isPaddingOptionsOpen, setIsPaddingOptionsOpen] = useState(false);
+
+    const {
+        user,
+        colorScheme,
+        setColorScheme,
+        fontSize,
+        setFontSize,
+        sortBy,
+        setSortBy,
+        padding,
+        setPadding,
+    } = useUser();
+
+    if (user) {
+        return (
+            <Popover
+                isOpen={isOpen}
+                positions={["left"]}
+                padding={10}
+                onClickOutside={() => setIsOpen(false)}
+                content={
+                    <div className="link main-background whitespace-nowrap p-2 border border-zinc-800 rounded">
+                        <div className="text-lg link flex flex-col flex-nowrap items-center justify-evenly">
+                            {/*<p className="cursor-pointer mb-2 mx-2">
+                                [Style {colorScheme}]
+                            </p>*/}
+
+                            <Popover
+                                isOpen={isFontOptionsOpen}
+                                positions={["left"]}
+                                padding={10}
+                                onClickOutside={() =>
+                                    setIsFontOptionsOpen(false)
+                                }
+                                content={
+                                    <div className="mx-5 link main-background whitespace-nowrap p-2 border border-zinc-800 rounded">
+                                        <div className="text-lg link flex flex-col flex-nowrap items-center justify-evenly">
+                                            <span
+                                                onClick={() =>
+                                                    setFontSize("xs")
+                                                }
+                                                className="cursor-pointer mb-2"
+                                            >
+                                                Small
+                                            </span>
+                                            <span
+                                                onClick={() =>
+                                                    setFontSize("lg")
+                                                }
+                                                className="cursor-pointer mb-2 mx-2"
+                                            >
+                                                Medium
+                                            </span>
+                                            <span
+                                                onClick={() =>
+                                                    setFontSize("xl")
+                                                }
+                                                className="cursor-pointer"
+                                            >
+                                                Large
+                                            </span>
+                                        </div>
+                                    </div>
+                                }
+                            >
+                                <p
+                                    className="cursor-pointer mb-2 mx-2"
+                                    onClick={() =>
+                                        setIsFontOptionsOpen(!isFontOptionsOpen)
+                                    }
+                                >
+                                    [Font Size]
+                                </p>
+                            </Popover>
+                            <Popover
+                                isOpen={isPaddingOptionsOpen}
+                                positions={["left"]}
+                                onClickOutside={() =>
+                                    setIsPaddingOptionsOpen(false)
+                                }
+                                content={
+                                    <div className="mx-10 link main-background whitespace-nowrap p-2 border border-zinc-800 rounded">
+                                        <div className="link flex flex-col flex-nowrap items-center justify-evenly">
+                                            <span
+                                                onClick={() => setPadding("0")}
+                                                className="cursor-pointer mb-2"
+                                            >
+                                                None
+                                            </span>
+                                            <span
+                                                onClick={() => setPadding("4")}
+                                                className="cursor-pointer mb-2"
+                                            >
+                                                Small
+                                            </span>
+                                            <span
+                                                onClick={() => setPadding("8")}
+                                                className="cursor-pointer mb-2 mx-2"
+                                            >
+                                                Medium
+                                            </span>
+                                            <span
+                                                onClick={() => setPadding("12")}
+                                                className="cursor-pointer"
+                                            >
+                                                Large
+                                            </span>
+                                        </div>
+                                    </div>
+                                }
+                            >
+                                <p
+                                    className="cursor-pointer"
+                                    onClick={() =>
+                                        setIsPaddingOptionsOpen(
+                                            !isPaddingOptionsOpen,
+                                        )
+                                    }
+                                >
+                                    [Padding]
+                                </p>
+                            </Popover>
+                        </div>
+                    </div>
+                }
+            >
+                <div
+                    onClick={() => {
+                        setIsOpen(true);
+                    }}
+                    className="fixed top-1/2 right-2 rotate-90 cursor-pointer link flex items-center text-lg"
+                >
+                    [
+                    <FontAwesomeIcon
+                        icon={faGear}
+                        className="mx-1 animate-spin"
+                        style={{ animationDuration: "5s" }}
+                    />
+                    ]
+                </div>
+            </Popover>
+        );
+    }
+};
+
+export default SettingsSidebar;
diff --git a/src/Layouts/ChapterPageLayout.tsx b/src/Layouts/ChapterPageLayout.tsx
index 94ec1b1..2de3108 100644
--- a/src/Layouts/ChapterPageLayout.tsx
+++ b/src/Layouts/ChapterPageLayout.tsx
@@ -3,14 +3,16 @@ import { Outlet } from "react-router-dom";
 import Footer from "../Components/Footer";
 import Navbar from "../Components/Navbar";
 import ScrollButtons from "../Components/ScrollButtons";
+import SettingsSidebar from "../Components/SettingsSidebar";
 
 const ChapterPageLayout = () => {
     return (
         <div className="chapter-page-layout">
             <Navbar />
-            <div className="w-full px-8 flex justify-center">
+            <div className="w-full flex justify-center">
                 <Outlet />
             </div>
+            <SettingsSidebar />
             <ScrollButtons />
             <Footer />
         </div>

From b3612b9f35ee64d25c2148da48a2a839bef6ba6e Mon Sep 17 00:00:00 2001
From: Aleksandre <aleksandre.nozadze.1@iliauni.edu.ge>
Date: Mon, 29 Sep 2025 20:28:03 +0400
Subject: [PATCH 43/81] chore: Apply minor UI/layout refinements

---
 src/Layouts/NovelPageLayout.tsx |  2 ++
 src/Pages/NovelPage.tsx         | 10 +++++-----
 2 files changed, 7 insertions(+), 5 deletions(-)

diff --git a/src/Layouts/NovelPageLayout.tsx b/src/Layouts/NovelPageLayout.tsx
index 5f62a5e..62da4ec 100644
--- a/src/Layouts/NovelPageLayout.tsx
+++ b/src/Layouts/NovelPageLayout.tsx
@@ -2,6 +2,7 @@ import { Outlet } from "react-router-dom";
 
 import Navbar from "../Components/Navbar";
 import Footer from "../Components/Footer";
+import ScrollButtons from "../Components/ScrollButtons";
 
 const NovelPageLayout = () => {
     return (
@@ -10,6 +11,7 @@ const NovelPageLayout = () => {
             <div className="w-full px-8 flex justify-center">
                 <Outlet />
             </div>
+            <ScrollButtons />
             <Footer />
         </div>
     );
diff --git a/src/Pages/NovelPage.tsx b/src/Pages/NovelPage.tsx
index c101166..19f3742 100644
--- a/src/Pages/NovelPage.tsx
+++ b/src/Pages/NovelPage.tsx
@@ -61,8 +61,8 @@ const NovelPage = () => {
     return (
         <div className="lg:max-w-6xl w-full lg:px-12 flex flex-col flex-nowrap justify-between items-center">
             <div className="w-full flex flex-row flex-wrap justify-between">
-                <div className="w-full md:w-3/5 flex flex-col flex-nowrap justify-between">
-                    {novel && (
+                {novel && (
+                    <div className="w-full flex flex-col flex-nowrap justify-between">
                         <div className="w-full flex flex-col flex-nowrap justify-between">
                             {user &&
                                 (user.username === novel.author ||
@@ -192,7 +192,7 @@ const NovelPage = () => {
                                 />
                             </div>
 
-                            <div className="">
+                            <div>
                                 {chapters &&
                                     chapters.length > 0 &&
                                     chapters.map((c, i) => (
@@ -216,8 +216,8 @@ const NovelPage = () => {
                                 </div>
                             )}
                         </div>
-                    )}
-                </div>
+                    </div>
+                )}
             </div>
             <GoBackButton
                 to="/novels/#root"

From 56fafe12cf3db03bd4cce3245f2c6ae1cbe2d3d3 Mon Sep 17 00:00:00 2001
From: Aleksandre <aleksandre.nozadze.1@iliauni.edu.ge>
Date: Mon, 29 Sep 2025 22:42:11 +0400
Subject: [PATCH 44/81] feat: Expand font size options in settings sidebar

---
 src/Components/SettingsSidebar.tsx | 20 ++++++++++++++++++--
 1 file changed, 18 insertions(+), 2 deletions(-)

diff --git a/src/Components/SettingsSidebar.tsx b/src/Components/SettingsSidebar.tsx
index 8a06757..7f2f69b 100644
--- a/src/Components/SettingsSidebar.tsx
+++ b/src/Components/SettingsSidebar.tsx
@@ -50,12 +50,20 @@ const SettingsSidebar = () => {
                                                     setFontSize("xs")
                                                 }
                                                 className="cursor-pointer mb-2"
+                                            >
+                                                Extra Small
+                                            </span>
+                                            <span
+                                                onClick={() =>
+                                                    setFontSize("sm")
+                                                }
+                                                className="cursor-pointer mb-2"
                                             >
                                                 Small
                                             </span>
                                             <span
                                                 onClick={() =>
-                                                    setFontSize("lg")
+                                                    setFontSize("md")
                                                 }
                                                 className="cursor-pointer mb-2 mx-2"
                                             >
@@ -63,12 +71,20 @@ const SettingsSidebar = () => {
                                             </span>
                                             <span
                                                 onClick={() =>
-                                                    setFontSize("xl")
+                                                    setFontSize("lg")
                                                 }
                                                 className="cursor-pointer"
                                             >
                                                 Large
                                             </span>
+                                            <span
+                                                onClick={() =>
+                                                    setFontSize("xl")
+                                                }
+                                                className="cursor-pointer"
+                                            >
+                                                Extra Large
+                                            </span>
                                         </div>
                                     </div>
                                 }

From a90f6d9d9aab34b8f1c89e808b4d6db2f9ae0aa3 Mon Sep 17 00:00:00 2001
From: Aleksandre <aleksandre.nozadze.1@iliauni.edu.ge>
Date: Mon, 29 Sep 2025 22:42:11 +0400
Subject: [PATCH 45/81] feat: Implement range slider for padding settings

---
 src/Components/SettingsSidebar.tsx | 63 +++++++++++++++++++-----------
 src/Pages/ChapterPage.tsx          |  2 +-
 2 files changed, 41 insertions(+), 24 deletions(-)

diff --git a/src/Components/SettingsSidebar.tsx b/src/Components/SettingsSidebar.tsx
index 7f2f69b..307e27c 100644
--- a/src/Components/SettingsSidebar.tsx
+++ b/src/Components/SettingsSidebar.tsx
@@ -9,6 +9,10 @@ const SettingsSidebar = () => {
     const [isFontOptionsOpen, setIsFontOptionsOpen] = useState(false);
     const [isPaddingOptionsOpen, setIsPaddingOptionsOpen] = useState(false);
 
+    const paddingValues = [0, 2, 3, 4, 6, 8, 12];
+    const [paddingIndex, setPaddingIndex] = useState(0);
+    const paddingValue = paddingValues[paddingIndex];
+
     const {
         user,
         colorScheme,
@@ -107,30 +111,43 @@ const SettingsSidebar = () => {
                                 content={
                                     <div className="mx-10 link main-background whitespace-nowrap p-2 border border-zinc-800 rounded">
                                         <div className="link flex flex-col flex-nowrap items-center justify-evenly">
-                                            <span
-                                                onClick={() => setPadding("0")}
-                                                className="cursor-pointer mb-2"
-                                            >
-                                                None
-                                            </span>
-                                            <span
-                                                onClick={() => setPadding("4")}
-                                                className="cursor-pointer mb-2"
-                                            >
-                                                Small
-                                            </span>
-                                            <span
-                                                onClick={() => setPadding("8")}
-                                                className="cursor-pointer mb-2 mx-2"
-                                            >
-                                                Medium
-                                            </span>
-                                            <span
-                                                onClick={() => setPadding("12")}
-                                                className="cursor-pointer"
-                                            >
-                                                Large
+                                            <input
+                                                type="range"
+                                                min={paddingValues[0]}
+                                                max={paddingValues.length - 1}
+                                                step="1"
+                                                value={paddingIndex}
+                                                onChange={(e) => {
+                                                    setPaddingIndex(
+                                                        parseInt(
+                                                            e.target.value,
+                                                        ),
+                                                    );
+                                                    setPadding(
+                                                        String(
+                                                            paddingValues[
+                                                                parseInt(
+                                                                    e.target
+                                                                        .value,
+                                                                )
+                                                            ],
+                                                        ),
+                                                    );
+                                                }}
+                                            />
+                                            <span className="my-1">
+                                                {paddingValue}
                                             </span>
+                                            <div className="w-full flex justify-between text-xs main">
+                                                {paddingValues.map((v, i) => (
+                                                    <span
+                                                        key={i}
+                                                        className="mx-2.5"
+                                                    >
+                                                        {v}
+                                                    </span>
+                                                ))}
+                                            </div>
                                         </div>
                                     </div>
                                 }
diff --git a/src/Pages/ChapterPage.tsx b/src/Pages/ChapterPage.tsx
index 4e56cd3..34134cd 100644
--- a/src/Pages/ChapterPage.tsx
+++ b/src/Pages/ChapterPage.tsx
@@ -169,7 +169,7 @@ const ChapterPage = () => {
 
                     <div
                         id="chapter-content"
-                        className={`w-full mt-4 prose prose-lg font-sans px-${padding ?? "4"} text-${fontSize ?? "lg"} leading-normal`}
+                        className={`w-full mt-4 prose prose-lg font-sans px-${padding ?? "0"} text-${fontSize ?? "lg"} leading-normal`}
                     >
                         <ReactMarkdown
                             components={{

From 31494dda29c09d992a20074848fd644f27672c2e Mon Sep 17 00:00:00 2001
From: Aleksandre <aleksandre.nozadze.1@iliauni.edu.ge>
Date: Mon, 29 Sep 2025 22:42:11 +0400
Subject: [PATCH 46/81] refactor: Enhance settings sidebar interaction

---
 src/Components/SettingsSidebar.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/Components/SettingsSidebar.tsx b/src/Components/SettingsSidebar.tsx
index 307e27c..fb95c23 100644
--- a/src/Components/SettingsSidebar.tsx
+++ b/src/Components/SettingsSidebar.tsx
@@ -31,7 +31,7 @@ const SettingsSidebar = () => {
                 isOpen={isOpen}
                 positions={["left"]}
                 padding={10}
-                onClickOutside={() => setIsOpen(false)}
+                // onClickOutside={() => setIsOpen(false)}
                 content={
                     <div className="link main-background whitespace-nowrap p-2 border border-zinc-800 rounded">
                         <div className="text-lg link flex flex-col flex-nowrap items-center justify-evenly">
@@ -169,7 +169,7 @@ const SettingsSidebar = () => {
             >
                 <div
                     onClick={() => {
-                        setIsOpen(true);
+                        setIsOpen(!isOpen);
                     }}
                     className="fixed top-1/2 right-2 rotate-90 cursor-pointer link flex items-center text-lg"
                 >

From 691eb2896e13bd0d00d24fe14e94de0fc88cf130 Mon Sep 17 00:00:00 2001
From: Aleksandre <aleksandre.nozadze.1@iliauni.edu.ge>
Date: Mon, 29 Sep 2025 23:39:23 +0400
Subject: [PATCH 47/81] Refactor: Remove legacy padding state from
 SettingsSidebar

---
 src/Components/SettingsSidebar.tsx | 4 ----
 1 file changed, 4 deletions(-)

diff --git a/src/Components/SettingsSidebar.tsx b/src/Components/SettingsSidebar.tsx
index fb95c23..8a8395d 100644
--- a/src/Components/SettingsSidebar.tsx
+++ b/src/Components/SettingsSidebar.tsx
@@ -9,10 +9,6 @@ const SettingsSidebar = () => {
     const [isFontOptionsOpen, setIsFontOptionsOpen] = useState(false);
     const [isPaddingOptionsOpen, setIsPaddingOptionsOpen] = useState(false);
 
-    const paddingValues = [0, 2, 3, 4, 6, 8, 12];
-    const [paddingIndex, setPaddingIndex] = useState(0);
-    const paddingValue = paddingValues[paddingIndex];
-
     const {
         user,
         colorScheme,

From bc5393b5e2da4f1139342b9c5bebaf0d65016227 Mon Sep 17 00:00:00 2001
From: Aleksandre <aleksandre.nozadze.1@iliauni.edu.ge>
Date: Mon, 29 Sep 2025 23:39:23 +0400
Subject: [PATCH 48/81] Feat: Implement dynamic chapter content width using
 padding percentage

---
 src/Pages/ChapterPage.tsx | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/src/Pages/ChapterPage.tsx b/src/Pages/ChapterPage.tsx
index 34134cd..da2bc7a 100644
--- a/src/Pages/ChapterPage.tsx
+++ b/src/Pages/ChapterPage.tsx
@@ -169,7 +169,8 @@ const ChapterPage = () => {
 
                     <div
                         id="chapter-content"
-                        className={`w-full mt-4 prose prose-lg font-sans px-${padding ?? "0"} text-${fontSize ?? "lg"} leading-normal`}
+                        className={` mt-4 prose prose-lg font-sans text-${fontSize ?? "lg"} leading-normal`}
+                        style={{ width: `${padding}%` }}
                     >
                         <ReactMarkdown
                             components={{

From e3c2e865242a2f142169ca2e829d98f8f9d9a865 Mon Sep 17 00:00:00 2001
From: Aleksandre <aleksandre.nozadze.1@iliauni.edu.ge>
Date: Mon, 29 Sep 2025 23:39:23 +0400
Subject: [PATCH 49/81] Chore: Update default padding value in UserContext

---
 src/Contexts/UserContext.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/Contexts/UserContext.tsx b/src/Contexts/UserContext.tsx
index 693ce33..1f959a2 100644
--- a/src/Contexts/UserContext.tsx
+++ b/src/Contexts/UserContext.tsx
@@ -29,7 +29,7 @@ export const UserProvider: React.FC<{ children: ReactNode }> = ({
     const [colorScheme, setColorScheme] = useState<string>("light");
     const [fontSize, setFontSize] = useState<string>("medium");
     const [sortBy, setSortBy] = useState<"asc" | "desc">("desc");
-    const [padding, setPadding] = useState<string>("8");
+    const [padding, setPadding] = useState<string>("85");
 
     useEffect(() => {
         const controller = new AbortController();

From 291027d5e1c11d4b6f247dc9b2e0dea43c328f41 Mon Sep 17 00:00:00 2001
From: Aleksandre <aleksandre.nozadze.1@iliauni.edu.ge>
Date: Mon, 29 Sep 2025 23:39:23 +0400
Subject: [PATCH 50/81] Feat: Revamp SettingsSidebar UI and enhance padding
 control

---
 src/Components/SettingsSidebar.tsx | 263 +++++++++++++----------------
 1 file changed, 120 insertions(+), 143 deletions(-)

diff --git a/src/Components/SettingsSidebar.tsx b/src/Components/SettingsSidebar.tsx
index 8a8395d..85fced2 100644
--- a/src/Components/SettingsSidebar.tsx
+++ b/src/Components/SettingsSidebar.tsx
@@ -21,165 +21,142 @@ const SettingsSidebar = () => {
         setPadding,
     } = useUser();
 
-    if (user) {
-        return (
-            <Popover
-                isOpen={isOpen}
-                positions={["left"]}
-                padding={10}
-                // onClickOutside={() => setIsOpen(false)}
-                content={
-                    <div className="link main-background whitespace-nowrap p-2 border border-zinc-800 rounded">
-                        <div className="text-lg link flex flex-col flex-nowrap items-center justify-evenly">
-                            {/*<p className="cursor-pointer mb-2 mx-2">
-                                [Style {colorScheme}]
-                            </p>*/}
-
-                            <Popover
-                                isOpen={isFontOptionsOpen}
-                                positions={["left"]}
-                                padding={10}
-                                onClickOutside={() =>
-                                    setIsFontOptionsOpen(false)
-                                }
-                                content={
-                                    <div className="mx-5 link main-background whitespace-nowrap p-2 border border-zinc-800 rounded">
-                                        <div className="text-lg link flex flex-col flex-nowrap items-center justify-evenly">
-                                            <span
-                                                onClick={() =>
-                                                    setFontSize("xs")
-                                                }
-                                                className="cursor-pointer mb-2"
-                                            >
-                                                Extra Small
-                                            </span>
-                                            <span
-                                                onClick={() =>
-                                                    setFontSize("sm")
-                                                }
-                                                className="cursor-pointer mb-2"
-                                            >
-                                                Small
-                                            </span>
-                                            <span
-                                                onClick={() =>
-                                                    setFontSize("md")
-                                                }
-                                                className="cursor-pointer mb-2 mx-2"
-                                            >
-                                                Medium
-                                            </span>
-                                            <span
-                                                onClick={() =>
-                                                    setFontSize("lg")
-                                                }
-                                                className="cursor-pointer"
-                                            >
-                                                Large
-                                            </span>
-                                            <span
-                                                onClick={() =>
-                                                    setFontSize("xl")
-                                                }
-                                                className="cursor-pointer"
-                                            >
-                                                Extra Large
-                                            </span>
-                                        </div>
+    return (
+        <Popover
+            isOpen={isOpen}
+            positions={["left"]}
+            padding={10}
+            content={
+                <div className="link main-background whitespace-nowrap p-2 border border-zinc-800 rounded">
+                    <div className="text-lg link flex flex-col flex-nowrap items-center justify-evenly">
+                        <Popover
+                            isOpen={isFontOptionsOpen}
+                            positions={["left", "bottom"]}
+                            padding={10}
+                            onClickOutside={() => setIsFontOptionsOpen(false)}
+                            content={
+                                <div className="mx-5 mt-10 link main-background whitespace-nowrap p-2 border border-zinc-800 rounded">
+                                    <div className="text-lg link flex flex-col flex-nowrap items-center justify-evenly">
+                                        <span
+                                            onClick={() => setFontSize("xs")}
+                                            className="cursor-pointer mb-2"
+                                        >
+                                            [Extra Small]
+                                        </span>
+                                        <span
+                                            onClick={() => setFontSize("sm")}
+                                            className="cursor-pointer mb-2"
+                                        >
+                                            [Small]
+                                        </span>
+                                        <span
+                                            onClick={() => setFontSize("md")}
+                                            className="cursor-pointer mb-2"
+                                        >
+                                            [Medium]
+                                        </span>
+                                        <span
+                                            onClick={() => setFontSize("lg")}
+                                            className="cursor-pointer mb-2"
+                                        >
+                                            [Large]
+                                        </span>
+                                        <span
+                                            onClick={() => setFontSize("xl")}
+                                            className="cursor-pointer"
+                                        >
+                                            [Extra Large]
+                                        </span>
                                     </div>
+                                </div>
+                            }
+                        >
+                            <p
+                                className="cursor-pointer mb-2 mx-2"
+                                onClick={() =>
+                                    setIsFontOptionsOpen(!isFontOptionsOpen)
                                 }
                             >
-                                <p
-                                    className="cursor-pointer mb-2 mx-2"
-                                    onClick={() =>
-                                        setIsFontOptionsOpen(!isFontOptionsOpen)
-                                    }
-                                >
-                                    [Font Size]
-                                </p>
-                            </Popover>
-                            <Popover
-                                isOpen={isPaddingOptionsOpen}
-                                positions={["left"]}
-                                onClickOutside={() =>
-                                    setIsPaddingOptionsOpen(false)
-                                }
-                                content={
-                                    <div className="mx-10 link main-background whitespace-nowrap p-2 border border-zinc-800 rounded">
-                                        <div className="link flex flex-col flex-nowrap items-center justify-evenly">
-                                            <input
-                                                type="range"
-                                                min={paddingValues[0]}
-                                                max={paddingValues.length - 1}
-                                                step="1"
-                                                value={paddingIndex}
-                                                onChange={(e) => {
-                                                    setPaddingIndex(
+                                [Font Size]
+                            </p>
+                        </Popover>
+                        <Popover
+                            isOpen={isPaddingOptionsOpen}
+                            positions={["left", "bottom"]}
+                            onClickOutside={() =>
+                                setIsPaddingOptionsOpen(false)
+                            }
+                            content={
+                                <div className="mx-10 mt-5 sm:mt-[-35px] link main-background whitespace-nowrap p-2 border border-zinc-800 rounded">
+                                    <div className="link flex flex-col flex-nowrap items-center justify-evenly">
+                                        <input
+                                            type="range"
+                                            min={50}
+                                            max={100}
+                                            step={5}
+                                            value={parseInt(padding)}
+                                            onChange={(e) => {
+                                                setPadding(
+                                                    String(
                                                         parseInt(
                                                             e.target.value,
                                                         ),
-                                                    );
-                                                    setPadding(
-                                                        String(
-                                                            paddingValues[
-                                                                parseInt(
-                                                                    e.target
-                                                                        .value,
-                                                                )
-                                                            ],
-                                                        ),
-                                                    );
-                                                }}
-                                            />
-                                            <span className="my-1">
-                                                {paddingValue}
-                                            </span>
-                                            <div className="w-full flex justify-between text-xs main">
-                                                {paddingValues.map((v, i) => (
+                                                    ),
+                                                );
+                                            }}
+                                            style={{ direction: "rtl" }}
+                                        />
+                                        <span className="my-1">
+                                            {100 - parseInt(padding)}
+                                        </span>
+                                        <div className="w-full flex justify-evenly text-xs main">
+                                            {Array.from(
+                                                { length: 11 },
+                                                (_, i) => (
                                                     <span
                                                         key={i}
-                                                        className="mx-2.5"
+                                                        className="mx-2"
                                                     >
-                                                        {v}
+                                                        {i * 5}
                                                     </span>
-                                                ))}
-                                            </div>
+                                                ),
+                                            )}
                                         </div>
                                     </div>
+                                </div>
+                            }
+                        >
+                            <p
+                                className="cursor-pointer"
+                                onClick={() =>
+                                    setIsPaddingOptionsOpen(
+                                        !isPaddingOptionsOpen,
+                                    )
                                 }
                             >
-                                <p
-                                    className="cursor-pointer"
-                                    onClick={() =>
-                                        setIsPaddingOptionsOpen(
-                                            !isPaddingOptionsOpen,
-                                        )
-                                    }
-                                >
-                                    [Padding]
-                                </p>
-                            </Popover>
-                        </div>
+                                [Padding]
+                            </p>
+                        </Popover>
                     </div>
-                }
-            >
-                <div
-                    onClick={() => {
-                        setIsOpen(!isOpen);
-                    }}
-                    className="fixed top-1/2 right-2 rotate-90 cursor-pointer link flex items-center text-lg"
-                >
-                    [
-                    <FontAwesomeIcon
-                        icon={faGear}
-                        className="mx-1 animate-spin"
-                        style={{ animationDuration: "5s" }}
-                    />
-                    ]
                 </div>
-            </Popover>
-        );
-    }
+            }
+        >
+            <div
+                onClick={() => {
+                    setIsOpen(!isOpen);
+                }}
+                className="fixed top-1/2 right-2 rotate-90 cursor-pointer link flex items-center text-lg"
+            >
+                [
+                <FontAwesomeIcon
+                    icon={faGear}
+                    className="mx-1 animate-spin"
+                    style={{ animationDuration: "5s" }}
+                />
+                ]
+            </div>
+        </Popover>
+    );
 };
 
 export default SettingsSidebar;

From a6c21c2de1df7e9a9c9bf5bb686ce0324843a66a Mon Sep 17 00:00:00 2001
From: Aleksandre <aleksandre.nozadze.1@iliauni.edu.ge>
Date: Mon, 29 Sep 2025 23:39:23 +0400
Subject: [PATCH 51/81] Style: Improve NovelPage layout and description toggle
 spacing

---
 src/Pages/NovelPage.tsx | 20 +++++++++++---------
 1 file changed, 11 insertions(+), 9 deletions(-)

diff --git a/src/Pages/NovelPage.tsx b/src/Pages/NovelPage.tsx
index 19f3742..50a9c12 100644
--- a/src/Pages/NovelPage.tsx
+++ b/src/Pages/NovelPage.tsx
@@ -76,19 +76,21 @@ const NovelPage = () => {
                                         </Link>
                                     </div>
                                 )}
-                            <div className="flex flex-col flex-nowrap w-full">
-                                <h2 id="novel-id" className="text-4xl">
-                                    {novel.title}
-                                </h2>
-                                <h2 className="ml-3 text-1xl">
-                                    By {novel.author}
-                                </h2>
+                            <div className="flex flex-row flex-nowrap w-full">
+                                <div className="min-w-max mr-12">
+                                    <h2 id="novel-id" className="text-4xl">
+                                        {novel.title}
+                                    </h2>
+                                    <h2 className="ml-3 text-1xl">
+                                        By {novel.author}
+                                    </h2>
+                                </div>
 
                                 <div
                                     onClick={() => {
                                         setHideDescription(!hideDescription);
                                     }}
-                                    className="mt-4 subtitle cursor-pointer"
+                                    className="mt-2 subtitle cursor-pointer"
                                 >
                                     <AnimatePresence mode="sync">
                                         <ComponentAnimationWrapper
@@ -144,7 +146,7 @@ const NovelPage = () => {
                             </div>
                         </div>
 
-                        <div className="w-full flex flex-row justify-center my-2 content">
+                        <div className="w-full flex flex-row justify-center mt-4 mb-12 content">
                             <span>Sort</span>
                             <span className="mx-2"> - </span>
                             <div

From 0315bb7fccab564fc11e16276d14e41fba59d66a Mon Sep 17 00:00:00 2001
From: Aleksandre <aleksandre.nozadze.1@iliauni.edu.ge>
Date: Mon, 29 Sep 2025 23:39:23 +0400
Subject: [PATCH 52/81] Style: Center chapter title on ChapterPage

---
 src/Pages/ChapterPage.tsx | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

diff --git a/src/Pages/ChapterPage.tsx b/src/Pages/ChapterPage.tsx
index da2bc7a..856cb57 100644
--- a/src/Pages/ChapterPage.tsx
+++ b/src/Pages/ChapterPage.tsx
@@ -155,7 +155,10 @@ const ChapterPage = () => {
                             </Link>
                         )}
                     <h2 className="text-base">{novel.title}</h2>
-                    <h2 id="chapter-id" className="mb-3 mt-2 text-4xl">
+                    <h2
+                        id="chapter-id"
+                        className="mb-3 mt-2 text-4xl text-center"
+                    >
                         {chapter.title}
                     </h2>
 

From ce42df6f0ee20a6ec18b29fd55f65ff7fd5e105f Mon Sep 17 00:00:00 2001
From: Aleksandre <aleksandre.nozadze.1@iliauni.edu.ge>
Date: Mon, 29 Sep 2025 23:53:07 +0400
Subject: [PATCH 53/81] Refactor: Adjust novel title container width on
 NovelPage

---
 src/Pages/NovelPage.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/Pages/NovelPage.tsx b/src/Pages/NovelPage.tsx
index 50a9c12..763148c 100644
--- a/src/Pages/NovelPage.tsx
+++ b/src/Pages/NovelPage.tsx
@@ -77,7 +77,7 @@ const NovelPage = () => {
                                     </div>
                                 )}
                             <div className="flex flex-row flex-nowrap w-full">
-                                <div className="min-w-max mr-12">
+                                <div className="w-fit max-w-1/2 mr-12">
                                     <h2 id="novel-id" className="text-4xl">
                                         {novel.title}
                                     </h2>

From 409a8d4faae0d0f54086ff5feeeacfa63efc5f26 Mon Sep 17 00:00:00 2001
From: Aleksandre <aleksandre.nozadze.1@iliauni.edu.ge>
Date: Tue, 30 Sep 2025 00:39:49 +0400
Subject: [PATCH 54/81] feat: Adapt chapter navigation to user sort preference

---
 src/Pages/ChapterPage.tsx | 25 +++++++++++++++++++------
 1 file changed, 19 insertions(+), 6 deletions(-)

diff --git a/src/Pages/ChapterPage.tsx b/src/Pages/ChapterPage.tsx
index 856cb57..1e9005d 100644
--- a/src/Pages/ChapterPage.tsx
+++ b/src/Pages/ChapterPage.tsx
@@ -2,7 +2,7 @@ import { useEffect, useMemo, useState } from "react";
 import { Link, useParams } from "react-router-dom";
 import FormattedTime from "../Components/FormattedTime";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
-import { faArrowRight } from "@fortawesome/free-solid-svg-icons";
+import { faArrowLeft, faArrowRight } from "@fortawesome/free-solid-svg-icons";
 import GoBackButton from "../Components/GoBackButton";
 import { Popover } from "react-tiny-popover";
 import ReactMarkdown from "react-markdown";
@@ -15,7 +15,7 @@ const ChapterPage = () => {
     const { id_novel } = useParams();
     const { id_chapter } = useParams();
 
-    const { user, fontSize, padding } = useUser();
+    const { user, fontSize, padding, sortBy } = useUser();
 
     const [isLeftPopoverOpen, setIsLeftPopoverOpen] = useState(false);
     const [isRightPopoverOpen, setIsRightPopoverOpen] = useState(false);
@@ -62,20 +62,33 @@ const ChapterPage = () => {
     }, [hasMore, loadMore, currentIndex, chapters]);
 
     const NavigationButtons = () => {
+        const isAscending = sortBy === "asc" ? true : false;
+
+        const prevIndex = isAscending ? currentIndex - 1 : currentIndex + 1;
+        const nextIndex = isAscending ? currentIndex + 1 : currentIndex - 1;
+
+        const hasPrev = isAscending
+            ? currentIndex > 0
+            : currentIndex < chapters.length - 1;
+        const hasNext = isAscending
+            ? currentIndex < chapters.length - 1
+            : currentIndex > 0;
+
         return (
-            <div className="max-w-4xl mt-20 text-xl flex flex-col flex-nowrap items-center justify-evenly w-full">
+            <div className="max-w-4xl px-12 mt-20 text-xl flex flex-col flex-nowrap items-center justify-evenly w-full">
                 <div className="flex flex-row flex-nowrap justify-between w-full text-xl">
-                    {chapter && currentIndex < chapters.length - 1 ? (
+                    {/* Previous Chapter (Left Arrow) */}
+                    {hasPrev ? (
                         <Popover
                             isOpen={isLeftPopoverOpen}
-                            positions={["bottom", "left"]}
+                            positions={["right"]}
                             padding={10}
                             reposition={true}
                             boundaryInset={document.body.scrollHeight}
                             onClickOutside={() => setIsLeftPopoverOpen(false)}
                             content={
                                 <div className="link main-background whitespace-nowrap p-2 border border-zinc-800 rounded">
-                                    [{chapters[currentIndex + 1].title}]
+                                    [{chapters[prevIndex].title}]
                                 </div>
                             }
                         >

From 8530a9fec801af8f593049da620c88f11ad64547 Mon Sep 17 00:00:00 2001
From: Aleksandre <aleksandre.nozadze.1@iliauni.edu.ge>
Date: Tue, 30 Sep 2025 00:39:49 +0400
Subject: [PATCH 55/81] feat: Implement dynamic chapter navigation UI with
 sorting and icons

---
 src/Pages/ChapterPage.tsx | 33 +++++++++++++++++----------------
 1 file changed, 17 insertions(+), 16 deletions(-)

diff --git a/src/Pages/ChapterPage.tsx b/src/Pages/ChapterPage.tsx
index 1e9005d..8b919ab 100644
--- a/src/Pages/ChapterPage.tsx
+++ b/src/Pages/ChapterPage.tsx
@@ -96,30 +96,32 @@ const ChapterPage = () => {
                                 onMouseEnter={() => setIsLeftPopoverOpen(true)}
                                 onMouseLeave={() => setIsLeftPopoverOpen(false)}
                                 onClick={() => {
-                                    setChapter(chapters[currentIndex + 1]);
+                                    setChapter(chapters[prevIndex]);
                                 }}
-                                className="link"
-                                to={`/novels/${id_novel}/${chapters[currentIndex + 1].id}#chapter-id`}
+                                className="link flex items-center"
+                                to={`/novels/${id_novel}/${chapters[prevIndex].id}#chapter-id`}
                             >
-                                [Previous]
+                                [<FontAwesomeIcon icon={faArrowLeft} />]
                             </Link>
                         </Popover>
                     ) : (
-                        <h2 className="text-red-800 pointer-events-none">
-                            [First]
+                        <h2 className="text-red-800 pointer-events-none flex items-center">
+                            [<FontAwesomeIcon icon={faArrowLeft} />]
                         </h2>
                     )}
-                    {currentIndex > 0 && chapter ? (
+
+                    {/* Next Chapter (Right Arrow) */}
+                    {hasNext ? (
                         <Popover
                             isOpen={isRightPopoverOpen}
-                            positions={["bottom", "left"]}
+                            positions={["left"]}
                             padding={10}
                             reposition={true}
                             boundaryInset={document.body.scrollHeight}
                             onClickOutside={() => setIsRightPopoverOpen(false)}
                             content={
                                 <div className="link main-background whitespace-nowrap p-2 border border-zinc-800 rounded">
-                                    [{chapters[currentIndex - 1].title}]
+                                    [{chapters[nextIndex].title}]
                                 </div>
                             }
                         >
@@ -129,21 +131,20 @@ const ChapterPage = () => {
                                     setIsRightPopoverOpen(false)
                                 }
                                 onClick={() => {
-                                    setChapter(chapters[currentIndex - 1]);
+                                    setChapter(chapters[nextIndex]);
                                 }}
-                                className="link"
-                                to={`/novels/${id_novel}/${chapters[currentIndex - 1].id}#chapter-id`}
+                                className="link flex items-center"
+                                to={`/novels/${id_novel}/${chapters[nextIndex].id}#chapter-id`}
                             >
-                                [Next]
+                                [<FontAwesomeIcon icon={faArrowRight} />]
                             </Link>
                         </Popover>
                     ) : (
-                        <h2 className="text-red-800 pointer-events-none">
-                            [Last]
+                        <h2 className="text-red-800 pointer-events-none flex items-center">
+                            [<FontAwesomeIcon icon={faArrowRight} />]
                         </h2>
                     )}
                 </div>
-
                 <GoBackButton
                     className="link mt-4"
                     to={`/novels/${id_novel}#root`}

From 7a697d5bc3c6e8c90bdd9551e1314a05474f1cf3 Mon Sep 17 00:00:00 2001
From: Aleksandre <aleksandre.nozadze.1@iliauni.edu.ge>
Date: Tue, 30 Sep 2025 00:39:49 +0400
Subject: [PATCH 56/81] fix(settings): Adjust sidebar popover and toggle
 positioning

---
 src/Components/SettingsSidebar.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/Components/SettingsSidebar.tsx b/src/Components/SettingsSidebar.tsx
index 85fced2..8284996 100644
--- a/src/Components/SettingsSidebar.tsx
+++ b/src/Components/SettingsSidebar.tsx
@@ -24,7 +24,7 @@ const SettingsSidebar = () => {
     return (
         <Popover
             isOpen={isOpen}
-            positions={["left"]}
+            positions={["left", "bottom"]}
             padding={10}
             content={
                 <div className="link main-background whitespace-nowrap p-2 border border-zinc-800 rounded">
@@ -145,7 +145,7 @@ const SettingsSidebar = () => {
                 onClick={() => {
                     setIsOpen(!isOpen);
                 }}
-                className="fixed top-1/2 right-2 rotate-90 cursor-pointer link flex items-center text-lg"
+                className="fixed top-2/5 right-2 rotate-90 cursor-pointer link flex items-center text-lg"
             >
                 [
                 <FontAwesomeIcon

From 9a255ec39cde620f8231cd2cbc6fb94eeb83573e Mon Sep 17 00:00:00 2001
From: Aleksandre <aleksandre.nozadze.1@iliauni.edu.ge>
Date: Tue, 30 Sep 2025 00:39:49 +0400
Subject: [PATCH 57/81] feat(novel): Improve novel page details responsiveness

---
 src/Pages/NovelPage.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/Pages/NovelPage.tsx b/src/Pages/NovelPage.tsx
index 763148c..f2b425b 100644
--- a/src/Pages/NovelPage.tsx
+++ b/src/Pages/NovelPage.tsx
@@ -76,7 +76,7 @@ const NovelPage = () => {
                                         </Link>
                                     </div>
                                 )}
-                            <div className="flex flex-row flex-nowrap w-full">
+                            <div className="flex flex-row flex-wrap md:flex-nowrap w-full">
                                 <div className="w-fit max-w-1/2 mr-12">
                                     <h2 id="novel-id" className="text-4xl">
                                         {novel.title}

From 99e31ef2ea0b68b4af4f40c6d7890608ffea3c06 Mon Sep 17 00:00:00 2001
From: Aleksandre <aleksandre.nozadze.1@iliauni.edu.ge>
Date: Tue, 30 Sep 2025 00:53:35 +0400
Subject: [PATCH 58/81] Chore: Adjust settings sidebar toggle position

---
 src/Components/SettingsSidebar.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/Components/SettingsSidebar.tsx b/src/Components/SettingsSidebar.tsx
index 8284996..c9428c8 100644
--- a/src/Components/SettingsSidebar.tsx
+++ b/src/Components/SettingsSidebar.tsx
@@ -145,7 +145,7 @@ const SettingsSidebar = () => {
                 onClick={() => {
                     setIsOpen(!isOpen);
                 }}
-                className="fixed top-2/5 right-2 rotate-90 cursor-pointer link flex items-center text-lg"
+                className="fixed top-1/2 right-1 rotate-90 cursor-pointer link flex items-center text-lg"
             >
                 [
                 <FontAwesomeIcon

From f8daa524cda8a7a46a948dd0fab8d27307794d68 Mon Sep 17 00:00:00 2001
From: Aleksandre <aleksandre.nozadze.1@iliauni.edu.ge>
Date: Tue, 30 Sep 2025 00:53:36 +0400
Subject: [PATCH 59/81] Refactor(ChapterPage): Add necessary type imports

---
 src/Pages/ChapterPage.tsx | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/src/Pages/ChapterPage.tsx b/src/Pages/ChapterPage.tsx
index 8b919ab..b17f29e 100644
--- a/src/Pages/ChapterPage.tsx
+++ b/src/Pages/ChapterPage.tsx
@@ -1,4 +1,4 @@
-import { useEffect, useMemo, useState } from "react";
+import { ReactElement, useEffect, useMemo, useState } from "react";
 import { Link, useParams } from "react-router-dom";
 import FormattedTime from "../Components/FormattedTime";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
@@ -10,6 +10,7 @@ import remarkGfm from "remark-gfm";
 import rehypeRaw from "rehype-raw";
 import { useUser } from "../Contexts/UserContext";
 import { useContent } from "../Contexts/ContentContext";
+import Navigation from "epubjs/types/navigation";
 
 const ChapterPage = () => {
     const { id_novel } = useParams();

From 746649c72b5094baea0453f55b6a65513ee57583 Mon Sep 17 00:00:00 2001
From: Aleksandre <aleksandre.nozadze.1@iliauni.edu.ge>
Date: Tue, 30 Sep 2025 00:53:36 +0400
Subject: [PATCH 60/81] Feat(ChapterPage): Implement conditional navigation
 buttons

---
 src/Pages/ChapterPage.tsx | 16 +++++++++-------
 1 file changed, 9 insertions(+), 7 deletions(-)

diff --git a/src/Pages/ChapterPage.tsx b/src/Pages/ChapterPage.tsx
index b17f29e..eaa1471 100644
--- a/src/Pages/ChapterPage.tsx
+++ b/src/Pages/ChapterPage.tsx
@@ -62,7 +62,7 @@ const ChapterPage = () => {
         }
     }, [hasMore, loadMore, currentIndex, chapters]);
 
-    const NavigationButtons = () => {
+    const NavigationButtons: React.FC<{ goBack?: boolean }> = ({ goBack }) => {
         const isAscending = sortBy === "asc" ? true : false;
 
         const prevIndex = isAscending ? currentIndex - 1 : currentIndex + 1;
@@ -146,11 +146,13 @@ const ChapterPage = () => {
                         </h2>
                     )}
                 </div>
-                <GoBackButton
-                    className="link mt-4"
-                    to={`/novels/${id_novel}#root`}
-                    desc={`${novel?.title}`}
-                />
+                {goBack && (
+                    <GoBackButton
+                        className="link mt-4"
+                        to={`/novels/${id_novel}#root`}
+                        desc={`${novel?.title}`}
+                    />
+                )}
             </div>
         );
     };
@@ -203,7 +205,7 @@ const ChapterPage = () => {
                         </ReactMarkdown>
                     </div>
 
-                    <NavigationButtons />
+                    <NavigationButtons goBack />
                 </div>
             )}
         </div>

From fa5ce93fffcdcdbc8f0bcb28ed626cf9cca7fe1e Mon Sep 17 00:00:00 2001
From: Aleksandre <aleksandre.nozadze.1@iliauni.edu.ge>
Date: Tue, 30 Sep 2025 00:53:36 +0400
Subject: [PATCH 61/81] UI(ChapterPage): Refine layout and integrate top
 navigation

---
 src/Pages/ChapterPage.tsx | 8 +++++---
 1 file changed, 5 insertions(+), 3 deletions(-)

diff --git a/src/Pages/ChapterPage.tsx b/src/Pages/ChapterPage.tsx
index eaa1471..80e4d94 100644
--- a/src/Pages/ChapterPage.tsx
+++ b/src/Pages/ChapterPage.tsx
@@ -76,7 +76,7 @@ const ChapterPage = () => {
             : currentIndex > 0;
 
         return (
-            <div className="max-w-4xl px-12 mt-20 text-xl flex flex-col flex-nowrap items-center justify-evenly w-full">
+            <div className="max-w-4xl px-12 mt-8 text-xl flex flex-col flex-nowrap items-center justify-evenly w-full">
                 <div className="flex flex-row flex-nowrap justify-between w-full text-xl">
                     {/* Previous Chapter (Left Arrow) */}
                     {hasPrev ? (
@@ -179,7 +179,7 @@ const ChapterPage = () => {
                         {chapter.title}
                     </h2>
 
-                    <div className="my-5 flex flex-row justify-center">
+                    <div className="mt-5 flex flex-row justify-center">
                         <FormattedTime
                             date={chapter.update_date}
                             classname={"content"}
@@ -187,9 +187,11 @@ const ChapterPage = () => {
                         />
                     </div>
 
+                    <NavigationButtons />
+
                     <div
                         id="chapter-content"
-                        className={` mt-4 prose prose-lg font-sans text-${fontSize ?? "lg"} leading-normal`}
+                        className={` mt-8 prose prose-lg font-sans text-${fontSize ?? "lg"} leading-normal`}
                         style={{ width: `${padding}%` }}
                     >
                         <ReactMarkdown

From 1f24adb20d2ce0b783177d548c9195d8a133ed05 Mon Sep 17 00:00:00 2001
From: Aleksandre <aleksandre.nozadze.1@iliauni.edu.ge>
Date: Tue, 30 Sep 2025 01:08:25 +0400
Subject: [PATCH 62/81] feat(chapter): Add creation_date, author, and
 description to Chapter type

---
 src/Types/types.ts | 3 +++
 1 file changed, 3 insertions(+)

diff --git a/src/Types/types.ts b/src/Types/types.ts
index 03c0ef0..3ca4036 100644
--- a/src/Types/types.ts
+++ b/src/Types/types.ts
@@ -15,6 +15,9 @@ export interface Novel {
 export interface Chapter {
     id: string;
     title: string;
+    author: string;
+    description: string;
+    creation_date: string;
     update_date: string;
     content: string;
 }

From 06030c079c12286c05dbec2e14d771f39d2bd8aa Mon Sep 17 00:00:00 2001
From: Aleksandre <aleksandre.nozadze.1@iliauni.edu.ge>
Date: Tue, 30 Sep 2025 01:08:25 +0400
Subject: [PATCH 63/81] feat(chapter): Display chapter creation and update
 dates

---
 src/Pages/ChapterPage.tsx | 19 +++++++++++++++++--
 1 file changed, 17 insertions(+), 2 deletions(-)

diff --git a/src/Pages/ChapterPage.tsx b/src/Pages/ChapterPage.tsx
index 80e4d94..67e4c4c 100644
--- a/src/Pages/ChapterPage.tsx
+++ b/src/Pages/ChapterPage.tsx
@@ -179,10 +179,25 @@ const ChapterPage = () => {
                         {chapter.title}
                     </h2>
 
-                    <div className="mt-5 flex flex-row justify-center">
+                    <div className="mt-5 flex flex-row justify-center items-center">
+                        {chapter.creation_date !== chapter.update_date ? (
+                            <div className="flex flex-row justify-center items-center">
+                                <FormattedTime
+                                    date={chapter.creation_date}
+                                    classname={"content"}
+                                    popover_text={"Created"}
+                                />
+                                <FontAwesomeIcon
+                                    icon={faArrowRight}
+                                    className="mx-2"
+                                />
+                            </div>
+                        ) : (
+                            ""
+                        )}
                         <FormattedTime
                             date={chapter.update_date}
-                            classname={"content"}
+                            classname={"link"}
                             popover_text={"Last Updated"}
                         />
                     </div>

From 2e564f191da2d16922cb4fd8c4d1010fb46448c6 Mon Sep 17 00:00:00 2001
From: Aleksandre <aleksandre.nozadze.1@iliauni.edu.ge>
Date: Tue, 30 Sep 2025 01:28:40 +0400
Subject: [PATCH 64/81] feat: Add new ProgressIndicator component

---
 src/Components/ProgressIndicator.tsx | 31 ++++++++++++++++++++++++++++
 1 file changed, 31 insertions(+)
 create mode 100644 src/Components/ProgressIndicator.tsx

diff --git a/src/Components/ProgressIndicator.tsx b/src/Components/ProgressIndicator.tsx
new file mode 100644
index 0000000..71673fc
--- /dev/null
+++ b/src/Components/ProgressIndicator.tsx
@@ -0,0 +1,31 @@
+import { useEffect, useState } from "react";
+
+const ProgressIndicator = () => {
+    const [scrollPosition, setScrollPosition] = useState(0);
+
+    useEffect(() => {
+        window.addEventListener("scroll", () => {
+            var winScroll =
+                document.body.scrollTop || document.documentElement.scrollTop;
+            var height =
+                document.documentElement.scrollHeight -
+                document.documentElement.clientHeight;
+            var scrolled = (winScroll / height) * 100;
+            setScrollPosition(scrolled);
+        });
+    }, []);
+
+    return (
+        <div className="fixed top-0 w-full flex flex-row justify-center items-center">
+            <div className="w-full h-[1px] overflow-hidden">
+                <div
+                    className="h-full bg-[#fab387]"
+                    style={{ width: `${scrollPosition}%` }}
+                />
+            </div>
+            {/*{Math.round(scrollPosition)}*/}
+        </div>
+    );
+};
+
+export default ProgressIndicator;

From b6c97986850e2e75a7f06dd2e4a6eec6dab0c094 Mon Sep 17 00:00:00 2001
From: Aleksandre <aleksandre.nozadze.1@iliauni.edu.ge>
Date: Tue, 30 Sep 2025 01:28:40 +0400
Subject: [PATCH 65/81] feat: Integrate ProgressIndicator into
 ChapterPageLayout

---
 src/Layouts/ChapterPageLayout.tsx | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/src/Layouts/ChapterPageLayout.tsx b/src/Layouts/ChapterPageLayout.tsx
index 2de3108..04cd851 100644
--- a/src/Layouts/ChapterPageLayout.tsx
+++ b/src/Layouts/ChapterPageLayout.tsx
@@ -4,6 +4,7 @@ import Footer from "../Components/Footer";
 import Navbar from "../Components/Navbar";
 import ScrollButtons from "../Components/ScrollButtons";
 import SettingsSidebar from "../Components/SettingsSidebar";
+import ProgressIndicator from "../Components/ProgressIndicator";
 
 const ChapterPageLayout = () => {
     return (
@@ -12,6 +13,7 @@ const ChapterPageLayout = () => {
             <div className="w-full flex justify-center">
                 <Outlet />
             </div>
+            <ProgressIndicator />
             <SettingsSidebar />
             <ScrollButtons />
             <Footer />

From a349610347018d6b96f63699e1c0e333c18bb799 Mon Sep 17 00:00:00 2001
From: Aleksandre <aleksandre.nozadze.1@iliauni.edu.ge>
Date: Tue, 30 Sep 2025 01:42:20 +0400
Subject: [PATCH 66/81] feat(AboutPage): Revamp content and styling for clarity

---
 src/Pages/AboutPage.tsx | 22 +++++++++++++++-------
 1 file changed, 15 insertions(+), 7 deletions(-)

diff --git a/src/Pages/AboutPage.tsx b/src/Pages/AboutPage.tsx
index 5ce9454..24571d2 100644
--- a/src/Pages/AboutPage.tsx
+++ b/src/Pages/AboutPage.tsx
@@ -1,12 +1,20 @@
 const AboutPage = () => {
     return (
-        <div className="max-w-6xl px-12 text-center text-wrap text-2xl">
-            <h1 className="text-4xl mb-12">About</h1>
-            <p>
-                This is a simple web app to read novels. It is built with React,
-                typescipt and tailwindcss. The novels are fetched from custom
-                backend made specifically for this app, codex-backend. The
-                novels and chapters are stored in AWS DynamoDB.
+        <div className="max-w-6xl px-12 text-start text-wrap text-xl content">
+            <h1 className="text-2xl mb-12 text-center main">About</h1>
+            <p className="mt-2">
+                Codex is a complex web app built with modern technologies such
+                as React, TypeScript, and TailwindCSS.
+            </p>
+            <p className="mt-4">
+                The novels are fetched from a custom backend made specifically
+                for this app, codex-backend. Backend is written in Go and uses
+                Gin-Gonic framework and PostgreSQL for the database. This allows
+                for fast and efficient data retrieval and manipulation.
+            </p>
+            <p className="mt-4">
+                Website, Backend and Database are hosted in local Docker
+                containers.
             </p>
         </div>
     );

From 417ac3ff9e4688fe19b6b218954c7699391941d2 Mon Sep 17 00:00:00 2001
From: Aleksandre <aleksandre.nozadze.1@iliauni.edu.ge>
Date: Tue, 30 Sep 2025 01:49:31 +0400
Subject: [PATCH 67/81] feat: Increase NovelsPage maximum width and adjust
 padding

---
 src/Pages/NovelsPage.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/Pages/NovelsPage.tsx b/src/Pages/NovelsPage.tsx
index 87553a7..302dc21 100644
--- a/src/Pages/NovelsPage.tsx
+++ b/src/Pages/NovelsPage.tsx
@@ -34,7 +34,7 @@ const NovelsPage: React.FC = () => {
     }, [query, novels]);
 
     return (
-        <div className="min-h-screen h-full max-w-5xl px-4 sm:px-8 md:px-12 w-full flex flex-col flex-nowrap justify-start">
+        <div className="min-h-screen h-full max-w-6xl sm:px-8 md:px-12 w-full flex flex-col flex-nowrap justify-start">
             <div className="flex flex-row flex-nowrap justify-between">
                 {/* Novel List Display */}
                 <div className="w-full md:w-3/5 flex flex-col flex-nowrap">

From 6993f5c42d1140cc9529d7c4b186ea313ca36e01 Mon Sep 17 00:00:00 2001
From: Aleksandre <aleksandre.nozadze.1@iliauni.edu.ge>
Date: Wed, 1 Oct 2025 18:36:38 +0400
Subject: [PATCH 68/81] feat: Enhance Popover positioning and responsiveness in
 SettingsSidebar

---
 src/Components/SettingsSidebar.tsx | 15 ++++++++++++---
 1 file changed, 12 insertions(+), 3 deletions(-)

diff --git a/src/Components/SettingsSidebar.tsx b/src/Components/SettingsSidebar.tsx
index c9428c8..ae4ced7 100644
--- a/src/Components/SettingsSidebar.tsx
+++ b/src/Components/SettingsSidebar.tsx
@@ -24,14 +24,20 @@ const SettingsSidebar = () => {
     return (
         <Popover
             isOpen={isOpen}
-            positions={["left", "bottom"]}
+            positions={["left", "bottom", "top"]}
+            reposition={true}
+            boundaryInset={10}
+            align="center"
             padding={10}
             content={
                 <div className="link main-background whitespace-nowrap p-2 border border-zinc-800 rounded">
                     <div className="text-lg link flex flex-col flex-nowrap items-center justify-evenly">
                         <Popover
                             isOpen={isFontOptionsOpen}
-                            positions={["left", "bottom"]}
+                            positions={["left", "bottom", "top"]}
+                            reposition={true}
+                            boundaryInset={10}
+                            align="center"
                             padding={10}
                             onClickOutside={() => setIsFontOptionsOpen(false)}
                             content={
@@ -82,7 +88,10 @@ const SettingsSidebar = () => {
                         </Popover>
                         <Popover
                             isOpen={isPaddingOptionsOpen}
-                            positions={["left", "bottom"]}
+                            positions={["left", "bottom", "top"]}
+                            reposition={true}
+                            boundaryInset={10}
+                            align="center"
                             onClickOutside={() =>
                                 setIsPaddingOptionsOpen(false)
                             }

From ffc05e1d277351b7c55b3af8fe640924f521cf7a Mon Sep 17 00:00:00 2001
From: Aleksandre <aleksandre.nozadze.1@iliauni.edu.ge>
Date: Wed, 1 Oct 2025 18:40:32 +0400
Subject: [PATCH 69/81] chore: Delete SettingsPage component file

---
 src/Pages/Settings.tsx | 49 ------------------------------------------
 1 file changed, 49 deletions(-)
 delete mode 100644 src/Pages/Settings.tsx

diff --git a/src/Pages/Settings.tsx b/src/Pages/Settings.tsx
deleted file mode 100644
index 1edabe8..0000000
--- a/src/Pages/Settings.tsx
+++ /dev/null
@@ -1,49 +0,0 @@
-import { useUser } from "../Contexts/UserContext";
-
-const SettingsPage = () => {
-    const {
-        fontSize,
-        setFontSize,
-        colorScheme,
-        setColorScheme,
-        sortBy,
-        setSortBy,
-    } = useUser();
-
-    return (
-        <div
-            className={`h-full max-w-5xl px-4 sm:px-8 md:px-12 w-full flex flex-col justify-between items-center`}
-        >
-            <p className="text-2xl pb-28">Settings</p>
-            <div
-                className={`text-xl flex flex-row justify-between w-full h-full`}
-            >
-                <div>
-                    <p>Font Size</p>
-                    <select
-                        value={fontSize}
-                        onChange={(e) => setFontSize(e.target.value)}
-                    >
-                        <option value="xs">Small</option>
-                        <option value="lg">Medium</option>
-                        <option value="xl">Large</option>
-                    </select>
-
-                    <p className={`text-${fontSize}! `}>Example text...</p>
-                </div>
-                <div>
-                    <p>Font Family</p>
-                </div>
-                <div>
-                    <p>Color Scheme</p>
-                </div>
-                <div>
-                    <p>Caching</p>
-                    <p className="subtitle">Cannot disable!</p>
-                </div>
-            </div>
-        </div>
-    );
-};
-
-export default SettingsPage;

From 22346713ac94bb822e4e17d8bdfe916391ce487f Mon Sep 17 00:00:00 2001
From: Aleksandre <aleksandre.nozadze.1@iliauni.edu.ge>
Date: Wed, 1 Oct 2025 18:40:32 +0400
Subject: [PATCH 70/81] chore: Remove SettingsPage route and import from
 App.tsx

---
 src/App.tsx | 11 -----------
 1 file changed, 11 deletions(-)

diff --git a/src/App.tsx b/src/App.tsx
index 321f0f1..99eba01 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -38,7 +38,6 @@ import Dashboard from "./Pages/Dashboard";
 import LoginPage from "./Pages/LoginPage";
 import RegisterPage from "./Pages/RegisterPage";
 import UploadPage from "./Pages/UploadPage";
-import SettingsPage from "./Pages/Settings";
 import EditNovelPage from "./Pages/EditNovelPage";
 import EditChapterPage from "./Pages/EditChapterPage";
 import UploadEPUBPage from "./Pages/UploadEPUBPage";
@@ -158,16 +157,6 @@ const RouterTransition = () => {
                             </PageAnimationWrapper>
                         }
                     />
-                    <Route
-                        path="/settings"
-                        element={
-                            <PageAnimationWrapper>
-                                <RequireUser>
-                                    <SettingsPage />
-                                </RequireUser>
-                            </PageAnimationWrapper>
-                        }
-                    />
                 </Route>
                 <Route path="/novels" element={<NovelsPageLayout />}>
                     <Route

From bcf823c29018ea6225eb94ce80fbab815d50cf99 Mon Sep 17 00:00:00 2001
From: Aleksandre <aleksandre.nozadze.1@iliauni.edu.ge>
Date: Wed, 1 Oct 2025 18:40:32 +0400
Subject: [PATCH 71/81] chore: Remove Settings navigation links and related
 imports from Navbar

---
 src/Components/Navbar.tsx | 12 ------------
 1 file changed, 12 deletions(-)

diff --git a/src/Components/Navbar.tsx b/src/Components/Navbar.tsx
index 1aac6a0..1ce6831 100644
--- a/src/Components/Navbar.tsx
+++ b/src/Components/Navbar.tsx
@@ -5,7 +5,6 @@ import { Link } from "react-router-dom";
 import { useUser } from "../Contexts/UserContext";
 import { Popover } from "react-tiny-popover";
 import PersistentStoragePermissionButton from "./PersistentStoragePermissionButton";
-import SettingsDropdown from "./SettingsDropdown";
 
 const Navbar = () => {
     const { user, logout } = useUser();
@@ -50,11 +49,6 @@ const Navbar = () => {
                         {!dropdown && (
                             <div className="hidden lg:flex items-center justify-between space-x-5">
                                 <PersistentStoragePermissionButton />
-                                {user && (
-                                    <Link to="/settings" className="link">
-                                        [Settings]
-                                    </Link>
-                                )}
 
                                 {user && (
                                     <Link
@@ -131,12 +125,6 @@ const Navbar = () => {
                         >
                             <PersistentStoragePermissionButton />
 
-                            {user && (
-                                <Link to="/settings" className="link">
-                                    [Settings]
-                                </Link>
-                            )}
-
                             <Link to="/novels" className="link">
                                 [Novels]
                             </Link>

From abd2e37c283856047f3a42173078a4939e60b7bd Mon Sep 17 00:00:00 2001
From: Aleksandre <aleksandre.nozadze.1@iliauni.edu.ge>
Date: Wed, 1 Oct 2025 22:10:55 +0400
Subject: [PATCH 72/81] feat: Improve UploadPage layout and add navigation

---
 src/Pages/UploadPage.tsx | 20 ++++++++++++--------
 1 file changed, 12 insertions(+), 8 deletions(-)

diff --git a/src/Pages/UploadPage.tsx b/src/Pages/UploadPage.tsx
index 28cbb02..a258bdf 100644
--- a/src/Pages/UploadPage.tsx
+++ b/src/Pages/UploadPage.tsx
@@ -1,26 +1,30 @@
 import { Link } from "react-router-dom";
+import GoBackButton from "../Components/GoBackButton";
 
 const UploadPage = () => {
     return (
-        <div className="max-w-6xl w-full h-full px-8 lg:px-12 flex flex-row flex-wrap">
-            <div className="w-full h-full flex flex-row flex-nowrap justify-center items-center">
-                <div className="w-1/2 h-1/3 link text-2xl flex flex-col flex-nowrap text-nowrap items-center text-center justify-evenly px-6 border-r-2 border-zinc-800">
+        <div className="max-w-6xl w-full h-full px-8 lg:px-12 flex flex-col flex-nowrap items-center justify-evenly">
+            <div className="w-full h-auto text-2xl flex flex-col md:flex-row flex-wrap justify-evenly items-center">
+                <div className="w-auto flex flex-col items-center justify-between">
                     <Link to="/dashboard/upload/novel" className="link">
                         [Upload Novel]
                     </Link>
-                    <Link to="/dashboard/upload/chapter" className="link">
+                    <Link to="/dashboard/upload/chapter" className="link mt-6">
                         [Upload Chapter]
                     </Link>
                 </div>
-                <div className="h-1/3 flex flex-col flex-nowrap items-center justify-evenly text-center text-2xl ml-6">
-                    <p className="content">
-                        Upload EPUB file to parse Novel and Chapters directly
-                    </p>
+                <p className="content my-12">Or</p>
+                <div className="w-auto flex flex-col flex-nowrap items-center justify-evenly">
                     <Link to="/dashboard/upload/epub" className="link">
                         [Pick EPUB file]
                     </Link>
                 </div>
             </div>
+            <GoBackButton
+                className="link mt-24 text-xl"
+                to={`/novels`}
+                desc={`Novels`}
+            />
         </div>
     );
 };

From a021caff6d08d4de6f46496563b8d1a5410040f7 Mon Sep 17 00:00:00 2001
From: Aleksandre <aleksandre.nozadze.1@iliauni.edu.ge>
Date: Wed, 1 Oct 2025 22:10:55 +0400
Subject: [PATCH 73/81] fix: Set default chapter content font to 'md'

---
 src/Pages/ChapterPage.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/Pages/ChapterPage.tsx b/src/Pages/ChapterPage.tsx
index 67e4c4c..5a4dedd 100644
--- a/src/Pages/ChapterPage.tsx
+++ b/src/Pages/ChapterPage.tsx
@@ -206,7 +206,7 @@ const ChapterPage = () => {
 
                     <div
                         id="chapter-content"
-                        className={` mt-8 prose prose-lg font-sans text-${fontSize ?? "lg"} leading-normal`}
+                        className={`mt-8 prose prose-lg font-sans text-${fontSize ?? "md"} leading-normal`}
                         style={{ width: `${padding}%` }}
                     >
                         <ReactMarkdown

From cf54ccf48720bdbaeada11c5a0d95ea90f1791d6 Mon Sep 17 00:00:00 2001
From: Aleksandre <aleksandre.nozadze.1@iliauni.edu.ge>
Date: Wed, 1 Oct 2025 22:10:55 +0400
Subject: [PATCH 74/81] feat: Enhance ChapterCard and NovelCard with
 interactive animations

---
 src/Components/ChapterCard.tsx |  46 +++++++---
 src/Components/NovelCard.tsx   | 150 ++++++++++++++++++++++++++++++---
 2 files changed, 173 insertions(+), 23 deletions(-)

diff --git a/src/Components/ChapterCard.tsx b/src/Components/ChapterCard.tsx
index 03b03e1..5196dcb 100644
--- a/src/Components/ChapterCard.tsx
+++ b/src/Components/ChapterCard.tsx
@@ -1,40 +1,66 @@
-import React from "react";
-import { Link } from "react-router-dom";
+import React, { useState } from "react";
+import { Link, useNavigate } from "react-router-dom";
 import { ChapterCardProps, NovelCardProps } from "../Types/types";
 import FormattedTime from "./FormattedTime";
 import useSWR from "swr";
 import { useContent } from "../Contexts/ContentContext";
 
 const ChapterCard: React.FC<ChapterCardProps> = ({ chapter }) => {
+    const [isAnimating, setIsAnimating] = useState(false);
+
     const { novel } = useContent();
 
     if (!novel) return null;
 
     const { setChapter } = useContent();
 
+    const navigate = useNavigate();
+    const handleClick = () => {
+        setIsAnimating(true);
+        setChapter(chapter);
+
+        setTimeout(() => {
+            setIsAnimating(false);
+            return navigate(`/novels/${novel.id}/${chapter.id}#chapter-id`);
+        }, 500);
+    };
+
     return (
-        <div className="my-3 py-2 border-b border-zinc-800">
+        <div
+            onClick={handleClick}
+            className="relative flex flex-col gap-6 p-2.5 my-2 overflow-x-clip"
+        >
             {chapter && (
                 <div>
-                    <h2 className="text-2xl">{chapter.title}</h2>
+                    <h1 className="text-2xl text-nowrap overflow-hidden overflow-ellipsis">
+                        {chapter.title}
+                    </h1>
                     <div className="mx-1 mt-1 flex justify-between">
                         <FormattedTime
                             date={chapter.update_date}
                             classname={"link"}
-                            popover_text={"Uploaded"}
+                            popover_text={"Last Updated"}
                         />
-                        <Link
+                        <div
                             onClick={() => {
-                                setChapter(chapter);
+                                handleClick();
                             }}
-                            to={`/novels/${novel.id}/${chapter.id}#chapter-id`}
-                            className="mx-1 link "
+                            className="mx-1 link cursor-pointer"
                         >
                             [Read]
-                        </Link>
+                        </div>
                     </div>
                 </div>
             )}
+            {isAnimating && (
+                <div
+                    className="absolute inset-0 bg-gradient-to-r from-[#fab387]/15 to-[#fab387]/50 pointer-events-none rounded-xs"
+                    style={{
+                        animation: "fillAnimation 0.5s ease-out forwards",
+                    }}
+                />
+            )}
+            <div className="absolute -bottom-1 left-0.5 right-0.5 h-px bg-zinc-800" />
         </div>
     );
 };
diff --git a/src/Components/NovelCard.tsx b/src/Components/NovelCard.tsx
index 2131d6f..67b266f 100644
--- a/src/Components/NovelCard.tsx
+++ b/src/Components/NovelCard.tsx
@@ -1,47 +1,171 @@
-import { Link } from "react-router-dom";
+import { Link, useNavigate } from "react-router-dom";
 import { NovelCardProps } from "../Types/types";
 import { useContent } from "../Contexts/ContentContext";
+import { useEffect, useRef, useState } from "react";
 
 const NovelCard: React.FC<NovelCardProps> = ({ novel, index }) => {
-    let hoverTimeout: ReturnType<typeof setTimeout>;
-
+    const [progress, setProgress] = useState(0);
+    const [isHovering, setIsHovering] = useState(false);
+    const [isAnimating, setIsAnimating] = useState(false);
+    const startTimeRef = useRef<number>(0);
+    const animationFrameRef = useRef<number>(0);
+    const timeoutRef = useRef<any>(0);
     const { novels, setNovel } = useContent();
+    const HOLD_DURATION = 1500;
+    const CLICK_DURATION = 500;
+    const navigate = useNavigate();
+
+    const updateProgress = (
+        targetDuration: number,
+        isClick: boolean = false,
+    ) => {
+        if (startTimeRef.current) {
+            const elapsed = Date.now() - startTimeRef.current;
+            const newProgress = Math.min((elapsed / targetDuration) * 100, 100);
+            setProgress(newProgress);
+
+            if (elapsed < targetDuration) {
+                animationFrameRef.current = requestAnimationFrame(() =>
+                    updateProgress(targetDuration, isClick),
+                );
+            } else if (isClick) {
+                // Click animation complete - set novel AND navigate
+                setNovel(novel);
+                navigate(`/novels/${novel.id}#codex`);
+            } else {
+                // Hover animation complete - only set novel
+                setNovel(novel);
+            }
+        }
+    };
+
+    const handleClick = () => {
+        const currentProgress = progress;
+        const remainingProgress = 100 - currentProgress;
+
+        setIsAnimating(true);
+        setIsHovering(false);
+
+        if (animationFrameRef.current) {
+            cancelAnimationFrame(animationFrameRef.current);
+        }
+        if (timeoutRef.current) {
+            clearTimeout(timeoutRef.current);
+        }
+
+        if (currentProgress >= (CLICK_DURATION / HOLD_DURATION) * 100) {
+            // Already past click threshold, finish quickly
+            const remainingTime = (remainingProgress / 100) * CLICK_DURATION;
+            startTimeRef.current =
+                Date.now() - (CLICK_DURATION - remainingTime);
+            animationFrameRef.current = requestAnimationFrame(() =>
+                updateProgress(CLICK_DURATION, true),
+            );
+        } else {
+            // Blend into click animation from current progress
+            const elapsedTime = (currentProgress / 100) * CLICK_DURATION;
+            startTimeRef.current = Date.now() - elapsedTime;
+            animationFrameRef.current = requestAnimationFrame(() =>
+                updateProgress(CLICK_DURATION, true),
+            );
+        }
+    };
 
     const handleMouseEnter = () => {
-        hoverTimeout = setTimeout(() => {
+        if (isAnimating) return;
+
+        setIsHovering(true);
+        startTimeRef.current = Date.now();
+
+        animationFrameRef.current = requestAnimationFrame(() =>
+            updateProgress(HOLD_DURATION, false),
+        );
+
+        timeoutRef.current = setTimeout(() => {
             setNovel(novel);
-        }, 1000);
+        }, HOLD_DURATION);
     };
 
     const handleMouseLeave = () => {
-        clearTimeout(hoverTimeout);
+        if (isAnimating) return;
+
+        setIsHovering(false);
+        setProgress(0);
+        startTimeRef.current = 0;
+
+        if (animationFrameRef.current) {
+            cancelAnimationFrame(animationFrameRef.current);
+        }
+        if (timeoutRef.current) {
+            clearTimeout(timeoutRef.current);
+        }
+
+        const currentProgress = progress;
+        const decreaseStartTime = Date.now();
+
+        const animateDecrease = () => {
+            const elapsed = Date.now() - decreaseStartTime;
+            const newProgress = Math.max(
+                currentProgress - (elapsed / CLICK_DURATION) * 100,
+                0,
+            );
+            setProgress(newProgress);
+
+            if (newProgress > 0) {
+                animationFrameRef.current =
+                    requestAnimationFrame(animateDecrease);
+            } else {
+                startTimeRef.current = 0;
+            }
+        };
+
+        animationFrameRef.current = requestAnimationFrame(animateDecrease);
     };
 
+    useEffect(() => {
+        return () => {
+            if (animationFrameRef.current) {
+                cancelAnimationFrame(animationFrameRef.current);
+            }
+            if (timeoutRef.current) {
+                clearTimeout(timeoutRef.current);
+            }
+        };
+    }, []);
+
     return (
         <div
             onMouseEnter={handleMouseEnter}
             onMouseLeave={handleMouseLeave}
-            className="my-3 py-2 border-b border-zinc-800"
+            onClick={handleClick}
+            className="relative flex flex-col gap-6 p-2.5 my-2 overflow-x-clip"
         >
             {novel && (
                 <div>
-                    <h2 className="text-2xl">{novel.title}</h2>
+                    <h1 className="text-2xl text-nowrap overflow-hidden overflow-ellipsis">
+                        {novel.title}
+                    </h1>
                     <div className="mx-1 mt-1 flex justify-between">
                         <div className="subtitle">
                             {" > "} {novel.author}
                         </div>
-                        <Link
+                        <div
                             onClick={() => {
-                                setNovel(novel);
+                                handleClick();
                             }}
-                            to={`/novels/${novel.id}#codex`}
-                            className="mx-1 link"
+                            className="mx-1 link cursor-pointer"
                         >
                             [Read]
-                        </Link>
+                        </div>
                     </div>
                 </div>
             )}
+
+            <div
+                className="absolute inset-0 bg-gradient-to-r from-[#fab387]/15 to-[#fab387]/50 pointer-events-none rounded-xs transition-[width] duration-750 ease-out"
+                style={{ width: `${progress}%` }}
+            />
+            <div className="absolute -bottom-1 left-0.5 right-0.5 h-px bg-zinc-800" />
         </div>
     );
 };

From 4456bda417e4a537a65913b62bf8dd030dab4d0b Mon Sep 17 00:00:00 2001
From: Aleksandre <aleksandre.nozadze.1@iliauni.edu.ge>
Date: Wed, 1 Oct 2025 22:22:44 +0400
Subject: [PATCH 75/81] feat: Add fillAnimation keyframes for UI effects

---
 src/Styles/ComponentStyles.css | 9 +++++++++
 1 file changed, 9 insertions(+)

diff --git a/src/Styles/ComponentStyles.css b/src/Styles/ComponentStyles.css
index 7262025..74f8c35 100644
--- a/src/Styles/ComponentStyles.css
+++ b/src/Styles/ComponentStyles.css
@@ -198,3 +198,12 @@ input.search-input {
     flex-direction: column;
     flex-wrap: nowrap;
 }
+
+@keyframes fillAnimation {
+    from {
+        transform: translateX(-100%);
+    }
+    to {
+        transform: translateX(0);
+    }
+}

From 1743d42b2371d2414f23d1214d5a1153b7136ec1 Mon Sep 17 00:00:00 2001
From: Aleksandre <aleksandre.nozadze.1@iliauni.edu.ge>
Date: Wed, 1 Oct 2025 22:22:44 +0400
Subject: [PATCH 76/81] refactor(ChapterCard): Update navigation logic and
 remove click handler

---
 src/Components/ChapterCard.tsx | 9 +++------
 1 file changed, 3 insertions(+), 6 deletions(-)

diff --git a/src/Components/ChapterCard.tsx b/src/Components/ChapterCard.tsx
index 5196dcb..61b3461 100644
--- a/src/Components/ChapterCard.tsx
+++ b/src/Components/ChapterCard.tsx
@@ -17,19 +17,16 @@ const ChapterCard: React.FC<ChapterCardProps> = ({ chapter }) => {
     const navigate = useNavigate();
     const handleClick = () => {
         setIsAnimating(true);
-        setChapter(chapter);
 
         setTimeout(() => {
             setIsAnimating(false);
-            return navigate(`/novels/${novel.id}/${chapter.id}#chapter-id`);
+            setChapter(chapter);
+            return navigate(`/novels/${novel.id}/${chapter.id}#root`);
         }, 500);
     };
 
     return (
-        <div
-            onClick={handleClick}
-            className="relative flex flex-col gap-6 p-2.5 my-2 overflow-x-clip"
-        >
+        <div className="relative flex flex-col gap-6 p-2.5 my-2 overflow-x-clip">
             {chapter && (
                 <div>
                     <h1 className="text-2xl text-nowrap overflow-hidden overflow-ellipsis">

From 2d82bedad38693e27f0cb0838a724b7197e01d8d Mon Sep 17 00:00:00 2001
From: Aleksandre <aleksandre.nozadze.1@iliauni.edu.ge>
Date: Thu, 2 Oct 2025 00:52:21 +0400
Subject: [PATCH 77/81] feat: Introduce ChapterProgress and NovelProgress types

---
 src/Services/cacheService.ts |  1 +
 src/Types/types.ts           | 13 +++++++++++++
 2 files changed, 14 insertions(+)

diff --git a/src/Services/cacheService.ts b/src/Services/cacheService.ts
index a806e82..fcb76b5 100644
--- a/src/Services/cacheService.ts
+++ b/src/Services/cacheService.ts
@@ -1,4 +1,5 @@
 import { Cache } from "swr";
+import { ChapterProgress } from "../Types/types";
 
 export function localStorageProvider(cacheKey = "app-cache") {
     return (previousCache: Readonly<Cache<any>>): Cache<any> => {
diff --git a/src/Types/types.ts b/src/Types/types.ts
index 3ca4036..e2e6043 100644
--- a/src/Types/types.ts
+++ b/src/Types/types.ts
@@ -144,3 +144,16 @@ export interface SearchNovelHandlerProps {
 export interface SearchAllNovelsHandlerProps {
     common: novelCommon;
 }
+
+export interface NovelProgress {
+    novelId: string;
+    progress: ChapterProgress[];
+    lastUpdated: number;
+}
+
+export interface ChapterProgress {
+    chapterId: string;
+    progress: number;
+    lastUpdated: number;
+    scrollPosition?: number;
+}

From 063e0ead9819a8b7437b80efbf0eca0e4f0e633a Mon Sep 17 00:00:00 2001
From: Aleksandre <aleksandre.nozadze.1@iliauni.edu.ge>
Date: Thu, 2 Oct 2025 00:52:21 +0400
Subject: [PATCH 78/81] feat: Implement local storage cache for chapter reading
 progress

---
 src/Services/cacheService.ts | 58 ++++++++++++++++++++++++++++++++++++
 1 file changed, 58 insertions(+)

diff --git a/src/Services/cacheService.ts b/src/Services/cacheService.ts
index fcb76b5..eb7c351 100644
--- a/src/Services/cacheService.ts
+++ b/src/Services/cacheService.ts
@@ -47,3 +47,61 @@ export function localSyncProvider(cacheKey = "app-cache") {
         return map;
     };
 }
+
+const STORAGE_KEY = "chapter_progress";
+
+export const getAllProgress = (): Record<string, ChapterProgress> => {
+    try {
+        const data = localStorage.getItem(STORAGE_KEY);
+        return data ? JSON.parse(data) : {};
+    } catch (error) {
+        console.error("Failed to load progress:", error);
+        return {};
+    }
+};
+
+export const getChapterProgress = (
+    chapterId: string,
+): ChapterProgress | null => {
+    const allProgress = getAllProgress();
+    return allProgress[chapterId] || null;
+};
+
+export const saveChapterProgress = (
+    chapterId: string,
+    progress: number,
+    scrollPosition?: number,
+): void => {
+    try {
+        const allProgress = getAllProgress();
+
+        allProgress[chapterId] = {
+            chapterId,
+            progress: Math.min(Math.max(progress, 0), 100),
+            lastUpdated: Date.now(),
+            scrollPosition,
+        };
+
+        localStorage.setItem(STORAGE_KEY, JSON.stringify(allProgress));
+    } catch (error) {
+        console.error("Failed to save progress:", error);
+    }
+};
+
+export const deleteChapterProgress = (chapterId: string): void => {
+    try {
+        const allProgress = getAllProgress();
+        delete allProgress[chapterId];
+        localStorage.setItem(STORAGE_KEY, JSON.stringify(allProgress));
+    } catch (error) {
+        console.error("Failed to delete progress:", error);
+    }
+};
+
+export const clearAllProgress = (): void => {
+    try {
+        localStorage.removeItem(STORAGE_KEY);
+    } catch (error) {
+        console.error("Failed to clear progress:", error);
+    }
+};

From e710fea64d0f3e6d1ae8c7ac9c97d47e045ddc71 Mon Sep 17 00:00:00 2001
From: Aleksandre <aleksandre.nozadze.1@iliauni.edu.ge>
Date: Thu, 2 Oct 2025 00:52:21 +0400
Subject: [PATCH 79/81] feat(deps): Add lodash and @types/lodash

---
 package-lock.json | 10 +++++++++-
 package.json      |  2 ++
 2 files changed, 11 insertions(+), 1 deletion(-)

diff --git a/package-lock.json b/package-lock.json
index 5d23dc3..f2cab96 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -16,11 +16,12 @@
                 "@mdxeditor/editor": "^3.42.0",
                 "@piotr-cz/swr-idb-cache": "^1.1.2",
                 "@tailwindcss/typography": "^0.5.15",
-                "@testing-library/jest-dom": "^6.8.0",
                 "@tanstack/react-query": "^5.85.5",
+                "@testing-library/jest-dom": "^6.8.0",
                 "@testing-library/react": "^16.3.0",
                 "@testing-library/user-event": "^14.6.1",
                 "@types/jest": "^30.0.0",
+                "@types/lodash": "^4.17.20",
                 "@types/react": "^19.1.11",
                 "@types/react-dom": "^19.1.7",
                 "@types/react-transition-group": "^4.4.11",
@@ -30,6 +31,7 @@
                 "epubjs": "^0.3.93",
                 "framer-motion": "^12.23.12",
                 "fuse.js": "^7.1.0",
+                "lodash": "^4.17.21",
                 "react": "^19.1.1",
                 "react-dom": "^19.1.1",
                 "react-intersection-observer": "^9.16.0",
@@ -4078,6 +4080,12 @@
                 "localforage": "*"
             }
         },
+        "node_modules/@types/lodash": {
+            "version": "4.17.20",
+            "resolved": "https://registry.npmjs.org/@types/lodash/-/lodash-4.17.20.tgz",
+            "integrity": "sha512-H3MHACvFUEiujabxhaI/ImO6gUrd8oOurg7LQtS7mbwIXA/cUqWrvBsaeJ23aZEPk1TAYkurjfMbSELfoCXlGA==",
+            "license": "MIT"
+        },
         "node_modules/@types/mdast": {
             "version": "4.0.4",
             "resolved": "https://registry.npmjs.org/@types/mdast/-/mdast-4.0.4.tgz",
diff --git a/package.json b/package.json
index 3e9f27e..e3323e6 100644
--- a/package.json
+++ b/package.json
@@ -16,6 +16,7 @@
         "@testing-library/react": "^16.3.0",
         "@testing-library/user-event": "^14.6.1",
         "@types/jest": "^30.0.0",
+        "@types/lodash": "^4.17.20",
         "@types/react": "^19.1.11",
         "@types/react-dom": "^19.1.7",
         "@types/react-transition-group": "^4.4.11",
@@ -25,6 +26,7 @@
         "epubjs": "^0.3.93",
         "framer-motion": "^12.23.12",
         "fuse.js": "^7.1.0",
+        "lodash": "^4.17.21",
         "react": "^19.1.1",
         "react-dom": "^19.1.1",
         "react-intersection-observer": "^9.16.0",

From bab2de0a586584e26fdc2ccad8270ad38a33c47e Mon Sep 17 00:00:00 2001
From: Aleksandre <aleksandre.nozadze.1@iliauni.edu.ge>
Date: Thu, 2 Oct 2025 00:52:22 +0400
Subject: [PATCH 80/81] feat: Implement persistent scroll progress tracking in
 ProgressIndicator

---
 src/Components/ProgressIndicator.tsx | 98 ++++++++++++++++++++++++----
 1 file changed, 86 insertions(+), 12 deletions(-)

diff --git a/src/Components/ProgressIndicator.tsx b/src/Components/ProgressIndicator.tsx
index 71673fc..543a0bb 100644
--- a/src/Components/ProgressIndicator.tsx
+++ b/src/Components/ProgressIndicator.tsx
@@ -1,19 +1,94 @@
-import { useEffect, useState } from "react";
+import { Query } from "@tanstack/react-query";
+import { useCallback, useEffect, useMemo, useRef, useState } from "react";
+import { useParams } from "react-router-dom";
+import {
+    getChapterProgress,
+    saveChapterProgress,
+} from "../Services/cacheService";
+import { useContent } from "../Contexts/ContentContext";
+import { useError } from "../Contexts/ErrorContext";
+import { throttle } from "lodash";
+import { ChapterProgress } from "../Types/types";
 
 const ProgressIndicator = () => {
     const [scrollPosition, setScrollPosition] = useState(0);
+    const lastSavedProgressRef = useRef(0);
+
+    const { id_chapter } = useParams();
+
+    const { chapter } = useContent();
+    const { addError } = useError();
+
+    const progress = useMemo(() => {
+        return getChapterProgress(String(id_chapter ?? chapter?.id ?? ""));
+    }, [id_chapter, chapter?.id]);
+
+    const calculateScrollPercentage = () => {
+        const winScroll =
+            document.body.scrollTop || document.documentElement.scrollTop;
+        const height =
+            document.documentElement.scrollHeight -
+            document.documentElement.clientHeight;
+        return height > 0 ? (winScroll / height) * 100 : 0;
+    };
+
+    const saveProgress = useCallback(() => {
+        const scrolled = calculateScrollPercentage();
+        const winScroll =
+            document.body.scrollTop || document.documentElement.scrollTop;
+
+        if (
+            scrolled > lastSavedProgressRef.current ||
+            lastSavedProgressRef.current === 0
+        ) {
+            saveChapterProgress(
+                String(id_chapter ?? chapter?.id ?? ""),
+                scrolled,
+                winScroll,
+            );
+            lastSavedProgressRef.current = scrolled;
+        }
+    }, [id_chapter, chapter?.id]);
+
+    const throttledSave = useMemo(
+        () => throttle(saveProgress, 1000, { leading: false, trailing: true }),
+        [saveProgress],
+    );
 
     useEffect(() => {
-        window.addEventListener("scroll", () => {
-            var winScroll =
-                document.body.scrollTop || document.documentElement.scrollTop;
-            var height =
-                document.documentElement.scrollHeight -
-                document.documentElement.clientHeight;
-            var scrolled = (winScroll / height) * 100;
-            setScrollPosition(scrolled);
-        });
-    }, []);
+        const saved = getChapterProgress(
+            String(id_chapter ?? chapter?.id ?? ""),
+        );
+
+        if (saved && saved.scrollPosition) {
+            if (document.readyState === "complete") {
+                window.scrollTo({
+                    top: saved.scrollPosition,
+                    behavior: "smooth",
+                });
+            } else {
+                window.addEventListener("load", () => {
+                    window.scrollTo({
+                        top: saved.scrollPosition,
+                        behavior: "smooth",
+                    });
+                });
+            }
+        }
+
+        const handleScroll = () => {
+            setScrollPosition(calculateScrollPercentage());
+            throttledSave();
+        };
+
+        window.addEventListener("scroll", handleScroll);
+
+        return () => {
+            window.removeEventListener("scroll", handleScroll);
+            throttledSave.cancel();
+            saveProgress();
+        };
+    }, [id_chapter, chapter?.id]);
 
     return (
         <div className="fixed top-0 w-full flex flex-row justify-center items-center">
@@ -23,7 +98,6 @@ const ProgressIndicator = () => {
                     style={{ width: `${scrollPosition}%` }}
                 />
             </div>
-            {/*{Math.round(scrollPosition)}*/}
         </div>
     );
 };

From 89382fa0511cd53d572ba93f8f6b84a3b3f18e4f Mon Sep 17 00:00:00 2001
From: Aleksandre <aleksandre.nozadze.1@iliauni.edu.ge>
Date: Thu, 2 Oct 2025 00:52:22 +0400
Subject: [PATCH 81/81] feat: Display chapter reading progress in ChapterCard

---
 src/Components/ChapterCard.tsx | 92 +++++++++++++++++++++++-----------
 1 file changed, 62 insertions(+), 30 deletions(-)

diff --git a/src/Components/ChapterCard.tsx b/src/Components/ChapterCard.tsx
index 61b3461..f60a373 100644
--- a/src/Components/ChapterCard.tsx
+++ b/src/Components/ChapterCard.tsx
@@ -4,9 +4,12 @@ import { ChapterCardProps, NovelCardProps } from "../Types/types";
 import FormattedTime from "./FormattedTime";
 import useSWR from "swr";
 import { useContent } from "../Contexts/ContentContext";
+import { getChapterProgress } from "../Services/cacheService";
+import { Popover } from "react-tiny-popover";
 
 const ChapterCard: React.FC<ChapterCardProps> = ({ chapter }) => {
     const [isAnimating, setIsAnimating] = useState(false);
+    const [isPopoverOpen, setIsPopoverOpen] = useState(false);
 
     const { novel } = useContent();
 
@@ -25,40 +28,69 @@ const ChapterCard: React.FC<ChapterCardProps> = ({ chapter }) => {
         }, 500);
     };
 
+    const progress = getChapterProgress(String(chapter?.id ?? ""));
+
     return (
-        <div className="relative flex flex-col gap-6 p-2.5 my-2 overflow-x-clip">
-            {chapter && (
-                <div>
-                    <h1 className="text-2xl text-nowrap overflow-hidden overflow-ellipsis">
-                        {chapter.title}
-                    </h1>
-                    <div className="mx-1 mt-1 flex justify-between">
-                        <FormattedTime
-                            date={chapter.update_date}
-                            classname={"link"}
-                            popover_text={"Last Updated"}
-                        />
-                        <div
-                            onClick={() => {
-                                handleClick();
-                            }}
-                            className="mx-1 link cursor-pointer"
-                        >
-                            [Read]
+        <Popover
+            isOpen={isPopoverOpen}
+            positions={["bottom", "top", "left", "right"]}
+            padding={10}
+            reposition={true}
+            boundaryInset={document.body.scrollHeight}
+            content={
+                <div className="link main-background whitespace-nowrap p-2 border border-zinc-800 rounded text-lg">
+                    [{Math.round(progress?.progress ?? 0)}% Read]
+                </div>
+            }
+        >
+            <div
+                onMouseEnter={() => setIsPopoverOpen(true)}
+                onMouseLeave={() => setIsPopoverOpen(false)}
+                className="relative flex flex-col gap-6 p-2.5 my-2 overflow-x-clip"
+            >
+                {chapter && (
+                    <div>
+                        <h1 className="text-2xl text-nowrap overflow-hidden overflow-ellipsis">
+                            {chapter.title}
+                        </h1>
+                        <div className="mx-1 mt-1 flex justify-between">
+                            <FormattedTime
+                                date={chapter.update_date}
+                                classname={"link"}
+                                popover_text={"Last Updated"}
+                            />
+                            <div
+                                onClick={() => {
+                                    handleClick();
+                                }}
+                                className="mx-1 link cursor-pointer"
+                            >
+                                [Read]
+                            </div>
                         </div>
                     </div>
+                )}
+                {isAnimating && (
+                    <div
+                        className="absolute inset-0 bg-gradient-to-r from-[#fab387]/15 to-[#fab387]/50 pointer-events-none rounded-xs"
+                        style={{
+                            animation: "fillAnimation 0.5s ease-out forwards",
+                        }}
+                    />
+                )}
+
+                <div className="absolute -bottom-1 left-0.5 right-0.5">
+                    {/* Base bar */}
+                    <div className="h-px bg-zinc-800" />
+
+                    {/* Progress bar */}
+                    <div
+                        className="absolute inset-y-0 left-0 h-px bg-[#fab387] transition-all duration-300"
+                        style={{ width: `${progress?.progress || 0}%` }}
+                    />
                 </div>
-            )}
-            {isAnimating && (
-                <div
-                    className="absolute inset-0 bg-gradient-to-r from-[#fab387]/15 to-[#fab387]/50 pointer-events-none rounded-xs"
-                    style={{
-                        animation: "fillAnimation 0.5s ease-out forwards",
-                    }}
-                />
-            )}
-            <div className="absolute -bottom-1 left-0.5 right-0.5 h-px bg-zinc-800" />
-        </div>
+            </div>
+        </Popover>
     );
 };