feat(ui): folder tab view (#260)

packages/ui/src/components/FolderPanel.vue

@@ -0,0 +1,81 @@
+<template>
+    <div width="600px" style="margin-left: 1rem; margin-right: 1rem; margin-top: 1rem;" v-if="collectionItem">
+        <div v-if="collectionItem._type === 'request_group'">
+            <div style="padding-bottom: 1rem"></div>
+            <div class="request-panel-tabs-context">
+                <div style="font-weight: 500; margin-bottom: var(--label-margin-bottom)">Headers</div>
+                <div>
+                    <RequestPanelHeaders :collection-item="collectionItem" :collection-item-environment-resolved="envVariables"></RequestPanelHeaders>
+                </div>
+                <InfoTip/>
+            </div>
+
+            <div style="padding-bottom: 1rem"></div>
+
+            <div class="request-panel-tabs-context">
+                <div style="font-weight: 500; margin-bottom: var(--label-margin-bottom)">Auth</div>
+                <div>
+                    <RequestPanelAuth :collection-item="collectionItem" :collection-item-environment-resolved="envVariables"></RequestPanelAuth>
+                </div>
+                <InfoTip/>
+            </div>
+        </div>
+
+        <div style="padding-bottom: 1rem"></div>
+    </div>
+</template>
+
+<script>
+import RequestPanelHeaders from '../../src/components/RequestPanelHeaders.vue'
+import RequestPanelAuth from '../../src/components/RequestPanelAuth.vue'
+
+export default {
+    directives: {
+        focus: {
+            mounted(element) {
+                element.focus()
+            }
+        }
+    },
+    props: {
+        collectionItem: Object
+    },
+    components: {
+        RequestPanelHeaders,
+        RequestPanelAuth,
+        InfoTip: {
+            template: `
+              <div style="margin-top: 0.5rem; color: var(--modal-tip-text-color); font-weight: normal; font-style: italic;">
+                This will be applied to all requests in this folder and its subfolders
+              </div>
+            `
+        }
+    },
+    data() {
+        return {
+            envVariables: {},
+        }
+    },
+    watch: {
+        collectionItem: {
+            immediate: true,
+            handler() {
+                this.loadEnvVariables()
+            }
+        }
+    },
+    methods: {
+        async loadEnvVariables() {
+            try {
+                if(this.collectionItem) {
+                    const request = JSON.parse(JSON.stringify(this.collectionItem))
+                    const { environment } = await this.$store.dispatch('getEnvironmentForRequest', { collectionItem: request, includeSelf: true })
+                    this.envVariables = environment
+                }
+            } catch (error) {
+                console.error('Error loading environment variables:', error)
+            }
+        },
+    }
+}
+</script>

packages/ui/src/components/SidebarItem.vue

@@ -106,6 +106,7 @@ export default {
             if(sidebarItem._type === 'request_group') {
                 sidebarItem.collapsed = !(sidebarItem.collapsed)
                 this.$store.dispatch('saveCollectionItemCollapsedState', { _id: sidebarItem._id, collapsed: sidebarItem.collapsed })
+                this.$store.dispatch('addTab', sidebarItem)
             }
         },
         handleSidebarItemDoubleClick(sidebarItem) {

packages/ui/src/components/Tab.vue

@@ -36,6 +36,10 @@
     <section class="request-response-panels" v-if="collectionItem && collectionItem._type === 'socket'">
         <SocketPanel :key="collectionItem._id" :active-tab="collectionItem" />
     </section>
+
+    <section class="request-response-panels" v-show="collectionItem && collectionItem._type === 'request_group'">
+        <FolderPanel :collection-item="collectionItem" @update:collection-item="updateCollectionItem" />
+    </section>
 </template>
 
 <script setup lang="ts">
@@ -48,6 +52,7 @@ import { vResizable } from '@/directives/vResizable'
 import { Store, useStore } from 'vuex'
 import { findItemInTreeById } from '@/helpers'
 import { State } from '@/global'
+import FolderPanel from '@/components/FolderPanel.vue'
 
 const props = defineProps<{
     collectionItem: CollectionItem | null;

packages/ui/src/components/TabBar.vue

@@ -178,6 +178,10 @@ export default {
             if(tab._type === 'socket') {
                 return 'SOCK'
             }
+
+            if(tab._type === 'request_group') {
+                return ''
+            }
         },
         scrollTabs(event) {
             this.$refs.tabContainer.scrollLeft += event.deltaY

packages/ui/src/components/modals/SidebarSettingsModal.vue

@@ -18,28 +18,6 @@
                 </label>
             </div>
 
-            <div v-if="collectionItem._type === 'request_group'">
-                <div style="padding-bottom: 1rem"></div>
-                <hr style="border: none; height: 1px; background-color: var(--default-border-color);">
-                <div style="padding-bottom: 1rem"></div>
-                <div class="request-panel-tabs-context">
-                    <div style="font-weight: 500; margin-bottom: var(--label-margin-bottom)">Headers</div>
-                    <div>
-                        <RequestPanelHeaders :collection-item="collectionItem" :collection-item-environment-resolved="envVariables"></RequestPanelHeaders>
-                    </div>
-                    <div style="margin-top: 0.5rem; color: var(--modal-tip-text-color); font-weight: normal; font-style: italic;">These will be applied to all requests in this folder and its subfolders</div>
-                </div>
-
-                <div style="padding-bottom: 1rem"></div>
-                <div class="request-panel-tabs-context">
-                    <div style="font-weight: 500; margin-bottom: var(--label-margin-bottom)">Auth</div>
-                    <div>
-                        <RequestPanelAuth :collection-item="collectionItem" :collection-item-environment-resolved="envVariables"></RequestPanelAuth>
-                    </div>
-                    <div style="margin-top: 0.5rem; color: var(--modal-tip-text-color); font-weight: normal; font-style: italic;">This will be applied to all requests in this folder and its subfolders</div>
-                </div>
-            </div>
-
             <div style="padding-bottom: 1rem"></div>
 
             <template #footer>
@@ -53,8 +31,6 @@
 import Modal from '@/components/Modal.vue'
 import { getCollectionForWorkspace } from '@/db'
 import { flattenTree, sortTree, toTree, prependParentTitleToChildTitle } from '@/helpers'
-import RequestPanelHeaders from '../RequestPanelHeaders.vue'
-import RequestPanelAuth from '../RequestPanelAuth.vue'
 
 export default {
     directives: {
@@ -70,13 +46,10 @@ export default {
     },
     components: {
         Modal,
-        RequestPanelHeaders,
-        RequestPanelAuth,
     },
     data() {
         return {
             activeWorkspaceFolders: [],
-            envVariables: {},
         }
     },
     computed: {
@@ -130,10 +103,6 @@ export default {
         showModal() {
             if(this.showModal) {
                 this.getAllFolders()
-
-                if(this.collectionItem._type === 'request_group') {
-                    this.loadEnvVariables()
-                }
             }
         }
     },
@@ -164,11 +133,6 @@ export default {
             activeWorkspaceFolders = flattenTree(activeWorkspaceFolders)
             this.activeWorkspaceFolders = activeWorkspaceFolders
         },
-        async loadEnvVariables() {
-            const request = JSON.parse(JSON.stringify(this.collectionItem))
-            const { environment } = await this.$store.dispatch('getEnvironmentForRequest', { collectionItem: request, includeSelf: true })
-            this.envVariables = environment
-        },
     }
 }
 </script>