Details summary

fresh.gen.ts

@@ -21,11 +21,12 @@ import * as $14 from "./routes/note.tsx";
 import * as $15 from "./routes/note/[id].tsx";
 import * as $16 from "./routes/note/create.tsx";
 import * as $17 from "./routes/plain.ts";
-import * as $18 from "./routes/register.tsx";
-import * as $19 from "./routes/route-config-example.tsx";
-import * as $20 from "./routes/search.tsx";
-import * as $21 from "./routes/team/[id].tsx";
-import * as $22 from "./routes/user/[id].tsx";
+import * as $18 from "./routes/profile.tsx";
+import * as $19 from "./routes/register.tsx";
+import * as $20 from "./routes/route-config-example.tsx";
+import * as $21 from "./routes/search.tsx";
+import * as $22 from "./routes/team/[id].tsx";
+import * as $23 from "./routes/user/[id].tsx";
 import * as $$0 from "./islands/Countdown.tsx";
 import * as $$1 from "./islands/Counter.tsx";
 
@@ -49,11 +50,12 @@ const manifest = {
     "./routes/note/[id].tsx": $15,
     "./routes/note/create.tsx": $16,
     "./routes/plain.ts": $17,
-    "./routes/register.tsx": $18,
-    "./routes/route-config-example.tsx": $19,
-    "./routes/search.tsx": $20,
-    "./routes/team/[id].tsx": $21,
-    "./routes/user/[id].tsx": $22,
+    "./routes/profile.tsx": $18,
+    "./routes/register.tsx": $19,
+    "./routes/route-config-example.tsx": $20,
+    "./routes/search.tsx": $21,
+    "./routes/team/[id].tsx": $22,
+    "./routes/user/[id].tsx": $23,
   },
   islands: {
     "./islands/Countdown.tsx": $$0,

routes/profile.tsx

@@ -0,0 +1,32 @@
+import { Handlers, type PageProps } from "$fresh/server.ts";
+import { type ContextState, type PublicUser } from "@/types.ts";
+
+export const handler: Handlers<unknown, ContextState> = {
+  async GET(_request: Request, context) {
+    if (!context.state.user) {
+      return await context.renderNotFound();
+    } else {
+      return await context.render(context.state.user);
+    }
+  },
+};
+
+export default function Home(
+  { data: { id, username, displayName } }: PageProps<PublicUser>,
+) {
+  return (
+    <ul>
+      <li>
+        <strong>ID</strong>: {id}
+      </li>
+      <li>
+        <strong>Username</strong>: {username}
+      </li>
+      {displayName && (
+        <li>
+          <strong>Username</strong>: {displayName}
+        </li>
+      )}
+    </ul>
+  );
+}

routes/team/[id].tsx

@@ -86,18 +86,22 @@ function TeamIndex(
 }
 
 function Manage({ teamId }: { teamId: string }) {
+  // TODO: invite by email WITHOUT turning into a spambot?
   return (
-    <>
-      <h1 class="mt-4">Manage</h1>
-      <section>
-        <h2>Invite User</h2>
+    <details class="mt-4 max-w-lg">
+      <summary>Manage</summary>
+      <details class="mt-2">
+        <summary>Invite User to Team</summary>
         <form
+          class="flex flex-col max-w-lg mt-2"
           autocomplete="off"
           method="post"
           action={`/team/${teamId}/invite`}
         >
+          <label for="inviteUsername">Username</label>
           <input
-            autocomplete="off"
+            class="mb-4"
+            autocomplete="new-password"
             type="text"
             placeholder="Username"
             name="inviteUsername"
@@ -105,7 +109,7 @@ function Manage({ teamId }: { teamId: string }) {
           />
           <input type="submit" value="Invite" />
         </form>
-      </section>
-    </>
+      </details>
+    </details>
   );
 }

twind.config.ts

@@ -34,5 +34,9 @@ export default {
       "body ul": apply`list-disc ml-4`,
       "body a":
         apply`rounded ${focusRing} text-blue(600 700(hover:&) dark:(400 300(hover:&))`,
+      "body details": apply``,
+      "body details[open]": apply``,
+      "body details details": apply`pl-2`,
+      "body details > summary": apply`${button} ${focusRing} rounded`,
     }),
 } as Options;