feat: some tankopedia server rendered

src/app/tools/tankopedia/[id]/components/Model/HistoricalSection.tsx

@@ -1,16 +0,0 @@
-import { Heading, Text } from '@radix-ui/themes';
-import PageWrapper from '../../../../../../components/PageWrapper';
-import { useDuel } from '../../../../../../stores/duel';
-
-export function HistoricalSection() {
-  const tank = useDuel((state) => state.protagonist!.tank);
-
-  if (!tank.description) return null;
-
-  return (
-    <PageWrapper noFlex1>
-      <Heading>History of the {tank.name}</Heading>
-      <Text>{tank.description}</Text>
-    </PageWrapper>
-  );
-}

src/app/tools/tankopedia/[id]/components/Videos.tsx

@@ -1,45 +0,0 @@
-import { Flex, Heading, Link, Text } from '@radix-ui/themes';
-import { use } from 'react';
-import PageWrapper from '../../../../../components/PageWrapper';
-import { videoDefinitions } from '../../../../../core/blitzkit/videos';
-import { useDuel } from '../../../../../stores/duel';
-
-export function Videos() {
-  const tank = useDuel((state) => state.protagonist!.tank);
-  const awaitedVideoDefinitions = use(videoDefinitions);
-  const videos = awaitedVideoDefinitions[tank.id]?.videos ?? [];
-
-  if (videos.length === 0) return null;
-
-  return (
-    <PageWrapper noFlex1>
-      <Flex direction="column" gap="4" align="start">
-        <Flex direction="column">
-          <Heading size="6">Review videos</Heading>
-          <Text color="gray">BlitzKit does not endorse any review videos.</Text>
-        </Flex>
-
-        <Flex gap="3" wrap="wrap">
-          {videos.map((video) => (
-            <Link
-              key={video}
-              href={`https://www.youtube.com/watch?v=${video}`}
-              target="_blank"
-            >
-              <img
-                alt="Video thumbnail"
-                src={`https://i.ytimg.com/vi/${video}/hqdefault.jpg`}
-                style={{
-                  aspectRatio: '16 / 9',
-                  objectFit: 'cover',
-                  height: 128,
-                  borderRadius: 8,
-                }}
-              />
-            </Link>
-          ))}
-        </Flex>
-      </Flex>
-    </PageWrapper>
-  );
-}

src/app/tools/tankopedia/[id]/layout.tsx

@@ -1,7 +1,10 @@
+import { Flex, Heading, Link, Text } from '@radix-ui/themes';
 import { ReactNode } from 'react';
+import PageWrapper from '../../../../components/PageWrapper';
 import { tankDefinitions } from '../../../../core/blitzkit/tankDefinitions';
 import { TIER_ROMAN_NUMERALS } from '../../../../core/blitzkit/tankDefinitions/constants';
 import { tankIcon } from '../../../../core/blitzkit/tankIcon';
+import { videoDefinitions } from '../../../../core/blitzkit/videos';
 import strings from '../../../../lang/en-US.json';
 
 interface TankopediaLayoutProps {
@@ -15,11 +18,13 @@ export default async function TankopediaLayout({
 }: TankopediaLayoutProps) {
   const id = Number(params.id);
   const awaitedTankDefinitions = await tankDefinitions;
+  const awaitedVideoDefinitions = await videoDefinitions;
   const tank = awaitedTankDefinitions[id];
   const title = `${tank.name} - Tier ${TIER_ROMAN_NUMERALS[tank.tier]} ${
     (strings.common.nations_adjectives as Record<string, string>)[tank.nation]
   } ${strings.common.tank_class_short[tank.class]}`;
   const description = `Statistics, armor profiles, and equipment for ${tank.name}`;
+  const videos = awaitedVideoDefinitions[tank.id]?.videos ?? [];
 
   return (
     <>
@@ -30,6 +35,42 @@ export default async function TankopediaLayout({
       <meta property="og:description" content={description} />
 
       {children}
+
+      <PageWrapper noFlex1>
+        <Flex direction="column" gap="4" align="start">
+          <Flex direction="column">
+            <Heading size="6">Review videos</Heading>
+            <Text color="gray">
+              BlitzKit does not endorse any review videos.
+            </Text>
+          </Flex>
+
+          <Flex gap="3" wrap="wrap">
+            {videos.map((video) => (
+              <Link
+                key={video}
+                href={`https://www.youtube.com/watch?v=${video}`}
+                target="_blank"
+              >
+                <img
+                  alt="Video thumbnail"
+                  src={`https://i.ytimg.com/vi/${video}/hqdefault.jpg`}
+                  style={{
+                    aspectRatio: '16 / 9',
+                    objectFit: 'cover',
+                    height: 128,
+                    borderRadius: 8,
+                  }}
+                />
+              </Link>
+            ))}
+          </Flex>
+        </Flex>
+      </PageWrapper>
+      <PageWrapper noFlex1>
+        <Heading>History of the {tank.name}</Heading>
+        <Text>{tank.description}</Text>
+      </PageWrapper>
     </>
   );
 }

src/app/tools/tankopedia/[id]/page.tsx

@@ -7,10 +7,8 @@ import { mutateDuel, useDuel } from '../../../../stores/duel';
 import { mutateTankopediaTemporary } from '../../../../stores/tankopedia';
 import { CharacteristicsSection } from './components/Model/CharacteristicsSection';
 import { HeroSection } from './components/Model/HeroSection';
-import { HistoricalSection } from './components/Model/HistoricalSection';
 import { TankopediaPlug } from './components/Model/TankopediaPlug';
 import { TechTreeSection } from './components/Model/TechTreeSection';
-import { Videos } from './components/Videos';
 
 export default function Page({ params }: { params: { id: string } }) {
   const initialId = parseInt(params.id);
@@ -79,8 +77,6 @@ export default function Page({ params }: { params: { id: string } }) {
           <CharacteristicsSection />
           <TechTreeSection />
           {/* <TankopediaSeparator /> */}
-          <Videos />
-          <HistoricalSection />
         </>
       )}
     </PageWrapper>

src/components/Navbar/index.tsx

@@ -1,5 +1,3 @@
-'use client';
-
 import {
   Cross1Icon,
   DiscordLogoIcon,