From 0579ef6516a12f1c955be8e6b3f8a0f131a193e2 Mon Sep 17 00:00:00 2001
From: Lachlan Miller <lachlan.miller.1990@outlook.com>
Date: Mon, 15 Nov 2021 22:02:38 +1000
Subject: [PATCH 1/7] add tree list to spec page

---
 packages/app/src/specs/DirectoryItem.vue      |   9 +-
 packages/app/src/specs/InlineSpecList.vue     |   9 +-
 .../app/src/specs/InlineSpecListHeader.vue    |  53 ++-----
 packages/app/src/specs/RowDirectory.vue       |  32 ++++
 packages/app/src/specs/SelectSpecListView.vue |  51 +++++++
 packages/app/src/specs/SpecItem.vue           |  27 ++++
 packages/app/src/specs/SpecListGitInfo.vue    |  98 ++++++++++++
 packages/app/src/specs/SpecsList.vue          | 143 +++++++++++++++---
 packages/app/src/specs/SpecsListRowItem.vue   |  16 ++
 9 files changed, 371 insertions(+), 67 deletions(-)
 create mode 100644 packages/app/src/specs/RowDirectory.vue
 create mode 100644 packages/app/src/specs/SelectSpecListView.vue
 create mode 100644 packages/app/src/specs/SpecItem.vue
 create mode 100644 packages/app/src/specs/SpecListGitInfo.vue
 create mode 100644 packages/app/src/specs/SpecsListRowItem.vue

