@nuxtagentic/automations 0.0.0-stage → 0.1.0

package/runtime/components/AutomationSidebar.vue

@@ -0,0 +1,253 @@
+<script setup lang="ts">
+import { computed, ref } from 'vue'
+import type { AutomationDraft } from '../shared/automation'
+
+const open = defineModel<boolean>('open', { required: true })
+const {
+  automations: automationRecords,
+  folders,
+  currentId,
+  currentFolder,
+  busy,
+  createFolder,
+} = defineProps<{
+  automations: (Pick<AutomationDraft, 'name' | 'folder' | 'active'> & { id: number })[]
+  folders: string[]
+  currentId: number
+  currentFolder: string
+  busy: boolean
+  createFolder: (name: string) => Promise<boolean>
+}>()
+const emit = defineEmits<{
+  select: [id: number]
+  folder: [name: string]
+  create: []
+  removeFolder: [name: string]
+}>()
+const expanded = ref<Record<string, boolean>>({})
+const isCreating = ref(false)
+const folderName = ref('')
+const sortedAutomations = computed(() =>
+  automationRecords.toSorted((a, b) => a.name.localeCompare(b.name)),
+)
+const groups = computed(() =>
+  folders
+    .filter((name) => name !== 'Unsorted')
+    .map((name) => ({
+      name,
+      automations: sortedAutomations.value.filter((row) => row.folder === name),
+    })),
+)
+const loose = computed(() => sortedAutomations.value.filter((row) => row.folder === 'Unsorted'))
+function isExpanded(name: string) {
+  return (
+    expanded.value[name] ??
+    (name === currentFolder ||
+      automationRecords.some((row) => row.id === currentId && row.folder === name))
+  )
+}
+function toggleFolder(name: string) {
+  const wasExpanded = isExpanded(name)
+  expanded.value = { ...expanded.value, [name]: !wasExpanded }
+  emit('folder', name)
+}
+async function saveFolder() {
+  if (!folderName.value.trim() || busy) {
+    return
+  }
+  if (await createFolder(folderName.value.trim())) {
+    expanded.value = { ...expanded.value, [folderName.value.trim()]: true }
+    isCreating.value = false
+    folderName.value = ''
+  }
+}
+</script>
+
+<template>
+  <aside
+    id="automations-folder-sidebar"
+    class="absolute inset-y-0 left-0 z-20 h-full shrink-0 overflow-hidden bg-(--gray-200) transition-[width,border-color] duration-260 ease-[cubic-bezier(.2,0,0,1)] motion-reduce:transition-none @min-[700px]/automation:relative"
+    :class="
+      open
+        ? 'w-62 border-e border-default'
+        : 'pointer-events-none w-0 border-e-0 border-transparent'
+    "
+    :inert="!open"
+    :aria-hidden="!open"
+    aria-label="Automation folders"
+  >
+    <div
+      class="flex h-full w-62 flex-col transition-opacity duration-180 motion-reduce:transition-none"
+      :class="open ? 'opacity-100' : 'opacity-0'"
+    >
+      <div class="flex h-14 shrink-0 items-center gap-0.5 pr-2 pl-4">
+        <h2 class="min-w-0 flex-1 truncate text-sm font-medium text-highlighted">Automations</h2>
+        <UButton
+          icon="i-lucide-panel-left-close"
+          color="neutral"
+          variant="ghost"
+          class="size-8 justify-center rounded-md p-0 text-muted hover:bg-(--gray-400) hover:text-highlighted"
+          :ui="{ leadingIcon: 'size-4' }"
+          aria-label="Close automation folders"
+          @click="open = false"
+        />
+        <UDropdownMenu
+          :items="[
+            { label: 'New automation', icon: 'i-lucide-workflow', onSelect: () => emit('create') },
+            {
+              label: 'New folder',
+              icon: 'i-lucide-folder-plus',
+              onSelect: () => (isCreating = true),
+            },
+          ]"
+          :content="{ align: 'start' }"
+        >
+          <UButton
+            icon="i-lucide-plus"
+            color="neutral"
+            variant="ghost"
+            :disabled="busy"
+            class="size-8 justify-center rounded-md p-0 text-muted hover:bg-(--gray-400) hover:text-highlighted"
+            :ui="{ leadingIcon: 'size-4' }"
+            aria-label="Create automation or folder"
+          />
+        </UDropdownMenu>
+      </div>
+      <nav
+        class="flex min-h-0 flex-1 flex-col gap-0.5 overflow-y-auto px-2 pt-1 pb-4"
+        aria-label="Automation folder contents"
+      >
+        <form
+          v-if="isCreating"
+          class="mb-1 flex items-center gap-1"
+          @submit.prevent="saveFolder"
+        >
+          <UInput
+            v-model="folderName"
+            autofocus
+            icon="i-lucide-folder"
+            placeholder="Folder name"
+            aria-label="New folder name"
+            :maxlength="80"
+            :disabled="busy"
+            class="min-w-0 flex-1"
+            :ui="{ base: 'h-8 text-[13px]' }"
+            @keydown.esc.stop="isCreating = false"
+          />
+          <UButton
+            icon="i-lucide-check"
+            type="submit"
+            aria-label="Create folder"
+            color="neutral"
+            variant="ghost"
+            class="size-7"
+            :disabled="busy || !folderName.trim()"
+          />
+          <UButton
+            icon="i-lucide-x"
+            aria-label="Cancel new folder"
+            color="neutral"
+            variant="ghost"
+            class="size-7"
+            :disabled="busy"
+            @click="isCreating = false"
+          />
+        </form>
+        <div
+          v-for="group in groups"
+          :key="group.name"
+          class="shrink-0"
+        >
+          <UContextMenu
+            :items="[
+              {
+                label: 'Delete folder',
+                icon: 'i-lucide-trash-2',
+                disabled: busy,
+                onSelect: () => emit('removeFolder', group.name),
+              },
+            ]"
+          >
+            <UButton
+              color="neutral"
+              variant="ghost"
+              :disabled="busy"
+              class="h-8.5 w-full justify-start gap-2 rounded-lg py-0 pr-2 pl-1.5 text-[13px] font-normal text-highlighted hover:bg-(--gray-400)"
+              :aria-expanded="isExpanded(group.name)"
+              @click="toggleFolder(group.name)"
+            >
+              <UIcon
+                name="i-lucide-chevron-right"
+                class="size-3 shrink-0 text-dimmed transition-transform duration-220 motion-reduce:transition-none"
+                :class="isExpanded(group.name) && 'rotate-90'"
+              />
+              <UIcon
+                name="i-lucide-folder"
+                class="size-4 shrink-0 text-muted"
+              />
+              <span class="min-w-0 flex-1 truncate text-left">{{ group.name }}</span>
+              <span class="text-xs text-dimmed tabular-nums">{{ group.automations.length }}</span>
+            </UButton>
+          </UContextMenu>
+          <div
+            class="grid transition-[grid-template-rows] duration-220 ease-[cubic-bezier(.2,0,0,1)] motion-reduce:transition-none"
+            :class="isExpanded(group.name) ? 'grid-rows-[1fr]' : 'grid-rows-[0fr]'"
+            :inert="!isExpanded(group.name)"
+            :aria-hidden="!isExpanded(group.name)"
+          >
+            <div class="flex min-h-0 flex-col gap-0.5 overflow-hidden">
+              <UButton
+                v-for="automation in group.automations"
+                :key="automation.id"
+                color="neutral"
+                variant="ghost"
+                :disabled="busy"
+                class="h-8 w-full shrink-0 justify-start gap-2 rounded-lg py-0 px-2 text-[13px] font-normal hover:bg-(--gray-400) hover:text-highlighted"
+                :class="
+                  automation.id === currentId
+                    ? 'bg-(--gray-400) text-highlighted'
+                    : 'text-(--gray-1000)'
+                "
+                :aria-current="automation.id === currentId ? 'page' : undefined"
+                :title="automation.name"
+                @click="emit('select', automation.id)"
+              >
+                <UIcon
+                  :name="automation.active ? 'i-lucide-zap' : 'i-lucide-workflow'"
+                  class="size-3.5 shrink-0 text-muted"
+                />
+                <span class="min-w-0 truncate">{{ automation.name }}</span>
+              </UButton>
+              <p
+                v-if="!group.automations.length"
+                class="flex h-8 items-center pr-2 pl-7.5 text-[13px] text-dimmed"
+              >
+                No automations yet
+              </p>
+            </div>
+          </div>
+        </div>
+        <UButton
+          v-for="automation in loose"
+          :key="automation.id"
+          color="neutral"
+          variant="ghost"
+          :disabled="busy"
+          class="h-8 w-full shrink-0 justify-start gap-2 rounded-lg py-0 pr-2 pl-6.5 text-[13px] font-normal hover:bg-(--gray-400) hover:text-highlighted"
+          :class="
+            automation.id === currentId ? 'bg-(--gray-400) text-highlighted' : 'text-(--gray-1000)'
+          "
+          :aria-current="automation.id === currentId ? 'page' : undefined"
+          :title="automation.name"
+          @click="emit('select', automation.id)"
+        >
+          <UIcon
+            :name="automation.active ? 'i-lucide-zap' : 'i-lucide-workflow'"
+            class="size-3.5 shrink-0 text-muted"
+          />
+          <span class="min-w-0 truncate">{{ automation.name }}</span>
+        </UButton>
+      </nav>
+    </div>
+  </aside>
+</template>

