Improve tasks list

cypress/e2e/tasks.cy.ts

@@ -35,7 +35,7 @@ describe('Tasks', () => {
 
         // Assert
         cy.dontSee('Cook Ramen');
-        cy.press('Show completed');
+        cy.ariaLabel('Show completed').click();
         cy.see('Cook Ramen');
     });
 
@@ -47,11 +47,11 @@ describe('Tasks', () => {
         cy.see('Eat Ramen');
         cy.ariaInput('Complete task', { description: 'Cook Ramen' }).click();
         cy.ariaInput('Complete task', { description: 'Eat Ramen' }).click();
-        cy.press('Show completed');
+        cy.ariaLabel('Show completed').click();
 
         // Act
         cy.ariaInput('Undo task', { description: 'Cook Ramen' }).click();
-        cy.press('Hide completed');
+        cy.ariaLabel('Hide completed').click();
 
         // Assert
         cy.dontSee('Eat Ramen');

package.json

@@ -27,24 +27,24 @@
         "@aerogel/plugin-offline-first": "0.0.0-next.8e6b2bcc764fa682decbb41aa6848c77a744dec3",
         "@aerogel/plugin-routing": "next",
         "@aerogel/plugin-solid": "0.0.1-next.9a02fcd3bcf698211dd7a71d4c48257c96dd7832",
-        "@aerogel/plugin-soukai": "next",
+        "@aerogel/plugin-soukai": "0.0.0-next.2036392036b3c125319b4704b862cbf403480ea2",
         "@intlify/unplugin-vue-i18n": "^0.12.2",
         "@noeldemartin/solid-utils": "0.4.0-next.852c9f9e65275fc2a2e67a9750784fb43a0fd64b",
         "@noeldemartin/utils": "0.5.1-next.d01c5dd7a42656e2ed6f6a0279c98dd6e2ff5a10",
         "@solid/community-server": "^7.0.5",
         "@tailwindcss/forms": "^0.5.3",
         "@tailwindcss/typography": "^0.5.9",
         "popmotion": "^11.0.5",
-        "soukai": "0.5.2-next.ce96ff93551c4c8cdeec8026b38efaaa2fafaf8b",
-        "soukai-solid": "0.5.2-next.10cb7b99bd6c4c4abfa24e87265a39d4c60dc982",
+        "soukai": "0.5.2-next.a2a7fe744e9d9662ca334b0a2f26c26c4b2e731b",
+        "soukai-solid": "0.5.2-next.300b5018b4c04551654786c2a50d04a50b2aa6ec",
         "tailwindcss": "^3.3.2",
         "vue": "^3.3.0",
         "vue-i18n": "9.3.0-beta.19"
     },
     "devDependencies": {
-        "@aerogel/cli": "next",
+        "@aerogel/cli": "0.0.0-next.2036392036b3c125319b4704b862cbf403480ea2",
         "@aerogel/cypress": "0.0.0-next.8e6b2bcc764fa682decbb41aa6848c77a744dec3",
-        "@aerogel/histoire": "0.0.0-next.9a02fcd3bcf698211dd7a71d4c48257c96dd7832",
+        "@aerogel/histoire": "0.0.0-next.2036392036b3c125319b4704b862cbf403480ea2",
         "@aerogel/vite": "next",
         "@iconify/json": "^2.2.134",
         "@noeldemartin/eslint-config-vue": "next",

src/lang/en.yaml

@@ -92,8 +92,11 @@ tasks:
     inputPlaceholder: What are you doing next?
     inputClear: Discard
     inputSubmit: Add
+    selectA11y: Select task ":name"
+    selectTitle: Select task
     complete: Complete task
     undo: Undo task
     empty: You don't have any tasks, add a new one!
+    completed: Completed
     showCompleted: Show completed
     hideCompleted: Hide completed

src/main.histoire.ts

@@ -1,8 +1,17 @@
 import '@aerogel/histoire/dist/styles.css';
 import { defineSetupAerogel } from '@aerogel/histoire';
 
+import { WorkspacesService } from '@/services/Workspaces';
+
 import './assets/css/styles.css';
 
 export const setupVue3 = defineSetupAerogel({
+    solid: true,
+    models: import.meta.glob(['@/models/*', '!**/*.test.ts'], { eager: true }),
     messages: import.meta.glob('@/lang/*.yaml'),
+    setup({ app }) {
+        Object.assign(app.config.globalProperties, {
+            $workspaces: new WorkspacesService(),
+        });
+    },
 });

src/pages/workspace/Workspace.vue

@@ -12,8 +12,17 @@
 
 <script setup lang="ts">
 import { ref, watchEffect } from 'vue';
+import { objectProp, requiredObjectProp } from '@aerogel/core';
 
 import Workspaces from '@/services/Workspaces';
+import { bindWorkspaceColors } from '@/utils/composables';
+import type Workspace from '@/models/Workspace';
+import type TasksList from '@/models/TasksList';
+
+defineProps({
+    workspace: requiredObjectProp<Workspace>(),
+    list: objectProp<TasksList>(),
+});
 
 const workspaceColors = ref({
     50: '#fef2f2',
@@ -30,15 +39,5 @@ const workspaceColors = ref({
 });
 
 watchEffect(() => Workspaces.current?.loadRelationIfUnloaded('lists'));
-watchEffect((onCleanup) => {
-    Object.entries(workspaceColors.value).forEach(([name, value]) => {
-        document.body.style.setProperty(`--primary-${name}`, value);
-    });
-
-    onCleanup(() => {
-        Object.keys(workspaceColors.value).forEach((name) => {
-            document.body.style.removeProperty(`--primary-${name}`);
-        });
-    });
-});
+bindWorkspaceColors(workspaceColors);
 </script>

src/pages/workspace/WorkspaceContentBody.vue

@@ -1,13 +1,21 @@
 <template>
-    <div class="px-4 py-6" @click="hideActiveTask($event)">
+    <div class="px-4" @click="hideActiveTask($event)">
         <TaskForm @submit="createTask" />
-
         <TasksList :tasks="tasks.pending ?? []" class="mt-4" />
 
         <div v-if="tasks.completed?.length" class="mt-4">
-            <AGButton @click="showCompleted = !showCompleted">
-                {{ showCompleted ? $t('tasks.hideCompleted') : $t('tasks.showCompleted') }}
-            </AGButton>
+            <button
+                type="button"
+                class="ml-1 flex items-center justify-center rounded-xl py-2 pl-1 pr-2 font-medium uppercase tracking-wider hover:bg-gray-100 focus-visible:outline focus-visible:outline-gray-700"
+                :aria-label="showCompleted ? $t('tasks.hideCompleted') : $t('tasks.showCompleted')"
+                @click="showCompleted = !showCompleted"
+            >
+                <i-zondicons-cheveron-right
+                    class="h-6 w-6 transition-transform"
+                    :class="{ 'rotate-90': showCompleted }"
+                />
+                <span>{{ $t('tasks.completed') }}</span>
+            </button>
             <TasksList v-if="showCompleted" :tasks="tasks.completed" class="mt-4" />
         </div>
     </div>
@@ -28,7 +36,7 @@ const tasks = computedModels(Task, () =>
     arrayGroupBy(TasksLists.current?.tasks ?? [], (task) => (task.completed ? 'completed' : 'pending')));
 
 function hideActiveTask(event: Event) {
-    if (event.target instanceof HTMLElement && event.target.dataset.task) {
+    if (event.target instanceof HTMLElement && event.target.closest('[data-task]')) {
         return;
     }
 

src/pages/workspace/WorkspaceTask.vue

@@ -19,11 +19,12 @@
 </template>
 
 <script setup lang="ts">
-import { computed, ref } from 'vue';
+import { computedModel } from '@aerogel/plugin-soukai';
+import { ref } from 'vue';
 import type { ElementSize } from '@aerogel/core';
 
 import Workspaces from '@/services/Workspaces';
 
 const rootSize = ref<ElementSize>();
-const task = computed(() => Workspaces.activeTask);
+const task = computedModel(() => Workspaces.activeTask);
 </script>

src/pages/workspace/components/tasks/TaskForm.story.vue

@@ -35,74 +35,9 @@
 </template>
 
 <script setup lang="ts">
-import { invert } from '@noeldemartin/utils';
-import { computed, ref, watchEffect } from 'vue';
+import { useWorkspaceColor } from '@/utils/histoire';
 
-const Colors = {
-    Red: 'red',
-    Green: 'green',
-    Blue: 'blue',
-} as const;
-
-type Color = (typeof Colors)[keyof typeof Colors];
-
-const COLOR_VALUES: Record<Color, Record<string, string>> = {
-    [Colors.Red]: {
-        50: '#fef2f2',
-        100: '#fee2e2',
-        200: '#fecaca',
-        300: '#fca5a5',
-        400: '#f87171',
-        500: '#ef4444',
-        600: '#dc2626',
-        700: '#b91c1c',
-        800: '#991b1b',
-        900: '#7f1d1d',
-        950: '#450a0a',
-    },
-    [Colors.Green]: {
-        50: '#f0fdf4',
-        100: '#dcfce7',
-        200: '#bbf7d0',
-        300: '#86efac',
-        400: '#4ade80',
-        500: '#22c55e',
-        600: '#16a34a',
-        700: '#15803d',
-        800: '#166534',
-        900: '#14532d',
-        950: '#052e16',
-    },
-    [Colors.Blue]: {
-        50: '#eff6ff',
-        100: '#dbeafe',
-        200: '#bfdbfe',
-        300: '#93c5fd',
-        400: '#60a5fa',
-        500: '#3b82f6',
-        600: '#2563eb',
-        700: '#1d4ed8',
-        800: '#1e40af',
-        900: '#1e3a8a',
-        950: '#172554',
-    },
-};
-
-const color = ref<Color>(Colors.Blue);
-const colorOptions = invert(Colors);
-const workspaceColors = computed(() => COLOR_VALUES[color.value]);
-
-watchEffect((onCleanup) => {
-    Object.entries(workspaceColors.value).forEach(([name, value]) => {
-        document.body.style.setProperty(`--primary-${name}`, value);
-    });
-
-    onCleanup(() => {
-        Object.keys(workspaceColors.value).forEach((name) => {
-            document.body.style.removeProperty(`--primary-${name}`);
-        });
-    });
-});
+const [color, colorOptions] = useWorkspaceColor();
 </script>
 
 <style>

src/pages/workspace/components/tasks/TasksList.vue

@@ -1,6 +1,6 @@
 <template>
     <div>
-        <ul v-if="tasks.length">
+        <ul v-if="tasks.length" class="flex flex-col gap-0.5">
             <TasksListItem v-for="task of tasks" :key="task.url" :task="task" />
         </ul>
         <AGMarkdown v-else lang-key="tasks.empty" />