add user profile and check pages

src/pages/profiles/[id].astro

@@ -0,0 +1,97 @@
+---
+import Avatar from "../../components/Avatar.astro";
+import Layout from "../../layouts/Layout.astro";
+import {
+ getAllChecksByUser,
+ getCheckRevision,
+ getProfileById,
+ getTemplateRevision,
+} from "../../backendlib";
+import CheckCard from "../../components/CheckCard.astro";
+import {
+ decodeKinkCheck,
+ type check,
+ type check_revision,
+ type TemplateRevision,
+} from "../../base";
+
+const { id } = Astro.params;
+
+if (!id) {
+ return new Response("no user id given", { status: 400 });
+}
+
+const [profile, error] = await getProfileById(id);
+
+if (error) {
+ return new Response(error.message, { status: 500 });
+}
+
+const [checks, err] = await getAllChecksByUser(id);
+const usableChecks =
+ checks &&
+ (await Promise.all(
+ checks
+ .map((x) => getCheckRevision(x, "latest"))
+ .filter((x) => x)
+ .map((x) => x!)
+ .map<Promise<[check & check_revision, TemplateRevision | null]>>(
+ async (check) => [
+ check,
+ await getTemplateRevision({
+ id: check.template,
+ version: check.version,
+ }).then(([t]) => t),
+ ],
+ ),
+ ));
+---
+
+<Layout title={`${profile.full_name} (@${profile.username})`}>
+ <Avatar {...profile} size="44px" slot="header" />
+ Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor
+ incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud
+ exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute
+ irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat
+ nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa
+ qui officia deserunt mollit anim id est laborum.
+
+ <h2>Checks</h2>
+ {
+ err || !checks.length || !usableChecks ? (
+ <>
+ <p>
+ There are no checks from this user (or they aren't visible
+ to you)
+ </p>
+ <pre>{err}</pre>
+ </>
+ ) : (
+ <ul>
+ {usableChecks.map(([check, template]) =>
+ !template ? (
+ <li>
+ Can't load template (TODO: display error): {check}
+ </li>
+ ) : (
+ // TODO: when it's the user's own profile we might want to link to the template
+ <CheckCard
+ {template}
+ {...decodeKinkCheck(template, check.data)}
+ href={`/templates/${template.id}/checks/${check.user_id}`}
+ />
+ ),
+ )}
+ </ul>
+ )
+ }
+</Layout>
+
+<style>
+ :global(div#content) {
+ max-width: 1000px;
+ }
+ ul {
+ padding: 0;
+ }
+</style>

src/pages/templates/[id]/checks/[user]/index.astro

@@ -0,0 +1,85 @@
+---
+import {
+ getCheck,
+ getCheckRevision,
+ getProfileById,
+ getTemplateRevision,
+getUserIdByName,
+} from "../../../../../backendlib";
+import { decodeKinkCheck, defaultRatings, prettyDate } from "../../../../../base";
+import { Check } from "../../../../../components/KinkCheck";
+import RatingOverview from "../../../../../components/RatingOverview.astro";
+import Layout from "../../../../../layouts/Layout.astro";
+
+const { id, user } = Astro.params;
+
+if (!id || !user) {
+ return new Response(`no ${!id ? "template id" : "user"} given`, {
+ status: 400,
+ });
+}
+
+if (user.startsWith("@")) {
+ const [id, error] = await getUserIdByName(user.substring(1));
+ if (error) {
+ return Response(error.message, { code: 500 });
+ }
+ const url = Astro.url;
+ url.pathname = url.pathname.replace(user, id);
+ return Astro.redirect(url);
+}
+
+const [profile] = await getProfileById(user);
+
+const [check, err] = await getCheck({ user, template: id });
+
+if (err) {
+ return new Response(err.message, { status: 500 });
+}
+
+const rev = getCheckRevision(check, "latest");
+
+const [template, error] = await getTemplateRevision({
+ id,
+ version: rev?.version ?? "latest",
+});
+
+if (error) {
+ return new Response(error.message, { status: 500 });
+}
+
+// TODO: selecting revisions, ........
+// TODO: when self maybe display and edit button
+---
+
+<Layout
+ title={`${template.name} ${template.version} from ${
+ profile ? profile.full_name : user
+ }`}
+ headertitle={`${template.name} ${template.version}`}
+>
+ <span class="checkdesc" slot="header">
+ <span>from {profile ? profile.full_name : user}</span>
+ <span>{rev && prettyDate(new Date(rev.modified))}</span>
+ </span>
+ <RatingOverview slot="header" />
+ <main>
+ <Check
+ {...template}
+ ratings={rev
+ ? decodeKinkCheck(template, rev.data).ratings
+ : defaultRatings(template.kinks)}
+ />
+ </main>
+</Layout>
+
+<style>
+ :global(div#content) {
+ min-width: 475px;
+ max-width: 1800px;
+ }
+ .checkdesc {
+ display: flex;
+ flex-direction: column;
+ }
+</style>