refactor: merge <main> from pages in to one in App.tsx

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={() => {

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>
+    </>
   );
 }

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>
+    </>
   );
 }

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>
+    </>
   );
 }

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>
+    </>
   );
 }

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>
+    </>
   );
 };
 

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>
+    </>
   );
 }

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>
+    </>
   );
 }

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>
+    </>
   );
 }

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>
+    </>
   );
 }

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">
-      <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="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="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">
-            <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">
-              <h1 className="text-xl font-bold leading-tight tracking-tight text-gray-900 md:text-2xl dark:text-white">
+              Вход в аккаунт Anixart
-                Вход в аккаунт Anixart
+            </h1>
-              </h1>
+            <form
-              <form
+              className="space-y-4 md:space-y-6"
-                className="space-y-4 md:space-y-6"
+              method="POST"
-                method="POST"
+              onSubmit={submit}
-                onSubmit={submit}
+            >
-              >
+              <div>
-                <div>
+                <label
-                  <label
+                  htmlFor="email"
-                    htmlFor="email"
+                  className="block mb-2 text-sm font-medium text-gray-900 dark:text-white"
-                    className="block mb-2 text-sm font-medium text-gray-900 dark:text-white"
+                >
-                  >
+                  Логин или эл. почта
-                    Логин или эл. почта
+                </label>
-                  </label>
+                <input
-                  <input
+                  type="text"
-                    type="text"
+                  name="email"
-                    name="email"
+                  id="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"
-                    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"
-                    placeholder="name@company.com"
+                  value={login}
-                    value={login}
+                  onChange={(e) => setLogin(e.target.value)}
-                    onChange={(e) => setLogin(e.target.value)}
+                  required={true}
-                    required={true}
+                />
-                  />
+              </div>
-                </div>
+              <div>
-                <div>
+                <label
-                  <label
+                  htmlFor="password"
-                    htmlFor="password"
+                  className="block mb-2 text-sm font-medium text-gray-900 dark:text-white"
-                    className="block mb-2 text-sm font-medium text-gray-900 dark:text-white"
+                >
-                  >
+                  Пароль
-                    Пароль
+                </label>
-                  </label>
+                <input
-                  <input
+                  type="password"
-                    type="password"
+                  name="password"
-                    name="password"
+                  id="password"
-                    id="password"
+                  placeholder="••••••••"
-                    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"
-                    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}
-                    required={true}
+                  value={password}
-                    value={password}
+                  onChange={(e) => setPassword(e.target.value)}
-                    onChange={(e) => setPassword(e.target.value)}
+                />
-                  />
+              </div>
-                </div>
+              <div className="flex items-center justify-between">
-                <div className="flex items-center justify-between">
+                <div className="flex items-start">
-                  <div className="flex items-start">
+                  <div className="flex items-center h-5">
-                    <div className="flex items-center h-5">
+                    <input
-                      <input
+                      id="remember"
-                        id="remember"
+                      aria-describedby="remember"
-                        aria-describedby="remember"
+                      type="checkbox"
-                        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"
-                        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}
-                        required={true}
+                      checked={remember}
-                        checked={remember}
+                      onChange={(e) => setRemember(e.target.checked)}
-                        onChange={(e) => setRemember(e.target.checked)}
+                    />
-                      />
+                  </div>
-                    </div>
+                  <div className="ml-3 text-sm">
-                    <div className="ml-3 text-sm">
+                    <label
-                      <label
+                      htmlFor="remember"
-                        htmlFor="remember"
+                      className="text-gray-500 dark:text-gray-300"
-                        className="text-gray-500 dark:text-gray-300"
+                    >
-                      >
+                      Запомнить вход
-                        Запомнить вход
+                    </label>
-                      </label>
-                    </div>
                   </div>
                 </div>
-                <button
+              </div>
-                  type="submit"
+              <button
-                  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"
+                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>
+              </button>
-            </div>
+            </form>
           </div>
         </div>
-      </section>
+      </div>
-    </main>
+    </section>
   );
 }

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>
+    </>
   );
 }

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>
   );
 };

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>
+    </>
   );
 }

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>
+    </>
   );
 };