implement file explorer

Author: Mahad-10

src/router/index.ts

@@ -56,6 +56,12 @@ const router = createRouter({
       component: () => import('../views/DesktopShellView.vue'),
       meta: { requiresAuth: true, hideNavbar: true },
     },
+    {
+      path: '/desktops/:realm/files',
+      name: 'desktop-files',
+      component: () => import('../views/DesktopFileExplorerView.vue'),
+      meta: { requiresAuth: true, hideNavbar: true },
+    },
   ],
 })
 
@@ -71,4 +77,32 @@ router.beforeEach((to, from, next) => {
   }
 })
 
+export function openDesktop(realm: string) {
+  openDesktopWindow(`/desktops/${realm}`)
+}
+
+export function openFileExplorer(realm: string, desktopName?: string) {
+  router.push({
+    name: 'desktop-files',
+    params: { realm },
+    query: desktopName ? { name: desktopName } : {},
+  })
+}
+
+function openDesktopWindow(path: string) {
+  const url = router.resolve(path).href
+
+  const width = 1000
+  const height = 700
+
+  const left = window.screenX + (window.outerWidth - width) / 2
+  const top = window.screenY + (window.outerHeight - height) / 2
+
+  window.open(
+    url,
+    '_blank',
+    `width=${width},height=${height},left=${left},top=${top},resizable=yes,scrollbars=yes`,
+  )
+}
+
 export default router

src/types/index.ts

@@ -33,3 +33,30 @@ export interface Desktop {
   realm: string
   icon: string
 }
+
+export interface FileEntry {
+  name: string
+  path: string
+  type: string
+  mode: string
+  size: number
+  hidden: boolean
+  mod_time: string
+  is_dir: boolean
+  is_symlink: boolean
+  link_target?: string
+}
+
+export interface FileBrowseResult {
+  path: string
+  home_path: string
+  parent_path?: string
+  type: string
+  mode: string
+  size: number
+  mod_time: string
+  is_dir: boolean
+  is_symlink: boolean
+  link_target?: string
+  entries?: FileEntry[]
+}

src/views/DesktopFileExplorerView.vue

@@ -0,0 +1,50 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+import { useRoute, useRouter } from 'vue-router'
+
+import EmbeddedDesktopFileExplorer from '@/components/EmbeddedDesktopFileExplorer.vue'
+
+const route = useRoute()
+const router = useRouter()
+
+const realm = computed(() => String(route.params.realm || ''))
+const desktopName = computed(() => {
+  const queryName = route.query.name
+  return typeof queryName === 'string' ? queryName : undefined
+})
+
+function closeExplorer() {
+  router.push('/')
+}
+</script>
+
+<template>
+  <div class="container py-5 fade-in-up">
+    <div class="row justify-content-center">
+      <div class="col-lg-10">
+        <div class="mb-4">
+          <button class="btn btn-link text-decoration-none px-0 back-link" @click="closeExplorer">
+            <i class="bi bi-arrow-left me-2"></i>Back to dashboard
+          </button>
+        </div>
+
+        <EmbeddedDesktopFileExplorer
+          :realm="realm"
+          :desktop-name="desktopName"
+          @close="closeExplorer"
+        />
+      </div>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.back-link {
+  color: #617182;
+  font-weight: 600;
+}
+
+.back-link:hover {
+  color: #1f2a37;
+}
+</style>

src/views/HomeView.vue

@@ -1,29 +1,12 @@
 <script setup lang="ts">
-import { ref, onMounted, watch } from 'vue'
-import { useRouter } from 'vue-router'
+import { ref, watch } from 'vue'
 
+import { openDesktop, openFileExplorer } from '../router'
 import { useAuthStore } from '../stores/auth'
 import { authService } from '../services/authService'
 import type { Organization, Desktop } from '../types'
 
 const authStore = useAuthStore()
-const router = useRouter()
-
-function openDesktop(realm: string) {
-  const url = router.resolve(`/desktops/${realm}`).href
-
-  const width = 1000
-  const height = 700
-
-  const left = window.screenX + (window.outerWidth - width) / 2
-  const top = window.screenY + (window.outerHeight - height) / 2
-
-  window.open(
-    url,
-    '_blank',
-    `width=${width},height=${height},left=${left},top=${top},resizable=yes,scrollbars=yes`,
-  )
-}
 
 // State
 const organizations = ref<Organization[]>([])
@@ -78,7 +61,6 @@ const fetchDesktops = async () => {
   }
 }
 
-// Watch for session changes (e.g., after auto-login)
 watch(
   () => authStore.session,
   (newSession) => {
@@ -93,18 +75,6 @@ watch(
   { immediate: true },
 )
 
-onMounted(() => {
-  // If session is already present, fetch immediately
-  if (authStore.session) {
-    fetchOrganizations()
-    fetchDesktops()
-  } else {
-    // If not, the watcher will handle it, but let's make sure we don't hang forever
-    // if auto-login is not even running or fails.
-    // authStore.autoLogin is called in App.vue, so we wait for its result indirectly.
-  }
-})
-
 const handleOpenModal = () => {
   showModal.value = true
 }
@@ -181,7 +151,10 @@ const handleCreateOrg = async () => {
 
         <div v-else class="row g-4">
           <div v-for="desktop in desktops" :key="desktop.realm" class="col-md-4">
-            <div class="card h-100 border-0 shadow-sm">
+            <div
+              class="card h-100 border-0 shadow-sm card-hover desktop-card"
+              @click="openFileExplorer(desktop.realm, desktop.name)"
+            >
               <div class="card-body p-4 d-flex flex-column">
                 <div class="d-flex align-items-center mb-3">
                   <span class="fs-2 me-3">{{ desktop.icon }}</span>
@@ -191,23 +164,22 @@ const handleCreateOrg = async () => {
                 </div>
 
                 <div class="mt-auto d-flex justify-content-between align-items-center">
-                  <span class="badge bg-light text-secondary rounded-pill"> Desktop </span>
+                  <span class="badge bg-light text-secondary rounded-pill"> Open Explorer </span>
                   <button
                     class="btn btn-sm btn-outline-primary"
-                    @click="openDesktop(desktop.realm)"
+                    @click.stop="openDesktop(desktop.realm)"
                     title="Open Terminal">
                     <i class="bi bi-terminal"></i>
                   </button>
                 </div>
               </div>
             </div>
+          </div>
+        </div>
 
-            <!-- Empty State -->
-            <div v-if="desktops.length === 0" class="col-12">
-              <div class="card border-dashed p-5 text-center bg-transparent">
-                <p class="text-muted mb-0">No desktops found</p>
-              </div>
-            </div>
+        <div v-if="desktops.length === 0" class="col-12">
+          <div class="card border-dashed p-5 text-center bg-transparent">
+            <p class="text-muted mb-0">No desktops found</p>
           </div>
         </div>
       </div>
@@ -327,6 +299,10 @@ const handleCreateOrg = async () => {
   box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1) !important;
 }
 
+.desktop-card {
+  cursor: pointer;
+}
+
 /* Theme Primary Button Override for consistency */
 .btn-theme-primary {
   background-color: var(--theme-yellow) !important;