✨ (history) script with setup and better note list design

src/views/HistoricNotes.vue

@@ -1,3 +1,15 @@
+<script lang="ts" setup>
+import { useNotes } from '@/modules/note/hooks/useNotes'
+import { defineAsyncComponent, ref } from 'vue'
+
+const devMode = ref(import.meta.env.DEV)
+const FluxNote = defineAsyncComponent(() => import('@/components/FluxNote.vue'))
+
+defineProps<{ user: string; repo: string }>()
+
+const { notes } = useNotes()
+</script>
+
 <template>
   <div class="historic-notes">
     <flux-note
@@ -9,34 +21,16 @@
       <h3 class="subtitle is-3">History</h3>
       There are {{ notes.length }} notes
 
-      <pre>{{ notes }}</pre>
+      <ul>
+        <li v-for="note in notes" :key="note.sha ?? ''">
+          {{ note.path }}
+          <pre v-if="devMode">{{ note.sha }} | {{ note.size }}B</pre>
+        </li>
+      </ul>
     </flux-note>
   </div>
 </template>
 
-<script lang="ts">
-import { useNotes } from '@/modules/note/hooks/useNotes'
-import { defineAsyncComponent, defineComponent } from 'vue'
-
-const FluxNote = defineAsyncComponent(() => import('@/components/FluxNote.vue'))
-
-export default defineComponent({
-  name: 'HistoricNotes',
-  components: {
-    FluxNote
-  },
-  props: {
-    user: { type: String, required: true },
-    repo: { type: String, required: true }
-  },
-  setup() {
-    const { notes } = useNotes()
-
-    return { notes }
-  }
-})
-</script>
-
 <style scoped lang="scss">
 .historic-notes {
   display: flex;