feat(event): implement preview with drafts

package.json

@@ -1,5 +1,6 @@
 {
   "devDependencies": {
+    "@internationalized/date": "^3.6.0",
     "@semantic-release/changelog": "6.0.3",
     "@semantic-release/commit-analyzer": "13.0.1",
     "@semantic-release/git": "10.0.1",
@@ -50,5 +51,8 @@
     "test:e2e:docker:server:static": "pnpm --dir tests run test:e2e:docker:server:static",
     "test:e2e:docker:server:static:update": "pnpm --dir tests run test:e2e:docker:server:static:update"
   },
-  "type": "module"
+  "type": "module",
+  "dependencies": {
+    "@opentelemetry/resources": "^1.30.1"
+  }
 }

src/app/assets/css/app.css

@@ -119,6 +119,8 @@
 
     /* figma */
     --accent-line: #dcf9ea;
+    --accent-fancy: #4743b1;
+    --accent-mid: #cecceb;
     --accent-strong: #36db83;
     --accent-weak: #dcf9ea;
     --critic-string: #e00000;
@@ -127,6 +129,7 @@
     --semantic-accent-accent-icon: #12683a;
     --semantic-accent-accent-text: #12683a;
     --semantic-base-background: #fff;
+    --semantic-base-surface-background: #edecf8;
     --semantic-base-input-field-fill: #fff;
     --semantic-base-light-text-on-dark: #fafafc;
     --semantic-base-line: #f2f2f2;
@@ -164,7 +167,7 @@
     /* figma */
     --accent-weak: #c1dcc6;
     --faint-line: #2d2d2c;
-    --faint-weak: #2d2d2c;
+    --faint-weak: #f2f2f2;
     --semantic-accent-accent-icon: #0a841e;
     --semantic-accent-accent-text: #129f2a;
     --semantic-base-background: #191911;

src/app/components/button/ButtonColored.vue

@@ -2,17 +2,7 @@
   <Button
     :aria-label="ariaLabel"
     class="justify-center rounded-md px-4 py-2 font-medium"
-    :class="
-      [
-        ...(isPrimary
-          ? [
-              'text-text-bright dark:text-text-dark bg-gradient-to-tr from-blue-500 to-blue-600 dark:from-blue-300 dark:to-blue-400',
-            ]
-          : [
-              'text-text-dark dark:text-text-bright border border-gray-300 hover:bg-black/5 dark:border-gray-600 dark:hover:bg-black/30',
-            ]),
-      ].join(' ')
-    "
+    :class="variantClasses"
     :disabled="disabled"
     :to="props.to"
     :type="type"
@@ -35,19 +25,35 @@ export interface Props {
   ariaLabel: string
   disabled?: boolean
   isExternal?: boolean
-  isPrimary?: boolean
+  variant?: 'primary' | 'secondary'
   to?: RouteLocationRaw
   type?: 'button' | 'reset' | 'submit'
 }
+
 const props = withDefaults(defineProps<Props>(), {
   disabled: false,
   isExternal: undefined,
-  isPrimary: true,
+  variant: 'primary',
   to: undefined,
   type: 'button',
 })
 
 const emit = defineEmits<{
   click: []
 }>()
+
+const variantClasses = computed(() => {
+  if (props.disabled) {
+    return 'bg-(--accent-weak) font-bold text-(--semantic-base-secondary-button-text) opacity-70 cursor-not-allowed'
+  }
+
+  switch (props.variant) {
+    case 'primary':
+      return 'bg-(--accent-strong) font-bold text-(--semantic-base-primary-button-text) hover:bg-(--accent-strong-hover)'
+    case 'secondary':
+      return 'bg-(--accent-weak) font-bold text-(--semantic-base-secondary-button-text) hover:bg-(--accent-weak-hover) dark:bg-(--accent-strong) font-bold text-(--semantic-base-primary-button-text)'
+    default:
+      return 'bg-(--accent-strong) text-(--semantic-base-primary-button-text) hover:bg-(--accent-strong-hover)'
+  }
+})
 </script>

