mobile optimisations - work on merging right and left sidebar (WIP)

packages/nc-gui/components/dashboard/TreeView.vue

@@ -582,6 +582,7 @@ const setIcon = async (icon: string, table: TableType) => {
                   :key="`sortable-${bases[0].id}-${bases[0].id && bases[0].id in keys ? keys[bases[0].id] : '0'}`"
                   :nc-base="bases[0].id"
                 >
+                MARKER TABLES IN LEFT SIDEBAR
                   <div
                     v-for="table of tables.filter((table) => table.base_id === bases[0].id)"
                     :key="table.id"
@@ -669,6 +670,7 @@ const setIcon = async (icon: string, table: TableType) => {
                       </div>
                     </GeneralTooltip>
                   </div>
+                  MARKER TABLES IN LEFT SIDEBAR END
                 </div>
               </div>
             </div>

packages/nc-gui/components/smartsheet/sidebar/MenuTop.vue

@@ -234,6 +234,8 @@ const setIcon = async (icon: string, view: ViewType) => {
 </script>
 
 <template>
+  <div>
+    views in menutop: {{ JSON.stringify(views) }}
     <a-menu ref="menuRef" :class="{ dragging }" class="nc-views-menu flex-1" :selected-keys="selected">
       <!-- Lazy load breaks menu item active styles, i.e. styles never change even when active item changes -->
       <SmartsheetSidebarRenameableMenuItem
@@ -255,6 +257,7 @@ const setIcon = async (icon: string, view: ViewType) => {
         @select-icon="setIcon($event, view)"
       />
     </a-menu>
+  </div>
 </template>
 
 <style lang="scss">

packages/nc-gui/components/smartsheet/sidebar/mobile.vue

@@ -135,11 +135,21 @@ function onOpenModal({
     close(1000)
   }
 }
+
+onMounted(async () => {
+  await loadViews()
+})
+
 </script>
 
 <template>
   <div>
     MOBILE
+    <!-- <br />
+    META: {{ JSON.stringify(meta) }} -->
+    <br />
+    VIEWS: {{ JSON.stringify(views.length) }}
+    <br />
     <a-layout-sider
       ref="sidebar"
       :collapsed="sidebarCollapsed"

packages/nc-gui/components/tabs/Smartsheet.vue

@@ -103,13 +103,15 @@ onMounted(() => {
   $globalEventBus.on(FOO)
 })
 
+// SmartsheetSidebarMobile MARKER
 </script>
 
 <template>
   <div class="nc-container flex h-full">
-    <SmartsheetSidebarMobile v-if="meta && isMobileMode" v-show="isMobileRightSidebarOpen" class="nc-left-sidebar-mobile" />
+    <!-- {{  JSON.stringify(metas) }} -->
+    <!-- <SmartsheetSidebarMobile v-if="meta && isMobileMode" v-show="isMobileRightSidebarOpen" class="nc-left-sidebar-mobile" /> -->
     <div class="flex flex-col h-full flex-1 min-w-0" ref="mainArea">
-      <LazySmartsheetToolbar />
+      LazySmartsheetToolbar: <LazySmartsheetToolbar />
 
       <Transition name="layout" mode="out-in">
         <template v-if="meta">

packages/nc-gui/pages/[projectType]/[projectId]/index.vue

@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import tinycolor from 'tinycolor2'
+import type { TableType } from 'nocodb-sdk'
 import type { GlobalEvents } from '~/lib'
 import {
   TabType,
@@ -41,6 +42,8 @@ const { t } = useI18n()
 
 const { $e, $globalEventBus } = useNuxtApp()
 
+const { activeTab } = useTabs()
+
 const route = useRoute()
 
 const router = useRouter()
@@ -246,6 +249,18 @@ useEventListener(document, 'keydown', async (e: KeyboardEvent) => {
     }
   }
 })
+
+// const { bases, tables, loadTables } = useProject()
+const { metas } = useMetas()
+
+// const { tables } = useProject()
+
+// const activeTable = computed(() => ([TabType.TABLE, TabType.VIEW].includes(activeTab.value?.type) ? activeTab.value.id : null))
+
+const meta = computed<TableType | undefined>(() => activeTab.value && metas.value[activeTab.value.id!])
+
+provide(MetaInj, meta)
+
 </script>
 
 <template>
@@ -586,7 +601,7 @@ useEventListener(document, 'keydown', async (e: KeyboardEvent) => {
             :class="{ 'nc-sidebar-left-toggle-icon': !isMobileMode }"
           >
             <!-- <div>OUTER INDEX - isOpen: {{ isOpen }}</div> -->
-            <MdiBackburger
+            FOO<MdiBackburger
               v-e="['c:grid:toggle-navdraw']"
               class="cursor-pointer transform transition-transform duration-500"
               :class="{ 'rotate-180': !isOpen }"
@@ -596,6 +611,11 @@ useEventListener(document, 'keydown', async (e: KeyboardEvent) => {
         </div>
 
         <LazyDashboardTreeView @create-base-dlg="toggleDialog(true, 'dataSources')" />
+        <!-- v-show="isMobileRightSidebarOpen" -->
+        SmartsheetSidebarMobile IN INDEX<SmartsheetSidebarMobile
+          v-if="meta && isMobileMode"
+          class="nc-left-sidebar-mobile"
+        />SmartsheetSidebarMobile IN INDEX END
       </a-layout-sider>
     </template>
 

packages/nc-gui/pages/[projectType]/[projectId]/index/index/index.vue

@@ -188,7 +188,7 @@ function onDropZoneClick(e: MouseEvent) {
         </div>
 
         <a-button type="primary" ghost class="create-table-btn">
-          <span class="prose text-[1rem] text-primary z-50" @click.stop="openCreateTable">{{ $t('tooltip.addTable') }}</span>
+          TEST<span class="prose text-[1rem] text-primary z-50" @click.stop="openCreateTable">{{ $t('tooltip.addTable') }}</span>
         </a-button>
       </div>
     </div>