chore(project): fetch branches

Author: benjamincanac

components/molecules/FilesTree.vue

@@ -5,7 +5,7 @@
         class="group border-r-2 py-2 pr-6 flex items-center text-sm font-medium focus:u-bg-gray-50 focus:outline-none w-full cursor-pointer"
         :class="{
           [`pl-${6 + (level * 3)}`]: true,
-          'u-bg-gray-50 u-border-gray-800 u-text-gray-900': isSelected(file),
+          'u-bg-gray-100 u-border-gray-800 u-text-gray-900': isSelected(file),
           'border-transparent u-text-gray-500 hover:u-text-gray-900 hover:u-bg-gray-50': !isSelected(file)
         }"
         @click="selectFile(file)"

components/organisms/project/ProjectPage.vue

@@ -1,7 +1,7 @@
 <template>
   <main class="flex-1 flex overflow-hidden">
     <!-- Primary column -->
-    <section class="min-w-0 flex-1 h-full overflow-y-auto lg:order-last">
+    <section class="min-w-0 flex-1 h-full overflow-y-auto lg:order-last bg-gray-50 dark:bg-gray-900">
       <div class="h-full p-4 sm:p-6 lg:p-8 xl:p-10 overflow-y-auto">
         <slot />
       </div>
@@ -10,10 +10,12 @@
     <!-- Secondary column (hidden on smaller screens) -->
     <aside v-if="$slots.aside" class="hidden lg:block lg:flex-shrink-0 lg:order-first">
       <div class="h-full relative flex flex-col w-72 border-r u-border-gray-200 u-bg-white overflow-y-auto">
-        <div class="flex-shrink-0 h-16 px-6 flex items-center sticky top-0 u-bg-white">
+        <div class="flex-shrink-0 h-16 px-6 flex items-center justify-between sticky top-0 u-bg-white">
           <p class="text-lg font-semibold text-blue-gray-900">
             {{ title }}
           </p>
+
+          <slot name="aside-header" />
         </div>
 
         <slot name="aside" />

nuxt.config.ts

@@ -67,7 +67,7 @@ export default defineNuxtConfig({
   tailwindcss: {
     config: {
       content: ['presets/*.ts'],
-      safelist: ['pl-6', 'pl-9', 'pl-12', 'pl-15', 'pl-18']
+      safelist: [3, 6, 9, 12, 15, 18, 21, 24, 27, 30].map(number => `pl-${number}`)
     }
   }
 })

pages/@[team]/[project]/content.vue

@@ -1,7 +1,19 @@
 <template>
   <ProjectPage title="Content">
     <template #aside>
-      <FilesTree :files="files" :selected-file="selectedFile" @select-file="selectFile" />
+      <FilesTree :files="files" :selected-file="file" @select-file="selectFile" />
+    </template>
+
+    <template #aside-header>
+      <UButton
+        v-if="branch"
+        icon="heroicons-solid:switch-horizontal"
+        trailing
+        :label="branch.name"
+        variant="transparent"
+        size="sm"
+        class="-mr-3"
+      />
     </template>
 
     <div class="whitespace-pre break-words text-sm font-mono focus:outline-none" contenteditable>
@@ -12,7 +24,7 @@
 
 <script setup lang="ts">
 import type { PropType, Ref } from 'vue'
-import type { Team, Project, File } from '~/types'
+import type { Team, Project, File, Branch } from '~/types'
 
 const props = defineProps({
   team: {
@@ -27,27 +39,68 @@ const props = defineProps({
 
 const client = useStrapiClient()
 
-const { data: files } = await useAsyncData('files', () => client<File[]>(`/projects/${props.project.id}/tree`))
+const branch: Ref<Branch> = ref(null)
+const file: Ref<File> = ref(null)
+const content: Ref<string> = ref('')
 
-const selectedFile: Ref<File> = ref(files.value.find(file => file.path.toLowerCase().endsWith('index.md')) || files.value.find(file => file.type === 'file'))
+const { data: branches, refresh: refreshBranches } = await useAsyncData('files', () => client<Branch[]>(`/projects/${props.project.id}/branches`))
 
-const content = ref('')
+const { data: files, refresh: refreshFiles } = await useAsyncData('files', () => client<File[]>(`/projects/${props.project.id}/files`, {
+  params: {
+    branch: branch.value?.name
+  }
+}))
 
-function selectFile (file) {
-  selectedFile.value = file
-}
+// Select file when files changes
+watch(files, () => {
+  const currentFile = file.value?.path ? findFileFromPath(file.value.path, files.value) : null
+
+  selectFile(currentFile || files.value.find(file => file.path.toLowerCase().endsWith('index.md')) || files.value.find(file => file.type === 'file'))
+}, { immediate: true })
+
+// Select branch when branches changes
+watch(branches, () => {
+  const branchName = localStorage.getItem(`projects-${props.project.id}-branch`)
 
-watch(selectedFile, async () => {
-  if (!selectedFile.value) {
+  selectBranch((branchName && branches.value.find(branch => branch.name === branchName)) || branches.value.find(branch => branch.name === props.project.repository.default_branch) || branches.value[0])
+}, { immediate: true })
+
+// Fetch content when file changes
+watch(file, async () => {
+  if (!file.value) {
     return
   }
 
   const { content: fetchedContent } = await client(`/projects/${props.project.id}/file`, {
     params: {
-      path: selectedFile.value.path
+      path: file.value.path
     }
   })
 
   content.value = fetchedContent
 }, { immediate: true })
+
+// Fetch files when branch changes
+watch(branch, async () => await refreshFiles())
+
+function findFileFromPath (path, files) {
+  for (const file of files) {
+    if (file.path === path) {
+      return file
+    }
+    if (file.children) {
+      const result = findFileFromPath(path, file.children)
+      if (result) { return result }
+    }
+  }
+}
+
+function selectFile (f: File) {
+  file.value = f
+}
+
+function selectBranch (b: Branch) {
+  branch.value = b
+  localStorage.setItem(`projects-${props.project.id}-branch`, branch.value?.name)
+}
 </script>

types/index.ts

@@ -93,6 +93,10 @@ export interface File {
   isDeleted?: boolean
 }
 
+export interface Branch {
+  name: string
+}
+
 export interface GitHubAccount {
   login: string
   avatar_url: string