Merge pull request #14 from xconnio/improve-shell-experience

Improve shell experience

Author: Mahad-10

src/App.vue

@@ -1,9 +1,10 @@
 <script setup lang="ts">
 import { onMounted } from 'vue'
-import { RouterView, useRouter } from 'vue-router'
+import { RouterView, useRoute, useRouter } from 'vue-router'
 import { useAuthStore } from './stores/auth'
 
 const router = useRouter()
+const route = useRoute()
 const authStore = useAuthStore()
 
 const handleLogout = () => {
@@ -39,7 +40,7 @@ onMounted(async () => {
 <template>
   <div class="min-vh-100 d-flex flex-column bg-light">
     <!-- Header -->
-    <header class="navbar navbar-expand-lg header-theme">
+    <header v-if="!route.meta.hideNavbar" class="navbar navbar-expand-lg header-theme">
       <div class="container-fluid">
         <router-link to="/" class="navbar-brand mb-0 h1 fw-bold ps-3 text-dark text-decoration-none"
           >Deskconn</router-link

src/router/index.ts

@@ -54,7 +54,7 @@ const router = createRouter({
       path: '/desktops/:realm',
       name: 'desktop-shell',
       component: () => import('../views/DesktopShellView.vue'),
-      meta: { requiresAuth: true },
+      meta: { requiresAuth: true, hideNavbar: true },
     },
   ],
 })

src/views/DesktopShellView.vue

@@ -65,29 +65,17 @@ const handleTerminalInput = (data: string) => {
   channel.push(new Progress([data], {}, { progress: true }))
 }
 
-const closeShell = async (reason?: string) => {
+const closeShell = async () => {
   if (closed) return
   closed = true
 
-  try {
-    // Stop sender loop safely
-    channel?.push(new Progress([], {}, {}))
-  } catch {}
-
   window.removeEventListener('resize', handleResize)
 
-  try {
-    await session?.leave()
-  } catch (err) {
-    console.error('Error leaving session:', err)
-  }
+  session = null
 
-  if (term) {
-    if (reason) {
-      term.writeln(`\r\n${reason}`)
-    }
-    term.writeln('\r\nSession closed.')
-  }
+  term?.dispose()
+
+  window.close()
 }
 
 const startShell = async () => {
@@ -102,8 +90,8 @@ const startShell = async () => {
         if (args && args.length > 0 && term) {
           term.write(args[0])
         } else {
-          channel!.push(new Progress([], {}, {}))
-          await closeShell('Remote shell ended.')
+          channel?.push(new Progress([], {}, {}))
+          await closeShell()
         }
       },
     )
@@ -123,8 +111,9 @@ onMounted(async () => {
 
   term = new Terminal({
     cursorBlink: true,
+    cursorStyle: "block",
     convertEol: true,
-    scrollback: 5000,
+    scrollback: 10000,
     fontSize: 15,
     theme: { background: '#1e1e1e' },
   })
@@ -134,8 +123,7 @@ onMounted(async () => {
 
   term.open(terminalRef.value)
   fitAddon.fit()
-
-  term.writeln('Starting shell ...')
+  term.focus()
 
   try {
     session = await authStore.shellWebRTC(realm)

src/views/HomeView.vue

@@ -1,10 +1,29 @@
 <script setup lang="ts">
 import { ref, onMounted, watch } from 'vue'
+import { useRouter } from 'vue-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[]>([])
@@ -162,28 +181,32 @@ const handleCreateOrg = async () => {
 
         <div v-else class="row g-4">
           <div v-for="desktop in desktops" :key="desktop.realm" class="col-md-4">
-            <router-link :to="'/desktops/' + desktop.realm" class="text-decoration-none">
-              <div class="card h-100 border-0 shadow-sm card-hover">
-                <div class="card-body p-4">
-                  <div class="d-flex align-items-center mb-3">
-                    <span class="fs-2 me-3">{{ desktop.icon }}</span>
-                    <div>
-                      <h5 class="card-title mb-0 text-dark">{{ desktop.name }}</h5>
-                    </div>
-                  </div>
-                  <div class="mt-auto d-flex justify-content-between align-items-center">
-                    <span class="badge bg-light text-primary rounded-pill">View Details</span>
-                    <i class="bi bi-chevron-right text-muted"></i>
+            <div class="card h-100 border-0 shadow-sm">
+              <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>
+                  <div>
+                    <h5 class="card-title mb-0 text-dark">{{ desktop.name }}</h5>
                   </div>
                 </div>
+
+                <div class="mt-auto d-flex justify-content-between align-items-center">
+                  <span class="badge bg-light text-secondary rounded-pill"> Desktop </span>
+                  <button
+                    class="btn btn-sm btn-outline-primary"
+                    @click="openDesktop(desktop.realm)"
+                    title="Open Terminal">
+                    <i class="bi bi-terminal"></i>
+                  </button>
+                </div>
               </div>
-            </router-link>
-          </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>
+            <!-- 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>
         </div>