feat: add short IDs + link shortener

frontend/src/routes/edit/member/[id]/+page.svelte

@@ -28,8 +28,10 @@
     CardHeader,
     Alert,
   } from "sveltestrap";
+  import { DateTime } from "luxon";
   import { encode } from "base64-arraybuffer";
   import prettyBytes from "pretty-bytes";
+  import { env } from "$env/dynamic/public";
   import { apiFetchClient, fastFetchClient } from "$lib/api/fetch";
   import IconButton from "$lib/components/IconButton.svelte";
   import EditableField from "../../EditableField.svelte";
@@ -373,6 +375,28 @@
   let deleteName = "";
   let deleteError: APIError | null = null;
 
+  const now = DateTime.now().toLocal();
+  let canRerollSid: boolean;
+  $: canRerollSid =
+    now.diff(DateTime.fromISO(data.user.last_sid_reroll).toLocal(), "hours").hours >= 1;
+
+  const rerollSid = async () => {
+    try {
+      const resp = await apiFetchClient<Member>(`/members/${data.member.id}/reroll`);
+      addToast({ header: "Success", body: "Rerolled short ID!" });
+      error = null;
+      data.member.sid = resp.sid;
+    } catch (e) {
+      error = e as APIError;
+    }
+  };
+
+  const copyShortURL = async () => {
+    const url = `${env.PUBLIC_SHORT_BASE}/${data.member.sid}`;
+    await navigator.clipboard.writeText(url);
+    addToast({ body: "Copied the short link to your clipboard!", duration: 2000 });
+  };
+
   interface SnapshotData {
     bio: string;
     name: string;
@@ -407,19 +431,19 @@
       newLink,
     }),
     restore: (value) => {
-      bio = value.bio
-      name = value.name
-      display_name = value.display_name
-      links = value.links
-      names = value.names
-      pronouns = value.pronouns
-      fields = value.fields
-      flags = value.flags
-      unlisted = value.unlisted
-      avatar = value.avatar
-      newName = value.newName
-      newPronouns = value.newPronouns
-      newLink = value.newLink
+      bio = value.bio;
+      name = value.name;
+      display_name = value.display_name;
+      links = value.links;
+      names = value.names;
+      pronouns = value.pronouns;
+      fields = value.fields;
+      flags = value.flags;
+      unlisted = value.unlisted;
+      avatar = value.avatar;
+      newName = value.newName;
+      newPronouns = value.newPronouns;
+      newLink = value.newLink;
     },
   };
 </script>
@@ -755,6 +779,30 @@
           </strong>
         </p>
       </div>
+      {#if env.PUBLIC_SHORT_BASE}
+        <div class="col-md">
+          <p>
+            Current short ID: <code>{data.member.sid}</code>
+            <ButtonGroup class="mb-1">
+              <Button color="secondary" disabled={!canRerollSid} on:click={() => rerollSid()}
+                >Reroll short ID</Button
+              >
+              <IconButton
+                icon="link-45deg"
+                tooltip="Copy short link"
+                color="secondary"
+                click={copyShortURL}
+              />
+            </ButtonGroup>
+            <br />
+            <span class="text-muted">
+              <Icon name="info-circle-fill" aria-hidden />
+              This ID is used in <code>prns.cc</code> links. You can reroll one short ID every hour (shared
+              between your main profile and all members) by pressing the button above.
+            </span>
+          </p>
+        </div>
+      {/if}
     </div>
   </TabPane>
 </TabContent>