From 32ff8bce0c261c7927a109f76f4791f843077443 Mon Sep 17 00:00:00 2001
From: Kentai Radiquum <kentai.waah@gmail.com>
Date: Fri, 23 Aug 2024 00:09:19 +0500
Subject: [PATCH] refactor: merge <main> from pages in to one in App.tsx

---
 app/App.tsx                     |   4 +-
 app/pages/Bookmarks.tsx         |   4 +-
 app/pages/BookmarksCategory.tsx |   4 +-
 app/pages/Collections.tsx       |   4 +-
 app/pages/CollectionsFull.tsx   |   4 +-
 app/pages/CreateCollection.tsx  |   4 +-
 app/pages/Favorites.tsx         |   4 +-
 app/pages/History.tsx           |   4 +-
 app/pages/Index.tsx             |   4 +-
 app/pages/IndexCategory.tsx     |   4 +-
 app/pages/Login.tsx             | 158 ++++++++++++++++----------------
 app/pages/Related.tsx           |   4 +-
 app/pages/Release.tsx           |   8 +-
 app/pages/Search.tsx            |   4 +-
 app/pages/ViewCollection.tsx    |   4 +-
 15 files changed, 109 insertions(+), 109 deletions(-)

diff --git a/app/App.tsx b/app/App.tsx
index 4ab1838..d700fbe 100644
--- a/app/App.tsx
+++ b/app/App.tsx
@@ -60,7 +60,9 @@ export const App = (props) => {
       className={`${inter.className} overflow-x-hidden dark:bg-[#0d1117] dark:text-white`}
     >
       <Navbar />
-      {props.children}
+      <main className="container px-2 pt-4 pb-24 mx-auto sm:pb-0">
+        {props.children}
+      </main>
       <ChangelogModal
         isOpen={showChangelog && preferencesStore.flags.showChangelog}
         setIsOpen={() => {
diff --git a/app/pages/Bookmarks.tsx b/app/pages/Bookmarks.tsx
index 035fdca..4dc00b1 100644
--- a/app/pages/Bookmarks.tsx
+++ b/app/pages/Bookmarks.tsx
@@ -39,7 +39,7 @@ export function BookmarksPage() {
   }, [authState, token]);
 
   return (
-    <main className="container flex flex-col pt-2 pb-16 mx-auto sm:pt-4 sm:pb-0">
+    <>
       {authState === "loading" &&
         (!watchingData ||
           !plannedData ||
@@ -89,6 +89,6 @@ export function BookmarksPage() {
             content={abandonedData.content}
           />
         )}
-    </main>
+    </>
   );
 }
diff --git a/app/pages/BookmarksCategory.tsx b/app/pages/BookmarksCategory.tsx
index b6aa369..12da4aa 100644
--- a/app/pages/BookmarksCategory.tsx
+++ b/app/pages/BookmarksCategory.tsx
@@ -79,7 +79,7 @@ export function BookmarksCategoryPage(props: any) {
   }, [authState, token]);
 
   return (
-    <main className="container pt-2 pb-16 mx-auto sm:pt-4 sm:pb-0">
+    <>
       <div className="flex items-center justify-between px-4 py-2 border-b-2 border-black dark:border-white">
         <h1 className="font-bold text-md sm:text-xl md:text-lg xl:text-xl">
           {props.SectionTitleMapping[props.slug]}
@@ -133,6 +133,6 @@ export function BookmarksCategoryPage(props: any) {
             </div>
           </Button>
         )}
-    </main>
+    </>
   );
 }
diff --git a/app/pages/Collections.tsx b/app/pages/Collections.tsx
index 07ba00b..2b20ad4 100644
--- a/app/pages/Collections.tsx
+++ b/app/pages/Collections.tsx
@@ -38,7 +38,7 @@ export function CollectionsPage() {
   }, [userStore.state, userStore.token]);
 
   return (
-    <main className="container flex flex-col pt-2 pb-16 mx-auto sm:pt-4 sm:pb-0">
+    <>
       {userStore.state === "loading" &&
         (!userCollections || !favoriteCollections) && (
           <div className="flex items-center justify-center min-w-full min-h-screen">
@@ -63,6 +63,6 @@ export function CollectionsPage() {
             content={favoriteCollections.content}
           />
         )}
-    </main>
+    </>
   );
 }
