Amend app layout

components/rewrite-card.vue

@@ -0,0 +1,122 @@
+<script setup lang="ts">
+import type { FormSubmitEvent } from "@nuxt/ui";
+
+const { user } = useUserSession();
+const toast = useToast();
+
+const form = useTemplateRef("form");
+const submitting = ref(false);
+
+const formData = {
+  activityUrl: "",
+};
+
+const validate = ({
+  activityUrl,
+}: Partial<{
+  activityUrl: string;
+}>) => {
+  if (
+    [
+      "https://strava.com/activities/",
+      "https://www.strava.com/activities/",
+    ].some((u) => activityUrl!.includes(u))
+  ) {
+    return [];
+  }
+
+  return [
+    {
+      name: "activityUrl",
+      message: "Please write a legit Strava activity URL.",
+    },
+  ];
+};
+
+const submit = async (event: FormSubmitEvent<typeof formData>) => {
+  await $fetch("/api/rewrite", {
+    method: "POST",
+    query: {
+      activity: event.data.activityUrl,
+    },
+  })
+    .then(() =>
+      toast.add({
+        title: "Success",
+        description: "Activity has been rewritten.",
+        color: "success",
+      }),
+    )
+    .catch(() =>
+      toast.add({
+        title: "Error",
+        description: "Something wrong has happened. Maybe try again later.",
+        color: "error",
+      }),
+    )
+    .finally(() => {
+      formData.activityUrl = "";
+    });
+};
+</script>
+
+<template>
+  <UForm
+    :disabled="!user.premium"
+    ref="form"
+    @submit="submit"
+    :validate="validate"
+    :state="formData"
+    class="flex flex-col gap-8"
+  >
+    <template v-slot:default="errors">
+      <UContainer class="max-w-2xl py-8 flex flex-col gap-4">
+        <div class="flex justify-between items-center">
+          <div class="font-bold text-lg">🔄 Re-write activity</div>
+          <UTooltip
+            arrow
+            :disabled="user.premium"
+            text="This feature is enabled for premium users. You can upgrade to
+        premium by supporting Ghostwriter."
+          >
+            <UBadge variant="soft">Premium only</UBadge>
+          </UTooltip>
+        </div>
+        <UCard>
+          <div class="grid gap-4">
+            <CardField vertical>
+              <template #title> Activity URL </template>
+              <template #description>
+                Paste your Strava activity URL to rewrite it.
+              </template>
+              <template #value>
+                <div class="grid gap-2">
+                  <UInput
+                    :disabled="submitting"
+                    v-model="formData.activityUrl"
+                    class="w-full"
+                    placeholder="https://www.strava.com/activities/12345678901"
+                  />
+                  <div class="text-error-500 text-sm">
+                    {{ errors?.errors[0]?.message }}
+                  </div>
+                </div>
+              </template>
+            </CardField>
+          </div>
+
+          <template #footer>
+            <UButton
+              :disabled="!user.premium"
+              loading-auto
+              label="Rewrite"
+              color="neutral"
+              variant="soft"
+              @click="form!.submit()"
+            />
+          </template>
+        </UCard>
+      </UContainer>
+    </template>
+  </UForm>
+</template>