package/runtime/components/AutomationStatusIcon.vue

@@ -0,0 +1,44 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+import { getStatusColor, type DisplayStatus } from '../shared/automation-run'
+
+const { status } = defineProps<{ status?: DisplayStatus }>()
+const path = computed(() => {
+  switch (status) {
+    case 'running':
+      return 'M21 12a9 9 0 1 1-6.2-8.6'
+    case 'succeeded':
+      return 'M22 11.1V12a10 10 0 1 1-5.9-9.1M22 4 12 14l-3-3'
+    case 'failed':
+      return 'M12 22a10 10 0 1 0 0-20 10 10 0 0 0 0 20ZM15 9l-6 6M9 9l6 6'
+    case 'retry':
+      return 'M3 12a9 9 0 1 0 3-6.7L3 8M3 3v5h5'
+    case 'skipped':
+      return 'M5 12h14'
+    default:
+      return 'M12 21a9 9 0 1 0 0-18 9 9 0 0 0 0 18Z'
+  }
+})
+</script>
+
+<template>
+  <svg
+    viewBox="0 0 24 24"
+    fill="none"
+    stroke="currentColor"
+    stroke-width="2"
+    stroke-linecap="round"
+    stroke-linejoin="round"
+    aria-hidden="true"
+    class="shrink-0 transition-colors duration-200 motion-reduce:transition-none"
+    :class="[
+      status === 'skipped' || status === 'queued' || !status
+        ? 'text-(--gray-700)'
+        : getStatusColor(status),
+      (status === 'running' || status === 'retry') &&
+        'animate-[spin_0.9s_linear_infinite] motion-reduce:animate-none',
+    ]"
+  >
+    <path :d="path" />
+  </svg>
+</template>