Changed views data

components/calendar/Calendar.vue

@@ -2,7 +2,7 @@
 import { useCalendar } from '@/stores/CalendarStore'
 import { computed, type Component, type ComputedRef } from 'vue'
 
-import { PhCircleNotch, PhMagnifyingGlass } from '@phosphor-icons/vue'
+import { PhMagnifyingGlass } from '@phosphor-icons/vue'
 import MonthlyLayout from './state/monthly/Layout.vue'
 import CenturyLayout from './state/centennially/Layout.vue'
 import DecadeLayout from './state/decennially/Layout.vue'
@@ -88,6 +88,8 @@ watch(charPending, (newStatus) => {
   }
 })
 
+const progressPercent = computed(() => 100 / [charPending.value, calPending.value, categoryPending.value].filter(Boolean).length)
+
 const currentViewComponent: ComputedRef<Component> = computed<Component>(() => {
   switch (currentConfig.viewType) {
     case 'month':
@@ -124,8 +126,8 @@ onMounted(() => {
   <div class="h-full w-full relative">
     <TransitionGroup name="screen">
       <div v-if="calPending || charPending || categoryPending" class="h-full w-full grid place-items-center">
-        <div class="flex flex-col items-center">
+        <div class="flex flex-col items-center w-1/2">
-          <PhCircleNotch size="42" class="animate-spin" />
+          <UiProgress :model-value="progressPercent" />
           <p class="text-lg mt-2">Chargement en cours…</p>
         </div>
       </div>

components/calendar/input/EventCategories.vue

@@ -1,5 +1,4 @@
 <script lang="ts" setup>
-import { cn } from '@/lib/utils'
 import type { Category } from '~/models/Category';
 
 import { PhCaretDown, PhCheck } from '@phosphor-icons/vue';
@@ -70,9 +69,6 @@ const filteredCategories = computed(() =>
               :key="category.id"
               :value="category"
               class="cursor-pointer flex justify-between items-center"
-              :class="cn({
-
-              })"
             >
               <span>
                 {{ category.name }}

components/global/Spacing.vue

@@ -1,5 +1,30 @@
+<script lang="ts" setup>
+import { cn } from '~/lib/utils';
+
+interface SpacingProps {
+  size?: 'xs' | 'sm' | 'md' | 'lg' | 'xlg' | '2xl' | '3xl'
+}
+
+const props = defineProps<SpacingProps>()
+
+let spacingClass: string
+
+switch (props.size) {
+  case 'lg':
+    spacingClass = "space-y-4"
+    break;
+
+  case 'md':
+  default:
+    spacingClass = "space-y-2"
+    break;
+}
+</script>
+
 <template>
-  <div class="space-y-2">
+  <div
+    :class="cn(spacingClass)"
+  >
     <slot />
   </div>
 </template>

components/ui/progress/Progress.vue

@@ -0,0 +1,39 @@
+<script setup lang="ts">
+import { type HTMLAttributes, computed } from 'vue'
+import {
+  ProgressIndicator,
+  ProgressRoot,
+  type ProgressRootProps,
+} from 'radix-vue'
+import { cn } from '@/lib/utils'
+
+const props = withDefaults(
+  defineProps<ProgressRootProps & { class?: HTMLAttributes['class'] }>(),
+  {
+    modelValue: 0,
+  },
+)
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
+</script>
+
+<template>
+  <ProgressRoot
+    v-bind="delegatedProps"
+    :class="
+      cn(
+        'relative h-2 w-full overflow-hidden rounded-full bg-secondary',
+        props.class,
+      )
+    "
+  >
+    <ProgressIndicator
+      class="h-full w-full flex-1 bg-primary transition-all"
+      :style="`transform: translateX(-${100 - (props.modelValue ?? 0)}%);`"
+    />
+  </ProgressRoot>
+</template>

components/ui/progress/index.ts

@@ -0,0 +1 @@
+export { default as Progress } from './Progress.vue'

pages/i/index.vue

@@ -34,7 +34,7 @@ setCurrentMenu([])
         Mondes
       </h2>
 
-      <ul class="grid md:grid-cols-3 gap-2">
+      <ul class="grid lg:grid-cols-2 gap-2">
         <li v-for="world in worlds" :key="world.id">
           <UiCard
             class="w-full transition-all"

pages/i/world/[id]/index.vue

@@ -42,23 +42,29 @@ setCurrentMenu([])
         </Spacing>
       </header>
 
-      <ul v-if="world.calendars && world.calendars?.length > 0" class="grid md:grid-cols-3 gap-2">
+      <section v-if="world.calendars && world.calendars?.length > 0">
-        <li v-for="calendar in world.calendars" :key="calendar.id">
+        <Spacing size="lg">
-          <UiCard
+          <Heading>Calendriers</Heading>
-            v-if="calendar"
-            class="w-full transition-all"
-            :link="`/i/world/${world.id}/calendar`"
-          >
-            <UiCardHeader>
-              <UiCardTitle>{{ calendar.name }}</UiCardTitle>
 
-              <UiCardContent>
+          <ul class="grid md:grid-cols-3 gap-2">
-                <p class="italic">{{ calendar.events }}</p>
+            <li v-for="calendar in world.calendars" :key="calendar.id">
-              </UiCardContent>
+              <UiCard
-            </UiCardHeader>
+                v-if="calendar"
-          </UiCard>
+                class="w-full transition-all text-slate-100 bg-slate-900 border-slate-700 hover:bg-slate-700 dark:hover:bg-slate-800 dark:border-slate-900 dark:focus-within:outline-slate-900"
-        </li>
+                :link="`/i/world/${world.id}/calendar`"
-      </ul>
+              >
+                <UiCardHeader>
+                  <UiCardTitle>{{ calendar.name }}</UiCardTitle>
+                </UiCardHeader>
+
+                <UiCardContent>
+                  <p class="italic">Description future (ou alors des informations sur le nb d'évènements)</p>
+                </UiCardContent>
+              </UiCard>
+            </li>
+          </ul>
+        </Spacing>
+      </section>
     </template>
   </main>
 </template>

server/api/worlds/query.get.ts

@@ -23,6 +23,8 @@ export default defineEventHandler(async (event) => {
   }
 
   if (query.id) {
+    // const eventNb = await client.from('worlds').select('events:calendars(calendar_events(id))').order('events_count')
+
     return output.eq('id', query.id).single<World>()
   }