src/app/components/event/EventTimePicker.vue

@@ -0,0 +1,93 @@
+<template>
+  <div class="flex w-full">
+    <div class="grid w-full grid-cols-2 gap-0">
+      <Popover>
+        <PopoverTrigger class="w-full">
+          <div
+            class="flex h-14 w-full items-center rounded-l-xl border border-gray-200 bg-white px-4 py-2 dark:border-[--semantic-base-line] dark:bg-[--semantic-base-background]"
+          >
+            <div class="min-w-0 flex-1">
+              <span
+                class="block truncate text-sm text-gray-600 dark:text-[--semantic-base-text-primary]"
+                >{{
+                  modelValue
+                    ? df.format(
+                        modelValue instanceof Date
+                          ? modelValue
+                          : new Date(String(modelValue)),
+                      )
+                    : placeholder
+                }}</span
+              >
+            </div>
+            <CalendarIcon
+              class="ml-2 h-6 w-6 flex-shrink-0 text-gray-300 dark:text-[--semantic-base-text-secondary]"
+            />
+          </div>
+        </PopoverTrigger>
+        <PopoverContent
+          class="w-auto border border-gray-200 p-0 dark:border-[--semantic-base-line] dark:bg-[--semantic-base-background]"
+          hide-close
+        >
+          <Calendar
+            class="bg-white dark:bg-[--semantic-base-background] [&_.rdp]:p-3 [&_.rdp-button]:dark:text-[--semantic-base-text-primary] [&_.rdp-button:hover]:dark:bg-[--semantic-base-surface-1] [&_.rdp-caption]:dark:text-[--semantic-base-text-primary] [&_.rdp-day_selected]:dark:bg-[--accent-fancy] [&_.rdp-head_cell]:dark:text-[--semantic-base-text-secondary] [&_.rdp-head_th]:p-2 [&_.rdp-table]:w-full [&_.rdp-tbody_td]:p-2"
+            :selected="modelValue"
+            @update:model-value="
+              (date) =>
+                emit('update:modelValue', date as unknown as CalendarDate)
+            "
+          />
+        </PopoverContent>
+      </Popover>
+
+      <div
+        class="flex h-14 w-full items-center rounded-r-xl border border-l-0 border-gray-200 bg-white px-4 py-2 dark:border-[--semantic-base-line] dark:bg-[--semantic-base-background]"
+      >
+        <input
+          v-model="selectedTime"
+          type="time"
+          class="w-full border-0 px-0 py-2 text-xl text-gray-600 placeholder:text-gray-400 focus:border-transparent focus:ring-0 focus:outline-none dark:bg-[--semantic-base-background] dark:text-[--semantic-base-text-primary] dark:placeholder:text-[--semantic-base-text-secondary]"
+          :placeholder="timePlaceholder || '10:00'"
+        />
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { Calendar } from '~/components/scn/calendar'
+import {
+  Popover,
+  PopoverTrigger,
+  PopoverContent,
+} from '~/components/scn/popover'
+import { CalendarIcon } from 'lucide-vue-next'
+import type { CalendarDate } from '@internationalized/date'
+import { DateFormatter } from '@internationalized/date'
+const { locale } = useI18n()
+
+interface Props {
+  modelValue: CalendarDate
+  placeholder?: string
+  timePlaceholder?: string
+  initialTime?: string
+}
+
+const props = defineProps<Props>()
+
+const emit = defineEmits<{
+  (e: 'update:modelValue', date: CalendarDate): void
+  (e: 'update:time', time: string): void
+  (e: 'update', value: { date: CalendarDate; time: string }): void
+}>()
+
+const selectedTime = ref<string>(props.initialTime || '')
+const df = new DateFormatter(locale.value, { dateStyle: 'long' })
+
+watch([() => props.modelValue, selectedTime], () => {
+  emit('update', {
+    date: props.modelValue,
+    time: selectedTime.value,
+  })
+})
+</script>