mobile optimisations - put views into the tree view on left sidebar (WIP)

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

@@ -580,7 +580,7 @@ const setIcon = async (icon: string, table: TableType) => {
                   :nc-base="bases[0].id"
                 >
                   <div
-                    v-for="table of tables.filter((table) => table.base_id === bases[0].id)"
+                    v-for="(table, idx) of tables.filter((table) => table.base_id === bases[0].id)"
                     :key="table.id"
                     v-e="['a:table:open']"
                     :class="[
@@ -593,78 +593,7 @@ const setIcon = async (icon: string, table: TableType) => {
                     :data-testid="`tree-view-table-${table.title}`"
                     @click="addTableTab(table)"
                   >
-                    <GeneralTooltip class="pl-2 pr-3 py-2" modifier-key="Alt">
+                    <LazyDashboardTreeViewTableEntry v-model="tables[idx]" />
-                      <template #title>{{ table.table_name }}</template>
-                      <div class="flex items-center gap-2 h-full" @contextmenu="setMenuContext('table', table)">
-                        <div class="flex w-auto" :data-testid="`tree-view-table-draggable-handle-${table.title}`">
-                          <component
-                            :is="isUIAllowed('tableIconCustomisation') ? Dropdown : 'div'"
-                            trigger="click"
-                            destroy-popup-on-hide
-                            class="flex items-center"
-                            @click.stop
-                          >
-                            <div class="flex items-center" @click.stop>
-                              <component :is="isUIAllowed('tableIconCustomisation') ? Tooltip : 'div'">
-                                <span v-if="table.meta?.icon" :key="table.meta?.icon" class="nc-table-icon flex items-center">
-                                  <Icon
-                                    :key="table.meta?.icon"
-                                    :data-testid="`nc-icon-${table.meta?.icon}`"
-                                    class="text-xl"
-                                    :icon="table.meta?.icon"
-                                  ></Icon>
-                                </span>
-                                <component
-                                  :is="icon(table)"
-                                  v-else
-                                  class="nc-table-icon nc-view-icon w-5"
-                                  :class="{ 'group-hover:text-gray-500': isUIAllowed('treeview-drag-n-drop') }"
-                                />
-
-                                <template v-if="isUIAllowed('tableIconCustomisation')" #title>Change icon</template>
-                              </component>
-                            </div>
-                            <template v-if="isUIAllowed('tableIconCustomisation')" #overlay>
-                              <GeneralEmojiIcons class="shadow bg-white p-2" @select-icon="setIcon($event, table)" />
-                            </template>
-                          </component>
-                        </div>
-
-                        <div class="nc-tbl-title flex-1">
-                          <GeneralTruncateText :key="table.title" :length="activeTable === table.id ? 18 : 20">{{
-                            table.title
-                          }}</GeneralTruncateText>
-                        </div>
-
-                        <a-dropdown
-                          v-if="!isSharedBase && (isUIAllowed('table-rename') || isUIAllowed('table-delete'))"
-                          :trigger="['click']"
-                          @click.stop
-                        >
-                          <MdiDotsVertical class="transition-opacity opacity-0 group-hover:opacity-100 outline-0" />
-
-                          <template #overlay>
-                            <a-menu class="!py-0 rounded text-sm">
-                              <a-menu-item v-if="isUIAllowed('table-rename')" @click="openRenameTableDialog(table, bases[0].id)">
-                                <div class="nc-project-menu-item" :data-testid="`sidebar-table-rename-${table.title}`">
-                                  {{ $t('general.rename') }}
-                                </div>
-                              </a-menu-item>
-
-                              <a-menu-item
-                                v-if="isUIAllowed('table-delete')"
-                                :data-testid="`sidebar-table-delete-${table.title}`"
-                                @click="deleteTable(table)"
-                              >
-                                <div class="nc-project-menu-item">
-                                  {{ $t('general.delete') }}
-                                </div>
-                              </a-menu-item>
-                            </a-menu>
-                          </template>
-                        </a-dropdown>
-                      </div>
-                    </GeneralTooltip>
                   </div>
                 </div>
               </div>
@@ -1016,7 +945,10 @@ const setIcon = async (icon: string, table: TableType) => {
 
       <LazyGeneralHelpAndSupport class="color-transition px-2 text-gray-500 cursor-pointer select-none hover:text-accent" />
 
-      <GeneralJoinCloud v-if="!isMobileMode" class="color-transition px-2 text-gray-500 cursor-pointer select-none hover:text-accent" />
+      <GeneralJoinCloud
+        v-if="!isMobileMode"
+        class="color-transition px-2 text-gray-500 cursor-pointer select-none hover:text-accent"
+      />
 
       <GithubButton
         v-if="!isMobileMode"

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

@@ -0,0 +1,98 @@
+<script setup lang="ts">
+// import { Dropdown, Tooltip } from 'ant-design-vue'
+import type { TableType } from 'nocodb-sdk'
+// import { useUIPermission } from '#imports'
+
+const props = defineProps<{
+  modelValue: TableType
+  //   setMenuContext:
+  // icon
+  // setIcon
+  // activeTable
+  // openRenameTableDialog
+  // deleteTable
+}>()
+
+// const emits = defineEmits(['update:modelValue'])
+
+const table = useVModel(props, 'modelValue') //, emits)
+
+// const { bases, isSharedBase } = useProject()
+// const { isUIAllowed } = useUIPermission()
+</script>
+
+<template>
+  <GeneralTooltip class="pl-2 pr-3 py-2" modifier-key="Alt">
+    <template #title>{{ table.table_name }}</template>
+    {{  table.table_name }}
+    <!-- <div class="flex items-center gap-2 h-full" @contextmenu="setMenuContext('table', table)">
+      <div class="flex w-auto" :data-testid="`tree-view-table-draggable-handle-${table.title}`">
+        <component
+          :is="isUIAllowed('tableIconCustomisation') ? Dropdown : 'div'"
+          trigger="click"
+          destroy-popup-on-hide
+          class="flex items-center"
+          @click.stop
+        >
+          <div class="flex items-center" @click.stop>
+            <component :is="isUIAllowed('tableIconCustomisation') ? Tooltip : 'div'">
+              <span v-if="table.meta?.icon" :key="table.meta?.icon" class="nc-table-icon flex items-center">
+                <Icon
+                  :key="table.meta?.icon"
+                  :data-testid="`nc-icon-${table.meta?.icon}`"
+                  class="text-xl"
+                  :icon="table.meta?.icon"
+                ></Icon>
+              </span>
+              <component
+                :is="icon(table)"
+                v-else
+                class="nc-table-icon nc-view-icon w-5"
+                :class="{ 'group-hover:text-gray-500': isUIAllowed('treeview-drag-n-drop') }"
+              />
+
+              <template v-if="isUIAllowed('tableIconCustomisation')" #title>Change icon</template>
+            </component>
+          </div>
+          <template v-if="isUIAllowed('tableIconCustomisation')" #overlay>
+            <GeneralEmojiIcons class="shadow bg-white p-2" @select-icon="setIcon($event, table)" />
+          </template>
+        </component>
+      </div>
+
+      <div class="nc-tbl-title flex-1">
+        <GeneralTruncateText :key="table.title" :length="activeTable === table.id ? 18 : 20">{{
+          table.title
+        }}</GeneralTruncateText>
+      </div>
+
+      <a-dropdown
+        v-if="!isSharedBase && (isUIAllowed('table-rename') || isUIAllowed('table-delete'))"
+        :trigger="['click']"
+        @click.stop
+      >
+        <MdiDotsVertical class="transition-opacity opacity-0 group-hover:opacity-100 outline-0" />
+
+        <template #overlay>
+          <a-menu class="!py-0 rounded text-sm">
+            <a-menu-item v-if="isUIAllowed('table-rename')" @click="openRenameTableDialog(table, bases[0].id)">
+              <div class="nc-project-menu-item" :data-testid="`sidebar-table-rename-${table.title}`">
+                {{ $t('general.rename') }}
+              </div>
+            </a-menu-item>
+
+            <a-menu-item
+              v-if="isUIAllowed('table-delete')"
+              :data-testid="`sidebar-table-delete-${table.title}`"
+              @click="deleteTable(table)"
+            >
+              <div class="nc-project-menu-item">
+                {{ $t('general.delete') }}
+              </div>
+            </a-menu-item>
+          </a-menu>
+        </template>
+      </a-dropdown>
+    </div> -->
+  </GeneralTooltip>
+</template>