feat(app): add tree list to spec page

packages/app/src/specs/DirectoryItem.vue

@@ -13,11 +13,16 @@
       <span
         v-if="idx !== directories.length - 1"
         class="font-medium text-gray-800 px-4px"
-      >/</span>
+      >
+        /
+      </span>
     </template>
   </div>
 </template>
 
 <script lang="ts" setup>
-defineProps<{ directories: string[], expanded: boolean }>()
+defineProps<{
+  directories: string[]
+  expanded: boolean
+}>()
 </script>

packages/app/src/specs/InlineSpecList.vue

@@ -5,7 +5,7 @@
       v-model:search="search"
     />
     <div class="h-[calc(100vh-65px)] overflow-y-auto overflow-x-hidden pt-16px">
-      <template v-if="tab === 'file-list'">
+      <template v-if="tab === 'flat'">
         <InlineSpecListRow
           v-for="spec in specs"
           :key="spec.node.id"
@@ -30,6 +30,7 @@ import { useSpecStore } from '../store'
 import InlineSpecListHeader from './InlineSpecListHeader.vue'
 import InlineSpecListRow from './InlineSpecListRow.vue'
 import InlineSpecListTree from './InlineSpecListTree.vue'
+import type { SpecViewType } from './SpecsList.vue'
 
 gql`
 fragment SpecNode_InlineSpecList on SpecEdge {
@@ -40,8 +41,10 @@ fragment SpecNode_InlineSpecList on SpecEdge {
     absolute
     relative
     baseName
+    specFileExtension
+    fileExtension
+    fileName
   }
-  ...SpecListRow
 }
 `
 
@@ -67,7 +70,7 @@ const isCurrentSpec = (spec: SpecNode_InlineSpecListFragment) => {
   return spec.node.relative === specStore.activeSpec?.relative
 }
 