diff --git a/app/pages/CollectionsFull.tsx b/app/pages/CollectionsFull.tsx
index a541a36..486ca70 100644
--- a/app/pages/CollectionsFull.tsx
+++ b/app/pages/CollectionsFull.tsx
@@ -89,7 +89,7 @@ export function CollectionsFullPage(props: {
   }, [userStore.state, userStore.token]);
 
   return (
-    <main className="container pt-2 pb-16 mx-auto sm:pt-4 sm:pb-0">
+    <>
       {content && content.length > 0 ? (
         <CollectionsSection
           sectionTitle={props.title}
@@ -122,6 +122,6 @@ export function CollectionsFullPage(props: {
             </div>
           </Button>
         )}
-    </main>
+    </>
   );
 }
diff --git a/app/pages/CreateCollection.tsx b/app/pages/CreateCollection.tsx
index cc98189..2bf3828 100644
--- a/app/pages/CreateCollection.tsx
+++ b/app/pages/CreateCollection.tsx
@@ -225,7 +225,7 @@ export const CreateCollectionPage = () => {
   }
 
   return (
-    <main className="container pt-2 pb-16 mx-auto sm:pt-4 sm:pb-0">
+    <>
       <Card>
         <p className="text-xl font-bold">
           {edit ? "Редактирование коллекции" : "Создание коллекции"}
@@ -400,7 +400,7 @@ export const CreateCollectionPage = () => {
         width={600}
         height={337}
       />
-    </main>
+    </>
   );
 };
 
diff --git a/app/pages/Favorites.tsx b/app/pages/Favorites.tsx
index a53a426..b2917cb 100644
--- a/app/pages/Favorites.tsx
+++ b/app/pages/Favorites.tsx
@@ -76,7 +76,7 @@ export function FavoritesPage() {
   }, [authState, token]);
 
   return (
-    <main className="container pt-2 pb-16 mx-auto sm:pt-4 sm:pb-0">
+    <>
       <div className="flex items-center justify-between px-4 py-2 border-b-2 border-black dark:border-white">
         <h1 className="font-bold text-md sm:text-xl md:text-lg xl:text-xl">
           Избранное
@@ -128,6 +128,6 @@ export function FavoritesPage() {
             </div>
           </Button>
         )}
-    </main>
+    </>
   );
 }
diff --git a/app/pages/History.tsx b/app/pages/History.tsx
index 5807e8a..cab1eb3 100644
--- a/app/pages/History.tsx
+++ b/app/pages/History.tsx
@@ -68,7 +68,7 @@ export function HistoryPage() {
   }, [authState, token]);
 
   return (
-    <main className="container pt-2 pb-16 mx-auto sm:pt-4 sm:pb-4">
+    <>
       {content && content.length > 0 ? (
         <>
           <ReleaseSection sectionTitle="История" content={content} />
@@ -95,6 +95,6 @@ export function HistoryPage() {
           <p>В истории пока ничего нет...</p>
         </div>
       )}
-    </main>
+    </>
   );
 }
diff --git a/app/pages/Index.tsx b/app/pages/Index.tsx
index 4647ef0..4af1680 100644
--- a/app/pages/Index.tsx
+++ b/app/pages/Index.tsx
@@ -40,7 +40,7 @@ export function IndexPage() {
   }, [token]);
 
   return (
-    <main className="container flex flex-col pt-2 pb-20 mx-auto sm:pt-4 sm:pb-0">
+    <>
       {lastReleasesData ? (
         <ReleaseCourusel
           sectionTitle="Последние релизы"
@@ -89,6 +89,6 @@ export function IndexPage() {
             <h1 className="text-2xl">Ошибка загрузки контента...</h1>
           </div>
         )}
-    </main>
+    </>
   );
 }
