feat: Fixed issue with loading table and view from sidebar, fixed node click for mobile in sidebar

packages/nc-gui/assets/style.scss

@@ -598,7 +598,18 @@ input[type='number'] {
 }
 
 .nc-sidebar-node {
-  @apply !xs:(min-h-8.9 max-h-8.9 hover:bg-gray-50);
+  @apply !xs:(min-h-12 max-h-12 hover:bg-gray-50 ml-1.5);
+
+  .nc-emoji {
+    @apply xs:(text-lg);
+  }
+  .material-symbols, .nc-icon {
+    @apply !xs:(text-xl -mt-0.25);
+  }
+
+  .nc-sidebar-node-title {
+    @apply xs:(text-base);
+  }
 
   .nc-sidebar-node-btn:not(.nc-sidebar-expand) {
     @apply !xs:(hidden)

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

@@ -231,7 +231,7 @@ const addNewProjectChildEntity = async () => {
 // todo: temp
 const isSharedBase = ref(false)
 
-const onTouchStart = async (project: NcProject, ignoreNavigation?: boolean, toggleIsExpanded?: boolean) => {
+const onProjectClick = async (project: NcProject, ignoreNavigation?: boolean, toggleIsExpanded?: boolean) => {
   if (!project) {
     return
   }
@@ -275,12 +275,6 @@ const onTouchStart = async (project: NcProject, ignoreNavigation?: boolean, togg
   }
 }
 
-const onProjectClick = async (project: NcProject, ignoreNavigation?: boolean, toggleIsExpanded?: boolean) => {
-  if (isMobileMode.value) return
-
-  onTouchStart(project, ignoreNavigation, toggleIsExpanded)
-}
-
 function openErdView(base: BaseType) {
   activeBaseId.value = base.id
   isErdModalOpen.value = !isErdModalOpen.value
@@ -401,7 +395,6 @@ const DlgProjectDuplicateOnOk = async (jobData: { id: string; project_id: string
             size="xxsmall"
             class="nc-sidebar-node-btn nc-sidebar-expand ml-0.75 !xs:visible"
             @click="onProjectClick(project, true, true)"
-            @touchstart="onTouchStart(project, true, true)"
           >
             <GeneralIcon
               icon="triangleFill"
@@ -410,7 +403,7 @@ const DlgProjectDuplicateOnOk = async (jobData: { id: string; project_id: string
             />
           </NcButton>
 
-          <div class="flex items-center mr-1" @click="onProjectClick(project)" @touchstart="onTouchStart(project)">
+          <div class="flex items-center mr-1" @click="onProjectClick(project)">
             <div class="flex items-center select-none w-6 h-full">
               <a-spin
                 v-if="project.isLoading"
@@ -446,19 +439,14 @@ const DlgProjectDuplicateOnOk = async (jobData: { id: string; project_id: string
           />
           <span
             v-else
-            class="capitalize text-ellipsis overflow-hidden select-none"
+            class="nc-sidebar-node-title capitalize text-ellipsis overflow-hidden select-none"
             :style="{ wordBreak: 'keep-all', whiteSpace: 'nowrap', display: 'inline' }"
             :class="{ 'text-black font-semibold': activeProjectId === project.id && projectViewOpen }"
             @click="onProjectClick(project)"
-            @touchstart="onTouchStart(project)"
           >
             {{ project.title }}
           </span>
-          <div
-            :class="{ 'flex flex-grow h-full': !editMode }"
-            @click="onProjectClick(project)"
-            @touchstart="onTouchStart(project)"
-          ></div>
+          <div :class="{ 'flex flex-grow h-full': !editMode }" @click="onProjectClick(project)"></div>
 
           <NcDropdown v-model:visible="isOptionsOpen" :trigger="['click']">
             <NcButton

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

@@ -21,6 +21,8 @@ const baseIndex = toRef(props, 'baseIndex')
 
 const base = computed(() => project.value?.bases?.[baseIndex.value])
 
+const { isMobileMode } = useGlobal()
+
 const { projectTables } = storeToRefs(useTablesStore())
 const tables = computed(() => projectTables.value.get(project.value.id!) ?? [])
 
@@ -44,6 +46,7 @@ const sortables: Record<string, Sortable> = {}
 const initSortable = (el: Element) => {
   const base_id = el.getAttribute('nc-base')
   if (!base_id) return
+  if (isMobileMode.value) return
 
   if (sortables[base_id]) sortables[base_id].destroy()
   Sortable.create(el as HTMLLIElement, {

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

@@ -87,7 +87,7 @@ const canUserEditEmote = computed(() => {
 const isExpanded = ref(false)
 const isLoading = ref(false)
 
-const onTouchExpand = async () => {
+const onExpand = async () => {
   if (isExpanded.value) {
     isExpanded.value = false
     return
@@ -104,13 +104,7 @@ const onTouchExpand = async () => {
   }
 }
 
-const onExpand = async () => {
-  if (isMobileMode.value) return
-
-  onTouchExpand()
-}
-
-const onTouchOpenTable = async () => {
+const onOpenTable = async () => {
   isLoading.value = true
   try {
     await _openTable(table.value)
@@ -122,12 +116,6 @@ const onTouchOpenTable = async () => {
   }
 }
 
-const onOpenTable = async () => {
-  if (isMobileMode.value) return
-
-  onTouchOpenTable()
-}
-
 watch(
   () => activeView.value?.id,
   () => {
@@ -172,16 +160,9 @@ const isTableOpened = computed(() => {
         :data-testid="`nc-tbl-side-node-${table.title}`"
         @contextmenu="setMenuContext('table', table)"
         @click="onOpenTable"
-        @touchstart="onTouchOpenTable"
       >
         <div class="flex flex-row h-full items-center">
-          <NcButton
-            type="text"
-            size="xxsmall"
-            class="nc-sidebar-node-btn nc-sidebar-expand"
-            @click.stop="onExpand"
-            @touchstart.stop="onTouchExpand"
-          >
+          <NcButton type="text" size="xxsmall" class="nc-sidebar-node-btn nc-sidebar-expand" @click.stop="onExpand">
             <GeneralIcon
               icon="triangleFill"
               class="nc-sidebar-base-node-btns group-hover:visible invisible cursor-pointer transform transition-transform duration-500 h-1.5 w-1.5 !text-gray-600 rotate-90"
@@ -233,7 +214,7 @@ const isTableOpened = computed(() => {
         </div>
 
         <span
-          class="nc-tbl-title capitalize text-ellipsis overflow-hidden select-none"
+          class="nc-tbl-title nc-sidebar-node-title capitalize text-ellipsis overflow-hidden select-none"
           :class="{
             'text-black !font-medium': isTableOpened,
           }"

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

@@ -32,7 +32,7 @@ const emits = defineEmits<Emits>()
 const project = inject(ProjectInj)!
 const table = inject(SidebarTableInj)!
 
-const { isUIAllowed } = useRoles()
+const { isMobileMode } = useGlobal()
 
 const { $e } = useNuxtApp()
 
@@ -178,6 +178,7 @@ async function onSortEnd(evt: SortableEvent, undo = false) {
 
 const initSortable = (el: HTMLElement) => {
   if (sortable) sortable.destroy()
+  if (isMobileMode.value) return
 
   sortable = new Sortable(el, {
     // handle: '.nc-drag-icon',

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

@@ -78,10 +78,6 @@ const onClick = useDebounceFn(() => {
   emits('changeView', vModel.value)
 }, 250)
 
-const onTouchClick = () => {
-  emits('changeView', vModel.value)
-}
-
 /** Enable editing view name on dbl click */
 function onDblClick() {
   if (!isUIAllowed('viewCreateOrEdit')) return
@@ -222,7 +218,6 @@ function onRef(el: HTMLElement) {
     :data-testid="`view-sidebar-view-${vModel.alias || vModel.title}`"
     @dblclick.stop="onDblClick"
     @click="onClick"
-    @touchstart="onTouchClick"
   >
     <div
       :ref="onRef"
@@ -258,7 +253,7 @@ function onRef(el: HTMLElement) {
 
       <div
         v-else
-        class="capitalize text-ellipsis overflow-hidden select-none w-full"
+        class="nc-sidebar-node-title capitalize text-ellipsis overflow-hidden select-none w-full"
         data-testid="sidebar-view-title"
         :class="{
           'font-medium': activeView?.id === vModel.id,

packages/nc-gui/components/general/EmojiPicker.vue

@@ -80,7 +80,7 @@ const showClearButton = computed(() => {
 <template>
   <a-dropdown v-model:visible="isOpen" :trigger="['click']" :disabled="readonly">
     <div
-      class="flex flex-row justify-center items-center select-none rounded-md"
+      class="flex flex-row justify-center items-center select-none rounded-md nc-emoji"
       :class="{
         'hover:bg-gray-500 hover:bg-opacity-15 cursor-pointer': !readonly,
         'bg-gray-500 bg-opacity-15': isOpen,