Implement empty states

src/components/DateInput.vue

@@ -27,7 +27,7 @@ const [attrs, className] = useInputAttrs();
 const renderedInputClass = computed(() =>
     twMerge(
         [
-            'w-full rounded-md border-0 px-2 py-1.5',
+            'w-full rounded-lg border-0 px-2 py-1.5',
             'text-base text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300',
             'placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-[--primary-600]',
         ].join(' '),

src/components/TextButton.vue

@@ -15,7 +15,7 @@ const props = defineProps({
     disabled: booleanProp(),
 });
 
-const baseClasses = 'clickable-target flex items-center justify-center rounded-xl px-3 py-2 focus-visible:outline';
+const baseClasses = 'clickable-target flex items-center justify-center rounded-lg px-3 py-2 focus-visible:outline';
 const colorClasses = computed(() => {
     switch (props.color) {
         case Colors.Secondary:

src/components/TextInput.vue

@@ -36,12 +36,12 @@ const form = inject<Form | null>('form', null);
 const inputProps = extractInputProps(props);
 const $input = componentRef<IAGHeadlessInput>();
 const [attrs, className] = useInputAttrs();
-const renderedFillerClass = computed(() => twMerge('invisible whitespace-pre-wrap px-2 py-1.5', props.inputClass));
+const renderedFillerClass = computed(() => twMerge('invisible whitespace-pre-wrap', props.inputClass));
 const renderedInputClass = computed(() =>
     twMerge(
         [
             props.multiline ? 'absolute inset-0 block h-full resize-none' : '',
-            'w-full rounded-md border-0 px-2 py-1.5',
+            'w-full rounded-lg border-0',
             'text-base text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300',
             'placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-[--primary-600]',
         ].join(' '),

src/lang/en.yaml

@@ -45,7 +45,6 @@ landing:
 
             Let's start, create a task for the first thing you want to get done:
         label: Task name
-        placeholder: E.g. learn Japanese
         submit: Create task
         workspaceName: Main
         back: nevermind
@@ -105,8 +104,11 @@ tasks:
     selectTitle: Select task
     important: (Important)
     complete: Complete task
+    placeholder: E.g. learn Japanese
+    startTitle: Ready to grow
+    startMessage: The soil is ready, plant your ideas here and they can sprout into beautiful trees. Or just write whatever is in your mind, not every task needs to be so flowery!
+    empty: Congratulations, you've completed all your tasks! Time for a break?
     undo: Undo task
-    empty: You don't have any tasks, add a new one!
     completed: Completed
     showCompleted: Show completed
     hideCompleted: Hide completed

src/pages/landing/LandingGetStarted.vue

@@ -17,7 +17,7 @@
                     </AGHeadlessInputLabel>
                     <AGHeadlessInputInput
                         class="w-[400px] min-w-0 flex-auto rounded-md border-0 px-3.5 py-2 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-blue-600 sm:text-sm sm:leading-6"
-                        :placeholder="$t('landing.getStarted.placeholder')"
+                        :placeholder="$t('tasks.placeholder')"
                     />
                     <AGHeadlessInputError class="text-red-700" />
                 </AGHeadlessInput>

src/pages/workspace/WorkspaceContent.vue

@@ -1,5 +1,5 @@
 <template>
-    <div class="flex w-full max-w-screen-xl flex-col overflow-hidden" @click="deselectTask($event)">
+    <div class="flex w-full max-w-screen-xl flex-col" @click="deselectTask($event)">
         <template v-if="$tasksLists.current?.isRelationLoaded('tasks')">
             <WorkspaceContentHeader />
             <WorkspaceContentBody class="flex-1" />

src/pages/workspace/WorkspaceContentBody.vue

@@ -1,11 +1,18 @@
 <template>
     <div class="px-4">
-        <TaskCreateForm @submit="createTask" />
-        <TasksList :tasks="tasks.pending" :disable-editing="disableEditing" class="mt-4" />
+        <TasksForm v-if="$tasksList.tasks?.length" @submit="createTask($event)" />
+        <TasksList
+            v-if="tasks.pending.length"
+            :tasks="tasks.pending"
+            :disable-editing="disableEditing"
+            class="mt-4"
+        />
+        <TasksStart v-else-if="!$tasksList.tasks?.length" @create="createTask($event)" />
+        <TasksEmpty v-else-if="!showCompleted" />
         <div v-if="tasks.completed.length" class="mt-4">
             <TextButton
                 color="clear"
-                class="ml-1 rounded-lg pl-1 pr-2 font-medium uppercase tracking-wider"
+                class="ml-1 pl-1 pr-2 font-medium uppercase tracking-wider"
                 :aria-label="showCompleted ? $t('tasks.hideCompleted') : $t('tasks.showCompleted')"
                 @click="showCompleted = !showCompleted"
             >

src/pages/workspace/WorkspaceSidebarNav.vue

@@ -12,7 +12,7 @@
     </nav>
     <TextButton color="clear" class="group ml-2 mt-1.5 self-start text-gray-700" @click="createList()">
         <i-material-symbols-add-circle-rounded class="mr-1 h-6 w-6" />
-        <div v-measure class="overflow-hidden">
+        <div class="overflow-hidden">
             <span class="block -translate-x-full transition-all group-hover:translate-x-0 group-focus:translate-x-0">
                 {{ $t('lists.add') }}
             </span>

src/pages/workspace/WorkspaceSidebarNavItem.vue

@@ -2,7 +2,7 @@
     <li class="group relative" :aria-current="isActive && 'page'">
         <div class="px-2 py-0.5">
             <AGHeadlessButton
-                class="block rounded-lg px-4 py-3 hover:no-underline focus:outline-none focus:ring-2 focus:ring-inset focus:ring-[--primary-700]"
+                class="block rounded-lg px-4 py-3 hover:no-underline focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-[--primary-700]"
                 :class="{
                     'bg-[var(--primary-100)] font-semibold text-[--primary-900] hover:bg-[--primary-200]': isActive,
                     'hover:bg-gray-100': !isActive,
@@ -14,10 +14,10 @@
         </div>
         <div
             v-if="editable"
-            class="pointer-events-none absolute right-0 top-1/2 mr-1 -translate-y-1/2 overflow-hidden p-1"
+            class="pointer-events-none absolute right-0 top-1/2 mr-2 -translate-y-1/2 overflow-hidden p-1"
         >
             <IconButton
-                class="pointer-events-auto h-10 w-10 translate-x-full rounded-lg p-0 transition-transform focus:translate-x-0 group-hover:translate-x-0"
+                class="clickable-target pointer-events-auto h-9 w-9 translate-x-full rounded-md p-0 transition-transform focus:translate-x-0 group-hover:translate-x-0"
                 :class="isActive && 'hover:bg-[--primary-200]'"
                 :title="$t('lists.edit')"
                 :aria-label="$t('lists.editA11y', { name: list.name })"

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

@@ -33,7 +33,7 @@ const renderedFillerClass = computed(() => twMerge('invisible whitespace-pre-wra
 const renderedInputClass = computed(() =>
     twMerge(
         [
-            'absolute inset-0 block h-full w-full rounded-md border-0 py-1.5 text-gray-900 shadow-sm',
+            'absolute inset-0 block h-full w-full rounded-lg border-0 py-1.5 text-gray-900 shadow-sm',
             'resize-none ring-1 ring-inset ring-gray-300',
             'placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-[--primary-600]',
         ].join(' '),

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

@@ -0,0 +1,8 @@
+<template>
+    <div class="flex h-[60vh] flex-col items-center justify-center px-4 py-8">
+        <div class="flex justify-center">
+            <img src="@/assets/img/tasks/empty.avif" class="h-64 max-h-full" alt="">
+        </div>
+        <AGMarkdown lang-key="tasks.empty" class="mt-4 text-center text-lg font-light tracking-wide text-gray-700" />
+    </div>
+</template>

src/pages/workspace/components/tasks/TaskCreateForm.story.vue → src/pages/workspace/components/tasks/TasksForm.story.vue

@@ -1,35 +1,35 @@
 <template>
     <Story group="tasks" :layout="{ type: 'grid' }">
         <Variant title="Playground">
-            <TaskCreateForm />
+            <TasksForm />
 
             <template #controls>
                 <HstSelect v-model="themeColor" title="Theme Color" :options="themeColorOptions" />
             </template>
         </Variant>
 
         <Variant title="Default">
-            <TaskCreateForm />
+            <TasksForm />
         </Variant>
 
         <Variant title="Hover">
-            <TaskCreateForm class=":hover" />
+            <TasksForm class=":hover" />
         </Variant>
 
         <Variant title="Filled">
-            <TaskCreateForm value="My new task" />
+            <TasksForm value="My new task" />
         </Variant>
 
         <Variant title="Filled Hover">
-            <TaskCreateForm value="My new task" input-class=":hover" />
+            <TasksForm value="My new task" input-class=":hover" />
         </Variant>
 
         <Variant title="Input Focus">
-            <TaskCreateForm input-class=":focus" class=":focus-within" />
+            <TasksForm input-class=":focus" class=":focus-within" />
         </Variant>
 
         <Variant title="Submit Focus">
-            <TaskCreateForm submit-class=":focus :focus-visible" class=":focus-within" />
+            <TasksForm submit-class=":focus :focus-visible" class=":focus-within" />
         </Variant>
     </Story>
 </template>
@@ -41,7 +41,7 @@ const [themeColor, themeColorOptions] = useThemeColor();
 </script>
 
 <style>
-.story-taskcreateform {
+.story-tasksform {
     grid-template-columns: 750px !important;
 }
 </style>

src/pages/workspace/components/tasks/TaskCreateForm.vue → src/pages/workspace/components/tasks/TasksForm.vue

@@ -1,7 +1,7 @@
 <template>
     <AGForm
         v-initial-focus
-        class="group relative flex gap-4 rounded-xl"
+        class="group relative flex gap-4 rounded-lg"
         :class="{
             'bg-gray-100 focus-within:bg-transparent hover:bg-gray-200 focus-within:hover:bg-transparent': !form.draft,
         }"
@@ -16,7 +16,7 @@
         >
             <AGHeadlessInputLabel class="sr-only" />
             <AGHeadlessInputInput
-                class="absolute inset-0 h-full w-full rounded-xl border-gray-200 pl-6 opacity-0 hover:bg-gray-50 focus:border-[--primary-500] focus:ring-[--primary-500] group-focus-within:opacity-100"
+                class="absolute inset-0 h-full w-full rounded-lg border-gray-200 pl-6 opacity-0 hover:bg-gray-50 focus:border-[--primary-500] focus:ring-[--primary-500] group-focus-within:opacity-100"
                 :class="[inputClass, { 'opacity-100': form.draft }]"
                 :placeholder="$t('tasks.inputPlaceholder')"
             />

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

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

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

@@ -0,0 +1,25 @@
+<template>
+    <div class="flex h-full flex-col items-center justify-center pb-24">
+        <div class="relative max-h-56 w-full flex-1">
+            <img src="@/assets/img/tasks/start.avif" class="absolute right-1/2 h-full translate-x-1/2" alt="">
+        </div>
+        <h2 class="mt-6 text-xl font-semibold leading-6 text-gray-900">
+            {{ $t('tasks.startTitle') }}
+        </h2>
+        <AGMarkdown lang-key="tasks.startMessage" class="mt-2 text-center font-light text-gray-600" />
+        <AGForm :form="form" class="mt-6 flex gap-2" @submit="$emit('create', form.draft.trim())">
+            <TextInput name="draft" :placeholder="$t('tasks.placeholder')" />
+            <TextButton submit>
+                {{ $t('ui.create') }}
+            </TextButton>
+        </AGForm>
+    </div>
+</template>
+
+<script setup lang="ts">
+import { requiredStringInput, useForm } from '@aerogel/core';
+
+defineEmits(['create']);
+
+const form = useForm({ draft: requiredStringInput() });
+</script>

src/pages/workspace/components/user/UserSettings.vue

@@ -11,7 +11,7 @@
                     type="button"
                     :class="[
                         active ? 'bg-[--primary-500] text-white' : 'text-gray-900',
-                        'group flex w-full items-center rounded-md px-2 py-2 text-sm',
+                        'group flex w-full items-center rounded-lg px-2 py-2 text-sm',
                     ]"
                     @click="$ui.openModal(CloudStatusModal)"
                 >

src/pages/workspace/modals/WorkspaceSettingsModal.vue

@@ -11,7 +11,7 @@
                 <TextInput name="name" :label="$t('workspaces.name')" class="w-80 max-w-[80vw] flex-1" />
                 <SelectInput name="color">
                     <SelectInputLabel>{{ $t('workspaces.color') }}</SelectInputLabel>
-                    <TextButton :as="SelectInputButton" color="clear" class="-ml-3 mt-2">
+                    <TextButton :as="SelectInputButton" color="clear" class="-ml-3 mt-2 h-10">
                         <div class="h-4 w-4 rounded-full bg-[--primary-500]" />
                         <i-zondicons-cheveron-down class="ml-0.5 h-5 w-5" />
                     </TextButton>