From 9f4e7894187c2b2a34d0d89d02a7ce90ac49bd89 Mon Sep 17 00:00:00 2001
From: Pranav C <pranavxc@gmail.com>
Date: Tue, 26 Jul 2022 17:52:36 +0530
Subject: [PATCH] feat(gui-v2): add all options in toolbar

Signed-off-by: Pranav C <pranavxc@gmail.com>
---
 .../components/smartsheet-toolbar/AddRow.vue  |  10 +
 .../smartsheet-toolbar/ColumnFilterMenu.vue   |  14 +-
 .../smartsheet-toolbar/DeleteTable.vue        |   9 +
 .../smartsheet-toolbar/FieldsMenu.vue         |  14 +-
 .../smartsheet-toolbar/LockMenu.vue           | 182 ++++++++----
 .../smartsheet-toolbar/MoreActions.vue        | 276 ++----------------
 .../components/smartsheet-toolbar/Reload.vue  |  11 +
 .../smartsheet-toolbar/SearchData.vue         |   4 +-
 .../smartsheet-toolbar/ShareView.vue          |  18 ++
 .../smartsheet-toolbar/SortListMenu.vue       |  15 +-
 .../smartsheet-toolbar/ToggleDrawer.vue       |  14 +
 .../components/smartsheet/Toolbar.vue         |  14 +-
 .../nc-gui-v2/components/tabs/Smartsheet.vue  |   4 +-
 13 files changed, 228 insertions(+), 357 deletions(-)
 create mode 100644 packages/nc-gui-v2/components/smartsheet-toolbar/AddRow.vue
 create mode 100644 packages/nc-gui-v2/components/smartsheet-toolbar/DeleteTable.vue
 create mode 100644 packages/nc-gui-v2/components/smartsheet-toolbar/Reload.vue
 create mode 100644 packages/nc-gui-v2/components/smartsheet-toolbar/ShareView.vue
 create mode 100644 packages/nc-gui-v2/components/smartsheet-toolbar/ToggleDrawer.vue

diff --git a/packages/nc-gui-v2/components/smartsheet-toolbar/AddRow.vue b/packages/nc-gui-v2/components/smartsheet-toolbar/AddRow.vue
new file mode 100644
index 0000000000..9cd8e47b82
--- /dev/null
+++ b/packages/nc-gui-v2/components/smartsheet-toolbar/AddRow.vue
@@ -0,0 +1,10 @@
+<script setup lang="ts">
+import MdiAddIcon from '~icons/mdi/plus-outline '
+const emit = defineEmits(['add-row'])
+</script>
+
+<template>
+  <MdiAddIcon class="text-grey" @click="emit('add-row')" />
+</template>
+
+<style scoped></style>
diff --git a/packages/nc-gui-v2/components/smartsheet-toolbar/ColumnFilterMenu.vue b/packages/nc-gui-v2/components/smartsheet-toolbar/ColumnFilterMenu.vue
index d432c5d179..a7b310048d 100644
--- a/packages/nc-gui-v2/components/smartsheet-toolbar/ColumnFilterMenu.vue
+++ b/packages/nc-gui-v2/components/smartsheet-toolbar/ColumnFilterMenu.vue
@@ -18,18 +18,8 @@ const applyChanges = () => {}
 <template>
   <a-dropdown :trigger="['click']">
     <v-badge :value="filters.length" color="primary" dot overlap>
-      <a-button
-        v-t="['c:filter']"
-        class="nc-filter-menu-btn px-2 nc-remove-border border-0"
-        :disabled="isLocked"
-        outlined
-        size="small"
-        text
-        :class="{
-          'primary lighten-5 grey--text text--darken-3': filters.length,
-        }"
-      >
-        <div class="flex align-center gap-1 text-sm">
+      <a-button v-t="['c:filter']" class="nc-filter-menu-btn nc-toolbar-btn" :disabled="isLocked" size="small">
+        <div class="flex align-center gap-1">
           <MdiFilterIcon class="text-grey" />
           <!-- Filter -->
           <span class="text-capitalize">{{ $t('activity.filter') }}</span>