diff --git a/app/pages/IndexCategory.tsx b/app/pages/IndexCategory.tsx
index d474b64..456ed85 100644
--- a/app/pages/IndexCategory.tsx
+++ b/app/pages/IndexCategory.tsx
@@ -48,7 +48,7 @@ export function IndexCategoryPage(props) {
   // if (error) return <div>failed to load</div>;
 
   return (
-    <main className="container pt-2 pb-16 mx-auto sm:pt-4 sm:pb-0">
+    <>
       {content && content.length > 0 ? (
         <ReleaseSection
           sectionTitle={props.SectionTitleMapping[props.slug]}
@@ -76,6 +76,6 @@ export function IndexCategoryPage(props) {
           <span className="text-lg">Загрузить ещё</span>
         </div>
       </Button>
-    </main>
+    </>
   );
 }
diff --git a/app/pages/Login.tsx b/app/pages/Login.tsx
index 65f7534..27507c2 100644
--- a/app/pages/Login.tsx
+++ b/app/pages/Login.tsx
@@ -52,89 +52,87 @@ export function LoginPage() {
   }, [userStore.user]);
 
   return (
-    <main className="container mx-auto">
-      <section className="bg-gray-50 dark:bg-gray-900">
-        <div className="flex flex-col items-center justify-center px-6 py-8 mx-auto md:h-screen lg:py-0">
-          <div className="w-full bg-white rounded-lg shadow dark:border md:mt-0 sm:max-w-md xl:p-0 dark:bg-gray-800 dark:border-gray-700">
-            <div className="p-6 space-y-4 md:space-y-6 sm:p-8">
-              <h1 className="text-xl font-bold leading-tight tracking-tight text-gray-900 md:text-2xl dark:text-white">
-                Вход в аккаунт Anixart
-              </h1>
-              <form
-                className="space-y-4 md:space-y-6"
-                method="POST"
-                onSubmit={submit}
-              >
-                <div>
-                  <label
-                    htmlFor="email"
-                    className="block mb-2 text-sm font-medium text-gray-900 dark:text-white"
-                  >
-                    Логин или эл. почта
-                  </label>
-                  <input
-                    type="text"
-                    name="email"
-                    id="email"
-                    className="bg-gray-50 border border-gray-300 text-gray-900 rounded-lg focus:ring-primary-600 focus:border-primary-600 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500"
-                    placeholder="name@company.com"
-                    value={login}
-                    onChange={(e) => setLogin(e.target.value)}
-                    required={true}
-                  />
-                </div>
-                <div>
-                  <label
-                    htmlFor="password"
-                    className="block mb-2 text-sm font-medium text-gray-900 dark:text-white"
-                  >
-                    Пароль
-                  </label>
-                  <input
-                    type="password"
-                    name="password"
-                    id="password"
-                    placeholder="••••••••"
-                    className="bg-gray-50 border border-gray-300 text-gray-900 rounded-lg focus:ring-primary-600 focus:border-primary-600 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500"
-                    required={true}
-                    value={password}
-                    onChange={(e) => setPassword(e.target.value)}
-                  />
-                </div>
-                <div className="flex items-center justify-between">
-                  <div className="flex items-start">
-                    <div className="flex items-center h-5">
-                      <input
-                        id="remember"
-                        aria-describedby="remember"
-                        type="checkbox"
-                        className="w-4 h-4 border border-gray-300 rounded bg-gray-50 focus:ring-3 focus:ring-primary-300 dark:bg-gray-700 dark:border-gray-600 dark:focus:ring-primary-600 dark:ring-offset-gray-800"
-                        required={true}
-                        checked={remember}
-                        onChange={(e) => setRemember(e.target.checked)}
-                      />
-                    </div>
-                    <div className="ml-3 text-sm">
-                      <label
-                        htmlFor="remember"
-                        className="text-gray-500 dark:text-gray-300"
-                      >
-                        Запомнить вход
-                      </label>
-                    </div>
+    <section className="bg-gray-50 dark:bg-gray-900">
+      <div className="flex flex-col items-center justify-center px-6 py-8 mx-auto md:h-screen lg:py-0">
+        <div className="w-full bg-white rounded-lg shadow dark:border md:mt-0 sm:max-w-md xl:p-0 dark:bg-gray-800 dark:border-gray-700">
+          <div className="p-6 space-y-4 md:space-y-6 sm:p-8">
+            <h1 className="text-xl font-bold leading-tight tracking-tight text-gray-900 md:text-2xl dark:text-white">
+              Вход в аккаунт Anixart
+            </h1>
+            <form
+              className="space-y-4 md:space-y-6"
+              method="POST"
+              onSubmit={submit}
+            >
+              <div>
+                <label
+                  htmlFor="email"
+                  className="block mb-2 text-sm font-medium text-gray-900 dark:text-white"
+                >
+                  Логин или эл. почта
+                </label>
+                <input
+                  type="text"
+                  name="email"
+                  id="email"
+                  className="bg-gray-50 border border-gray-300 text-gray-900 rounded-lg focus:ring-primary-600 focus:border-primary-600 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500"
+                  placeholder="name@company.com"
+                  value={login}
+                  onChange={(e) => setLogin(e.target.value)}
+                  required={true}
+                />
+              </div>
+              <div>
+                <label
+                  htmlFor="password"
+                  className="block mb-2 text-sm font-medium text-gray-900 dark:text-white"
+                >
+                  Пароль
+                </label>
+                <input
+                  type="password"
+                  name="password"
+                  id="password"
+                  placeholder="••••••••"
+                  className="bg-gray-50 border border-gray-300 text-gray-900 rounded-lg focus:ring-primary-600 focus:border-primary-600 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500"
+                  required={true}
+                  value={password}
+                  onChange={(e) => setPassword(e.target.value)}
+                />
+              </div>
+              <div className="flex items-center justify-between">
+                <div className="flex items-start">
+                  <div className="flex items-center h-5">
+                    <input
+                      id="remember"
+                      aria-describedby="remember"
+                      type="checkbox"
+                      className="w-4 h-4 border border-gray-300 rounded bg-gray-50 focus:ring-3 focus:ring-primary-300 dark:bg-gray-700 dark:border-gray-600 dark:focus:ring-primary-600 dark:ring-offset-gray-800"
+                      required={true}
+                      checked={remember}
+                      onChange={(e) => setRemember(e.target.checked)}
+                    />
+                  </div>
+                  <div className="ml-3 text-sm">
+                    <label
+                      htmlFor="remember"
+                      className="text-gray-500 dark:text-gray-300"
+                    >
+                      Запомнить вход
+                    </label>
                   </div>
                 </div>
-                <button
-                  type="submit"
-                  className="w-full text-white bg-blue-600 hover:bg-blue-700 focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium rounded-lg text-sm px-5 py-2.5 text-center dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800"
-                >
-                  Войти
-                </button>
-              </form>
-            </div>
+              </div>
+              <button
+                type="submit"
+                className="w-full text-white bg-blue-600 hover:bg-blue-700 focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium rounded-lg text-sm px-5 py-2.5 text-center dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800"
+              >
+                Войти
+              </button>
+            </form>
           </div>
         </div>
-      </section>
-    </main>
+      </div>
+    </section>
   );
 }
diff --git a/app/pages/Related.tsx b/app/pages/Related.tsx
index 9908e46..2785576 100644
--- a/app/pages/Related.tsx
+++ b/app/pages/Related.tsx
@@ -57,7 +57,7 @@ export function RelatedPage(props: {id: number|string, title: string}) {
   }, [scrollPosition]);
 
   return (
-    <main className="container pt-2 pb-16 mx-auto sm:pt-4 sm:pb-0">
+    <>
       <div className="flex items-center justify-between px-4 py-2 border-b-2 border-black dark:border-white">
         <h1 className="font-bold text-md sm:text-xl md:text-lg xl:text-xl">
           Франшиза {props.title}
@@ -86,6 +86,6 @@ export function RelatedPage(props: {id: number|string, title: string}) {
             <span className="text-lg">Загрузить ещё</span>
           </button>
         )}