-const tab = ref('file-list')
+const tab = ref<SpecViewType>('flat')
 const search = ref('')
 
 const specs = computed(() => {

packages/app/src/specs/InlineSpecListHeader.spec.tsx

@@ -1,10 +1,11 @@
 import InlineSpecListHeader from './InlineSpecListHeader.vue'
+import type { SpecViewType } from './SpecsList.vue'
 import { ref } from 'vue'
 
 describe('InlineSpecListHeader', () => {
   beforeEach(() => {
     const search = ref('')
-    const tab = ref('file-list')
+    const tab = ref<SpecViewType>('flat')
     const onAddSpec = cy.spy().as('new-spec')
 
     cy.wrap(search).as('search')
@@ -16,7 +17,7 @@ describe('InlineSpecListHeader', () => {
         search.value = val
       },
       tab: tab.value,
-      'onUpdate:tab': (val: string) => {
+      'onUpdate:tab': (val: SpecViewType) => {
         tab.value = val
       },
       onAddSpec,
@@ -39,7 +40,7 @@ describe('InlineSpecListHeader', () => {
   it('should toggle radio group', () => {
     cy.get('[data-cy="file-tree-radio-option"]')
     .click()
-    .get('@tab').its('value').should('eq', 'file-tree')
+    .get('@tab').its('value').should('eq', 'tree')
   })
 
   it('should emit add spec', () => {

packages/app/src/specs/InlineSpecListHeader.vue

@@ -24,42 +24,13 @@
         @input="onInput"
       >
     </div>
-    <RadioGroup
+
+    <SelectSpecListView
       :model-value="tab"
       class="flex border-1 border-gray-900 rounded-md h-24px w-64px text-md cursor-pointer"
-      @update:model-value="emit('update:tab', $event)"
-    >
-      <RadioGroupOption
-        v-slot="{ checked }"
-        as="template"
-        value="file-list"
-        data-cy="file-list-radio-option"
-      >
-        <div
-          class="flex flex-1 items-center justify-center outline-none"
-          :class="{ 'bg-gray-900': checked }"
-        >
-          <i-cy-file-list
-            :class="checked ? 'icon-dark-gray-200' : 'icon-dark-gray-700'"
-          />
-        </div>
-      </RadioGroupOption>
-      <RadioGroupOption
-        v-slot="{ checked }"
-        as="template"
-        value="file-tree"
-        data-cy="file-tree-radio-option"
-      >
-        <div
-          class="flex flex-1 items-center justify-center outline-none"
-          :class="{ 'bg-gray-900': checked }"
-        >
-          <i-cy-file-tree
-            :class="checked ? 'icon-dark-gray-200' : 'icon-dark-gray-700'"
-          />
-        </div>
-      </RadioGroupOption>
-    </RadioGroup>
+      @update:tab="updateTab"
+    />
+
     <button
       class="
         border-1 border-gray-900
@@ -84,16 +55,24 @@
 import Input from '@cy/components/Input.vue'
 import Button from '@cy/components/Button.vue'
 import { ref } from 'vue'
-import { RadioGroup, RadioGroupOption } from '@headlessui/vue'
+import SelectSpecListView from './SelectSpecListView.vue'
+import type { SpecViewType } from './SpecsList.vue'
 
-defineProps<{tab: string, search: string}>()
+defineProps<{
+  tab: SpecViewType
+  search: string
+}>()
 
 const emit = defineEmits<{
-  (e: 'update:tab', tab: string): void
+  (e: 'update:tab', tab: SpecViewType): void
   (e: 'update:search', search: string): void
   (e: 'addSpec'): void
 }>()
 
+const updateTab = (tab: SpecViewType) => {
+  emit('update:tab', tab)
+}
+
 const inputFocused = ref(false)
 
 const onInput = (e: Event) => {

packages/app/src/specs/InlineSpecListTree.vue

@@ -31,7 +31,7 @@
         :file-name="row.data?.fileName || row.value"
         :extension="row.data?.specFileExtension || ''"
         :selected="isCurrentSpec(row.data)"
-        class="ml-22px"
+        class="pl-22px"
       />
       <DirectoryItem
         v-else

packages/app/src/specs/RowDirectory.vue

@@ -0,0 +1,45 @@
+<template>
+  <div
+    class="h-full grid grid-cols-[14px,16px,auto] items-center gap-8px"
+    :data-cy="`row-directory-depth-${depth}`"
+  >
+    <i-cy-chevron-down-small_x16
+      class="
+        icon-dark-gray-300 mr-8px text-sm
+        group-hocus:(icon-dark-gray-700)
+      "
+      :class="{'transform rotate-270': !expanded}"
+    />
+    <component
+      :is="IconFolder"
+      class="icon-dark-gray-50 icon-light-gray-200 document-icon"
+    />
+
+    <div>
+      <template
+        v-for="(directory, idx) in directories || []"
+        :key="directory"
+      >
+        <span class="font-medium text-gray-600 px-4px">
+          {{ directory }}
+        </span>
+        <span
+          v-if="idx !== directories.length - 1"
+          class="text-gray-700 px-2px"
+        >
+          /
+        </span>
+      </template>
+    </div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import IconFolder from '~icons/cy/folder_x16.svg'
+
+defineProps<{
+  directories: string[]
+  expanded: boolean
+  depth: number
+}>()
+</script>

packages/app/src/specs/SelectSpecListView.vue

@@ -0,0 +1,51 @@
+<template>
+  <RadioGroup
+    :model-value="modelValue"
+    class="flex border-1 border-gray-900 rounded-md h-24px w-64px text-md cursor-pointer"
+    @update:model-value="val => emit('update:tab', val)"
+  >
+    <RadioGroupOption
+      v-slot="{ checked }"
+      as="template"
+      value="flat"
+      data-cy="file-list-radio-option"
+    >
+      <div
+        class="flex flex-1 items-center justify-center outline-none"
+        :class="{ 'bg-gray-900': checked }"
+      >
+        <i-cy-file-list
+          :class="checked ? 'icon-dark-gray-200' : 'icon-dark-gray-700'"
+        />
+      </div>
+    </RadioGroupOption>
+    <RadioGroupOption
+      v-slot="{ checked }"
+      as="template"
+      value="tree"
+      data-cy="file-tree-radio-option"
+    >
+      <div
+        class="flex flex-1 items-center justify-center outline-none"
+        :class="{ 'bg-gray-900': checked }"
+      >
+        <i-cy-file-tree
+          :class="checked ? 'icon-dark-gray-200' : 'icon-dark-gray-700'"
+        />
+      </div>
+    </RadioGroupOption>
+  </RadioGroup>
+</template>
+
+<script lang="ts" setup>
+import { RadioGroup, RadioGroupOption } from '@headlessui/vue'
+import type { SpecViewType } from './SpecsList.vue'
+
+defineProps<{
+  modelValue: SpecViewType
+}>()
+
+const emit = defineEmits<{
+  (e: 'update:tab', tab: SpecViewType): void
+}>()
+</script>

packages/app/src/specs/SpecItem.vue

@@ -0,0 +1,30 @@
+<template>
+  <div
+    class="h-full grid grid-cols-[16px,auto,auto] items-center gap-8px"
+    data-cy="spec-item"
+  >
+    <component
+      :is="DocumentIconBlank"
+      class="icon-light-gray-50 icon-dark-gray-200 document-icon"
+    />
+
+    <div
+      class="text-gray-400 text-indigo-500 group-hocus:text-indigo-500"
+      :title="`${spec.fileName}${spec.specFileExtension}`"
+    >
+      <span class="font-medium text-indigo-500 group-hocus:text-indigo-500">{{ spec.fileName }}</span>
+      <span class="font-light group-hocus:text-indigo-500">{{ spec.specFileExtension }}</span>
+    </div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import DocumentIconBlank from '~icons/cy/document-blank_x16'
+
+defineProps<{
+  spec: {
+    fileName: string
+    specFileExtension: string
+  }
+}>()
+</script>