From 5462b2e79555cdd06c4bdd8f9a320ea2874b06a9 Mon Sep 17 00:00:00 2001
From: Atharva Sawant <git@atharva.is>
Date: Thu, 28 Mar 2024 15:42:19 +0530
Subject: [PATCH] Implemented full-screen layout

---
 src/components/FileManager/FileTabs.vue     |  4 +-
 src/components/FileManager/FileUploader.vue |  8 ++--
 src/components/OrgTree/OrgTreeView.vue      | 23 +++++++--
 src/views/HomeView.vue                      | 53 +++++++++++++++++----
 4 files changed, 69 insertions(+), 19 deletions(-)

diff --git a/src/components/FileManager/FileTabs.vue b/src/components/FileManager/FileTabs.vue
index c66a8520..f7786dd9 100644
--- a/src/components/FileManager/FileTabs.vue
+++ b/src/components/FileManager/FileTabs.vue
@@ -1,6 +1,6 @@
 <template>
-  <div class="border-b border-gray-200 bg-white">
-    <nav class="flex space-x-1 overflow-x-auto">
+  <div class="flex space-x-1 overflow-x-auto">
+    <nav class="flex space-x-1">
       <button
         v-for="file in files"
         :key="file.id"
diff --git a/src/components/FileManager/FileUploader.vue b/src/components/FileManager/FileUploader.vue
index 92e4c701..72484903 100644
--- a/src/components/FileManager/FileUploader.vue
+++ b/src/components/FileManager/FileUploader.vue
@@ -12,8 +12,8 @@
         <div class="space-y-3">
           <p class="text-lg text-gray-600">Drop org files or folders here</p>
           <p class="text-sm text-gray-400">or</p>
-          <div class="flex gap-3 justify-center">
-            <label class="inline-block">
+          <div class="flex gap-3 justify-center items-center">
+            <label>
               <input 
                 type="file" 
                 multiple 
@@ -21,13 +21,13 @@
                 @change="handleFileSelect"
                 class="hidden"
               />
-              <span class="bg-blue-600 text-white px-4 py-2 rounded cursor-pointer hover:bg-blue-700">
+              <span class="inline-block bg-blue-600 text-white px-4 py-2 rounded cursor-pointer hover:bg-blue-700 transition-colors">
                 Browse Files
               </span>
             </label>
             <button
               @click="loadExampleFiles"
-              class="bg-green-600 text-white px-4 py-2 rounded hover:bg-green-700"
+              class="bg-green-600 text-white px-4 py-2 rounded hover:bg-green-700 transition-colors"
             >
               Use Example Files
             </button>
diff --git a/src/components/OrgTree/OrgTreeView.vue b/src/components/OrgTree/OrgTreeView.vue
index ee1162e0..ced097f7 100644
--- a/src/components/OrgTree/OrgTreeView.vue
+++ b/src/components/OrgTree/OrgTreeView.vue
@@ -1,6 +1,6 @@
 <template>
-  <div class="bg-white rounded-lg shadow p-6">
-    <div class="flex justify-between items-center mb-6">
+  <div :class="fullScreen ? 'h-full' : 'bg-white rounded-lg shadow p-6'">
+    <div v-if="!fullScreen" class="flex justify-between items-center mb-6">
       <h2 class="text-xl font-semibold">{{ file.name }}</h2>
       <div class="flex gap-3">
         <button 
@@ -18,7 +18,23 @@
       </div>
     </div>
     
-    <div class="org-tree-2d h-96 border rounded-lg">
+    <!-- Floating controls for full-screen mode -->
+    <div v-if="fullScreen" class="absolute top-4 right-4 z-10 flex gap-2">
+      <button 
+        @click="resetLayout"
+        class="bg-blue-600 text-white px-3 py-2 rounded shadow-lg hover:bg-blue-700 text-sm"
+      >
+        Reset Layout
+      </button>
+      <button 
+        @click="exportFile"
+        class="bg-green-600 text-white px-3 py-2 rounded shadow-lg hover:bg-green-700 text-sm"
+      >
+        Export
+      </button>
+    </div>
+    
+    <div :class="fullScreen ? 'h-full' : 'org-tree-2d h-96 border rounded-lg'">
       <VueFlow
         :nodes="flowNodes"
         :edges="flowEdges"
@@ -49,6 +65,7 @@ import type { FlowNode, FlowEdge } from '@/utils/nodeLayoutGenerator'
 
 const props = defineProps<{
   file: OrgFile
+  fullScreen?: boolean
 }>()
 
 const nodeTypes = {
diff --git a/src/views/HomeView.vue b/src/views/HomeView.vue
index 20b9f130..1c9c7470 100644
--- a/src/views/HomeView.vue
+++ b/src/views/HomeView.vue
@@ -1,15 +1,43 @@
 <template>
-  <div class="container mx-auto p-6">
-    <div class="max-w-4xl mx-auto">
-      <FileUploader @files-selected="handleFiles" />
-      <div v-if="files.length" class="mt-8">
-        <FileTabs 
-          :files="files" 
-          :active-file="activeFile"
-          @file-selected="setActiveFile" 
-        />
-        <OrgTreeView v-if="activeFile" :file="activeFile" />
+  <!-- Upload View - Full Screen -->
+  <div v-if="!files.length" class="min-h-screen flex items-center justify-center bg-gray-50">
+    <div class="w-full max-w-2xl px-6">
+      <div class="text-center mb-8">
+        <h1 class="text-4xl font-bold text-gray-900 mb-4">OrgTree</h1>
+        <p class="text-xl text-gray-600">Visualize your org-mode files as interactive brain maps</p>
       </div>
+      <FileUploader @files-selected="handleFiles" />
+    </div>
+  </div>
+
+  <!-- Map View - Full Screen -->
+  <div v-else class="h-screen flex flex-col bg-gray-50">
+    <!-- Header with tabs -->
+    <div class="bg-white shadow-sm border-b">
+      <div class="px-4 py-3">
+        <div class="flex items-center justify-between">
+          <div class="flex items-center space-x-4">
+            <button 
+              @click="showUploader"
+              class="text-gray-500 hover:text-gray-700 px-3 py-1 rounded border border-gray-300 hover:border-gray-400 transition-colors"
+            >
+              ← Back to Upload
+            </button>
+            <div class="text-lg font-semibold text-gray-900">OrgTree</div>
+          </div>
+          <FileTabs 
+            :files="files" 
+            :active-file="activeFile"
+            @file-selected="setActiveFile"
+            class="flex-1 max-w-2xl mx-4"
+          />
+        </div>
+      </div>
+    </div>
+
+    <!-- Full screen map -->
+    <div class="flex-1 bg-white">
+      <OrgTreeView v-if="activeFile" :file="activeFile" :full-screen="true" />
     </div>
   </div>
 </template>
@@ -34,4 +62,9 @@ function handleFiles(uploadedFiles: OrgFile[]) {
 function setActiveFile(file: OrgFile) {
   activeFile.value = file
 }
+
+function showUploader() {
+  files.value = []
+  activeFile.value = null
+}
 </script>
\ No newline at end of file