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

packages/nc-gui/components.d.ts

@@ -80,6 +80,7 @@ declare module '@vue/runtime-core' {
     ClaritySuccessLine: typeof import('~icons/clarity/success-line')['default']
     EvaEmailOutline: typeof import('~icons/eva/email-outline')['default']
     IcBaselineMoreVert: typeof import('~icons/ic/baseline-more-vert')['default']
+    Icon: typeof import('~icons/ic/on')['default']
     IcOutlineInsertDriveFile: typeof import('~icons/ic/outline-insert-drive-file')['default']
     IcRoundEdit: typeof import('~icons/ic/round-edit')['default']
     IcRoundKeyboardArrowDown: typeof import('~icons/ic/round-keyboard-arrow-down')['default']

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

@@ -593,7 +593,7 @@ const setIcon = async (icon: string, table: TableType) => {
                     :data-testid="`tree-view-table-${table.title}`"
                     @click="addTableTab(table)"
                   >
-                    <LazyDashboardTreeViewTableEntry v-model="tables[idx]" />
+                    <LazyDashboardTreeViewTableEntry v-model="tables[idx]" :set-menu-context="setMenuContext" :icon="icon" :set-icon="setIcon" :active-table="activeTable" :open-rename-table-dialog="openRenameTableDialog" />
                   </div>
                 </div>
               </div>

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

@@ -1,31 +1,33 @@
 <script setup lang="ts">
-// import { Dropdown, Tooltip } from 'ant-design-vue'
+import { Dropdown, Tooltip } from 'ant-design-vue'
+import { Icon } from '@iconify/vue'
 import type { TableType } from 'nocodb-sdk'
+import type { ComputedRef, FunctionalComponent, SVGAttributes } from 'nuxt/dist/app/compat/capi'
 // import { useUIPermission } from '#imports'
 
 const props = defineProps<{
   modelValue: TableType
-  //   setMenuContext:
-  // icon
-  // setIcon
-  // activeTable
-  // openRenameTableDialog
-  // deleteTable
+  setMenuContext: (type: 'table' | 'main', value?: any) => void
+  icon: (table: TableType) => FunctionalComponent<SVGAttributes, {}> | undefined
+  setIcon: (icon: string, table: TableType) => Promise<void>
+  activeTable: ComputedRef<string | null | undefined>
+  openRenameTableDialog: (table: TableType, baseId?: string | undefined, rightClick?: boolean) => void
 }>()
 
+const { deleteTable } = useTable()
+
 // const emits = defineEmits(['update:modelValue'])
 
-const table = useVModel(props, 'modelValue') //, emits)
+const table = useVModel(props, 'modelValue') // , emits)
 
 // const { bases, isSharedBase } = useProject()
-// const { isUIAllowed } = useUIPermission()
+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 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'"
@@ -93,6 +95,6 @@ const table = useVModel(props, 'modelValue') //, emits)
           </a-menu>
         </template>
       </a-dropdown>
-    </div> -->
+    </div>
   </GeneralTooltip>
 </template>