Add public profiles and cosmetic shop

app/cosmetics/page.tsx

@@ -0,0 +1,43 @@
+import Link from "next/link";
+import { redirect } from "next/navigation";
+import { ArrowLeft } from "lucide-react";
+import { CosmeticsShop } from "@/components/CosmeticsShop";
+import { Footer, Header } from "@/components/Shell";
+import { getI18n } from "@/lib/i18n";
+import { accountProfile } from "@/lib/profile";
+import { profileCosmeticsState } from "@/lib/profile-cosmetics";
+import { user } from "@/lib/supabase";
+
+export const dynamic = "force-dynamic";
+
+export async function generateMetadata() {
+  const { t } = await getI18n();
+  return { title: t("Profile cosmetics") };
+}
+
+export default async function CosmeticsPage() {
+  const account = await user();
+  if (!account) redirect("/log-in?next=%2Fcosmetics");
+  const [profile, shop] = await Promise.all([
+    accountProfile(account),
+    profileCosmeticsState(account.id),
+  ]);
+  const { t } = await getI18n();
+
+  return (
+    <>
+      <Header />
+      <main className="section page-content">
+        <Link className="text-link" href="/dashboard">
+          <ArrowLeft size={15} aria-hidden="true" /> {t("My account")}
+        </Link>
+        <CosmeticsShop
+          accountId={account.id}
+          avatarPath={profile.avatar_path}
+          initialShop={shop}
+        />
+      </main>
+      <Footer />
+    </>
+  );
+}