(WIP) Refactor, revamp, and cleanup

.gitignore

@@ -10,3 +10,4 @@ node_modules
 /playwright-report/
 /blob-report/
 /playwright/.cache/
+.generated

.prettierrc

@@ -2,6 +2,6 @@
   "semi": false,
   "arrowParens": "always",
   "singleQuote": true,
-  "printWidth": 120,
+  "printWidth": 140,
   "htmlWhitespaceSensitivity": "ignore"
 }

.vscode/settings.json

@@ -1,9 +1,10 @@
 {
   "files.exclude": {
-    // "**/.nuxt": true,
+    "**/.nuxt": true,
     "**/.output": true,
     "**/node_modules": true,
-    "**/dist": true
+    "**/dist": true,
+    "**/.generated": true
   },
   "editor.quickSuggestions": {
     "strings": true

app/app.vue

@@ -0,0 +1,36 @@
+<script lang="ts" setup>
+import type { FetchFn } from '@zenstackhq/tanstack-query/runtime'
+import { ModalsContainer } from 'vue-final-modal'
+
+const {
+  public: { site },
+} = useRuntimeConfig()
+
+provideHooksContext({
+  endpoint: `${site.url}/api/model`,
+  logging: true,
+})
+
+useHead({
+  titleTemplate: (title) => title || 'Team Generator',
+})
+</script>
+
+<template>
+  <div>
+    <!-- <UNotifications /> -->
+    <NuxtLayout>
+      <NuxtPage />
+    </NuxtLayout>
+    <ModalsContainer />
+  </div>
+</template>
+
+<style>
+@import 'tailwindcss';
+@import '@nuxt/ui';
+
+@theme {
+  --font-family-sans: 'Inter var', sans-serif;
+}
+</style>

app/components/dialog/confirm.vue

@@ -0,0 +1,109 @@
+<script lang="ts" setup>
+import { VueFinalModal } from 'vue-final-modal'
+
+const {
+  size = 'sm',
+  clickToClose = false,
+  description = undefined,
+  confirmLabel = 'Yes',
+  dismissLabel = 'No',
+  onConfirm = () => {},
+  onDismiss = () => {},
+  onClose = () => {},
+  transition = 'fade',
+} = defineProps<{
+  transition?: 'fade' | 'down'
+  size?: 'sm' | 'md'
+  title: string
+  description?: string
+  confirmLabel?: string
+  dismissLabel?: string
+  onConfirm?: (() => void) | (() => Promise<void>)
+  onDismiss?: () => void
+  onClose: () => void
+  clickToClose?: boolean
+}>()
+
+const sizeClass = computed(() => {
+  switch (size) {
+    case 'sm':
+      return 'sm:max-w-xl'
+    case 'md':
+      return 'sm:max-w-3xl'
+
+    default:
+      return 'max-w-3xl'
+  }
+})
+
+const contentTransition = computed(() => {
+  switch (transition) {
+    case 'fade':
+      return 'vfm-fade'
+    case 'down':
+      return 'vfm-slide-down'
+    default:
+      return 'vfm-fade'
+  }
+})
+const isConfirming = ref(false)
+
+const dismiss = () => {
+  onDismiss()
+  onClose()
+}
+
+const confirm = async () => {
+  const isAsync = onConfirm.constructor.name === 'AsyncFunction'
+
+  if (isAsync) {
+    isConfirming.value = true
+    await onConfirm()
+    isConfirming.value = false
+  } else {
+    onConfirm()
+  }
+
+  onClose()
+}
+</script>
+
+<template>
+  <VueFinalModal
+    class="flex items-center justify-center absolute bottom-0"
+    :click-to-close="clickToClose"
+    overlay-transition="vfm-fade"
+    content-transition="vfm-slide-down"
+    overlay-class="!bg-black/20 backdrop-blur-sm"
+    :content-class="['w-full absolute bottom-0', sizeClass]"
+  >
+    <UCard>
+      <div class="flex flex-col gap-y-2">
+        <span class="text-lg font-semibold">{{ title }}</span>
+        <!-- eslint-disable-next-line vue/no-v-html -->
+        <p class="text-sm text-gray-500" v-html="description"></p>
+      </div>
+      <template #footer>
+        <div class="flex justify-end gap-3">
+          <UButton
+            v-if="dismissLabel"
+            size="xl"
+            :ui="{ base: 'justify-around' }"
+            variant="soft"
+            color="neutral"
+            :label="dismissLabel"
+            @click="dismiss"
+          />
+          <UButton
+            size="xl"
+            color="error"
+            :loading="isConfirming"
+            :label="confirmLabel"
+            :ui="{ base: 'justify-around' }"
+            @click="confirm"
+          />
+        </div>
+      </template>
+    </UCard>
+  </VueFinalModal>
+</template>

app/components/dialog/create-league.vue

@@ -0,0 +1,40 @@
+<script lang="ts" setup>
+import { LeagueDTOSchema } from '~~/schemas/forms/create-league.form'
+
+const { accountId } = defineProps<{ accountId: number }>()
+const emits = defineEmits<{ close: [] }>()
+
+const { mutateAsync: asyncCreateLeague, isPending: isCreatingLeague } = useCreateLeague()
+
+const { defineField, handleSubmit } = useForm({
+  validationSchema: toTypedSchema(LeagueDTOSchema),
+  initialValues: {
+    accountId,
+    configuration: {
+      rules: {},
+      teamCount: 2,
+    },
+  },
+})
+
+const [name] = defineField('name')
+
+const onCreateLeague = handleSubmit(async (league) => {
+  await asyncCreateLeague({
+    data: league,
+  })
+
+  emits('close')
+})
+</script>
+
+<template>
+  <OverlayModal title="Create a League" size="xs">
+    <UFormField required size="xl">
+      <UInput v-model="name" placeholder="League name" :ui="{ root: 'w-full' }" />
+    </UFormField>
+    <template #footer-right>
+      <UButton color="primary" @click="onCreateLeague()" :loading="isCreatingLeague">Create</UButton>
+    </template>
+  </OverlayModal>
+</template>

components/empty-state-button.vue → app/components/empty-state-button.vue

@@ -18,6 +18,6 @@ const emit = defineEmits<{
   >
     <UIcon :name="icon" class="text-6xl text-gray-400" v-if="!loading" />
     <UIcon name="i-ph-spinner-bold" class="text-6xl text-gray-400 animate-spin" v-else />
-    <span class="block mt-4 text-sm font-medium text-gray-900">{{ label }}</span>
+    <span class="block mt-4 text-sm font-medium text-gray-900 dark:text-gray-400">{{ label }}</span>
   </button>
 </template>