refactor: restructure and improve quality

app/app.vue

@@ -20,14 +20,16 @@ useSeoMeta({
 </script>
 
 <template>
-  <div role="main" class="flex min-h-[100vh] items-center justify-center">
-    <NuxtRouteAnnouncer />
+  <UApp>
+    <div role="main" class="flex min-h-screen items-center justify-center">
+      <NuxtRouteAnnouncer />
 
-    <div
-      class="p-5 w-full max-w-[430px] sm:max-w-[850px] flex flex-col justify-center space-y-4"
-    >
-      <AppHeader />
-      <AppBody />
+      <div
+        class="p-5 w-full max-w-[430px] sm:max-w-[850px] flex flex-col justify-center space-y-4"
+      >
+        <AppHeader />
+        <AppBody />
+      </div>
     </div>
-  </div>
+  </UApp>
 </template>

app/components/ApiModal.vue

@@ -1,12 +1,10 @@
 <script setup lang="ts">
-const app = useAppStore();
-
 const baseApiUrl = useBaseApiUrl();
 const { copy: copyBaseApiUrl, icon: baseApiUrlIcon } = useCopyable(baseApiUrl);
 </script>
 
 <template>
-  <UModal v-model:open="app.apiModalOpened" title="API Documentation">
+  <UModal title="API Documentation">
     <template #body>
       <div class="flex flex-col space-y-8">
         <p>

app/components/AppBody.vue

@@ -0,0 +1,232 @@
+<script setup lang="ts">
+import { z } from "zod";
+import { LazyApiModal } from "#components";
+
+const qrCode = ref("/default.webp");
+const form = useTemplateRef("form");
+const baseApiUrl = useBaseApiUrl();
+
+const overlay = useOverlay();
+const apiModal = overlay.create(LazyApiModal);
+
+const isQRCodeEmpty = computed(() => qrCode.value === "/default.webp");
+
+const formSchema = z
+  .object({
+    hasLogo: z.boolean(),
+    logo: z.enum(LOGOS).optional(),
+    format: z.enum(IMAGE_FORMATS).default("png"),
+    content: z
+      .string()
+      .optional()
+      .transform((v) => v ?? ""),
+  })
+  .superRefine((data, ctx) => {
+    if (!data.content)
+      ctx.addIssue({ code: "custom", message: "Required", path: ["content"] });
+    if (data.hasLogo && !data.logo)
+      ctx.addIssue({ code: "custom", message: "Required", path: ["logo"] });
+  });
+
+const formState = reactive<z.input<typeof formSchema>>({
+  hasLogo: false,
+  logo: undefined,
+  format: IMAGE_FORMATS[0],
+  content: undefined,
+});
+
+const parsedFormState = computed(() => formSchema.safeParse(formState));
+
+watch(formState, async () => {
+  await nextTick();
+  form.value?.validate({ silent: true });
+  updateQRCode();
+});
+
+const apiUrl = computed<string>((previous) => {
+  if (!parsedFormState.value.success) return previous ?? "";
+
+  const { content, format, hasLogo, logo } = parsedFormState.value.data;
+  const params = new URLSearchParams({
+    ...(hasLogo && logo && { logo }),
+    format,
+    content,
+  });
+
+  return `${baseApiUrl}?${params}`;
+});
+
+const { icon: copyUrlIcon, copy: copyUrl } = useCopyable(apiUrl);
+
+const updateQRCode = async () => {
+  if (!parsedFormState.value.success) return;
+
+  const { content, hasLogo, logo, format } = parsedFormState.value.data;
+  const logoUrl = hasLogo && logo ? `/logos/${logo}.png` : undefined;
+  const canvas = await renderQRCodeToCanvas(content, logoUrl);
+
+  qrCode.value = canvas.toDataURL(format);
+};
+
+const downloadQRCode = () => {
+  const link = document.createElement("a");
+  link.href = qrCode.value;
+  link.download = `qrcode.${formState.format}`;
+
+  document.body.appendChild(link);
+  link.click();
+  document.body.removeChild(link);
+};
+
+const {
+  copy: copyQRCode,
+  icon: copyImageIcon,
+  label: copyImageLabel,
+} = useCopyable(async () => {
+  if (isQRCodeEmpty.value) return;
+  if (!parsedFormState.value.success) return;
+
+  const { content, hasLogo, logo } = parsedFormState.value.data;
+  const logoUrl = hasLogo && logo ? `/logos/${logo}.png` : undefined;
+  const canvas = await renderQRCodeToCanvas(content, logoUrl);
+
+  const qrCode = canvas.toDataURL("png");
+
+  const blob = await (await fetch(qrCode)).blob();
+  const item = new ClipboardItem({ "image/png": blob });
+  await navigator.clipboard.write([item]);
+});
+</script>
+
+<template>
+  <div class="flex flex-col sm:flex-row justify-between gap-4">
+    <img
+      :src="qrCode"
+      class="w-full max-w-[375px] max-h-[375px] sm:max-w-[315px] sm:max-h-[315px] md:max-w-[375px] md:max-h-[375px] m-auto aspect-square border border-gray-100 dark:border-gray-800"
+    />
+
+    <div class="flex-1 flex flex-col justify-center">
+      <UForm
+        ref="form"
+        :schema="formSchema"
+        :state="formState"
+        :validate-on="['blur']"
+        class="space-y-4"
+      >
+        <UFormField
+          label="Username or link"
+          name="content"
+          :ui="{ error: 'hidden' }"
+        >
+          <UInput
+            v-model="formState.content"
+            icon="i-heroicons-user"
+            placeholder="Your username or profile link"
+            class="w-full"
+          />
+        </UFormField>
+
+        <UFormField name="logo" :ui="{ error: 'hidden' }">
+          <template #label>
+            <UCheckbox
+              v-model="formState.hasLogo"
+              class="mb-1.5"
+              label="Logo"
+            />
+          </template>
+
+          <USelectMenu
+            v-model="formState.logo"
+            icon="i-heroicons-photo"
+            :items="unreadonly(LOGOS)"
+            :disabled="!formState.hasLogo"
+            placeholder="Select logo"
+            class="w-full"
+          >
+            <template #item-label="{ item }">
+              {{ capitalize(item) }}
+            </template>
+
+            <template v-if="formState.logo">{{
+              capitalize(formState.logo)
+            }}</template>
+          </USelectMenu>
+        </UFormField>
+
+        <UFormField label="Format" name="format">
+          <USelectMenu
+            v-model="formState.format"
+            icon="i-heroicons-document-duplicate"
+            :items="unreadonly(IMAGE_FORMATS)"
+            placeholder="Select format"
+            class="w-full"
+          >
+            <template #item-label="{ item }">
+              {{ upperCase(item) }}
+            </template>
+
+            <span v-if="formState.format">{{
+              upperCase(formState.format)
+            }}</span>
+          </USelectMenu>
+        </UFormField>
+
+        <UFormField label="API">
+          <template #hint>
+            <UButton
+              size="md"
+              color="neutral"
+              variant="link"
+              icon="i-heroicons-question-mark-circle"
+              @click="apiModal.open()"
+            />
+          </template>
+
+          <UButtonGroup size="sm" class="w-full">
+            <UInput
+              v-model="apiUrl"
+              disabled
+              placeholder="Please fill all fields first"
+              class="w-full"
+            />
+            <UButton
+              color="neutral"
+              variant="subtle"
+              :disabled="!apiUrl"
+              :icon="copyUrlIcon"
+              @click="copyUrl"
+            />
+          </UButtonGroup>
+        </UFormField>
+
+        <div class="flex space-x-4 pt-2">
+          <UButton
+            class="flex-1"
+            block
+            :icon="copyImageIcon"
+            size="md"
+            color="primary"
+            variant="solid"
+            :label="copyImageLabel"
+            :trailing="false"
+            :disabled="isQRCodeEmpty"
+            @click="copyQRCode"
+          />
+
+          <UButton
+            class="flex-1"
+            block
+            icon="i-heroicons-arrow-down-tray"
+            size="md"
+            color="primary"
+            variant="solid"
+            label="Download"
+            :trailing="false"
+            :disabled="isQRCodeEmpty"
+            @click="downloadQRCode"
+          />
+        </div>
+      </UForm>
+    </div>
+  </div>
+</template>

app/components/AppHeader.vue

@@ -1,3 +1,16 @@
+<script setup lang="ts">
+const colorMode = useColorMode();
+
+const isDark = computed({
+  get() {
+    return colorMode.value === "dark";
+  },
+  set() {
+    colorMode.preference = colorMode.value === "dark" ? "light" : "dark";
+  },
+});
+</script>
+
 <template>
   <div
     class="pb-1.5 border-b border-gray-100 dark:border-gray-800 flex justify-between items-center"
@@ -16,7 +29,16 @@
           to="https://github.com/pihkaal/simple-qr"
         />
 
-        <ThemeSwitcher />
+        <UButton
+          :icon="
+            isDark ? 'i-heroicons-moon-20-solid' : 'i-heroicons-sun-20-solid'
+          "
+          color="neutral"
+          variant="ghost"
+          aria-label="Theme"
+          class="w-8 h-8"
+          @click="isDark = !isDark"
+        />
       </div>
     </ClientOnly>
   </div>

app/components/body/AppBody.vue

@@ -1,9 +0,0 @@
-<template>
-  <div class="flex flex-col sm:flex-row justify-between gap-4">
-    <QRCodePreview />
-
-    <QRCodeForm />
-  </div>
-
-  <ApiModal />
-</template>

app/components/body/QRCodeForm.vue

@@ -1,229 +0,0 @@
-<script setup lang="ts">
-import { z } from "zod";
-
-const app = useAppStore();
-const baseApiUrl = useBaseApiUrl();
-
-const formSchema = z
-  .object({
-    content: z.string().min(1, "Required"),
-    hasLogo: z.boolean(),
-    logo: z.string().optional(),
-    format: z.enum(IMAGE_FORMATS),
-  })
-  .superRefine((data, ctx) => {
-    if (data.hasLogo && !data.logo) {
-      ctx.addIssue({
-        code: "custom",
-        message: "Required",
-        path: ["logo"],
-      });
-    }
-  });
-
-const isQRCodeEmpty = computed(() => app.qrCode === "/default.webp");
-
-const state = reactive<{
-  hasLogo: boolean;
-  logo: string | undefined;
-  format: ImageFormat;
-  content: string | undefined;
-}>({
-  hasLogo: false,
-  logo: undefined,
-  format: IMAGE_FORMATS[0],
-  content: undefined,
-});
-
-const parsedState = computed(() => formSchema.safeParse(state));
-
-const apiUrl = computed<string>((previous) => {
-  if (!parsedState.value.success) return previous ?? "";
-
-  const { content, format, hasLogo, logo } = parsedState.value.data;
-  const params = new URLSearchParams({
-    ...(hasLogo && logo && { logo }),
-    format,
-    content,
-  });
-
-  return `${baseApiUrl}?${params}`;
-});
-const isValidApiUrl = computed(() => !!apiUrl.value);
-
-const { icon: copyUrlIcon, copy: copyUrl } = useCopyable(apiUrl);
-
-const openApiModal = () => {
-  app.apiModalOpened = true;
-};
-
-const updateQRCode = async () => {
-  await nextTick();
-
-  if (!parsedState.value.success) return;
-
-  const { content, hasLogo, logo, format } = parsedState.value.data;
-  const logoUrl = hasLogo && logo ? `/logos/${logo}.png` : undefined;
-  const canvas = await renderQRCodeToCanvas(content, logoUrl);
-
-  app.qrCode = canvas.toDataURL(format);
-};
-
-const downloadQRCode = () => {
-  const link = document.createElement("a");
-  link.href = app.qrCode;
-  link.download = `qrcode.${state.format}`;
-
-  document.body.appendChild(link);
-  link.click();
-  document.body.removeChild(link);
-};
-
-const {
-  copy: copyQRCode,
-  icon: copyImageIcon,
-  label: copyImageLabel,
-} = useCopyable(async () => {
-  if (isQRCodeEmpty.value) return;
-
-  if (!parsedState.value.success) return;
-  const { content, hasLogo, logo } = parsedState.value.data;
-
-  const logoUrl = hasLogo && logo ? `/logos/${logo}.png` : undefined;
-  const canvas = await renderQRCodeToCanvas(content, logoUrl);
-
-  const qrCode = canvas.toDataURL("png");
-
-  const blob = await (await fetch(qrCode)).blob();
-  const item = new ClipboardItem({ "image/png": blob });
-  await navigator.clipboard.write([item]);
-});
-</script>
-
-<template>
-  <div class="flex-1 flex flex-col justify-center">
-    <UForm
-      :schema="formSchema"
-      :state="state"
-      :validate-on="['blur', 'change', 'input']"
-      class="space-y-4"
-    >
-      <UFormField
-        label="Username or link"
-        name="content"
-        :ui="{ error: 'hidden' }"
-      >
-        <UInput
-          v-model="state.content"
-          name="content"
-          icon="i-heroicons-user"
-          placeholder="Your username or profile link"
-          class="w-full"
-          @input="updateQRCode"
-        />
-      </UFormField>
-
-      <UFormField name="logo" :ui="{ error: 'hidden' }">
-        <template #label>
-          <UCheckbox
-            v-model="state.hasLogo"
-            class="mb-1.5"
-            label="Logo"
-            @change="updateQRCode"
-          />
-        </template>
-
-        <USelectMenu
-          v-model="state.logo"
-          name="logo"
-          icon="i-heroicons-photo"
-          :items="unreadonly(LOGOS)"
-          :disabled="!state.hasLogo"
-          placeholder="Select logo"
-          class="w-full"
-          @change="updateQRCode"
-        >
-          <template #item-label="{ item }">
-            {{ capitalize(item) }}
-          </template>
-
-          <template v-if="state.logo">{{ capitalize(state.logo) }}</template>
-        </USelectMenu>
-      </UFormField>
-
-      <UFormField label="Format" name="format">
-        <USelectMenu
-          v-model="state.format"
-          name="format"
-          icon="i-heroicons-document-duplicate"
-          :items="unreadonly(IMAGE_FORMATS)"
-          placeholder="Select format"
-          class="w-full"
-          @change="updateQRCode"
-        >
-          <template #item-label="{ item }">
-            {{ upperCase(item) }}
-          </template>
-
-          {{ upperCase(state.format) }}
-        </USelectMenu>
-      </UFormField>
-
-      <UFormField label="API">
-        <template #hint>
-          <UButton
-            size="md"
-            color="neutral"
-            variant="link"
-            icon="i-heroicons-question-mark-circle"
-            @click="openApiModal"
-          />
-        </template>
-
-        <UButtonGroup size="sm" class="w-full">
-          <UInput
-            v-model="apiUrl"
-            disabled
-            placeholder="Please fill all fields first"
-            class="w-full"
-          />
-          <UButton
-            color="neutral"
-            variant="subtle"
-            :disabled="!isValidApiUrl"
-            :icon="copyUrlIcon"
-            @click="copyUrl"
-          />
-        </UButtonGroup>
-      </UFormField>
-
-      <div class="flex space-x-4 pt-2">
-        <UButton
-          class="flex-1"
-          block
-          :icon="copyImageIcon"
-          size="md"
-          color="primary"
-          variant="solid"
-          :label="copyImageLabel"
-          :trailing="false"
-          :disabled="isQRCodeEmpty"
-          @click="copyQRCode"
-        />
-
-        <UButton
-          class="flex-1"
-          block
-          icon="i-heroicons-arrow-down-tray"
-          size="md"
-          color="primary"
-          variant="solid"
-          label="Download"
-          :trailing="false"
-          :disabled="isQRCodeEmpty"
-          @click="downloadQRCode"
-        />
-      </div>
-    </UForm>
-  </div>
-</template>

app/components/body/QRCodePreview.vue

@@ -1,10 +0,0 @@
-<script setup lang="ts">
-const app = useAppStore();
-</script>
-
-<template>
-  <img
-    :src="app.qrCode"
-    class="w-full max-w-[375px] max-h-[375px] sm:max-w-[315px] sm:max-h-[315px] md:max-w-[375px] md:max-h-[375px] m-auto aspect-square border border-gray-100 dark:border-gray-800"
-  >
-</template>

app/components/header/ThemeSwitcher.vue

@@ -1,23 +0,0 @@
-<script setup lang="ts">
-const colorMode = useColorMode();
-
-const isDark = computed({
-  get() {
-    return colorMode.value === "dark";
-  },
-  set() {
-    colorMode.preference = colorMode.value === "dark" ? "light" : "dark";
-  },
-});
-</script>
-
-<template>
-  <UButton
-    :icon="isDark ? 'i-heroicons-moon-20-solid' : 'i-heroicons-sun-20-solid'"
-    color="neutral"
-    variant="ghost"
-    aria-label="Theme"
-    class="w-8 h-8"
-    @click="isDark = !isDark"
-  />
-</template>

app/stores/app.ts

@@ -1,6 +0,0 @@
-export const useAppStore = defineStore("appStore", {
-  state: () => ({
-    qrCode: "/default.webp",
-    apiModalOpened: false,
-  }),
-});