Show a notification for an empty FolderPicker

src/components/Navigation/FolderPicker/FolderList.vue

 <template>
-  <ul>
+  <div class="notification is-warning" v-if="!folderId && !loading && !subfolders.length">
+    No folders found.
+  </div>
+  <ul v-else>
     <Folder
       v-for="folder in subfolders"
       :key="folder.id"
@@ -8,11 +11,10 @@
       :current-folder-id="currentFolderId"
       v-on:selected-folder="(f: Folder) => $emit('selectedFolder', f)"
     />
-    <li>
+    <li v-if="hasNext">
       <button
         class="button is-small"
         :class="{ 'is-loading': loading }"
-        v-if="hasNext"
         v-on:click="fetchFolders"
       >
         Load more…

src/components/Navigation/FolderPicker/FolderPicker.vue

@@ -26,11 +26,10 @@
 </template>
 
 <script lang="ts">
-import { mapState } from 'pinia'
+import { defineComponent, PropType } from 'vue'
+import { Folder } from '@/stores/folderpicker'
 import Modal from '@/components/Modal.vue'
 import FolderList from './FolderList.vue'
-import { useFolderPickerStore } from '@/stores'
-import { defineComponent } from 'vue'
 
 export default defineComponent({
   inheritAttrs: false,
@@ -38,14 +37,18 @@ export default defineComponent({
     Modal,
     FolderList
   },
-  emits: ['update:modelValue'],
+  emits: {
+    'update:modelValue' (folder: Folder) {
+      return folder.id !== undefined
+    }
+  },
   props: {
     corpusId: {
       type: String,
       required: true
     },
     modelValue: {
-      type: Object,
+      type: Object as PropType<Folder | null>,
       default: null
     },
     // Allow overriding the input's placeholder, but set a default
@@ -61,9 +64,6 @@ export default defineComponent({
   },
   data: () => ({
     opened: false
-  }),
-  computed: {
-    ...mapState(useFolderPickerStore, ['folders'])
-  }
+  })
 })
 </script>