Merge pull request #3626 from nocodb/refactor/keep-rightsidebar-open

refactor(gui): keep the right sidebar open by default

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

@@ -286,7 +286,7 @@ function openTableCreateDialog() {
 
                   <a-menu-item v-if="isUIAllowed('importRequest')" key="add-new-table" class="py-1 rounded-b">
                     <a
-                      v-t="['e:datasource:import-request']"
+                      v-e="['e:datasource:import-request']"
                       href="https://github.com/nocodb/nocodb/issues/2052"
                       target="_blank"
                       class="prose-sm hover:(!text-primary !opacity-100) color-transition nc-project-menu-item group after:(!rounded-b)"
@@ -306,7 +306,7 @@ function openTableCreateDialog() {
               <div
                 v-for="table of tables"
                 :key="table.id"
-                v-t="['a:table:open']"
+                v-e="['a:table:open']"
                 :class="[
                   { hidden: !filteredTables?.includes(table), active: activeTable === table.title },
                   `nc-project-tree-tbl nc-project-tree-tbl-${table.title}`,

packages/nc-gui/components/dashboard/settings/Metadata.vue

@@ -83,7 +83,7 @@ const columns = [
     <div class="flex flex-col w-3/5">
       <div class="flex flex-row justify-end items-center w-full mb-4">
         <!--        Reload -->
-        <a-button v-t="['a:proj-meta:meta-data:reload']" class="self-start nc-btn-metasync-reload" @click="loadMetaDiff">
+        <a-button v-e="['a:proj-meta:meta-data:reload']" class="self-start nc-btn-metasync-reload" @click="loadMetaDiff">
           <div class="flex items-center gap-2 text-gray-600 font-light">
             <MdiReload :class="{ 'animate-infinite animate-spin !text-success': isLoading }" />
             {{ $t('general.reload') }}
@@ -112,7 +112,7 @@ const columns = [
     <div class="flex place-content-center w-2/5">
       <!--      Sync Now -->
       <div v-if="isDifferent">
-        <a-button v-t="['a:proj-meta:meta-data:sync']" class="nc-btn-metasync-sync-now" type="primary" @click="syncMetaDiff">
+        <a-button v-e="['a:proj-meta:meta-data:sync']" class="nc-btn-metasync-sync-now" type="primary" @click="syncMetaDiff">
           <div class="flex items-center gap-2">
             <MdiDatabaseSync />
             {{ $t('activity.metaSync') }}

packages/nc-gui/components/dashboard/settings/Misc.vue

@@ -10,7 +10,7 @@ watch(includeM2M, async () => await loadTables())
     <div class="flex flex-col w-full">
       <div class="flex flex-row items-center w-full mb-4 gap-2">
         <!--        Show M2M Tables -->
-        <a-checkbox v-model:checked="includeM2M" v-t="['c:themes:show-m2m-tables']">{{
+        <a-checkbox v-model:checked="includeM2M" v-e="['c:themes:show-m2m-tables']">{{
           $t('msg.info.showM2mTables')
         }}</a-checkbox>
       </div>

packages/nc-gui/components/dlg/AirtableImport.vue

@@ -391,7 +391,7 @@ onBeforeUnmount(() => {
         <!--        Import -->
         <a-button
           key="submit"
-          v-t="['c:sync-airtable:save-and-sync']"
+          v-e="['c:sync-airtable:save-and-sync']"
           type="primary"
           class="nc-btn-airtable-import"
           :disabled="disableImportButton"

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

@@ -41,7 +41,7 @@ const openSwaggerLink = () => {
         <template #before>
           <a-list-item v-if="project">
             <nuxt-link
-              v-t="['a:navbar:user:swagger']"
+              v-e="['a:navbar:user:swagger']"
               class="!no-underline !text-current py-4 font-semibold"
               target="_blank"
               @click="openSwaggerLink"

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

@@ -37,7 +37,7 @@ const logout = () => {
         <a-menu class="ml-2 !py-0 min-w-32 leading-8 !rounded nc-menu-account">
           <a-menu-item-group title="User Settings">
             <a-menu-item key="email" class="!rounded-t">
-              <nuxt-link v-t="['c:navbar:user:email']" class="group flex items-center no-underline py-2" to="/user">
+              <nuxt-link v-e="['c:navbar:user:email']" class="group flex items-center no-underline py-2" to="/user">
                 <MdiAt class="mt-1 group-hover:text-success" />
                 &nbsp;
                 <span class="prose group-hover:text-black nc-user-menu-email">{{ email }}</span>
@@ -47,7 +47,7 @@ const logout = () => {
             <a-menu-divider class="!m-0" />
 
             <a-menu-item key="signout" class="!rounded-b">
-              <div v-t="['a:navbar:user:sign-out']" class="group flex items-center py-2" @click="logout">
+              <div v-e="['a:navbar:user:sign-out']" class="group flex items-center py-2" @click="logout">
                 <MdiLogout class="group-hover:(!text-red-500)" />&nbsp;
                 <span class="prose font-semibold text-gray-500 group-hover:text-black nc-user-menu-signout">
                   {{ $t('general.signOut') }}
@@ -76,7 +76,7 @@ const logout = () => {
 
               <a-menu-item class="active:(ring ring-accent)">
                 <div
-                  v-t="['c:project:create:xcdb']"
+                  v-e="['c:project:create:xcdb']"
                   class="group flex items-center gap-2 py-2 hover:text-primary"
                   @click="navigateTo('/project/create')"
                 >
@@ -87,7 +87,7 @@ const logout = () => {
 
               <a-menu-item class="rounded-b active:(ring ring-accent)">
                 <div
-                  v-t="['c:project:create:extdb']"
+                  v-e="['c:project:create:extdb']"
                   class="group flex items-center gap-2 py-2 hover:text-primary"
                   @click="navigateTo('/project/create-external')"
                 >

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

@@ -23,18 +23,18 @@ const isZhLang = $computed(() => locale.value.startsWith('zh'))
   />
 
   <div v-else class="flex justify-between gap-1 w-full px-2">
-    <MdiDiscord v-t="['e:community:discord']" class="icon text-[#7289DA]" @click="open('https://discord.gg/5RgZmkW')" />
+    <MdiDiscord v-e="['e:community:discord']" class="icon text-[#7289DA]" @click="open('https://discord.gg/5RgZmkW')" />
     <div
-      v-t="['e:community:discourse']"
+      v-e="['e:community:discourse']"
       class="icon flex items-center justify-center min-w-[43px]"
       @click="open('https://community.nocodb.com/')"
     >
       <div class="discourse" />
     </div>
-    <MdiReddit v-t="['e:community:reddit']" class="icon text-[#FF4600]" @click="open('https://www.reddit.com/r/NocoDB/')" />
+    <MdiReddit v-e="['e:community:reddit']" class="icon text-[#FF4600]" @click="open('https://www.reddit.com/r/NocoDB/')" />
-    <MdiTwitter v-t="['e:community:twitter']" class="icon text-[#1DA1F2]" @click="open('https://twitter.com/NocoDB')" />
+    <MdiTwitter v-e="['e:community:twitter']" class="icon text-[#1DA1F2]" @click="open('https://twitter.com/NocoDB')" />
     <MdiCalendarMonth
-      v-t="['e:community:book-demo']"
+      v-e="['e:community:book-demo']"
       class="icon text-green-500"
       @click="open('https://calendly.com/nocodb-meeting')"
     />

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

@@ -13,7 +13,7 @@ const isRtlLang = $computed(() => ['fa'].includes(currentLang.value))
 
       <a-list-item>
         <nuxt-link
-          v-t="['e:docs']"
+          v-e="['e:docs']"
           class="text-primary !no-underline !text-current"
           target="_blank"
           to="https://docs.nocodb.com/"
@@ -26,7 +26,7 @@ const isRtlLang = $computed(() => ['fa'].includes(currentLang.value))
       </a-list-item>
       <a-list-item>
         <nuxt-link
-          v-t="['e:api-docs']"
+          v-e="['e:api-docs']"
           class="text-primary !no-underline !text-current"
           target="_blank"
           to="https://apis.nocodb.com/"
@@ -40,7 +40,7 @@ const isRtlLang = $computed(() => ['fa'].includes(currentLang.value))
       </a-list-item>
       <a-list-item>
         <nuxt-link
-          v-t="['e:community:github']"
+          v-e="['e:community:github']"
           class="text-primary !no-underline !text-current"
           to="https://github.com/nocodb/nocodb"
           target="_blank"
@@ -66,7 +66,7 @@ const isRtlLang = $computed(() => ['fa'].includes(currentLang.value))
       </a-list-item>
       <a-list-item>
         <nuxt-link
-          v-t="['e:community:book-demo']"
+          v-e="['e:community:book-demo']"
           class="!no-underline !text-current"
           to="https://calendly.com/nocodb-meeting"
           target="_blank"
@@ -82,7 +82,7 @@ const isRtlLang = $computed(() => ['fa'].includes(currentLang.value))
       </a-list-item>
       <a-list-item>
         <nuxt-link
-          v-t="['e:community:discord']"
+          v-e="['e:community:discord']"
           class="!no-underline !text-current"
           to="https://discord.gg/5RgZmkW"
           target="_blank"
@@ -98,7 +98,7 @@ const isRtlLang = $computed(() => ['fa'].includes(currentLang.value))
       </a-list-item>
       <a-list-item>
         <nuxt-link
-          v-t="['e:community:twitter']"
+          v-e="['e:community:twitter']"
           class="!no-underline !text-current"
           to="https://twitter.com/NocoDB"
           target="_blank"
@@ -113,7 +113,7 @@ const isRtlLang = $computed(() => ['fa'].includes(currentLang.value))
         </nuxt-link>
       </a-list-item>
       <a-list-item>
-        <nuxt-link v-t="['e:hiring']" class="!no-underline !text-current" target="_blank" to="http://careers.nocodb.com">
+        <nuxt-link v-e="['e:hiring']" class="!no-underline !text-current" target="_blank" to="http://careers.nocodb.com">
           <div class="flex items-center text-sm">
             <!--            todo:  i18n -->
             <div class="ml-3">
@@ -124,7 +124,7 @@ const isRtlLang = $computed(() => ['fa'].includes(currentLang.value))
       </a-list-item>
       <a-list-item>
         <nuxt-link
-          v-t="['e:community:reddit']"
+          v-e="['e:community:reddit']"
           class="!no-underline !text-current"
           target="_blank"
           to="https://www.reddit.com/r/NocoDB/"

packages/nc-gui/components/smartsheet-toolbar/AddRow.vue

@@ -14,7 +14,7 @@ const onClick = () => {
   <a-tooltip placement="bottom">
     <template #title> {{ $t('activity.addRow') }} </template>
     <div
-      v-t="['c:row:add:grid-top']"
+      v-e="['c:row:add:grid-top']"
       :class="{ 'group': !isLocked, 'disabled-ring': isLocked }"
       class="nc-add-new-row-btn flex align-center"
     >

packages/nc-gui/components/smartsheet-toolbar/ColumnFilterMenu.vue

@@ -53,7 +53,7 @@ const filterAutoSaveLoc = computed({
 <template>
   <a-dropdown :trigger="['click']" overlay-class-name="nc-dropdown-filter-menu">
     <div :class="{ 'nc-badge nc-active-btn': filtersLength }">
-      <a-button v-t="['c:filter']" class="nc-filter-menu-btn nc-toolbar-btn txt-sm" :disabled="isLocked">
+      <a-button v-e="['c:filter']" class="nc-filter-menu-btn nc-toolbar-btn txt-sm" :disabled="isLocked">
         <div class="flex items-center gap-1">
           <MdiFilterOutline />
           <!-- Filter -->
@@ -80,7 +80,7 @@ const filterAutoSaveLoc = computed({
           <div class="flex-1" />
           <a-button
             v-show="!filterAutoSave"
-            v-t="['a:filter:auto-apply']"
+            v-e="['a:filter:auto-apply']"
             size="small"
             class="text-xs ml-2"
             @click="applyChanges"

packages/nc-gui/components/smartsheet-toolbar/Export.vue

@@ -1,6 +1,6 @@
 <template>
   <a-dropdown :trigger="['click']" overlay-class-name="nc-dropdown-actions-menu">
-    <a-button v-t="['c:actions']" class="nc-actions-menu-btn nc-toolbar-btn">
+    <a-button v-e="['c:actions']" class="nc-actions-menu-btn nc-toolbar-btn">
       <div class="flex gap-2 items-center">
         <MdiDownload class="group-hover:text-accent text-gray-500" />
         <span class="text-capitalize !text-sm font-weight-normal">Download</span>

packages/nc-gui/components/smartsheet-toolbar/ExportSubActions.vue

@@ -75,14 +75,14 @@ const exportFile = async (exportType: ExportTypes) => {
 
 <template>
   <a-menu-item>
-    <div v-t="['a:actions:download-csv']" class="nc-project-menu-item" @click="exportFile(ExportTypes.CSV)">
+    <div v-e="['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-project-menu-item" @click="exportFile(ExportTypes.EXCEL)">
+    <div v-e="['a:actions:download-excel']" class="nc-project-menu-item" @click="exportFile(ExportTypes.EXCEL)">
       <MdiDownloadOutline class="text-gray-500" />
       <!-- Download as XLSX -->
       {{ $t('activity.downloadExcel') }}

packages/nc-gui/components/smartsheet-toolbar/FieldsMenu.vue

@@ -118,7 +118,7 @@ const getIcon = (c: ColumnType) =>
 <template>
   <a-dropdown :trigger="['click']" overlay-class-name="nc-dropdown-fields-menu">
     <div :class="{ 'nc-badge nc-active-btn': isAnyFieldHidden }">
-      <a-button v-t="['c:fields']" class="nc-fields-menu-btn nc-toolbar-btn" :disabled="isLocked">
+      <a-button v-e="['c:fields']" class="nc-fields-menu-btn nc-toolbar-btn" :disabled="isLocked">
         <div class="flex items-center gap-1">
           <MdiEyeOffOutline />
 
@@ -146,7 +146,7 @@ const getIcon = (c: ColumnType) =>
               <div v-show="filteredFieldList.includes(field)" :key="field.id" class="px-2 py-1 flex items-center" @click.stop>
                 <a-checkbox
                   v-model:checked="field.show"
-                  v-t="['a:fields:show-hide']"
+                  v-e="['a:fields:show-hide']"
                   class="shrink"
                   @change="saveOrUpdate(field, index)"
                 >

packages/nc-gui/components/smartsheet-toolbar/MoreActions.vue

@@ -100,7 +100,7 @@ const exportFile = async (exportType: ExportTypes) => {
 <template>
   <div>
     <a-dropdown>
-      <a-button v-t="['c:actions']" class="nc-actions-menu-btn nc-toolbar-btn">
+      <a-button v-e="['c:actions']" class="nc-actions-menu-btn nc-toolbar-btn">
         <div class="flex gap-1 items-center">
           <MdiFlashOutline />
 
@@ -114,13 +114,13 @@ const exportFile = async (exportType: ExportTypes) => {
       <template #overlay>
         <div class="bg-gray-50 py-2 shadow-lg !border">
           <div>
-            <div v-t="['a:actions:download-csv']" class="nc-menu-item" @click="exportFile(ExportTypes.CSV)">
+            <div v-e="['a:actions:download-csv']" class="nc-menu-item" @click="exportFile(ExportTypes.CSV)">
               <MdiDownloadOutline class="text-gray-500" />
               <!-- Download as CSV -->
               {{ $t('activity.downloadCSV') }}
             </div>
 
-            <div v-t="['a:actions:download-excel']" class="nc-menu-item" @click="exportFile(ExportTypes.EXCEL)">
+            <div v-e="['a:actions:download-excel']" class="nc-menu-item" @click="exportFile(ExportTypes.EXCEL)">
               <MdiDownloadOutline class="text-gray-500" />
               <!-- Download as XLSX -->
               {{ $t('activity.downloadExcel') }}
@@ -128,7 +128,7 @@ const exportFile = async (exportType: ExportTypes) => {
 
             <div
               v-if="isUIAllowed('csvImport') && !isView && !isPublicView"
-              v-t="['a:actions:upload-csv']"
+              v-e="['a:actions:upload-csv']"
               class="nc-menu-item"
               :class="{ disabled: isLocked }"
               @click="!isLocked ? (quickImportDialog = true) : {}"
@@ -140,7 +140,7 @@ const exportFile = async (exportType: ExportTypes) => {
 
             <div
               v-if="isUIAllowed('sharedViewList') && !isView && !isPublicView"
-              v-t="['a:actions:shared-view-list']"
+              v-e="['a:actions:shared-view-list']"
               class="nc-menu-item"
               @click="sharedViewListDlg = true"
             >
@@ -150,7 +150,7 @@ const exportFile = async (exportType: ExportTypes) => {
             </div>
             <div
               v-if="isUIAllowed('webhook') && !isView && !isPublicView"
-              v-t="['c:actions:webhook']"
+              v-e="['c:actions:webhook']"
               class="nc-menu-item"
               @click="showWebhookDrawer = true"
             >

packages/nc-gui/components/smartsheet-toolbar/ShareView.vue

@@ -114,7 +114,7 @@ watch(passwordProtected, (value) => {
   <div>
     <a-button
       v-if="isUIAllowed('share-view') && !isSharedBase"
-      v-t="['c:view:share']"
+      v-e="['c:view:share']"
       outlined
       class="nc-btn-share-view nc-toolbar-btn"
     >
@@ -137,10 +137,10 @@ watch(passwordProtected, (value) => {
       <div class="share-link-box nc-share-link-box bg-primary-50">
         <div class="flex-1 h-min text-xs">{{ sharedViewUrl }}</div>
         <!--        <v-spacer /> -->
-        <a v-t="['c:view:share:open-url']" :href="sharedViewUrl" target="_blank">
+        <a v-e="['c:view:share:open-url']" :href="sharedViewUrl" target="_blank">
           <MdiOpenInNewIcon class="text-sm text-gray-500 mt-2" />
         </a>
-        <MdiCopyIcon v-t="['c:view:share:copy-url']" class="text-gray-500 text-sm cursor-pointer" @click="copyLink" />
+        <MdiCopyIcon v-e="['c:view:share:copy-url']" class="text-gray-500 text-sm cursor-pointer" @click="copyLink" />
       </div>
 
       <a-collapse ghost>

packages/nc-gui/components/smartsheet-toolbar/SortListMenu.vue

@@ -43,7 +43,7 @@ watch(
 <template>
   <a-dropdown offset-y class="" :trigger="['click']" overlay-class-name="nc-dropdown-sort-menu">
     <div :class="{ 'nc-badge nc-active-btn': sorts?.length }">
-      <a-button v-t="['c:sort']" class="nc-sort-menu-btn nc-toolbar-btn" :disabled="isLocked"
+      <a-button v-e="['c:sort']" class="nc-sort-menu-btn nc-toolbar-btn" :disabled="isLocked"
         ><div class="flex items-center gap-1">
           <MdiSort />
           <!-- Sort -->

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

@@ -82,7 +82,7 @@ const { isSqlView } = useSmartsheetStoreOrThrow()
 <template>
   <div>
     <a-dropdown :trigger="['click']" overlay-class-name="nc-dropdown-actions-menu">
-      <a-button v-t="['c:actions']" class="nc-actions-menu-btn nc-toolbar-btn">
+      <a-button v-e="['c:actions']" class="nc-actions-menu-btn nc-toolbar-btn">
         <div class="flex gap-2 items-center">
           <component
             :is="viewIcons[selectedView?.type].icon"
@@ -106,7 +106,7 @@ const { isSqlView } = useSmartsheetStoreOrThrow()
               class="scrollbar-thin-dull min-w-50 max-h-90vh overflow-auto !py-0"
             >
               <template #title>
-                <div v-t="['c:navdraw:preview-as']" class="nc-project-menu-item group px-0 !py-0">
+                <div v-e="['c:navdraw:preview-as']" class="nc-project-menu-item group px-0 !py-0">
                   <SmartsheetToolbarLockType hide-tick :type="selectedView?.lock_type || LockType.Collaborative" />
 
                   <MaterialSymbolsChevronRightRounded
@@ -130,7 +130,7 @@ const { isSqlView } = useSmartsheetStoreOrThrow()
             <a-sub-menu key="download">
               <template #title>
                 <!--                Download -->
-                <div v-t="['c:navdraw:preview-as']" class="nc-project-menu-item group">
+                <div v-e="['c:navdraw:preview-as']" class="nc-project-menu-item group">
                   <MdiDownload class="group-hover:text-accent text-gray-500" />
                   {{ $t('general.download') }}
                   <div class="flex-1" />
@@ -148,7 +148,7 @@ const { isSqlView } = useSmartsheetStoreOrThrow()
               <a-sub-menu key="upload">
                 <!--                Upload -->
                 <template #title>
-                  <div v-t="['c:navdraw:preview-as']" class="nc-project-menu-item group">
+                  <div v-e="['c:navdraw:preview-as']" class="nc-project-menu-item group">
                     <MdiUpload class="group-hover:text-accent text-gray-500" />
                     {{ $t('general.upload') }}
                     <div class="flex-1" />
@@ -163,7 +163,7 @@ const { isSqlView } = useSmartsheetStoreOrThrow()
                 <a-menu-item>
                   <div
                     v-if="isUIAllowed('csvImport') && !isView && !isPublicView"
-                    v-t="['a:actions:upload-csv']"
+                    v-e="['a:actions:upload-csv']"
                     class="nc-project-menu-item"
                     :class="{ disabled: isLocked }"
                     @click="!isLocked ? (quickImportDialog = true) : {}"
@@ -180,7 +180,7 @@ const { isSqlView } = useSmartsheetStoreOrThrow()
             <a-menu-item>
               <div
                 v-if="isUIAllowed('SharedViewList') && !isView && !isPublicView"
-                v-t="['a:actions:shared-view-list']"
+                v-e="['a:actions:shared-view-list']"
                 class="py-2 flex gap-2 items-center"
                 @click="sharedViewListDlg = true"
               >
@@ -192,7 +192,7 @@ const { isSqlView } = useSmartsheetStoreOrThrow()
             <a-menu-item v-if="!isSqlView">
               <div
                 v-if="isUIAllowed('webhook') && !isView && !isPublicView"
-                v-t="['c:actions:webhook']"
+                v-e="['c:actions:webhook']"
                 class="py-2 flex gap-2 items-center"
                 @click="showWebhookDrawer = true"
               >
@@ -203,7 +203,7 @@ const { isSqlView } = useSmartsheetStoreOrThrow()
             <a-menu-item>
               <div
                 v-if="!isSharedBase && !isPublicView"
-                v-t="['c:snippet:open']"
+                v-e="['c:snippet:open']"
                 class="py-2 flex gap-2 items-center"
                 @click="showApiSnippetDrawer = true"
               >

packages/nc-gui/components/smartsheet/ApiSnippet.vue

@@ -169,7 +169,7 @@ watch($$(activeLang), (newLang) => {
               </a-select-option>
             </a-select>
             <a-button
-              v-t="[
+              v-e="[
                 'c:snippet:copy',
                 { client: activeLang?.clients && (selectedClient || activeLang?.clients[0]), lang: activeLang?.name },
               ]"
@@ -181,7 +181,7 @@ watch($$(activeLang), (newLang) => {
 
           <div class="absolute bottom-4 flex flex-row justify-center w-[95%]">
             <a
-              v-t="['e:hiring']"
+              v-e="['e:hiring']"
               class="px-4 py-2 ! rounded shadow"
               href="https://angel.co/company/nocodb"
               target="_blank"

packages/nc-gui/components/smartsheet/Form.vue

@@ -591,7 +591,7 @@ onMounted(async () => {
 
                           <a-switch
                             v-model:checked="element.required"
-                            v-t="['a:form-view:field:mark-required']"
+                            v-e="['a:form-view:field:mark-required']"
                             size="small"
                             class="ml-2"
                             @change="updateColMeta(element)"
@@ -715,7 +715,7 @@ onMounted(async () => {
               <!-- Show "Submit Another Form" button -->
               <a-switch
                 v-model:checked="formViewData.submit_another_form"
-                v-t="[`a:form-view:submit-another-form`]"
+                v-e="[`a:form-view:submit-another-form`]"
                 size="small"
                 class="nc-form-checkbox-submit-another-form"
                 @change="updateView"
@@ -727,7 +727,7 @@ onMounted(async () => {
               <!-- Show a blank form after 5 seconds -->
               <a-switch
                 v-model:checked="formViewData.show_blank_form"
-                v-t="[`a:form-view:show-blank-form`]"
+                v-e="[`a:form-view:show-blank-form`]"
                 size="small"
                 class="nc-form-checkbox-show-blank-form"
                 @change="updateView"
@@ -738,7 +738,7 @@ onMounted(async () => {
             <div class="my-4">
               <a-switch
                 v-model:checked="emailMe"
-                v-t="[`a:form-view:email-me`]"
+                v-e="[`a:form-view:email-me`]"
                 size="small"
                 class="nc-form-checkbox-send-email"
                 @change="onEmailChange"

packages/nc-gui/components/smartsheet/Grid.vue

@@ -425,7 +425,7 @@ onBeforeUnmount(async () => {
               </th>
               <th
                 v-if="!readOnly && !isLocked && isUIAllowed('add-column') && !isSqlView"
-                v-t="['c:column:add']"
+                v-e="['c:column:add']"
                 class="cursor-pointer"
                 @click.stop="addColumnDropdown = true"
               >
@@ -486,7 +486,7 @@ onBeforeUnmount(async () => {
                           class="cursor-pointer flex items-center border-1 active:ring rounded p-1 hover:(bg-primary bg-opacity-10)"
                         >
                           <MdiArrowExpand
-                            v-t="['c:row-expand']"
+                            v-e="['c:row-expand']"
                             class="select-none transform hover:(text-accent scale-120) nc-row-expand"
                             @click="expandForm(row, state)"
                           />
@@ -544,7 +544,7 @@ onBeforeUnmount(async () => {
 
             <tr v-if="!isView && !isLocked && isUIAllowed('xcDatatableEditable') && !isSqlView">
               <td
-                v-t="['c:row:add:grid-bottom']"
+                v-e="['c:row:add:grid-bottom']"
                 :colspan="visibleColLength + 1"
                 class="text-left pointer nc-grid-add-new-cell cursor-pointer"
                 @click="addEmptyRow()"
@@ -564,14 +564,14 @@ onBeforeUnmount(async () => {
         <template v-if="!isLocked && isUIAllowed('xcDatatableEditable')" #overlay>
           <a-menu class="shadow !rounded !py-0" @click="contextMenu = false">
             <a-menu-item v-if="contextMenuTarget" @click="deleteRow(contextMenuTarget.row)">
-              <div v-t="['a:row:delete']" class="nc-project-menu-item">
+              <div v-e="['a:row:delete']" class="nc-project-menu-item">
                 <!-- Delete Row -->
                 {{ $t('activity.deleteRow') }}
               </div>
             </a-menu-item>
 
             <a-menu-item @click="deleteSelectedRows">
-              <div v-t="['a:row:delete-bulk']" class="nc-project-menu-item">
+              <div v-e="['a:row:delete-bulk']" class="nc-project-menu-item">
                 <!-- Delete Selected Rows -->
                 {{ $t('activity.deleteSelectedRow') }}
               </div>
@@ -579,11 +579,11 @@ onBeforeUnmount(async () => {
 
             <!--            Clear cell -->
             <a-menu-item v-if="contextMenuTarget" @click="clearCell(contextMenuTarget)">
-              <div v-t="['a:row:clear']" class="nc-project-menu-item">{{ $t('activity.clearCell') }}</div>
+              <div v-e="['a:row:clear']" class="nc-project-menu-item">{{ $t('activity.clearCell') }}</div>
             </a-menu-item>
 
             <a-menu-item v-if="contextMenuTarget" @click="addEmptyRow(contextMenuTarget.row + 1)">
-              <div v-t="['a:row:insert']" class="nc-project-menu-item">
+              <div v-e="['a:row:insert']" class="nc-project-menu-item">
                 <!-- Insert New Row -->
                 {{ $t('activity.insertRow') }}
               </div>

packages/nc-gui/components/smartsheet/expanded-form/Comments.vue

@@ -57,7 +57,7 @@ watch(
     <div class="p-0">
       <div class="flex justify-center">
         <!--        Comments only -->
-        <a-checkbox v-model:checked="commentsOnly" v-t="['c:row-expand:comment-only']" @change="loadCommentsAndLogs"
+        <a-checkbox v-model:checked="commentsOnly" v-e="['c:row-expand:comment-only']" @change="loadCommentsAndLogs"
           >{{ $t('labels.commentsOnly') }}<span class="text-[11px] text-gray-500"></span>
         </a-checkbox>
       </div>

packages/nc-gui/components/smartsheet/expanded-form/Header.vue

@@ -64,7 +64,7 @@ const iconColor = '#1890ff'
       </template>
       <MdiCommentTextOutline
         v-if="isUIAllowed('rowComments') && !isNew"
-        v-t="['c:row-expand:comment-toggle']"
+        v-e="['c:row-expand:comment-toggle']"
         class="cursor-pointer select-none nc-toggle-comments text-gray-500"
         @click="commentsDrawer = !commentsDrawer"
       />

packages/nc-gui/components/smartsheet/sidebar/RenameableMenuItem.vue

@@ -151,7 +151,7 @@ function onStopEdit() {
     @dblclick.stop="isUIAllowed('virtualViewsCreateOrEdit') && onDblClick()"
     @click.stop="onClick"
   >
-    <div v-t="['a:view:open', { view: vModel.type }]" class="text-xs flex items-center w-full gap-2">
+    <div v-e="['a:view:open', { view: vModel.type }]" class="text-xs flex items-center w-full gap-2">
       <div class="flex w-auto">
         <MdiDrag
           class="nc-drag-icon hidden group-hover:block transition-opacity opacity-0 group-hover:opacity-100 text-gray-500 !cursor-move"

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

@@ -34,7 +34,7 @@ const { $e } = useNuxtApp()
 provide(ViewListInj, views)
 
 /** Sidebar visible */
-const { isOpen } = useSidebar({ storageKey: 'nc-right-sidebar' })
+const { isOpen } = useSidebar({ storageKey: 'nc-right-sidebar', isOpen: true })
 
 const sidebarCollapsed = computed(() => !isOpen.value)
 

packages/nc-gui/components/smartsheet/sidebar/toolbar/ToggleDrawer.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
 /** Sidebar visible */
-const { isOpen, toggle } = useSidebar({ storageKey: 'nc-right-sidebar' })
+const { isOpen, toggle } = useSidebar({ storageKey: 'nc-right-sidebar', isOpen: true })
 </script>
 
 <template>

packages/nc-gui/components/tabs/Smartsheet.vue

@@ -42,7 +42,7 @@ const openNewRecordFormHook = createEventHook<void>()
 const { isGallery, isGrid, isForm, isLocked } = useProvideSmartsheetStore(activeView as Ref<TableType>, meta)
 
 // provide the sidebar injection state
-provideSidebar({ storageKey: 'nc-right-sidebar' })
+provideSidebar({ storageKey: 'nc-right-sidebar', isOpen: true })
 
 // todo: move to store
 provide(MetaInj, meta)

packages/nc-gui/components/tabs/auth/UserManagement.vue

@@ -201,7 +201,7 @@ watchDebounced(searchText, () => loadUsers(), { debounce: 300, maxWait: 600 })
       </div>
 
       <div class="flex flex-row space-x-1">
-        <a-button v-t="['a:user:reload']" size="middle" type="text" @click="loadUsers()">
+        <a-button v-e="['a:user:reload']" size="middle" type="text" @click="loadUsers()">
           <div class="flex flex-row justify-center items-center caption capitalize space-x-1">
             <MdiReload class="text-gray-500" />
             <div class="text-gray-500">{{ $t('general.reload') }}</div>
@@ -209,7 +209,7 @@ watchDebounced(searchText, () => loadUsers(), { debounce: 300, maxWait: 600 })
         </a-button>
         <a-button
           v-if="isUIAllowed('newUser')"
-          v-t="['c:user:invite']"
+          v-e="['c:user:invite']"
           size="middle"
           type="primary"
           ghost
@@ -282,7 +282,7 @@ watchDebounced(searchText, () => loadUsers(), { debounce: 300, maxWait: 600 })
             <template #title>
               <span>{{ $t('activity.deleteUser') }}</span>
             </template>
-            <a-button v-t="['c:user:delete']" type="text" class="!rounded-md nc-user-delete" @click="onDelete(user)">
+            <a-button v-e="['c:user:delete']" type="text" class="!rounded-md nc-user-delete" @click="onDelete(user)">
               <template #icon>
                 <MdiDeleteOutline class="flex mx-auto h-[1.1rem] text-gray-500" />
               </template>

packages/nc-gui/components/webhook/Drawer.vue

@@ -38,7 +38,7 @@ async function editHook(hook: Record<string, any>) {
         <WebhookList v-else @edit="editHook" @add="editOrAdd = true" />
       </a-layout-content>
       <a-layout-footer class="!bg-white flex">
-        <a-button v-t="['e:hiring']" class="mx-auto mb-4" href="https://angel.co/company/nocodb" target="_blank" size="large">
+        <a-button v-e="['e:hiring']" class="mx-auto mb-4" href="https://angel.co/company/nocodb" target="_blank" size="large">
           🚀 {{ $t('labels.weAreHiring') }}! 🚀
         </a-button>
       </a-layout-footer>

packages/nc-gui/components/webhook/List.vue

@@ -58,7 +58,7 @@ onMounted(() => {
     <div class="mb-2">
       <div class="float-left font-bold text-xl mt-2 mb-4">{{ meta.title }} : Webhooks</div>
       <a-button
-        v-t="['c:webhook:add']"
+        v-e="['c:webhook:add']"
         class="float-right nc-btn-create-webhook"
         type="primary"
         size="large"

packages/nc-gui/composables/useCellUrlConfig.ts

@@ -1,5 +1,5 @@
 import type { MaybeRef } from '@vueuse/core'
-import { computed, ref, unref, useInjectionState, useRoute } from '#imports'
+import { computed, unref, useRoute } from '#imports'
 
 export interface CellUrlOptions {
   behavior?: string

packages/nc-gui/layouts/base.vue

@@ -41,7 +41,7 @@ hooks.hook('page:finish', () => {
       >
         <div
           v-if="!route.params.projectType"
-          v-t="['c:navbar:home']"
+          v-e="['c:navbar:home']"
           class="transition-all duration-200 p-2 cursor-pointer transform hover:scale-105 nc-noco-brand-icon"
           @click="navigateTo('/')"
         >
@@ -75,7 +75,7 @@ hooks.hook('page:finish', () => {
             <template #overlay>
               <a-menu class="!py-0 leading-8 !rounded">
                 <a-menu-item key="0" class="!rounded-t">
-                  <nuxt-link v-t="['c:navbar:user:email']" class="nc-project-menu-item group !no-underline" to="/user">
+                  <nuxt-link v-e="['c:navbar:user:email']" class="nc-project-menu-item group !no-underline" to="/user">
                     <MdiAt class="mt-1 group-hover:text-accent" />&nbsp;
 
                     <span class="prose group-hover:text-primary"> {{ email }}</span>
@@ -85,7 +85,7 @@ hooks.hook('page:finish', () => {
                 <a-menu-divider class="!m-0" />
 
                 <a-menu-item key="1" class="!rounded-b group">
-                  <div v-t="['a:navbar:user:sign-out']" class="nc-project-menu-item group" @click="logout">
+                  <div v-e="['a:navbar:user:sign-out']" class="nc-project-menu-item group" @click="logout">
                     <MdiLogout class="group-hover:text-accent" />&nbsp;
 
                     <span class="prose group-hover:text-primary">

packages/nc-gui/lib/types.ts

@@ -1,6 +1,6 @@
 import type { FilterType } from 'nocodb-sdk'
 import type { I18n } from 'vue-i18n'
-import type { Language, Role } from './enums'
+import type { Role } from './enums'
 
 export interface User {
   id: string

packages/nc-gui/pages/[projectType]/[projectId]/index.vue

@@ -177,7 +177,7 @@ if (type && name) {
         >
           <div
             v-if="isOpen && !isSharedBase"
-            v-t="['c:navbar:home']"
+            v-e="['c:navbar:home']"
             class="w-[40px] min-w-[40px] transition-all duration-200 p-1 cursor-pointer transform hover:scale-105 nc-noco-brand-icon"
             @click="navigateTo('/')"
           >
@@ -245,7 +245,7 @@ if (type && name) {
                     <!-- Copy Project Info -->
                     <a-menu-item key="copy">
                       <div
-                        v-t="['c:navbar:user:copy-proj-info']"
+                        v-e="['c:navbar:user:copy-proj-info']"
                         class="nc-project-menu-item group"
                         @click.stop="copyProjectInfo"
                       >
@@ -260,7 +260,7 @@ if (type && name) {
                     <a-menu-item key="api">
                       <div
                         v-if="isUIAllowed('apiDocs')"
-                        v-t="['e:api-docs']"
+                        v-e="['e:api-docs']"
                         class="nc-project-menu-item group"
                         @click.stop="openLink(`/api/v1/db/meta/projects/${route.params.projectId}/swagger`, appInfo.ncSiteUrl)"
                       >
@@ -271,7 +271,7 @@ if (type && name) {
 
                     <!-- Copy Auth Token -->
                     <a-menu-item key="copy">
-                      <div v-t="['a:navbar:user:copy-auth-token']" class="nc-project-menu-item group" @click.stop="copyAuthToken">
+                      <div v-e="['a:navbar:user:copy-auth-token']" class="nc-project-menu-item group" @click.stop="copyAuthToken">
                         <MdiScriptTextKeyOutline class="group-hover:text-accent" />
                         {{ $t('activity.account.authToken') }}
                       </div>
@@ -283,7 +283,7 @@ if (type && name) {
                     <a-menu-item key="teamAndSettings">
                       <div
                         v-if="isUIAllowed('settings')"
-                        v-t="['c:navdraw:project-settings']"
+                        v-e="['c:navdraw:project-settings']"
                         class="nc-project-menu-item group"
                         @click="toggleDialog(true, 'teamAndAuth')"
                       >
@@ -364,7 +364,7 @@ if (type && name) {
                     <!-- Preview As -->
                     <a-sub-menu v-if="isUIAllowed('previewAs')" key="preview-as">
                       <template #title>
-                        <div v-t="['c:navdraw:preview-as']" class="nc-project-menu-item group">
+                        <div v-e="['c:navdraw:preview-as']" class="nc-project-menu-item group">
                           <MdiFileEyeOutline class="group-hover:text-accent" />
                           {{ $t('activity.previewAs') }}
 
@@ -421,7 +421,7 @@ if (type && name) {
                       <template #expandIcon></template>
 
                       <a-menu-item key="0" class="!rounded-t">
-                        <nuxt-link v-t="['c:navbar:user:email']" class="nc-project-menu-item group !no-underline" to="/user">
+                        <nuxt-link v-e="['c:navbar:user:email']" class="nc-project-menu-item group !no-underline" to="/user">
                           <MdiAt class="mt-1 group-hover:text-accent" />&nbsp;
 
                           <span class="prose-sm">{{ email }}</span>
@@ -429,7 +429,7 @@ if (type && name) {
                       </a-menu-item>
 
                       <a-menu-item key="1" class="!rounded-b">
-                        <div v-t="['a:navbar:user:sign-out']" class="nc-project-menu-item group" @click="logout">
+                        <div v-e="['a:navbar:user:sign-out']" class="nc-project-menu-item group" @click="logout">
                           <MdiLogout class="group-hover:(!text-accent)" />&nbsp;
 
                           <span class="prose-sm nc-user-menu-signout">
@@ -448,7 +448,7 @@ if (type && name) {
             class="nc-sidebar-left-toggle-icon hover:after:(bg-primary bg-opacity-75) group nc-sidebar-add-row flex items-center px-2"
           >
             <MdiBackburger
-              v-t="['c:grid:toggle-navdraw']"
+              v-e="['c:grid:toggle-navdraw']"
               class="cursor-pointer transform transition-transform duration-500"
               :class="{ 'rotate-180': !isOpen }"
               @click="toggle(!isOpen)"

packages/nc-gui/pages/[projectType]/[projectId]/index/index.vue

@@ -39,7 +39,7 @@ function onEdit(targetKey: number, action: 'add' | 'remove' | string) {
           class="nc-sidebar-left-toggle-icon hover:after:(bg-primary bg-opacity-75) group nc-sidebar-add-row py-2 px-3"
         >
           <MdiMenu
-            v-t="['c:grid:toggle-navdraw']"
+            v-e="['c:grid:toggle-navdraw']"
             class="cursor-pointer transform transition-transform duration-500 text-white"
             :class="{ 'rotate-180': !isOpen }"
             @click="toggle(!isOpen)"

packages/nc-gui/pages/index/index/[projectId].vue

@@ -95,7 +95,7 @@ onMounted(async () => {
       </a-form-item>
 
       <div class="text-center">
-        <button v-t="['a:project:edit:rename']" type="submit" class="submit">
+        <button v-e="['a:project:edit:rename']" type="submit" class="submit">
           <span class="flex items-center gap-2">
             <MaterialSymbolsRocketLaunchOutline />
             {{ $t('general.edit') }}

packages/nc-gui/pages/index/index/index.vue

@@ -119,7 +119,7 @@ const getProjectPrimary = (project: ProjectType) => {
           :class="isLoading ? 'animate-spin ring ring-gray-200' : ''"
         >
           <MdiRefresh
-            v-t="['a:project:refresh']"
+            v-e="['a:project:refresh']"
             class="text-xl text-gray-500 group-hover:text-accent cursor-pointer"
             :class="isLoading ? '!text-primary' : ''"
             @click="loadProjects"
@@ -149,7 +149,7 @@ const getProjectPrimary = (project: ProjectType) => {
           <a-menu class="!py-0 rounded">
             <a-menu-item>
               <div
-                v-t="['c:project:create:xcdb']"
+                v-e="['c:project:create:xcdb']"
                 class="nc-project-menu-item group nc-create-xc-db-project"
                 @click="navigateTo('/create')"
               >
@@ -161,7 +161,7 @@ const getProjectPrimary = (project: ProjectType) => {
 
             <a-menu-item>
               <div
-                v-t="['c:project:create:extdb']"
+                v-e="['c:project:create:extdb']"
                 class="nc-project-menu-item group nc-create-external-db-project"
                 @click="navigateTo('/create-external')"
               >
@@ -252,7 +252,7 @@ const getProjectPrimary = (project: ProjectType) => {
         <a-table-column key="id" :title="$t('labels.actions')" data-index="id">
           <template #default="{ text, record }">
             <div class="flex items-center gap-2">
-              <MdiEditOutline v-t="['c:project:edit:rename']" class="nc-action-btn" @click.stop="navigateTo(`/${text}`)" />
+              <MdiEditOutline v-e="['c:project:edit:rename']" class="nc-action-btn" @click.stop="navigateTo(`/${text}`)" />
 
               <MdiDeleteOutline class="nc-action-btn" @click.stop="deleteProject(record)" />
             </div>

packages/nc-gui/plugins/tele.ts

@@ -63,7 +63,7 @@ export default defineNuxtPlugin(async (nuxtApp) => {
     },
   }
 
-  nuxtApp.vueApp.directive('t', {
+  nuxtApp.vueApp.directive('e', {
     created(el, binding, vnode) {
       if (vnode.el) vnode.el.addEventListener('click', getListener(binding))
       else el.addEventListener('click', getListener(binding))