wip

cypress/e2e/cloud.cy.ts

@@ -317,4 +317,32 @@ describe('Cloud', () => {
         });
     });
 
+    it.only('GH', () => {
+        // Arrange
+        cy.press('Log in');
+        cy.ariaInput('Login url').type(`${webId()}{enter}`);
+        cy.solidLogin();
+        cy.ariaInput('Task name').type('Testing{enter}');
+
+        // Act
+        cy.ariaLabel('Show lists').click();
+
+        cy.press('New list');
+        cy.ariaInput('Name').type('Initial Name{enter}');
+        cy.waitSync();
+
+        cy.ariaInput('Task name').type('Task{enter}');
+        cy.waitSync();
+
+        cy.ariaLabel('Initial Name list settings').click({ force: true });
+        cy.get('[role=dialog] input[name=draft]').clear().type('Updated Name{enter}');
+        // cy.ariaInput('Name').clear().type('Updated Name{enter}');
+        cy.waitSync();
+
+        // TODO also investigate duplicated type indexes!!
+
+        // Assert
+        cy.pause();
+    });
+
 });

src/App.vue

@@ -3,6 +3,5 @@
         <main class="flex flex-grow flex-col items-center justify-center">
             <RouterView />
         </main>
-        <AppFooter />
     </AGAppLayout>
 </template>

src/pages/index.ts

@@ -1,11 +1,12 @@
-import { defineRouteBindings, defineRoutes } from '@aerogel/plugin-routing';
+import { Router, defineRouteBindings, defineRoutes } from '@aerogel/plugin-routing';
 
 import Workspaces from '@/services/Workspaces';
 import { listName } from '@/utils/display';
 import type TasksList from '@/models/TasksList';
 import type WorkspaceModel from '@/models/Workspace';
 
 import LandingBeta from './landing/LandingBeta.vue';