diff --git a/packages/nc-gui-v2/components/smartsheet-toolbar/DeleteTable.vue b/packages/nc-gui-v2/components/smartsheet-toolbar/DeleteTable.vue
new file mode 100644
index 0000000000..65a93e6176
--- /dev/null
+++ b/packages/nc-gui-v2/components/smartsheet-toolbar/DeleteTable.vue
@@ -0,0 +1,9 @@
+<script setup lang="ts">
+import MdiDeleteIcon from '~icons/mdi/delete-outline'
+</script>
+
+<template>
+  <MdiDeleteIcon class="text-grey" />
+</template>
+
+<style scoped></style>
diff --git a/packages/nc-gui-v2/components/smartsheet-toolbar/FieldsMenu.vue b/packages/nc-gui-v2/components/smartsheet-toolbar/FieldsMenu.vue
index 3a6dda994e..1588ff57a4 100644
--- a/packages/nc-gui-v2/components/smartsheet-toolbar/FieldsMenu.vue
+++ b/packages/nc-gui-v2/components/smartsheet-toolbar/FieldsMenu.vue
@@ -77,18 +77,8 @@ const onMove = (event) => {
 <template>
   <a-dropdown :trigger="['click']">
     <v-badge :value="isAnyFieldHidden" color="primary" dot overlap v-bind="props">
-      <a-button
-        v-t="['c:fields']"
-        class="nc-fields-menu-btn px-2 nc-remove-border border-0"
-        :disabled="isLocked"
-        outlined
-        size="small"
-        text
-        :class="{
-          'primary lighten-5 grey--text text--darken-3': isAnyFieldHidden,
-        }"
-      >
-        <div class="flex align-center gap-1 text-sm">
+      <a-button v-t="['c:fields']" class="nc-fields-menu-btn nc-toolbar-btn" :disabled="isLocked" size="small">
+        <div class="flex align-center gap-1">
           <!--          <v-icon small class="mr-1" color="#777"> mdi-eye-off-outline </v-icon> -->
           <MdiEyeIcon class="text-grey"></MdiEyeIcon>
           <!-- Fields -->
diff --git a/packages/nc-gui-v2/components/smartsheet-toolbar/LockMenu.vue b/packages/nc-gui-v2/components/smartsheet-toolbar/LockMenu.vue
index 7cced01c4f..1a627b96e5 100644
--- a/packages/nc-gui-v2/components/smartsheet-toolbar/LockMenu.vue
+++ b/packages/nc-gui-v2/components/smartsheet-toolbar/LockMenu.vue
@@ -1,5 +1,10 @@
 <script lang="ts" setup>
+import { computed } from '@vue/reactivity'
 import { useToast } from 'vue-toastification'