diff --git a/packages/app/src/specs/DirectoryItem.vue b/packages/app/src/specs/DirectoryItem.vue
index c6469490d8b..3129016eb03 100644
--- a/packages/app/src/specs/DirectoryItem.vue
+++ b/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>
diff --git a/packages/app/src/specs/InlineSpecList.vue b/packages/app/src/specs/InlineSpecList.vue
index 9ef7b367bca..00b32cb04a7 100644
--- a/packages/app/src/specs/InlineSpecList.vue
+++ b/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(() => {
diff --git a/packages/app/src/specs/InlineSpecListHeader.vue b/packages/app/src/specs/InlineSpecListHeader.vue
index 38a523c07dd..468aa5536c3 100644
--- a/packages/app/src/specs/InlineSpecListHeader.vue
+++ b/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) => {
diff --git a/packages/app/src/specs/RowDirectory.vue b/packages/app/src/specs/RowDirectory.vue
new file mode 100644
index 00000000000..b7f59dca425
--- /dev/null
+++ b/packages/app/src/specs/RowDirectory.vue
@@ -0,0 +1,32 @@
+<template>
+  <div class="h-full grid grid-cols-[16px,auto,auto] items-center gap-10px">
+    <component
+      :is="IconFolder"
+      class="icon-light-gray-50 icon-dark-gray-200 document-icon"
+      :class="{'transform rotate-270': !expanded}"
+    />
+    <div>
+      <template
+        v-for="(directory, idx) in directories || []"
+        :key="directory"
+      >
+        <span>{{ directory }}</span>
+        <span
+          v-if="idx !== directories.length - 1"
+          class="font-medium text-gray-800 px-4px"
+        >
+          /
+        </span>
+      </template>
+    </div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import IconFolder from '~icons/cy/folder-outline_x24.svg'
+
+defineProps<{
+  directories: string[]
+  expanded: boolean
+}>()
+</script>
diff --git a/packages/app/src/specs/SelectSpecListView.vue b/packages/app/src/specs/SelectSpecListView.vue
new file mode 100644
index 00000000000..539aab43751
--- /dev/null
+++ b/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>
diff --git a/packages/app/src/specs/SpecItem.vue b/packages/app/src/specs/SpecItem.vue
new file mode 100644
index 00000000000..e569e203acc
--- /dev/null
+++ b/packages/app/src/specs/SpecItem.vue
@@ -0,0 +1,27 @@
+<template>
+  <div class="h-full grid grid-cols-[16px,auto,auto] items-center gap-10px">
+    <component
+      :is="DocumentIconBlank"
+      class="icon-light-gray-50 icon-dark-gray-200 document-icon"
+    />
+
+    <div
+      class="text-gray-400 group-hocus:text-indigo-500"
+      :title="`${spec.fileName}${spec.specFileExtension}`"
+    >
+      <span class="font-medium text-gray-700 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>
diff --git a/packages/app/src/specs/SpecListGitInfo.vue b/packages/app/src/specs/SpecListGitInfo.vue
new file mode 100644
index 00000000000..40f31ef6885
--- /dev/null
+++ b/packages/app/src/specs/SpecListGitInfo.vue
@@ -0,0 +1,98 @@
+<template>
+  <div class="h-full grid git-info-row grid-cols-[16px,auto] items-center gap-9px">
+    <span class="flex items-center justify-center w-16px">
+      <span
+        v-if="fileState !== 'unmodified'"
+        class="rounded-full min-w-6px max-w-6px min-h-6px max-h-6px border-1"
+        :class="classes?.indicator"
+      />
+      <IconGithub
+        v-else
+        class="min-w-16px max-w-16px min-h-16px icon-dark-gray-300 group-hocus:icon-dark-indigo-500 max-h-16px"
+      />
+    </span>
+    <div
+      class="overflow-hidden truncate"
+      :class="classes?.gitText"
+    >
+      {{ gitInfoText }}
+    </div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { gql } from '@urql/core'
+import type { SpecListRowFragment } from '../generated/graphql'
+import { computed } from 'vue'
+import { useTimeAgo } from '@vueuse/core'
+import { useI18n } from '@cy/i18n'
+import DocumentIconPlus from '~icons/cy/document-plus_x16'
+import DocumentIconPlusMinus from '~icons/cy/document-plus-minus_x16'
+import DocumentIconMinus from '~icons/cy/document-minus_x16'
+import IconGithub from '~icons/cy/github'
+
+const { t } = useI18n()
+
+gql`
+fragment SpecListRow on GitInfo {
+  lastModifiedTimestamp
+  author
+}
+`
+
+const props = defineProps<{
+  gql: SpecListRowFragment
+}>()
+
+const gitInfo = computed(() => props.gql)
+const timeAgo = useTimeAgo(gitInfo.value.lastModifiedTimestamp || '')
+
+// TODO: File state needs to come from git,
+// but the data context doesn't contain this info yet
+const fileState = computed(() => gitInfo.value ? 'unmodified' : 'modified')
+
+const classes = computed(() => {
+  return {
+    created: {
+      indicator: 'border-jade-400 bg-jade-300',
+      gitText: 'text-jade-500',
+      icon: DocumentIconPlus,
+      iconClasses: 'icon-dark-jade-400 icon-light-jade-50',
+    },
+    modified: {
+      indicator: 'border-orange-400 bg-orange-300',
+      gitText: 'text-orange-500',
+      icon: DocumentIconPlusMinus,
+      iconClasses: 'icon-dark-orange-400 icon-light-orange-50',
+    },
+    unmodified: {
+      indicator: 'border-transparent bg-transparent',
+      gitText: 'text-gray-600 group-hocus:text-indigo-500',
+    },
+    deleted: {
+      indicator: 'border-red-400 bg-red-300',
+      gitText: 'text-red-500',
+      iconClasses: 'icon-dark-red-400 icon-light-red-50',
+      icon: DocumentIconMinus,
+    },
+  }[fileState.value]
+})
+
+const gitInfoText = computed(() => {
+  if (fileState.value === 'unmodified') {
+    // Modified x days ago by AuthorName
+    return t('specPage.rows.gitInfoWithAuthor', {
+      fileState: t('file.git.modified'),
+      timeAgo: timeAgo.value,
+      author: gitInfo.value.author,
+    })
+  }
+
+  // TODO: implement the backend for git to report this info
+  // Created|Deleted|Modified x days ago by AuthorName
+  return t('specPage.rows.gitInfo', {
+    fileState: t(`file.git.${fileState.value}`),
+    timeAgo: timeAgo.value,
+  })
+})
+</script>
diff --git a/packages/app/src/specs/SpecsList.vue b/packages/app/src/specs/SpecsList.vue
index 8e6fa7e16bd..adf2c2ac55b 100644
--- a/packages/app/src/specs/SpecsList.vue
+++ b/packages/app/src/specs/SpecsList.vue
@@ -11,31 +11,100 @@
       class="pb-32px"
       @newSpec="showModal = true"
     />
+
     <div class="grid items-center divide-y-1 children:h-40px">
       <div class="grid grid-cols-2 children:text-gray-800 children:font-medium">
-        <div>{{ t('specPage.componentSpecsHeader') }}</div>
-        <div>{{ t('specPage.gitStatusHeader') }}</div>
+        <div class="flex justify-between items-center">
+          {{ t('specPage.componentSpecsHeader') }}
+        </div>
+        <div class="flex justify-between items-center">
+          <div>{{ t('specPage.gitStatusHeader') }}</div>
+          <SelectSpecListView
+            :model-value="specViewType"
+            class="flex border-1 border-gray-900 rounded-md h-24px w-64px text-md cursor-pointer"
+            @update:tab="updateTab"
+          />
+        </div>
       </div>
-      <RouterLink
-        v-for="spec in filteredSpecs"
-        :key="spec.node.id"
-        class="text-left"
-        :to="{ path: 'runner', query: { file: spec.node.relative } }"
-      >
-        <SpecsListRow :gql="spec" />
-      </RouterLink>
+
+      <template v-if="specViewType === 'flat'">
+        <RouterLink
+          v-for="spec in flatSpecList"
+          :key="spec.node.id"
+          class="text-left"
+          :to="{ path: 'runner', query: { file: spec.node.relative } }"
+        >
+          <SpecsListRowItem>
+            <template #file>
+              <SpecItem :spec="spec.node" />
+            </template>
+
+            <template #git-info>
+              <SpecListGitInfo
+                v-if="spec.node.gitInfo"
+                :gql="spec.node.gitInfo"
+              />
+            </template>
+          </SpecsListRowItem>
+        </RouterLink>
+      </template>
+
+      <template v-if="specViewType === 'tree'">
+        <template
+          v-for="(row, idx) in treeSpecList"
+          :key="idx"
+        >
+          <SpecsListRowItem>
+            <template #file>
+              <RouterLink
+                v-if="row.isLeaf && row.data"
+                :key="row.data.absolute"
+                :to="{ path: 'runner', query: { file: row.data?.relative } }"
+              >
+                <SpecItem
+                  :spec="row.data"
+                  :style="{ paddingLeft: `${((row.depth - 2) * 20) + 16}px` }"
+                />
+              </RouterLink>
+
+              <RowDirectory
+                v-else
+                :directories="row.value.split('/')"
+                :expanded="row.expanded.value"
+                :style="{ paddingLeft: `${((row.depth - 2) * 20) + 16}px` }"
+                @click="row.toggle"
+              />
+            </template>
+
+            <template #git-info>
+              <SpecListGitInfo
+                v-if="row.data?.gitInfo"
+                :gql="row.data.gitInfo"
+              />
+            </template>
+          </SpecsListRowItem>
+        </template>
+      </template>
     </div>
   </div>
 </template>
 
 <script setup lang="ts">
 import SpecsListHeader from './SpecsListHeader.vue'
-import SpecsListRow from './SpecsListRow.vue'
+import SpecListGitInfo from './SpecListGitInfo.vue'
+import SpecsListRowItem from './SpecsListRowItem.vue'
 import { gql } from '@urql/vue'
 import { computed, ref } from 'vue'
 import CreateSpecModal from './CreateSpecModal.vue'
-import type { Specs_SpecsListFragment, SpecNode_SpecsListFragment } from '../generated/graphql'
+import type { Specs_SpecsListFragment, SpecListRowFragment } from '../generated/graphql'
 import { useI18n } from '@cy/i18n'
+import { buildSpecTree } from '@packages/frontend-shared/src/utils/buildSpecTree'
+import { useCollapsibleTree } from '@packages/frontend-shared/src/composables/useCollapsibleTree'
+import RowDirectory from './RowDirectory.vue'
+import SpecItem from './SpecItem.vue'
+import type { FoundSpec } from '@packages/types/src'
+import SelectSpecListView from './SelectSpecListView.vue'
+import { includes } from 'lodash'
 
 const { t } = useI18n()
 
@@ -46,9 +115,15 @@ fragment SpecNode_SpecsList on SpecEdge {
     name
     specType
     absolute
+    baseName
+    fileName
+    specFileExtension
+    fileExtension
     relative
+    gitInfo {
+      ...SpecListRow
+    }
   }
-  ...SpecListRow
 }
 `
 
@@ -67,24 +142,42 @@ fragment Specs_SpecsList on Query {
 }
 `
 
+export type SpecViewType = 'flat' | 'tree'
+
 const props = defineProps<{
   gql: Specs_SpecsListFragment
 }>()
 
 const showModal = ref(false)
 const search = ref('')
-const specs = computed(() => props.gql.currentProject?.specs?.edges)
-
-// If this search becomes any more complex, push it into the server
-const sortByGitStatus = (
-  a: SpecNode_SpecsListFragment,
-  b: SpecNode_SpecsListFragment,
-) => {
-  return a.node.gitInfo ? 1 : -1
+const specViewType = ref<SpecViewType>('flat')
+
+const updateTab = (tab: SpecViewType) => {
+  specViewType.value = tab
 }
-const filteredSpecs = computed(() => {
-  return specs.value?.filter((s) => {
-    return s.node.relative.toLowerCase().includes(search.value.toLowerCase())
-  })?.sort(sortByGitStatus)
+
+const flatSpecList = computed(() => {
+  if (search.value) {
+    return props.gql.currentProject?.specs?.edges.filter((x) => x.node.absolute.toLowerCase().includes(search.value.toLowerCase()))
+  }
+
+  return props.gql.currentProject?.specs?.edges
+})
+
+const specTree = computed(() => buildSpecTree<FoundSpec & { gitInfo: SpecListRowFragment }>(props.gql.currentProject?.specs?.edges.map((x) => x.node) || []))
+const collapsible = useCollapsibleTree(specTree.value, { dropRoot: true })
+
+const treeSpecList = computed(() => {
+  if (search.value) {
+    // todo(lachlan) this will not show the folders of the filtered specs
+    // we should update the useCollapsibleTree to have some kind of search
+    // functionality, ideally with fuzzysort, that correctly returns the matched
+    // specs and the directories to show.
+    return collapsible.tree.filter(((item) => {
+      return !item.hidden.value && item.data?.absolute.toLowerCase().includes(search.value.toLowerCase())
+    }))
+  }
+
+  return collapsible.tree.filter(((item) => !item.hidden.value))
 })
 </script>
diff --git a/packages/app/src/specs/SpecsListRowItem.vue b/packages/app/src/specs/SpecsListRowItem.vue
new file mode 100644
index 00000000000..f3f022f0f59
--- /dev/null
+++ b/packages/app/src/specs/SpecsListRowItem.vue
@@ -0,0 +1,16 @@
+<template>
+  <div
+    class="grid grid-cols-2 outline-none children:cursor-pointer group h-full"
+    data-testid="specs-list-row"
+    role="link"
+    tabindex="0"
+  >
+    <div>
+      <slot name="file" />
+    </div>
+
+    <div>
+      <slot name="git-info" />
+    </div>
+  </div>
+</template>

From 0886bdc100480dddf5c3a3e748044b4c1d58b50f Mon Sep 17 00:00:00 2001
From: Lachlan Miller <lachlan.miller.1990@outlook.com>
Date: Mon, 15 Nov 2021 22:19:41 +1000
Subject: [PATCH 2/7] styles

---
 packages/app/src/specs/RowDirectory.vue | 17 +++++++++++++----
 packages/app/src/specs/SpecItem.vue     |  4 ++--
 2 files changed, 15 insertions(+), 6 deletions(-)

diff --git a/packages/app/src/specs/RowDirectory.vue b/packages/app/src/specs/RowDirectory.vue
index b7f59dca425..83fcd7607b6 100644
--- a/packages/app/src/specs/RowDirectory.vue
+++ b/packages/app/src/specs/RowDirectory.vue
@@ -1,19 +1,28 @@
 <template>
-  <div class="h-full grid grid-cols-[16px,auto,auto] items-center gap-10px">
+  <div class="h-full grid grid-cols-[16px,16px,auto] items-center gap-10px">
+    <i-cy-chevron-down-small_x16
+      class="
+        icon-dark-gray-300 mr-8px
+        group-hocus:(icon-dark-gray-700)
+      "
+      :class="{'transform rotate-270': !expanded}"
+    />
     <component
       :is="IconFolder"
       class="icon-light-gray-50 icon-dark-gray-200 document-icon"
-      :class="{'transform rotate-270': !expanded}"
     />
+
     <div>
       <template
         v-for="(directory, idx) in directories || []"
         :key="directory"
       >
-        <span>{{ directory }}</span>
+        <span class="font-medium text-gray-600 px-4px">
+          {{ directory }}
+        </span>
         <span
           v-if="idx !== directories.length - 1"
-          class="font-medium text-gray-800 px-4px"
+          class="text-gray-700 px-2px"
         >
           /
         </span>
diff --git a/packages/app/src/specs/SpecItem.vue b/packages/app/src/specs/SpecItem.vue
index e569e203acc..6c6ca72c4c6 100644
--- a/packages/app/src/specs/SpecItem.vue
+++ b/packages/app/src/specs/SpecItem.vue
@@ -6,10 +6,10 @@
     />
 
     <div
-      class="text-gray-400 group-hocus:text-indigo-500"
+      class="text-gray-400 text-indigo-500 group-hocus:text-indigo-500"
       :title="`${spec.fileName}${spec.specFileExtension}`"
     >
-      <span class="font-medium text-gray-700 group-hocus:text-indigo-500">{{ spec.fileName }}</span>
+      <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>

From 1171a722ba9219d9d9c6a7d2ea28070dfc708905 Mon Sep 17 00:00:00 2001
From: Lachlan Miller <lachlan.miller.1990@outlook.com>
Date: Mon, 15 Nov 2021 22:42:27 +1000
Subject: [PATCH 3/7] add test

---
 packages/app/src/specs/RowDirectory.vue   |   6 +-
 packages/app/src/specs/SpecItem.vue       |   5 +-
 packages/app/src/specs/SpecsList.spec.tsx |  12 ++
 packages/app/src/specs/SpecsList.vue      |   1 +
 packages/app/src/specs/SpecsListRow.vue   | 135 ----------------------
 5 files changed, 22 insertions(+), 137 deletions(-)
 delete mode 100644 packages/app/src/specs/SpecsListRow.vue

diff --git a/packages/app/src/specs/RowDirectory.vue b/packages/app/src/specs/RowDirectory.vue
index 83fcd7607b6..c3b94c9521f 100644
--- a/packages/app/src/specs/RowDirectory.vue
+++ b/packages/app/src/specs/RowDirectory.vue
@@ -1,5 +1,8 @@
 <template>
-  <div class="h-full grid grid-cols-[16px,16px,auto] items-center gap-10px">
+  <div
+    class="h-full grid grid-cols-[16px,16px,auto] items-center gap-10px"
+    :data-cy="`row-directory-depth-${depth}`"
+  >
     <i-cy-chevron-down-small_x16
       class="
         icon-dark-gray-300 mr-8px
@@ -37,5 +40,6 @@ import IconFolder from '~icons/cy/folder-outline_x24.svg'
 defineProps<{
   directories: string[]
   expanded: boolean
+  depth: number
 }>()
 </script>
diff --git a/packages/app/src/specs/SpecItem.vue b/packages/app/src/specs/SpecItem.vue
index 6c6ca72c4c6..cba6e679ab4 100644
--- a/packages/app/src/specs/SpecItem.vue
+++ b/packages/app/src/specs/SpecItem.vue
@@ -1,5 +1,8 @@
 <template>
-  <div class="h-full grid grid-cols-[16px,auto,auto] items-center gap-10px">
+  <div
+    class="h-full grid grid-cols-[16px,auto,auto] items-center gap-10px"
+    data-cy="spec-item"
+  >
     <component
       :is="DocumentIconBlank"
       class="icon-light-gray-50 icon-dark-gray-200 document-icon"
diff --git a/packages/app/src/specs/SpecsList.spec.tsx b/packages/app/src/specs/SpecsList.spec.tsx
index bd8187aa73c..98d46d64f77 100644
--- a/packages/app/src/specs/SpecsList.spec.tsx
+++ b/packages/app/src/specs/SpecsList.spec.tsx
@@ -65,4 +65,16 @@ describe('<SpecsList />', { keystrokeDelay: 0 }, () => {
     .and('contain.text', specs[0].node.fileExtension)
     .click()
   })
+
+  it('changes to tree view', () => {
+    cy.get('[data-cy="file-tree-radio-option"]').click()
+
+    // close all directories
+    ;['src', 'packages', 'frontend', '__test__', 'lib', 'tests'].forEach((dir) => {
+      cy.get('[data-cy="row-directory-depth-0"]').contains(dir).click()
+    })
+
+    // all directories closed; no specs should be showing.
+    cy.get('[data-cy="spec-item"]').should('not.exist')
+  })
 })
diff --git a/packages/app/src/specs/SpecsList.vue b/packages/app/src/specs/SpecsList.vue
index adf2c2ac55b..bd323bc9769 100644
--- a/packages/app/src/specs/SpecsList.vue
+++ b/packages/app/src/specs/SpecsList.vue
@@ -71,6 +71,7 @@
                 v-else
                 :directories="row.value.split('/')"
                 :expanded="row.expanded.value"
+                :depth="row.depth - 2"
                 :style="{ paddingLeft: `${((row.depth - 2) * 20) + 16}px` }"
                 @click="row.toggle"
               />
diff --git a/packages/app/src/specs/SpecsListRow.vue b/packages/app/src/specs/SpecsListRow.vue
deleted file mode 100644
index b26d2941de3..00000000000
--- a/packages/app/src/specs/SpecsListRow.vue
+++ /dev/null
@@ -1,135 +0,0 @@
-<template>
-  <div
-    class="grid grid-cols-2 outline-none children:cursor-pointer group h-full"
-    data-testid="specs-list-row"
-    role="link"
-    tabindex="0"
-  >
-    <div class="grid grid-cols-[16px,auto,auto] items-center gap-10px">
-      <component
-        :is="icon.component"
-        :class="icon.classes"
-      />
-      <div
-        class="overflow-hidden truncate text-gray-400 group-hocus:text-indigo-500"
-        :title="`${spec.fileName}${spec.specFileExtension}`"
-      >
-        <span class="font-medium text-gray-700 group-hocus:text-indigo-500">{{ spec.fileName }}</span>
-        <span class="font-light group-hocus:text-indigo-500">{{ spec.specFileExtension }}</span>
-      </div>
-    </div>
-    <div class="grid git-info-row grid-cols-[16px,auto] items-center gap-9px">
-      <span class="flex items-center justify-center w-16px">
-        <span
-          v-if="fileState !== 'unmodified'"
-          class="rounded-full min-w-6px max-w-6px min-h-6px max-h-6px border-1"
-          :class="classes?.indicator"
-        />
-        <IconGithub
-          v-else
-          class="min-w-16px max-w-16px min-h-16px icon-dark-gray-300 group-hocus:icon-dark-indigo-500 max-h-16px"
-        />
-      </span>
-      <div
-        class="overflow-hidden truncate"
-        :class="classes?.gitText"
-      >
-        {{ gitInfoText }}
-      </div>
-    </div>
-  </div>
-</template>
-
-<script lang="ts" setup>
-import { gql } from '@urql/core'
-import type { SpecListRowFragment } from '../generated/graphql'
-import { computed } from 'vue'
-import { useTimeAgo } from '@vueuse/core'
-import { useI18n } from '@cy/i18n'
-import DocumentIconBlank from '~icons/cy/document-blank_x16'
-import DocumentIconPlus from '~icons/cy/document-plus_x16'
-import DocumentIconPlusMinus from '~icons/cy/document-plus-minus_x16'
-import DocumentIconMinus from '~icons/cy/document-minus_x16'
-import IconGithub from '~icons/cy/github'
-
-const { t } = useI18n()
-
-gql`
-fragment SpecListRow on SpecEdge {
-  node {
-    id
-    specFileExtension
-    fileExtension
-    fileName
-    gitInfo {
-      lastModifiedTimestamp
-      author
-    }
-  }
-}
-`
-
-const props = defineProps<{
-  gql: SpecListRowFragment
-}>()
-
-const spec = computed(() => props.gql.node)
-const timeAgo = useTimeAgo(spec.value.gitInfo?.lastModifiedTimestamp || '')
-
-// TODO: File state needs to come from git,
-// but the data context doesn't contain this info yet
-const fileState = computed(() => spec.value.gitInfo ? 'unmodified' : 'modified')
-
-const classes = computed(() => {
-  return {
-    created: {
-      indicator: 'border-jade-400 bg-jade-300',
-      gitText: 'text-jade-500',
-      icon: DocumentIconPlus,
-      iconClasses: 'icon-dark-jade-400 icon-light-jade-50',
-    },
-    modified: {
-      indicator: 'border-orange-400 bg-orange-300',
-      gitText: 'text-orange-500',
-      icon: DocumentIconPlusMinus,
-      iconClasses: 'icon-dark-orange-400 icon-light-orange-50',
-    },
-    unmodified: {
-      indicator: 'border-transparent bg-transparent',
-      gitText: 'text-gray-600 group-hocus:text-indigo-500',
-    },
-    deleted: {
-      indicator: 'border-red-400 bg-red-300',
-      gitText: 'text-red-500',
-      iconClasses: 'icon-dark-red-400 icon-light-red-50',
-      icon: DocumentIconMinus,
-    },
-  }[fileState.value]
-})
-
-const icon = computed(() => {
-  return {
-    component: classes.value?.icon || DocumentIconBlank,
-    classes: classes.value?.iconClasses || 'icon-light-gray-50 icon-dark-gray-200',
-  }
-})
-
-const gitInfoText = computed(() => {
-  if (fileState.value === 'unmodified') {
-    // Modified x days ago by AuthorName
-    return t('specPage.rows.gitInfoWithAuthor', {
-      fileState: t('file.git.modified'),
-      timeAgo: timeAgo.value,
-      author: spec.value.gitInfo?.author,
-    })
-  }
-
-  // TODO: implement the backend for git to report this info
-  // Created|Deleted|Modified x days ago by AuthorName
-  return t('specPage.rows.gitInfo', {
-    fileState: t(`file.git.${fileState.value}`),
-    timeAgo: timeAgo.value,
-  })
-})
-
-</script>

From 6e033a2f204be3a12f016e90857f93f5299fa201 Mon Sep 17 00:00:00 2001
From: Lachlan Miller <lachlan.miller.1990@outlook.com>
Date: Mon, 15 Nov 2021 22:46:10 +1000
Subject: [PATCH 4/7] wip: lint

---
 packages/app/src/specs/SpecsList.vue | 1 -
 1 file changed, 1 deletion(-)

diff --git a/packages/app/src/specs/SpecsList.vue b/packages/app/src/specs/SpecsList.vue
index bd323bc9769..679d07b9b46 100644
--- a/packages/app/src/specs/SpecsList.vue
+++ b/packages/app/src/specs/SpecsList.vue
@@ -105,7 +105,6 @@ import RowDirectory from './RowDirectory.vue'
 import SpecItem from './SpecItem.vue'
 import type { FoundSpec } from '@packages/types/src'
 import SelectSpecListView from './SelectSpecListView.vue'
-import { includes } from 'lodash'
 
 const { t } = useI18n()
 

From bece30be7612f1f68f97d280f5dfca05ff184070 Mon Sep 17 00:00:00 2001
From: Lachlan Miller <lachlan.miller.1990@outlook.com>
Date: Mon, 15 Nov 2021 22:47:32 +1000
Subject: [PATCH 5/7] types

---
 .../frontend-shared/src/utils/buildSpecTree.ts     | 14 +++++++-------
 1 file changed, 7 insertions(+), 7 deletions(-)

diff --git a/packages/frontend-shared/src/utils/buildSpecTree.ts b/packages/frontend-shared/src/utils/buildSpecTree.ts
index 3ccc394b6ef..4286275d43c 100644
--- a/packages/frontend-shared/src/utils/buildSpecTree.ts
+++ b/packages/frontend-shared/src/utils/buildSpecTree.ts
@@ -1,14 +1,14 @@
 import type { FoundSpec } from '@packages/types'
 
-export type SpecTreeNode = {
+export type SpecTreeNode<T extends FoundSpec = FoundSpec> = {
   value: string
-  children: SpecTreeNode[]
+  children: SpecTreeNode<T>[]
   isLeaf: boolean
-  parent?: SpecTreeNode
-  data?: FoundSpec
+  parent?: SpecTreeNode<T>
+  data?: T
 }
 
-export function buildSpecTree (specs: FoundSpec[], root: SpecTreeNode = { value: '/', isLeaf: false, children: [] }) {
+export function buildSpecTree<T extends FoundSpec> (specs: FoundSpec[], root: SpecTreeNode<T> = { value: '/', isLeaf: false, children: [] }) {
   specs.forEach((spec) => buildSpecTreeRecursive(spec.relative, root, spec))
 
   collapseEmptyChildren(root)
@@ -16,7 +16,7 @@ export function buildSpecTree (specs: FoundSpec[], root: SpecTreeNode = { value:
   return root
 }
 
-export function buildSpecTreeRecursive (path: string, tree: SpecTreeNode, data?: FoundSpec) {
+export function buildSpecTreeRecursive<T extends FoundSpec> (path: string, tree: SpecTreeNode<T>, data?: T) {
   const [firstFile, ...rest] = path.split('/')
 
   if (rest.length < 1) {
@@ -40,7 +40,7 @@ export function buildSpecTreeRecursive (path: string, tree: SpecTreeNode, data?:
   return tree
 }
 
-function collapseEmptyChildren (node: SpecTreeNode) {
+function collapseEmptyChildren<T extends FoundSpec> (node: SpecTreeNode<T>) {
   for (const child of node.children) {
     collapseEmptyChildren(child)
   }

From 4e7a8b2a16f1fc838dc63675a6375995b687a7f0 Mon Sep 17 00:00:00 2001
From: Lachlan Miller <lachlan.miller.1990@outlook.com>
Date: Mon, 15 Nov 2021 22:54:08 +1000
Subject: [PATCH 6/7] types

---
 packages/app/src/specs/InlineSpecListHeader.spec.tsx | 7 ++++---
 packages/app/src/specs/SpecsList.spec.tsx            | 6 +++---
 2 files changed, 7 insertions(+), 6 deletions(-)

diff --git a/packages/app/src/specs/InlineSpecListHeader.spec.tsx b/packages/app/src/specs/InlineSpecListHeader.spec.tsx
index c041e3afb9a..3d7045e2d5a 100644
--- a/packages/app/src/specs/InlineSpecListHeader.spec.tsx
+++ b/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', () => {
diff --git a/packages/app/src/specs/SpecsList.spec.tsx b/packages/app/src/specs/SpecsList.spec.tsx
index 98d46d64f77..ddd0bae7648 100644
--- a/packages/app/src/specs/SpecsList.spec.tsx
+++ b/packages/app/src/specs/SpecsList.spec.tsx
@@ -1,11 +1,11 @@
 import SpecsList from './SpecsList.vue'
-import { Specs_SpecsListFragmentDoc, SpecListRowFragment } from '../generated/graphql-test'
+import { Specs_SpecsListFragmentDoc, SpecNode_SpecsListFragment } from '../generated/graphql-test'
 import { defaultMessages } from '@cy/i18n'
 
 const rowSelector = '[data-testid=specs-list-row]'
 const inputSelector = 'input'
 const fullFile = (s) => `${s.node.fileName}${s.node.specFileExtension}`
-const hasSpecText = (_node: JQuery<HTMLElement>, spec: SpecListRowFragment) => {
+const hasSpecText = (_node: JQuery<HTMLElement>, spec: SpecNode_SpecsListFragment) => {
   const $node = _node as JQuery<HTMLDivElement>
 
   expect($node).to.contain(spec.node.fileName)
@@ -16,7 +16,7 @@ const hasSpecText = (_node: JQuery<HTMLElement>, spec: SpecListRowFragment) => {
   return $node
 }
 
-let specs: Array<SpecListRowFragment> = []
+let specs: Array<SpecNode_SpecsListFragment> = []
 
 describe('<SpecsList />', { keystrokeDelay: 0 }, () => {
   beforeEach(() => {

From 8507184ee9d16f6930768af43b457f01672cbfa6 Mon Sep 17 00:00:00 2001
From: Zachary Williams <zachjw34@gmail.com>
Date: Mon, 15 Nov 2021 10:56:58 -0500
Subject: [PATCH 7/7] tweak styles

---
 packages/app/src/specs/InlineSpecListTree.vue            | 2 +-
 packages/app/src/specs/RowDirectory.vue                  | 8 ++++----
 packages/app/src/specs/SpecItem.vue                      | 2 +-
 packages/app/src/specs/SpecsList.vue                     | 4 ++--
 packages/frontend-shared/src/assets/icons/folder_x16.svg | 4 ++--
 5 files changed, 10 insertions(+), 10 deletions(-)

diff --git a/packages/app/src/specs/InlineSpecListTree.vue b/packages/app/src/specs/InlineSpecListTree.vue
index da4c0479fca..25ac44386ac 100644
--- a/packages/app/src/specs/InlineSpecListTree.vue
+++ b/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
diff --git a/packages/app/src/specs/RowDirectory.vue b/packages/app/src/specs/RowDirectory.vue
index c3b94c9521f..8719dc4c011 100644
--- a/packages/app/src/specs/RowDirectory.vue
+++ b/packages/app/src/specs/RowDirectory.vue
@@ -1,18 +1,18 @@
 <template>
   <div
-    class="h-full grid grid-cols-[16px,16px,auto] items-center gap-10px"
+    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
+        icon-dark-gray-300 mr-8px text-sm
         group-hocus:(icon-dark-gray-700)
       "
       :class="{'transform rotate-270': !expanded}"
     />
     <component
       :is="IconFolder"
-      class="icon-light-gray-50 icon-dark-gray-200 document-icon"
+      class="icon-dark-gray-50 icon-light-gray-200 document-icon"
     />
 
     <div>
@@ -35,7 +35,7 @@
 </template>
 
 <script lang="ts" setup>
-import IconFolder from '~icons/cy/folder-outline_x24.svg'
+import IconFolder from '~icons/cy/folder_x16.svg'
 
 defineProps<{
   directories: string[]
diff --git a/packages/app/src/specs/SpecItem.vue b/packages/app/src/specs/SpecItem.vue
index cba6e679ab4..cb1c8d9e527 100644
--- a/packages/app/src/specs/SpecItem.vue
+++ b/packages/app/src/specs/SpecItem.vue
@@ -1,6 +1,6 @@
 <template>
   <div
-    class="h-full grid grid-cols-[16px,auto,auto] items-center gap-10px"
+    class="h-full grid grid-cols-[16px,auto,auto] items-center gap-8px"
     data-cy="spec-item"
   >
     <component
diff --git a/packages/app/src/specs/SpecsList.vue b/packages/app/src/specs/SpecsList.vue
index 679d07b9b46..1e19aaf68d1 100644
--- a/packages/app/src/specs/SpecsList.vue
+++ b/packages/app/src/specs/SpecsList.vue
@@ -63,7 +63,7 @@
               >
                 <SpecItem
                   :spec="row.data"
-                  :style="{ paddingLeft: `${((row.depth - 2) * 20) + 16}px` }"
+                  :style="{ paddingLeft: `${((row.depth - 2) * 10) + 16 + 22}px` }"
                 />
               </RouterLink>
 
@@ -72,7 +72,7 @@
                 :directories="row.value.split('/')"
                 :expanded="row.expanded.value"
                 :depth="row.depth - 2"
-                :style="{ paddingLeft: `${((row.depth - 2) * 20) + 16}px` }"
+                :style="{ paddingLeft: `${((row.depth - 2) * 10) + 16}px` }"
                 @click="row.toggle"
               />
             </template>
diff --git a/packages/frontend-shared/src/assets/icons/folder_x16.svg b/packages/frontend-shared/src/assets/icons/folder_x16.svg
index 7643550a18a..bcc9d9c1ccc 100644
--- a/packages/frontend-shared/src/assets/icons/folder_x16.svg
+++ b/packages/frontend-shared/src/assets/icons/folder_x16.svg
@@ -1,4 +1,4 @@
 <svg width="16" height="14" viewBox="0 0 16 14" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M14 13C14.5523 13 15 12.5523 15 12V4C15 3.44772 14.5523 3 14 3H9L7.29289 4.70711C7.10536 4.89464 6.851 5 6.58579 5H1V12C1 12.5523 1.44772 13 2 13H14Z" fill="#2E3247"/>
-<path d="M9 3L7.29289 1.29289C7.10536 1.10536 6.851 1 6.58579 1H2C1.44772 1 1 1.44772 1 2V5M9 3H14C14.5523 3 15 3.44772 15 4V12C15 12.5523 14.5523 13 14 13H2C1.44772 13 1 12.5523 1 12V5M9 3L7.29289 4.70711C7.10536 4.89464 6.851 5 6.58579 5H1" stroke="#434861" stroke-width="2" stroke-linejoin="round"/>
+<path d="M14 13C14.5523 13 15 12.5523 15 12V4C15 3.44772 14.5523 3 14 3H9L7.29289 4.70711C7.10536 4.89464 6.851 5 6.58579 5H1V12C1 12.5523 1.44772 13 2 13H14Z" fill="#2E3247" class="icon-dark"/>
+<path d="M9 3L7.29289 1.29289C7.10536 1.10536 6.851 1 6.58579 1H2C1.44772 1 1 1.44772 1 2V5M9 3H14C14.5523 3 15 3.44772 15 4V12C15 12.5523 14.5523 13 14 13H2C1.44772 13 1 12.5523 1 12V5M9 3L7.29289 4.70711C7.10536 4.89464 6.851 5 6.58579 5H1" stroke="#434861" stroke-width="2" stroke-linejoin="round" class="icon-light"/>
 </svg>