From 7e2989e3839e66dc23d088be9fa31ed08d142b3b Mon Sep 17 00:00:00 2001
From: Alexis <35.alexis.pele@gmail.com>
Date: Sun, 2 Mar 2025 20:02:51 +0100
Subject: [PATCH] Polished world modal behaviour

---
 components/global/input/Color.vue      | 100 ++++++++++++++++++++++++-
 components/ui/select/SelectContent.vue |   3 +-
 components/world/dialog/Create.vue     |   1 +
 components/world/dialog/Edit.vue       |   1 +
 components/world/form/Create.vue       |   2 +-
 models/World.ts                        |   2 +-
 6 files changed, 102 insertions(+), 7 deletions(-)

diff --git a/components/global/input/Color.vue b/components/global/input/Color.vue
index 7f597e4..75448ec 100644
--- a/components/global/input/Color.vue
+++ b/components/global/input/Color.vue
@@ -1,20 +1,112 @@
 <script lang="ts" setup>
+import { cn } from "@/lib/utils";
 import { type RPGColor, rpgColors } from "~/models/Color";
 
-const model = defineModel<RPGColor>()
+const model = defineModel<RPGColor>({ default: "white" });
 </script>
 
 <template>
   <UiSelect v-model="model">
     <UiSelectTrigger>
-      <UiSelectValue :placeholder="$t('ui.colors.selectOne')" />
+      <UiSelectValue
+        :placeholder="$t('ui.colors.selectOne')"
+        class="input-color"
+        :class="
+          cn(
+            `input-color-${model}`,
+          )
+        "
+      />
     </UiSelectTrigger>
-    <UiSelectContent>
+    <UiSelectContent position="popper">
       <UiSelectGroup>
-        <UiSelectItem v-for="color in rpgColors" :key="color" :value="color">
+        <UiSelectItem
+          v-for="color in rpgColors"
+          :key="color"
+          :value="color"
+          class="input-color"
+          :class="
+            cn(
+              `input-color-${color}`,
+            )
+          "
+        >
           {{ $t(`ui.colors.${color}`) }}
         </UiSelectItem>
       </UiSelectGroup>
     </UiSelectContent>
   </UiSelect>
 </template>
+
+<style lang="scss" scoped>
+.input-color {
+  &::before {
+    content: "";
+    display: inline-block;
+    width: .75rem;
+    aspect-ratio: 1;
+    margin-right: 0.5em;
+    border-radius: .25rem;
+    background-color: red;
+    border: 1px solid transparent;
+  }
+
+  &.input-color-red::before {
+    @apply bg-red-500;
+  }
+  &.input-color-orange::before {
+    @apply bg-orange-500;
+  }
+  &.input-color-amber::before {
+    @apply bg-amber-500;
+  }
+  &.input-color-yellow::before {
+    @apply bg-yellow-500;
+  }
+  &.input-color-lime::before {
+    @apply bg-lime-500;
+  }
+  &.input-color-green::before {
+    @apply bg-green-500;
+  }
+  &.input-color-emerald::before {
+    @apply bg-emerald-600;
+  }
+  &.input-color-teal::before {
+    @apply bg-teal-600;
+  }
+  &.input-color-cyan::before {
+    @apply bg-cyan-600;
+  }
+  &.input-color-sky::before {
+    @apply bg-sky-600;
+  }
+  &.input-color-blue::before {
+    @apply bg-blue-600;
+  }
+  &.input-color-indigo::before {
+    @apply bg-indigo-600;
+  }
+  &.input-color-violet::before {
+    @apply bg-violet-600;
+  }
+  &.input-color-purple::before {
+    @apply bg-purple-600;
+  }
+  &.input-color-fuchsia::before {
+    @apply bg-fuchsia-600;
+  }
+  &.input-color-pink::before {
+    @apply bg-pink-600;
+  }
+  &.input-color-rose::before {
+    @apply bg-rose-600;
+  }
+  &.input-color-black::before {
+    @apply bg-black dark:border-[1px] dark:border-slate-300;
+  }
+  &.input-color-white::before {
+    @apply bg-white border-[1px] border-slate-700;
+  }
+}
+</style>
diff --git a/components/ui/select/SelectContent.vue b/components/ui/select/SelectContent.vue
index 2b0473f..3fb413c 100644
--- a/components/ui/select/SelectContent.vue
+++ b/components/ui/select/SelectContent.vue
@@ -36,9 +36,10 @@ const forwarded = useForwardPropsEmits(delegatedProps, emits)
   <SelectPortal>
     <SelectContent
       v-bind="{ ...forwarded, ...$attrs }"
+      style="max-height: var(--radix-select-content-available-height)"
       :class="
         cn(
-          'relative z-50 max-h-96 min-w-32 overflow-hidden rounded-md border bg-popover text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2',
+          'select-content relative z-50 max-h-96 min-w-32 overflow-hidden rounded-md border bg-popover text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2',
           position === 'popper' &&
             'data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1',
           props.class
diff --git a/components/world/dialog/Create.vue b/components/world/dialog/Create.vue
index 1abe2cc..6b6fa1e 100644
--- a/components/world/dialog/Create.vue
+++ b/components/world/dialog/Create.vue
@@ -15,6 +15,7 @@ const emit = defineEmits(["on-close"])
 
 function handleClose() {
   emit("on-close")
+  worldSkeletonName.value = ""
 }
 </script>
 
diff --git a/components/world/dialog/Edit.vue b/components/world/dialog/Edit.vue
index 661aec6..da07aa6 100644
--- a/components/world/dialog/Edit.vue
+++ b/components/world/dialog/Edit.vue
@@ -20,6 +20,7 @@ const emit = defineEmits(["on-close"])
 
 function handleClose() {
   emit("on-close")
+  worldSkeletonName.value = props.world?.name ?? ""
 }
 </script>
 
diff --git a/components/world/form/Create.vue b/components/world/form/Create.vue
index 94bbc72..d5b65fe 100644
--- a/components/world/form/Create.vue
+++ b/components/world/form/Create.vue
@@ -4,7 +4,7 @@ import type { World } from "~/models/World";
 
 const user = useSupabaseUser()
 
-const defaultWorld: World = { name: "", description: "", gmId: user.value?.id }
+const defaultWorld: World = { name: "", description: "", gmId: user.value?.id, color: "white", state: "draft" }
 const worldSkeleton = ref<World>({ ...defaultWorld })
 
 onMounted(() => {
diff --git a/models/World.ts b/models/World.ts
index 8a98fa3..d57b624 100644
--- a/models/World.ts
+++ b/models/World.ts
@@ -17,7 +17,7 @@ export interface World {
 export const postWorldSchema = z.object({
   name: z.string(),
   description: z.string().optional().nullable(),
-  color: rpgColorSchema,
+  color: rpgColorSchema.default("white"),
   gmId: z.string().optional().nullable(),
   state: z.string().optional().nullable().default("draft"),
 })