+import MdiLockOutlineIcon from '~icons/mdi/lock-outline'
+import MdiAccountIcon from '~icons/mdi/account'
+import MdiAccountGroupIcon from '~icons/mdi/account-group'
+import MdiCheckIcon from '~icons/mdi/check-bold'
 
 interface Props {
   modelValue?: LockType
@@ -32,6 +37,18 @@ function changeLockType(type: LockType) {
 
   toast.success(`Successfully Switched to ${type} view`, { timeout: 3000 })
 }
+
+const Icon = computed(() => {
+  switch (vModel.value) {
+    case LockType.Personal:
+      return MdiAccountIcon
+    case LockType.Locked:
+      return MdiLockOutlineIcon
+    case LockType.Collaborative:
+    default:
+      return MdiAccountGroupIcon
+  }
+})
 </script>
 
 <script lang="ts">
@@ -41,68 +58,109 @@ export default {
 </script>
 
 <template>
-  <v-menu offset-y max-width="350">
-    <template #activator="{ props: menuProps }">
-      <v-icon v-if="vModel === LockType.Locked" small class="mx-1 nc-view-lock-menu" v-bind="menuProps.onClick">
-        mdi-lock-outline
-      </v-icon>
-      <v-icon v-else-if="vModel === LockType.Personal" small class="mx-1 nc-view-lock-menu" v-bind="menuProps.onClick">
-        mdi-account
-      </v-icon>
-      <v-icon v-else small class="mx-1 nc-view-lock-menu" v-bind="menuProps.onClick"> mdi-account-group-outline </v-icon>
+  <a-dropdown max-width="350" :trigger="['click']">
+    <Icon class="mx-1 nc-view-lock-menu text-grey"> mdi-lock-outline </Icon>
+    <template #overlay>
+      <div class="min-w-[350px] max-w-[500px] shadow bg-white">
+        <div>
+          <div class="nc-menu-option">
+            <MdiCheckIcon v-if="!vModel || vModel === LockType.Collaborative" />
+            <span v-else />
+
+            <div>
+              <MdiAccountGroupIcon />
+              Collaborative view
+              <div class="nc-subtitle">Collaborators with edit permissions or higher can change the view configuration.</div>
+            </div>
+          </div>
+          <div class="nc-menu-option">
+            <MdiCheckIcon v-if="vModel === LockType.Locked" />
+            <span v-else />
+            <div>
+              <MdiLockOutlineIcon />
+              Locked View
+              <div class="nc-subtitle">No one can edit the view configuration until it is unlocked.</div>
+            </div>
+          </div>
+          <div class="nc-menu-option">
+            <MdiCheckIcon v-if="vModel === LockType.Personal" />
+            <span v-else />
+            <div>
+              <MdiAccountIcon />
+              Personal view
+              <div class="nc-subtitle">
+                Only you can edit the view configuration. Other collaborators’ personal views are hidden by default.
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
     </template>
-    <v-list maxc-width="350">
-      <v-list-item two-line class="pb-4" @click="changeLockType(LockType.Collaborative)">
-        <v-list-item-icon class="mr-1 align-self-center">
-          <v-icon v-if="!vModel || vModel === LockType.Collaborative" small> mdi-check-bold </v-icon>
-        </v-list-item-icon>
-        <v-list-item-content class="pb-1">
-          <v-list-item-title>
-            <v-icon small class="mt-n1" color="primary"> mdi-account-group </v-icon>
-            Collaborative view
-          </v-list-item-title>
-
-          <v-list-item-subtitle class="pt-2 pl- font-weight-light" style="white-space: normal">
-            Collaborators with edit permissions or higher can change the view configuration.
-          </v-list-item-subtitle>
-        </v-list-item-content>
-      </v-list-item>
-      <v-list-item two-line class="pb-4" @click="changeLockType(LockType.Locked)">
-        <v-list-item-icon class="mr-1 align-self-center">
-          <v-icon v-if="vModel === LockType.Locked" small> mdi-check-bold </v-icon>
-        </v-list-item-icon>
-
-        <v-list-item-content class="pb-1">
-          <v-list-item-title>
-            <v-icon small class="mt-n1" color="primary"> mdi-lock </v-icon>
-            Locked View
-          </v-list-item-title>
-
-          <v-list-item-subtitle class="pt-2 pl- font-weight-light" style="white-space: normal">
-            No one can edit the view configuration until it is unlocked.
-          </v-list-item-subtitle>
-          <span class="caption mt-3"><v-icon class="mr-1 mt-n1" x-small color="#fcb401"> mdi-star</v-icon>Locked view.</span>
-        </v-list-item-content>
-      </v-list-item>
-      <v-list-item three-line @click="changeLockType(LockType.Personal)">
-        <v-list-item-icon class="mr-1 align-self-center">
-          <v-icon v-if="vModel === LockType.Personal" small> mdi-check-bold </v-icon>
-        </v-list-item-icon>
-
-        <v-list-item-content>
-          <v-list-item-title>
-            <v-icon small class="mt-n1" color="primary"> mdi-account </v-icon>
-            Personal view
-          </v-list-item-title>
-
-          <v-list-item-subtitle class="pt-2 pl- font-weight-light" style="white-space: normal">
-            Only you can edit the view configuration. Other collaborators’ personal views are hidden by default.
-          </v-list-item-subtitle>
-          <span class="caption mt-3"><v-icon class="mr-1 mt-n1" x-small color="#fcb401"> mdi-star</v-icon>Coming soon.</span>
-        </v-list-item-content>
-      </v-list-item>
-    </v-list>
-  </v-menu>
+
+    <!--    <v-list maxc-width="350">
+          <v-list-item two-line class="pb-4" @click="changeLockType(LockType.Collaborative)">
+            <v-list-item-icon class="mr-1 align-self-center">
+              <v-icon v-if="!vModel || vModel === LockType.Collaborative" small> mdi-check-bold </v-icon>
+            </v-list-item-icon>
+            <v-list-item-content class="pb-1">
+              <v-list-item-title>
+                <v-icon small class="mt-n1" color="primary"> mdi-account-group </v-icon>
+                Collaborative view
+              </v-list-item-title>
+
+              <v-list-item-subtitle class="pt-2 pl- font-weight-light" style="white-space: normal">
+                Collaborators with edit permissions or higher can change the view configuration.
+              </v-list-item-subtitle>
+            </v-list-item-content>
+          </v-list-item>
+          <v-list-item two-line class="pb-4" @click="changeLockType(LockType.Locked)">
+            <v-list-item-icon class="mr-1 align-self-center">
+              <v-icon v-if="vModel === LockType.Locked" small> mdi-check-bold </v-icon>
+            </v-list-item-icon>
+
+            <v-list-item-content class="pb-1">
+              <v-list-item-title>
+                <v-icon small class="mt-n1" color="primary"> mdi-lock </v-icon>
+                Locked View
+              </v-list-item-title>
+
+              <v-list-item-subtitle class="pt-2 pl- font-weight-light" style="white-space: normal">
+                No one can edit the view configuration until it is unlocked.
+              </v-list-item-subtitle>
+              <span class="caption mt-3"><v-icon class="mr-1 mt-n1" x-small color="#fcb401"> mdi-star</v-icon>Locked view.</span>
+            </v-list-item-content>
+          </v-list-item>
+          <v-list-item three-line @click="changeLockType(LockType.Personal)">
+            <v-list-item-icon class="mr-1 align-self-center">
+              <v-icon v-if="vModel === LockType.Personal" small> mdi-check-bold </v-icon>
+            </v-list-item-icon>
+
+            <v-list-item-content>
+              <v-list-item-title>
+                <v-icon small class="mt-n1" color="primary"> mdi-account </v-icon>
+                Personal view
+              </v-list-item-title>
+
+              <v-list-item-subtitle class="pt-2 pl- font-weight-light" style="white-space: normal">
+                Only you can edit the view configuration. Other collaborators’ personal views are hidden by default.
+              </v-list-item-subtitle>
+              <span class="caption mt-3"><v-icon class="mr-1 mt-n1" x-small color="#fcb401"> mdi-star</v-icon>Coming soon.</span>
+            </v-list-item-content>
+          </v-list-item>
+        </v-list> -->
+  </a-dropdown>
 </template>
 
-<style scoped></style>
+<style scoped>
+.nc-menu-option {
+  @apply grid grid-cols-[30px,auto] gap-2  p-4;
+}
+
+.nc-menu-option > :first-child {
+  @apply align-self-center;
+}
+
+.nc-subtitle {
+  @apply font-size-sm font-weight-light;
+}
+</style>
diff --git a/packages/nc-gui-v2/components/smartsheet-toolbar/MoreActions.vue b/packages/nc-gui-v2/components/smartsheet-toolbar/MoreActions.vue
index 13f1bc5f98..873b3a1348 100644
--- a/packages/nc-gui-v2/components/smartsheet-toolbar/MoreActions.vue
+++ b/packages/nc-gui-v2/components/smartsheet-toolbar/MoreActions.vue
@@ -1,251 +1,23 @@
-<script>
-import FileSaver from 'file-saver'
-import { ExportTypes } from 'nocodb-sdk'
-import { NOCO } from '~/lib/constants'
-import DropOrSelectFileModal from '~/components/import/DropOrSelectFileModal'
-import ColumnMappingModal from '~/components/project/spreadsheet/components/importExport/ColumnMappingModal'
-import CSVTemplateAdapter from '~/components/import/templateParsers/CSVTemplateAdapter'
-import { UITypes } from '~/components/project/spreadsheet/helpers/uiTypes'
-import WebhookModal from '~/components/project/tableTabs/webhook/WebhookModal'
-import WebhookSlider from '~/components/project/tableTabs/webhook/WebhookSlider'
-
-export default {
-  name: 'ExportImport',
-  components: {
-    WebhookSlider,
-    ColumnMappingModal,
-    DropOrSelectFileModal,
-  },
-  props: {
-    meta: Object,
-    nodes: Object,
-    selectedView: Object,
-    publicViewId: String,
-    queryParams: Object,
-    isView: Boolean,
-    reqPayload: Object,
-  },
-  emits: ['reload', 'showAdditionalFeatOverlay'],
-  data() {
-    return {
-      importModal: false,
-      columnMappingModal: false,
-      parsedCsv: {},
-      webhookModal: false,
-    }
-  },
-
-  methods: {
-    async onCsvFileSelection(file) {
-      const reader = new FileReader()
-      reader.onload = async (e) => {
-        const templateGenerator = new CSVTemplateAdapter(file.name, e.target.result)
-        await templateGenerator.init()
-        templateGenerator.parseData()
-        this.parsedCsv.columns = templateGenerator.getColumns()
-        this.parsedCsv.data = templateGenerator.getData()
-        this.columnMappingModal = true
-        this.importModal = false
-      }
-
-      reader.readAsText(file)
-    },
-
-    async extractCsvData() {
-      return Promise.all(
-        this.data.map(async (r) => {
-          const row = {}
-          for (const col of this.availableColumns) {
-            if (col.virtual) {
-              let prop, cn
-              if (col.mm || (col.lk && col.lk.type === 'mm')) {
-                const tn = col.mm ? col.mm.rtn : col.lk.ltn
-                const title = col.mm ? col.mm._rtn : col.lk._ltn
-                await this.$store.dispatch('meta/ActLoadMeta', {
-                  env: this.nodes.env,
-                  dbAlias: this.nodes.dbAlias,
-                  tn,
-                })
-
-                prop = `${title}MMList`
-                cn = col.lk
-                  ? col.lk._lcn
-                  : (
-                      this.$store.state.meta.metas[tn].columns.find((c) => c.pv) ||
-                      this.$store.state.meta.metas[tn].columns.find((c) => c.pk) ||
-                      {}
-                    ).title
-
-                row[col.title] = r.row[prop] && r.row[prop].map((r) => cn && r[cn])
-              } else if (col.hm || (col.lk && col.lk.type === 'hm')) {
-                const tn = col.hm ? col.hm.table_name : col.lk.ltn
-                const title = col.hm ? col.hm.title : col.lk._ltn
-
-                await this.$store.dispatch('meta/ActLoadMeta', {
-                  env: this.nodes.env,
-                  dbAlias: this.nodes.dbAlias,
-                  tn,
-                })
-
-                prop = `${title}List`
-                cn = col.lk
-                  ? col.lk._lcn
-                  : (
-                      this.$store.state.meta.metas[tn].columns.find((c) => c.pv) ||
-                      this.$store.state.meta.metas[tn].columns.find((c) => c.pk)
-                    ).title
-                row[col.title] = r.row[prop] && r.row[prop].map((r) => cn && r[cn])
-              } else if (col.bt || (col.lk && col.lk.type === 'bt')) {
-                const tn = col.bt ? col.bt.rtn : col.lk.ltn
-                const title = col.bt ? col.bt._rtn : col.lk._ltn
-                await this.$store.dispatch('meta/ActLoadMeta', {
-                  env: this.nodes.env,
-                  dbAlias: this.nodes.dbAlias,
-                  tn,
-                })
-
-                prop = `${title}Read`
-                cn = col.lk
-                  ? col.lk._lcn
-                  : (
-                      this.$store.state.meta.metas[tn].columns.find((c) => c.pv) ||
-                      this.$store.state.meta.metas[tn].columns.find((c) => c.pk) ||
-                      {}
-                    ).title
-                row[col.title] = r.row[prop] && r.row[prop] && cn && r.row[prop][cn]
-              } else {
-                row[col.title] = r.row[col.title]
-              }
-            } else if (col.uidt === 'Attachment') {
-              let data = []
-              try {
-                if (typeof r.row[col.title] === 'string') {
-                  data = JSON.parse(r.row[col.title])
-                } else if (r.row[col.title]) {
-                  data = r.row[col.title]
-                }
-              } catch {}
-              row[col.title] = (data || []).map((a) => `${a.title}(${a.url})`)
-            } else {
-              row[col.title] = r.row[col.title]
-            }
-          }
-          return row
-        }),
-      )
-    },
-    async exportCsv() {
-      let offset = 0
-      let c = 1
-
-      try {
-        while (!isNaN(offset) && offset > -1) {
-          let res
-          if (this.publicViewId) {
-            res = await this.$api.public.csvExport(this.publicViewId, ExportTypes.CSV, {
-              responseType: 'blob',
-              query: {
-                fields:
-                  this.queryParams &&
-                  this.queryParams.fieldsOrder &&
-                  this.queryParams.fieldsOrder.filter((c) => this.queryParams.showFields[c]),
-                offset,
-                sortArrJson: JSON.stringify(
-                  this.reqPayload &&
-                    this.reqPayload.sorts &&
-                    this.reqPayload.sorts.map(({ fk_column_id, direction }) => ({
-                      direction,
-                      fk_column_id,
-                    })),
-                ),
-                filterArrJson: JSON.stringify(this.reqPayload && this.reqPayload.filters),
-              },
-              headers: {
-                'xc-password': this.reqPayload && this.reqPayload.password,
-              },
-            })
-          } else {
-            res = await this.$api.dbViewRow.export(
-              NOCO,
-              this.projectName,
-              this.meta.title,
-              this.selectedView.title,
-              ExportTypes.CSV,
-              {
-                responseType: 'blob',
-                query: {
-                  offset,
-                },
-              },
-            )
-          }
-          const { data } = res
-
-          offset = +res.headers['nc-export-offset']
-          const blob = new Blob([data], { type: 'text/plain;charset=utf-8' })
-          FileSaver.saveAs(blob, `${this.meta.title}_exported_${c++}.csv`)
-          if (offset > -1) {
-            this.$toast.info('Downloading more files').goAway(3000)
-          } else {
-            this.$toast.success('Successfully exported all table data').goAway(3000)
-          }
-        }
-      } catch (e) {
-        console.log(e)
-        this.$toast.error(e.message).goAway(3000)
-      }
-    },
-    async importData(columnMappings) {
-      try {
-        const data = this.parsedCsv.data
-        for (let i = 0, progress = 0; i < data.length; i += 500) {
-          const batchData = data.slice(i, i + 500).map((row) =>
-            columnMappings.reduce((res, col) => {
-              // todo: parse data
-              if (col.enabled && col.destCn) {
-                const v = this.meta && this.meta.columns.find((c) => c.title === col.destCn)
-                let input = row[col.sourceCn]
-                // parse potential boolean values
-                if (v.uidt === UITypes.Checkbox) {
-                  input = input.replace(/["']/g, '').toLowerCase().trim()
-                  if (input === 'false' || input === 'no' || input === 'n') {
-                    input = '0'
-                  } else if (input === 'true' || input === 'yes' || input === 'y') {
-                    input = '1'
-                  }
-                } else if (v.uidt === UITypes.Number) {
-                  if (input === '') {
-                    input = null
-                  }
-                } else if (v.uidt === UITypes.SingleSelect || v.uidt === UITypes.MultiSelect) {
-                  if (input === '') {
-                    input = null
-                  }
-                }
-                res[col.destCn] = input
-              }
-              return res
-            }, {}),
-          )
-          await this.$api.dbTableRow.bulkCreate(NOCO, this.projectName, this.meta.title, batchData)
-          progress += batchData.length
-          this.$store.commit('loader/MutMessage', `Importing data : ${progress}/${data.length}`)
-          this.$store.commit('loader/MutProgress', Math.round((100 * progress) / data.length))
-        }
-        this.columnMappingModal = false
-        this.$store.commit('loader/MutClear')
-        this.$emit('reload')
-        this.$toast.success('Successfully imported table data').goAway(3000)
-      } catch (e) {
-        this.$toast.error(e.message).goAway(3000)
-      }
-    },
-  },
-}
+<script lang="ts" setup>
+import MdiFlashIcon from '~icons/mdi/flash-outline'
+import MdiMenuDownIcon from '~icons/mdi/menu-down'
 </script>
 
 <template>
-  <div>
+  <v-dropdown>
+    <a-button v-t="['c:actions']" class="nc-actions-menu-btn nc-toolbar-btn">
+      <div class="flex gap-1 align-center">
+        <MdiFlashIcon class="text-grey" />
+        <!-- More -->
+        {{ $t('general.more') }}
+        <MdiMenuDownIcon class="text-grey" />
+      </div>
+    </a-button>
+    <template #overlay>
+      <div></div>
+    </template>
+  </v-dropdown>
+  <!--  <div>
     <v-menu open-on-hover bottom offset-y transition="slide-y-transition">
       <template #activator="{ on }">
         <v-btn
@@ -257,7 +29,7 @@ export default {
           v-on="on"
         >
           <v-icon small color="#777"> mdi-flash-outline </v-icon>
-          <!-- More -->
+          &lt;!&ndash; More &ndash;&gt;
           {{ $t('general.more') }}
 
           <v-icon small color="#777"> mdi-menu-down </v-icon>
@@ -269,7 +41,7 @@ export default {
           <v-list-item-title>
             <v-icon small class="mr-1"> mdi-download-outline </v-icon>
             <span class="caption">
-              <!-- Download as CSV -->
+              &lt;!&ndash; Download as CSV &ndash;&gt;
               {{ $t('activity.downloadCSV') }}
             </span>
           </v-list-item-title>
@@ -278,11 +50,11 @@ export default {
           <v-list-item-title>
             <v-icon small class="mr-1" color=""> mdi-upload-outline </v-icon>
             <span class="caption">
-              <!-- Upload CSV -->
+              &lt;!&ndash; Upload CSV &ndash;&gt;
               {{ $t('activity.uploadCSV') }}
             </span>
 
-            <span class="caption grey--text">(<x-icon small color="grey lighten-2"> mdi-alpha </x-icon> version)</span>
+            <span class="caption grey&#45;&#45;text">(<x-icon small color="grey lighten-2"> mdi-alpha </x-icon> version)</span>
           </v-list-item-title>
         </v-list-item>
         <v-list-item
@@ -294,7 +66,7 @@ export default {
           <v-list-item-title>
             <v-icon small class="mr-1" color=""> mdi-view-list-outline </v-icon>
             <span class="caption">
-              <!-- Shared View List -->
+              &lt;!&ndash; Shared View List &ndash;&gt;
               {{ $t('activity.listSharedView') }}
             </span>
           </v-list-item-title>
@@ -316,9 +88,9 @@ export default {
       :parsed-csv="parsedCsv"
       @import="importData"
     />
-    <!--    <webhook-modal v-if="webhookModal" v-model="webhookModal" :meta="meta" /> -->
+    &lt;!&ndash;    <webhook-modal v-if="webhookModal" v-model="webhookModal" :meta="meta" /> &ndash;&gt;
     <WebhookSlider v-model="webhookModal" :meta="meta" />
-  </div>
+  </div> -->
 </template>
 
 <style scoped></style>
diff --git a/packages/nc-gui-v2/components/smartsheet-toolbar/Reload.vue b/packages/nc-gui-v2/components/smartsheet-toolbar/Reload.vue
new file mode 100644
index 0000000000..e2ee6f4110
--- /dev/null
+++ b/packages/nc-gui-v2/components/smartsheet-toolbar/Reload.vue
@@ -0,0 +1,11 @@
+<script setup lang="ts">
+import { ReloadViewDataHookInj } from '~/context'
+import MdiReloadIcon from '~icons/mdi/reload'
+const reloadTri = inject(ReloadViewDataHookInj)
+</script>
+
+<template>
+  <MdiReloadIcon class="text-grey" @click="reloadTri.trigger()" />
+</template>
+
+<style scoped></style>
diff --git a/packages/nc-gui-v2/components/smartsheet-toolbar/SearchData.vue b/packages/nc-gui-v2/components/smartsheet-toolbar/SearchData.vue
index 0ad8bf0d87..00c10e60d8 100644
--- a/packages/nc-gui-v2/components/smartsheet-toolbar/SearchData.vue
+++ b/packages/nc-gui-v2/components/smartsheet-toolbar/SearchData.vue
@@ -27,9 +27,9 @@ const columns = computed(() =>
 </script>
 
 <template>
-  <a-input-search v-model:value="localValue" class="max-w-[250px]">
+  <a-input-search size="small" v-model:value="localValue" class="max-w-[250px]">
     <template #addonBefore>
-      <a-select v-model:value="localField" :options="columns" style="width: 100px" class="!text-xs" />
+      <a-select v-model:value="localField" :options="columns" style="width: 100px" class="!text-xs " size="small" />
     </template>
   </a-input-search>
 </template>
diff --git a/packages/nc-gui-v2/components/smartsheet-toolbar/ShareView.vue b/packages/nc-gui-v2/components/smartsheet-toolbar/ShareView.vue
new file mode 100644
index 0000000000..b7accbf9f2
--- /dev/null
+++ b/packages/nc-gui-v2/components/smartsheet-toolbar/ShareView.vue
@@ -0,0 +1,18 @@
+<script lang="ts" setup>
+import MdiOpenInNew from '~icons/mdi/open-in-new'
+const { isUIAllowed } = useUIPermission()
+</script>
+
+<template>
+  <div>
+    <a-button v-t="['c:view:share']" outlined class="nc-btn-share-view nc-toolbar-btn" size="small" @click="$emit('share')">
+      <div class="flex align-center gap-1">
+        <MdiOpenInNew class="text-grey" />
+        <!-- Share View -->
+        {{ $t('activity.shareView') }}
+      </div>
+    </a-button>
+  </div>
+</template>
+
+<style scoped />
diff --git a/packages/nc-gui-v2/components/smartsheet-toolbar/SortListMenu.vue b/packages/nc-gui-v2/components/smartsheet-toolbar/SortListMenu.vue
index ed3ef5dc36..a4871677e5 100644
--- a/packages/nc-gui-v2/components/smartsheet-toolbar/SortListMenu.vue
+++ b/packages/nc-gui-v2/components/smartsheet-toolbar/SortListMenu.vue
@@ -29,19 +29,8 @@ watch(
 <template>
   <a-dropdown offset-y class="" :trigger="['click']">
     <v-badge :value="sorts && sorts.length" color="primary" dot overlap>
-      <a-button
-        v-t="['c:sort']"
-        size="small"
-        class="nc-sort-menu-btn px-2 nc-remove-border border-0"
-        :disabled="isLocked"
-        small
-        text
-        outlined
-        :class="{
-          'primary lighten-5 grey&#45;&#45;text text&#45;&#45;darken-3': sorts && sorts.length,
-        }"
-        v-bind="props"
-        ><div class="flex align-center gap-1 text-sm">
+      <a-button v-t="['c:sort']" size="small" class="nc-sort-menu-btn nc-toolbar-btn" :disabled="isLocked"
+        ><div class="flex align-center gap-1">
           <MdiSortIcon class="text-grey" />
           <!-- Sort -->
           <span class="text-capitalize">{{ $t('activity.sort') }}</span>
diff --git a/packages/nc-gui-v2/components/smartsheet-toolbar/ToggleDrawer.vue b/packages/nc-gui-v2/components/smartsheet-toolbar/ToggleDrawer.vue
new file mode 100644
index 0000000000..ce0cd887da
--- /dev/null
+++ b/packages/nc-gui-v2/components/smartsheet-toolbar/ToggleDrawer.vue
@@ -0,0 +1,14 @@
+<script setup lang="ts">
+import { ReloadViewDataHookInj } from '~/context'
+import MdiDoorOpenIcon from '~icons/mdi/door-open'
+import MdiDoorClosedIcon from '~icons/mdi/door-closed'
+const navDrawerOpened = ref(false)
+
+const Icon = computed(()=> navDrawerOpened.value ? MdiDoorOpenIcon : MdiDoorClosedIcon)
+</script>
+
+<template>
+  <Icon class="text-grey" @click="navDrawerOpened = !navDrawerOpened" />
+</template>
+
+<style scoped></style>
diff --git a/packages/nc-gui-v2/components/smartsheet/Toolbar.vue b/packages/nc-gui-v2/components/smartsheet/Toolbar.vue
index 69d5ec5689..4030228f76 100644
--- a/packages/nc-gui-v2/components/smartsheet/Toolbar.vue
+++ b/packages/nc-gui-v2/components/smartsheet/Toolbar.vue
@@ -6,7 +6,19 @@
     <SmartsheetToolbarFieldsMenu :show-system-fields="false" />
     <SmartsheetToolbarColumnFilterMenu />
     <SmartsheetToolbarSortListMenu />
+    <SmartsheetToolbarShareView />
+    <SmartsheetToolbarMoreActions />
+    <div class="flex-1" />
+    <SmartsheetToolbarLockMenu />
+    <SmartsheetToolbarReload />
+    <SmartsheetToolbarAddRow />
+    <SmartsheetToolbarDeleteTable />
+    <SmartsheetToolbarToggleDrawer />
   </div>
 </template>
 
-<style scoped></style>
+<style scoped>
+:deep(.nc-toolbar-btn) {
+  @apply border-0 !text-xs font-semibold px-2;
+}
+</style>
diff --git a/packages/nc-gui-v2/components/tabs/Smartsheet.vue b/packages/nc-gui-v2/components/tabs/Smartsheet.vue
index 7f4e678c4c..33818db95b 100644
--- a/packages/nc-gui-v2/components/tabs/Smartsheet.vue
+++ b/packages/nc-gui-v2/components/tabs/Smartsheet.vue
@@ -47,11 +47,9 @@ watch(
             <SmartsheetGallery v-else-if="activeView.type === ViewTypes.GALLERY" />
             <SmartsheetForm v-else-if="activeView.type === ViewTypes.FORM" />
           </div>
+          <SmartsheetSidebar />
         </div>
       </template>
     </div>
-    <template v-if="meta">
-      <SmartsheetSidebar />
-    </template>
   </div>
 </template>