refactor(gui-v2): menu style corrections

Signed-off-by: Pranav C <pranavxc@gmail.com>

packages/nc-gui-v2/components/smartsheet-toolbar/ViewActions.vue

@@ -44,8 +44,6 @@ const showWebhookDrawer = ref(false)
 
 const quickImportDialog = ref(false)
 
-const showApiSnippet = ref(false)
-
 const { isUIAllowed } = useUIPermission()
 
 const exportFile = async (exportType: ExportTypes) => {
@@ -153,7 +151,6 @@ async function changeLockType(type: LockType) {
             >
               <template #title>
                 <div v-t="['c:navdraw:preview-as']" class="nc-project-menu-item group px-0">
-
                   <SmartsheetToolbarLockType hide-tick :type="selectedView?.lock_type || LockType.Collaborative" />
 
                   <MaterialSymbolsChevronRightRounded
@@ -189,50 +186,51 @@ async function changeLockType(type: LockType) {
 
               <template #expandIcon></template>
               <a-menu-item>
-                <div v-t="['a:actions:download-csv']" class="nc-menu-item" @click="exportFile(ExportTypes.CSV)">
+                <div v-t="['a:actions:download-csv']" class="nc-project-menu-item" @click="exportFile(ExportTypes.CSV)">
                   <MdiDownloadOutline class="text-gray-500" />
                   <!-- Download as CSV -->
                   {{ $t('activity.downloadCSV') }}
                 </div>
               </a-menu-item>
               <a-menu-item>
-                <div v-t="['a:actions:download-excel']" class="nc-menu-item" @click="exportFile(ExportTypes.EXCEL)">
+                <div v-t="['a:actions:download-excel']" class="nc-project-menu-item" @click="exportFile(ExportTypes.EXCEL)">
                   <MdiDownloadOutline class="text-gray-500" />
                   <!-- Download as XLSX -->
                   {{ $t('activity.downloadExcel') }}
                 </div>
               </a-menu-item>
             </a-sub-menu>
-            <a-menu-divider />
-            <a-sub-menu key="upload">
-              <template #title>
-                <div v-t="['c:navdraw:preview-as']" class="nc-project-menu-item group">
-                  <MdiUpload class="group-hover:text-accent" />
-                  Upload
-                  <div class="flex-1" />
-
-                  <MaterialSymbolsChevronRightRounded
-                    class="transform group-hover:(scale-115 text-accent) text-xl text-gray-400"
-                  />
-                </div>
-              </template>
-
-              <template #expandIcon></template>
-              <a-menu-item>
-                <div
-                  v-if="isUIAllowed('csvImport') && !isView && !isPublicView"
-                  v-t="['a:actions:upload-csv']"
-                  class="nc-menu-item"
-                  :class="{ disabled: isLocked }"
-                  @click="!isLocked ? (quickImportDialog = true) : {}"
-                >
-                  <MdiUploadOutline class="text-gray-500" />
-                  <!-- Upload CSV -->
-                  {{ $t('activity.uploadCSV') }}
-                </div>
-              </a-menu-item>
-            </a-sub-menu>
-
+            <template v-if="isUIAllowed('csvImport') && !isView && !isPublicView">
+              <a-menu-divider />
+              <a-sub-menu key="upload">
+                <template #title>
+                  <div v-t="['c:navdraw:preview-as']" class="nc-project-menu-item group">
+                    <MdiUpload class="group-hover:text-accent" />
+                    Upload
+                    <div class="flex-1" />
+
+                    <MaterialSymbolsChevronRightRounded
+                      class="transform group-hover:(scale-115 text-accent) text-xl text-gray-400"
+                    />
+                  </div>
+                </template>
+
+                <template #expandIcon></template>
+                <a-menu-item>
+                  <div
+                    v-if="isUIAllowed('csvImport') && !isView && !isPublicView"
+                    v-t="['a:actions:upload-csv']"
+                    class="nc-project-menu-item"
+                    :class="{ disabled: isLocked }"
+                    @click="!isLocked ? (quickImportDialog = true) : {}"
+                  >
+                    <MdiUploadOutline class="text-gray-500" />
+                    <!-- Upload CSV -->
+                    {{ $t('activity.uploadCSV') }}
+                  </div>
+                </a-menu-item>
+              </a-sub-menu>
+            </template>
             <a-menu-divider />
             <a-menu-item>
               <div
@@ -257,17 +255,6 @@ async function changeLockType(type: LockType) {
                 {{ $t('objects.webhooks') }}
               </div>
             </a-menu-item>
-            <a-menu-item>
-              <div
-                v-if="isUIAllowed('webhook') && !isView && !isPublicView"
-                v-t="['c:actions:webhook']"
-                class="py-2 flex gap-2"
-                @click="showWebhookDrawer = true"
-              >
-                <MdiHook class="text-gray-500" />
-                <mdi-hook />{{ $t('objects.webhooks') }}
-              </div>
-            </a-menu-item>
           </a-menu-item-group>
         </a-menu>
       </template>
@@ -280,7 +267,6 @@ async function changeLockType(type: LockType) {
     <a-modal v-model:visible="sharedViewListDlg" title="Shared view list" width="max(900px,60vw)" :footer="null">
       <SmartsheetToolbarSharedViewList v-if="sharedViewListDlg" />
     </a-modal>
-
   </div>
 </template>
 

packages/nc-gui-v2/components/smartsheet/Toolbar.vue

@@ -5,15 +5,22 @@ import Reload from '~/components/smartsheet/sidebar/toolbar/Reload.vue'
 import ToggleDrawer from '~/components/smartsheet/sidebar/toolbar/ToggleDrawer.vue'
 
 const { isGrid, isForm, isGallery } = useSmartsheetStoreOrThrow()
-const { allowCSVDownload } = useSharedView()
 const isPublic = inject(IsPublicInj, ref(false))
+const { allowCSVDownload } = useSharedView()
 
 const { isOpen } = useSidebar()
 </script>
 
 <template>
-  <div class="nc-table-toolbar w-full py-1 flex gap-1 items-center h-[var(--toolbar-height)] px-2 border-b" style="z-index: 7">
-    <SmartsheetToolbarViewActions v-if="isGrid || isGallery" :show-system-fields="false" class="ml-1" />
+  <div
+    class="nc-table-toolbar w-full py-1 flex gap-1 items-center h-[var(--toolbar-height)] px-2 border-b overflow-x-hidden"
+    style="z-index: 7"
+  >
+    <SmartsheetToolbarViewActions
+      v-if="(isGrid && !isPublic) || (isGrid && isPublic && allowCSVDownload)"
+      :show-system-fields="false"
+      class="ml-1"
+    />
 
     <SmartsheetToolbarFieldsMenu v-if="isGrid || isGallery" :show-system-fields="false" class="ml-1" />
 
@@ -23,7 +30,6 @@ const { isOpen } = useSidebar()
 
     <SmartsheetToolbarShareView v-if="(isForm || isGrid) && !isPublic" />
 
-    <!--    <SmartsheetToolbarMoreActions v-if="(isGrid && !isPublic) || (isGrid && isPublic && allowCSVDownload)" /> -->
     <div class="flex-1" />
 
     <Reload />

packages/nc-gui-v2/components/smartsheet/sidebar/MenuBottom.vue

@@ -1,6 +1,6 @@
 <script lang="ts" setup>
 import { ViewTypes } from 'nocodb-sdk'
-import { ref, useNuxtApp } from '#imports'
+import { ref } from '#imports'
 import { viewIcons } from '~/utils'
 
 interface Emits {

packages/nc-gui-v2/components/smartsheet/sidebar/toolbar/index.vue

@@ -1,22 +1,15 @@
 <script lang="ts" setup>
-import AddRow from './AddRow.vue'
-import LockMenu from './LockMenu.vue'
-import Reload from './Reload.vue'
 import ExportCache from './ExportCache.vue'
 import DeleteCache from './DeleteCache.vue'
 import DebugMeta from './DebugMeta.vue'
 import ToggleDrawer from './ToggleDrawer.vue'
 import { IsFormInj } from '#imports'
 
-const { isUIAllowed } = useUIPermission()
-
 const isForm = inject(IsFormInj)
 
 const debug = $ref(false)
 
 const clickCount = $ref(0)
-
-const { isOpen } = useSidebar({ storageKey: 'nc-right-sidebar' })
 </script>
 
 <template>
@@ -31,7 +24,8 @@ const { isOpen } = useSidebar({ storageKey: 'nc-right-sidebar' })
     "
   >
     <slot name="start" />
-
+    <ToggleDrawer />
+    <span></span>
     <template v-if="debug">
       <ExportCache />
 
@@ -45,22 +39,7 @@ const { isOpen } = useSidebar({ storageKey: 'nc-right-sidebar' })
 
       <div class="dot" />
     </template>
-    <!--    <h3 class="pt-3 px-3 text-xs text-gray-500 font-semibold">{{ $t('objects.views') }}</h3> -->
-
-    <!--    <LockMenu v-if="isUIAllowed('view-type')" @click.stop /> -->
-
-    <!--    <div v-if="isUIAllowed('view-type')" class="dot" /> -->
 
-    <!--    <Reload @click.stop /> -->
-
-    <!--    <div class="dot" /> -->
-
-    <!--    <AddRow v-if="isUIAllowed('xcDatatableEditable')" @click.stop /> -->
-
-    <!--    <div :class="{ 'w-[calc(100%_+_16px)] h-[1px] bg-gray-200 mt-1 -ml-1': !isOpen, 'dot': isOpen }" /> -->
-
-    <ToggleDrawer />
-    <span></span>
     <slot name="end" />
   </div>
   <div v-else>

packages/nc-gui-v2/composables/useTheme/index.ts

@@ -1,7 +1,7 @@
 import { ConfigProvider } from 'ant-design-vue'
 import type { Theme as AntTheme } from 'ant-design-vue/es/config-provider'
 import { useStorage } from '@vueuse/core'
-import { NOCO, hexToRGB, themeV2Colors, toRefs, useCssVar, useInjectionState } from '#imports'
+import { NOCO, hexToRGB, themeV2Colors, useCssVar, useInjectionState } from '#imports'
 
 interface ThemeConfig extends AntTheme {
   primaryColor: string