-    </main>
+    </>
   );
 }
diff --git a/app/pages/Release.tsx b/app/pages/Release.tsx
index 0661e76..d649706 100644
--- a/app/pages/Release.tsx
+++ b/app/pages/Release.tsx
@@ -46,7 +46,7 @@ export const ReleasePage = (props: any) => {
   }, [data]);
 
   return data ? (
-    <main className="container px-4 pt-4 pb-24 mx-auto sm:pb-4">
+    <>
       <div className="flex flex-col lg:grid lg:grid-cols-[70%_30%] gap-2 grid-flow-row-dense">
         <div className="[grid-column:1] [grid-row:span_2]">
           <ReleaseInfoBasics
@@ -148,10 +148,10 @@ export const ReleasePage = (props: any) => {
           />
         </div>
       </div>
-    </main>
+    </>
   ) : (
-    <main className="flex h-[100dvh] w-full justify-center items-center">
+    <div className="flex h-[100dvh] w-full justify-center items-center">
       <Spinner />
-    </main>
+    </div>
   );
 };
diff --git a/app/pages/Search.tsx b/app/pages/Search.tsx
index ffad084..1ba6922 100644
--- a/app/pages/Search.tsx
+++ b/app/pages/Search.tsx
@@ -90,7 +90,7 @@ export function SearchPage() {
   if (error) return <div>failed to load</div>;
 
   return (
-    <main className="container px-2 pt-2 pb-16 mx-auto sm:pt-4 sm:pb-0">
+    <>
       <div>
         <form
           className="max-w-full mx-auto"
@@ -179,6 +179,6 @@ export function SearchPage() {
           </div>
         </Button>
       )}
-    </main>
+    </>
   );
 }
diff --git a/app/pages/ViewCollection.tsx b/app/pages/ViewCollection.tsx
index 2460862..21df85c 100644
--- a/app/pages/ViewCollection.tsx
+++ b/app/pages/ViewCollection.tsx
@@ -89,7 +89,7 @@ export const ViewCollectionPage = (props: { id: number }) => {
   }, [scrollPosition]);
 
   return (
-    <main className="container pt-2 pb-16 mx-auto sm:pt-4 sm:pb-0">
+    <>
       {collectionInfoIsLoading ? (
         <div className="flex items-center justify-center w-full h-screen">
           <Spinner />
@@ -150,6 +150,6 @@ export const ViewCollectionPage = (props: { id: number }) => {
           </>
         )
       )}
-    </main>
+    </>
   );
 };