+import Vivant from './vivant/Vivant.vue';
 import Workspace from './workspace/Workspace.vue';
 
 export const bindings = defineRouteBindings({
@@ -24,7 +25,12 @@ export const routes = defineRoutes([
         name: 'home',
         path: '/',
         component: LandingBeta,
-        beforeEnter: () => Workspaces.open(),
+        beforeEnter: () => Router.replace('/vivant'),
+    },
+    {
+        name: 'vivant',
+        path: '/vivant/:example?',
+        component: Vivant,
     },
     {
         name: 'workspace',

src/pages/vivant/Vivant.vue

@@ -0,0 +1,56 @@
+<template>
+    <div class="flex w-full flex-grow justify-center px-8">
+        <div class="flex w-full max-w-screen-xl flex-grow flex-col py-8">
+            <h1 class="text-3xl font-semibold">
+                <TextLink route="vivant">
+                    Vivant
+                </TextLink>
+            </h1>
+            <h2 v-if="$route.params.example" class="text-gray-600">
+                {{ $route.params.example }}
+            </h2>
+            <div
+                v-if="activeExample"
+                class="relative isolate mt-4 flex flex-grow items-center justify-center rounded-lg bg-gray-800"
+            >
+                <IconButton
+                    class="absolute right-2 top-2 z-10 rounded-lg bg-white/10 hover:bg-white/20"
+                    @click="reload()"
+                >
+                    <!-- TODO spin on click -->
+                    <i-zondicons-refresh class="h-6 w-6 text-white/50" />
+                </IconButton>
+                <component :is="activeExample" />
+            </div>
+            <ul v-else class="list-disc pl-4">
+                <li v-for="(_, name) of examples" :key="name">
+                    <AGLink route="vivant" :route-params="{ example: name }">
+                        {{ name }}
+                    </AGLink>
+                </li>
+            </ul>
+        </div>
+    </div>
+</template>
+
+<script setup lang="ts">
+import { computed, nextTick, ref } from 'vue';
+import { Router } from '@aerogel/plugin-routing';
+
+import examples from './examples';
+
+const exampleHidden = ref(false);
+const activeExample = computed(() => {
+    if (exampleHidden.value) {
+        return 'span';
+    }
+
+    return examples[(Router.currentRoute.value?.params?.example ?? '') as string] ?? null;
+});
+
+function reload() {
+    exampleHidden.value = true;
+
+    nextTick(() => (exampleHidden.value = false));
+}
+</script>

src/pages/vivant/examples/enter.vue

@@ -0,0 +1,7 @@
+<template>
+    <AnimatedElement
+        :initial="{ opacity: 0, scale: 0 }"
+        :animate="{ opacity: 1, scale: 1 }"
+        class="h-20 w-20 rounded-xl bg-yellow-400"
+    />
+</template>

src/pages/vivant/examples/exit-pop.vue

@@ -0,0 +1,35 @@
+<template>
+    <TextButton class="h-12 w-52 p-2" @click="login()">
+        <!-- TODO styles not cleared after animations... -->
+        <AnimatedTransition
+            timing="spring"
+            leave-animation="freeze"
+            :bounce="0"
+            :duration="300"
+            :enter-from="{ opacity: 0, y: -25 }"
+            :enter-to="{ opacity: 1, y: 0 }"
+            :leave-from="{ opacity: 1, y: 0 }"
+            :leave-to="{ opacity: 0, y: 25 }"
+        >
+            <!-- TODO simplify leave-from, enter-to? -->
+            <i-svg-spinners-ring-resize v-if="state === 'loading'" class="h-6 w-6" />
+            <span v-else :key="state">{{ statesText[state] }}</span>
+        </AnimatedTransition>
+    </TextButton>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue';
+
+const statesText = {
+    idle: 'Send me a login link',
+    success: 'Login link sent!',
+};
+const state = ref<keyof typeof statesText | 'loading'>('idle');
+
+function login() {
+    state.value = 'loading';
+    setTimeout(() => (state.value = 'success'), 1750);
+    setTimeout(() => (state.value = 'idle'), 3500);
+}
+</script>

src/pages/vivant/examples/exit-wait.vue

@@ -0,0 +1,45 @@
+<template>
+    <TextButton class="h-12 w-12 p-2" @click="copy()">
+        <!-- <Transition
+            enter-active-class="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2"
+            enter-from-class="opacity-0 scale-[0.5]"
+            enter-to-class="opacity-1 scale-1 transition-all duration-[300ms] delay-[300ms]"
+            leave-active-class="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2"
+            leave-from-class="opacity-1 scale-1"
+            leave-to-class="opacity-0 scale-[0.5] transition-all duration-[300ms]"
+        >
+            <i-zondicons-checkmark v-if="copied" class="h-6 w-6" />
+            <i-zondicons-copy v-else class="h-6 w-6" />
+        </Transition> -->
+        <!-- <AnimatedTransition enter-animation="enter" leave-animation="leave" mode="out-in">
+            <i-zondicons-checkmark v-if="copied" class="h-6 w-6" />
+            <i-zondicons-copy v-else class="h-6 w-6" />
+        </AnimatedTransition> -->
+        <AnimatedTransition
+            :enter-from="{ opacity: 0, scale: 0.5 }"
+            :enter-to="{ opacity: 1, scale: 1 }"
+            :leave-from="{ opacity: 1, scale: 1 }"
+            :leave-to="{ opacity: 0, scale: 0.5 }"
+            mode="out-in"
+        >
+            <!-- TODO simplify leave-from, enter-to? -->
+            <i-zondicons-checkmark v-if="copied" class="h-6 w-6" />
+            <i-zondicons-copy v-else class="h-6 w-6" />
+        </AnimatedTransition>
+    </TextButton>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue';
+
+let timeout: ReturnType<typeof setTimeout> | null = null;
+const copied = ref(false);
+
+function copy() {
+    timeout && clearTimeout(timeout);
+
+    copied.value = true;
+
+    timeout = setTimeout(() => ((copied.value = false), (timeout = null)), 1500);
+}
+</script>

src/pages/vivant/examples/index.ts

@@ -0,0 +1,14 @@
+import { required, stringMatch } from '@noeldemartin/utils';
+import type { Component } from 'vue';
+
+const examplesGlob = import.meta.glob(['./*.vue'], { eager: true }) as Record<string, { default: Component }>;
+
+const examples: Record<string, Component> = {};
+
+for (const [fileName, moduleExports] of Object.entries(examplesGlob)) {
+    const name = required(stringMatch<3>(fileName, /^(.*\/)?(.+)\.vue$/))[2];
+
+    examples[name] = moduleExports.default;
+}
+
+export default examples;

src/pages/vivant/examples/layout-modals.vue

@@ -0,0 +1,137 @@
+<template>
+    <AnimatedGroup :duration="1000">
+        <ol
+            role="list"
+            class="pointer-events-none z-10 grid grid-cols-1 gap-6 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4"
+        >
+            <li
+                v-for="member of crew"
+                :key="member.id"
+                v-morph="`background-${member.id}`"
+                class="pointer-events-auto"
+            >
+                <button
+                    type="button"
+                    class="col-span-1 flex flex-col divide-y divide-gray-200 rounded-lg bg-white text-center shadow"
+                    @click="active = member"
+                >
+                    <div class="flex flex-1 flex-col p-8">
+                        <div
+                            v-morph="`avatar-${member.id}`"
+                            class="mx-auto h-32 w-32 flex-shrink-0 overflow-hidden rounded-full"
+                        >
+                            <div class="h-full w-full bg-yellow-300" />
+
+                            <!-- <img class="h-full w-full object-cover" :src="`/mugiwara/${member.id}.webp`" alt=""> -->
+                        </div>
+                        <h3 v-morph="`title-${member.id}`" class="mt-6 self-center text-sm font-medium text-gray-900">
+                            {{ member.name }}
+                        </h3>
+                        <span v-morph="`role-${member.id}`" class="self-center text-sm text-gray-500">
+                            {{ member.role }}
+                        </span>
+                    </div>
+                </button>
+            </li>
+        </ol>
+        <AnimatedTransition enter-animation="fade-in" leave-animation="fade-out">
+            <div v-if="active" class="absolute inset-0 z-10 bg-black/0" @click="active = undefined" />
+        </AnimatedTransition>
+        <AnimatedTransition>
+            <div
+                v-if="active"
+                class="pointer-events-none absolute inset-0 isolate z-20 flex items-center justify-center"
+            >
+                <div
+                    v-morph="`background-${active.id}`"
+                    class="pointer-events-auto z-10 flex h-1/2 w-1/2 flex-col gap-6 rounded-lg bg-white p-8 shadow-lg xl:flex-row"
+                >
+                    <div
+                        v-morph="`avatar-${active.id}`"
+                        class="aspect-[1/2] flex-shrink-0 overflow-hidden rounded-2xl xl:w-52"
+                    >
+                        <div class="h-full w-full bg-yellow-300" />
+                        <!-- <img class="h-full w-full object-cover" :src="`/mugiwara/${active.id}.webp`" alt=""> -->
+                    </div>
+                    <div class="flex flex-auto flex-col">
+                        <h3
+                            v-morph="`title-${active.id}`"
+                            class="self-center text-lg font-semibold leading-8 tracking-tight text-gray-900"
+                        >
+                            {{ active.name }}
+                        </h3>
+                        <p v-morph="`role-${active.id}`" class="self-center text-base leading-7 text-gray-600">
+                            {{ active.role }}
+                        </p>
+                        <div class="mt-2 h-px bg-gray-200" />
+                        <h4 class="mt-4 flex items-center space-x-1 font-medium">
+                            <i-ph-bowl-steam-fill class="h-6 w-6" />
+                            <span>Favorite food</span>
+                        </h4>
+                        <p class="mt-2 text-base leading-7 text-gray-600">
+                            {{ active.food }}
+                        </p>
+                        <h4 class="mt-4 flex items-center space-x-1 font-medium">
+                            <i-mdi-sleep class="h-6 w-6" />
+                            <span>Sleep schedule</span>
+                        </h4>
+                        <p class="mt-2 text-base leading-7 text-gray-600">
+                            {{ active.sleep }}
+                        </p>
+                    </div>
+                </div>
+            </div>
+        </AnimatedTransition>
+    </AnimatedGroup>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue';
+
+interface Pirate {
+    id: string;
+    name: string;
+    role: string;
+    food: string;
+    sleep: string;
+}
+
+const active = ref<Pirate | undefined>();
+const crew: Pirate[] = [
+    {
+        id: 'luffy',
+        name: 'Monkey D. Luffy',
+        role: 'Captain',
+        food: 'All kinds of meat',
+        sleep: 'No set time (~5 hours)',
+    },
+    {
+        id: 'zoro',
+        name: 'Roronoa Zoro',
+        role: 'Swordsman',
+        food: 'White rice, Sea Beast meat, and food that complements sake',
+        sleep: '4 am to 7 am (3 hours) (+naps)',
+    },
+    {
+        id: 'nami',
+        name: 'Nami',
+        role: 'Navigator',
+        food: 'Mainly tangerines and other kinds of fruits',
+        sleep: '11 pm to 7 am (8 hours)',
+    },
+    {
+        id: 'usopp',
+        name: 'Usopp',
+        role: 'Sniper',
+        food: 'Pike from an autumn island and other fish of the season',
+        sleep: '1 am to 8 am (7 hours)',
+    },
+    {
+        id: 'sanji',
+        name: 'Sanji',
+        role: 'Cook',
+        food: 'Spicy seafood pasta and food that complements black tea',
+        sleep: '12 am to 5 am (5 hours)',
+    },
+];
+</script>

src/pages/vivant/examples/layout-multiple.vue

@@ -0,0 +1,20 @@
+<template>
+    <ul class="flex flex-col items-center space-y-4">
+        <li v-for="item of items" :key="item">
+            <button type="button" class="relative px-4 py-3" @click="active = item">
+                <!-- v-morph="{ id: 'highlight', duration: 300 }" -->
+                <AnimatedTransition>
+                    <div v-if="active === item" v-morph="'highlight'" class="absolute inset-0 rounded-lg bg-white/50" />
+                </AnimatedTransition>
+                <span class="text-white">{{ item }}</span>
+            </button>
+        </li>
+    </ul>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue';
+
+const items = ['One', 'Two', 'Three', 'Four'];
+const active = ref(items[0]);
+</script>