feat: defineAppPage

Author: zzhenryquezz

packages/app/src/components/IsAppDrawerMini.vue

@@ -12,9 +12,9 @@ const drawer = defineModel('drawer', {
 // links
 const links = [
     {
-        to: '/file-explorer',
+        to: '/app-pages/directory',
         icon: 'mdi:folder',
-        label: 'fileExplorer'
+        label: 'Explorer'
     },
     {
         to: '/workspace-selector',

packages/app/src/components/IsMarkdownEditor.vue

@@ -83,7 +83,7 @@ whenever(keys.Alt_m, () => {
 })
 </script>
 <template>
-    <div class="flex flex-wrap min-h-full w-full">
+    <div class="flex flex-wrap h-screen w-full">
         <div class="h-[calc(100%-1.5rem)] w-full">
             <transition
                 enter-active-class="transition duration-200"

packages/app/src/composables/defineAppPage.ts

@@ -0,0 +1,9 @@
+export interface AppPage {
+    // unique name of the page
+    name: string
+    component: any
+}
+
+export function defineAppPage(page: AppPage) {
+    return page
+}

packages/app/src/composables/defineEntryMiddleware.ts

@@ -0,0 +1,16 @@
+import type { DriveEntry } from "./useDrive";
+import type { RouteRecordRaw, Router  } from 'vue-router'
+
+export interface EntryMiddlewareContext {
+    entry: DriveEntry
+    route: RouteRecordRaw
+    router: Router
+}
+
+export interface EntryMiddleware {
+    (context: EntryMiddlewareContext): Promise<any>
+}
+
+export function defineEntryMiddleware(middleware: EntryMiddleware) {
+    return middleware
+}

packages/app/src/pages/AppPage/AppPage.vue

@@ -0,0 +1,38 @@
+<script lang="ts" setup>
+
+import type { AppPage } from '@/composables/defineAppPage'
+import Directory from './AppPageDirectory.vue';
+
+const name = defineProp('name', {
+    type: String,
+    required: true
+})
+
+const pages = shallowRef<AppPage[]>([])
+
+const directoryPage = defineAppPage({
+    name: 'directory',
+    component: Directory,
+})
+
+pages.value.push(directoryPage)
+
+const current = computed(() => pages.value.find(p => p.name === name.value))
+
+const currentComponent = computed(() => {
+    if (!current.value) {
+        return null
+    }
+
+    return current.value.component
+})
+
+</script>
+
+<template>
+    <component v-if="currentComponent" :is="currentComponent" />
+
+    <div v-else>
+        No page found
+    </div>
+</template>

packages/app/src/pages/FileExplorer/FileExplorer.vue renamed to packages/app/src/pages/AppPage/AppPageDirectory.vue

@@ -2,14 +2,13 @@
 import type { DriveEntry } from '@/composables/useDrive';
 import orderBy from 'lodash/orderBy'
 
-
-const path = defineProp<string>('path', {
-    type: String,
-    default: '/'
-})
-
 const { drive } = useDrive()
 const router = useRouter()
+const route = useRoute()
+
+const path = computed(() => {
+    return route.query.path as string || '/'
+})
 
 const search = ref('')
 const entries = ref<DriveEntry[]>([])
@@ -95,7 +94,11 @@ function findIconColor(entry: DriveEntry){
         </div>
 
         <div class="flex flex-col overflow-y-auto">
-            <is-list-item v-for="e in filteredEntries" :key="e.path" @click="onEntryClick(e)">
+            <is-list-item
+                v-for="e in filteredEntries"
+                :key="e.path"
+                :to="`/entries/${e.path}`"
+            >
                 <is-icon
                     :name="findIcon(e)"
                     size="xl"

packages/app/src/pages/EntryProvider/EntryProvider.vue

@@ -0,0 +1,12 @@
+<script lang="ts" setup>
+
+import type { AppPage } from '@/composables/defineAppPage'
+import type { EntryMiddleware } from '@/composables/defineEntryMiddleware'
+
+const middlewares = ref<EntryMiddleware[]>([])
+
+</script>
+
+<template>
+    <div>file provider</div>
+</template>

packages/app/src/pages/EntryProvider/middlewares/directory.ts

@@ -0,0 +1,7 @@
+export const directoryMiddleware = defineEntryMiddleware(async ({ entry, router }) => {
+    if (entry.type !== 'directory') {
+        return
+    }
+    
+    return router.replace(`/app/directory/${entry.path}`)
+})

packages/app/src/pages/FileExplorer/components/FileExplorerMarkdownEditor.vue

@@ -0,0 +1,14 @@
+<script lang="ts" setup>
+
+const text = ref('')
+
+
+function save(){
+
+}
+
+</script>
+
+<template>
+    <is-monaco-editor v-model="text" @keydown.ctrl.s="save" />
+</template>

packages/app/src/pages/TextEditor/TextEditor.vue

@@ -43,7 +43,7 @@ async function select(workspace: Workspace){
 
     setDrive(workspaceDrive)
 
-    router.push({ name: 'FileExplorer' })
+    router.push('/app-pages/directory')
 }
 
 </script>

packages/app/src/pages/WorkspaceSelector/WorkspaceSelector.vue

@@ -14,15 +14,16 @@ const routes: RouteRecordRaw[] = [
         },
     },
     {
-        path: '/file-explorer',
-        name: 'FileExplorer',
-        component: () => import('@/pages/FileExplorer/FileExplorer.vue'),
+        path: '/entries/:path(.*)*',
+        name: 'EntryProvider',
+        props: true,
+        component: () => import('@/pages/EntryProvider/EntryProvider.vue'),
     },
     {
-        path: '/file-explorer/:path(.*)*',
-        name: 'FileExplorerFolder',
+        path: '/app-pages/:name',
+        name: 'AppPageProvider',
         props: true,
-        component: () => import('@/pages/FileExplorer/FileExplorer.vue'),
+        component: () => import('@/pages/AppPage/AppPage.vue'),
     },
     {
         path: '/cheat-sheet',