From bcef7579bcc9098ee9922d25e7d1d29ae652ce12 Mon Sep 17 00:00:00 2001
From: braks <78412429+bcakmakoglu@users.noreply.github.com>
Date: Wed, 14 Sep 2022 00:02:47 +0200
Subject: [PATCH 01/82] feat(nc-gui): add survey mode option to share view

---
 .../smartsheet/toolbar/ShareView.vue          | 71 ++++++++++++-------
 1 file changed, 44 insertions(+), 27 deletions(-)

diff --git a/packages/nc-gui/components/smartsheet/toolbar/ShareView.vue b/packages/nc-gui/components/smartsheet/toolbar/ShareView.vue
index 3e76ccd682..c9c1dd01ad 100644
--- a/packages/nc-gui/components/smartsheet/toolbar/ShareView.vue
+++ b/packages/nc-gui/components/smartsheet/toolbar/ShareView.vue
@@ -33,6 +33,8 @@ let showShareModel = $ref(false)
 
 const passwordProtected = ref(false)
 
+const surveyMode = ref(false)
+
 const shared = ref()
 
 const allowCSVDownload = computed({
@@ -47,17 +49,21 @@ const allowCSVDownload = computed({
 })
 
 const genShareLink = async () => {
-  shared.value = await $api.dbViewShare.create(view.value?.id as string)
+  if (!view.value.id) return
+
+  shared.value = await $api.dbViewShare.create(view.value?.id)
   shared.value.meta =
     shared.value.meta && typeof shared.value.meta === 'string' ? JSON.parse(shared.value.meta) : shared.value.meta
+
   passwordProtected.value = shared.value.password !== null && shared.value.password !== ''
+
   showShareModel = true
 }
 
 const sharedViewUrl = computed(() => {
   if (!shared.value) return
-  let viewType
 
+  let viewType
   switch (shared.value.type) {
     case ViewTypes.FORM:
       viewType = 'form'
@@ -69,7 +75,7 @@ const sharedViewUrl = computed(() => {
       viewType = 'view'
   }
 
-  return `${dashboardUrl?.value}#/nc/${viewType}/${shared.value.uuid}`
+  return `${dashboardUrl?.value}#/nc/${viewType}/${shared.value.uuid}${surveyMode.value ? '?survey=1' : ''}`
 })
 
 async function saveAllowCSVDownload() {
@@ -105,9 +111,12 @@ const saveShareLinkPassword = async () => {
 }
 
 const copyLink = () => {
-  copy(sharedViewUrl?.value as string)
-  // Copied to clipboard
-  message.success(t('msg.info.copiedToClipboard'))
+  if (sharedViewUrl.value) {
+    copy(sharedViewUrl.value)
+
+    // Copied to clipboard
+    message.success(t('msg.info.copiedToClipboard'))
+  }
 }
 
 watch(passwordProtected, (value) => {
@@ -154,28 +163,36 @@ watch(passwordProtected, (value) => {
 
       <a-collapse ghost>
         <a-collapse-panel key="1" :header="$t('general.showOptions')">
-          <div class="mb-2">
-            <a-checkbox v-model:checked="passwordProtected" class="!text-xs">{{ $t('msg.info.beforeEnablePwd') }} </a-checkbox>
-
-            <div v-if="passwordProtected" class="flex gap-2 mt-2 mb-4">
-              <a-input
-                v-model:value="shared.password"
-                size="small"
-                class="!text-xs max-w-[250px]"
-                type="password"
-                :placeholder="$t('placeholder.password.enter')"
-              />
-
-              <a-button size="small" class="!text-xs" @click="saveShareLinkPassword">
-                {{ $t('placeholder.password.save') }}
-              </a-button>
+          <div class="flex flex-col gap-2">
+            <div>
+              <!-- Survey Mode; todo: i18n -->
+              <a-checkbox v-model:checked="surveyMode" class="!text-xs">Use Survey Mode </a-checkbox>
+            </div>
+
+            <div>
+              <!-- Password Protection -->
+              <a-checkbox v-model:checked="passwordProtected" class="!text-xs">{{ $t('msg.info.beforeEnablePwd') }} </a-checkbox>
+              <div v-if="passwordProtected" class="flex gap-2 mt-2 mb-4">
+                <a-input
+                  v-model:value="shared.password"
+                  size="small"
+                  class="!text-xs max-w-[250px]"
+                  type="password"
+                  :placeholder="$t('placeholder.password.enter')"/>
+
+
+                <a-button size="small" class="!text-xs" @click="saveShareLinkPassword">
+                  {{ $t('placeholder.password.save') }}
+                </a-button>
+              </div>
+            </div>
+
+            <div>
+              <!-- Allow Download -->
+              <a-checkbox v-if="shared && shared.type === ViewTypes.GRID" v-model:checked="allowCSVDownload" class="!text-xs">
+                {{ $t('labels.downloadAllowed') }}
+              </a-checkbox>
             </div>
-          </div>
-          <div>
-            <!-- Allow Download -->
-            <a-checkbox v-if="shared && shared.type === ViewTypes.GRID" v-model:checked="allowCSVDownload" class="!text-xs">
-              {{ $t('labels.downloadAllowed') }}
-            </a-checkbox>
           </div>
         </a-collapse-panel>
       </a-collapse>

From 0f1668f082df558adb6afc47c91d01908ed71a78 Mon Sep 17 00:00:00 2001
From: braks <78412429+bcakmakoglu@users.noreply.github.com>
Date: Wed, 14 Sep 2022 00:03:53 +0200
Subject: [PATCH 02/82] feat(nc-gui): add survey dir

---
 packages/nc-gui/components/shared-view/survey/index.vue | 7 +++++++
 1 file changed, 7 insertions(+)
 create mode 100644 packages/nc-gui/components/shared-view/survey/index.vue

diff --git a/packages/nc-gui/components/shared-view/survey/index.vue b/packages/nc-gui/components/shared-view/survey/index.vue
new file mode 100644
index 0000000000..4246b4dfdd
--- /dev/null
+++ b/packages/nc-gui/components/shared-view/survey/index.vue
@@ -0,0 +1,7 @@
+<script lang="ts" setup>
+// noop
+</script>
+
+<template>
+  <div>Survey Mode</div>
+</template>

From f3298470502995bfaebbf1179baa07e3b5d814c3 Mon Sep 17 00:00:00 2001
From: braks <78412429+bcakmakoglu@users.noreply.github.com>
Date: Thu, 15 Sep 2022 01:10:23 +0200
Subject: [PATCH 03/82] chore(nc-gui): show survey mode checkbox for form type

---
 packages/nc-gui/components/smartsheet/toolbar/ShareView.vue | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/packages/nc-gui/components/smartsheet/toolbar/ShareView.vue b/packages/nc-gui/components/smartsheet/toolbar/ShareView.vue
index c9c1dd01ad..8778499003 100644
--- a/packages/nc-gui/components/smartsheet/toolbar/ShareView.vue
+++ b/packages/nc-gui/components/smartsheet/toolbar/ShareView.vue
@@ -166,7 +166,9 @@ watch(passwordProtected, (value) => {
           <div class="flex flex-col gap-2">
             <div>
               <!-- Survey Mode; todo: i18n -->
-              <a-checkbox v-model:checked="surveyMode" class="!text-xs">Use Survey Mode </a-checkbox>
+              <a-checkbox v-if="shared.type === ViewTypes.FORM" v-model:checked="surveyMode" class="!text-xs">
+                Use Survey Mode
+              </a-checkbox>
             </div>
 
             <div>

From a8d86acca60a8c102970e37515c29167c0c9d2e0 Mon Sep 17 00:00:00 2001
From: braks <78412429+bcakmakoglu@users.noreply.github.com>
Date: Thu, 15 Sep 2022 10:39:16 +0200
Subject: [PATCH 04/82] chore(nc-gui): remove icon imports

---
 packages/nc-gui/components/smartsheet/toolbar/ShareView.vue | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/packages/nc-gui/components/smartsheet/toolbar/ShareView.vue b/packages/nc-gui/components/smartsheet/toolbar/ShareView.vue
index 8778499003..de7fd8ba23 100644
--- a/packages/nc-gui/components/smartsheet/toolbar/ShareView.vue
+++ b/packages/nc-gui/components/smartsheet/toolbar/ShareView.vue
@@ -49,9 +49,9 @@ const allowCSVDownload = computed({
 })
 
 const genShareLink = async () => {
-  if (!view.value.id) return
+  if (!view.value?.id) return
 
-  shared.value = await $api.dbViewShare.create(view.value?.id)
+  shared.value = await $api.dbViewShare.create(view.value.id)
   shared.value.meta =
     shared.value.meta && typeof shared.value.meta === 'string' ? JSON.parse(shared.value.meta) : shared.value.meta
 
@@ -75,7 +75,7 @@ const sharedViewUrl = computed(() => {
       viewType = 'view'
   }
 
-  return `${dashboardUrl?.value}#/nc/${viewType}/${shared.value.uuid}${surveyMode.value ? '?survey=1' : ''}`
+  return `${dashboardUrl?.value}#/nc/${surveyMode.value ? 'survey' : ''}${viewType}/${shared.value.uuid}`
 })
 
 async function saveAllowCSVDownload() {

From 89f5b188782a0738bec547966525255bde4cb869 Mon Sep 17 00:00:00 2001
From: braks <78412429+bcakmakoglu@users.noreply.github.com>
Date: Thu, 15 Sep 2022 11:16:50 +0200
Subject: [PATCH 05/82] chore(nc-gui): use path segment for survey mode

---
 packages/nc-gui/components/smartsheet/toolbar/ShareView.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/nc-gui/components/smartsheet/toolbar/ShareView.vue b/packages/nc-gui/components/smartsheet/toolbar/ShareView.vue
index de7fd8ba23..d1e6a4522a 100644
--- a/packages/nc-gui/components/smartsheet/toolbar/ShareView.vue
+++ b/packages/nc-gui/components/smartsheet/toolbar/ShareView.vue
@@ -75,7 +75,7 @@ const sharedViewUrl = computed(() => {
       viewType = 'view'
   }
 
-  return `${dashboardUrl?.value}#/nc/${surveyMode.value ? 'survey' : ''}${viewType}/${shared.value.uuid}`
+  return `${dashboardUrl?.value}#/nc/${viewType}/${shared.value.uuid}${surveyMode.value ? '/survey' : ''}`
 })
 
 async function saveAllowCSVDownload() {

From 1f490bde0a69444060bd575137bc9ccd6e36879d Mon Sep 17 00:00:00 2001
From: braks <78412429+bcakmakoglu@users.noreply.github.com>
Date: Thu, 15 Sep 2022 11:17:01 +0200
Subject: [PATCH 06/82] feat(nc-gui): add survey form pages

---
 .../[projectType]/form/[viewId]/index.vue     | 191 ++++--------------
 .../form/[viewId]/index/index.vue             | 121 +++++++++++
 .../form/[viewId]/index/survey.vue            |   0
 3 files changed, 164 insertions(+), 148 deletions(-)
 create mode 100644 packages/nc-gui/pages/[projectType]/form/[viewId]/index/index.vue
 create mode 100644 packages/nc-gui/pages/[projectType]/form/[viewId]/index/survey.vue

diff --git a/packages/nc-gui/pages/[projectType]/form/[viewId]/index.vue b/packages/nc-gui/pages/[projectType]/form/[viewId]/index.vue
index 10003bdaf4..618425aae5 100644
--- a/packages/nc-gui/pages/[projectType]/form/[viewId]/index.vue
+++ b/packages/nc-gui/pages/[projectType]/form/[viewId]/index.vue
@@ -1,159 +1,36 @@
 <script setup lang="ts">
-import { RelationTypes, UITypes, isVirtualCol } from 'nocodb-sdk'
 import { useSharedFormStoreOrThrow } from '#imports'
 
-const {
-  sharedFormView,
-  submitForm,
-  v$,
-  formState,
-  notFound,
-  formColumns,
-  submitted,
-  secondsRemain,
-  passwordDlg,
-  password,
-  loadSharedView,
-} = useSharedFormStoreOrThrow()
-
-function isRequired(_columnObj: Record<string, any>, required = false) {
-  let columnObj = _columnObj
-  if (
-    columnObj.uidt === UITypes.LinkToAnotherRecord &&
-    columnObj.colOptions &&
-    columnObj.colOptions.type === RelationTypes.BELONGS_TO
-  ) {
-    columnObj = formColumns.value?.find((c) => c.id === columnObj.colOptions.fk_child_column_id) as Record<string, any>
-  }
-
-  return !!(required || (columnObj && columnObj.rqd && !columnObj.cdf))
-}
+const { passwordDlg, password, loadSharedView } = useSharedFormStoreOrThrow()
 </script>
 
 <template>
   <div class="nc-form-view md:bg-primary bg-opacity-5 min-h-full flex flex-col nc-form-signin py-15">
-    <div
-      class="bg-white relative flex flex-col justify-center gap-2 w-full lg:max-w-1/2 max-w-500px m-auto p-8 md:(rounded-lg border-1 border-gray-200 shadow-xl)"
+    <NuxtPage />
+
+    <a-modal
+      v-model:visible="passwordDlg"
+      :closable="false"
+      width="28rem"
+      centered
+      :footer="null"
+      :mask-closable="false"
+      wrap-class-name="nc-modal-shared-form-password-dlg"
+      @close="passwordDlg = false"
     >
-      <template v-if="sharedFormView">
-        <img width="90" height="90" alt="NocoDB" class="mx-auto" src="~/assets/img/icons/512x512.png" />
-
-        <h1 class="prose-2xl font-bold self-center my-4">{{ sharedFormView?.heading }}</h1>
-
-        <h2 v-if="sharedFormView?.subheading" class="prose-lg text-gray-500 self-center">{{ sharedFormView.subheading }}</h2>
-
-        <a-alert v-if="notFound" type="warning" class="my-4 text-center" message="Not found" />
-
-        <template v-else-if="submitted">
-          <div class="flex justify-center">
-            <div v-if="sharedFormView" class="min-w-350px mt-3">
-              <a-alert
-                type="success"
-                class="my-4 text-center"
-                outlined
-                :message="sharedFormView.success_msg || 'Successfully submitted form data'"
-              />
-
-              <p v-if="sharedFormView.show_blank_form" class="text-xs text-gray-500 text-center my-4">
-                New form will be loaded after {{ secondsRemain }} seconds
-              </p>
-
-              <div v-if="sharedFormView.submit_another_form" class="text-center">
-                <a-button type="primary" @click="submitted = false"> Submit Another Form</a-button>
-              </div>
-            </div>
-          </div>
-        </template>
-
-        <template v-else-if="sharedFormView">
-          <div class="nc-form-wrapper">
-            <div class="nc-form h-full max-w-3/4 mx-auto">
-              <div v-for="(field, index) in formColumns" :key="index" class="flex flex-col my-6 gap-2">
-                <div class="flex nc-form-column-label">
-                  <LazySmartsheetHeaderVirtualCell
-                    v-if="isVirtualCol(field)"
-                    :column="{ ...field, title: field.label || field.title }"
-                    :required="isRequired(field, field.required)"
-                    :hide-menu="true"
-                  />
-
-                  <LazySmartsheetHeaderCell
-                    v-else
-                    :column="{ ...field, title: field.label || field.title }"
-                    :required="isRequired(field, field.required)"
-                    :hide-menu="true"
-                  />
-                </div>
-
-                <div v-if="isVirtualCol(field)" class="mt-0">
-                  <LazySmartsheetVirtualCell
-                    class="mt-0 nc-input"
-                    :class="`nc-form-input-${field.title.replaceAll(' ', '')}`"
-                    :column="field"
-                  />
-
-                  <div v-if="field.description" class="text-gray-500 text-[10px] mb-2 ml-1">{{ field.description }}</div>
-
-                  <template v-if="v$.virtual.$dirty && v$.virtual?.[field.title]">
-                    <div v-for="error of v$.virtual[field.title].$errors" :key="error" class="text-xs text-red-500">
-                      {{ error.$message }}
-                    </div>
-                  </template>
-                </div>
-
-                <div v-else class="mt-0">
-                  <LazySmartsheetCell
-                    v-model="formState[field.title]"
-                    class="nc-input"
-                    :class="`nc-form-input-${field.title.replaceAll(' ', '')}`"
-                    :column="field"
-                    :edit-enabled="true"
-                  />
-
-                  <div v-if="field.description" class="text-gray-500 text-[10px] mb-2 ml-1">{{ field.description }}</div>
-
-                  <template v-if="v$.localState.$dirty && v$.localState?.[field.title]">
-                    <div v-for="error of v$.localState[field.title].$errors" :key="error" class="text-xs text-red-500">
-                      {{ error.$message }}
-                    </div>
-                  </template>
-                </div>
-              </div>
-
-              <div class="text-center my-9">
-                <button type="submit" class="scaling-btn bg-opacity-100" @click="submitForm">
-                  {{ $t('general.submit') }}
-                </button>
-              </div>
-            </div>
-          </div>
-        </template>
-      </template>
-
-      <a-modal
-        v-model:visible="passwordDlg"
-        :closable="false"
-        width="28rem"
-        centered
-        :footer="null"
-        :mask-closable="false"
-        wrap-class-name="nc-modal-shared-form-password-dlg"
-        @close="passwordDlg = false"
-      >
-        <div class="w-full flex flex-col">
-          <a-typography-title :level="4">This shared view is protected</a-typography-title>
-
-          <a-form ref="formRef" :model="{ password }" class="mt-2" @finish="loadSharedView">
-            <a-form-item name="password" :rules="[{ required: true, message: $t('msg.error.signUpRules.passwdRequired') }]">
-              <a-input-password v-model:value="password" :placeholder="$t('msg.info.signUp.enterPassword')" />
-            </a-form-item>
-
-            <!-- Unlock -->
-            <a-button type="primary" html-type="submit">{{ $t('general.unlock') }}</a-button>
-          </a-form>
-        </div>
-      </a-modal>
-    </div>
+      <div class="w-full flex flex-col">
+        <a-typography-title :level="4">This shared view is protected</a-typography-title>
+
+        <a-form ref="formRef" :model="{ password }" class="mt-2" @finish="loadSharedView">
+          <a-form-item name="password" :rules="[{ required: true, message: $t('msg.error.signUpRules.passwdRequired') }]">
+            <a-input-password v-model:value="password" :placeholder="$t('msg.info.signUp.enterPassword')" />
+          </a-form-item>
+
+          <!-- Unlock -->
+          <a-button type="primary" html-type="submit">{{ $t('general.unlock') }}</a-button>
+        </a-form>
+      </div>
+    </a-modal>
   </div>
 </template>
 
@@ -162,5 +39,23 @@ function isRequired(_columnObj: Record<string, any>, required = false) {
   .nc-input {
     @apply w-full rounded p-2 min-h-[40px] flex items-center border-solid border-1 border-primary;
   }
+
+  .submit {
+    @apply z-1 relative color-transition rounded p-3 text-white shadow-sm;
+
+    &::after {
+      @apply rounded absolute top-0 left-0 right-0 bottom-0 transition-all duration-150 ease-in-out bg-primary;
+      content: '';
+      z-index: -1;
+    }
+
+    &:hover::after {
+      @apply transform scale-110 ring ring-accent;
+    }
+
+    &:active::after {
+      @apply ring ring-accent;
+    }
+  }
 }
 </style>
diff --git a/packages/nc-gui/pages/[projectType]/form/[viewId]/index/index.vue b/packages/nc-gui/pages/[projectType]/form/[viewId]/index/index.vue
new file mode 100644
index 0000000000..457e1e5178
--- /dev/null
+++ b/packages/nc-gui/pages/[projectType]/form/[viewId]/index/index.vue
@@ -0,0 +1,121 @@
+<script lang="ts" setup>
+import { RelationTypes, UITypes, isVirtualCol } from 'nocodb-sdk'
+import { useSharedFormStoreOrThrow } from '#imports'
+
+const { sharedFormView, submitForm, v$, formState, notFound, formColumns, submitted, secondsRemain, isLoading } =
+  useSharedFormStoreOrThrow()
+
+function isRequired(_columnObj: Record<string, any>, required = false) {
+  let columnObj = _columnObj
+  if (
+    columnObj.uidt === UITypes.LinkToAnotherRecord &&
+    columnObj.colOptions &&
+    columnObj.colOptions.type === RelationTypes.BELONGS_TO
+  ) {
+    columnObj = formColumns.value?.find((c) => c.id === columnObj.colOptions.fk_child_column_id) as Record<string, any>
+  }
+
+  return !!(required || (columnObj && columnObj.rqd && !columnObj.cdf))
+}
+</script>
+
+<template>
+  <div
+    class="bg-white relative flex flex-col justify-center gap-2 w-full lg:max-w-1/2 max-w-500px m-auto p-4 md:(rounded-lg border-1 border-gray-200 shadow-xl)"
+  >
+    <template v-if="sharedFormView">
+      <general-noco-icon class="color-transition hover:(ring ring-accent)" :class="[isLoading ? 'animated-bg-gradient' : '']" />
+
+      <h1 class="prose-2xl font-bold self-center my-4">{{ sharedFormView?.heading }}</h1>
+
+      <h2 v-if="sharedFormView?.subheading" class="prose-lg text-gray-500 self-center">{{ sharedFormView.subheading }}</h2>
+
+      <a-alert v-if="notFound" type="warning" class="my-4 text-center" message="Not found" />
+
+      <template v-else-if="submitted">
+        <div class="flex justify-center">
+          <div v-if="sharedFormView" class="min-w-350px mt-3">
+            <a-alert
+              type="success"
+              class="my-4 text-center"
+              outlined
+              :message="sharedFormView.success_msg || 'Successfully submitted form data'"
+            />
+
+            <p v-if="sharedFormView.show_blank_form" class="text-xs text-gray-500 text-center my-4">
+              New form will be loaded after {{ secondsRemain }} seconds
+            </p>
+
+            <div v-if="sharedFormView.submit_another_form" class="text-center">
+              <a-button type="primary" @click="submitted = false"> Submit Another Form</a-button>
+            </div>
+          </div>
+        </div>
+      </template>
+
+      <template v-else-if="sharedFormView">
+        <div class="nc-form-wrapper">
+          <div class="nc-form h-full max-w-3/4 mx-auto">
+            <div v-for="(field, index) in formColumns" :key="index" class="flex flex-col my-6 gap-2">
+              <div class="flex nc-form-column-label">
+                <SmartsheetHeaderVirtualCell
+                  v-if="isVirtualCol(field)"
+                  :column="{ ...field, title: field.label || field.title }"
+                  :required="isRequired(field, field.required)"
+                  :hide-menu="true"
+                />
+
+                <SmartsheetHeaderCell
+                  v-else
+                  :column="{ ...field, title: field.label || field.title }"
+                  :required="isRequired(field, field.required)"
+                  :hide-menu="true"
+                />
+              </div>
+
+              <div v-if="isVirtualCol(field)" class="mt-0">
+                <SmartsheetVirtualCell
+                  class="mt-0 nc-input"
+                  :class="`nc-form-input-${field.title.replaceAll(' ', '')}`"
+                  :column="field"
+                />
+
+                <div v-if="field.description" class="text-gray-500 text-[10px] mb-2 ml-1">{{ field.description }}</div>
+
+                <template v-if="v$.virtual.$dirty && v$.virtual?.[field.title]">
+                  <div v-for="error of v$.virtual[field.title].$errors" :key="error" class="text-xs text-red-500">
+                    {{ error.$message }}
+                  </div>
+                </template>
+              </div>
+
+              <div v-else class="mt-0">
+                <SmartsheetCell
+                  v-model="formState[field.title]"
+                  class="nc-input"
+                  :class="`nc-form-input-${field.title.replaceAll(' ', '')}`"
+                  :column="field"
+                  :edit-enabled="true"
+                />
+
+                <div v-if="field.description" class="text-gray-500 text-[10px] mb-2 ml-1">{{ field.description }}</div>
+
+                <template v-if="v$.localState.$dirty && v$.localState?.[field.title]">
+                  <div v-for="error of v$.localState[field.title].$errors" :key="error" class="text-xs text-red-500">
+                    {{ error.$message }}
+                  </div>
+                </template>
+              </div>
+            </div>
+
+            <div class="text-center my-9">
+              <button type="submit" class="submit" @click="submitForm">
+                {{ $t('general.submit') }}
+              </button>
+            </div>
+          </div>
+        </div>
+      </template>
+    </template>
+  </div>
+</template>
diff --git a/packages/nc-gui/pages/[projectType]/form/[viewId]/index/survey.vue b/packages/nc-gui/pages/[projectType]/form/[viewId]/index/survey.vue
new file mode 100644
index 0000000000..e69de29bb2

From 415dd78de68eb3b2875b1c6065292f97a8e01c0a Mon Sep 17 00:00:00 2001
From: braks <78412429+bcakmakoglu@users.noreply.github.com>
Date: Thu, 15 Sep 2022 13:23:41 +0200
Subject: [PATCH 07/82] chore(nc-gui): update form view styles

---
 packages/nc-gui/pages/[projectType]/form/[viewId]/index.vue   | 2 +-
 .../nc-gui/pages/[projectType]/form/[viewId]/index/index.vue  | 4 ++--
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/packages/nc-gui/pages/[projectType]/form/[viewId]/index.vue b/packages/nc-gui/pages/[projectType]/form/[viewId]/index.vue
index 618425aae5..484f52de42 100644
--- a/packages/nc-gui/pages/[projectType]/form/[viewId]/index.vue
+++ b/packages/nc-gui/pages/[projectType]/form/[viewId]/index.vue
@@ -5,7 +5,7 @@ const { passwordDlg, password, loadSharedView } = useSharedFormStoreOrThrow()
 </script>
 
 <template>
-  <div class="nc-form-view md:bg-primary bg-opacity-5 min-h-full flex flex-col nc-form-signin py-15">
+  <div class="nc-form-view md:bg-primary bg-opacity-5 h-full min-h-[600px] flex flex-col justify-center items-center nc-form-signin">
     <NuxtPage />
 
     <a-modal
diff --git a/packages/nc-gui/pages/[projectType]/form/[viewId]/index/index.vue b/packages/nc-gui/pages/[projectType]/form/[viewId]/index/index.vue
index 457e1e5178..603c2e1adb 100644
--- a/packages/nc-gui/pages/[projectType]/form/[viewId]/index/index.vue
+++ b/packages/nc-gui/pages/[projectType]/form/[viewId]/index/index.vue
@@ -21,7 +21,7 @@ function isRequired(_columnObj: Record<string, any>, required = false) {
 
 <template>
   <div
-    class="bg-white relative flex flex-col justify-center gap-2 w-full lg:max-w-1/2 max-w-500px m-auto p-4 md:(rounded-lg border-1 border-gray-200 shadow-xl)"
+    class="bg-white relative flex flex-col justify-center gap-2 w-full lg:max-w-1/2 max-w-500px m-auto p-8 md:(rounded-lg border-1 border-gray-200 shadow-xl)"
   >
     <template v-if="sharedFormView">
       <general-noco-icon class="color-transition hover:(ring ring-accent)" :class="[isLoading ? 'animated-bg-gradient' : '']" />
@@ -108,7 +108,7 @@ function isRequired(_columnObj: Record<string, any>, required = false) {
               </div>
             </div>
 
-            <div class="text-center my-9">
+            <div class="text-center">
               <button type="submit" class="submit" @click="submitForm">
                 {{ $t('general.submit') }}
               </button>

From 9e8f500d1a074b786045e218ff4e5d5d37949f78 Mon Sep 17 00:00:00 2001
From: braks <78412429+bcakmakoglu@users.noreply.github.com>
Date: Thu, 15 Sep 2022 13:39:48 +0200
Subject: [PATCH 08/82] chore(nc-gui): add `powered by` note to bottom of form
 page

---
 .../pages/[projectType]/form/[viewId]/index.vue       |  2 ++
 .../pages/[projectType]/form/[viewId]/index/index.vue | 11 ++++-------
 .../[projectType]/form/[viewId]/index/survey.vue      |  3 +++
 3 files changed, 9 insertions(+), 7 deletions(-)

diff --git a/packages/nc-gui/pages/[projectType]/form/[viewId]/index.vue b/packages/nc-gui/pages/[projectType]/form/[viewId]/index.vue
index 484f52de42..be092b5eec 100644
--- a/packages/nc-gui/pages/[projectType]/form/[viewId]/index.vue
+++ b/packages/nc-gui/pages/[projectType]/form/[viewId]/index.vue
@@ -8,6 +8,8 @@ const { passwordDlg, password, loadSharedView } = useSharedFormStoreOrThrow()
   <div class="nc-form-view md:bg-primary bg-opacity-5 h-full min-h-[600px] flex flex-col justify-center items-center nc-form-signin">
     <NuxtPage />
 
+    <div class="self-end prose-xs text-gray-400 mx-auto my-4 relative flex items-center gap-2">Powered by NocoDB</div>
+
     <a-modal
       v-model:visible="passwordDlg"
       :closable="false"
diff --git a/packages/nc-gui/pages/[projectType]/form/[viewId]/index/index.vue b/packages/nc-gui/pages/[projectType]/form/[viewId]/index/index.vue
index 603c2e1adb..9f45475d10 100644
--- a/packages/nc-gui/pages/[projectType]/form/[viewId]/index/index.vue
+++ b/packages/nc-gui/pages/[projectType]/form/[viewId]/index/index.vue
@@ -2,8 +2,7 @@
 import { RelationTypes, UITypes, isVirtualCol } from 'nocodb-sdk'
 import { useSharedFormStoreOrThrow } from '#imports'
 
-const { sharedFormView, submitForm, v$, formState, notFound, formColumns, submitted, secondsRemain, isLoading } =
-  useSharedFormStoreOrThrow()
+const { sharedFormView, submitForm, v$, formState, notFound, formColumns, submitted, secondsRemain } = useSharedFormStoreOrThrow()
 
 function isRequired(_columnObj: Record<string, any>, required = false) {
   let columnObj = _columnObj
@@ -24,11 +23,9 @@ function isRequired(_columnObj: Record<string, any>, required = false) {
     class="bg-white relative flex flex-col justify-center gap-2 w-full lg:max-w-1/2 max-w-500px m-auto p-8 md:(rounded-lg border-1 border-gray-200 shadow-xl)"
   >
     <template v-if="sharedFormView">
-      <general-noco-icon class="color-transition hover:(ring ring-accent)" :class="[isLoading ? 'animated-bg-gradient' : '']" />
+      <h1 class="prose-2xl font-bold self-center my-4">{{ sharedFormView.heading }}</h1>
 
-      <h1 class="prose-2xl font-bold self-center my-4">{{ sharedFormView?.heading }}</h1>
-
-      <h2 v-if="sharedFormView?.subheading" class="prose-lg text-gray-500 self-center">{{ sharedFormView.subheading }}</h2>
+      <h2 v-if="sharedFormView.subheading" class="prose-lg text-gray-500 self-center">{{ sharedFormView.subheading }}</h2>
 
       <a-alert v-if="notFound" type="warning" class="my-4 text-center" message="Not found" />
 
@@ -53,7 +50,7 @@ function isRequired(_columnObj: Record<string, any>, required = false) {
         </div>
       </template>
 
-      <template v-else-if="sharedFormView">
+      <template v-else>
         <div class="nc-form-wrapper">
           <div class="nc-form h-full max-w-3/4 mx-auto">
             <div v-for="(field, index) in formColumns" :key="index" class="flex flex-col my-6 gap-2">
diff --git a/packages/nc-gui/pages/[projectType]/form/[viewId]/index/survey.vue b/packages/nc-gui/pages/[projectType]/form/[viewId]/index/survey.vue
index e69de29bb2..8e8b369ad9 100644
--- a/packages/nc-gui/pages/[projectType]/form/[viewId]/index/survey.vue
+++ b/packages/nc-gui/pages/[projectType]/form/[viewId]/index/survey.vue
@@ -0,0 +1,3 @@
+<template>
+  <div>Survey Mode</div>
+</template>

From cfb88486b3b2c7a1a8be372c86410d69d4f1078f Mon Sep 17 00:00:00 2001
From: braks <78412429+bcakmakoglu@users.noreply.github.com>
Date: Thu, 15 Sep 2022 14:17:08 +0200
Subject: [PATCH 09/82] feat(nc-gui): add stepper to survey page

---
 packages/nc-gui/components.d.ts               |   1 +
 .../form/[viewId]/index/index.vue             |   9 +-
 .../form/[viewId]/index/survey.vue            | 105 +++++++++++++++++-
 3 files changed, 113 insertions(+), 2 deletions(-)

diff --git a/packages/nc-gui/components.d.ts b/packages/nc-gui/components.d.ts
index e35c39fdac..aec2ec06a5 100644
--- a/packages/nc-gui/components.d.ts
+++ b/packages/nc-gui/components.d.ts
@@ -129,6 +129,7 @@ declare module '@vue/runtime-core' {
     MdiCheck: typeof import('~icons/mdi/check')['default']
     MdiChevronDown: typeof import('~icons/mdi/chevron-down')['default']
     MdiChevronLeft: typeof import('~icons/mdi/chevron-left')['default']
+    MdiChevronRight: typeof import('~icons/mdi/chevron-right')['default']
     MdiClose: typeof import('~icons/mdi/close')['default']
     MdiCloseBox: typeof import('~icons/mdi/close-box')['default']
     MdiCloseCircle: typeof import('~icons/mdi/close-circle')['default']
diff --git a/packages/nc-gui/pages/[projectType]/form/[viewId]/index/index.vue b/packages/nc-gui/pages/[projectType]/form/[viewId]/index/index.vue
index 9f45475d10..63c1c89cf8 100644
--- a/packages/nc-gui/pages/[projectType]/form/[viewId]/index/index.vue
+++ b/packages/nc-gui/pages/[projectType]/form/[viewId]/index/index.vue
@@ -2,7 +2,8 @@
 import { RelationTypes, UITypes, isVirtualCol } from 'nocodb-sdk'
 import { useSharedFormStoreOrThrow } from '#imports'
 
-const { sharedFormView, submitForm, v$, formState, notFound, formColumns, submitted, secondsRemain } = useSharedFormStoreOrThrow()
+const { sharedFormView, submitForm, v$, formState, notFound, formColumns, submitted, secondsRemain, isLoading } =
+  useSharedFormStoreOrThrow()
 
 function isRequired(_columnObj: Record<string, any>, required = false) {
   let columnObj = _columnObj
@@ -51,6 +52,12 @@ function isRequired(_columnObj: Record<string, any>, required = false) {
       </template>
 
       <template v-else>
+        <GeneralOverlay class="bg-gray-400/75" :model-value="isLoading" inline transition>
+          <div class="w-full h-full flex items-center justify-center">
+            <a-spin size="large" />
+          </div>
+        </GeneralOverlay>
+
         <div class="nc-form-wrapper">
           <div class="nc-form h-full max-w-3/4 mx-auto">
             <div v-for="(field, index) in formColumns" :key="index" class="flex flex-col my-6 gap-2">
diff --git a/packages/nc-gui/pages/[projectType]/form/[viewId]/index/survey.vue b/packages/nc-gui/pages/[projectType]/form/[viewId]/index/survey.vue
index 8e8b369ad9..4293bdd88c 100644
--- a/packages/nc-gui/pages/[projectType]/form/[viewId]/index/survey.vue
+++ b/packages/nc-gui/pages/[projectType]/form/[viewId]/index/survey.vue
@@ -1,3 +1,106 @@
+<script lang="ts" setup>
+import { RelationTypes, UITypes, isVirtualCol } from 'nocodb-sdk'
+import { computed, useSharedFormStoreOrThrow, useStepper } from '#imports'
+
+const { v$, formState, formColumns } = useSharedFormStoreOrThrow()
+
+function isRequired(_columnObj: Record<string, any>, required = false) {
+  let columnObj = _columnObj
+  if (
+    columnObj.uidt === UITypes.LinkToAnotherRecord &&
+    columnObj.colOptions &&
+    columnObj.colOptions.type === RelationTypes.BELONGS_TO
+  ) {
+    columnObj = formColumns.value?.find((c) => c.id === columnObj.colOptions.fk_child_column_id) as Record<string, any>
+  }
+
+  return !!(required || (columnObj && columnObj.rqd && !columnObj.cdf))
+}
+
+const steps = computed(() => {
+  if (!formColumns.value) return []
+  return formColumns.value.reduce((acc, column) => {
+    acc.push((column as any).label || column.title)
+
+    return acc
+  }, [] as string[])
+})
+
+const { index, goToPrevious, goToNext, isFirst, isLast } = useStepper(steps)
+
+const field = computed(() => formColumns.value?.[index.value])
+</script>
+
 <template>
-  <div>Survey Mode</div>
+  <div
+    class="bg-white relative flex flex-col justify-center gap-2 w-full lg:max-w-1/2 max-w-500px m-auto px-8 py-4 md:(rounded-lg border-1 border-gray-200 shadow-xl)"
+  >
+    <div v-if="field" class="flex flex-col my-6 gap-2">
+      <div class="flex nc-form-column-label">
+        <SmartsheetHeaderVirtualCell
+          v-if="isVirtualCol(field)"
+          :column="{ ...field, title: field.label || field.title }"
+          :required="isRequired(field, field.required)"
+          :hide-menu="true"
+        />
+
+        <SmartsheetHeaderCell
+          v-else
+          :column="{ ...field, title: field.label || field.title }"
+          :required="isRequired(field, field.required)"
+          :hide-menu="true"
+        />
+      </div>
+
+      <div v-if="isVirtualCol(field)" class="mt-0">
+        <SmartsheetVirtualCell
+          class="mt-0 nc-input"
+          :class="`nc-form-input-${field.title.replaceAll(' ', '')}`"
+          :column="field"
+        />
+
+        <div v-if="field.description" class="text-gray-500 text-[10px] mb-2 ml-1">{{ field.description }}</div>
+
+        <template v-if="v$.virtual.$dirty && v$.virtual?.[field.title]">
+          <div v-for="error of v$.virtual[field.title].$errors" :key="error" class="text-xs text-red-500">
+            {{ error.$message }}
+          </div>
+        </template>
+      </div>
+
+      <div v-else class="mt-0">
+        <SmartsheetCell
+          v-model="formState[field.title]"
+          class="nc-input"
+          :class="`nc-form-input-${field.title.replaceAll(' ', '')}`"
+          :column="field"
+          :edit-enabled="true"
+        />
+
+        <div v-if="field.description" class="text-gray-500 text-[10px] mb-2 ml-1">{{ field.description }}</div>
+
+        <template v-if="v$.localState.$dirty && v$.localState?.[field.title]">
+          <div v-for="error of v$.localState[field.title].$errors" :key="error" class="text-xs text-red-500">
+            {{ error.$message }}
+          </div>
+        </template>
+      </div>
+    </div>
+
+    <div v-if="!isFirst || !isLast" class="flex w-full text-lg">
+      <a-tooltip v-if="!isFirst" title="Go to previous" :mouse-enter-delay="1" :mouse-leave-delay="0">
+        <button class="group color-transition transform hover:scale-110" @click="goToPrevious">
+          <MdiChevronLeft class="group-hover:text-accent" />
+        </button>
+      </a-tooltip>
+
+      <div class="flex-1" />
+
+      <a-tooltip v-if="!isLast" title="Go to next" :mouse-enter-delay="1" :mouse-leave-delay="0">
+        <button class="group color-transition transform hover:scale-110" @click="goToNext">
+          <MdiChevronRight class="group-hover:text-accent" />
+        </button>
+      </a-tooltip>
+    </div>
+  </div>
 </template>

From 985afa5a1c7fc4169b5ec4d82140abd0a6e032d1 Mon Sep 17 00:00:00 2001
From: braks <78412429+bcakmakoglu@users.noreply.github.com>
Date: Thu, 15 Sep 2022 15:00:43 +0200
Subject: [PATCH 10/82] feat(nc-gui): allow switching steps with swipe gesture

---
 .../form/[viewId]/index/survey.vue            | 182 +++++++++++-------
 1 file changed, 117 insertions(+), 65 deletions(-)

diff --git a/packages/nc-gui/pages/[projectType]/form/[viewId]/index/survey.vue b/packages/nc-gui/pages/[projectType]/form/[viewId]/index/survey.vue
index 4293bdd88c..8ebbe943c6 100644
--- a/packages/nc-gui/pages/[projectType]/form/[viewId]/index/survey.vue
+++ b/packages/nc-gui/pages/[projectType]/form/[viewId]/index/survey.vue
@@ -1,6 +1,6 @@
 <script lang="ts" setup>
 import { RelationTypes, UITypes, isVirtualCol } from 'nocodb-sdk'
-import { computed, useSharedFormStoreOrThrow, useStepper } from '#imports'
+import { computed, ref, useEventListener, useSharedFormStoreOrThrow, useStepper } from '#imports'
 
 const { v$, formState, formColumns } = useSharedFormStoreOrThrow()
 
@@ -28,79 +28,131 @@ const steps = computed(() => {
 
 const { index, goToPrevious, goToNext, isFirst, isLast } = useStepper(steps)
 
+const transitionName = ref<'left' | 'right'>('left')
+
 const field = computed(() => formColumns.value?.[index.value])
-</script>
 
-<template>
-  <div
-    class="bg-white relative flex flex-col justify-center gap-2 w-full lg:max-w-1/2 max-w-500px m-auto px-8 py-4 md:(rounded-lg border-1 border-gray-200 shadow-xl)"
-  >
-    <div v-if="field" class="flex flex-col my-6 gap-2">
-      <div class="flex nc-form-column-label">
-        <SmartsheetHeaderVirtualCell
-          v-if="isVirtualCol(field)"
-          :column="{ ...field, title: field.label || field.title }"
-          :required="isRequired(field, field.required)"
-          :hide-menu="true"
-        />
-
-        <SmartsheetHeaderCell
-          v-else
-          :column="{ ...field, title: field.label || field.title }"
-          :required="isRequired(field, field.required)"
-          :hide-menu="true"
-        />
-      </div>
+const el = ref<HTMLDivElement>()
 
-      <div v-if="isVirtualCol(field)" class="mt-0">
-        <SmartsheetVirtualCell
-          class="mt-0 nc-input"
-          :class="`nc-form-input-${field.title.replaceAll(' ', '')}`"
-          :column="field"
-        />
+const goNext = () => {
+  if (isLast.value) return
 
-        <div v-if="field.description" class="text-gray-500 text-[10px] mb-2 ml-1">{{ field.description }}</div>
+  transitionName.value = 'left'
 
-        <template v-if="v$.virtual.$dirty && v$.virtual?.[field.title]">
-          <div v-for="error of v$.virtual[field.title].$errors" :key="error" class="text-xs text-red-500">
-            {{ error.$message }}
-          </div>
-        </template>
-      </div>
+  goToNext()
+}
+
+const goPrevious = () => {
+  if (isFirst.value) return
+
+  transitionName.value = 'right'
+
+  goToPrevious()
+}
+
+useEventListener('wheel', (event) => {
+  if (Math.abs(event.deltaX) < Math.abs(event.deltaY)) {
+    // Scrolling more vertically than horizontally
+    return
+  }
+
+  if (event.deltaX < -10) {
+    goPrevious()
+  } else if (event.deltaX > 10) {
+    goNext()
+  }
+})
+
+useEventListener(
+  'touchmove',
+  (e) => {
+    e.preventDefault()
+    console.log('touchmove')
+  },
+  { passive: false },
+)
+</script>
 
-      <div v-else class="mt-0">
-        <SmartsheetCell
-          v-model="formState[field.title]"
-          class="nc-input"
-          :class="`nc-form-input-${field.title.replaceAll(' ', '')}`"
-          :column="field"
-          :edit-enabled="true"
-        />
-
-        <div v-if="field.description" class="text-gray-500 text-[10px] mb-2 ml-1">{{ field.description }}</div>
-
-        <template v-if="v$.localState.$dirty && v$.localState?.[field.title]">
-          <div v-for="error of v$.localState[field.title].$errors" :key="error" class="text-xs text-red-500">
-            {{ error.$message }}
-          </div>
-        </template>
+<template>
+  <Transition :name="`slide-${transitionName}`" mode="out-in">
+    <div
+      ref="el"
+      :key="field.title"
+      class="bg-white relative flex flex-col justify-center gap-2 w-full lg:max-w-1/2 max-w-500px m-auto px-8 py-4 md:(rounded-lg border-1 border-gray-200 shadow-xl)"
+    >
+      <div v-if="field" class="flex flex-col my-6 gap-2">
+        <div class="flex nc-form-column-label">
+          <SmartsheetHeaderVirtualCell
+            v-if="isVirtualCol(field)"
+            :column="{ ...field, title: field.label || field.title }"
+            :required="isRequired(field, field.required)"
+            :hide-menu="true"
+          />
+
+          <SmartsheetHeaderCell
+            v-else
+            :column="{ ...field, title: field.label || field.title }"
+            :required="isRequired(field, field.required)"
+            :hide-menu="true"
+          />
+        </div>
+
+        <div v-if="isVirtualCol(field)" class="mt-0">
+          <SmartsheetVirtualCell
+            class="mt-0 nc-input"
+            :class="`nc-form-input-${field.title.replaceAll(' ', '')}`"
+            :column="field"
+          />
+
+          <div v-if="field.description" class="text-gray-500 text-[10px] mb-2 ml-1">{{ field.description }}</div>
+
+          <template v-if="v$.virtual.$dirty && v$.virtual?.[field.title]">
+            <div v-for="error of v$.virtual[field.title].$errors" :key="error" class="text-xs text-red-500">
+              {{ error.$message }}
+            </div>
+          </template>
+        </div>
+
+        <div v-else class="mt-0">
+          <SmartsheetCell
+            v-model="formState[field.title]"
+            class="nc-input"
+            :class="`nc-form-input-${field.title.replaceAll(' ', '')}`"
+            :column="field"
+            :edit-enabled="true"
+          />
+
+          <div v-if="field.description" class="text-gray-500 text-[10px] mb-2 ml-1">{{ field.description }}</div>
+
+          <template v-if="v$.localState.$dirty && v$.localState?.[field.title]">
+            <div v-for="error of v$.localState[field.title].$errors" :key="error" class="text-xs text-red-500">
+              {{ error.$message }}
+            </div>
+          </template>
+        </div>
       </div>
-    </div>
 
-    <div v-if="!isFirst || !isLast" class="flex w-full text-lg">
-      <a-tooltip v-if="!isFirst" title="Go to previous" :mouse-enter-delay="1" :mouse-leave-delay="0">
-        <button class="group color-transition transform hover:scale-110" @click="goToPrevious">
-          <MdiChevronLeft class="group-hover:text-accent" />
-        </button>
-      </a-tooltip>
+      <div v-if="!isFirst || !isLast" class="flex w-full text-lg">
+        <a-tooltip v-if="!isFirst" title="Go to previous" :mouse-enter-delay="1" :mouse-leave-delay="0">
+          <button class="group color-transition transform hover:scale-110" @click="goPrevious">
+            <MdiChevronLeft class="group-hover:text-accent" />
+          </button>
+        </a-tooltip>
 
-      <div class="flex-1" />
+        <div class="flex-1" />
 
-      <a-tooltip v-if="!isLast" title="Go to next" :mouse-enter-delay="1" :mouse-leave-delay="0">
-        <button class="group color-transition transform hover:scale-110" @click="goToNext">
-          <MdiChevronRight class="group-hover:text-accent" />
-        </button>
-      </a-tooltip>
+        <a-tooltip v-if="!isLast" title="Go to next" :mouse-enter-delay="1" :mouse-leave-delay="0">
+          <button class="group color-transition transform hover:scale-110" @click="goNext">
+            <MdiChevronRight class="group-hover:text-accent" />
+          </button>
+        </a-tooltip>
+      </div>
     </div>
-  </div>
+  </Transition>
 </template>
+
+<style scoped>
+:global(html, body) {
+  @apply overscroll-x-none;
+}
+</style>

From fdab487ecf9d8ba470e6fe9f84e0042315d7fe6c Mon Sep 17 00:00:00 2001
From: braks <78412429+bcakmakoglu@users.noreply.github.com>
Date: Thu, 15 Sep 2022 15:15:48 +0200
Subject: [PATCH 11/82] chore(nc-gui): add cell type class to cell el

---
 packages/nc-gui/components/smartsheet/Cell.vue       |  4 +---
 .../[projectType]/form/[viewId]/index/survey.vue     | 12 ++++++++----
 2 files changed, 9 insertions(+), 7 deletions(-)

diff --git a/packages/nc-gui/components/smartsheet/Cell.vue b/packages/nc-gui/components/smartsheet/Cell.vue
index 45fc65ac4f..a656b6606b 100644
--- a/packages/nc-gui/components/smartsheet/Cell.vue
+++ b/packages/nc-gui/components/smartsheet/Cell.vue
@@ -38,8 +38,6 @@ const column = toRef(props, 'column')
 
 const active = toRef(props, 'active', false)
 
-const virtual = toRef(props, 'virtual', false)
-
 const readOnly = toRef(props, 'readOnly', undefined)
 
 provide(ColumnInj, column)
@@ -139,7 +137,7 @@ const syncAndNavigate = (dir: NavigateDir) => {
 <template>
   <div
     class="nc-cell w-full h-full"
-    :class="{ 'text-blue-600': isPrimary && !virtual && !isForm }"
+    :class="[`nc-cell-${(column?.uidt || 'default').toLowerCase()}`, { 'text-blue-600': isPrimary && !virtual && !isForm }]"
     @keydown.stop.left
     @keydown.stop.right
     @keydown.stop.up
diff --git a/packages/nc-gui/pages/[projectType]/form/[viewId]/index/survey.vue b/packages/nc-gui/pages/[projectType]/form/[viewId]/index/survey.vue
index 8ebbe943c6..2bd990c4cd 100644
--- a/packages/nc-gui/pages/[projectType]/form/[viewId]/index/survey.vue
+++ b/packages/nc-gui/pages/[projectType]/form/[viewId]/index/survey.vue
@@ -78,9 +78,9 @@ useEventListener(
     <div
       ref="el"
       :key="field.title"
-      class="bg-white relative flex flex-col justify-center gap-2 w-full lg:max-w-1/2 max-w-500px m-auto px-8 py-4 md:(rounded-lg border-1 border-gray-200 shadow-xl)"
+      class="bg-white relative flex flex-col justify-center gap-4 w-full lg:max-w-1/2 max-w-500px m-auto px-8 pt-8 pb-1 md:(rounded-lg border-1 border-gray-200 shadow-xl)"
     >
-      <div v-if="field" class="flex flex-col my-6 gap-2">
+      <div v-if="field" class="flex flex-col gap-2">
         <div class="flex nc-form-column-label">
           <SmartsheetHeaderVirtualCell
             v-if="isVirtualCol(field)"
@@ -97,7 +97,7 @@ useEventListener(
           />
         </div>
 
-        <div v-if="isVirtualCol(field)" class="mt-0">
+        <div v-if="isVirtualCol(field)">
           <SmartsheetVirtualCell
             class="mt-0 nc-input"
             :class="`nc-form-input-${field.title.replaceAll(' ', '')}`"
@@ -113,7 +113,7 @@ useEventListener(
           </template>
         </div>
 
-        <div v-else class="mt-0">
+        <div v-else>
           <SmartsheetCell
             v-model="formState[field.title]"
             class="nc-input"
@@ -155,4 +155,8 @@ useEventListener(
 :global(html, body) {
   @apply overscroll-x-none;
 }
+
+:deep(.nc-cell-attachment) {
+  @apply h-1/3 min-h-[100px];
+}
 </style>

From 2d813d49ca23d47833d183f54ad2395d8b0c6184 Mon Sep 17 00:00:00 2001
From: braks <78412429+bcakmakoglu@users.noreply.github.com>
Date: Thu, 15 Sep 2022 15:42:47 +0200
Subject: [PATCH 12/82] fix(nc-gui): dropzone not appearing on attachment cell

---
 packages/nc-gui/components/cell/attachment/index.vue | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/nc-gui/components/cell/attachment/index.vue b/packages/nc-gui/components/cell/attachment/index.vue
index c601770a64..1cc5af96c5 100644
--- a/packages/nc-gui/components/cell/attachment/index.vue
+++ b/packages/nc-gui/components/cell/attachment/index.vue
@@ -56,9 +56,9 @@ const {
 const currentCellRef = ref()
 
 watch(
-  [() => rowIndex, isForm],
+  [() => rowIndex, isForm, attachmentCellRef],
   () => {
-    if (!rowIndex && isForm.value && isGallery.value) {
+    if (!rowIndex && (isForm.value || isGallery.value)) {
       currentCellRef.value = attachmentCellRef.value
     } else {
       nextTick(() => {

From 05f8b4047460b8eb411bd2cf10a9ab33c09b8c45 Mon Sep 17 00:00:00 2001
From: braks <78412429+bcakmakoglu@users.noreply.github.com>
Date: Thu, 15 Sep 2022 15:43:14 +0200
Subject: [PATCH 13/82] refactor(nc-gui): add box around attachment and allow
 clicking box to open

---
 .../components/cell/attachment/index.vue      | 38 +++++++++----------
 1 file changed, 19 insertions(+), 19 deletions(-)

diff --git a/packages/nc-gui/components/cell/attachment/index.vue b/packages/nc-gui/components/cell/attachment/index.vue
index 1cc5af96c5..c143fd1f45 100644
--- a/packages/nc-gui/components/cell/attachment/index.vue
+++ b/packages/nc-gui/components/cell/attachment/index.vue
@@ -135,7 +135,7 @@ const { isSharedForm } = useSmartsheetStoreOrThrow()
         v-model="isOverDropZone"
         inline
         :target="currentCellRef"
-        class="group cursor-pointer flex gap-1 items-center active:(ring ring-accent ring-opacity-100) rounded border-1 p-1 shadow-sm hover:(bg-primary bg-opacity-10) dark:(!bg-slate-500)"
+        class="nc-attachment-cell-dropzone text-white text-lg ring ring-accent ring-opacity-100 bg-gray-700/75 flex items-center justify-center gap-2 backdrop-blur-xl"
       >
         <MaterialSymbolsFileCopyOutline class="text-accent" /> Drop here
       </general-overlay>
@@ -167,32 +167,32 @@ const { isSharedForm } = useSmartsheetStoreOrThrow()
         :class="{ dragging }"
         class="flex justify-center items-center flex-wrap gap-2 p-1 scrollbar-thin-dull max-h-[150px] overflow-auto"
       >
-        <div
-          v-for="(item, i) of visibleItems"
-          :key="item.url || item.title"
-          :class="isImage(item.title, item.mimetype ?? item.type) ? '' : 'border-1 rounded'"
-          class="nc-attachment flex items-center justify-center min-h-[50px]"
-        >
+        <template v-for="(item, i) of visibleItems" :key="item.url || item.title">
           <a-tooltip placement="bottom">
             <template #title>
               <div class="text-center w-full">{{ item.title }}</div>
             </template>
 
-            <LazyNuxtImg
-              v-if="isImage(item.title, item.mimetype ?? item.type) && (item.url || item.data)"
-              quality="75"
-              placeholder
-              :alt="item.title || `#${i}`"
-              :src="item.url || item.data"
-              class="ring-1 ring-gray-300 rounded max-h-[50px] max-w-[50px]"
-              @click="selectedImage = item"
-            />
+            <template v-if="isImage(item.title, item.mimetype ?? item.type) && (item.url || item.data)">
+              <div class="nc-attachment flex items-center justify-center" @click="selectedImage = item">
+                <LazyNuxtImg
+                  quality="75"
+                  placeholder
+                  fit="cover"
+                  :alt="item.title || `#${i}`"
+                  :src="item.url || item.data"
+                  class="max-w-full max-h-full"
+                />
+              </div>
+            </template>
 
-            <component :is="FileIcon(item.icon)" v-else-if="item.icon" @click="openLink(item.url || item.data)" />
+            <div v-else class="nc-attachment flex items-center justify-center" @click="openLink(item.url || item.data)">
+              <component :is="FileIcon(item.icon)" v-if="item.icon" />
 
-            <IcOutlineInsertDriveFile v-else @click.stop="openLink(item.url || item.data)" />
+              <IcOutlineInsertDriveFile v-else />
+            </div>
           </a-tooltip>
-        </div>
+        </template>
       </div>
 
       <div class="group flex gap-1 items-center border-1 active:ring rounded p-1 hover:(bg-primary bg-opacity-10)">

From bf52650a09ce3e80dec6fff039506bf445259bbd Mon Sep 17 00:00:00 2001
From: braks <78412429+bcakmakoglu@users.noreply.github.com>
Date: Thu, 15 Sep 2022 15:45:06 +0200
Subject: [PATCH 14/82] chore(nc-gui): change attachment cell styles in survey
 form

---
 .../form/[viewId]/index/survey.vue            | 23 +++++++++++--------
 1 file changed, 13 insertions(+), 10 deletions(-)

diff --git a/packages/nc-gui/pages/[projectType]/form/[viewId]/index/survey.vue b/packages/nc-gui/pages/[projectType]/form/[viewId]/index/survey.vue
index 2bd990c4cd..354dd0a135 100644
--- a/packages/nc-gui/pages/[projectType]/form/[viewId]/index/survey.vue
+++ b/packages/nc-gui/pages/[projectType]/form/[viewId]/index/survey.vue
@@ -62,15 +62,6 @@ useEventListener('wheel', (event) => {
     goNext()
   }
 })
-
-useEventListener(
-  'touchmove',
-  (e) => {
-    e.preventDefault()
-    console.log('touchmove')
-  },
-  { passive: false },
-)
 </script>
 
 <template>
@@ -157,6 +148,18 @@ useEventListener(
 }
 
 :deep(.nc-cell-attachment) {
-  @apply h-1/3 min-h-[100px];
+  @apply p-0;
+
+  .nc-attachment-cell {
+    @apply px-4 h-1/3 min-h-[100px];
+
+    .nc-attachment {
+      @apply md:(w-[50px] h-[50px]) lg:(w-[75px] h-[75px]) min-h-[50px] min-w-[50px];
+    }
+
+    .nc-attachment-cell-dropzone {
+      @apply rounded bg-gray-400/75;
+    }
+  }
 }
 </style>

From 4f68489fb18c44fbda2968b240291d43c5f5a2c5 Mon Sep 17 00:00:00 2001
From: braks <78412429+bcakmakoglu@users.noreply.github.com>
Date: Thu, 15 Sep 2022 17:47:45 +0200
Subject: [PATCH 15/82] chore(nc-gui): update cell styles

---
 packages/nc-gui/components/cell/Url.vue        | 6 +++---
 packages/nc-gui/components/smartsheet/Cell.vue | 2 +-
 2 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/packages/nc-gui/components/cell/Url.vue b/packages/nc-gui/components/cell/Url.vue
index f3fa740b17..12828945cb 100644
--- a/packages/nc-gui/components/cell/Url.vue
+++ b/packages/nc-gui/components/cell/Url.vue
@@ -28,9 +28,9 @@ const column = inject(ColumnInj)!
 
 const editEnabled = inject(EditModeInj)!
 
-const disableOverlay = inject(CellUrlDisableOverlayInj)
+const disableOverlay = inject(CellUrlDisableOverlayInj, ref(false))
 
-// Used in the logic of when to display error since we are not storing the url if its not valid
+// Used in the logic of when to display error since we are not storing the url if it's not valid
 const localState = ref(value)
 
 const vModel = computed({
@@ -72,7 +72,7 @@ watch(
 </script>
 
 <template>
-  <div class="flex flex-row items-center justify-between">
+  <div class="flex flex-row items-center justify-between w-full h-full">
     <input v-if="editEnabled" :ref="focus" v-model="vModel" class="outline-none text-sm w-full" @blur="editEnabled = false" />
 
     <nuxt-link
diff --git a/packages/nc-gui/components/smartsheet/Cell.vue b/packages/nc-gui/components/smartsheet/Cell.vue
index a656b6606b..fe0ce15359 100644
--- a/packages/nc-gui/components/smartsheet/Cell.vue
+++ b/packages/nc-gui/components/smartsheet/Cell.vue
@@ -136,7 +136,7 @@ const syncAndNavigate = (dir: NavigateDir) => {
 
 <template>
   <div
-    class="nc-cell w-full h-full"
+    class="nc-cell"
     :class="[`nc-cell-${(column?.uidt || 'default').toLowerCase()}`, { 'text-blue-600': isPrimary && !virtual && !isForm }]"
     @keydown.stop.left
     @keydown.stop.right

From efab1b06bd53b40792d68b702739bba44d4bae90 Mon Sep 17 00:00:00 2001
From: braks <78412429+bcakmakoglu@users.noreply.github.com>
Date: Thu, 15 Sep 2022 17:48:23 +0200
Subject: [PATCH 16/82] feat(nc-gui): add key controls to survey

---
 .../nc-gui/pages/[projectType]/form/[viewId]/index/survey.vue  | 3 +++
 1 file changed, 3 insertions(+)

diff --git a/packages/nc-gui/pages/[projectType]/form/[viewId]/index/survey.vue b/packages/nc-gui/pages/[projectType]/form/[viewId]/index/survey.vue
index 354dd0a135..d1afda05cb 100644
--- a/packages/nc-gui/pages/[projectType]/form/[viewId]/index/survey.vue
+++ b/packages/nc-gui/pages/[projectType]/form/[viewId]/index/survey.vue
@@ -62,6 +62,9 @@ useEventListener('wheel', (event) => {
     goNext()
   }
 })
+
+onKeyStroke(['ArrowLeft', 'ArrowDown'], goPrevious)
+onKeyStroke(['ArrowRight', 'ArrowUp', 'Enter', 'Space'], goNext)
 </script>
 
 <template>

From 965785deadfbf00f0577f565cdcc532406d9f0d9 Mon Sep 17 00:00:00 2001
From: braks <78412429+bcakmakoglu@users.noreply.github.com>
Date: Thu, 15 Sep 2022 17:49:17 +0200
Subject: [PATCH 17/82] feat(nc-gui): flip transition and show current step

---
 .../[projectType]/form/[viewId]/index.vue     |   4 +-
 .../form/[viewId]/index/survey.vue            | 210 +++++++++++-------
 2 files changed, 133 insertions(+), 81 deletions(-)

diff --git a/packages/nc-gui/pages/[projectType]/form/[viewId]/index.vue b/packages/nc-gui/pages/[projectType]/form/[viewId]/index.vue
index be092b5eec..6f14d60f24 100644
--- a/packages/nc-gui/pages/[projectType]/form/[viewId]/index.vue
+++ b/packages/nc-gui/pages/[projectType]/form/[viewId]/index.vue
@@ -5,10 +5,10 @@ const { passwordDlg, password, loadSharedView } = useSharedFormStoreOrThrow()
 </script>
 
 <template>
-  <div class="nc-form-view md:bg-primary bg-opacity-5 h-full min-h-[600px] flex flex-col justify-center items-center nc-form-signin">
+  <div class="nc-form-view relative md:bg-primary bg-opacity-5 h-full min-h-[600px] flex flex-col justify-center items-center nc-form-signin">
     <NuxtPage />
 
-    <div class="self-end prose-xs text-gray-400 mx-auto my-4 relative flex items-center gap-2">Powered by NocoDB</div>
+    <div class="self-end text-xs text-gray-400 mx-auto my-4">Powered by NocoDB</div>
 
     <a-modal
       v-model:visible="passwordDlg"
diff --git a/packages/nc-gui/pages/[projectType]/form/[viewId]/index/survey.vue b/packages/nc-gui/pages/[projectType]/form/[viewId]/index/survey.vue
index d1afda05cb..5cb807998b 100644
--- a/packages/nc-gui/pages/[projectType]/form/[viewId]/index/survey.vue
+++ b/packages/nc-gui/pages/[projectType]/form/[viewId]/index/survey.vue
@@ -1,8 +1,8 @@
 <script lang="ts" setup>
 import { RelationTypes, UITypes, isVirtualCol } from 'nocodb-sdk'
-import { computed, ref, useEventListener, useSharedFormStoreOrThrow, useStepper } from '#imports'
+import { computed, onKeyStroke, ref, useEventListener, useSharedFormStoreOrThrow, useStepper, watch } from '#imports'
 
-const { v$, formState, formColumns } = useSharedFormStoreOrThrow()
+const { v$, formState, formColumns, submitForm, submitted, secondsRemain } = useSharedFormStoreOrThrow()
 
 function isRequired(_columnObj: Record<string, any>, required = false) {
   let columnObj = _columnObj
@@ -26,7 +26,9 @@ const steps = computed(() => {
   }, [] as string[])
 })
 
-const { index, goToPrevious, goToNext, isFirst, isLast } = useStepper(steps)
+const { index, goToPrevious, goToNext, isFirst, isLast, steps: _steps } = useStepper(steps)
+
+const isTransitioning = ref(false)
 
 const transitionName = ref<'left' | 'right'>('left')
 
@@ -34,18 +36,34 @@ const field = computed(() => formColumns.value?.[index.value])
 
 const el = ref<HTMLDivElement>()
 
-const goNext = () => {
+const transition = (direction: 'left' | 'right') => {
+  isTransitioning.value = true
+  transitionName.value = direction
+
+  setTimeout(() => {
+    transitionName.value = transitionName.value === 'left' ? 'right' : 'left'
+  }, 500)
+
+  setTimeout(() => {
+    isTransitioning.value = false
+  }, 1000)
+}
+
+const goNext = async () => {
   if (isLast.value) return
 
-  transitionName.value = 'left'
+  const isValid = await v$.value.localState[field.value!.title!].$validate()
+  if (!isValid) return
+
+  transition('left')
 
   goToNext()
 }
 
-const goPrevious = () => {
+const goPrevious = async () => {
   if (isFirst.value) return
 
-  transitionName.value = 'right'
+  transition('right')
 
   goToPrevious()
 }
@@ -56,9 +74,11 @@ useEventListener('wheel', (event) => {
     return
   }
 
-  if (event.deltaX < -10) {
+  if (isTransitioning.value) return
+
+  if (event.deltaX < -15) {
     goPrevious()
-  } else if (event.deltaX > 10) {
+  } else if (event.deltaX > 15) {
     goNext()
   }
 })
@@ -68,93 +88,125 @@ onKeyStroke(['ArrowRight', 'ArrowUp', 'Enter', 'Space'], goNext)
 </script>
 
 <template>
-  <Transition :name="`slide-${transitionName}`" mode="out-in">
-    <div
-      ref="el"
-      :key="field.title"
-      class="bg-white relative flex flex-col justify-center gap-4 w-full lg:max-w-1/2 max-w-500px m-auto px-8 pt-8 pb-1 md:(rounded-lg border-1 border-gray-200 shadow-xl)"
-    >
-      <div v-if="field" class="flex flex-col gap-2">
-        <div class="flex nc-form-column-label">
-          <SmartsheetHeaderVirtualCell
-            v-if="isVirtualCol(field)"
-            :column="{ ...field, title: field.label || field.title }"
-            :required="isRequired(field, field.required)"
-            :hide-menu="true"
-          />
-
-          <SmartsheetHeaderCell
-            v-else
-            :column="{ ...field, title: field.label || field.title }"
-            :required="isRequired(field, field.required)"
-            :hide-menu="true"
-          />
-        </div>
-
-        <div v-if="isVirtualCol(field)">
-          <SmartsheetVirtualCell
-            class="mt-0 nc-input"
-            :class="`nc-form-input-${field.title.replaceAll(' ', '')}`"
-            :column="field"
-          />
-
-          <div v-if="field.description" class="text-gray-500 text-[10px] mb-2 ml-1">{{ field.description }}</div>
-
-          <template v-if="v$.virtual.$dirty && v$.virtual?.[field.title]">
-            <div v-for="error of v$.virtual[field.title].$errors" :key="error" class="text-xs text-red-500">
-              {{ error.$message }}
+  <div class="w-full h-full flex flex-col justify-center items-center">
+    <Transition :name="`slide-${transitionName}`" mode="out-in">
+      <div
+        ref="el"
+        :key="field.title"
+        class="bg-white flex flex-col justify-center gap-4 w-full lg:max-w-1/2 max-w-500px m-auto px-8 pt-8 pb-4 md:(rounded-lg border-1 border-gray-200 shadow-xl)"
+      >
+        <div v-if="field" class="flex flex-col gap-2">
+          <div class="flex nc-form-column-label">
+            <SmartsheetHeaderVirtualCell
+              v-if="isVirtualCol(field)"
+              :column="{ ...field, title: field.label || field.title }"
+              :required="isRequired(field, field.required)"
+              :hide-menu="true"
+            />
+
+            <SmartsheetHeaderCell
+              v-else
+              :column="{ ...field, title: field.label || field.title }"
+              :required="isRequired(field, field.required)"
+              :hide-menu="true"
+            />
+          </div>
+
+          <div v-if="isVirtualCol(field)">
+            <SmartsheetVirtualCell
+              class="mt-0 nc-input"
+              :class="`nc-form-input-${field.title.replaceAll(' ', '')}`"
+              :column="field"
+            />
+
+            <div v-if="field.description" class="text-gray-500 text-[10px] mb-2 ml-1">{{ field.description }}</div>
+
+            <template v-if="v$.virtual.$dirty && v$.virtual?.[field.title]">
+              <div v-for="error of v$.virtual[field.title].$errors" :key="error" class="text-xs text-red-500">
+                {{ error.$message }}
+              </div>
+            </template>
+          </div>
+
+          <div v-else>
+            <SmartsheetCell
+              v-model="formState[field.title]"
+              class="nc-input"
+              :class="`nc-form-input-${field.title.replaceAll(' ', '')}`"
+              :column="field"
+              :edit-enabled="true"
+            />
+
+            <div class="flex flex-col gap-2 text-gray-500 text-xs my-2 px-1">
+              <div v-for="error of v$.localState[field.title].$errors" :key="error" class="text-red-500">
+                {{ error.$message }}
+              </div>
+
+              {{ field.description }}
             </div>
-          </template>
+          </div>
         </div>
 
-        <div v-else>
-          <SmartsheetCell
-            v-model="formState[field.title]"
-            class="nc-input"
-            :class="`nc-form-input-${field.title.replaceAll(' ', '')}`"
-            :column="field"
-            :edit-enabled="true"
-          />
-
-          <div v-if="field.description" class="text-gray-500 text-[10px] mb-2 ml-1">{{ field.description }}</div>
-
-          <template v-if="v$.localState.$dirty && v$.localState?.[field.title]">
-            <div v-for="error of v$.localState[field.title].$errors" :key="error" class="text-xs text-red-500">
-              {{ error.$message }}
+        <div v-if="!isFirst || !isLast" class="flex w-full text-lg mt-2">
+          <a-tooltip v-if="!isFirst" title="Go to previous" :mouse-enter-delay="1" :mouse-leave-delay="0">
+            <button
+              class="group color-transition transform hover:scale-110 absolute left-5 top-1/2 md:static"
+              @click="goPrevious"
+            >
+              <MdiChevronLeft class="group-hover:text-accent text-2xl md:text-md" />
+            </button>
+          </a-tooltip>
+
+          <div class="flex-1">
+            <div v-if="isLast && !submitted && !v$.$invalid" class="text-center my-4">
+              <button type="submit" class="submit !px-4 !py-2 prose-sm" @click="submitForm">
+                {{ $t('general.submit') }}
+              </button>
             </div>
-          </template>
+          </div>
+
+          <a-tooltip
+            v-if="!isLast"
+            placement="left"
+            :title="v$.localState[field.title]?.$error ? v$.localState[field.title].$errors[0].$message : 'Go to next'"
+            :mouse-enter-delay="v$.localState[field.title]?.$error ? 0 : 1"
+            :mouse-leave-delay="0"
+          >
+            <button class="group color-transition transform absolute right-5 top-1/2 md:static hover:scale-110" @click="goNext">
+              <TransitionGroup name="layout">
+                <MdiCloseCircleOutline v-if="v$.localState[field.title]?.$error" class="text-red-500 text-2xl md:text-md" />
+                <MdiChevronRight v-else class="group-hover:text-accent text-2xl md:text-md" />
+              </TransitionGroup>
+            </button>
+          </a-tooltip>
         </div>
       </div>
+    </Transition>
 
-      <div v-if="!isFirst || !isLast" class="flex w-full text-lg">
-        <a-tooltip v-if="!isFirst" title="Go to previous" :mouse-enter-delay="1" :mouse-leave-delay="0">
-          <button class="group color-transition transform hover:scale-110" @click="goPrevious">
-            <MdiChevronLeft class="group-hover:text-accent" />
-          </button>
-        </a-tooltip>
-
-        <div class="flex-1" />
-
-        <a-tooltip v-if="!isLast" title="Go to next" :mouse-enter-delay="1" :mouse-leave-delay="0">
-          <button class="group color-transition transform hover:scale-110" @click="goNext">
-            <MdiChevronRight class="group-hover:text-accent" />
-          </button>
-        </a-tooltip>
-      </div>
-    </div>
-  </Transition>
+    <div class="absolute bottom-12 right-12">{{ index }} / {{ formColumns?.length }}</div>
+  </div>
 </template>
 
-<style scoped>
+<style lang="scss" scoped>
 :global(html, body) {
   @apply overscroll-x-none;
 }
 
+:deep(.nc-form-column-label) {
+  > * {
+    @apply !prose-lg;
+  }
+
+  .nc-icon {
+    @apply mr-2;
+  }
+}
+
 :deep(.nc-cell-attachment) {
   @apply p-0;
 
   .nc-attachment-cell {
-    @apply px-4 h-1/3 min-h-[100px];
+    @apply px-4 min-h-[75px] w-full h-full;
 
     .nc-attachment {
       @apply md:(w-[50px] h-[50px]) lg:(w-[75px] h-[75px]) min-h-[50px] min-w-[50px];

From 5859a4d18e24b395a60f57014937e87f920b7f10 Mon Sep 17 00:00:00 2001
From: braks <78412429+bcakmakoglu@users.noreply.github.com>
Date: Thu, 15 Sep 2022 17:51:11 +0200
Subject: [PATCH 18/82] feat(nc-gui): add noco logo to bottom of survey

---
 .../nc-gui/pages/[projectType]/form/[viewId]/index.vue     | 7 ++++++-
 1 file changed, 6 insertions(+), 1 deletion(-)

diff --git a/packages/nc-gui/pages/[projectType]/form/[viewId]/index.vue b/packages/nc-gui/pages/[projectType]/form/[viewId]/index.vue
index 6f14d60f24..2f7460c4d4 100644
--- a/packages/nc-gui/pages/[projectType]/form/[viewId]/index.vue
+++ b/packages/nc-gui/pages/[projectType]/form/[viewId]/index.vue
@@ -8,7 +8,12 @@ const { passwordDlg, password, loadSharedView } = useSharedFormStoreOrThrow()
   <div class="nc-form-view relative md:bg-primary bg-opacity-5 h-full min-h-[600px] flex flex-col justify-center items-center nc-form-signin">
     <NuxtPage />
 
-    <div class="self-end text-xs text-gray-400 mx-auto my-4">Powered by NocoDB</div>
+    <div class="self-end text-xs text-gray-400 mx-auto my-4 flex justify-center gap-2 items-center">
+      <div class="bg-primary bg-opacity-100 rounded">
+        <img width="32" height="32" alt="NocoDB" src="~/assets/img/icons/512x512-trans.png" />
+      </div>
+      Powered by NocoDB
+    </div>
 
     <a-modal
       v-model:visible="passwordDlg"

From 56cc2af161c8b9372f95dfbd911aa6f93cc5df5b Mon Sep 17 00:00:00 2001
From: braks <78412429+bcakmakoglu@users.noreply.github.com>
Date: Thu, 15 Sep 2022 17:52:53 +0200
Subject: [PATCH 19/82] chore(nc-gui): remove unused component

---
 packages/nc-gui/components/shared-view/survey/index.vue | 7 -------
 1 file changed, 7 deletions(-)
 delete mode 100644 packages/nc-gui/components/shared-view/survey/index.vue

diff --git a/packages/nc-gui/components/shared-view/survey/index.vue b/packages/nc-gui/components/shared-view/survey/index.vue
deleted file mode 100644
index 4246b4dfdd..0000000000
--- a/packages/nc-gui/components/shared-view/survey/index.vue
+++ /dev/null
@@ -1,7 +0,0 @@
-<script lang="ts" setup>
-// noop
-</script>
-
-<template>
-  <div>Survey Mode</div>
-</template>

From 0bf21b9908afca7fa60dbc14ac5abdcd258199f7 Mon Sep 17 00:00:00 2001
From: braks <78412429+bcakmakoglu@users.noreply.github.com>
Date: Thu, 15 Sep 2022 18:39:41 +0200
Subject: [PATCH 20/82] feat(nc-gui): responsive project list page

---
 packages/nc-gui/pages/index/index.vue       | 10 +++---
 packages/nc-gui/pages/index/index/index.vue | 36 +++++++++++++--------
 2 files changed, 27 insertions(+), 19 deletions(-)

diff --git a/packages/nc-gui/pages/index/index.vue b/packages/nc-gui/pages/index/index.vue
index 3fa074746e..66301d32f5 100644
--- a/packages/nc-gui/pages/index/index.vue
+++ b/packages/nc-gui/pages/index/index.vue
@@ -9,9 +9,9 @@ useSidebar('nc-left-sidebar', { hasSidebar: false })
 <template>
   <NuxtLayout>
     <div
-      class="min-h-[calc(100vh_-_var(--header-height))] bg-primary bg-opacity-5 flex flex-wrap justify-between xl:flex-nowrap gap-6 py-6 px-4 pt-65px md:(px-12)"
+      class="min-h-[calc(100vh_-_var(--header-height))] bg-primary bg-opacity-5 flex flex-wrap justify-between xl:flex-nowrap gap-6 py-6 px-4 md:(px-12 pt-65px)"
     >
-      <div class="flex-1 justify-end hidden xl:(flex)">
+      <div class="hidden xl:(flex)">
         <div>
           <LazyGeneralSponsors />
         </div>
@@ -21,14 +21,14 @@ useSidebar('nc-left-sidebar', { hasSidebar: false })
         <NuxtPage />
       </div>
 
-      <div class="flex flex-1 justify-between gap-6 lg:block">
+      <div class="flex-1 flex gap-6 flex-col justify-center items-center md:(flex-row justify-between items-start)">
         <template v-if="route.name === 'index-index'">
           <TransitionGroup name="page" mode="out-in">
-            <div key="social-card">
+            <div>
               <LazyGeneralSocialCard />
             </div>
 
-            <div key="sponsors" class="block mt-0 lg:(!mt-6) xl:hidden">
+            <div key="sponsors" class="inline-block xl:hidden">
               <LazyGeneralSponsors />
             </div>
           </TransitionGroup>
diff --git a/packages/nc-gui/pages/index/index/index.vue b/packages/nc-gui/pages/index/index/index.vue
index 8586c51f76..8280d3ec43 100644
--- a/packages/nc-gui/pages/index/index/index.vue
+++ b/packages/nc-gui/pages/index/index/index.vue
@@ -1,6 +1,7 @@
 <script lang="ts" setup>
 import type { ProjectType } from 'nocodb-sdk'
 import tinycolor from 'tinycolor2'
+import { breakpointsTailwind } from '@vueuse/core'
 import {
   Empty,
   Modal,
@@ -14,6 +15,7 @@ import {
   ref,
   themeV2Colors,
   useApi,
+  useBreakpoints,
   useGlobal,
   useNuxtApp,
   useUIPermission,
@@ -29,6 +31,8 @@ const { api, isLoading } = useApi()
 
 const { isUIAllowed } = useUIPermission()
 
+const { md } = useBreakpoints(breakpointsTailwind)
+
 const filterQuery = ref('')
 
 const projects = ref<ProjectType[]>()
@@ -131,12 +135,19 @@ onBeforeMount(loadProjects)
 <template>
   <div class="relative flex flex-col justify-center gap-2 w-full p-8 md:(bg-white rounded-lg border-1 border-gray-200 shadow)">
     <h1 class="flex items-center justify-center gap-2 leading-8 mb-8 mt-4">
-      <!-- My Projects -->
       <span class="text-4xl nc-project-page-title">{{ $t('title.myProject') }}</span>
+    </h1>
+
+    <div class="flex flex-wrap gap-2 mb-6">
+      <a-input-search
+        v-model:value="filterQuery"
+        class="max-w-[250px] nc-project-page-search rounded"
+        :placeholder="$t('activity.searchProject')"
+      />
 
       <a-tooltip title="Reload projects">
-        <span
-          class="transition-all duration-200 h-full flex items-center group hover:ring active:(ring ring-accent) rounded-full mt-1"
+        <div
+          class="transition-all duration-200 h-full flex-0 flex items-center group hover:ring active:(ring ring-accent) rounded-full mt-1"
           :class="isLoading ? 'animate-spin ring ring-gray-200' : ''"
         >
           <MdiRefresh
@@ -145,21 +156,13 @@ onBeforeMount(loadProjects)
             :class="isLoading ? '!text-primary' : ''"
             @click="loadProjects"
           />
-        </span>
+        </div>
       </a-tooltip>
-    </h1>
-
-    <div class="flex mb-6">
-      <a-input-search
-        v-model:value="filterQuery"
-        class="max-w-[250px] nc-project-page-search rounded"
-        :placeholder="$t('activity.searchProject')"
-      />
 
       <div class="flex-1" />
 
       <a-dropdown v-if="isUIAllowed('projectCreate', true)" :trigger="['click']" overlay-class-name="nc-dropdown-create-project">
-        <button class="nc-new-project-menu">
+        <button class="nc-new-project-menu mt-4 md:mt-0">
           <span class="flex items-center w-full">
             {{ $t('title.newProj') }}
             <MdiMenuDown class="menu-icon" />
@@ -201,7 +204,12 @@ onBeforeMount(loadProjects)
         <a-skeleton />
       </div>
 
-      <a-table v-else :custom-row="customRow" :data-source="filteredProjects" :pagination="{ position: ['bottomCenter'] }">
+      <a-table v-else
+        :custom-row="customRow"
+        :data-source="filteredProjects"
+        :pagination="{ position: ['bottomCenter'] }"
+        :table-layout="md ? 'auto' : 'fixed'"
+      >
         <template #emptyText>
           <a-empty :image="Empty.PRESENTED_IMAGE_SIMPLE" :description="$t('labels.noData')" />
         </template>

From 8d05af59a12e46794c7d91b9b745367c62ed5d8a Mon Sep 17 00:00:00 2001
From: braks <78412429+bcakmakoglu@users.noreply.github.com>
Date: Thu, 15 Sep 2022 19:27:09 +0200
Subject: [PATCH 21/82] fix(nc-gui): attachments not emitted properly in form
 mode

---
 .../components/cell/attachment/index.vue      | 34 ++++++++-----
 .../components/cell/attachment/utils.ts       | 51 ++++++++++---------
 2 files changed, 47 insertions(+), 38 deletions(-)

diff --git a/packages/nc-gui/components/cell/attachment/index.vue b/packages/nc-gui/components/cell/attachment/index.vue
index c143fd1f45..dc7fb30b07 100644
--- a/packages/nc-gui/components/cell/attachment/index.vue
+++ b/packages/nc-gui/components/cell/attachment/index.vue
@@ -3,7 +3,6 @@ import { onKeyDown } from '@vueuse/core'
 import { useProvideAttachmentCell } from './utils'
 import { useSortable } from './sort'
 import {
-  IsFormInj,
   IsGalleryInj,
   inject,
   isImage,
@@ -22,24 +21,26 @@ interface Props {
 }
 
 interface Emits {
-  (event: 'update:modelValue', value: string | Record<string, any>): void
+  (event: 'update:modelValue', value: string | Record<string, any>[]): void
 }
 
 const { modelValue, rowIndex } = defineProps<Props>()
 
 const emits = defineEmits<Emits>()
 
-const isForm = inject(IsFormInj, ref(false))
-
 const isGallery = inject(IsGalleryInj, ref(false))
 
 const attachmentCellRef = ref<HTMLDivElement>()
 
 const sortableRef = ref<HTMLDivElement>()
 
-const { cellRefs } = useSmartsheetStoreOrThrow()!
+const currentCellRef = ref()
+
+const { cellRefs, isSharedForm } = useSmartsheetStoreOrThrow()!
 
 const {
+  isPublic,
+  isForm,
   column,
   modalVisible,
   attachments,
@@ -53,8 +54,6 @@ const {
   storedFiles,
 } = useProvideAttachmentCell(updateModelValue)
 
-const currentCellRef = ref()
-
 watch(
   [() => rowIndex, isForm, attachmentCellRef],
   () => {
@@ -91,10 +90,20 @@ watch(
   (nextModel) => {
     if (nextModel) {
       try {
-        attachments.value = ((typeof nextModel === 'string' ? JSON.parse(nextModel) : nextModel) || []).filter(Boolean)
+        const nextAttachments = ((typeof nextModel === 'string' ? JSON.parse(nextModel) : nextModel) || []).filter(Boolean)
+
+        if (isPublic.value && isForm.value) {
+          storedFiles.value = nextAttachments
+        } else {
+          attachments.value = nextAttachments
+        }
       } catch (e) {
         console.error(e)
-        attachments.value = []
+        if (isPublic.value && isForm.value) {
+          storedFiles.value = []
+        } else {
+          attachments.value = []
+        }
       }
     }
   },
@@ -102,8 +111,8 @@ watch(
 )
 
 /** updates attachments array for autosave */
-function updateModelValue(data: string | Record<string, any>) {
-  emits('update:modelValue', typeof data !== 'string' ? JSON.stringify(data) : data)
+function updateModelValue(data: string | Record<string, any>[]) {
+  emits('update:modelValue', data)
 }
 
 /** Close modal on escape press, disable dropzone as well */
@@ -119,8 +128,6 @@ watch(
     rowState.value[column.value!.title!] = storedFiles.value
   },
 )
-
-const { isSharedForm } = useSmartsheetStoreOrThrow()
 </script>
 
 <template>
@@ -159,6 +166,7 @@ const { isSharedForm } = useSmartsheetStoreOrThrow()
         </div>
       </a-tooltip>
     </div>
+
     <div v-else class="flex" />
 
     <template v-if="visibleItems.length">
diff --git a/packages/nc-gui/components/cell/attachment/utils.ts b/packages/nc-gui/components/cell/attachment/utils.ts
index bbd4a9717a..b96f2fba7d 100644
--- a/packages/nc-gui/components/cell/attachment/utils.ts
+++ b/packages/nc-gui/components/cell/attachment/utils.ts
@@ -79,37 +79,37 @@ export const [useProvideAttachmentCell, useAttachmentCell] = useInjectionState(
     async function onFileSelect(selectedFiles: FileList | File[]) {
       if (!selectedFiles.length) return
 
-      if (isPublic.value) {
-        storedFiles.value.push(
-          ...(await Promise.all<AttachmentProps>(
-            Array.from(selectedFiles).map(
-              (file) =>
-                new Promise<AttachmentProps>((resolve) => {
-                  const res: AttachmentProps = { ...file, file, title: file.name, mimetype: file.type }
-
-                  if (isImage(file.name, (<any>file).mimetype ?? file.type)) {
-                    const reader = new FileReader()
+      if (isPublic.value && isForm.value) {
+        const newFiles = await Promise.all<AttachmentProps>(
+          Array.from(selectedFiles).map(
+            (file) =>
+              new Promise<AttachmentProps>((resolve) => {
+                const res: AttachmentProps = { ...file, file, title: file.name, mimetype: file.type }
 
-                    reader.onload = (e) => {
-                      res.data = e.target?.result
+                if (isImage(file.name, (<any>file).mimetype ?? file.type)) {
+                  const reader = new FileReader()
 
-                      resolve(res)
-                    }
+                  reader.onload = (e) => {
+                    res.data = e.target?.result
 
-                    reader.onerror = () => {
-                      resolve(res)
-                    }
+                    resolve(res)
+                  }
 
-                    reader.readAsDataURL(file)
-                  } else {
+                  reader.onerror = () => {
                     resolve(res)
                   }
-                }),
-            ),
-          )),
+
+                  reader.readAsDataURL(file)
+                } else {
+                  resolve(res)
+                }
+              }),
+          ),
         )
 
-        return updateModelValue(storedFiles.value.map((stored) => stored.file))
+        attachments.value = [...attachments.value, ...newFiles]
+
+        return updateModelValue(attachments.value)
       }
 
       const newAttachments = []
@@ -132,7 +132,7 @@ export const [useProvideAttachmentCell, useAttachmentCell] = useInjectionState(
         }
       }
 
-      updateModelValue([...attachments.value, ...newAttachments])
+      updateModelValue(JSON.stringify([...attachments.value, ...newAttachments]))
     }
 
     /** save files on drop */
@@ -163,7 +163,7 @@ export const [useProvideAttachmentCell, useAttachmentCell] = useInjectionState(
       }
     }
 
-    /** our currently visible items, either the locally stored or the ones from db, depending on isPublicForm status */
+    /** our currently visible items, either the locally stored or the ones from db, depending on isPublic & isForm status */
     const visibleItems = computed<any[]>(() => (isPublic.value && isForm.value ? storedFiles.value : attachments.value))
 
     watch(files, (nextFiles) => nextFiles && onFileSelect(nextFiles))
@@ -172,6 +172,7 @@ export const [useProvideAttachmentCell, useAttachmentCell] = useInjectionState(
       attachments,
       visibleItems,
       isPublic,
+      isForm,
       isReadonly,
       meta,
       column,

From 5324902169f7ffdc4f33e8b8464a74fd890db3c2 Mon Sep 17 00:00:00 2001
From: braks <78412429+bcakmakoglu@users.noreply.github.com>
Date: Thu, 15 Sep 2022 19:27:21 +0200
Subject: [PATCH 22/82] revert(nc-gui): use full cell width

---
 packages/nc-gui/components/smartsheet/Cell.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/nc-gui/components/smartsheet/Cell.vue b/packages/nc-gui/components/smartsheet/Cell.vue
index fe0ce15359..d11cfe42ef 100644
--- a/packages/nc-gui/components/smartsheet/Cell.vue
+++ b/packages/nc-gui/components/smartsheet/Cell.vue
@@ -136,7 +136,7 @@ const syncAndNavigate = (dir: NavigateDir) => {
 
 <template>
   <div
-    class="nc-cell"
+    class="nc-cell w-full"
     :class="[`nc-cell-${(column?.uidt || 'default').toLowerCase()}`, { 'text-blue-600': isPrimary && !virtual && !isForm }]"
     @keydown.stop.left
     @keydown.stop.right

From 36cf3e5acb00e4c39a63b7ab88272764be9a8761 Mon Sep 17 00:00:00 2001
From: braks <78412429+bcakmakoglu@users.noreply.github.com>
Date: Thu, 15 Sep 2022 19:27:52 +0200
Subject: [PATCH 23/82] chore(nc-gui): pass default value to injection

---
 packages/nc-gui/components/virtual-cell/BelongsTo.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/nc-gui/components/virtual-cell/BelongsTo.vue b/packages/nc-gui/components/virtual-cell/BelongsTo.vue
index 1a30b3ce41..a24e6aa17b 100644
--- a/packages/nc-gui/components/virtual-cell/BelongsTo.vue
+++ b/packages/nc-gui/components/virtual-cell/BelongsTo.vue
@@ -35,7 +35,7 @@ const readOnly = inject(ReadonlyInj, false)
 
 const isForm = inject(IsFormInj, ref(false))
 
-const isLocked = inject(IsLockedInj)
+const isLocked = inject(IsLockedInj, ref(false))
 
 const { isUIAllowed } = useUIPermission()
 

From db492f0cf87bfb58257e8391963c25404e3ece8e Mon Sep 17 00:00:00 2001
From: braks <78412429+bcakmakoglu@users.noreply.github.com>
Date: Thu, 15 Sep 2022 19:32:42 +0200
Subject: [PATCH 24/82] feat(nc-gui): add submit message to survey form

---
 .../form/[viewId]/index/survey.vue            | 35 ++++++++++++++++---
 1 file changed, 30 insertions(+), 5 deletions(-)

diff --git a/packages/nc-gui/pages/[projectType]/form/[viewId]/index/survey.vue b/packages/nc-gui/pages/[projectType]/form/[viewId]/index/survey.vue
index 5cb807998b..caa99c7eb5 100644
--- a/packages/nc-gui/pages/[projectType]/form/[viewId]/index/survey.vue
+++ b/packages/nc-gui/pages/[projectType]/form/[viewId]/index/survey.vue
@@ -1,8 +1,8 @@
 <script lang="ts" setup>
 import { RelationTypes, UITypes, isVirtualCol } from 'nocodb-sdk'
-import { computed, onKeyStroke, ref, useEventListener, useSharedFormStoreOrThrow, useStepper, watch } from '#imports'
+import { computed, onKeyStroke, ref, useEventListener, useSharedFormStoreOrThrow, useStepper } from '#imports'
 
-const { v$, formState, formColumns, submitForm, submitted, secondsRemain } = useSharedFormStoreOrThrow()
+const { v$, formState, formColumns, submitForm, submitted, secondsRemain, sharedFormView } = useSharedFormStoreOrThrow()
 
 function isRequired(_columnObj: Record<string, any>, required = false) {
   let columnObj = _columnObj
@@ -95,7 +95,7 @@ onKeyStroke(['ArrowRight', 'ArrowUp', 'Enter', 'Space'], goNext)
         :key="field.title"
         class="bg-white flex flex-col justify-center gap-4 w-full lg:max-w-1/2 max-w-500px m-auto px-8 pt-8 pb-4 md:(rounded-lg border-1 border-gray-200 shadow-xl)"
       >
-        <div v-if="field" class="flex flex-col gap-2">
+        <div v-if="field && !submitted" class="flex flex-col gap-2">
           <div class="flex nc-form-column-label">
             <SmartsheetHeaderVirtualCell
               v-if="isVirtualCol(field)"
@@ -147,7 +147,7 @@ onKeyStroke(['ArrowRight', 'ArrowUp', 'Enter', 'Space'], goNext)
           </div>
         </div>
 
-        <div v-if="!isFirst || !isLast" class="flex w-full text-lg mt-2">
+        <div v-if="(!isFirst || !isLast) && !submitted" class="flex w-full text-lg mt-2">
           <a-tooltip v-if="!isFirst" title="Go to previous" :mouse-enter-delay="1" :mouse-leave-delay="0">
             <button
               class="group color-transition transform hover:scale-110 absolute left-5 top-1/2 md:static"
@@ -180,10 +180,35 @@ onKeyStroke(['ArrowRight', 'ArrowUp', 'Enter', 'Space'], goNext)
             </button>
           </a-tooltip>
         </div>
+
+        <Transition name="layout">
+          <div v-if="submitted" class="flex flex-col justify-center text-center">
+            <h2 class="prose-xl mb-2">Thank you!</h2>
+
+            <div v-if="sharedFormView" class="min-w-350px mt-3">
+              <a-alert
+                type="success"
+                class="my-4 text-center"
+                outlined
+                :message="sharedFormView.success_msg || 'Successfully submitted form data'"
+              />
+
+              <p v-if="sharedFormView?.show_blank_form" class="text-xs text-gray-500 text-center my-4">
+                New form will be loaded after {{ secondsRemain }} seconds
+              </p>
+
+              <div v-if="sharedFormView?.submit_another_form" class="text-center">
+                <a-button type="primary" @click="submitted = false"> Submit Another Form</a-button>
+              </div>
+            </div>
+          </div>
+        </Transition>
       </div>
     </Transition>
 
-    <div class="absolute bottom-12 right-12">{{ index }} / {{ formColumns?.length }}</div>
+    <div class="absolute bottom-12 right-12 flex flex-col">
+      <div>{{ index + 1 }} / {{ formColumns?.length }}</div>
+    </div>
   </div>
 </template>
 

From ede6ead90228a17ff19360aa3bf5097a5fcb6579 Mon Sep 17 00:00:00 2001
From: braks <78412429+bcakmakoglu@users.noreply.github.com>
Date: Thu, 15 Sep 2022 19:49:57 +0200
Subject: [PATCH 25/82] feat(nc-gui): allow using theme in form view

---
 .../smartsheet/toolbar/ShareView.vue          | 31 ++++++++++++++++---
 .../[projectType]/form/[viewId]/index.vue     | 22 ++++++++++++-
 2 files changed, 48 insertions(+), 5 deletions(-)

diff --git a/packages/nc-gui/components/smartsheet/toolbar/ShareView.vue b/packages/nc-gui/components/smartsheet/toolbar/ShareView.vue
index d1e6a4522a..72a7758d9e 100644
--- a/packages/nc-gui/components/smartsheet/toolbar/ShareView.vue
+++ b/packages/nc-gui/components/smartsheet/toolbar/ShareView.vue
@@ -11,10 +11,13 @@ import {
   useNuxtApp,
   useProject,
   useSmartsheetStoreOrThrow,
+  useTheme,
   useUIPermission,
   watch,
 } from '#imports'
 
+const { theme } = useTheme()
+
 const { t } = useI18n()
 
 const { view, $api } = useSmartsheetStoreOrThrow()
@@ -35,6 +38,8 @@ const passwordProtected = ref(false)
 
 const surveyMode = ref(false)
 
+const withTheme = ref(false)
+
 const shared = ref()
 
 const allowCSVDownload = computed({
@@ -75,21 +80,35 @@ const sharedViewUrl = computed(() => {
       viewType = 'view'
   }
 
-  return `${dashboardUrl?.value}#/nc/${viewType}/${shared.value.uuid}${surveyMode.value ? '/survey' : ''}`
+  let url = `${dashboardUrl?.value}#/nc/${viewType}/${shared.value.uuid}`
+
+  /** if survey mode is enabled, append survey path segment */
+  if (surveyMode.value) {
+    url = `${url}/survey`
+
+    /** if theme is enabled, append theme query params */
+    if (withTheme.value) {
+      url = `${url}?theme=${theme.value.primaryColor.replace('#', '')},${theme.value.accentColor.replace('#', '')}`
+    }
+  }
+
+  return url
 })
 
 async function saveAllowCSVDownload() {
   try {
     const meta = shared.value.meta && typeof shared.value.meta === 'string' ? JSON.parse(shared.value.meta) : shared.value.meta
+
     await $api.dbViewShare.update(shared.value.id, {
       meta,
     })
-    // Successfully updated
+
     message.success(t('msg.success.updated'))
   } catch (e: any) {
     message.error(await extractSdkResponseErrorMsg(e))
   }
-  if (allowCSVDownload?.value) {
+
+  if (allowCSVDownload.value) {
     $e('a:view:share:enable-csv-download')
   } else {
     $e('a:view:share:disable-csv-download')
@@ -164,11 +183,15 @@ watch(passwordProtected, (value) => {
       <a-collapse ghost>
         <a-collapse-panel key="1" :header="$t('general.showOptions')">
           <div class="flex flex-col gap-2">
-            <div>
+            <div class="flex flex-col gap-2">
               <!-- Survey Mode; todo: i18n -->
               <a-checkbox v-if="shared.type === ViewTypes.FORM" v-model:checked="surveyMode" class="!text-xs">
                 Use Survey Mode
               </a-checkbox>
+
+              <div v-if="surveyMode" class="ml-2">
+                <a-checkbox v-model:checked="withTheme" class="!text-xs"> Use Theme </a-checkbox>
+              </div>
             </div>
 
             <div>
diff --git a/packages/nc-gui/pages/[projectType]/form/[viewId]/index.vue b/packages/nc-gui/pages/[projectType]/form/[viewId]/index.vue
index 2f7460c4d4..01d1ab7e01 100644
--- a/packages/nc-gui/pages/[projectType]/form/[viewId]/index.vue
+++ b/packages/nc-gui/pages/[projectType]/form/[viewId]/index.vue
@@ -1,7 +1,27 @@
 <script setup lang="ts">
-import { useSharedFormStoreOrThrow } from '#imports'
+import { useRoute, useSharedFormStoreOrThrow, useTheme, watch } from '#imports'
 
 const { passwordDlg, password, loadSharedView } = useSharedFormStoreOrThrow()
+
+const route = useRoute()
+
+const { setTheme } = useTheme()
+
+watch(
+  () => route.query.theme,
+  (nextTheme) => {
+    if (nextTheme) {
+      const theme = (nextTheme as string).split(',').map((t) => t.trim() && `#${t}`)
+
+      console.log(theme)
+      setTheme({
+        primaryColor: theme[0],
+        accentColor: theme[1],
+      })
+    }
+  },
+  { immediate: true },
+)
 </script>
 
 <template>

From 01e0d453d52320db8acc8ac4f6d1ce3cb5b41da0 Mon Sep 17 00:00:00 2001
From: braks <78412429+bcakmakoglu@users.noreply.github.com>
Date: Thu, 15 Sep 2022 20:24:14 +0200
Subject: [PATCH 26/82] feat(nc-gui): allow theme usage for form and survey

---
 .../components/smartsheet/toolbar/ShareView.vue | 17 +++++++++--------
 1 file changed, 9 insertions(+), 8 deletions(-)

diff --git a/packages/nc-gui/components/smartsheet/toolbar/ShareView.vue b/packages/nc-gui/components/smartsheet/toolbar/ShareView.vue
index 72a7758d9e..f65eb1b6a1 100644
--- a/packages/nc-gui/components/smartsheet/toolbar/ShareView.vue
+++ b/packages/nc-gui/components/smartsheet/toolbar/ShareView.vue
@@ -85,11 +85,11 @@ const sharedViewUrl = computed(() => {
   /** if survey mode is enabled, append survey path segment */
   if (surveyMode.value) {
     url = `${url}/survey`
+  }
 
-    /** if theme is enabled, append theme query params */
-    if (withTheme.value) {
-      url = `${url}?theme=${theme.value.primaryColor.replace('#', '')},${theme.value.accentColor.replace('#', '')}`
-    }
+  /** if theme is enabled, append theme query params */
+  if (withTheme.value) {
+    url = `${url}?theme=${theme.value.primaryColor.replace('#', '')},${theme.value.accentColor.replace('#', '')}`
   }
 
   return url
@@ -183,15 +183,16 @@ watch(passwordProtected, (value) => {
       <a-collapse ghost>
         <a-collapse-panel key="1" :header="$t('general.showOptions')">
           <div class="flex flex-col gap-2">
-            <div class="flex flex-col gap-2">
+            <div>
               <!-- Survey Mode; todo: i18n -->
               <a-checkbox v-if="shared.type === ViewTypes.FORM" v-model:checked="surveyMode" class="!text-xs">
                 Use Survey Mode
               </a-checkbox>
+            </div>
 
-              <div v-if="surveyMode" class="ml-2">
-                <a-checkbox v-model:checked="withTheme" class="!text-xs"> Use Theme </a-checkbox>
-              </div>
+            <div>
+              <!-- todo: i18n -->
+              <a-checkbox v-model:checked="withTheme" class="!text-xs"> Use Theme </a-checkbox>
             </div>
 
             <div>

From 412dd2f523bfcf05f759dbd6a13cb2c6d5d797b6 Mon Sep 17 00:00:00 2001
From: braks <78412429+bcakmakoglu@users.noreply.github.com>
Date: Thu, 15 Sep 2022 20:24:48 +0200
Subject: [PATCH 27/82] refactor(nc-gui): form view styles

---
 .../components/cell/attachment/index.vue      |   2 +-
 .../nc-gui/components/smartsheet/Form.vue     | 104 ++++++++++--------
 2 files changed, 57 insertions(+), 49 deletions(-)

diff --git a/packages/nc-gui/components/cell/attachment/index.vue b/packages/nc-gui/components/cell/attachment/index.vue
index dc7fb30b07..814410e1c8 100644
--- a/packages/nc-gui/components/cell/attachment/index.vue
+++ b/packages/nc-gui/components/cell/attachment/index.vue
@@ -151,7 +151,7 @@ watch(
     <div
       v-if="!isReadonly"
       :class="{ 'mx-auto px-4': !visibleItems.length }"
-      class="group flex gap-1 items-center active:ring rounded border-1 p-1 hover:(bg-primary bg-opacity-10)"
+      class="group cursor-pointer flex gap-1 items-center active:ring rounded border-1 p-1 hover:(bg-primary bg-opacity-10)"
       @click.stop="open"
     >
       <MdiReload v-if="isLoading" :class="{ 'animate-infinite animate-spin': isLoading }" />
diff --git a/packages/nc-gui/components/smartsheet/Form.vue b/packages/nc-gui/components/smartsheet/Form.vue
index d18c4da8e8..2b1de7a2a0 100644
--- a/packages/nc-gui/components/smartsheet/Form.vue
+++ b/packages/nc-gui/components/smartsheet/Form.vue
@@ -401,42 +401,39 @@ watch(view, (nextView) => {
       </div>
     </a-col>
   </a-row>
+
   <a-row v-else class="h-full flex">
-    <a-col
-      v-if="isEditable"
-      :span="8"
-      class="bg-[#f7f7f7] shadow-md p-5 h-full overflow-auto scrollbar-thin-primary nc-form-left-drawer"
-    >
-      <div class="flex">
-        <div class="flex flex-row flex-1 text-lg">
-          <span>
-            <!-- Fields -->
-            {{ $t('objects.fields') }}
-          </span>
+    <a-col v-if="isEditable" :span="8" class="shadow p-2 md:p-4 h-full overflow-auto scrollbar-thin-primary nc-form-left-drawer">
+      <div class="flex flex-wrap gap-2">
+        <div class="flex-1 text-lg">
+          {{ $t('objects.fields') }}
         </div>
-        <div class="flex flex-row">
-          <div class="cursor-pointer mr-2">
-            <span
-              v-if="hiddenColumns.length"
-              class="mr-2 nc-form-add-all"
-              style="border-bottom: 2px solid rgb(218, 218, 218)"
-              @click="addAllColumns"
-            >
-              <!-- Add all -->
-              {{ $t('general.addAll') }}
-            </span>
-            <span
-              v-if="localColumns.length"
-              class="ml-2 nc-form-remove-all"
-              style="border-bottom: 2px solid rgb(218, 218, 218)"
-              @click="removeAllColumns"
-            >
-              <!-- Remove all -->
-              {{ $t('general.removeAll') }}
-            </span>
-          </div>
+
+        <div class="flex flex-wrap gap-2 mb-4">
+          <button
+            v-if="hiddenColumns.length"
+            type="button"
+            class="nc-form-add-all color-transition hover:text-primary"
+            style="border-bottom: 2px solid rgb(218, 218, 218)"
+            @click="addAllColumns"
+          >
+            <!-- Add all -->
+            {{ $t('general.addAll') }}
+          </button>
+
+          <button
+            v-if="localColumns.length"
+            type="button"
+            class="nc-form-remove-all color-transition hover:text-primary"
+            style="border-bottom: 2px solid rgb(218, 218, 218)"
+            @click="removeAllColumns"
+          >
+            <!-- Remove all -->
+            {{ $t('general.removeAll') }}
+          </button>
         </div>
       </div>
+
       <Draggable
         :list="hiddenColumns"
         item-key="id"
@@ -448,7 +445,7 @@ watch(view, (nextView) => {
         <template #item="{ element, index }">
           <a-card
             size="small"
-            class="m-0 p-0 cursor-pointer item mb-2"
+            class="m-0 p-0 cursor-pointer item mb-2 hover:bg-primary bg-opacity-10 !rounded !shadow"
             @mousedown="moved = false"
             @mousemove="moved = false"
             @mouseup="handleMouseUp(element, index)"
@@ -475,19 +472,26 @@ watch(view, (nextView) => {
             </div>
           </a-card>
         </template>
+
         <template #footer>
-          <div class="mt-4 border-dashed border-2 border-gray-400 py-3 text-gray-400 text-center nc-drag-n-drop-to-hide">
+          <div
+            class="my-4 select-none border-dashed border-2 border-gray-400 py-3 text-gray-400 text-center nc-drag-n-drop-to-hide"
+          >
             <!-- Drag and drop fields here to hide -->
             {{ $t('msg.info.dragDropHide') }}
           </div>
+
           <a-dropdown v-model:visible="showColumnDropdown" :trigger="['click']" overlay-class-name="nc-dropdown-form-add-column">
-            <a-button type="link" class="w-full caption mt-2" size="large" @click.stop="showColumnDropdown = true">
-              <div class="flex items-center prose-sm justify-center text-gray-400">
-                <mdi-plus />
+            <button type="button" class="group w-full mt-2" @click.stop="showColumnDropdown = true">
+              <span class="flex items-center flex-wrap justify-center gap-2 prose-sm text-gray-400">
+                <MdiPlus class="color-transition transform group-hover:(text-accent scale-125)" />
                 <!-- Add new field to this table -->
-                {{ $t('activity.addField') }}
-              </div>
-            </a-button>
+                <span class="color-transition group-hover:text-primary break-words">
+                  {{ $t('activity.addField') }}
+                </span>
+              </span>
+            </button>
+
             <template #overlay>
               <LazySmartsheetColumnEditOrAddProvider
                 v-if="showColumnDropdown"
@@ -501,25 +505,28 @@ watch(view, (nextView) => {
         </template>
       </Draggable>
     </a-col>
+
     <a-col v-if="formViewData" :span="isEditable ? 16 : 24" class="h-full overflow-auto scrollbar-thin-primary">
-      <div class="h-[200px] !bg-[#dbdad7]">
+      <div class="h-[200px] bg-primary bg-opacity-75">
         <!-- for future implementation of cover image -->
       </div>
+
       <a-card
-        class="m-0 rounded-b-0 p-4 border-none"
+        class="m-0 !rounded-0 p-4 border-none"
         :body-style="{
           maxWidth: '700px',
           margin: '0 auto',
           marginTop: '-200px',
         }"
       >
-        <a-form ref="formRef" :model="formState" class="nc-form">
-          <a-card class="rounded m-2 py-10 px-5">
+        <a-form ref="formRef" :model="formState" class="nc-form" no-style>
+          <a-card class="!rounded !shadow m-2 py-8" :body-style="{ paddingLeft: '0px', paddingRight: '0px' }">
             <!-- Header -->
-            <a-form-item v-if="isEditable" class="m-0 gap-0 p-0">
+            <a-form-item v-if="isEditable" class="px-4">
               <a-input
                 v-model:value="formViewData.heading"
-                class="w-full !font-bold !text-4xl"
+                class="w-full !font-bold !text-4xl !border-0 !border-b-1 !border-dashed"
+                :style="{ borderRightWidth: '0px !important' }"
                 size="large"
                 hide-details
                 placeholder="Form Title"
@@ -529,13 +536,14 @@ watch(view, (nextView) => {
               />
             </a-form-item>
 
-            <div v-else class="ml-3 w-full text-bold text-h3">{{ formViewData.heading }}</div>
+            <div v-else class="px-4 ml-3 w-full text-bold text-4xl">{{ formViewData.heading }}</div>
 
             <!-- Sub Header -->
             <a-form-item v-if="isEditable" class="m-0 gap-0 p-0">
               <a-input
                 v-model:value="formViewData.subheading"
-                class="w-full"
+                class="w-full !border-0 !border-b-1 !border-dashed"
+                :style="{ borderRightWidth: '0px !important' }"
                 size="large"
                 hide-details
                 :placeholder="$t('msg.info.formDesc')"

From f2383dca603d8b318744b664277877cce3b8b422 Mon Sep 17 00:00:00 2001
From: braks <78412429+bcakmakoglu@users.noreply.github.com>
Date: Thu, 15 Sep 2022 22:06:22 +0200
Subject: [PATCH 28/82] feat(nc-gui): response right sidebar width

---
 packages/nc-gui/components/smartsheet/sidebar/index.vue | 5 +++--
 1 file changed, 3 insertions(+), 2 deletions(-)

diff --git a/packages/nc-gui/components/smartsheet/sidebar/index.vue b/packages/nc-gui/components/smartsheet/sidebar/index.vue
index 72c22d37ba..6759ef3f9c 100644
--- a/packages/nc-gui/components/smartsheet/sidebar/index.vue
+++ b/packages/nc-gui/components/smartsheet/sidebar/index.vue
@@ -108,14 +108,15 @@ async function onCreate(view: ViewType) {
     :collapsed="sidebarCollapsed"
     collapsiple
     collapsed-width="0"
-    width="250"
-    class="relative shadow-md h-full"
+    width="0"
+    class="relative shadow h-full w-full !flex-1 !min-w-0 !max-w-[150px] !w-[150px] lg:(!max-w-[250px] !w-[250px])"
     theme="light"
   >
     <LazySmartsheetSidebarToolbar
       v-if="isOpen"
       class="min-h-[var(--toolbar-height)] max-h-[var(--toolbar-height)] flex items-center py-3 px-3 justify-between border-b-1"
     />
+
     <div v-if="isOpen" class="flex-1 flex flex-col min-h-0">
       <LazySmartsheetSidebarMenuTop @open-modal="openModal" @deleted="loadViews" />
 

From 9fcc623382970d6d0c732084add61a0da1dad95b Mon Sep 17 00:00:00 2001
From: braks <78412429+bcakmakoglu@users.noreply.github.com>
Date: Thu, 15 Sep 2022 22:06:52 +0200
Subject: [PATCH 29/82] refactor(nc-gui): form view styles

---
 .../nc-gui/components/smartsheet/Form.vue     | 124 ++++++++++--------
 1 file changed, 70 insertions(+), 54 deletions(-)

diff --git a/packages/nc-gui/components/smartsheet/Form.vue b/packages/nc-gui/components/smartsheet/Form.vue
index 2b1de7a2a0..58423ec3b7 100644
--- a/packages/nc-gui/components/smartsheet/Form.vue
+++ b/packages/nc-gui/components/smartsheet/Form.vue
@@ -439,36 +439,34 @@ watch(view, (nextView) => {
         item-key="id"
         draggable=".item"
         group="form-inputs"
+        class="flex flex-col gap-2"
         @start="drag = true"
         @end="drag = false"
       >
         <template #item="{ element, index }">
           <a-card
             size="small"
-            class="m-0 p-0 cursor-pointer item mb-2 hover:bg-primary bg-opacity-10 !rounded !shadow"
+            class="cursor-pointer item hover:(bg-primary ring-1 ring-accent ring-opacity-100) bg-opacity-10 !rounded !shadow-lg"
             @mousedown="moved = false"
             @mousemove="moved = false"
             @mouseup="handleMouseUp(element, index)"
           >
             <div class="flex">
-              <div class="flex flex-row flex-1">
+              <div class="flex flex-1">
                 <LazySmartsheetHeaderVirtualCell
                   v-if="isVirtualCol(element)"
                   :column="{ ...element, title: element.label || element.title }"
                   :required="isRequired(element, element.required)"
                   :hide-menu="true"
                 />
+
                 <LazySmartsheetHeaderCell
                   v-else
-                  class="w-full"
                   :column="{ ...element, title: element.label || element.title }"
                   :required="isRequired(element, element.required)"
                   :hide-menu="true"
                 />
               </div>
-              <div class="flex flex-row">
-                <MdiDragVertical class="flex flex-1" />
-              </div>
             </div>
           </a-card>
         </template>
@@ -512,49 +510,52 @@ watch(view, (nextView) => {
       </div>
 
       <a-card
-        class="m-0 !rounded-0 p-4 border-none"
+        class="p-4 border-none"
         :body-style="{
-          maxWidth: '700px',
+          maxWidth: 'max(50vw, 700px)',
           margin: '0 auto',
           marginTop: '-200px',
+          padding: '0px',
         }"
       >
         <a-form ref="formRef" :model="formState" class="nc-form" no-style>
-          <a-card class="!rounded !shadow m-2 py-8" :body-style="{ paddingLeft: '0px', paddingRight: '0px' }">
+          <a-card class="!rounded !shadow !m-2 md:!m-4 xl:!m-8 py-8" :body-style="{ paddingLeft: '0px', paddingRight: '0px' }">
             <!-- Header -->
-            <a-form-item v-if="isEditable" class="px-4">
-              <a-input
-                v-model:value="formViewData.heading"
-                class="w-full !font-bold !text-4xl !border-0 !border-b-1 !border-dashed"
-                :style="{ borderRightWidth: '0px !important' }"
-                size="large"
-                hide-details
-                placeholder="Form Title"
-                :bordered="false"
-                @blur="updateView"
-                @keydown.enter="updateView"
-              />
-            </a-form-item>
-
+            <div v-if="isEditable" class="px-4">
+              <a-form-item v-if="isEditable">
+                <a-input
+                  v-model:value="formViewData.heading"
+                  class="w-full !font-bold !text-4xl !border-0 !border-b-1 !border-dashed"
+                  :style="{ borderRightWidth: '0px !important' }"
+                  size="large"
+                  hide-details
+                  placeholder="Form Title"
+                  :bordered="false"
+                  @blur="updateView"
+                  @keydown.enter="updateView"
+                />
+              </a-form-item>
+            </div>
             <div v-else class="px-4 ml-3 w-full text-bold text-4xl">{{ formViewData.heading }}</div>
 
             <!-- Sub Header -->
-            <a-form-item v-if="isEditable" class="m-0 gap-0 p-0">
-              <a-input
-                v-model:value="formViewData.subheading"
-                class="w-full !border-0 !border-b-1 !border-dashed"
-                :style="{ borderRightWidth: '0px !important' }"
-                size="large"
-                hide-details
-                :placeholder="$t('msg.info.formDesc')"
-                :bordered="false"
-                :disabled="!isEditable"
-                @blur="updateView"
-                @click="updateView"
-              />
-            </a-form-item>
-
-            <div v-else class="ml-3 mb-5 w-full text-bold text-h3">{{ formViewData.subheading }}</div>
+            <div v-if="isEditable" class="px-4">
+              <a-form-item>
+                <a-input
+                  v-model:value="formViewData.subheading"
+                  class="w-full !border-0 !border-b-1 !border-dashed"
+                  :style="{ borderRightWidth: '0px !important' }"
+                  size="large"
+                  hide-details
+                  :placeholder="$t('msg.info.formDesc')"
+                  :bordered="false"
+                  :disabled="!isEditable"
+                  @blur="updateView"
+                  @click="updateView"
+                />
+              </a-form-item>
+            </div>
+            <div v-else class="px-4 ml-3 w-full text-bold text-md">{{ formViewData.subheading || '---' }}</div>
 
             <Draggable
               ref="draggableRef"
@@ -570,7 +571,7 @@ watch(view, (nextView) => {
             >
               <template #item="{ element, index }">
                 <div
-                  class="nc-editable item cursor-pointer hover:(bg-primary bg-opacity-10) p-3 my-2 relative"
+                  class="nc-editable item cursor-pointer hover:(bg-primary bg-opacity-10 ring-1 ring-accent ring-opacity-100) px-4 lg:px-12 py-4 relative"
                   :class="[
                     `nc-form-drag-${element.title.replaceAll(' ', '')}`,
                     {
@@ -585,15 +586,13 @@ watch(view, (nextView) => {
                   >
                     <mdi-eye-off-outline class="opacity-0 nc-field-remove-icon" @click.stop="hideColumn(index)" />
                   </div>
+
                   <template v-if="activeRow === element.title">
                     <div class="flex">
                       <div
                         class="flex flex-1 opacity-0 align-center gap-2"
                         :class="{ 'opacity-100': activeRow === element.title }"
                       >
-                        <div class="flex flex-row">
-                          <mdi-drag-vertical class="flex flex-1" />
-                        </div>
                         <div class="items-center flex">
                           <span
                             class="text-xs text-gray-500 mr-2 nc-form-input-required"
@@ -658,7 +657,6 @@ watch(view, (nextView) => {
 
                   <a-form-item
                     v-if="isVirtualCol(element)"
-                    class="!m-0 gap-0 p-0"
                     :name="element.title"
                     :rules="[{ required: isRequired(element, element.required), message: `${element.title} is required` }]"
                   >
@@ -674,7 +672,6 @@ watch(view, (nextView) => {
 
                   <a-form-item
                     v-else
-                    class="!m-0 gap-0 p-0"
                     :name="element.title"
                     :rules="[{ required: isRequired(element, element.required), message: `${element.title} is required` }]"
                   >
@@ -702,23 +699,24 @@ watch(view, (nextView) => {
               </template>
             </Draggable>
 
-            <div class="justify-center flex mt-10">
+            <div class="justify-center flex mt-6">
               <a-button type="primary" class="flex items-center gap-2 nc-form-submit" size="large" @click="submitForm">
-                <!-- Submit -->
                 {{ $t('general.submit') }}
               </a-button>
             </div>
           </a-card>
         </a-form>
 
-        <div v-if="isEditable" class="mx-10 px-10">
+        <a-divider />
+
+        <div v-if="isEditable" class="px-4 flex flex-col gap-2">
           <!-- After form is submitted -->
-          <div class="text-gray-500 mt-4 mb-2">
+          <div class="text-lg text-gray-700">
             {{ $t('msg.info.afterFormSubmitted') }}
           </div>
 
           <!-- Show this message -->
-          <label class="text-gray-600 text-bold"> {{ $t('msg.info.showMessage') }}: </label>
+          <div class="text-gray-500 text-bold">{{ $t('msg.info.showMessage') }}:</div>
           <a-textarea
             v-model:value="formViewData.success_msg"
             :rows="3"
@@ -728,8 +726,8 @@ watch(view, (nextView) => {
           />
 
           <!-- Other options -->
-          <div class="mt-4">
-            <div class="my-4">
+          <div class="flex flex-col gap-2 mt-4">
+            <div class="flex items-center">
               <!-- Show "Submit Another Form" button -->
               <a-switch
                 v-model:checked="formViewData.submit_another_form"
@@ -741,7 +739,7 @@ watch(view, (nextView) => {
               <span class="ml-4">{{ $t('msg.info.submitAnotherForm') }}</span>
             </div>
 
-            <div class="my-4">
+            <div class="flex items-center">
               <!-- Show a blank form after 5 seconds -->
               <a-switch
                 v-model:checked="formViewData.show_blank_form"
@@ -750,10 +748,11 @@ watch(view, (nextView) => {
                 class="nc-form-checkbox-show-blank-form"
                 @change="updateView"
               />
+
               <span class="ml-4">{{ $t('msg.info.showBlankForm') }}</span>
             </div>
 
-            <div class="my-4">
+            <div class="mb-12 flex items-center">
               <a-switch
                 v-model:checked="emailMe"
                 v-e="[`a:form-view:email-me`]"
@@ -761,6 +760,7 @@ watch(view, (nextView) => {
                 class="nc-form-checkbox-send-email"
                 @change="onEmailChange"
               />
+
               <!-- Email me at <email> -->
               <span class="ml-4">
                 {{ $t('msg.info.emailForm') }} <span class="text-bold text-gray-600">{{ state.user.value?.email }}</span>
@@ -794,4 +794,20 @@ watch(view, (nextView) => {
     @apply !text-gray-500 !text-xs;
   }
 }
+
+:deep(.nc-cell-attachment) {
+  @apply p-0;
+
+  .nc-attachment-cell {
+    @apply px-4 min-h-[75px] w-full h-full;
+
+    .nc-attachment {
+      @apply md:(w-[50px] h-[50px]) lg:(w-[75px] h-[75px]) min-h-[50px] min-w-[50px];
+    }
+
+    .nc-attachment-cell-dropzone {
+      @apply rounded bg-gray-400/75;
+    }
+  }
+}
 </style>

From cd716924412dd6e76f8e6fcc192814eb30563464 Mon Sep 17 00:00:00 2001
From: braks <78412429+bcakmakoglu@users.noreply.github.com>
Date: Thu, 15 Sep 2022 22:07:18 +0200
Subject: [PATCH 30/82] refactor(nc-gui): survey and form page styles

---
 .../pages/[projectType]/form/[viewId].vue     | 18 ++++
 .../[projectType]/form/[viewId]/index.vue     | 15 ++-
 .../form/[viewId]/index/index.vue             | 92 +++++++++----------
 .../form/[viewId]/index/survey.vue            | 42 +++------
 4 files changed, 85 insertions(+), 82 deletions(-)

diff --git a/packages/nc-gui/pages/[projectType]/form/[viewId].vue b/packages/nc-gui/pages/[projectType]/form/[viewId].vue
index 6e1ff434c2..3c016c1868 100644
--- a/packages/nc-gui/pages/[projectType]/form/[viewId].vue
+++ b/packages/nc-gui/pages/[projectType]/form/[viewId].vue
@@ -41,3 +41,21 @@ if (!notFound.value) {
     <NuxtPage />
   </NuxtLayout>
 </template>
+
+<style lang="scss" scoped>
+:deep(.nc-cell-attachment) {
+  @apply p-0;
+
+  .nc-attachment-cell {
+    @apply px-4 min-h-[75px] w-full h-full;
+
+    .nc-attachment {
+      @apply md:(w-[50px] h-[50px]) lg:(w-[75px] h-[75px]) min-h-[50px] min-w-[50px];
+    }
+
+    .nc-attachment-cell-dropzone {
+      @apply rounded bg-gray-400/75;
+    }
+  }
+}
+</style>
diff --git a/packages/nc-gui/pages/[projectType]/form/[viewId]/index.vue b/packages/nc-gui/pages/[projectType]/form/[viewId]/index.vue
index 01d1ab7e01..f00541bd77 100644
--- a/packages/nc-gui/pages/[projectType]/form/[viewId]/index.vue
+++ b/packages/nc-gui/pages/[projectType]/form/[viewId]/index.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { useRoute, useSharedFormStoreOrThrow, useTheme, watch } from '#imports'
+import { openLink, useRoute, useSharedFormStoreOrThrow, useTheme, watch } from '#imports'
 
 const { passwordDlg, password, loadSharedView } = useSharedFormStoreOrThrow()
 
@@ -28,12 +28,17 @@ watch(
   <div class="nc-form-view relative md:bg-primary bg-opacity-5 h-full min-h-[600px] flex flex-col justify-center items-center nc-form-signin">
     <NuxtPage />
 
-    <div class="self-end text-xs text-gray-400 mx-auto my-4 flex justify-center gap-2 items-center">
-      <div class="bg-primary bg-opacity-100 rounded">
+    <button
+      type="button"
+      class="cursor-pointer self-end text-xs text-gray-400 hover:text-primary mx-auto my-4 flex justify-center gap-2 items-center"
+      @click="openLink('https://github.com/nocodb/nocodb')"
+    >
+      <span class="bg-primary bg-opacity-100 rounded">
         <img width="32" height="32" alt="NocoDB" src="~/assets/img/icons/512x512-trans.png" />
-      </div>
+      </span>
+
       Powered by NocoDB
-    </div>
+    </button>
 
     <a-modal
       v-model:visible="passwordDlg"
diff --git a/packages/nc-gui/pages/[projectType]/form/[viewId]/index/index.vue b/packages/nc-gui/pages/[projectType]/form/[viewId]/index/index.vue
index 63c1c89cf8..e4154231fc 100644
--- a/packages/nc-gui/pages/[projectType]/form/[viewId]/index/index.vue
+++ b/packages/nc-gui/pages/[projectType]/form/[viewId]/index/index.vue
@@ -59,56 +59,50 @@ function isRequired(_columnObj: Record<string, any>, required = false) {
         </GeneralOverlay>
 
         <div class="nc-form-wrapper">
-          <div class="nc-form h-full max-w-3/4 mx-auto">
-            <div v-for="(field, index) in formColumns" :key="index" class="flex flex-col my-6 gap-2">
-              <div class="flex nc-form-column-label">
-                <SmartsheetHeaderVirtualCell
-                  v-if="isVirtualCol(field)"
-                  :column="{ ...field, title: field.label || field.title }"
-                  :required="isRequired(field, field.required)"
-                  :hide-menu="true"
-                />
-
-                <SmartsheetHeaderCell
-                  v-else
-                  :column="{ ...field, title: field.label || field.title }"
-                  :required="isRequired(field, field.required)"
-                  :hide-menu="true"
-                />
-              </div>
-
-              <div v-if="isVirtualCol(field)" class="mt-0">
-                <SmartsheetVirtualCell
-                  class="mt-0 nc-input"
-                  :class="`nc-form-input-${field.title.replaceAll(' ', '')}`"
-                  :column="field"
-                />
-
-                <div v-if="field.description" class="text-gray-500 text-[10px] mb-2 ml-1">{{ field.description }}</div>
-
-                <template v-if="v$.virtual.$dirty && v$.virtual?.[field.title]">
-                  <div v-for="error of v$.virtual[field.title].$errors" :key="error" class="text-xs text-red-500">
-                    {{ error.$message }}
-                  </div>
-                </template>
-              </div>
-
-              <div v-else class="mt-0">
-                <SmartsheetCell
-                  v-model="formState[field.title]"
-                  class="nc-input"
-                  :class="`nc-form-input-${field.title.replaceAll(' ', '')}`"
-                  :column="field"
-                  :edit-enabled="true"
-                />
-
-                <div v-if="field.description" class="text-gray-500 text-[10px] mb-2 ml-1">{{ field.description }}</div>
-
-                <template v-if="v$.localState.$dirty && v$.localState?.[field.title]">
-                  <div v-for="error of v$.localState[field.title].$errors" :key="error" class="text-xs text-red-500">
-                    {{ error.$message }}
+          <div class="nc-form h-full px-6 lg:(max-w-3/4 mx-auto px-0)">
+            <div class="flex flex-col gap-6">
+              <div v-for="(field, index) in formColumns" :key="index" class="flex flex-col gap-2">
+                <div class="flex nc-form-column-label">
+                  <SmartsheetHeaderVirtualCell
+                    v-if="isVirtualCol(field)"
+                    :column="{ ...field, title: field.label || field.title }"
+                    :required="isRequired(field, field.required)"
+                    :hide-menu="true"
+                  />
+
+                  <SmartsheetHeaderCell
+                    v-else
+                    :column="{ ...field, title: field.label || field.title }"
+                    :required="isRequired(field, field.required)"
+                    :hide-menu="true"
+                  />
+                </div>
+
+                <div>
+                  <SmartsheetVirtualCell
+                    v-if="isVirtualCol(field)"
+                    class="mt-0 nc-input"
+                    :class="`nc-form-input-${field.title.replaceAll(' ', '')}`"
+                    :column="field"
+                  />
+
+                  <SmartsheetCell
+                    v-else
+                    v-model="formState[field.title]"
+                    class="nc-input"
+                    :class="`nc-form-input-${field.title.replaceAll(' ', '')}`"
+                    :column="field"
+                    :edit-enabled="true"
+                  />
+
+                  <div class="flex flex-col gap-2 text-gray-500 text-[0.75rem] my-2 px-1">
+                    <div v-for="error of v$.localState[field.title].$errors" :key="error" class="text-red-500">
+                      {{ error.$message }}
+                    </div>
+
+                    {{ field.description }}
                   </div>
-                </template>
+                </div>
               </div>
             </div>
 
diff --git a/packages/nc-gui/pages/[projectType]/form/[viewId]/index/survey.vue b/packages/nc-gui/pages/[projectType]/form/[viewId]/index/survey.vue
index caa99c7eb5..47667c04ab 100644
--- a/packages/nc-gui/pages/[projectType]/form/[viewId]/index/survey.vue
+++ b/packages/nc-gui/pages/[projectType]/form/[viewId]/index/survey.vue
@@ -89,6 +89,14 @@ onKeyStroke(['ArrowRight', 'ArrowUp', 'Enter', 'Space'], goNext)
 
 <template>
   <div class="w-full h-full flex flex-col justify-center items-center">
+    <template v-if="sharedFormView">
+      <div class="flex-1" />
+
+      <h1 class="prose-2xl font-bold self-center my-4">{{ sharedFormView.heading }}</h1>
+
+      <h2 v-if="sharedFormView.subheading" class="prose-lg text-gray-500 self-center">{{ sharedFormView.subheading }}</h2>
+    </template>
+
     <Transition :name="`slide-${transitionName}`" mode="out-in">
       <div
         ref="el"
@@ -112,24 +120,16 @@ onKeyStroke(['ArrowRight', 'ArrowUp', 'Enter', 'Space'], goNext)
             />
           </div>
 
-          <div v-if="isVirtualCol(field)">
+          <div>
             <SmartsheetVirtualCell
+              v-if="isVirtualCol(field)"
               class="mt-0 nc-input"
               :class="`nc-form-input-${field.title.replaceAll(' ', '')}`"
               :column="field"
             />
 
-            <div v-if="field.description" class="text-gray-500 text-[10px] mb-2 ml-1">{{ field.description }}</div>
-
-            <template v-if="v$.virtual.$dirty && v$.virtual?.[field.title]">
-              <div v-for="error of v$.virtual[field.title].$errors" :key="error" class="text-xs text-red-500">
-                {{ error.$message }}
-              </div>
-            </template>
-          </div>
-
-          <div v-else>
             <SmartsheetCell
+              v-else
               v-model="formState[field.title]"
               class="nc-input"
               :class="`nc-form-input-${field.title.replaceAll(' ', '')}`"
@@ -137,7 +137,7 @@ onKeyStroke(['ArrowRight', 'ArrowUp', 'Enter', 'Space'], goNext)
               :edit-enabled="true"
             />
 
-            <div class="flex flex-col gap-2 text-gray-500 text-xs my-2 px-1">
+            <div class="flex flex-col gap-2 text-gray-500 text-[0.75rem] my-2 px-1">
               <div v-for="error of v$.localState[field.title].$errors" :key="error" class="text-red-500">
                 {{ error.$message }}
               </div>
@@ -206,6 +206,8 @@ onKeyStroke(['ArrowRight', 'ArrowUp', 'Enter', 'Space'], goNext)
       </div>
     </Transition>
 
+    <div v-if="sharedFormView" class="flex-1" />
+
     <div class="absolute bottom-12 right-12 flex flex-col">
       <div>{{ index + 1 }} / {{ formColumns?.length }}</div>
     </div>
@@ -226,20 +228,4 @@ onKeyStroke(['ArrowRight', 'ArrowUp', 'Enter', 'Space'], goNext)
     @apply mr-2;
   }
 }
-
-:deep(.nc-cell-attachment) {
-  @apply p-0;
-
-  .nc-attachment-cell {
-    @apply px-4 min-h-[75px] w-full h-full;
-
-    .nc-attachment {
-      @apply md:(w-[50px] h-[50px]) lg:(w-[75px] h-[75px]) min-h-[50px] min-w-[50px];
-    }
-
-    .nc-attachment-cell-dropzone {
-      @apply rounded bg-gray-400/75;
-    }
-  }
-}
 </style>

From 79589fe8bf903e25fb8b3c3bc87a53576cbf626e Mon Sep 17 00:00:00 2001
From: braks <78412429+bcakmakoglu@users.noreply.github.com>
Date: Thu, 15 Sep 2022 22:07:49 +0200
Subject: [PATCH 31/82] chore(nc-gui): remove log

---
 packages/nc-gui/pages/[projectType]/form/[viewId]/index.vue | 1 -
 1 file changed, 1 deletion(-)

diff --git a/packages/nc-gui/pages/[projectType]/form/[viewId]/index.vue b/packages/nc-gui/pages/[projectType]/form/[viewId]/index.vue
index f00541bd77..f752e8b06e 100644
--- a/packages/nc-gui/pages/[projectType]/form/[viewId]/index.vue
+++ b/packages/nc-gui/pages/[projectType]/form/[viewId]/index.vue
@@ -13,7 +13,6 @@ watch(
     if (nextTheme) {
       const theme = (nextTheme as string).split(',').map((t) => t.trim() && `#${t}`)
 
-      console.log(theme)
       setTheme({
         primaryColor: theme[0],
         accentColor: theme[1],

From fbeb8ce1ed21e7273275620c52efa36e4b61269f Mon Sep 17 00:00:00 2001
From: braks <78412429+bcakmakoglu@users.noreply.github.com>
Date: Thu, 15 Sep 2022 22:11:43 +0200
Subject: [PATCH 32/82] chore(nc-gui): form page style update

---
 .../pages/[projectType]/form/[viewId]/index/index.vue       | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/packages/nc-gui/pages/[projectType]/form/[viewId]/index/index.vue b/packages/nc-gui/pages/[projectType]/form/[viewId]/index/index.vue
index e4154231fc..99c092d74a 100644
--- a/packages/nc-gui/pages/[projectType]/form/[viewId]/index/index.vue
+++ b/packages/nc-gui/pages/[projectType]/form/[viewId]/index/index.vue
@@ -21,7 +21,7 @@ function isRequired(_columnObj: Record<string, any>, required = false) {
 
 <template>
   <div
-    class="bg-white relative flex flex-col justify-center gap-2 w-full lg:max-w-1/2 max-w-500px m-auto p-8 md:(rounded-lg border-1 border-gray-200 shadow-xl)"
+    class="bg-white relative flex flex-col justify-center gap-2 w-full max-w-[max(33%,600px)] m-auto py-4 pb-8 px-16 md:(rounded-lg border-1 border-gray-200 shadow-xl)"
   >
     <template v-if="sharedFormView">
       <h1 class="prose-2xl font-bold self-center my-4">{{ sharedFormView.heading }}</h1>
@@ -59,7 +59,7 @@ function isRequired(_columnObj: Record<string, any>, required = false) {
         </GeneralOverlay>
 
         <div class="nc-form-wrapper">
-          <div class="nc-form h-full px-6 lg:(max-w-3/4 mx-auto px-0)">
+          <div class="nc-form h-full">
             <div class="flex flex-col gap-6">
               <div v-for="(field, index) in formColumns" :key="index" class="flex flex-col gap-2">
                 <div class="flex nc-form-column-label">
@@ -106,7 +106,7 @@ function isRequired(_columnObj: Record<string, any>, required = false) {
               </div>
             </div>
 
-            <div class="text-center">
+            <div class="text-center mt-4">
               <button type="submit" class="submit" @click="submitForm">
                 {{ $t('general.submit') }}
               </button>

From 4c88a4326cba2ef0a2f51c4c04423098003587ff Mon Sep 17 00:00:00 2001
From: braks <78412429+bcakmakoglu@users.noreply.github.com>
Date: Thu, 15 Sep 2022 22:29:13 +0200
Subject: [PATCH 33/82] feat(nc-gui): add dropzone injection

---
 .../nc-gui/components/cell/attachment/index.vue   | 11 ++++++++---
 packages/nc-gui/context/index.ts                  |  1 +
 .../[projectType]/form/[viewId]/index/survey.vue  | 15 +++++++++++++--
 3 files changed, 22 insertions(+), 5 deletions(-)

diff --git a/packages/nc-gui/components/cell/attachment/index.vue b/packages/nc-gui/components/cell/attachment/index.vue
index 814410e1c8..f39061a5da 100644
--- a/packages/nc-gui/components/cell/attachment/index.vue
+++ b/packages/nc-gui/components/cell/attachment/index.vue
@@ -3,6 +3,7 @@ import { onKeyDown } from '@vueuse/core'
 import { useProvideAttachmentCell } from './utils'
 import { useSortable } from './sort'
 import {
+  DropZoneRef,
   IsGalleryInj,
   inject,
   isImage,
@@ -30,11 +31,13 @@ const emits = defineEmits<Emits>()
 
 const isGallery = inject(IsGalleryInj, ref(false))
 
+const dropZoneInjection = inject(DropZoneRef, ref())
+
 const attachmentCellRef = ref<HTMLDivElement>()
 
 const sortableRef = ref<HTMLDivElement>()
 
-const currentCellRef = ref()
+const currentCellRef = dropZoneInjection && dropZoneInjection.value ? ref() : dropZoneInjection
 
 const { cellRefs, isSharedForm } = useSmartsheetStoreOrThrow()!
 
@@ -57,6 +60,8 @@ const {
 watch(
   [() => rowIndex, isForm, attachmentCellRef],
   () => {
+    if (dropZoneInjection?.value) return
+
     if (!rowIndex && (isForm.value || isGallery.value)) {
       currentCellRef.value = attachmentCellRef.value
     } else {
@@ -173,7 +178,7 @@ watch(
       <div
         ref="sortableRef"
         :class="{ dragging }"
-        class="flex justify-center items-center flex-wrap gap-2 p-1 scrollbar-thin-dull max-h-[150px] overflow-auto"
+        class="flex cursor-pointer justify-center items-center flex-wrap gap-2 p-1 scrollbar-thin-dull max-h-[150px] overflow-auto"
       >
         <template v-for="(item, i) of visibleItems" :key="item.url || item.title">
           <a-tooltip placement="bottom">
@@ -203,7 +208,7 @@ watch(
         </template>
       </div>
 
-      <div class="group flex gap-1 items-center border-1 active:ring rounded p-1 hover:(bg-primary bg-opacity-10)">
+      <div class="group cursor-pointer flex gap-1 items-center border-1 active:ring rounded p-1 hover:(bg-primary bg-opacity-10)">
         <MdiReload v-if="isLoading" :class="{ 'animate-infinite animate-spin': isLoading }" />
 
         <a-tooltip v-else placement="bottom">
diff --git a/packages/nc-gui/context/index.ts b/packages/nc-gui/context/index.ts
index dbfc67433e..839a2cc771 100644
--- a/packages/nc-gui/context/index.ts
+++ b/packages/nc-gui/context/index.ts
@@ -31,3 +31,4 @@ export const ViewListInj: InjectionKey<Ref<ViewType[]>> = Symbol('view-list-inje
 export const EditModeInj: InjectionKey<Ref<boolean>> = Symbol('edit-mode-injection')
 export const SharedViewPasswordInj: InjectionKey<Ref<string | null>> = Symbol('shared-view-password-injection')
 export const CellUrlDisableOverlayInj: InjectionKey<Ref<boolean>> = Symbol('cell-url-disable-url')
+export const DropZoneRef: InjectionKey<Ref<Element | undefined>> = Symbol('drop-zone-ref')
diff --git a/packages/nc-gui/pages/[projectType]/form/[viewId]/index/survey.vue b/packages/nc-gui/pages/[projectType]/form/[viewId]/index/survey.vue
index 47667c04ab..27d2f26c60 100644
--- a/packages/nc-gui/pages/[projectType]/form/[viewId]/index/survey.vue
+++ b/packages/nc-gui/pages/[projectType]/form/[viewId]/index/survey.vue
@@ -1,6 +1,15 @@
 <script lang="ts" setup>
 import { RelationTypes, UITypes, isVirtualCol } from 'nocodb-sdk'
-import { computed, onKeyStroke, ref, useEventListener, useSharedFormStoreOrThrow, useStepper } from '#imports'
+import {
+  DropZoneRef,
+  computed,
+  onKeyStroke,
+  provide,
+  ref,
+  useEventListener,
+  useSharedFormStoreOrThrow,
+  useStepper,
+} from '#imports'
 
 const { v$, formState, formColumns, submitForm, submitted, secondsRemain, sharedFormView } = useSharedFormStoreOrThrow()
 
@@ -36,6 +45,8 @@ const field = computed(() => formColumns.value?.[index.value])
 
 const el = ref<HTMLDivElement>()
 
+provide(DropZoneRef, el)
+
 const transition = (direction: 'left' | 'right') => {
   isTransitioning.value = true
   transitionName.value = direction
@@ -101,7 +112,7 @@ onKeyStroke(['ArrowRight', 'ArrowUp', 'Enter', 'Space'], goNext)
       <div
         ref="el"
         :key="field.title"
-        class="bg-white flex flex-col justify-center gap-4 w-full lg:max-w-1/2 max-w-500px m-auto px-8 pt-8 pb-4 md:(rounded-lg border-1 border-gray-200 shadow-xl)"
+        class="bg-white flex flex-col justify-center gap-4 w-full max-w-[max(33%,600px)] m-auto px-8 pt-8 pb-4 md:(rounded-lg border-1 border-gray-200 shadow-xl)"
       >
         <div v-if="field && !submitted" class="flex flex-col gap-2">
           <div class="flex nc-form-column-label">

From e733be1a5c7d937c6af09d8e47a4dd5d8606e35e Mon Sep 17 00:00:00 2001
From: braks <78412429+bcakmakoglu@users.noreply.github.com>
Date: Thu, 15 Sep 2022 22:33:19 +0200
Subject: [PATCH 34/82] refactor(nc-gui): move Powered by into separate
 component

---
 .../nc-gui/components/general/PoweredBy.vue     | 17 +++++++++++++++++
 .../pages/[projectType]/form/[viewId]/index.vue | 12 +-----------
 2 files changed, 18 insertions(+), 11 deletions(-)
 create mode 100644 packages/nc-gui/components/general/PoweredBy.vue

diff --git a/packages/nc-gui/components/general/PoweredBy.vue b/packages/nc-gui/components/general/PoweredBy.vue
new file mode 100644
index 0000000000..cb33d0a5c4
--- /dev/null
+++ b/packages/nc-gui/components/general/PoweredBy.vue
@@ -0,0 +1,17 @@
+<script lang="ts" setup>
+import { openLink } from '#imports'
+</script>
+
+<template>
+  <button
+    type="button"
+    class="cursor-pointer self-end text-xs text-gray-400 hover:text-primary mx-auto my-4 flex justify-center gap-2 items-center"
+    @click="openLink('https://github.com/nocodb/nocodb')"
+  >
+    <span class="bg-primary bg-opacity-100 rounded">
+      <img width="32" height="32" alt="NocoDB" src="~/assets/img/icons/512x512-trans.png" />
+    </span>
+
+    Powered by NocoDB
+  </button>
+</template>
diff --git a/packages/nc-gui/pages/[projectType]/form/[viewId]/index.vue b/packages/nc-gui/pages/[projectType]/form/[viewId]/index.vue
index f752e8b06e..c708938abe 100644
--- a/packages/nc-gui/pages/[projectType]/form/[viewId]/index.vue
+++ b/packages/nc-gui/pages/[projectType]/form/[viewId]/index.vue
@@ -27,17 +27,7 @@ watch(
   <div class="nc-form-view relative md:bg-primary bg-opacity-5 h-full min-h-[600px] flex flex-col justify-center items-center nc-form-signin">
     <NuxtPage />
 
-    <button
-      type="button"
-      class="cursor-pointer self-end text-xs text-gray-400 hover:text-primary mx-auto my-4 flex justify-center gap-2 items-center"
-      @click="openLink('https://github.com/nocodb/nocodb')"
-    >
-      <span class="bg-primary bg-opacity-100 rounded">
-        <img width="32" height="32" alt="NocoDB" src="~/assets/img/icons/512x512-trans.png" />
-      </span>
-
-      Powered by NocoDB
-    </button>
+    <GeneralPoweredBy />
 
     <a-modal
       v-model:visible="passwordDlg"

From a31764d2b4660269a948d140c6df64c254206724 Mon Sep 17 00:00:00 2001
From: braks <78412429+bcakmakoglu@users.noreply.github.com>
Date: Thu, 15 Sep 2022 23:37:34 +0200
Subject: [PATCH 35/82] chore(nc-gui): lint files

---
 packages/nc-gui/pages/[projectType]/form/[viewId]/index.vue | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/packages/nc-gui/pages/[projectType]/form/[viewId]/index.vue b/packages/nc-gui/pages/[projectType]/form/[viewId]/index.vue
index c708938abe..f32010b5ba 100644
--- a/packages/nc-gui/pages/[projectType]/form/[viewId]/index.vue
+++ b/packages/nc-gui/pages/[projectType]/form/[viewId]/index.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { openLink, useRoute, useSharedFormStoreOrThrow, useTheme, watch } from '#imports'
+import { useRoute, useSharedFormStoreOrThrow, useTheme, watch } from '#imports'
 
 const { passwordDlg, password, loadSharedView } = useSharedFormStoreOrThrow()
 
@@ -29,6 +29,8 @@ watch(
 
     <GeneralPoweredBy />
 
+    <div class=""></div>
+
     <a-modal
       v-model:visible="passwordDlg"
       :closable="false"

From 34a0e707e7b1827ce7d1998e8e95e7b4638026c3 Mon Sep 17 00:00:00 2001
From: braks <78412429+bcakmakoglu@users.noreply.github.com>
Date: Fri, 16 Sep 2022 00:25:08 +0200
Subject: [PATCH 36/82] feat(nc-gui): dark mode for forms and survey pages

---
 .../[projectType]/form/[viewId]/index.vue     | 58 +++++++++++++------
 .../form/[viewId]/index/index.vue             | 12 ++--
 .../form/[viewId]/index/survey.vue            | 14 ++---
 3 files changed, 54 insertions(+), 30 deletions(-)

diff --git a/packages/nc-gui/pages/[projectType]/form/[viewId]/index.vue b/packages/nc-gui/pages/[projectType]/form/[viewId]/index.vue
index f32010b5ba..f2bf013888 100644
--- a/packages/nc-gui/pages/[projectType]/form/[viewId]/index.vue
+++ b/packages/nc-gui/pages/[projectType]/form/[viewId]/index.vue
@@ -1,10 +1,12 @@
 <script setup lang="ts">
-import { useRoute, useSharedFormStoreOrThrow, useTheme, watch } from '#imports'
+import { useDark, useRoute, useSharedFormStoreOrThrow, useTheme, watch } from '#imports'
 
 const { passwordDlg, password, loadSharedView } = useSharedFormStoreOrThrow()
 
 const route = useRoute()
 
+const isDark = useDark()
+
 const { setTheme } = useTheme()
 
 watch(
@@ -21,15 +23,29 @@ watch(
   },
   { immediate: true },
 )
+
+const onClick = () => {
+  isDark.value = !isDark.value
+}
 </script>
 
 <template>
-  <div class="nc-form-view relative md:bg-primary bg-opacity-5 h-full min-h-[600px] flex flex-col justify-center items-center nc-form-signin">
+  <div
+    class="color-transition nc-form-view relative md:bg-primary bg-opacity-10 dark:(bg-slate-900) h-full min-h-[600px] flex flex-col justify-center items-center nc-form-signin"
+  >
     <NuxtPage />
 
     <GeneralPoweredBy />
 
-    <div class=""></div>
+    <div
+      class="flex items-center justify-center cursor-pointer absolute top-15 right-15 rounded-full p-2 bg-white dark:(bg-slate-600) shadow hover:(ring-1 ring-accent ring-opacity-100)"
+      @click="onClick"
+    >
+      <Transition name="slide-left" duration="250" mode="out-in">
+        <MaterialSymbolsDarkModeOutline v-if="isDark" />
+        <MaterialSymbolsLightModeOutline v-else />
+      </Transition>
+    </div>
 
     <a-modal
       v-model:visible="passwordDlg"
@@ -58,27 +74,33 @@ watch(
 </template>
 
 <style lang="scss">
+html,
+body,
+h1,
+h2,
+h3,
+h4,
+h5,
+h6,
+p {
+  @apply dark:text-white color-transition;
+}
+
 .nc-form-view {
   .nc-input {
-    @apply w-full rounded p-2 min-h-[40px] flex items-center border-solid border-1 border-primary;
-  }
-
-  .submit {
-    @apply z-1 relative color-transition rounded p-3 text-white shadow-sm;
+    @apply w-full rounded p-2 min-h-[40px] flex items-center border-solid border-1 border-primary dark:border-slate-200;
 
-    &::after {
-      @apply rounded absolute top-0 left-0 right-0 bottom-0 transition-all duration-150 ease-in-out bg-primary;
-      content: '';
-      z-index: -1;
+    input {
+      @apply dark:(bg-slate-300 text-slate-900);
     }
+  }
+}
 
-    &:hover::after {
-      @apply transform scale-110 ring ring-accent;
-    }
+.nc-cell {
+  @apply dark:bg-slate-300;
 
-    &:active::after {
-      @apply ring ring-accent;
-    }
+  .nc-attachment-cell > div {
+    @apply dark:(bg-slate-100);
   }
 }
 </style>
diff --git a/packages/nc-gui/pages/[projectType]/form/[viewId]/index/index.vue b/packages/nc-gui/pages/[projectType]/form/[viewId]/index/index.vue
index 99c092d74a..f6d299761a 100644
--- a/packages/nc-gui/pages/[projectType]/form/[viewId]/index/index.vue
+++ b/packages/nc-gui/pages/[projectType]/form/[viewId]/index/index.vue
@@ -21,12 +21,14 @@ function isRequired(_columnObj: Record<string, any>, required = false) {
 
 <template>
   <div
-    class="bg-white relative flex flex-col justify-center gap-2 w-full max-w-[max(33%,600px)] m-auto py-4 pb-8 px-16 md:(rounded-lg border-1 border-gray-200 shadow-xl)"
+    class="color-transition bg-white dark:bg-slate-700 relative flex flex-col justify-center gap-2 w-full max-w-[max(33%,600px)] m-auto py-4 pb-8 px-16 md:(rounded-lg border-1 border-gray-200 shadow-xl)"
   >
     <template v-if="sharedFormView">
       <h1 class="prose-2xl font-bold self-center my-4">{{ sharedFormView.heading }}</h1>
 
-      <h2 v-if="sharedFormView.subheading" class="prose-lg text-gray-500 self-center">{{ sharedFormView.subheading }}</h2>
+      <h2 v-if="sharedFormView.subheading" class="prose-lg text-slate-500 dark:text-slate-300 self-center">
+        {{ sharedFormView.subheading }}
+      </h2>
 
       <a-alert v-if="notFound" type="warning" class="my-4 text-center" message="Not found" />
 
@@ -40,7 +42,7 @@ function isRequired(_columnObj: Record<string, any>, required = false) {
               :message="sharedFormView.success_msg || 'Successfully submitted form data'"
             />
 
-            <p v-if="sharedFormView.show_blank_form" class="text-xs text-gray-500 text-center my-4">
+            <p v-if="sharedFormView.show_blank_form" class="text-xs text-slate-500 dark:text-slate-300 text-center my-4">
               New form will be loaded after {{ secondsRemain }} seconds
             </p>
 
@@ -95,7 +97,7 @@ function isRequired(_columnObj: Record<string, any>, required = false) {
                     :edit-enabled="true"
                   />
 
-                  <div class="flex flex-col gap-2 text-gray-500 text-[0.75rem] my-2 px-1">
+                  <div class="flex flex-col gap-2 text-slate-500 dark:text-slate-300 text-[0.75rem] my-2 px-1">
                     <div v-for="error of v$.localState[field.title].$errors" :key="error" class="text-red-500">
                       {{ error.$message }}
                     </div>
@@ -107,7 +109,7 @@ function isRequired(_columnObj: Record<string, any>, required = false) {
             </div>
 
             <div class="text-center mt-4">
-              <button type="submit" class="submit" @click="submitForm">
+              <button type="submit" class="scaling-btn prose-sm" @click="submitForm">
                 {{ $t('general.submit') }}
               </button>
             </div>
diff --git a/packages/nc-gui/pages/[projectType]/form/[viewId]/index/survey.vue b/packages/nc-gui/pages/[projectType]/form/[viewId]/index/survey.vue
index 27d2f26c60..ae9e84c36a 100644
--- a/packages/nc-gui/pages/[projectType]/form/[viewId]/index/survey.vue
+++ b/packages/nc-gui/pages/[projectType]/form/[viewId]/index/survey.vue
@@ -112,7 +112,7 @@ onKeyStroke(['ArrowRight', 'ArrowUp', 'Enter', 'Space'], goNext)
       <div
         ref="el"
         :key="field.title"
-        class="bg-white flex flex-col justify-center gap-4 w-full max-w-[max(33%,600px)] m-auto px-8 pt-8 pb-4 md:(rounded-lg border-1 border-gray-200 shadow-xl)"
+        class="color-transition bg-white dark:bg-slate-700 flex flex-col justify-center gap-4 w-full max-w-[max(33%,600px)] m-auto px-8 pt-8 pb-4 md:(rounded-lg border-1 border-gray-200 shadow-xl)"
       >
         <div v-if="field && !submitted" class="flex flex-col gap-2">
           <div class="flex nc-form-column-label">
@@ -148,7 +148,7 @@ onKeyStroke(['ArrowRight', 'ArrowUp', 'Enter', 'Space'], goNext)
               :edit-enabled="true"
             />
 
-            <div class="flex flex-col gap-2 text-gray-500 text-[0.75rem] my-2 px-1">
+            <div class="flex flex-col gap-2 text-slate-500 dark:text-slate-300 text-[0.75rem] my-2 px-1">
               <div v-for="error of v$.localState[field.title].$errors" :key="error" class="text-red-500">
                 {{ error.$message }}
               </div>
@@ -170,7 +170,7 @@ onKeyStroke(['ArrowRight', 'ArrowUp', 'Enter', 'Space'], goNext)
 
           <div class="flex-1">
             <div v-if="isLast && !submitted && !v$.$invalid" class="text-center my-4">
-              <button type="submit" class="submit !px-4 !py-2 prose-sm" @click="submitForm">
+              <button type="submit" class="scaling-btn prose-sm" @click="submitForm">
                 {{ $t('general.submit') }}
               </button>
             </div>
@@ -204,7 +204,7 @@ onKeyStroke(['ArrowRight', 'ArrowUp', 'Enter', 'Space'], goNext)
                 :message="sharedFormView.success_msg || 'Successfully submitted form data'"
               />
 
-              <p v-if="sharedFormView?.show_blank_form" class="text-xs text-gray-500 text-center my-4">
+              <p v-if="sharedFormView?.show_blank_form" class="text-xs text-slate-500 dark:text-slate-300 text-center my-4">
                 New form will be loaded after {{ secondsRemain }} seconds
               </p>
 
@@ -225,14 +225,14 @@ onKeyStroke(['ArrowRight', 'ArrowUp', 'Enter', 'Space'], goNext)
   </div>
 </template>
 
-<style lang="scss" scoped>
+<style lang="scss">
 :global(html, body) {
   @apply overscroll-x-none;
 }
 
-:deep(.nc-form-column-label) {
+.nc-form-column-label {
   > * {
-    @apply !prose-lg;
+    @apply !prose-lg dark:text-slate-300;
   }
 
   .nc-icon {

From 46147cca70f1072dc7d8143f6dd2e3ace29a9274 Mon Sep 17 00:00:00 2001
From: braks <78412429+bcakmakoglu@users.noreply.github.com>
Date: Fri, 16 Sep 2022 00:33:10 +0200
Subject: [PATCH 37/82] chore(nc-gui): styles

---
 .../components/cell/attachment/index.vue      | 19 +++++++++++-----
 .../nc-gui/components/general/PoweredBy.vue   |  4 ++--
 .../nc-gui/components/smartsheet/Form.vue     | 12 +++++-----
 .../[projectType]/form/[viewId]/index.vue     | 22 ++++++++++++++-----
 .../form/[viewId]/index/index.vue             |  2 +-
 .../form/[viewId]/index/survey.vue            | 20 ++++++++++++-----
 6 files changed, 53 insertions(+), 26 deletions(-)

diff --git a/packages/nc-gui/components/cell/attachment/index.vue b/packages/nc-gui/components/cell/attachment/index.vue
index f39061a5da..2cac0fcc29 100644
--- a/packages/nc-gui/components/cell/attachment/index.vue
+++ b/packages/nc-gui/components/cell/attachment/index.vue
@@ -156,7 +156,7 @@ watch(
     <div
       v-if="!isReadonly"
       :class="{ 'mx-auto px-4': !visibleItems.length }"
-      class="group cursor-pointer flex gap-1 items-center active:ring rounded border-1 p-1 hover:(bg-primary bg-opacity-10)"
+      class="group cursor-pointer flex gap-1 items-center active:(ring ring-accent ring-opacity-100) rounded border-1 p-1 shadow-sm hover:(bg-primary bg-opacity-10) dark:(!bg-slate-500)"
       @click.stop="open"
     >
       <MdiReload v-if="isLoading" :class="{ 'animate-infinite animate-spin': isLoading }" />
@@ -165,9 +165,16 @@ watch(
         <template #title> Click or drop a file into cell </template>
 
         <div class="flex items-center gap-2">
-          <MaterialSymbolsAttachFile class="transform group-hover:(text-accent scale-120) text-gray-500 text-[10px]" />
+          <MaterialSymbolsAttachFile
+            class="transform dark:(!text-white) group-hover:(!text-accent scale-120) text-gray-500 text-[0.75rem]"
+          />
 
-          <div v-if="!visibleItems.length" class="group-hover:text-primary text-gray-500 text-xs">Add file(s)</div>
+          <div
+            v-if="!visibleItems.length"
+            class="group-hover:text-primary text-gray-500 dark:text-gray-200 dark:group-hover:!text-white text-xs"
+          >
+            Add file(s)
+          </div>
         </div>
       </a-tooltip>
     </div>
@@ -208,14 +215,16 @@ watch(
         </template>
       </div>
 
-      <div class="group cursor-pointer flex gap-1 items-center border-1 active:ring rounded p-1 hover:(bg-primary bg-opacity-10)">
+      <div
+        class="group cursor-pointer flex gap-1 items-center active:(ring ring-accent ring-opacity-100) rounded border-1 p-1 shadow-sm hover:(bg-primary bg-opacity-10) dark:(!bg-slate-500)"
+      >
         <MdiReload v-if="isLoading" :class="{ 'animate-infinite animate-spin': isLoading }" />
 
         <a-tooltip v-else placement="bottom">
           <template #title> View attachments </template>
 
           <MdiArrowExpand
-            class="select-none transform group-hover:(text-accent scale-120) text-[10px] text-gray-500"
+            class="transform dark:(!text-white) group-hover:(!text-accent scale-120) text-gray-500 text-[0.75rem]"
             @click.stop="modalVisible = true"
           />
         </a-tooltip>
diff --git a/packages/nc-gui/components/general/PoweredBy.vue b/packages/nc-gui/components/general/PoweredBy.vue
index cb33d0a5c4..295301a7e6 100644
--- a/packages/nc-gui/components/general/PoweredBy.vue
+++ b/packages/nc-gui/components/general/PoweredBy.vue
@@ -5,13 +5,13 @@ import { openLink } from '#imports'
 <template>
   <button
     type="button"
-    class="cursor-pointer self-end text-xs text-gray-400 hover:text-primary mx-auto my-4 flex justify-center gap-2 items-center"
+    class="cursor-pointer group text-xs text-slate-500 hover:text-primary dark:hover:text-white dark:text-slate-300 mx-auto my-4 flex justify-center gap-2 items-center"
     @click="openLink('https://github.com/nocodb/nocodb')"
   >
     <span class="bg-primary bg-opacity-100 rounded">
       <img width="32" height="32" alt="NocoDB" src="~/assets/img/icons/512x512-trans.png" />
     </span>
 
-    Powered by NocoDB
+    <span class="color-transition transform group-hover:(scale-103)">Powered by NocoDB</span>
   </button>
 </template>
diff --git a/packages/nc-gui/components/smartsheet/Form.vue b/packages/nc-gui/components/smartsheet/Form.vue
index 58423ec3b7..8dbe62d58b 100644
--- a/packages/nc-gui/components/smartsheet/Form.vue
+++ b/packages/nc-gui/components/smartsheet/Form.vue
@@ -413,8 +413,7 @@ watch(view, (nextView) => {
           <button
             v-if="hiddenColumns.length"
             type="button"
-            class="nc-form-add-all color-transition hover:text-primary"
-            style="border-bottom: 2px solid rgb(218, 218, 218)"
+            class="nc-form-add-all color-transition bg-white transform hover:(text-primary bg-primary bg-opacity-5 ring ring-accent ring-opacity-100) active:translate-y-[1px] px-2 py-1 border-b-2 border-slate-300 shadow-sm rounded"
             @click="addAllColumns"
           >
             <!-- Add all -->
@@ -424,8 +423,7 @@ watch(view, (nextView) => {
           <button
             v-if="localColumns.length"
             type="button"
-            class="nc-form-remove-all color-transition hover:text-primary"
-            style="border-bottom: 2px solid rgb(218, 218, 218)"
+            class="nc-form-remove-all color-transition bg-white transform hover:(text-primary bg-primary bg-opacity-5 ring ring-accent ring-opacity-100) active:translate-y-[1px] px-2 py-1 border-b-2 border-slate-300 shadow-sm rounded"
             @click="removeAllColumns"
           >
             <!-- Remove all -->
@@ -519,7 +517,7 @@ watch(view, (nextView) => {
         }"
       >
         <a-form ref="formRef" :model="formState" class="nc-form" no-style>
-          <a-card class="!rounded !shadow !m-2 md:!m-4 xl:!m-8 py-8" :body-style="{ paddingLeft: '0px', paddingRight: '0px' }">
+          <a-card class="!rounded !shadow !m-2 md:!m-4 xl:!m-8" :body-style="{ paddingLeft: '0px', paddingRight: '0px' }">
             <!-- Header -->
             <div v-if="isEditable" class="px-4">
               <a-form-item v-if="isEditable">
@@ -700,9 +698,9 @@ watch(view, (nextView) => {
             </Draggable>
 
             <div class="justify-center flex mt-6">
-              <a-button type="primary" class="flex items-center gap-2 nc-form-submit" size="large" @click="submitForm">
+              <button type="submit" class="scaling-btn nc-form-submit" @click="submitForm">
                 {{ $t('general.submit') }}
-              </a-button>
+              </button>
             </div>
           </a-card>
         </a-form>
diff --git a/packages/nc-gui/pages/[projectType]/form/[viewId]/index.vue b/packages/nc-gui/pages/[projectType]/form/[viewId]/index.vue
index f2bf013888..ba8847962c 100644
--- a/packages/nc-gui/pages/[projectType]/form/[viewId]/index.vue
+++ b/packages/nc-gui/pages/[projectType]/form/[viewId]/index.vue
@@ -31,11 +31,13 @@ const onClick = () => {
 
 <template>
   <div
-    class="color-transition nc-form-view relative md:bg-primary bg-opacity-10 dark:(bg-slate-900) h-full min-h-[600px] flex flex-col justify-center items-center nc-form-signin"
+    class="overflow-y-auto overflow-x-hidden flex flex-wrap color-transition nc-form-view relative md:bg-primary bg-opacity-10 dark:(bg-slate-900) h-full min-h-[600px] pt-12"
   >
     <NuxtPage />
 
-    <GeneralPoweredBy />
+    <div class="flex w-full items-end mt-12">
+      <GeneralPoweredBy />
+    </div>
 
     <div
       class="flex items-center justify-center cursor-pointer absolute top-15 right-15 rounded-full p-2 bg-white dark:(bg-slate-600) shadow hover:(ring-1 ring-accent ring-opacity-100)"
@@ -90,14 +92,24 @@ p {
   .nc-input {
     @apply w-full rounded p-2 min-h-[40px] flex items-center border-solid border-1 border-primary dark:border-slate-200;
 
-    input {
-      @apply dark:(bg-slate-300 text-slate-900);
+    input,
+    &.nc-virtual-cell,
+    > div {
+      @apply dark:(bg-slate-400 text-slate-900);
+
+      .nc-icon {
+        @apply dark:text-slate-900;
+      }
+
+      .chip {
+        @apply dark:(bg-slate-700 text-white);
+      }
     }
   }
 }
 
 .nc-cell {
-  @apply dark:bg-slate-300;
+  @apply dark:bg-slate-400;
 
   .nc-attachment-cell > div {
     @apply dark:(bg-slate-100);
diff --git a/packages/nc-gui/pages/[projectType]/form/[viewId]/index/index.vue b/packages/nc-gui/pages/[projectType]/form/[viewId]/index/index.vue
index f6d299761a..e116cd3313 100644
--- a/packages/nc-gui/pages/[projectType]/form/[viewId]/index/index.vue
+++ b/packages/nc-gui/pages/[projectType]/form/[viewId]/index/index.vue
@@ -98,7 +98,7 @@ function isRequired(_columnObj: Record<string, any>, required = false) {
                   />
 
                   <div class="flex flex-col gap-2 text-slate-500 dark:text-slate-300 text-[0.75rem] my-2 px-1">
-                    <div v-for="error of v$.localState[field.title].$errors" :key="error" class="text-red-500">
+                    <div v-for="error of v$.localState[field.title]?.$errors" :key="error" class="text-red-500">
                       {{ error.$message }}
                     </div>
 
diff --git a/packages/nc-gui/pages/[projectType]/form/[viewId]/index/survey.vue b/packages/nc-gui/pages/[projectType]/form/[viewId]/index/survey.vue
index ae9e84c36a..ba9a7ebf4d 100644
--- a/packages/nc-gui/pages/[projectType]/form/[viewId]/index/survey.vue
+++ b/packages/nc-gui/pages/[projectType]/form/[viewId]/index/survey.vue
@@ -35,7 +35,7 @@ const steps = computed(() => {
   }, [] as string[])
 })
 
-const { index, goToPrevious, goToNext, isFirst, isLast, steps: _steps } = useStepper(steps)
+const { index, goToPrevious, goToNext, isFirst, isLast } = useStepper(steps)
 
 const isTransitioning = ref(false)
 
@@ -63,8 +63,14 @@ const transition = (direction: 'left' | 'right') => {
 const goNext = async () => {
   if (isLast.value) return
 
-  const isValid = await v$.value.localState[field.value!.title!].$validate()
-  if (!isValid) return
+  if (!field.value || !field.value.title) return
+
+  const validationField = v$.value.localState[field.value.title]
+
+  if (validationField) {
+    const isValid = await validationField.$validate()
+    if (!isValid) return
+  }
 
   transition('left')
 
@@ -99,13 +105,15 @@ onKeyStroke(['ArrowRight', 'ArrowUp', 'Enter', 'Space'], goNext)
 </script>
 
 <template>
-  <div class="w-full h-full flex flex-col justify-center items-center">
+  <div class="w-full flex flex-auto flex-col justify-center items-center">
     <template v-if="sharedFormView">
       <div class="flex-1" />
 
       <h1 class="prose-2xl font-bold self-center my-4">{{ sharedFormView.heading }}</h1>
 
-      <h2 v-if="sharedFormView.subheading" class="prose-lg text-gray-500 self-center">{{ sharedFormView.subheading }}</h2>
+      <h2 class="prose-lg text-slate-500 dark:text-slate-300 self-center mb-4">
+        {{ sharedFormView.subheading }}
+      </h2>
     </template>
 
     <Transition :name="`slide-${transitionName}`" mode="out-in">
@@ -149,7 +157,7 @@ onKeyStroke(['ArrowRight', 'ArrowUp', 'Enter', 'Space'], goNext)
             />
 
             <div class="flex flex-col gap-2 text-slate-500 dark:text-slate-300 text-[0.75rem] my-2 px-1">
-              <div v-for="error of v$.localState[field.title].$errors" :key="error" class="text-red-500">
+              <div v-for="error of v$.localState[field.title]?.$errors" :key="error" class="text-red-500">
                 {{ error.$message }}
               </div>
 

From 9c9d36363090922e99e104e60fcf199f8347b91f Mon Sep 17 00:00:00 2001
From: braks <78412429+bcakmakoglu@users.noreply.github.com>
Date: Sun, 18 Sep 2022 01:03:12 +0200
Subject: [PATCH 38/82] feat(nc-gui): add min heights to prevent title from
 jumping

---
 .../[projectType]/form/[viewId]/index.vue     |   2 +-
 .../form/[viewId]/index/index.vue             |   2 +-
 .../form/[viewId]/index/survey.vue            | 210 +++++++++---------
 3 files changed, 107 insertions(+), 107 deletions(-)

diff --git a/packages/nc-gui/pages/[projectType]/form/[viewId]/index.vue b/packages/nc-gui/pages/[projectType]/form/[viewId]/index.vue
index ba8847962c..7dbc818b37 100644
--- a/packages/nc-gui/pages/[projectType]/form/[viewId]/index.vue
+++ b/packages/nc-gui/pages/[projectType]/form/[viewId]/index.vue
@@ -31,7 +31,7 @@ const onClick = () => {
 
 <template>
   <div
-    class="overflow-y-auto overflow-x-hidden flex flex-wrap color-transition nc-form-view relative md:bg-primary bg-opacity-10 dark:(bg-slate-900) h-full min-h-[600px] pt-12"
+    class="overflow-y-auto overflow-x-hidden flex flex-wrap color-transition nc-form-view relative md:bg-primary bg-opacity-10 dark:(bg-slate-900) h-full min-h-[600px]"
   >
     <NuxtPage />
 
diff --git a/packages/nc-gui/pages/[projectType]/form/[viewId]/index/index.vue b/packages/nc-gui/pages/[projectType]/form/[viewId]/index/index.vue
index e116cd3313..75aecb79dd 100644
--- a/packages/nc-gui/pages/[projectType]/form/[viewId]/index/index.vue
+++ b/packages/nc-gui/pages/[projectType]/form/[viewId]/index/index.vue
@@ -21,7 +21,7 @@ function isRequired(_columnObj: Record<string, any>, required = false) {
 
 <template>
   <div
-    class="color-transition bg-white dark:bg-slate-700 relative flex flex-col justify-center gap-2 w-full max-w-[max(33%,600px)] m-auto py-4 pb-8 px-16 md:(rounded-lg border-1 border-gray-200 shadow-xl)"
+    class="color-transition bg-white dark:bg-slate-700 relative flex flex-col justify-center gap-2 w-full max-w-[max(33%,600px)] m-auto py-4 pb-8 px-16 md:(rounded-lg border-1 border-gray-200 shadow-xl) mt-12"
   >
     <template v-if="sharedFormView">
       <h1 class="prose-2xl font-bold self-center my-4">{{ sharedFormView.heading }}</h1>
diff --git a/packages/nc-gui/pages/[projectType]/form/[viewId]/index/survey.vue b/packages/nc-gui/pages/[projectType]/form/[viewId]/index/survey.vue
index ba9a7ebf4d..bf05d3859e 100644
--- a/packages/nc-gui/pages/[projectType]/form/[viewId]/index/survey.vue
+++ b/packages/nc-gui/pages/[projectType]/form/[viewId]/index/survey.vue
@@ -105,127 +105,127 @@ onKeyStroke(['ArrowRight', 'ArrowUp', 'Enter', 'Space'], goNext)
 </script>
 
 <template>
-  <div class="w-full flex flex-auto flex-col justify-center items-center">
+  <div class="w-full min-h-2/3 flex flex-auto flex-col justify-center items-center">
     <template v-if="sharedFormView">
-      <div class="flex-1" />
+      <div class="min-h-1 h-1/3 w-full flex flex-col justify-end">
+        <h1 class="prose-2xl font-bold self-center my-4">{{ sharedFormView.heading }}</h1>
 
-      <h1 class="prose-2xl font-bold self-center my-4">{{ sharedFormView.heading }}</h1>
-
-      <h2 class="prose-lg text-slate-500 dark:text-slate-300 self-center mb-4">
-        {{ sharedFormView.subheading }}
-      </h2>
+        <h2 class="prose-lg text-slate-500 dark:text-slate-300 self-center mb-4">
+          {{ sharedFormView.subheading }}
+        </h2>
+      </div>
     </template>
 
-    <Transition :name="`slide-${transitionName}`" mode="out-in">
-      <div
-        ref="el"
-        :key="field.title"
-        class="color-transition bg-white dark:bg-slate-700 flex flex-col justify-center gap-4 w-full max-w-[max(33%,600px)] m-auto px-8 pt-8 pb-4 md:(rounded-lg border-1 border-gray-200 shadow-xl)"
-      >
-        <div v-if="field && !submitted" class="flex flex-col gap-2">
-          <div class="flex nc-form-column-label">
-            <SmartsheetHeaderVirtualCell
-              v-if="isVirtualCol(field)"
-              :column="{ ...field, title: field.label || field.title }"
-              :required="isRequired(field, field.required)"
-              :hide-menu="true"
-            />
-
-            <SmartsheetHeaderCell
-              v-else
-              :column="{ ...field, title: field.label || field.title }"
-              :required="isRequired(field, field.required)"
-              :hide-menu="true"
-            />
-          </div>
-
-          <div>
-            <SmartsheetVirtualCell
-              v-if="isVirtualCol(field)"
-              class="mt-0 nc-input"
-              :class="`nc-form-input-${field.title.replaceAll(' ', '')}`"
-              :column="field"
-            />
-
-            <SmartsheetCell
-              v-else
-              v-model="formState[field.title]"
-              class="nc-input"
-              :class="`nc-form-input-${field.title.replaceAll(' ', '')}`"
-              :column="field"
-              :edit-enabled="true"
-            />
-
-            <div class="flex flex-col gap-2 text-slate-500 dark:text-slate-300 text-[0.75rem] my-2 px-1">
-              <div v-for="error of v$.localState[field.title]?.$errors" :key="error" class="text-red-500">
-                {{ error.$message }}
-              </div>
+    <div class="h-1/2 w-full">
+      <Transition :name="`slide-${transitionName}`" mode="out-in">
+        <div
+          ref="el"
+          :key="field.title"
+          class="color-transition bg-white dark:bg-slate-700 flex flex-col justify-center gap-4 w-full max-w-[max(33%,600px)] m-auto px-8 pt-8 pb-4 md:(rounded-lg border-1 border-gray-200 shadow-xl)"
+        >
+          <div v-if="field && !submitted" class="flex flex-col gap-2">
+            <div class="flex nc-form-column-label">
+              <SmartsheetHeaderVirtualCell
+                v-if="isVirtualCol(field)"
+                :column="{ ...field, title: field.label || field.title }"
+                :required="isRequired(field, field.required)"
+                :hide-menu="true"
+              />
 
-              {{ field.description }}
+              <SmartsheetHeaderCell
+                v-else
+                :column="{ ...field, title: field.label || field.title }"
+                :required="isRequired(field, field.required)"
+                :hide-menu="true"
+              />
             </div>
-          </div>
-        </div>
 
-        <div v-if="(!isFirst || !isLast) && !submitted" class="flex w-full text-lg mt-2">
-          <a-tooltip v-if="!isFirst" title="Go to previous" :mouse-enter-delay="1" :mouse-leave-delay="0">
-            <button
-              class="group color-transition transform hover:scale-110 absolute left-5 top-1/2 md:static"
-              @click="goPrevious"
-            >
-              <MdiChevronLeft class="group-hover:text-accent text-2xl md:text-md" />
-            </button>
-          </a-tooltip>
-
-          <div class="flex-1">
-            <div v-if="isLast && !submitted && !v$.$invalid" class="text-center my-4">
-              <button type="submit" class="scaling-btn prose-sm" @click="submitForm">
-                {{ $t('general.submit') }}
-              </button>
-            </div>
-          </div>
+            <div>
+              <SmartsheetVirtualCell
+                v-if="isVirtualCol(field)"
+                class="mt-0 nc-input"
+                :class="`nc-form-input-${field.title.replaceAll(' ', '')}`"
+                :column="field"
+              />
 
-          <a-tooltip
-            v-if="!isLast"
-            placement="left"
-            :title="v$.localState[field.title]?.$error ? v$.localState[field.title].$errors[0].$message : 'Go to next'"
-            :mouse-enter-delay="v$.localState[field.title]?.$error ? 0 : 1"
-            :mouse-leave-delay="0"
-          >
-            <button class="group color-transition transform absolute right-5 top-1/2 md:static hover:scale-110" @click="goNext">
-              <TransitionGroup name="layout">
-                <MdiCloseCircleOutline v-if="v$.localState[field.title]?.$error" class="text-red-500 text-2xl md:text-md" />
-                <MdiChevronRight v-else class="group-hover:text-accent text-2xl md:text-md" />
-              </TransitionGroup>
-            </button>
-          </a-tooltip>
-        </div>
+              <SmartsheetCell
+                v-else
+                v-model="formState[field.title]"
+                class="nc-input"
+                :class="`nc-form-input-${field.title.replaceAll(' ', '')}`"
+                :column="field"
+                :edit-enabled="true"
+              />
 
-        <Transition name="layout">
-          <div v-if="submitted" class="flex flex-col justify-center text-center">
-            <h2 class="prose-xl mb-2">Thank you!</h2>
+              <div class="flex flex-col gap-2 text-slate-500 dark:text-slate-300 text-[0.75rem] my-2 px-1">
+                <div v-for="error of v$.localState[field.title]?.$errors" :key="error" class="text-red-500">
+                  {{ error.$message }}
+                </div>
 
-            <div v-if="sharedFormView" class="min-w-350px mt-3">
-              <a-alert
-                type="success"
-                class="my-4 text-center"
-                outlined
-                :message="sharedFormView.success_msg || 'Successfully submitted form data'"
-              />
+                {{ field.description }}
+              </div>
+            </div>
+          </div>
 
-              <p v-if="sharedFormView?.show_blank_form" class="text-xs text-slate-500 dark:text-slate-300 text-center my-4">
-                New form will be loaded after {{ secondsRemain }} seconds
-              </p>
+          <div v-if="(!isFirst || !isLast) && !submitted" class="flex w-full text-lg mt-2">
+            <a-tooltip v-if="!isFirst" title="Go to previous" :mouse-enter-delay="1" :mouse-leave-delay="0">
+              <button
+                class="group color-transition transform hover:scale-110 absolute left-1 top-1/2 md:static"
+                @click="goPrevious"
+              >
+                <MdiChevronLeft class="group-hover:text-accent text-2xl md:text-md" />
+              </button>
+            </a-tooltip>
 
-              <div v-if="sharedFormView?.submit_another_form" class="text-center">
-                <a-button type="primary" @click="submitted = false"> Submit Another Form</a-button>
+            <div class="flex-1">
+              <div v-if="isLast && !submitted && !v$.$invalid" class="text-center my-4">
+                <button type="submit" class="scaling-btn prose-sm" @click="submitForm">
+                  {{ $t('general.submit') }}
+                </button>
               </div>
             </div>
+
+            <a-tooltip
+              v-if="!isLast"
+              placement="left"
+              :title="v$.localState[field.title]?.$error ? v$.localState[field.title].$errors[0].$message : 'Go to next'"
+              :mouse-enter-delay="v$.localState[field.title]?.$error ? 0 : 1"
+              :mouse-leave-delay="0"
+            >
+              <button class="group color-transition transform absolute right-1 top-1/2 md:static hover:scale-110" @click="goNext">
+                <TransitionGroup name="layout">
+                  <MdiCloseCircleOutline v-if="v$.localState[field.title]?.$error" class="text-red-500 text-2xl md:text-md" />
+                  <MdiChevronRight v-else class="group-hover:text-accent text-2xl md:text-md" />
+                </TransitionGroup>
+              </button>
+            </a-tooltip>
           </div>
-        </Transition>
-      </div>
-    </Transition>
 
-    <div v-if="sharedFormView" class="flex-1" />
+          <Transition name="layout">
+            <div v-if="submitted" class="flex flex-col justify-center text-center">
+              <h2 class="prose-xl mb-2">Thank you!</h2>
+
+              <div v-if="sharedFormView" class="min-w-350px mt-3">
+                <a-alert
+                  type="success"
+                  class="my-4 text-center"
+                  outlined
+                  :message="sharedFormView.success_msg || 'Successfully submitted form data'"
+                />
+
+                <p v-if="sharedFormView?.show_blank_form" class="text-xs text-slate-500 dark:text-slate-300 text-center my-4">
+                  New form will be loaded after {{ secondsRemain }} seconds
+                </p>
+
+                <div v-if="sharedFormView?.submit_another_form" class="text-center">
+                  <a-button type="primary" @click="submitted = false"> Submit Another Form</a-button>
+                </div>
+              </div>
+            </div>
+          </Transition>
+        </div>
+      </Transition>
+    </div>
 
     <div class="absolute bottom-12 right-12 flex flex-col">
       <div>{{ index + 1 }} / {{ formColumns?.length }}</div>

From 0a05ad1e762854727a16bcfcf5388fbfad3a95c5 Mon Sep 17 00:00:00 2001
From: braks <78412429+bcakmakoglu@users.noreply.github.com>
Date: Sun, 18 Sep 2022 11:55:36 +0200
Subject: [PATCH 39/82] feat(nc-gui): add swipe page navigation to survey

---
 .../form/[viewId]/index/survey.vue            | 57 ++++++++++++-------
 1 file changed, 35 insertions(+), 22 deletions(-)

diff --git a/packages/nc-gui/pages/[projectType]/form/[viewId]/index/survey.vue b/packages/nc-gui/pages/[projectType]/form/[viewId]/index/survey.vue
index bf05d3859e..4259eb5dbc 100644
--- a/packages/nc-gui/pages/[projectType]/form/[viewId]/index/survey.vue
+++ b/packages/nc-gui/pages/[projectType]/form/[viewId]/index/survey.vue
@@ -1,30 +1,38 @@
 <script lang="ts" setup>
 import { RelationTypes, UITypes, isVirtualCol } from 'nocodb-sdk'
+import { SwipeDirection } from '@vueuse/core'
 import {
   DropZoneRef,
   computed,
   onKeyStroke,
   provide,
   ref,
-  useEventListener,
+  usePointerSwipe,
   useSharedFormStoreOrThrow,
   useStepper,
 } from '#imports'
 
 const { v$, formState, formColumns, submitForm, submitted, secondsRemain, sharedFormView } = useSharedFormStoreOrThrow()
 
-function isRequired(_columnObj: Record<string, any>, required = false) {
-  let columnObj = _columnObj
-  if (
-    columnObj.uidt === UITypes.LinkToAnotherRecord &&
-    columnObj.colOptions &&
-    columnObj.colOptions.type === RelationTypes.BELONGS_TO
-  ) {
-    columnObj = formColumns.value?.find((c) => c.id === columnObj.colOptions.fk_child_column_id) as Record<string, any>
-  }
+const isTransitioning = ref(false)
 
-  return !!(required || (columnObj && columnObj.rqd && !columnObj.cdf))
-}
+const transitionName = ref<'left' | 'right'>('left')
+
+const el = ref<HTMLDivElement>()
+
+const { direction } = usePointerSwipe(el, {
+  onSwipe: () => {
+    if (isTransitioning.value) return
+
+    if (direction.value === SwipeDirection.LEFT) {
+      goNext()
+    } else if (direction.value === SwipeDirection.RIGHT) {
+      goPrevious()
+    }
+  },
+})
+
+provide(DropZoneRef, el)
 
 const steps = computed(() => {
   if (!formColumns.value) return []
@@ -37,17 +45,22 @@ const steps = computed(() => {
 
 const { index, goToPrevious, goToNext, isFirst, isLast } = useStepper(steps)
 
-const isTransitioning = ref(false)
-
-const transitionName = ref<'left' | 'right'>('left')
-
 const field = computed(() => formColumns.value?.[index.value])
 
-const el = ref<HTMLDivElement>()
+function isRequired(_columnObj: Record<string, any>, required = false) {
+  let columnObj = _columnObj
+  if (
+    columnObj.uidt === UITypes.LinkToAnotherRecord &&
+    columnObj.colOptions &&
+    columnObj.colOptions.type === RelationTypes.BELONGS_TO
+  ) {
+    columnObj = formColumns.value?.find((c) => c.id === columnObj.colOptions.fk_child_column_id) as Record<string, any>
+  }
 
-provide(DropZoneRef, el)
+  return !!(required || (columnObj && columnObj.rqd && !columnObj.cdf))
+}
 
-const transition = (direction: 'left' | 'right') => {
+function transition(direction: 'left' | 'right') {
   isTransitioning.value = true
   transitionName.value = direction
 
@@ -60,7 +73,7 @@ const transition = (direction: 'left' | 'right') => {
   }, 1000)
 }
 
-const goNext = async () => {
+async function goNext() {
   if (isLast.value) return
 
   if (!field.value || !field.value.title) return
@@ -77,7 +90,7 @@ const goNext = async () => {
   goToNext()
 }
 
-const goPrevious = async () => {
+async function goPrevious() {
   if (isFirst.value) return
 
   transition('right')
@@ -105,7 +118,7 @@ onKeyStroke(['ArrowRight', 'ArrowUp', 'Enter', 'Space'], goNext)
 </script>
 
 <template>
-  <div class="w-full min-h-2/3 flex flex-auto flex-col justify-center items-center">
+  <div ref="el" class="w-full min-h-2/3 flex flex-auto flex-col justify-center items-center">
     <template v-if="sharedFormView">
       <div class="min-h-1 h-1/3 w-full flex flex-col justify-end">
         <h1 class="prose-2xl font-bold self-center my-4">{{ sharedFormView.heading }}</h1>

From 90372f280ab7f2c5357c48aca17194fbffff6b97 Mon Sep 17 00:00:00 2001
From: braks <78412429+bcakmakoglu@users.noreply.github.com>
Date: Sun, 18 Sep 2022 13:28:41 +0200
Subject: [PATCH 40/82] chore(nc-gui): cleanup

---
 .../nc-gui/components/general/PoweredBy.vue   |  8 +--
 .../nc-gui/components/smartsheet/Form.vue     | 22 ++++----
 .../[projectType]/form/[viewId]/index.vue     |  4 +-
 .../form/[viewId]/index/index.vue             |  8 +--
 .../form/[viewId]/index/survey.vue            | 55 ++++++++++++-------
 packages/nc-gui/pages/index/index.vue         |  2 +-
 6 files changed, 58 insertions(+), 41 deletions(-)

diff --git a/packages/nc-gui/components/general/PoweredBy.vue b/packages/nc-gui/components/general/PoweredBy.vue
index 295301a7e6..1e46e1b345 100644
--- a/packages/nc-gui/components/general/PoweredBy.vue
+++ b/packages/nc-gui/components/general/PoweredBy.vue
@@ -5,13 +5,13 @@ import { openLink } from '#imports'
 <template>
   <button
     type="button"
-    class="cursor-pointer group text-xs text-slate-500 hover:text-primary dark:hover:text-white dark:text-slate-300 mx-auto my-4 flex justify-center gap-2 items-center"
+    class="cursor-pointer group text-xs text-slate-500 hover:text-primary dark:hover:text-white dark:text-slate-300 mx-auto my-4 flex justify-center gap-1 items-center"
     @click="openLink('https://github.com/nocodb/nocodb')"
   >
-    <span class="bg-primary bg-opacity-100 rounded">
-      <img width="32" height="32" alt="NocoDB" src="~/assets/img/icons/512x512-trans.png" />
+    <span class="rounded">
+      <GeneralNocoIcon class="!relative !top-0" width="32" height="32" />
     </span>
 
-    <span class="color-transition transform group-hover:(scale-103)">Powered by NocoDB</span>
+    <span>Powered by NocoDB</span>
   </button>
 </template>
diff --git a/packages/nc-gui/components/smartsheet/Form.vue b/packages/nc-gui/components/smartsheet/Form.vue
index 8dbe62d58b..8a69da9853 100644
--- a/packages/nc-gui/components/smartsheet/Form.vue
+++ b/packages/nc-gui/components/smartsheet/Form.vue
@@ -392,9 +392,11 @@ watch(view, (nextView) => {
             <div class="text-center">{{ formViewData.success_msg || 'Successfully submitted form data' }}</div>
           </template>
         </a-alert>
+
         <div v-if="formViewData.show_blank_form" class="text-gray-400 mt-4">
           New form will be loaded after {{ secondsRemain }} seconds
         </div>
+
         <div v-if="formViewData.submit_another_form" class="text-center mt-4">
           <a-button type="primary" size="large" @click="submitted = false"> Submit Another Form</a-button>
         </div>
@@ -403,7 +405,7 @@ watch(view, (nextView) => {
   </a-row>
 
   <a-row v-else class="h-full flex">
-    <a-col v-if="isEditable" :span="8" class="shadow p-2 md:p-4 h-full overflow-auto scrollbar-thin-primary nc-form-left-drawer">
+    <a-col v-if="isEditable" :span="8" class="shadow p-2 md:p-4 h-full overflow-auto scrollbar-thin-dull nc-form-left-drawer">
       <div class="flex flex-wrap gap-2">
         <div class="flex-1 text-lg">
           {{ $t('objects.fields') }}
@@ -444,7 +446,7 @@ watch(view, (nextView) => {
         <template #item="{ element, index }">
           <a-card
             size="small"
-            class="cursor-pointer item hover:(bg-primary ring-1 ring-accent ring-opacity-100) bg-opacity-10 !rounded !shadow-lg"
+            class="!border-0 color-transition cursor-pointer item hover:(bg-primary ring-1 ring-accent ring-opacity-100) bg-opacity-10 !rounded !shadow-lg"
             @mousedown="moved = false"
             @mousemove="moved = false"
             @mouseup="handleMouseUp(element, index)"
@@ -489,7 +491,7 @@ watch(view, (nextView) => {
             </button>
 
             <template #overlay>
-              <LazySmartsheetColumnEditOrAddProvider
+              <SmartsheetColumnEditOrAddProvider
                 v-if="showColumnDropdown"
                 @submit="submitCallback"
                 @cancel="showColumnDropdown = false"
@@ -502,7 +504,7 @@ watch(view, (nextView) => {
       </Draggable>
     </a-col>
 
-    <a-col v-if="formViewData" :span="isEditable ? 16 : 24" class="h-full overflow-auto scrollbar-thin-primary">
+    <a-col v-if="formViewData" :span="isEditable ? 16 : 24" class="h-full overflow-auto scrollbar-thin-dull">
       <div class="h-[200px] bg-primary bg-opacity-75">
         <!-- for future implementation of cover image -->
       </div>
@@ -517,13 +519,13 @@ watch(view, (nextView) => {
         }"
       >
         <a-form ref="formRef" :model="formState" class="nc-form" no-style>
-          <a-card class="!rounded !shadow !m-2 md:!m-4 xl:!m-8" :body-style="{ paddingLeft: '0px', paddingRight: '0px' }">
+          <a-card class="!rounded !shadow !m-2 md:(!m-4) xl:(!m-8)" :body-style="{ paddingLeft: '0px', paddingRight: '0px' }">
             <!-- Header -->
-            <div v-if="isEditable" class="px-4">
+            <div v-if="isEditable" class="px-4 lg:px-12">
               <a-form-item v-if="isEditable">
                 <a-input
                   v-model:value="formViewData.heading"
-                  class="w-full !font-bold !text-4xl !border-0 !border-b-1 !border-dashed"
+                  class="w-full !font-bold !text-4xl !border-0 !border-b-1 !border-dashed !rounded-none !border-gray-400"
                   :style="{ borderRightWidth: '0px !important' }"
                   size="large"
                   hide-details
@@ -537,11 +539,11 @@ watch(view, (nextView) => {
             <div v-else class="px-4 ml-3 w-full text-bold text-4xl">{{ formViewData.heading }}</div>
 
             <!-- Sub Header -->
-            <div v-if="isEditable" class="px-4">
+            <div v-if="isEditable" class="px-4 lg:px-12">
               <a-form-item>
                 <a-input
                   v-model:value="formViewData.subheading"
-                  class="w-full !border-0 !border-b-1 !border-dashed"
+                  class="w-full !border-0 !border-b-1 !border-dashed !rounded-none !border-gray-400"
                   :style="{ borderRightWidth: '0px !important' }"
                   size="large"
                   hide-details
@@ -569,7 +571,7 @@ watch(view, (nextView) => {
             >
               <template #item="{ element, index }">
                 <div
-                  class="nc-editable item cursor-pointer hover:(bg-primary bg-opacity-10 ring-1 ring-accent ring-opacity-100) px-4 lg:px-12 py-4 relative"
+                  class="color-transition nc-editable item cursor-pointer hover:(bg-primary bg-opacity-10 ring-1 ring-accent ring-opacity-100) px-4 lg:px-12 py-4 relative"
                   :class="[
                     `nc-form-drag-${element.title.replaceAll(' ', '')}`,
                     {
diff --git a/packages/nc-gui/pages/[projectType]/form/[viewId]/index.vue b/packages/nc-gui/pages/[projectType]/form/[viewId]/index.vue
index 7dbc818b37..6845c72d97 100644
--- a/packages/nc-gui/pages/[projectType]/form/[viewId]/index.vue
+++ b/packages/nc-gui/pages/[projectType]/form/[viewId]/index.vue
@@ -31,7 +31,7 @@ const onClick = () => {
 
 <template>
   <div
-    class="overflow-y-auto overflow-x-hidden flex flex-wrap color-transition nc-form-view relative md:bg-primary bg-opacity-10 dark:(bg-slate-900) h-full min-h-[600px]"
+    class="overflow-y-auto overflow-x-hidden flex flex-wrap color-transition nc-form-view relative md:bg-primary bg-opacity-10 dark:(bg-slate-900) h-full min-h-[600px] nc-form-signin"
   >
     <NuxtPage />
 
@@ -40,7 +40,7 @@ const onClick = () => {
     </div>
 
     <div
-      class="flex items-center justify-center cursor-pointer absolute top-15 right-15 rounded-full p-2 bg-white dark:(bg-slate-600) shadow hover:(ring-1 ring-accent ring-opacity-100)"
+      class="color-transition flex items-center justify-center cursor-pointer absolute top-15 right-15 rounded-full p-2 bg-white dark:(bg-slate-600) shadow hover:(ring-1 ring-accent ring-opacity-100)"
       @click="onClick"
     >
       <Transition name="slide-left" duration="250" mode="out-in">
diff --git a/packages/nc-gui/pages/[projectType]/form/[viewId]/index/index.vue b/packages/nc-gui/pages/[projectType]/form/[viewId]/index/index.vue
index 75aecb79dd..4ec20f3ded 100644
--- a/packages/nc-gui/pages/[projectType]/form/[viewId]/index/index.vue
+++ b/packages/nc-gui/pages/[projectType]/form/[viewId]/index/index.vue
@@ -65,14 +65,14 @@ function isRequired(_columnObj: Record<string, any>, required = false) {
             <div class="flex flex-col gap-6">
               <div v-for="(field, index) in formColumns" :key="index" class="flex flex-col gap-2">
                 <div class="flex nc-form-column-label">
-                  <SmartsheetHeaderVirtualCell
+                  <LazySmartsheetHeaderVirtualCell
                     v-if="isVirtualCol(field)"
                     :column="{ ...field, title: field.label || field.title }"
                     :required="isRequired(field, field.required)"
                     :hide-menu="true"
                   />
 
-                  <SmartsheetHeaderCell
+                  <LazySmartsheetHeaderCell
                     v-else
                     :column="{ ...field, title: field.label || field.title }"
                     :required="isRequired(field, field.required)"
@@ -81,14 +81,14 @@ function isRequired(_columnObj: Record<string, any>, required = false) {
                 </div>
 
                 <div>
-                  <SmartsheetVirtualCell
+                  <LazySmartsheetVirtualCell
                     v-if="isVirtualCol(field)"
                     class="mt-0 nc-input"
                     :class="`nc-form-input-${field.title.replaceAll(' ', '')}`"
                     :column="field"
                   />
 
-                  <SmartsheetCell
+                  <LazySmartsheetCell
                     v-else
                     v-model="formState[field.title]"
                     class="nc-input"
diff --git a/packages/nc-gui/pages/[projectType]/form/[viewId]/index/survey.vue b/packages/nc-gui/pages/[projectType]/form/[viewId]/index/survey.vue
index 4259eb5dbc..a8f5aa9974 100644
--- a/packages/nc-gui/pages/[projectType]/form/[viewId]/index/survey.vue
+++ b/packages/nc-gui/pages/[projectType]/form/[viewId]/index/survey.vue
@@ -1,4 +1,5 @@
 <script lang="ts" setup>
+import type { ColumnType, LinkToAnotherRecordType } from 'nocodb-sdk'
 import { RelationTypes, UITypes, isVirtualCol } from 'nocodb-sdk'
 import { SwipeDirection } from '@vueuse/core'
 import {
@@ -7,16 +8,22 @@ import {
   onKeyStroke,
   provide,
   ref,
+  useEventListener,
   usePointerSwipe,
   useSharedFormStoreOrThrow,
   useStepper,
 } from '#imports'
 
+enum TransitionDirection {
+  Left = 'left',
+  Right = 'right',
+}
+
 const { v$, formState, formColumns, submitForm, submitted, secondsRemain, sharedFormView } = useSharedFormStoreOrThrow()
 
 const isTransitioning = ref(false)
 
-const transitionName = ref<'left' | 'right'>('left')
+const transitionName = ref<TransitionDirection>(TransitionDirection.Left)
 
 const el = ref<HTMLDivElement>()
 
@@ -36,36 +43,44 @@ provide(DropZoneRef, el)
 
 const steps = computed(() => {
   if (!formColumns.value) return []
-  return formColumns.value.reduce((acc, column) => {
-    acc.push((column as any).label || column.title)
+
+  return formColumns.value.reduce<string[]>((acc, column) => {
+    const title = column.label || column.title
+
+    if (!title) return acc
+
+    acc.push(title)
 
     return acc
-  }, [] as string[])
+  }, [])
 })
 
 const { index, goToPrevious, goToNext, isFirst, isLast } = useStepper(steps)
 
 const field = computed(() => formColumns.value?.[index.value])
 
-function isRequired(_columnObj: Record<string, any>, required = false) {
-  let columnObj = _columnObj
+function isRequired(column: ColumnType, required = false) {
+  let columnObj = column
   if (
     columnObj.uidt === UITypes.LinkToAnotherRecord &&
     columnObj.colOptions &&
-    columnObj.colOptions.type === RelationTypes.BELONGS_TO
+    (columnObj.colOptions as { type: RelationTypes }).type === RelationTypes.BELONGS_TO
   ) {
-    columnObj = formColumns.value?.find((c) => c.id === columnObj.colOptions.fk_child_column_id) as Record<string, any>
+    columnObj = formColumns.value?.find(
+      (c) => c.id === (columnObj.colOptions as LinkToAnotherRecordType).fk_child_column_id,
+    ) as ColumnType
   }
 
-  return !!(required || (columnObj && columnObj.rqd && !columnObj.cdf))
+  return required || (columnObj && columnObj.rqd && !columnObj.cdf)
 }
 
-function transition(direction: 'left' | 'right') {
+function transition(direction: TransitionDirection) {
   isTransitioning.value = true
   transitionName.value = direction
 
   setTimeout(() => {
-    transitionName.value = transitionName.value === 'left' ? 'right' : 'left'
+    transitionName.value =
+      transitionName.value === TransitionDirection.Left ? TransitionDirection.Right : TransitionDirection.Left
   }, 500)
 
   setTimeout(() => {
@@ -85,7 +100,7 @@ async function goNext() {
     if (!isValid) return
   }
 
-  transition('left')
+  transition(TransitionDirection.Left)
 
   goToNext()
 }
@@ -93,7 +108,7 @@ async function goNext() {
 async function goPrevious() {
   if (isFirst.value) return
 
-  transition('right')
+  transition(TransitionDirection.Right)
 
   goToPrevious()
 }
@@ -138,14 +153,14 @@ onKeyStroke(['ArrowRight', 'ArrowUp', 'Enter', 'Space'], goNext)
         >
           <div v-if="field && !submitted" class="flex flex-col gap-2">
             <div class="flex nc-form-column-label">
-              <SmartsheetHeaderVirtualCell
+              <LazySmartsheetHeaderVirtualCell
                 v-if="isVirtualCol(field)"
                 :column="{ ...field, title: field.label || field.title }"
                 :required="isRequired(field, field.required)"
                 :hide-menu="true"
               />
 
-              <SmartsheetHeaderCell
+              <LazySmartsheetHeaderCell
                 v-else
                 :column="{ ...field, title: field.label || field.title }"
                 :required="isRequired(field, field.required)"
@@ -154,14 +169,14 @@ onKeyStroke(['ArrowRight', 'ArrowUp', 'Enter', 'Space'], goNext)
             </div>
 
             <div>
-              <SmartsheetVirtualCell
+              <LazySmartsheetVirtualCell
                 v-if="isVirtualCol(field)"
                 class="mt-0 nc-input"
                 :class="`nc-form-input-${field.title.replaceAll(' ', '')}`"
                 :column="field"
               />
 
-              <SmartsheetCell
+              <LazySmartsheetCell
                 v-else
                 v-model="formState[field.title]"
                 class="nc-input"
@@ -200,13 +215,13 @@ onKeyStroke(['ArrowRight', 'ArrowUp', 'Enter', 'Space'], goNext)
 
             <a-tooltip
               v-if="!isLast"
-              placement="left"
+              placement="bottom"
               :title="v$.localState[field.title]?.$error ? v$.localState[field.title].$errors[0].$message : 'Go to next'"
-              :mouse-enter-delay="v$.localState[field.title]?.$error ? 0 : 1"
+              :mouse-enter-delay="0.2"
               :mouse-leave-delay="0"
             >
               <button class="group color-transition transform absolute right-1 top-1/2 md:static hover:scale-110" @click="goNext">
-                <TransitionGroup name="layout">
+                <TransitionGroup name="slide-left" mode="out-in">
                   <MdiCloseCircleOutline v-if="v$.localState[field.title]?.$error" class="text-red-500 text-2xl md:text-md" />
                   <MdiChevronRight v-else class="group-hover:text-accent text-2xl md:text-md" />
                 </TransitionGroup>
diff --git a/packages/nc-gui/pages/index/index.vue b/packages/nc-gui/pages/index/index.vue
index 66301d32f5..bbd4f3a5b4 100644
--- a/packages/nc-gui/pages/index/index.vue
+++ b/packages/nc-gui/pages/index/index.vue
@@ -24,7 +24,7 @@ useSidebar('nc-left-sidebar', { hasSidebar: false })
       <div class="flex-1 flex gap-6 flex-col justify-center items-center md:(flex-row justify-between items-start)">
         <template v-if="route.name === 'index-index'">
           <TransitionGroup name="page" mode="out-in">
-            <div>
+            <div key="social-card">
               <LazyGeneralSocialCard />
             </div>
 

From ebab64cbc6c304fd219684404ada089b03f4eabe Mon Sep 17 00:00:00 2001
From: braks <78412429+bcakmakoglu@users.noreply.github.com>
Date: Tue, 4 Oct 2022 12:00:52 +0200
Subject: [PATCH 41/82] refactor(nc-gui): remove collapse from share view modal
 options

---
 .../smartsheet/toolbar/ShareView.vue          | 80 ++++++++++---------
 1 file changed, 41 insertions(+), 39 deletions(-)

diff --git a/packages/nc-gui/components/smartsheet/toolbar/ShareView.vue b/packages/nc-gui/components/smartsheet/toolbar/ShareView.vue
index f65eb1b6a1..d17d03ca80 100644
--- a/packages/nc-gui/components/smartsheet/toolbar/ShareView.vue
+++ b/packages/nc-gui/components/smartsheet/toolbar/ShareView.vue
@@ -167,10 +167,10 @@ watch(passwordProtected, (value) => {
       size="small"
       :title="$t('msg.info.privateLink')"
       :footer="null"
-      width="min(100vw,640px)"
+      width="min(100vw,720px)"
       wrap-class-name="nc-modal-share-view"
     >
-      <div class="share-link-box nc-share-link-box bg-primary-50">
+      <div class="share-link-box nc-share-link-box !bg-primary !bg-opacity-5 ring-1 ring-accent ring-opacity-100">
         <div class="flex-1 h-min text-xs">{{ sharedViewUrl }}</div>
 
         <a v-e="['c:view:share:open-url']" :href="sharedViewUrl" target="_blank">
@@ -180,48 +180,50 @@ watch(passwordProtected, (value) => {
         <MdiContentCopy v-e="['c:view:share:copy-url']" class="text-gray-500 text-sm cursor-pointer" @click="copyLink" />
       </div>
 
-      <a-collapse ghost>
-        <a-collapse-panel key="1" :header="$t('general.showOptions')">
-          <div class="flex flex-col gap-2">
-            <div>
-              <!-- Survey Mode; todo: i18n -->
-              <a-checkbox v-if="shared.type === ViewTypes.FORM" v-model:checked="surveyMode" class="!text-xs">
-                Use Survey Mode
-              </a-checkbox>
-            </div>
+      <div class="px-1 mt-2 flex flex-col gap-3">
+        <!-- todo: i18n -->
+        <div class="text-gray-500 border-b-1">Options</div>
 
-            <div>
-              <!-- todo: i18n -->
-              <a-checkbox v-model:checked="withTheme" class="!text-xs"> Use Theme </a-checkbox>
-            </div>
+        <div class="px-1 flex flex-col gap-2">
+          <div>
+            <!-- Survey Mode; todo: i18n -->
+            <a-checkbox v-if="shared.type === ViewTypes.FORM" v-model:checked="surveyMode" class="!text-xs">
+              Use Survey Mode
+            </a-checkbox>
+          </div>
 
-            <div>
-              <!-- Password Protection -->
-              <a-checkbox v-model:checked="passwordProtected" class="!text-xs">{{ $t('msg.info.beforeEnablePwd') }} </a-checkbox>
-              <div v-if="passwordProtected" class="flex gap-2 mt-2 mb-4">
-                <a-input
-                  v-model:value="shared.password"
-                  size="small"
-                  class="!text-xs max-w-[250px]"
-                  type="password"
-                  :placeholder="$t('placeholder.password.enter')"/>
-
-
-                <a-button size="small" class="!text-xs" @click="saveShareLinkPassword">
-                  {{ $t('placeholder.password.save') }}
-                </a-button>
-              </div>
-            </div>
+          <div>
+            <!-- todo: i18n -->
+            <a-checkbox v-model:checked="withTheme" class="!text-xs"> Use Theme </a-checkbox>
+          </div>
 
-            <div>
-              <!-- Allow Download -->
-              <a-checkbox v-if="shared && shared.type === ViewTypes.GRID" v-model:checked="allowCSVDownload" class="!text-xs">
-                {{ $t('labels.downloadAllowed') }}
-              </a-checkbox>
+          <div>
+            <!-- Password Protection -->
+            <a-checkbox v-model:checked="passwordProtected" class="!text-xs">{{ $t('msg.info.beforeEnablePwd') }} </a-checkbox>
+
+            <div v-if="passwordProtected" class="ml-6 flex gap-2 mt-2 mb-4">
+              <a-input
+                v-model:value="shared.password"
+                size="small"
+                class="!text-xs max-w-[250px]"
+                type="password"
+                :placeholder="$t('placeholder.password.enter')"
+              />
+
+              <a-button size="small" class="!text-xs" @click="saveShareLinkPassword">
+                {{ $t('placeholder.password.save') }}
+              </a-button>
             </div>
           </div>
-        </a-collapse-panel>
-      </a-collapse>
+
+          <div>
+            <!-- Allow Download -->
+            <a-checkbox v-if="shared && shared.type === ViewTypes.GRID" v-model:checked="allowCSVDownload" class="!text-xs">
+              {{ $t('labels.downloadAllowed') }}
+            </a-checkbox>
+          </div>
+        </div>
+      </div>
     </a-modal>
   </div>
 </template>

From 100f352e04f6d38db956c6a634af24719a50b561 Mon Sep 17 00:00:00 2001
From: braks <78412429+bcakmakoglu@users.noreply.github.com>
Date: Tue, 4 Oct 2022 12:08:29 +0200
Subject: [PATCH 42/82] refactor(nc-gui): update smartsheet toolbar button
 styles

---
 packages/nc-gui/assets/style.scss             |  4 ++++
 .../nc-gui/components/smartsheet/Toolbar.vue  | 10 ++++-----
 .../components/smartsheet/toolbar/AddRow.vue  |  2 +-
 .../components/smartsheet/toolbar/Reload.vue  | 22 +++++++++++++++----
 .../smartsheet/toolbar/ShareView.vue          |  3 ++-
 5 files changed, 30 insertions(+), 11 deletions(-)

diff --git a/packages/nc-gui/assets/style.scss b/packages/nc-gui/assets/style.scss
index 7df65992f7..ed7c8d2df5 100644
--- a/packages/nc-gui/assets/style.scss
+++ b/packages/nc-gui/assets/style.scss
@@ -271,3 +271,7 @@ a {
   transform: scale(75%);
   transform-origin: bottom right;
 }
+
+.nc-toolbar-btn {
+  @apply shadow-sm rounded !border border-slate-300 color-transition;
+}
\ No newline at end of file
diff --git a/packages/nc-gui/components/smartsheet/Toolbar.vue b/packages/nc-gui/components/smartsheet/Toolbar.vue
index b4d142d68a..402a2fa1d5 100644
--- a/packages/nc-gui/components/smartsheet/Toolbar.vue
+++ b/packages/nc-gui/components/smartsheet/Toolbar.vue
@@ -14,7 +14,7 @@ const { allowCSVDownload } = useSharedView()
 
 <template>
   <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"
+    class="nc-table-toolbar w-full py-1 flex gap-2 items-center h-[var(--toolbar-height)] px-2 border-b overflow-x-hidden"
     style="z-index: 7"
   >
     <LazySmartsheetToolbarViewActions
@@ -25,7 +25,7 @@ const { allowCSVDownload } = useSharedView()
 
     <LazySmartsheetToolbarViewInfo v-if="!isUIAllowed('dataInsert') && !isPublic" />
 
-    <LazySmartsheetToolbarFieldsMenu v-if="isGrid || isGallery" :show-system-fields="false" class="ml-1" />
+    <LazySmartsheetToolbarFieldsMenu v-if="isGrid || isGallery" :show-system-fields="false" />
 
     <LazySmartsheetToolbarColumnFilterMenu v-if="isGrid || isGallery" />
 
@@ -37,11 +37,11 @@ const { allowCSVDownload } = useSharedView()
 
     <div class="flex-1" />
 
-    <LazySmartsheetToolbarReload v-if="!isPublic && !isForm" class="mx-1" />
+    <LazySmartsheetToolbarReload v-if="!isPublic && !isForm" />
 
-    <LazySmartsheetToolbarAddRow v-if="isUIAllowed('dataInsert') && !isPublic && !isForm && !isSqlView" class="mx-1" />
+    <LazySmartsheetToolbarAddRow v-if="isUIAllowed('dataInsert') && !isPublic && !isForm && !isSqlView" />
 
-    <LazySmartsheetToolbarSearchData v-if="(isGrid || isGallery) && !isPublic" class="shrink mr-2 ml-2" />
+    <LazySmartsheetToolbarSearchData v-if="(isGrid || isGallery) && !isPublic" class="shrink mx-2" />
 
     <template v-if="!isOpen && !isPublic">
       <div class="border-l-1 pl-3">
diff --git a/packages/nc-gui/components/smartsheet/toolbar/AddRow.vue b/packages/nc-gui/components/smartsheet/toolbar/AddRow.vue
index e55c2deadc..33f6279dba 100644
--- a/packages/nc-gui/components/smartsheet/toolbar/AddRow.vue
+++ b/packages/nc-gui/components/smartsheet/toolbar/AddRow.vue
@@ -16,7 +16,7 @@ const onClick = () => {
     <div
       v-e="['c:row:add:grid-top']"
       :class="{ 'group': !isLocked, 'disabled-ring': isLocked }"
-      class="nc-add-new-row-btn flex align-center"
+      class="nc-add-new-row-btn nc-toolbar-btn flex min-w-32px w-32px h-32px items-center"
     >
       <MdiPlusOutline
         :class="{ 'cursor-pointer text-gray-500 group-hover:(text-primary)': !isLocked, 'disabled': isLocked }"
diff --git a/packages/nc-gui/components/smartsheet/toolbar/Reload.vue b/packages/nc-gui/components/smartsheet/toolbar/Reload.vue
index 7c48d08111..92ba41f931 100644
--- a/packages/nc-gui/components/smartsheet/toolbar/Reload.vue
+++ b/packages/nc-gui/components/smartsheet/toolbar/Reload.vue
@@ -1,13 +1,23 @@
 <script setup lang="ts">
-import { ReloadViewDataHookInj, inject, useNuxtApp } from '#imports'
+import { ReloadViewDataHookInj, inject, ref, useNuxtApp, watch } from '#imports'
 
-const { $e } = useNuxtApp()
+const { $e, $state } = useNuxtApp()
 
 const reloadHook = inject(ReloadViewDataHookInj)!
 
+const isReloading = ref(false)
+
 const onClick = () => {
   $e('a:table:reload:navbar')
+  isReloading.value = true
   reloadHook.trigger()
+
+  const stop = watch($state.isLoading, (isLoading) => {
+    if (!isLoading) {
+      isReloading.value = false
+      stop()
+    }
+  })
 }
 </script>
 
@@ -15,8 +25,12 @@ const onClick = () => {
   <a-tooltip placement="bottom">
     <template #title> {{ $t('general.reload') }} </template>
 
-    <div class="group flex align-center">
-      <MdiReload class="cursor-pointer text-gray-500 group-hover:(text-primary) nc-toolbar-reload-btn" @click="onClick" />
+    <div class="nc-toolbar-btn flex min-w-32px w-32px h-32px items-center">
+      <MdiReload
+        class="w-full h-full cursor-pointer text-gray-500 group-hover:(text-primary) nc-toolbar-reload-btn"
+        :class="isReloading ? 'animate-spin' : ''"
+        @click="onClick"
+      />
     </div>
   </a-tooltip>
 </template>
diff --git a/packages/nc-gui/components/smartsheet/toolbar/ShareView.vue b/packages/nc-gui/components/smartsheet/toolbar/ShareView.vue
index d17d03ca80..3c3fb6caf5 100644
--- a/packages/nc-gui/components/smartsheet/toolbar/ShareView.vue
+++ b/packages/nc-gui/components/smartsheet/toolbar/ShareView.vue
@@ -153,8 +153,9 @@ watch(passwordProtected, (value) => {
       v-e="['c:view:share']"
       outlined
       class="nc-btn-share-view nc-toolbar-btn"
+      @click="genShareLink"
     >
-      <div class="flex items-center gap-1" @click="genShareLink">
+      <div class="flex items-center gap-1">
         <MdiOpenInNew />
         <!-- Share View -->
         <span class="!text-sm font-weight-normal"> {{ $t('activity.shareView') }}</span>

From 31933a964797ee0365415f6cca05d3f21c92a865 Mon Sep 17 00:00:00 2001
From: braks <78412429+bcakmakoglu@users.noreply.github.com>
Date: Tue, 4 Oct 2022 13:32:45 +0200
Subject: [PATCH 43/82] refactor(nc-gui): remove key event stopper from cells

---
 packages/nc-gui/components/smartsheet/Cell.vue        | 8 ++------
 packages/nc-gui/components/smartsheet/VirtualCell.vue | 4 ++--
 2 files changed, 4 insertions(+), 8 deletions(-)

diff --git a/packages/nc-gui/components/smartsheet/Cell.vue b/packages/nc-gui/components/smartsheet/Cell.vue
index d11cfe42ef..ce20dbfa94 100644
--- a/packages/nc-gui/components/smartsheet/Cell.vue
+++ b/packages/nc-gui/components/smartsheet/Cell.vue
@@ -138,12 +138,8 @@ const syncAndNavigate = (dir: NavigateDir) => {
   <div
     class="nc-cell w-full"
     :class="[`nc-cell-${(column?.uidt || 'default').toLowerCase()}`, { 'text-blue-600': isPrimary && !virtual && !isForm }]"
-    @keydown.stop.left
-    @keydown.stop.right
-    @keydown.stop.up
-    @keydown.stop.down
-    @keydown.stop.enter.exact="syncAndNavigate(NavigateDir.NEXT)"
-    @keydown.stop.shift.enter.exact="syncAndNavigate(NavigateDir.PREV)"
+    @keydown.enter.exact="syncAndNavigate(NavigateDir.NEXT)"
+    @keydown.shift.enter.exact="syncAndNavigate(NavigateDir.PREV)"
   >
     <LazyCellTextArea v-if="isTextArea" v-model="vModel" />
     <LazyCellCheckbox v-else-if="isBoolean" v-model="vModel" />
diff --git a/packages/nc-gui/components/smartsheet/VirtualCell.vue b/packages/nc-gui/components/smartsheet/VirtualCell.vue
index aae2057493..dcdb3b1a45 100644
--- a/packages/nc-gui/components/smartsheet/VirtualCell.vue
+++ b/packages/nc-gui/components/smartsheet/VirtualCell.vue
@@ -28,8 +28,8 @@ const { isLookup, isBt, isRollup, isMm, isHm, isFormula, isCount } = useVirtualC
 <template>
   <div
     class="nc-virtual-cell w-full"
-    @keydown.stop.enter.exact="emit('navigate', NavigateDir.NEXT)"
-    @keydown.stop.shift.enter.exact="emit('navigate', NavigateDir.PREV)"
+    @keydown.enter.exact="emit('navigate', NavigateDir.NEXT)"
+    @keydown.shift.enter.exact="emit('navigate', NavigateDir.PREV)"
   >
     <LazyVirtualCellHasMany v-if="isHm" />
     <LazyVirtualCellManyToMany v-else-if="isMm" />

From 8a9e305be26a65f9156164d6bda19e921f1281ec Mon Sep 17 00:00:00 2001
From: braks <78412429+bcakmakoglu@users.noreply.github.com>
Date: Tue, 4 Oct 2022 13:33:17 +0200
Subject: [PATCH 44/82] refactor(nc-gui): scaling btn styles

---
 packages/nc-gui/assets/style.scss | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/nc-gui/assets/style.scss b/packages/nc-gui/assets/style.scss
index ed7c8d2df5..1ec8e5935d 100644
--- a/packages/nc-gui/assets/style.scss
+++ b/packages/nc-gui/assets/style.scss
@@ -214,7 +214,7 @@ a {
   }
 
   &:hover::after {
-    @apply transform scale-110 ring ring-accent;
+    @apply !border-0 transform scale-110 ring ring-accent;
   }
 
   &:active::after {

From e9d97ee0af18714bb4021289d1e3d4dd5363982c Mon Sep 17 00:00:00 2001
From: braks <78412429+bcakmakoglu@users.noreply.github.com>
Date: Tue, 4 Oct 2022 13:33:34 +0200
Subject: [PATCH 45/82] refactor(nc-gui): survey form styles

---
 packages/nc-gui/components.d.ts               |  2 +
 .../[projectType]/form/[viewId]/index.vue     | 14 ++-
 .../form/[viewId]/index/survey.vue            | 87 ++++++++++++-------
 3 files changed, 67 insertions(+), 36 deletions(-)

diff --git a/packages/nc-gui/components.d.ts b/packages/nc-gui/components.d.ts
index aec2ec06a5..7410404066 100644
--- a/packages/nc-gui/components.d.ts
+++ b/packages/nc-gui/components.d.ts
@@ -101,6 +101,8 @@ declare module '@vue/runtime-core' {
     MaterialSymbolsChevronRightRounded: typeof import('~icons/material-symbols/chevron-right-rounded')['default']
     MaterialSymbolsCloseRounded: typeof import('~icons/material-symbols/close-rounded')['default']
     MaterialSymbolsFileCopyOutline: typeof import('~icons/material-symbols/file-copy-outline')['default']
+    MaterialSymbolsKeyboardReturn: typeof import('~icons/material-symbols/keyboard-return')['default']
+    MaterialSymbolsLightModeOutline: typeof import('~icons/material-symbols/light-mode-outline')['default']
     MaterialSymbolsRocketLaunchOutline: typeof import('~icons/material-symbols/rocket-launch-outline')['default']
     MaterialSymbolsSendOutline: typeof import('~icons/material-symbols/send-outline')['default']
     MaterialSymbolsTranslate: typeof import('~icons/material-symbols/translate')['default']
diff --git a/packages/nc-gui/pages/[projectType]/form/[viewId]/index.vue b/packages/nc-gui/pages/[projectType]/form/[viewId]/index.vue
index 6845c72d97..c9cb03c506 100644
--- a/packages/nc-gui/pages/[projectType]/form/[viewId]/index.vue
+++ b/packages/nc-gui/pages/[projectType]/form/[viewId]/index.vue
@@ -31,7 +31,7 @@ const onClick = () => {
 
 <template>
   <div
-    class="overflow-y-auto overflow-x-hidden flex flex-wrap color-transition nc-form-view relative md:bg-primary bg-opacity-10 dark:(bg-slate-900) h-full min-h-[600px] nc-form-signin"
+    class="overflow-y-auto overflow-x-hidden flex flex-wrap color-transition nc-form-view relative bg-primary bg-opacity-10 dark:(bg-slate-900) h-full min-h-[600px]"
   >
     <NuxtPage />
 
@@ -90,12 +90,12 @@ p {
 
 .nc-form-view {
   .nc-input {
-    @apply w-full rounded p-2 min-h-[40px] flex items-center border-solid border-1 border-primary dark:border-slate-200;
+    @apply w-full rounded p-2 min-h-[40px] flex items-center border-solid border-1 border-gray-300 dark:border-slate-200;
 
     input,
     &.nc-virtual-cell,
     > div {
-      @apply dark:(bg-slate-400 text-slate-900);
+      @apply bg-white dark:(bg-slate-500 text-white);
 
       .nc-icon {
         @apply dark:text-slate-900;
@@ -109,10 +109,16 @@ p {
 }
 
 .nc-cell {
-  @apply dark:bg-slate-400;
+  @apply bg-white dark:bg-slate-500;
 
   .nc-attachment-cell > div {
     @apply dark:(bg-slate-100);
   }
 }
+
+.nc-form-column-label {
+  > * {
+    @apply dark:text-slate-300;
+  }
+}
 </style>
diff --git a/packages/nc-gui/pages/[projectType]/form/[viewId]/index/survey.vue b/packages/nc-gui/pages/[projectType]/form/[viewId]/index/survey.vue
index a8f5aa9974..0e6c1c8c9f 100644
--- a/packages/nc-gui/pages/[projectType]/form/[viewId]/index/survey.vue
+++ b/packages/nc-gui/pages/[projectType]/form/[viewId]/index/survey.vue
@@ -144,12 +144,12 @@ onKeyStroke(['ArrowRight', 'ArrowUp', 'Enter', 'Space'], goNext)
       </div>
     </template>
 
-    <div class="h-1/2 w-full">
+    <div class="h-1/2 w-full flex items-center px-4 md:px-0">
       <Transition :name="`slide-${transitionName}`" mode="out-in">
         <div
           ref="el"
           :key="field.title"
-          class="color-transition bg-white dark:bg-slate-700 flex flex-col justify-center gap-4 w-full max-w-[max(33%,600px)] m-auto px-8 pt-8 pb-4 md:(rounded-lg border-1 border-gray-200 shadow-xl)"
+          class="color-transition flex flex-col justify-center gap-4 w-full max-w-[max(33%,600px)] m-auto"
         >
           <div v-if="field && !submitted" class="flex flex-col gap-2">
             <div class="flex nc-form-column-label">
@@ -195,40 +195,44 @@ onKeyStroke(['ArrowRight', 'ArrowUp', 'Enter', 'Space'], goNext)
             </div>
           </div>
 
-          <div v-if="(!isFirst || !isLast) && !submitted" class="flex w-full text-lg mt-2">
-            <a-tooltip v-if="!isFirst" title="Go to previous" :mouse-enter-delay="1" :mouse-leave-delay="0">
-              <button
-                class="group color-transition transform hover:scale-110 absolute left-1 top-1/2 md:static"
-                @click="goPrevious"
-              >
-                <MdiChevronLeft class="group-hover:text-accent text-2xl md:text-md" />
-              </button>
-            </a-tooltip>
-
-            <div class="flex-1">
+          <div class="ml-1 mt-2 flex w-full text-lg">
+            <div class="flex-1 flex justify-center">
               <div v-if="isLast && !submitted && !v$.$invalid" class="text-center my-4">
-                <button type="submit" class="scaling-btn prose-sm" @click="submitForm">
+                <button type="submit" class="uppercase scaling-btn prose-sm" @click="submitForm">
                   {{ $t('general.submit') }}
                 </button>
               </div>
-            </div>
 
-            <a-tooltip
-              v-if="!isLast"
-              placement="bottom"
-              :title="v$.localState[field.title]?.$error ? v$.localState[field.title].$errors[0].$message : 'Go to next'"
-              :mouse-enter-delay="0.2"
-              :mouse-leave-delay="0"
-            >
-              <button class="group color-transition transform absolute right-1 top-1/2 md:static hover:scale-110" @click="goNext">
-                <TransitionGroup name="slide-left" mode="out-in">
-                  <MdiCloseCircleOutline v-if="v$.localState[field.title]?.$error" class="text-red-500 text-2xl md:text-md" />
-                  <MdiChevronRight v-else class="group-hover:text-accent text-2xl md:text-md" />
-                </TransitionGroup>
-              </button>
-            </a-tooltip>
+              <div v-else class="flex items-center gap-3">
+                <a-tooltip
+                  :title="v$.localState[field.title]?.$error ? v$.localState[field.title].$errors[0].$message : 'Go to next'"
+                  :mouse-enter-delay="0.25"
+                  :mouse-leave-delay="0"
+                >
+                  <button
+                    class="bg-opacity-100 scaling-btn flex items-center gap-1"
+                    :class="v$.localState[field.title]?.$error ? 'after:!bg-gray-100 after:!ring-red-500' : ''"
+                    @click="goNext"
+                  >
+                    <Transition name="fade">
+                      <span v-if="!v$.localState[field.title]?.$error" class="uppercase text-white">Ok</span>
+                    </Transition>
+
+                    <Transition name="slide-right" mode="out-in">
+                      <MdiCloseCircleOutline v-if="v$.localState[field.title]?.$error" class="text-red-500 md:text-md" />
+                      <MdiCheck v-else class="text-white md:text-md" />
+                    </Transition>
+                  </button>
+                </a-tooltip>
+
+                <!-- todo: i18n -->
+                <div class="text-sm flex items-center gap-1">Press Enter <MaterialSymbolsKeyboardReturn class="mt-1" /></div>
+              </div>
+            </div>
           </div>
 
+          <div class="text-right text-gray-500">{{ index + 1 }} / {{ formColumns?.length }}</div>
+
           <Transition name="layout">
             <div v-if="submitted" class="flex flex-col justify-center text-center">
               <h2 class="prose-xl mb-2">Thank you!</h2>
@@ -255,8 +259,27 @@ onKeyStroke(['ArrowRight', 'ArrowUp', 'Enter', 'Space'], goNext)
       </Transition>
     </div>
 
-    <div class="absolute bottom-12 right-12 flex flex-col">
-      <div>{{ index + 1 }} / {{ formColumns?.length }}</div>
+    <div
+      class="color-transition shadow-sm absolute bottom-12 right-12 flex items-center bg-white border dark:bg-slate-500 rounded divide-x-1"
+    >
+      <a-tooltip title="Go to previous" :mouse-enter-delay="0.25" :mouse-leave-delay="0">
+        <button class="p-0.5 flex items-center group color-transition" @click="goPrevious">
+          <MdiChevronLeft :class="isFirst ? 'text-gray-300' : 'group-hover:text-accent'" class="text-2xl md:text-md" />
+        </button>
+      </a-tooltip>
+
+      <a-tooltip
+        :title="v$.localState[field.title]?.$error ? v$.localState[field.title].$errors[0].$message : 'Go to next'"
+        :mouse-enter-delay="0.25"
+        :mouse-leave-delay="0"
+      >
+        <button class="p-0.5 flex items-center group color-transition" @click="goNext">
+          <MdiChevronRight
+            :class="isLast || v$.localState[field.title]?.$error ? 'text-gray-300' : 'group-hover:text-accent'"
+            class="text-2xl md:text-md"
+          />
+        </button>
+      </a-tooltip>
     </div>
   </div>
 </template>
@@ -268,7 +291,7 @@ onKeyStroke(['ArrowRight', 'ArrowUp', 'Enter', 'Space'], goNext)
 
 .nc-form-column-label {
   > * {
-    @apply !prose-lg dark:text-slate-300;
+    @apply !prose-lg;
   }
 
   .nc-icon {

From 11f74e967b7d8f971e52fc0d980f2aea61b2e06a Mon Sep 17 00:00:00 2001
From: braks <78412429+bcakmakoglu@users.noreply.github.com>
Date: Tue, 4 Oct 2022 13:39:45 +0200
Subject: [PATCH 46/82] chore(nc-gui): add transition duration

---
 .../nc-gui/pages/[projectType]/form/[viewId]/index/survey.vue   | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/nc-gui/pages/[projectType]/form/[viewId]/index/survey.vue b/packages/nc-gui/pages/[projectType]/form/[viewId]/index/survey.vue
index 0e6c1c8c9f..2f662e1807 100644
--- a/packages/nc-gui/pages/[projectType]/form/[viewId]/index/survey.vue
+++ b/packages/nc-gui/pages/[projectType]/form/[viewId]/index/survey.vue
@@ -145,7 +145,7 @@ onKeyStroke(['ArrowRight', 'ArrowUp', 'Enter', 'Space'], goNext)
     </template>
 
     <div class="h-1/2 w-full flex items-center px-4 md:px-0">
-      <Transition :name="`slide-${transitionName}`" mode="out-in">
+      <Transition :name="`slide-${transitionName}`" :duration="1000" mode="out-in">
         <div
           ref="el"
           :key="field.title"

From ee6f8b2964917a72617040cbeab73c5ae3e65731 Mon Sep 17 00:00:00 2001
From: braks <78412429+bcakmakoglu@users.noreply.github.com>
Date: Tue, 4 Oct 2022 13:46:29 +0200
Subject: [PATCH 47/82] refactor(nc-gui): use grid for survey layout

---
 packages/nc-gui/components/general/PoweredBy.vue   |  2 +-
 .../pages/[projectType]/form/[viewId]/index.vue    |  2 +-
 .../[projectType]/form/[viewId]/index/survey.vue   | 14 ++++++++------
 3 files changed, 10 insertions(+), 8 deletions(-)

diff --git a/packages/nc-gui/components/general/PoweredBy.vue b/packages/nc-gui/components/general/PoweredBy.vue
index 1e46e1b345..92f32da4b6 100644
--- a/packages/nc-gui/components/general/PoweredBy.vue
+++ b/packages/nc-gui/components/general/PoweredBy.vue
@@ -9,7 +9,7 @@ import { openLink } from '#imports'
     @click="openLink('https://github.com/nocodb/nocodb')"
   >
     <span class="rounded">
-      <GeneralNocoIcon class="!relative !top-0" width="32" height="32" />
+      <GeneralNocoIcon class="!relative !top-0" :width="32" :height="32" />
     </span>
 
     <span>Powered by NocoDB</span>
diff --git a/packages/nc-gui/pages/[projectType]/form/[viewId]/index.vue b/packages/nc-gui/pages/[projectType]/form/[viewId]/index.vue
index c9cb03c506..752e0ca3b2 100644
--- a/packages/nc-gui/pages/[projectType]/form/[viewId]/index.vue
+++ b/packages/nc-gui/pages/[projectType]/form/[viewId]/index.vue
@@ -40,7 +40,7 @@ const onClick = () => {
     </div>
 
     <div
-      class="color-transition flex items-center justify-center cursor-pointer absolute top-15 right-15 rounded-full p-2 bg-white dark:(bg-slate-600) shadow hover:(ring-1 ring-accent ring-opacity-100)"
+      class="color-transition flex items-center justify-center cursor-pointer absolute top-4 md:top-15 right-4 md:right-15 rounded-full p-2 bg-white dark:(bg-slate-600) shadow hover:(ring-1 ring-accent ring-opacity-100)"
       @click="onClick"
     >
       <Transition name="slide-left" duration="250" mode="out-in">
diff --git a/packages/nc-gui/pages/[projectType]/form/[viewId]/index/survey.vue b/packages/nc-gui/pages/[projectType]/form/[viewId]/index/survey.vue
index 2f662e1807..8404cdeebf 100644
--- a/packages/nc-gui/pages/[projectType]/form/[viewId]/index/survey.vue
+++ b/packages/nc-gui/pages/[projectType]/form/[viewId]/index/survey.vue
@@ -133,10 +133,10 @@ onKeyStroke(['ArrowRight', 'ArrowUp', 'Enter', 'Space'], goNext)
 </script>
 
 <template>
-  <div ref="el" class="w-full min-h-2/3 flex flex-auto flex-col justify-center items-center">
+  <div ref="el" class="w-full min-h-2/3 grid grid-rows-2">
     <template v-if="sharedFormView">
-      <div class="min-h-1 h-1/3 w-full flex flex-col justify-end">
-        <h1 class="prose-2xl font-bold self-center my-4">{{ sharedFormView.heading }}</h1>
+      <div class="max-w-[max(33%,600px)] m-auto flex flex-col justify-end">
+        <h1 class="prose-2xl font-bold my-4">{{ sharedFormView.heading }}</h1>
 
         <h2 class="prose-lg text-slate-500 dark:text-slate-300 self-center mb-4">
           {{ sharedFormView.subheading }}
@@ -195,7 +195,7 @@ onKeyStroke(['ArrowRight', 'ArrowUp', 'Enter', 'Space'], goNext)
             </div>
           </div>
 
-          <div class="ml-1 mt-2 flex w-full text-lg">
+          <div class="ml-1 mt-4 flex w-full text-lg">
             <div class="flex-1 flex justify-center">
               <div v-if="isLast && !submitted && !v$.$invalid" class="text-center my-4">
                 <button type="submit" class="uppercase scaling-btn prose-sm" @click="submitForm">
@@ -231,7 +231,9 @@ onKeyStroke(['ArrowRight', 'ArrowUp', 'Enter', 'Space'], goNext)
             </div>
           </div>
 
-          <div class="text-right text-gray-500">{{ index + 1 }} / {{ formColumns?.length }}</div>
+          <div class="mt-12 select-none text-center text-gray-500 dark:text-slate-200">
+            {{ index + 1 }} / {{ formColumns?.length }}
+          </div>
 
           <Transition name="layout">
             <div v-if="submitted" class="flex flex-col justify-center text-center">
@@ -260,7 +262,7 @@ onKeyStroke(['ArrowRight', 'ArrowUp', 'Enter', 'Space'], goNext)
     </div>
 
     <div
-      class="color-transition shadow-sm absolute bottom-12 right-12 flex items-center bg-white border dark:bg-slate-500 rounded divide-x-1"
+      class="color-transition shadow-sm absolute bottom-18 right-1/2 transform translate-x-[50%] md:bottom-4 md:(right-12 transform-none) flex items-center bg-white border dark:bg-slate-500 rounded divide-x-1"
     >
       <a-tooltip title="Go to previous" :mouse-enter-delay="0.25" :mouse-leave-delay="0">
         <button class="p-0.5 flex items-center group color-transition" @click="goPrevious">

From a672ef3040ebb6bedf8885c3e169bc82eb593a76 Mon Sep 17 00:00:00 2001
From: braks <78412429+bcakmakoglu@users.noreply.github.com>
Date: Tue, 4 Oct 2022 15:21:32 +0200
Subject: [PATCH 48/82] feat(nc-gui): use shared view meta for survey mode and
 theme config

---
 .../smartsheet/toolbar/ShareView.vue          | 97 ++++++++++++-------
 .../composables/useSharedFormViewStore.ts     |  6 ++
 .../pages/[projectType]/form/[viewId].vue     | 28 +++++-
 .../[projectType]/form/[viewId]/index.vue     | 59 +++++------
 .../form/[viewId]/index/survey.vue            |  6 +-
 5 files changed, 121 insertions(+), 75 deletions(-)

diff --git a/packages/nc-gui/components/smartsheet/toolbar/ShareView.vue b/packages/nc-gui/components/smartsheet/toolbar/ShareView.vue
index 3c3fb6caf5..1241d2f423 100644
--- a/packages/nc-gui/components/smartsheet/toolbar/ShareView.vue
+++ b/packages/nc-gui/components/smartsheet/toolbar/ShareView.vue
@@ -1,5 +1,6 @@
 <script lang="ts" setup>
 import { ViewTypes } from 'nocodb-sdk'
+import { isString } from '@vueuse/core'
 import {
   computed,
   extractSdkResponseErrorMsg,
@@ -15,6 +16,21 @@ import {
   useUIPermission,
   watch,
 } from '#imports'
+import type { ThemeConfig } from '~/lib'
+
+interface SharedViewMeta extends Record<string, any> {
+  surveyMode?: boolean
+  theme?: Partial<ThemeConfig>
+  allowCSVDownload?: boolean
+}
+
+interface SharedView {
+  uuid?: string
+  id: string
+  password: string | null
+  type?: ViewTypes
+  meta: SharedViewMeta
+}
 
 const { theme } = useTheme()
 
@@ -36,29 +52,39 @@ let showShareModel = $ref(false)
 
 const passwordProtected = ref(false)
 
-const surveyMode = ref(false)
-
-const withTheme = ref(false)
-
-const shared = ref()
+const shared = ref<SharedView>({ id: '', meta: {}, password: null })
 
 const allowCSVDownload = computed({
-  get() {
-    return !!(shared.value?.meta && typeof shared.value.meta === 'string' ? JSON.parse(shared.value.meta) : shared.value.meta)
-      ?.allowCSVDownload
-  },
-  set(allow) {
-    shared.value.meta = { allowCSVDownload: allow }
+  get: () => !!shared.value.meta.allowCSVDownload,
+  set: (allow) => {
+    shared.value.meta = { ...shared.value.meta, allowCSVDownload: allow }
     saveAllowCSVDownload()
   },
 })
 
+const surveyMode = computed({
+  get: () => !!shared.value.meta.surveyMode,
+  set: (survey) => {
+    shared.value.meta = { ...shared.value.meta, surveyMode: survey }
+    saveSurveyMode()
+  },
+})
+
+const viewTheme = computed({
+  get: () => !!shared.value.meta.theme,
+  set: (hasTheme) => {
+    shared.value.meta = { ...shared.value.meta, theme: hasTheme ? { ...theme.value } : undefined }
+    saveTheme()
+  },
+})
+
 const genShareLink = async () => {
   if (!view.value?.id) return
 
-  shared.value = await $api.dbViewShare.create(view.value.id)
-  shared.value.meta =
-    shared.value.meta && typeof shared.value.meta === 'string' ? JSON.parse(shared.value.meta) : shared.value.meta
+  const response = (await $api.dbViewShare.create(view.value.id)) as SharedView
+  const meta = isString(response.meta) ? JSON.parse(response.meta) : response.meta
+
+  shared.value = { ...response, meta }
 
   passwordProtected.value = shared.value.password !== null && shared.value.password !== ''
 
@@ -80,24 +106,27 @@ const sharedViewUrl = computed(() => {
       viewType = 'view'
   }
 
-  let url = `${dashboardUrl?.value}#/nc/${viewType}/${shared.value.uuid}`
+  return `${dashboardUrl?.value}#/nc/${viewType}/${shared.value.uuid}`
+})
 
-  /** if survey mode is enabled, append survey path segment */
-  if (surveyMode.value) {
-    url = `${url}/survey`
-  }
+async function saveAllowCSVDownload() {
+  await updateSharedViewMeta()
+  $e(`a:view:share:${allowCSVDownload.value ? 'enable' : 'disable'}-csv-download`)
+}
 
-  /** if theme is enabled, append theme query params */
-  if (withTheme.value) {
-    url = `${url}?theme=${theme.value.primaryColor.replace('#', '')},${theme.value.accentColor.replace('#', '')}`
-  }
+async function saveSurveyMode() {
+  await updateSharedViewMeta()
+  $e(`a:view:share:${surveyMode.value ? 'enable' : 'disable'}-survey-mode`)
+}
 
-  return url
-})
+async function saveTheme() {
+  await updateSharedViewMeta()
+  $e(`a:view:share:${viewTheme.value ? 'enable' : 'disable'}-theme`)
+}
 
-async function saveAllowCSVDownload() {
+async function updateSharedViewMeta() {
   try {
-    const meta = shared.value.meta && typeof shared.value.meta === 'string' ? JSON.parse(shared.value.meta) : shared.value.meta
+    const meta = shared.value.meta && isString(shared.value.meta) ? JSON.parse(shared.value.meta) : shared.value.meta
 
     await $api.dbViewShare.update(shared.value.id, {
       meta,
@@ -108,14 +137,12 @@ async function saveAllowCSVDownload() {
     message.error(await extractSdkResponseErrorMsg(e))
   }
 
-  if (allowCSVDownload.value) {
-    $e('a:view:share:enable-csv-download')
-  } else {
-    $e('a:view:share:disable-csv-download')
-  }
+  return true
 }
 
 const saveShareLinkPassword = async () => {
+  if (!shared.value.password) return
+
   try {
     await $api.dbViewShare.update(shared.value.id, {
       password: shared.value.password,
@@ -129,9 +156,9 @@ const saveShareLinkPassword = async () => {
   $e('a:view:share:enable-pwd')
 }
 
-const copyLink = () => {
+const copyLink = async () => {
   if (sharedViewUrl.value) {
-    copy(sharedViewUrl.value)
+    await copy(sharedViewUrl.value)
 
     // Copied to clipboard
     message.success(t('msg.info.copiedToClipboard'))
@@ -195,7 +222,7 @@ watch(passwordProtected, (value) => {
 
           <div>
             <!-- todo: i18n -->
-            <a-checkbox v-model:checked="withTheme" class="!text-xs"> Use Theme </a-checkbox>
+            <a-checkbox v-model:checked="viewTheme" class="!text-xs"> Use Theme </a-checkbox>
           </div>
 
           <div>
diff --git a/packages/nc-gui/composables/useSharedFormViewStore.ts b/packages/nc-gui/composables/useSharedFormViewStore.ts
index 01272e43eb..6247a326e4 100644
--- a/packages/nc-gui/composables/useSharedFormViewStore.ts
+++ b/packages/nc-gui/composables/useSharedFormViewStore.ts
@@ -3,6 +3,7 @@ import { minLength, required } from '@vuelidate/validators'
 import type { Ref } from 'vue'
 import type { ColumnType, FormType, LinkToAnotherRecordType, TableType, ViewType } from 'nocodb-sdk'
 import { ErrorMessages, RelationTypes, UITypes, isVirtualCol } from 'nocodb-sdk'
+import { isString } from '@vueuse/core'
 import {
   SharedViewPasswordInj,
   computed,
@@ -31,6 +32,7 @@ const [useProvideSharedFormStore, useSharedFormStore] = useInjectionState((share
   const sharedFormView = ref<FormType>()
   const meta = ref<TableType>()
   const columns = ref<(ColumnType & { required?: boolean; show?: boolean; label?: string })[]>()
+  const sharedViewMeta = ref<any>({})
 
   const { api, isLoading } = useApi()
 
@@ -65,6 +67,9 @@ const [useProvideSharedFormStore, useSharedFormStore] = useInjectionState((share
       meta.value = viewMeta.model
       columns.value = viewMeta.model?.columns
 
+      const _sharedViewMeta = (viewMeta as any).meta
+      sharedViewMeta.value = isString(_sharedViewMeta) ? JSON.parse(_sharedViewMeta) : _sharedViewMeta
+
       await setMeta(viewMeta.model)
 
       const relatedMetas = { ...viewMeta.relatedMetas }
@@ -205,6 +210,7 @@ const [useProvideSharedFormStore, useSharedFormStore] = useInjectionState((share
     secondsRemain,
     passwordDlg,
     isLoading,
+    sharedViewMeta,
   }
 }, 'expanded-form-store')
 
diff --git a/packages/nc-gui/pages/[projectType]/form/[viewId].vue b/packages/nc-gui/pages/[projectType]/form/[viewId].vue
index 3c016c1868..996a1b73a7 100644
--- a/packages/nc-gui/pages/[projectType]/form/[viewId].vue
+++ b/packages/nc-gui/pages/[projectType]/form/[viewId].vue
@@ -22,7 +22,9 @@ useSidebar('nc-left-sidebar', { hasSidebar: false })
 
 const route = useRoute()
 
-const { loadSharedView, sharedView, meta, notFound } = useProvideSharedFormStore(route.params.viewId as string)
+const { loadSharedView, sharedView, meta, notFound, password, passwordDlg } = useProvideSharedFormStore(
+  route.params.viewId as string,
+)
 
 await loadSharedView()
 
@@ -39,6 +41,30 @@ if (!notFound.value) {
 <template>
   <NuxtLayout>
     <NuxtPage />
+
+    <a-modal
+      v-model:visible="passwordDlg"
+      :closable="false"
+      width="28rem"
+      centered
+      :footer="null"
+      :mask-closable="false"
+      wrap-class-name="nc-modal-shared-form-password-dlg"
+      @close="passwordDlg = false"
+    >
+      <div class="w-full flex flex-col">
+        <a-typography-title :level="4">This shared view is protected</a-typography-title>
+
+        <a-form ref="formRef" :model="{ password }" class="mt-2" @finish="passwordDlg = false">
+          <a-form-item name="password" :rules="[{ required: true, message: $t('msg.error.signUpRules.passwdRequired') }]">
+            <a-input-password v-model:value="password" :placeholder="$t('msg.info.signUp.enterPassword')" />
+          </a-form-item>
+
+          <!-- Unlock -->
+          <a-button type="primary" html-type="submit">{{ $t('general.unlock') }}</a-button>
+        </a-form>
+      </div>
+    </a-modal>
   </NuxtLayout>
 </template>
 
diff --git a/packages/nc-gui/pages/[projectType]/form/[viewId]/index.vue b/packages/nc-gui/pages/[projectType]/form/[viewId]/index.vue
index 752e0ca3b2..b1f5b50458 100644
--- a/packages/nc-gui/pages/[projectType]/form/[viewId]/index.vue
+++ b/packages/nc-gui/pages/[projectType]/form/[viewId]/index.vue
@@ -1,25 +1,20 @@
 <script setup lang="ts">
-import { useDark, useRoute, useSharedFormStoreOrThrow, useTheme, watch } from '#imports'
+import { navigateTo, useDark, useRoute, useRouter, useSharedFormStoreOrThrow, useTheme, watch } from '#imports'
 
-const { passwordDlg, password, loadSharedView } = useSharedFormStoreOrThrow()
-
-const route = useRoute()
+const { sharedViewMeta } = useSharedFormStoreOrThrow()
 
 const isDark = useDark()
 
 const { setTheme } = useTheme()
 
+const route = useRoute()
+
+const router = useRouter()
+
 watch(
-  () => route.query.theme,
+  () => sharedViewMeta.value.theme,
   (nextTheme) => {
-    if (nextTheme) {
-      const theme = (nextTheme as string).split(',').map((t) => t.trim() && `#${t}`)
-
-      setTheme({
-        primaryColor: theme[0],
-        accentColor: theme[1],
-      })
-    }
+    if (nextTheme) setTheme(nextTheme)
   },
   { immediate: true },
 )
@@ -27,6 +22,20 @@ watch(
 const onClick = () => {
   isDark.value = !isDark.value
 }
+
+const shouldRedirect = (to: string) => {
+  if (sharedViewMeta.value.surveyMode) {
+    if (!to.includes('survey')) navigateTo(`/nc/form/${route.params.viewId}/survey`)
+  } else {
+    navigateTo(`/nc/form/${route.params.viewId}`)
+  }
+}
+
+shouldRedirect(route.name as string)
+
+router.afterEach((to) => {
+  shouldRedirect(to.name as string)
+})
 </script>
 
 <template>
@@ -48,30 +57,6 @@ const onClick = () => {
         <MaterialSymbolsLightModeOutline v-else />
       </Transition>
     </div>
-
-    <a-modal
-      v-model:visible="passwordDlg"
-      :closable="false"
-      width="28rem"
-      centered
-      :footer="null"
-      :mask-closable="false"
-      wrap-class-name="nc-modal-shared-form-password-dlg"
-      @close="passwordDlg = false"
-    >
-      <div class="w-full flex flex-col">
-        <a-typography-title :level="4">This shared view is protected</a-typography-title>
-
-        <a-form ref="formRef" :model="{ password }" class="mt-2" @finish="loadSharedView">
-          <a-form-item name="password" :rules="[{ required: true, message: $t('msg.error.signUpRules.passwdRequired') }]">
-            <a-input-password v-model:value="password" :placeholder="$t('msg.info.signUp.enterPassword')" />
-          </a-form-item>
-
-          <!-- Unlock -->
-          <a-button type="primary" html-type="submit">{{ $t('general.unlock') }}</a-button>
-        </a-form>
-      </div>
-    </a-modal>
   </div>
 </template>
 
diff --git a/packages/nc-gui/pages/[projectType]/form/[viewId]/index/survey.vue b/packages/nc-gui/pages/[projectType]/form/[viewId]/index/survey.vue
index 8404cdeebf..075d59489a 100644
--- a/packages/nc-gui/pages/[projectType]/form/[viewId]/index/survey.vue
+++ b/packages/nc-gui/pages/[projectType]/form/[viewId]/index/survey.vue
@@ -136,7 +136,7 @@ onKeyStroke(['ArrowRight', 'ArrowUp', 'Enter', 'Space'], goNext)
   <div ref="el" class="w-full min-h-2/3 grid grid-rows-2">
     <template v-if="sharedFormView">
       <div class="max-w-[max(33%,600px)] m-auto flex flex-col justify-end">
-        <h1 class="prose-2xl font-bold my-4">{{ sharedFormView.heading }}</h1>
+        <h1 class="prose-2xl font-bold self-center my-4">{{ sharedFormView.heading }}</h1>
 
         <h2 class="prose-lg text-slate-500 dark:text-slate-300 self-center mb-4">
           {{ sharedFormView.subheading }}
@@ -226,7 +226,9 @@ onKeyStroke(['ArrowRight', 'ArrowUp', 'Enter', 'Space'], goNext)
                 </a-tooltip>
 
                 <!-- todo: i18n -->
-                <div class="text-sm flex items-center gap-1">Press Enter <MaterialSymbolsKeyboardReturn class="mt-1" /></div>
+                <div class="text-sm text-gray-500 flex items-center gap-1">
+                  Press Enter <MaterialSymbolsKeyboardReturn class="mt-1" />
+                </div>
               </div>
             </div>
           </div>

From a91c980ba34b7de1fae60c51a5c64e747975f175 Mon Sep 17 00:00:00 2001
From: braks <78412429+bcakmakoglu@users.noreply.github.com>
Date: Tue, 4 Oct 2022 16:12:17 +0200
Subject: [PATCH 49/82] fix(nc-gui): password type

---
 .../nc-gui/components/smartsheet/toolbar/ShareView.vue    | 8 +++-----
 1 file changed, 3 insertions(+), 5 deletions(-)

diff --git a/packages/nc-gui/components/smartsheet/toolbar/ShareView.vue b/packages/nc-gui/components/smartsheet/toolbar/ShareView.vue
index 1241d2f423..9c241003f3 100644
--- a/packages/nc-gui/components/smartsheet/toolbar/ShareView.vue
+++ b/packages/nc-gui/components/smartsheet/toolbar/ShareView.vue
@@ -27,7 +27,7 @@ interface SharedViewMeta extends Record<string, any> {
 interface SharedView {
   uuid?: string
   id: string
-  password: string | null
+  password?: string
   type?: ViewTypes
   meta: SharedViewMeta
 }
@@ -52,7 +52,7 @@ let showShareModel = $ref(false)
 
 const passwordProtected = ref(false)
 
-const shared = ref<SharedView>({ id: '', meta: {}, password: null })
+const shared = ref<SharedView>({ id: '', meta: {}, password: undefined })
 
 const allowCSVDownload = computed({
   get: () => !!shared.value.meta.allowCSVDownload,
@@ -86,7 +86,7 @@ const genShareLink = async () => {
 
   shared.value = { ...response, meta }
 
-  passwordProtected.value = shared.value.password !== null && shared.value.password !== ''
+  passwordProtected.value = !!shared.value.password && shared.value.password !== ''
 
   showShareModel = true
 }
@@ -141,8 +141,6 @@ async function updateSharedViewMeta() {
 }
 
 const saveShareLinkPassword = async () => {
-  if (!shared.value.password) return
-
   try {
     await $api.dbViewShare.update(shared.value.id, {
       password: shared.value.password,

From de519ccfff2718133f098cbffd1bab80a8f52e62 Mon Sep 17 00:00:00 2001
From: braks <78412429+bcakmakoglu@users.noreply.github.com>
Date: Tue, 4 Oct 2022 17:07:39 +0200
Subject: [PATCH 50/82] refactor(nc-gui): form view styles

---
 .../nc-gui/components/smartsheet/Form.vue     | 103 +++++++++---------
 .../[projectType]/form/[viewId]/index.vue     |  10 +-
 .../form/[viewId]/index/index.vue             |   4 +-
 .../form/[viewId]/index/survey.vue            |  28 +++--
 4 files changed, 71 insertions(+), 74 deletions(-)

diff --git a/packages/nc-gui/components/smartsheet/Form.vue b/packages/nc-gui/components/smartsheet/Form.vue
index 8a69da9853..2892c67ead 100644
--- a/packages/nc-gui/components/smartsheet/Form.vue
+++ b/packages/nc-gui/components/smartsheet/Form.vue
@@ -555,6 +555,7 @@ watch(view, (nextView) => {
                 />
               </a-form-item>
             </div>
+
             <div v-else class="px-4 ml-3 w-full text-bold text-md">{{ formViewData.subheading || '---' }}</div>
 
             <Draggable
@@ -575,7 +576,7 @@ watch(view, (nextView) => {
                   :class="[
                     `nc-form-drag-${element.title.replaceAll(' ', '')}`,
                     {
-                      'border-1': activeRow === element.title,
+                      'bg-primary bg-opacity-5 ring-0.5 ring-accent ring-opacity-100': activeRow === element.title,
                     },
                   ]"
                   @click="activeRow = element.title"
@@ -584,62 +585,53 @@ watch(view, (nextView) => {
                     v-if="isUIAllowed('editFormView') && !isRequired(element, element.required)"
                     class="absolute flex top-2 right-2"
                   >
-                    <mdi-eye-off-outline class="opacity-0 nc-field-remove-icon" @click.stop="hideColumn(index)" />
+                    <MdiEyeOffOutline class="opacity-0 nc-field-remove-icon" @click.stop="hideColumn(index)" />
                   </div>
 
-                  <template v-if="activeRow === element.title">
-                    <div class="flex">
-                      <div
-                        class="flex flex-1 opacity-0 align-center gap-2"
-                        :class="{ 'opacity-100': activeRow === element.title }"
+                  <div v-if="activeRow === element.title" class="flex flex-col gap-3 mb-3">
+                    <div class="flex gap-2 items-center">
+                      <span
+                        class="text-gray-500 mr-2 nc-form-input-required"
+                        @click="
+                          () => {
+                            element.required = !element.required
+                            updateColMeta(element)
+                          }
+                        "
                       >
-                        <div class="items-center flex">
-                          <span
-                            class="text-xs text-gray-500 mr-2 nc-form-input-required"
-                            @click="
-                              () => {
-                                element.required = !element.required
-                                updateColMeta(element)
-                              }
-                            "
-                          >
-                            {{ $t('general.required') }}
-                          </span>
-
-                          <a-switch
-                            v-model:checked="element.required"
-                            v-e="['a:form-view:field:mark-required']"
-                            size="small"
-                            class="ml-2"
-                            @change="updateColMeta(element)"
-                          />
-                        </div>
-                      </div>
+                        {{ $t('general.required') }}
+                      </span>
+
+                      <a-switch
+                        v-model:checked="element.required"
+                        v-e="['a:form-view:field:mark-required']"
+                        size="small"
+                        @change="updateColMeta(element)"
+                      />
                     </div>
 
-                    <div class="my-3">
-                      <a-form-item class="my-0 w-1/2 !mb-1">
-                        <a-input
-                          v-model:value="element.label"
-                          size="small"
-                          class="form-meta-input !bg-[#dbdbdb] nc-form-input-label"
-                          :placeholder="$t('msg.info.formInput')"
-                          @change="updateColMeta(element)"
-                        >
-                        </a-input>
-                      </a-form-item>
-
-                      <a-form-item class="mt-2 mb-0 w-1/2 !mb-1">
-                        <a-input
-                          v-model:value="element.description"
-                          size="small"
-                          class="form-meta-input !bg-[#dbdbdb] text-sm nc-form-input-help-text"
-                          :placeholder="$t('msg.info.formHelpText')"
-                          @change="updateColMeta(element)"
-                        />
-                      </a-form-item>
-                    </div>
-                  </template>
+                    <a-form-item class="my-0 w-1/2 !mb-1">
+                      <a-input
+                        v-model:value="element.label"
+                        type="text"
+                        class="form-meta-input nc-form-input-label"
+                        :placeholder="$t('msg.info.formInput')"
+                        @change="updateColMeta(element)"
+                      >
+                      </a-input>
+                    </a-form-item>
+
+                    <a-form-item class="mt-2 mb-0 w-1/2 !mb-1">
+                      <a-input
+                        v-model:value="element.description"
+                        type="text"
+                        class="form-meta-input text-sm nc-form-input-help-text"
+                        :placeholder="$t('msg.info.formHelpText')"
+                        @change="updateColMeta(element)"
+                      />
+                    </a-form-item>
+                  </div>
+
                   <div>
                     <LazySmartsheetHeaderVirtualCell
                       v-if="isVirtualCol(element)"
@@ -647,6 +639,7 @@ watch(view, (nextView) => {
                       :required="isRequired(element, element.required)"
                       :hide-menu="true"
                     />
+
                     <LazySmartsheetHeaderCell
                       v-else
                       :column="{ ...element, title: element.label || element.title }"
@@ -658,6 +651,7 @@ watch(view, (nextView) => {
                   <a-form-item
                     v-if="isVirtualCol(element)"
                     :name="element.title"
+                    class="!mb-0"
                     :rules="[{ required: isRequired(element, element.required), message: `${element.title} is required` }]"
                   >
                     <LazySmartsheetVirtualCell
@@ -673,6 +667,7 @@ watch(view, (nextView) => {
                   <a-form-item
                     v-else
                     :name="element.title"
+                    class="!mb-0"
                     :rules="[{ required: isRequired(element, element.required), message: `${element.title} is required` }]"
                   >
                     <LazySmartsheetCell
@@ -685,7 +680,7 @@ watch(view, (nextView) => {
                     />
                   </a-form-item>
 
-                  <span class="text-gray-500 text-xs -mt-1 block">{{ element.description }}</span>
+                  <div class="text-gray-500 text-xs">{{ element.description }}</div>
                 </div>
               </template>
 
@@ -700,7 +695,7 @@ watch(view, (nextView) => {
             </Draggable>
 
             <div class="justify-center flex mt-6">
-              <button type="submit" class="scaling-btn nc-form-submit" @click="submitForm">
+              <button type="submit" class="uppercase scaling-btn nc-form-submit" @click="submitForm">
                 {{ $t('general.submit') }}
               </button>
             </div>
diff --git a/packages/nc-gui/pages/[projectType]/form/[viewId]/index.vue b/packages/nc-gui/pages/[projectType]/form/[viewId]/index.vue
index b1f5b50458..d5f27fa57e 100644
--- a/packages/nc-gui/pages/[projectType]/form/[viewId]/index.vue
+++ b/packages/nc-gui/pages/[projectType]/form/[viewId]/index.vue
@@ -27,15 +27,13 @@ const shouldRedirect = (to: string) => {
   if (sharedViewMeta.value.surveyMode) {
     if (!to.includes('survey')) navigateTo(`/nc/form/${route.params.viewId}/survey`)
   } else {
-    navigateTo(`/nc/form/${route.params.viewId}`)
+    if (to.includes('survey')) navigateTo(`/nc/form/${route.params.viewId}`)
   }
 }
 
 shouldRedirect(route.name as string)
 
-router.afterEach((to) => {
-  shouldRedirect(to.name as string)
-})
+router.afterEach((to) => shouldRedirect(to.name as string))
 </script>
 
 <template>
@@ -82,8 +80,8 @@ p {
     > div {
       @apply bg-white dark:(bg-slate-500 text-white);
 
-      .nc-icon {
-        @apply dark:text-slate-900;
+      .ant-btn {
+        @apply dark:(bg-slate-300);
       }
 
       .chip {
diff --git a/packages/nc-gui/pages/[projectType]/form/[viewId]/index/index.vue b/packages/nc-gui/pages/[projectType]/form/[viewId]/index/index.vue
index 4ec20f3ded..6f2aa46a44 100644
--- a/packages/nc-gui/pages/[projectType]/form/[viewId]/index/index.vue
+++ b/packages/nc-gui/pages/[projectType]/form/[viewId]/index/index.vue
@@ -21,7 +21,7 @@ function isRequired(_columnObj: Record<string, any>, required = false) {
 
 <template>
   <div
-    class="color-transition bg-white dark:bg-slate-700 relative flex flex-col justify-center gap-2 w-full max-w-[max(33%,600px)] m-auto py-4 pb-8 px-16 md:(rounded-lg border-1 border-gray-200 shadow-xl) mt-12"
+    class="color-transition relative flex flex-col justify-center gap-2 w-full max-w-[max(33%,600px)] m-auto py-4 pb-8 px-16 md:(bg-white dark:bg-slate-700 rounded-lg border-1 border-gray-200 shadow-xl) mt-12"
   >
     <template v-if="sharedFormView">
       <h1 class="prose-2xl font-bold self-center my-4">{{ sharedFormView.heading }}</h1>
@@ -109,7 +109,7 @@ function isRequired(_columnObj: Record<string, any>, required = false) {
             </div>
 
             <div class="text-center mt-4">
-              <button type="submit" class="scaling-btn prose-sm" @click="submitForm">
+              <button type="submit" class="uppercase scaling-btn prose-sm" @click="submitForm">
                 {{ $t('general.submit') }}
               </button>
             </div>
diff --git a/packages/nc-gui/pages/[projectType]/form/[viewId]/index/survey.vue b/packages/nc-gui/pages/[projectType]/form/[viewId]/index/survey.vue
index 075d59489a..b2a90d89a2 100644
--- a/packages/nc-gui/pages/[projectType]/form/[viewId]/index/survey.vue
+++ b/packages/nc-gui/pages/[projectType]/form/[viewId]/index/survey.vue
@@ -133,23 +133,25 @@ onKeyStroke(['ArrowRight', 'ArrowUp', 'Enter', 'Space'], goNext)
 </script>
 
 <template>
-  <div ref="el" class="w-full min-h-2/3 grid grid-rows-2">
+  <div ref="el" class="w-full grid grid-rows-2">
     <template v-if="sharedFormView">
-      <div class="max-w-[max(33%,600px)] m-auto flex flex-col justify-end">
-        <h1 class="prose-2xl font-bold self-center my-4">{{ sharedFormView.heading }}</h1>
+      <div class="max-w-[max(33%,600px)] mx-auto">
+        <div class="h-33vh flex flex-col justify-end">
+          <h1 class="prose-2xl font-bold self-center my-4">{{ sharedFormView.heading }}</h1>
 
-        <h2 class="prose-lg text-slate-500 dark:text-slate-300 self-center mb-4">
-          {{ sharedFormView.subheading }}
-        </h2>
+          <h2 class="prose-lg text-slate-500 dark:text-slate-300 self-center mb-4">
+            {{ sharedFormView.subheading }}
+          </h2>
+        </div>
       </div>
     </template>
 
-    <div class="h-1/2 w-full flex items-center px-4 md:px-0">
+    <div class="h-full w-full flex items-center px-4 md:px-0">
       <Transition :name="`slide-${transitionName}`" :duration="1000" mode="out-in">
         <div
           ref="el"
           :key="field.title"
-          class="color-transition flex flex-col justify-center gap-4 w-full max-w-[max(33%,600px)] m-auto"
+          class="color-transition h-full flex flex-col justify-center gap-4 w-full max-w-[max(33%,600px)] m-auto"
         >
           <div v-if="field && !submitted" class="flex flex-col gap-2">
             <div class="flex nc-form-column-label">
@@ -190,7 +192,9 @@ onKeyStroke(['ArrowRight', 'ArrowUp', 'Enter', 'Space'], goNext)
                   {{ error.$message }}
                 </div>
 
-                {{ field.description }}
+                <div class="block">
+                  {{ field.description }}
+                </div>
               </div>
             </div>
           </div>
@@ -233,9 +237,9 @@ onKeyStroke(['ArrowRight', 'ArrowUp', 'Enter', 'Space'], goNext)
             </div>
           </div>
 
-          <div class="mt-12 select-none text-center text-gray-500 dark:text-slate-200">
-            {{ index + 1 }} / {{ formColumns?.length }}
-          </div>
+          <div class="flex-1" />
+
+          <div class="select-none text-center text-gray-500 dark:text-slate-200">{{ index + 1 }} / {{ formColumns?.length }}</div>
 
           <Transition name="layout">
             <div v-if="submitted" class="flex flex-col justify-center text-center">

From 5373c3036866db58b322b424d3be9dedff57a376 Mon Sep 17 00:00:00 2001
From: braks <78412429+bcakmakoglu@users.noreply.github.com>
Date: Tue, 4 Oct 2022 18:50:11 +0200
Subject: [PATCH 51/82] feat(nc-gui): auto focus inputs in survey form

---
 .../form/[viewId]/index/survey.vue             | 18 ++++++++++++++++++
 1 file changed, 18 insertions(+)

diff --git a/packages/nc-gui/pages/[projectType]/form/[viewId]/index/survey.vue b/packages/nc-gui/pages/[projectType]/form/[viewId]/index/survey.vue
index b2a90d89a2..dbad8242b6 100644
--- a/packages/nc-gui/pages/[projectType]/form/[viewId]/index/survey.vue
+++ b/packages/nc-gui/pages/[projectType]/form/[viewId]/index/survey.vue
@@ -6,6 +6,7 @@ import {
   DropZoneRef,
   computed,
   onKeyStroke,
+  onMounted,
   provide,
   ref,
   useEventListener,
@@ -85,6 +86,8 @@ function transition(direction: TransitionDirection) {
 
   setTimeout(() => {
     isTransitioning.value = false
+
+    setTimeout(focusInput, 100)
   }, 1000)
 }
 
@@ -113,6 +116,19 @@ async function goPrevious() {
   goToPrevious()
 }
 
+function focusInput() {
+  if (document && typeof document !== 'undefined') {
+    const inputEl =
+      (document.querySelector('.nc-cell input') as HTMLInputElement) ||
+      (document.querySelector('.nc-cell textarea') as HTMLTextAreaElement)
+
+    if (inputEl) {
+      inputEl.select()
+      inputEl.focus()
+    }
+  }
+}
+
 useEventListener('wheel', (event) => {
   if (Math.abs(event.deltaX) < Math.abs(event.deltaY)) {
     // Scrolling more vertically than horizontally
@@ -130,6 +146,8 @@ useEventListener('wheel', (event) => {
 
 onKeyStroke(['ArrowLeft', 'ArrowDown'], goPrevious)
 onKeyStroke(['ArrowRight', 'ArrowUp', 'Enter', 'Space'], goNext)
+
+onMounted(focusInput)
 </script>
 
 <template>

From b4f4f7de6f44c16d2ae1728e71b4dac625cac661 Mon Sep 17 00:00:00 2001
From: braks <78412429+bcakmakoglu@users.noreply.github.com>
Date: Tue, 4 Oct 2022 18:57:57 +0200
Subject: [PATCH 52/82] feat(nc-gui): dark mode icon for powered by

---
 packages/nc-gui/components/general/NocoIcon.vue             | 6 ++++--
 packages/nc-gui/components/general/PoweredBy.vue            | 2 +-
 packages/nc-gui/pages/[projectType]/form/[viewId]/index.vue | 2 +-
 3 files changed, 6 insertions(+), 4 deletions(-)

diff --git a/packages/nc-gui/components/general/NocoIcon.vue b/packages/nc-gui/components/general/NocoIcon.vue
index 8b2ae0a1bd..78fe72378c 100644
--- a/packages/nc-gui/components/general/NocoIcon.vue
+++ b/packages/nc-gui/components/general/NocoIcon.vue
@@ -3,15 +3,17 @@ interface Props {
   width?: number
   height?: number
   animate?: boolean
+  dark?: boolean
 }
 
-const { width = 90, height = 90, animate = false } = defineProps<Props>()
+const { width = 90, height = 90, animate = false, dark = false } = defineProps<Props>()
 </script>
 
 <template>
   <div :style="{ left: `calc(50% - ${width / 2}px)`, top: `-${height / 2}px` }" class="absolute rounded-lg pt-1 pl-1 -ml-1">
     <div class="relative">
-      <img :width="width" :height="height" alt="NocoDB" src="~/assets/img/icons/512x512.png" />
+      <img v-show="dark" :width="width" :height="height" alt="NocoDB" src="~/assets/img/icons/512x512-trans.png" />
+      <img v-show="!dark" :width="width" :height="height" alt="NocoDB" src="~/assets/img/icons/512x512.png" />
 
       <template v-if="animate">
         <div class="animated-bg-gradient opacity-100 rounded-full z-0 absolute bottom-1.45 right-1.45 h-4.5 w-4.5" />
diff --git a/packages/nc-gui/components/general/PoweredBy.vue b/packages/nc-gui/components/general/PoweredBy.vue
index 92f32da4b6..d4c4565287 100644
--- a/packages/nc-gui/components/general/PoweredBy.vue
+++ b/packages/nc-gui/components/general/PoweredBy.vue
@@ -9,7 +9,7 @@ import { openLink } from '#imports'
     @click="openLink('https://github.com/nocodb/nocodb')"
   >
     <span class="rounded">
-      <GeneralNocoIcon class="!relative !top-0" :width="32" :height="32" />
+      <GeneralNocoIcon v-bind="$attrs" class="!relative !top-0" :width="32" :height="32" />
     </span>
 
     <span>Powered by NocoDB</span>
diff --git a/packages/nc-gui/pages/[projectType]/form/[viewId]/index.vue b/packages/nc-gui/pages/[projectType]/form/[viewId]/index.vue
index d5f27fa57e..7b806b219c 100644
--- a/packages/nc-gui/pages/[projectType]/form/[viewId]/index.vue
+++ b/packages/nc-gui/pages/[projectType]/form/[viewId]/index.vue
@@ -43,7 +43,7 @@ router.afterEach((to) => shouldRedirect(to.name as string))
     <NuxtPage />
 
     <div class="flex w-full items-end mt-12">
-      <GeneralPoweredBy />
+      <GeneralPoweredBy :dark="isDark" />
     </div>
 
     <div

From 83f21a3ff4a75a79411c3577a0bb7467b8537079 Mon Sep 17 00:00:00 2001
From: braks <78412429+bcakmakoglu@users.noreply.github.com>
Date: Wed, 5 Oct 2022 11:39:03 +0200
Subject: [PATCH 53/82] chore(nc-gui): form view styles

---
 packages/nc-gui/components/smartsheet/Form.vue | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/nc-gui/components/smartsheet/Form.vue b/packages/nc-gui/components/smartsheet/Form.vue
index 2892c67ead..35c9aaaafb 100644
--- a/packages/nc-gui/components/smartsheet/Form.vue
+++ b/packages/nc-gui/components/smartsheet/Form.vue
@@ -415,7 +415,7 @@ watch(view, (nextView) => {
           <button
             v-if="hiddenColumns.length"
             type="button"
-            class="nc-form-add-all color-transition bg-white transform hover:(text-primary bg-primary bg-opacity-5 ring ring-accent ring-opacity-100) active:translate-y-[1px] px-2 py-1 border-b-2 border-slate-300 shadow-sm rounded"
+            class="nc-form-add-all color-transition bg-white transform hover:(text-primary ring ring-accent ring-opacity-100) active:translate-y-[1px] px-2 py-1 shadow-md rounded"
             @click="addAllColumns"
           >
             <!-- Add all -->
@@ -425,7 +425,7 @@ watch(view, (nextView) => {
           <button
             v-if="localColumns.length"
             type="button"
-            class="nc-form-remove-all color-transition bg-white transform hover:(text-primary bg-primary bg-opacity-5 ring ring-accent ring-opacity-100) active:translate-y-[1px] px-2 py-1 border-b-2 border-slate-300 shadow-sm rounded"
+            class="nc-form-remove-all color-transition bg-white transform hover:(text-primary ring ring-accent ring-opacity-100) active:translate-y-[1px] px-2 py-1 shadow-md rounded"
             @click="removeAllColumns"
           >
             <!-- Remove all -->

From 6652c39bf571d081da2c9beaa03afcabfbe8b8c5 Mon Sep 17 00:00:00 2001
From: braks <78412429+bcakmakoglu@users.noreply.github.com>
Date: Wed, 5 Oct 2022 12:10:41 +0200
Subject: [PATCH 54/82] refactor(nc-gui): only enable swipe controls for mobile
 layout

---
 .../form/[viewId]/index/survey.vue            | 53 ++++++++-----------
 packages/nc-gui/pages/index/index/index.vue   |  3 +-
 2 files changed, 24 insertions(+), 32 deletions(-)

diff --git a/packages/nc-gui/pages/[projectType]/form/[viewId]/index/survey.vue b/packages/nc-gui/pages/[projectType]/form/[viewId]/index/survey.vue
index dbad8242b6..59e8468c20 100644
--- a/packages/nc-gui/pages/[projectType]/form/[viewId]/index/survey.vue
+++ b/packages/nc-gui/pages/[projectType]/form/[viewId]/index/survey.vue
@@ -1,7 +1,7 @@
 <script lang="ts" setup>
 import type { ColumnType, LinkToAnotherRecordType } from 'nocodb-sdk'
 import { RelationTypes, UITypes, isVirtualCol } from 'nocodb-sdk'
-import { SwipeDirection } from '@vueuse/core'
+import { SwipeDirection, breakpointsTailwind } from '@vueuse/core'
 import {
   DropZoneRef,
   computed,
@@ -9,7 +9,7 @@ import {
   onMounted,
   provide,
   ref,
-  useEventListener,
+  useBreakpoints,
   usePointerSwipe,
   useSharedFormStoreOrThrow,
   useStepper,
@@ -20,6 +20,8 @@ enum TransitionDirection {
   Right = 'right',
 }
 
+const { md } = useBreakpoints(breakpointsTailwind)
+
 const { v$, formState, formColumns, submitForm, submitted, secondsRemain, sharedFormView } = useSharedFormStoreOrThrow()
 
 const isTransitioning = ref(false)
@@ -28,18 +30,6 @@ const transitionName = ref<TransitionDirection>(TransitionDirection.Left)
 
 const el = ref<HTMLDivElement>()
 
-const { direction } = usePointerSwipe(el, {
-  onSwipe: () => {
-    if (isTransitioning.value) return
-
-    if (direction.value === SwipeDirection.LEFT) {
-      goNext()
-    } else if (direction.value === SwipeDirection.RIGHT) {
-      goPrevious()
-    }
-  },
-})
-
 provide(DropZoneRef, el)
 
 const steps = computed(() => {
@@ -129,25 +119,26 @@ function focusInput() {
   }
 }
 
-useEventListener('wheel', (event) => {
-  if (Math.abs(event.deltaX) < Math.abs(event.deltaY)) {
-    // Scrolling more vertically than horizontally
-    return
-  }
-
-  if (isTransitioning.value) return
-
-  if (event.deltaX < -15) {
-    goPrevious()
-  } else if (event.deltaX > 15) {
-    goNext()
-  }
-})
-
 onKeyStroke(['ArrowLeft', 'ArrowDown'], goPrevious)
 onKeyStroke(['ArrowRight', 'ArrowUp', 'Enter', 'Space'], goNext)
 
-onMounted(focusInput)
+onMounted(() => {
+  focusInput()
+
+  if (!md.value) {
+    const { direction } = usePointerSwipe(el, {
+      onSwipe: () => {
+        if (isTransitioning.value) return
+
+        if (direction.value === SwipeDirection.LEFT) {
+          goNext()
+        } else if (direction.value === SwipeDirection.RIGHT) {
+          goPrevious()
+        }
+      },
+    })
+  }
+})
 </script>
 
 <template>
@@ -248,7 +239,7 @@ onMounted(focusInput)
                 </a-tooltip>
 
                 <!-- todo: i18n -->
-                <div class="text-sm text-gray-500 flex items-center gap-1">
+                <div class="hidden md:flex text-sm text-gray-500 items-center gap-1">
                   Press Enter <MaterialSymbolsKeyboardReturn class="mt-1" />
                 </div>
               </div>
diff --git a/packages/nc-gui/pages/index/index/index.vue b/packages/nc-gui/pages/index/index/index.vue
index 8280d3ec43..f0ee020dbc 100644
--- a/packages/nc-gui/pages/index/index/index.vue
+++ b/packages/nc-gui/pages/index/index/index.vue
@@ -204,7 +204,8 @@ onBeforeMount(loadProjects)
         <a-skeleton />
       </div>
 
-      <a-table v-else
+      <a-table
+        v-else
         :custom-row="customRow"
         :data-source="filteredProjects"
         :pagination="{ position: ['bottomCenter'] }"

From a9c6d3dabe3233f540bc7df807df5050a21c9fa3 Mon Sep 17 00:00:00 2001
From: braks <78412429+bcakmakoglu@users.noreply.github.com>
Date: Wed, 5 Oct 2022 12:11:24 +0200
Subject: [PATCH 55/82] refactor(nc-gui): survey success msg

---
 packages/nc-gui/components.d.ts               |  1 +
 .../form/[viewId]/index/survey.vue            | 43 +++++++++++--------
 2 files changed, 27 insertions(+), 17 deletions(-)

diff --git a/packages/nc-gui/components.d.ts b/packages/nc-gui/components.d.ts
index 7410404066..af1b931596 100644
--- a/packages/nc-gui/components.d.ts
+++ b/packages/nc-gui/components.d.ts
@@ -100,6 +100,7 @@ declare module '@vue/runtime-core' {
     MaterialSymbolsAttachFile: typeof import('~icons/material-symbols/attach-file')['default']
     MaterialSymbolsChevronRightRounded: typeof import('~icons/material-symbols/chevron-right-rounded')['default']
     MaterialSymbolsCloseRounded: typeof import('~icons/material-symbols/close-rounded')['default']
+    MaterialSymbolsDarkModeOutline: typeof import('~icons/material-symbols/dark-mode-outline')['default']
     MaterialSymbolsFileCopyOutline: typeof import('~icons/material-symbols/file-copy-outline')['default']
     MaterialSymbolsKeyboardReturn: typeof import('~icons/material-symbols/keyboard-return')['default']
     MaterialSymbolsLightModeOutline: typeof import('~icons/material-symbols/light-mode-outline')['default']
diff --git a/packages/nc-gui/pages/[projectType]/form/[viewId]/index/survey.vue b/packages/nc-gui/pages/[projectType]/form/[viewId]/index/survey.vue
index 59e8468c20..3c2f3d4eac 100644
--- a/packages/nc-gui/pages/[projectType]/form/[viewId]/index/survey.vue
+++ b/packages/nc-gui/pages/[projectType]/form/[viewId]/index/survey.vue
@@ -142,9 +142,9 @@ onMounted(() => {
 </script>
 
 <template>
-  <div ref="el" class="w-full grid grid-rows-2">
+  <div ref="el" class="w-full grid">
     <template v-if="sharedFormView">
-      <div class="max-w-[max(33%,600px)] mx-auto">
+      <div class="max-h-33vh max-w-[max(33%,600px)] mx-auto">
         <div class="h-33vh flex flex-col justify-end">
           <h1 class="prose-2xl font-bold self-center my-4">{{ sharedFormView.heading }}</h1>
 
@@ -216,7 +216,7 @@ onMounted(() => {
                 </button>
               </div>
 
-              <div v-else class="flex items-center gap-3">
+              <div v-else-if="!submitted" class="flex items-center gap-3">
                 <a-tooltip
                   :title="v$.localState[field.title]?.$error ? v$.localState[field.title].$errors[0].$message : 'Go to next'"
                   :mouse-enter-delay="0.25"
@@ -246,22 +246,31 @@ onMounted(() => {
             </div>
           </div>
 
-          <div class="flex-1" />
+          <template v-if="!submitted">
+            <div class="flex-1" />
 
-          <div class="select-none text-center text-gray-500 dark:text-slate-200">{{ index + 1 }} / {{ formColumns?.length }}</div>
-
-          <Transition name="layout">
-            <div v-if="submitted" class="flex flex-col justify-center text-center">
-              <h2 class="prose-xl mb-2">Thank you!</h2>
-
-              <div v-if="sharedFormView" class="min-w-350px mt-3">
-                <a-alert
-                  type="success"
-                  class="my-4 text-center"
-                  outlined
-                  :message="sharedFormView.success_msg || 'Successfully submitted form data'"
-                />
+            <div class="select-none text-center text-gray-500 dark:text-slate-200">
+              {{ index + 1 }} / {{ formColumns?.length }}
+            </div>
+          </template>
+
+          <Transition name="slide-left">
+            <div v-if="submitted" class="flex flex-col justify-center items-center text-center">
+              <div class="text-lg px-6 py-3 bg-green-300 text-gray-700 rounded">
+                <template v-if="sharedFormView?.success_msg">
+                  {{ sharedFormView?.success_msg }}
+                </template>
+
+                <template v-else>
+                  <div class="flex flex-col gap-1">
+                    <div>Thank you!</div>
+
+                    <div>You have successfully submitted the form data.</div>
+                  </div>
+                </template>
+              </div>
 
+              <div v-if="sharedFormView" class="mt-3">
                 <p v-if="sharedFormView?.show_blank_form" class="text-xs text-slate-500 dark:text-slate-300 text-center my-4">
                   New form will be loaded after {{ secondsRemain }} seconds
                 </p>

From f9be31038db08ee906a737106c8ea002434f75ed Mon Sep 17 00:00:00 2001
From: braks <78412429+bcakmakoglu@users.noreply.github.com>
Date: Wed, 5 Oct 2022 12:21:11 +0200
Subject: [PATCH 56/82] chore(nc-gui): hide navigation arrows when form was
 submitted

---
 packages/nc-gui/assets/style.scss             |  2 +-
 .../form/[viewId]/index/survey.vue            | 45 ++++++++++---------
 2 files changed, 25 insertions(+), 22 deletions(-)

diff --git a/packages/nc-gui/assets/style.scss b/packages/nc-gui/assets/style.scss
index 1ec8e5935d..ed7c8d2df5 100644
--- a/packages/nc-gui/assets/style.scss
+++ b/packages/nc-gui/assets/style.scss
@@ -214,7 +214,7 @@ a {
   }
 
   &:hover::after {
-    @apply !border-0 transform scale-110 ring ring-accent;
+    @apply transform scale-110 ring ring-accent;
   }
 
   &:active::after {
diff --git a/packages/nc-gui/pages/[projectType]/form/[viewId]/index/survey.vue b/packages/nc-gui/pages/[projectType]/form/[viewId]/index/survey.vue
index 3c2f3d4eac..cef0f5cf4b 100644
--- a/packages/nc-gui/pages/[projectType]/form/[viewId]/index/survey.vue
+++ b/packages/nc-gui/pages/[projectType]/form/[viewId]/index/survey.vue
@@ -285,28 +285,31 @@ onMounted(() => {
       </Transition>
     </div>
 
-    <div
-      class="color-transition shadow-sm absolute bottom-18 right-1/2 transform translate-x-[50%] md:bottom-4 md:(right-12 transform-none) flex items-center bg-white border dark:bg-slate-500 rounded divide-x-1"
-    >
-      <a-tooltip title="Go to previous" :mouse-enter-delay="0.25" :mouse-leave-delay="0">
-        <button class="p-0.5 flex items-center group color-transition" @click="goPrevious">
-          <MdiChevronLeft :class="isFirst ? 'text-gray-300' : 'group-hover:text-accent'" class="text-2xl md:text-md" />
-        </button>
-      </a-tooltip>
-
-      <a-tooltip
-        :title="v$.localState[field.title]?.$error ? v$.localState[field.title].$errors[0].$message : 'Go to next'"
-        :mouse-enter-delay="0.25"
-        :mouse-leave-delay="0"
+    <Transition name="fade">
+      <div
+        v-if="!submitted"
+        class="color-transition shadow-sm absolute bottom-18 right-1/2 transform translate-x-[50%] md:bottom-4 md:(right-12 transform-none) flex items-center bg-white border dark:bg-slate-500 rounded divide-x-1"
       >
-        <button class="p-0.5 flex items-center group color-transition" @click="goNext">
-          <MdiChevronRight
-            :class="isLast || v$.localState[field.title]?.$error ? 'text-gray-300' : 'group-hover:text-accent'"
-            class="text-2xl md:text-md"
-          />
-        </button>
-      </a-tooltip>
-    </div>
+        <a-tooltip title="Go to previous" :mouse-enter-delay="0.25" :mouse-leave-delay="0">
+          <button class="p-0.5 flex items-center group color-transition" @click="goPrevious">
+            <MdiChevronLeft :class="isFirst ? 'text-gray-300' : 'group-hover:text-accent'" class="text-2xl md:text-md" />
+          </button>
+        </a-tooltip>
+
+        <a-tooltip
+          :title="v$.localState[field.title]?.$error ? v$.localState[field.title].$errors[0].$message : 'Go to next'"
+          :mouse-enter-delay="0.25"
+          :mouse-leave-delay="0"
+        >
+          <button class="p-0.5 flex items-center group color-transition" @click="goNext">
+            <MdiChevronRight
+              :class="isLast || v$.localState[field.title]?.$error ? 'text-gray-300' : 'group-hover:text-accent'"
+              class="text-2xl md:text-md"
+            />
+          </button>
+        </a-tooltip>
+      </div>
+    </Transition>
   </div>
 </template>
 

From 75e0a66b1debbdc4fba021feb42d662bf6e8801b Mon Sep 17 00:00:00 2001
From: braks <78412429+bcakmakoglu@users.noreply.github.com>
Date: Wed, 5 Oct 2022 12:37:04 +0200
Subject: [PATCH 57/82] feat(nc-gui): debounce updating form view data

---
 packages/nc-gui/components/smartsheet/Form.vue | 18 +++++++++++-------
 1 file changed, 11 insertions(+), 7 deletions(-)

diff --git a/packages/nc-gui/components/smartsheet/Form.vue b/packages/nc-gui/components/smartsheet/Form.vue
index 35c9aaaafb..9718296a14 100644
--- a/packages/nc-gui/components/smartsheet/Form.vue
+++ b/packages/nc-gui/components/smartsheet/Form.vue
@@ -97,13 +97,17 @@ const activeRow = ref('')
 
 const { t } = useI18n()
 
-function updateView() {
-  if ((formViewData.value?.subheading?.length || 0) > 255) {
-    message.error(t('msg.error.formDescriptionTooLong'))
-    return
-  }
-  updateFormView(formViewData.value)
-}
+const updateView = useDebounceFn(
+  () => {
+    if ((formViewData.value?.subheading?.length || 0) > 255) {
+      return message.error(t('msg.error.formDescriptionTooLong'))
+    }
+
+    updateFormView(formViewData.value)
+  },
+  500,
+  { maxWait: 5000 },
+)
 
 async function submitForm() {
   try {

From 9845cd7e78909cf93407822f72192f35d3918be9 Mon Sep 17 00:00:00 2001
From: braks <78412429+bcakmakoglu@users.noreply.github.com>
Date: Wed, 5 Oct 2022 12:37:21 +0200
Subject: [PATCH 58/82] chore(nc-gui): reset form to first step

---
 .../nc-gui/composables/useSharedFormViewStore.ts  |  5 +++++
 .../[projectType]/form/[viewId]/index/survey.vue  | 15 ++++++++++++---
 2 files changed, 17 insertions(+), 3 deletions(-)

diff --git a/packages/nc-gui/composables/useSharedFormViewStore.ts b/packages/nc-gui/composables/useSharedFormViewStore.ts
index 6247a326e4..0ed600eb21 100644
--- a/packages/nc-gui/composables/useSharedFormViewStore.ts
+++ b/packages/nc-gui/composables/useSharedFormViewStore.ts
@@ -7,6 +7,7 @@ import { isString } from '@vueuse/core'
 import {
   SharedViewPasswordInj,
   computed,
+  createEventHook,
   extractSdkResponseErrorMsg,
   message,
   provide,
@@ -33,6 +34,7 @@ const [useProvideSharedFormStore, useSharedFormStore] = useInjectionState((share
   const meta = ref<TableType>()
   const columns = ref<(ColumnType & { required?: boolean; show?: boolean; label?: string })[]>()
   const sharedViewMeta = ref<any>({})
+  const formResetHook = createEventHook<void>()
 
   const { api, isLoading } = useApi()
 
@@ -179,6 +181,8 @@ const [useProvideSharedFormStore, useSharedFormStore] = useInjectionState((share
         if (secondsRemain.value < 0) {
           submitted.value = false
 
+          formResetHook.trigger()
+
           clearInterval(intvl)
         }
       }, 1000)
@@ -211,6 +215,7 @@ const [useProvideSharedFormStore, useSharedFormStore] = useInjectionState((share
     passwordDlg,
     isLoading,
     sharedViewMeta,
+    onReset: formResetHook.on,
   }
 }, 'expanded-form-store')
 
diff --git a/packages/nc-gui/pages/[projectType]/form/[viewId]/index/survey.vue b/packages/nc-gui/pages/[projectType]/form/[viewId]/index/survey.vue
index cef0f5cf4b..167a5481fe 100644
--- a/packages/nc-gui/pages/[projectType]/form/[viewId]/index/survey.vue
+++ b/packages/nc-gui/pages/[projectType]/form/[viewId]/index/survey.vue
@@ -22,7 +22,7 @@ enum TransitionDirection {
 
 const { md } = useBreakpoints(breakpointsTailwind)
 
-const { v$, formState, formColumns, submitForm, submitted, secondsRemain, sharedFormView } = useSharedFormStoreOrThrow()
+const { v$, formState, formColumns, submitForm, submitted, secondsRemain, sharedFormView, onReset } = useSharedFormStoreOrThrow()
 
 const isTransitioning = ref(false)
 
@@ -46,7 +46,7 @@ const steps = computed(() => {
   }, [])
 })
 
-const { index, goToPrevious, goToNext, isFirst, isLast } = useStepper(steps)
+const { index, goToPrevious, goToNext, isFirst, isLast, goTo } = useStepper(steps)
 
 const field = computed(() => formColumns.value?.[index.value])
 
@@ -119,6 +119,15 @@ function focusInput() {
   }
 }
 
+function resetForm() {
+  v$.value.$reset()
+  submitted.value = false
+  transition(TransitionDirection.Right)
+  goTo(steps.value[0])
+}
+
+onReset(resetForm)
+
 onKeyStroke(['ArrowLeft', 'ArrowDown'], goPrevious)
 onKeyStroke(['ArrowRight', 'ArrowUp', 'Enter', 'Space'], goNext)
 
@@ -276,7 +285,7 @@ onMounted(() => {
                 </p>
 
                 <div v-if="sharedFormView?.submit_another_form" class="text-center">
-                  <a-button type="primary" @click="submitted = false"> Submit Another Form</a-button>
+                  <button type="button" class="scaling-btn bg-opacity-100" @click="resetForm">Submit Another Form</button>
                 </div>
               </div>
             </div>

From b0b60fb5bf64cbabeff97dc441e3728f0c5c09e0 Mon Sep 17 00:00:00 2001
From: braks <78412429+bcakmakoglu@users.noreply.github.com>
Date: Thu, 6 Oct 2022 10:35:24 +0200
Subject: [PATCH 59/82] refactor(nc-gui): omit tooltip on field error

---
 .../nc-gui/pages/[projectType]/form/[viewId]/index/survey.vue | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/nc-gui/pages/[projectType]/form/[viewId]/index/survey.vue b/packages/nc-gui/pages/[projectType]/form/[viewId]/index/survey.vue
index 167a5481fe..8bb6d96f82 100644
--- a/packages/nc-gui/pages/[projectType]/form/[viewId]/index/survey.vue
+++ b/packages/nc-gui/pages/[projectType]/form/[viewId]/index/survey.vue
@@ -299,14 +299,14 @@ onMounted(() => {
         v-if="!submitted"
         class="color-transition shadow-sm absolute bottom-18 right-1/2 transform translate-x-[50%] md:bottom-4 md:(right-12 transform-none) flex items-center bg-white border dark:bg-slate-500 rounded divide-x-1"
       >
-        <a-tooltip title="Go to previous" :mouse-enter-delay="0.25" :mouse-leave-delay="0">
+        <a-tooltip :title="isFirst ? '' : 'Go to previous'" :mouse-enter-delay="0.25" :mouse-leave-delay="0">
           <button class="p-0.5 flex items-center group color-transition" @click="goPrevious">
             <MdiChevronLeft :class="isFirst ? 'text-gray-300' : 'group-hover:text-accent'" class="text-2xl md:text-md" />
           </button>
         </a-tooltip>
 
         <a-tooltip
-          :title="v$.localState[field.title]?.$error ? v$.localState[field.title].$errors[0].$message : 'Go to next'"
+          :title="v$.localState[field.title]?.$error ? '' : 'Go to next'"
           :mouse-enter-delay="0.25"
           :mouse-leave-delay="0"
         >

From 756ae491941dc627aa6e80cb2538d6932f93f160 Mon Sep 17 00:00:00 2001
From: braks <78412429+bcakmakoglu@users.noreply.github.com>
Date: Thu, 6 Oct 2022 10:39:33 +0200
Subject: [PATCH 60/82] fix(nc-gui): icon in powered by floating at wrong pos

---
 packages/nc-gui/components/general/PoweredBy.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/nc-gui/components/general/PoweredBy.vue b/packages/nc-gui/components/general/PoweredBy.vue
index d4c4565287..2173e43623 100644
--- a/packages/nc-gui/components/general/PoweredBy.vue
+++ b/packages/nc-gui/components/general/PoweredBy.vue
@@ -8,7 +8,7 @@ import { openLink } from '#imports'
     class="cursor-pointer group text-xs text-slate-500 hover:text-primary dark:hover:text-white dark:text-slate-300 mx-auto my-4 flex justify-center gap-1 items-center"
     @click="openLink('https://github.com/nocodb/nocodb')"
   >
-    <span class="rounded">
+    <span class="relative rounded">
       <GeneralNocoIcon v-bind="$attrs" class="!relative !top-0" :width="32" :height="32" />
     </span>
 

From 628217a4f154d474187936eabebf7cd1b35743ab Mon Sep 17 00:00:00 2001
From: braks <78412429+bcakmakoglu@users.noreply.github.com>
Date: Thu, 6 Oct 2022 10:42:11 +0200
Subject: [PATCH 61/82] fix(nc-gui): load shared view data after password was
 entered

---
 packages/nc-gui/pages/[projectType]/form/[viewId].vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/nc-gui/pages/[projectType]/form/[viewId].vue b/packages/nc-gui/pages/[projectType]/form/[viewId].vue
index 996a1b73a7..d2007f08c0 100644
--- a/packages/nc-gui/pages/[projectType]/form/[viewId].vue
+++ b/packages/nc-gui/pages/[projectType]/form/[viewId].vue
@@ -55,7 +55,7 @@ if (!notFound.value) {
       <div class="w-full flex flex-col">
         <a-typography-title :level="4">This shared view is protected</a-typography-title>
 
-        <a-form ref="formRef" :model="{ password }" class="mt-2" @finish="passwordDlg = false">
+        <a-form ref="formRef" :model="{ password }" class="mt-2" @finish="loadSharedView">
           <a-form-item name="password" :rules="[{ required: true, message: $t('msg.error.signUpRules.passwdRequired') }]">
             <a-input-password v-model:value="password" :placeholder="$t('msg.info.signUp.enterPassword')" />
           </a-form-item>

From d9e65ba5864fb5c99a4c3a80e3a59e1e51b3bbd0 Mon Sep 17 00:00:00 2001
From: braks <78412429+bcakmakoglu@users.noreply.github.com>
Date: Thu, 6 Oct 2022 10:42:31 +0200
Subject: [PATCH 62/82] chore(nc-gui): hide page until password was entered

---
 packages/nc-gui/pages/[projectType]/form/[viewId].vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/nc-gui/pages/[projectType]/form/[viewId].vue b/packages/nc-gui/pages/[projectType]/form/[viewId].vue
index d2007f08c0..bc9363ac4b 100644
--- a/packages/nc-gui/pages/[projectType]/form/[viewId].vue
+++ b/packages/nc-gui/pages/[projectType]/form/[viewId].vue
@@ -40,7 +40,7 @@ if (!notFound.value) {
 
 <template>
   <NuxtLayout>
-    <NuxtPage />
+    <NuxtPage v-if="!passwordDlg" />
 
     <a-modal
       v-model:visible="passwordDlg"

From f745f3cff7203d502714eb31354f37f7c9727e63 Mon Sep 17 00:00:00 2001
From: braks <78412429+bcakmakoglu@users.noreply.github.com>
Date: Thu, 6 Oct 2022 10:57:46 +0200
Subject: [PATCH 63/82] feat(nc-gui): show error when entering invalid password

---
 .../composables/useSharedFormViewStore.ts     | 10 +++++++
 .../pages/[projectType]/form/[viewId].vue     | 30 +++++++++++++++----
 2 files changed, 34 insertions(+), 6 deletions(-)

diff --git a/packages/nc-gui/composables/useSharedFormViewStore.ts b/packages/nc-gui/composables/useSharedFormViewStore.ts
index 0ed600eb21..6ef566ce8b 100644
--- a/packages/nc-gui/composables/useSharedFormViewStore.ts
+++ b/packages/nc-gui/composables/useSharedFormViewStore.ts
@@ -25,6 +25,7 @@ const [useProvideSharedFormStore, useSharedFormStore] = useInjectionState((share
   const submitted = ref(false)
   const passwordDlg = ref(false)
   const password = ref<string | null>(null)
+  const passwordError = ref<string | null>(null)
   const secondsRemain = ref(0)
 
   provide(SharedViewPasswordInj, password)
@@ -55,6 +56,8 @@ const [useProvideSharedFormStore, useSharedFormStore] = useInjectionState((share
     columns.value?.filter((c) => c.show).filter((col) => !isVirtualCol(col) || col.uidt === UITypes.LinkToAnotherRecord),
   )
   const loadSharedView = async () => {
+    passwordError.value = null
+
     try {
       const viewMeta = await api.public.sharedViewMetaGet(sharedViewId, {
         headers: {
@@ -82,6 +85,8 @@ const [useProvideSharedFormStore, useSharedFormStore] = useInjectionState((share
         notFound.value = true
       } else if ((await extractSdkResponseErrorMsg(e)) === ErrorMessages.INVALID_SHARED_VIEW_PASSWORD) {
         passwordDlg.value = true
+
+        if (password.value) passwordError.value = 'Something went wrong. Please check your credentials.'
       }
     }
   }
@@ -196,6 +201,10 @@ const [useProvideSharedFormStore, useSharedFormStore] = useInjectionState((share
     }
   })
 
+  watch(password, (next, prev) => {
+    if (next !== prev && passwordError.value) passwordError.value = null
+  })
+
   return {
     sharedView,
     sharedFormView,
@@ -210,6 +219,7 @@ const [useProvideSharedFormStore, useSharedFormStore] = useInjectionState((share
     formState,
     notFound,
     password,
+    passwordError,
     submitted,
     secondsRemain,
     passwordDlg,
diff --git a/packages/nc-gui/pages/[projectType]/form/[viewId].vue b/packages/nc-gui/pages/[projectType]/form/[viewId].vue
index bc9363ac4b..937abb9871 100644
--- a/packages/nc-gui/pages/[projectType]/form/[viewId].vue
+++ b/packages/nc-gui/pages/[projectType]/form/[viewId].vue
@@ -22,7 +22,7 @@ useSidebar('nc-left-sidebar', { hasSidebar: false })
 
 const route = useRoute()
 
-const { loadSharedView, sharedView, meta, notFound, password, passwordDlg } = useProvideSharedFormStore(
+const { loadSharedView, sharedView, meta, notFound, password, passwordDlg, passwordError } = useProvideSharedFormStore(
   route.params.viewId as string,
 )
 
@@ -45,23 +45,28 @@ if (!notFound.value) {
     <a-modal
       v-model:visible="passwordDlg"
       :closable="false"
-      width="28rem"
+      width="min(100%, 450px)"
       centered
       :footer="null"
       :mask-closable="false"
       wrap-class-name="nc-modal-shared-form-password-dlg"
       @close="passwordDlg = false"
     >
-      <div class="w-full flex flex-col">
-        <a-typography-title :level="4">This shared view is protected</a-typography-title>
+      <div class="w-full flex flex-col gap-4">
+        <!-- todo: i18n -->
+        <h2 class="text-xl font-semibold">This shared view is protected</h2>
 
-        <a-form ref="formRef" :model="{ password }" class="mt-2" @finish="loadSharedView">
+        <a-form ref="formRef" :model="{ password }" @finish="loadSharedView">
           <a-form-item name="password" :rules="[{ required: true, message: $t('msg.error.signUpRules.passwdRequired') }]">
             <a-input-password v-model:value="password" :placeholder="$t('msg.info.signUp.enterPassword')" />
           </a-form-item>
 
+          <Transition name="layout">
+            <div v-if="passwordError" class="mb-2 text-sm text-red-500">{{ passwordError }}</div>
+          </Transition>
+
           <!-- Unlock -->
-          <a-button type="primary" html-type="submit">{{ $t('general.unlock') }}</a-button>
+          <button type="submit" class="mt-4 scaling-btn bg-opacity-100">{{ $t('general.unlock') }}</button>
         </a-form>
       </div>
     </a-modal>
@@ -84,4 +89,17 @@ if (!notFound.value) {
     }
   }
 }
+
+.nc-modal-shared-form-password-dlg {
+  .ant-input-affix-wrapper,
+  .ant-input {
+    @apply !appearance-none my-1 border-1 border-solid border-primary border-opacity-50 rounded;
+  }
+
+  .password {
+    input {
+      @apply !border-none !m-0;
+    }
+  }
+}
 </style>

From b658df011b11e42e3d818a3d3222fa9d1fa92f68 Mon Sep 17 00:00:00 2001
From: braks <78412429+bcakmakoglu@users.noreply.github.com>
Date: Thu, 6 Oct 2022 11:09:07 +0200
Subject: [PATCH 64/82] refactor(nc-gui): move types to lib

---
 .../smartsheet/toolbar/ShareView.vue          | 21 +++++--------------
 .../composables/useSharedFormViewStore.ts     |  3 ++-
 packages/nc-gui/lib/types.ts                  | 16 +++++++++++++-
 3 files changed, 22 insertions(+), 18 deletions(-)

diff --git a/packages/nc-gui/components/smartsheet/toolbar/ShareView.vue b/packages/nc-gui/components/smartsheet/toolbar/ShareView.vue
index 9c241003f3..d5c0cb367a 100644
--- a/packages/nc-gui/components/smartsheet/toolbar/ShareView.vue
+++ b/packages/nc-gui/components/smartsheet/toolbar/ShareView.vue
@@ -16,21 +16,7 @@ import {
   useUIPermission,
   watch,
 } from '#imports'
-import type { ThemeConfig } from '~/lib'
-
-interface SharedViewMeta extends Record<string, any> {
-  surveyMode?: boolean
-  theme?: Partial<ThemeConfig>
-  allowCSVDownload?: boolean
-}
-
-interface SharedView {
-  uuid?: string
-  id: string
-  password?: string
-  type?: ViewTypes
-  meta: SharedViewMeta
-}
+import type { SharedView } from '~/lib'
 
 const { theme } = useTheme()
 
@@ -73,7 +59,10 @@ const surveyMode = computed({
 const viewTheme = computed({
   get: () => !!shared.value.meta.theme,
   set: (hasTheme) => {
-    shared.value.meta = { ...shared.value.meta, theme: hasTheme ? { ...theme.value } : undefined }
+    shared.value.meta = {
+      ...shared.value.meta,
+      theme: hasTheme ? { ...theme.value } : undefined,
+    }
     saveTheme()
   },
 })
diff --git a/packages/nc-gui/composables/useSharedFormViewStore.ts b/packages/nc-gui/composables/useSharedFormViewStore.ts
index 6ef566ce8b..3e220dd844 100644
--- a/packages/nc-gui/composables/useSharedFormViewStore.ts
+++ b/packages/nc-gui/composables/useSharedFormViewStore.ts
@@ -18,6 +18,7 @@ import {
   useProvideSmartsheetRowStore,
   watch,
 } from '#imports'
+import type { SharedViewMeta } from '~/lib'
 
 const [useProvideSharedFormStore, useSharedFormStore] = useInjectionState((sharedViewId: string) => {
   const progress = ref(false)
@@ -34,7 +35,7 @@ const [useProvideSharedFormStore, useSharedFormStore] = useInjectionState((share
   const sharedFormView = ref<FormType>()
   const meta = ref<TableType>()
   const columns = ref<(ColumnType & { required?: boolean; show?: boolean; label?: string })[]>()
-  const sharedViewMeta = ref<any>({})
+  const sharedViewMeta = ref<SharedViewMeta>({})
   const formResetHook = createEventHook<void>()
 
   const { api, isLoading } = useApi()
diff --git a/packages/nc-gui/lib/types.ts b/packages/nc-gui/lib/types.ts
index fecfd97e68..7635873cb8 100644
--- a/packages/nc-gui/lib/types.ts
+++ b/packages/nc-gui/lib/types.ts
@@ -1,4 +1,4 @@
-import type { FilterType } from 'nocodb-sdk'
+import type { FilterType, ViewTypes } from 'nocodb-sdk'
 import type { I18n } from 'vue-i18n'
 import type { Theme as AntTheme } from 'ant-design-vue/es/config-provider'
 import type { ProjectRole, Role, TabType } from './enums'
@@ -70,3 +70,17 @@ export interface TabItem {
   viewTitle?: string
   viewId?: string
 }
+
+export interface SharedViewMeta extends Record<string, any> {
+  surveyMode?: boolean
+  theme?: Partial<ThemeConfig>
+  allowCSVDownload?: boolean
+}
+
+export interface SharedView {
+  uuid?: string
+  id: string
+  password?: string
+  type?: ViewTypes
+  meta: SharedViewMeta
+}

From 0128f2be0e976ad31367d300d1a9f6feb5689654 Mon Sep 17 00:00:00 2001
From: braks <78412429+bcakmakoglu@users.noreply.github.com>
Date: Thu, 6 Oct 2022 11:45:49 +0200
Subject: [PATCH 65/82] refactor(nc-gui): use color picker in share view

---
 .../smartsheet/toolbar/ShareView.vue          | 35 +++++++++++++++----
 packages/nc-gui/lib/types.ts                  |  1 +
 .../[projectType]/form/[viewId]/index.vue     |  6 ++--
 3 files changed, 33 insertions(+), 9 deletions(-)

diff --git a/packages/nc-gui/components/smartsheet/toolbar/ShareView.vue b/packages/nc-gui/components/smartsheet/toolbar/ShareView.vue
index d5c0cb367a..758259c0ae 100644
--- a/packages/nc-gui/components/smartsheet/toolbar/ShareView.vue
+++ b/packages/nc-gui/components/smartsheet/toolbar/ShareView.vue
@@ -1,10 +1,12 @@
 <script lang="ts" setup>
 import { ViewTypes } from 'nocodb-sdk'
 import { isString } from '@vueuse/core'
+import tinycolor from 'tinycolor2'
 import {
   computed,
   extractSdkResponseErrorMsg,
   message,
+  projectThemeColors,
   ref,
   useCopy,
   useDashboard,
@@ -12,14 +14,11 @@ import {
   useNuxtApp,
   useProject,
   useSmartsheetStoreOrThrow,
-  useTheme,
   useUIPermission,
   watch,
 } from '#imports'
 import type { SharedView } from '~/lib'
 
-const { theme } = useTheme()
-
 const { t } = useI18n()
 
 const { view, $api } = useSmartsheetStoreOrThrow()
@@ -57,11 +56,11 @@ const surveyMode = computed({
 })
 
 const viewTheme = computed({
-  get: () => !!shared.value.meta.theme,
-  set: (hasTheme) => {
+  get: () => !!shared.value.meta.withTheme,
+  set: (withTheme) => {
     shared.value.meta = {
       ...shared.value.meta,
-      theme: hasTheme ? { ...theme.value } : undefined,
+      withTheme,
     }
     saveTheme()
   },
@@ -143,6 +142,20 @@ const saveShareLinkPassword = async () => {
   $e('a:view:share:enable-pwd')
 }
 
+function onChangeTheme(color: string) {
+  const tcolor = tinycolor(color)
+
+  if (tcolor.isValid()) {
+    const complement = tcolor.complement()
+    shared.value.meta.theme = {
+      primaryColor: color,
+      accentColor: complement.toHex8String(),
+    }
+
+    saveTheme()
+  }
+}
+
 const copyLink = async () => {
   if (sharedViewUrl.value) {
     await copy(sharedViewUrl.value)
@@ -210,6 +223,16 @@ watch(passwordProtected, (value) => {
           <div>
             <!-- todo: i18n -->
             <a-checkbox v-model:checked="viewTheme" class="!text-xs"> Use Theme </a-checkbox>
+
+            <div v-if="viewTheme" class="flex pl-2">
+              <LazyGeneralColorPicker
+                :model-value="shared.meta.theme?.primaryColor"
+                :colors="projectThemeColors"
+                :row-size="9"
+                :advanced="false"
+                @input="onChangeTheme"
+              />
+            </div>
           </div>
 
           <div>
diff --git a/packages/nc-gui/lib/types.ts b/packages/nc-gui/lib/types.ts
index 7635873cb8..ba30800491 100644
--- a/packages/nc-gui/lib/types.ts
+++ b/packages/nc-gui/lib/types.ts
@@ -73,6 +73,7 @@ export interface TabItem {
 
 export interface SharedViewMeta extends Record<string, any> {
   surveyMode?: boolean
+  withTheme?: boolean
   theme?: Partial<ThemeConfig>
   allowCSVDownload?: boolean
 }
diff --git a/packages/nc-gui/pages/[projectType]/form/[viewId]/index.vue b/packages/nc-gui/pages/[projectType]/form/[viewId]/index.vue
index 7b806b219c..4d13318325 100644
--- a/packages/nc-gui/pages/[projectType]/form/[viewId]/index.vue
+++ b/packages/nc-gui/pages/[projectType]/form/[viewId]/index.vue
@@ -12,9 +12,9 @@ const route = useRoute()
 const router = useRouter()
 
 watch(
-  () => sharedViewMeta.value.theme,
-  (nextTheme) => {
-    if (nextTheme) setTheme(nextTheme)
+  () => sharedViewMeta.value.withTheme,
+  (hasTheme) => {
+    if (hasTheme && sharedViewMeta.value.theme) setTheme(sharedViewMeta.value.theme)
   },
   { immediate: true },
 )

From af2194450f25dfb351b31818f93ee07d4aa12856 Mon Sep 17 00:00:00 2001
From: braks <78412429+bcakmakoglu@users.noreply.github.com>
Date: Thu, 6 Oct 2022 11:49:27 +0200
Subject: [PATCH 66/82] refactor(nc-gui): toolbar btn styles

---
 packages/nc-gui/assets/style.scss | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/nc-gui/assets/style.scss b/packages/nc-gui/assets/style.scss
index ed7c8d2df5..30453318d4 100644
--- a/packages/nc-gui/assets/style.scss
+++ b/packages/nc-gui/assets/style.scss
@@ -273,5 +273,5 @@ a {
 }
 
 .nc-toolbar-btn {
-  @apply shadow-sm rounded !border border-slate-300 color-transition;
+  @apply !shadow-none rounded hover:(ring-1 ring-primary ring-opacity-100) focus:(ring-1 ring-accent ring-opacity-100);
 }
\ No newline at end of file

From ecab29558c7182a37f477743dbfcf4b17f1f1b16 Mon Sep 17 00:00:00 2001
From: braks <78412429+bcakmakoglu@users.noreply.github.com>
Date: Thu, 6 Oct 2022 12:07:04 +0200
Subject: [PATCH 67/82] fix(nc-gui): show selected theme color

---
 packages/nc-gui/composables/useTheme/index.ts             | 4 ++--
 packages/nc-gui/pages/[projectType]/[projectId]/index.vue | 4 ++++
 2 files changed, 6 insertions(+), 2 deletions(-)

diff --git a/packages/nc-gui/composables/useTheme/index.ts b/packages/nc-gui/composables/useTheme/index.ts
index 69086fb94b..373ba8e922 100644
--- a/packages/nc-gui/composables/useTheme/index.ts
+++ b/packages/nc-gui/composables/useTheme/index.ts
@@ -28,8 +28,8 @@ export const useTheme = createGlobalState((config?: Partial<ThemeConfig>) => {
     accentColor.value = themeAccent.isValid() ? hexToRGB(themeAccent.toHex8String()) : hexToRGB(themeV2Colors.pink['500'])
 
     currentTheme.value = {
-      primaryColor: themePrimary.toHex8String().toUpperCase(),
-      accentColor: themeAccent.toHex8String().toUpperCase(),
+      primaryColor: themePrimary.toHex8String().toUpperCase().slice(0, -2),
+      accentColor: themeAccent.toHex8String().toUpperCase().slice(0, -2),
     }
 
     ConfigProvider.config({
diff --git a/packages/nc-gui/pages/[projectType]/[projectId]/index.vue b/packages/nc-gui/pages/[projectType]/[projectId]/index.vue
index 4f8e7b8b7e..44ee2edbba 100644
--- a/packages/nc-gui/pages/[projectType]/[projectId]/index.vue
+++ b/packages/nc-gui/pages/[projectType]/[projectId]/index.vue
@@ -21,6 +21,7 @@ import {
   useRouter,
   useSidebar,
   useTabs,
+  useTheme,
   useUIPermission,
 } from '#imports'
 import { TabType } from '~/lib'
@@ -29,6 +30,8 @@ definePageMeta({
   hideHeader: true,
 })
 
+const { theme } = useTheme()
+
 const { t } = useI18n()
 
 const route = useRoute()
@@ -336,6 +339,7 @@ onBeforeUnmount(reset)
                         <template #expandIcon></template>
 
                         <LazyGeneralColorPicker
+                          :model-value="theme.primaryColor"
                           :colors="projectThemeColors"
                           :row-size="9"
                           :advanced="false"

From b665dd6b05af1b213b36b9c5c6ee9d14c53d54f0 Mon Sep 17 00:00:00 2001
From: braks <78412429+bcakmakoglu@users.noreply.github.com>
Date: Thu, 6 Oct 2022 12:23:13 +0200
Subject: [PATCH 68/82] fix(nc-gui): use separate form state for password modal

---
 .../composables/useSharedFormViewStore.ts       |  2 +-
 .../pages/[projectType]/form/[viewId].vue       | 17 +++++++++++++++--
 2 files changed, 16 insertions(+), 3 deletions(-)

diff --git a/packages/nc-gui/composables/useSharedFormViewStore.ts b/packages/nc-gui/composables/useSharedFormViewStore.ts
index 3e220dd844..32052079d1 100644
--- a/packages/nc-gui/composables/useSharedFormViewStore.ts
+++ b/packages/nc-gui/composables/useSharedFormViewStore.ts
@@ -87,7 +87,7 @@ const [useProvideSharedFormStore, useSharedFormStore] = useInjectionState((share
       } else if ((await extractSdkResponseErrorMsg(e)) === ErrorMessages.INVALID_SHARED_VIEW_PASSWORD) {
         passwordDlg.value = true
 
-        if (password.value) passwordError.value = 'Something went wrong. Please check your credentials.'
+        if (password.value && password.value !== '') passwordError.value = 'Something went wrong. Please check your credentials.'
       }
     }
   }
diff --git a/packages/nc-gui/pages/[projectType]/form/[viewId].vue b/packages/nc-gui/pages/[projectType]/form/[viewId].vue
index 937abb9871..90cd2f1027 100644
--- a/packages/nc-gui/pages/[projectType]/form/[viewId].vue
+++ b/packages/nc-gui/pages/[projectType]/form/[viewId].vue
@@ -7,11 +7,13 @@ import {
   createEventHook,
   definePageMeta,
   provide,
+  reactive,
   ref,
   useProvideSharedFormStore,
   useProvideSmartsheetStore,
   useRoute,
   useSidebar,
+  watch,
 } from '#imports'
 
 definePageMeta({
@@ -36,6 +38,17 @@ if (!notFound.value) {
 
   useProvideSmartsheetStore(sharedView, meta, true)
 }
+
+const form = reactive({
+  password: '',
+})
+
+watch(
+  () => form.password,
+  () => {
+    password.value = form.password
+  },
+)
 </script>
 
 <template>
@@ -56,9 +69,9 @@ if (!notFound.value) {
         <!-- todo: i18n -->
         <h2 class="text-xl font-semibold">This shared view is protected</h2>
 
-        <a-form ref="formRef" :model="{ password }" @finish="loadSharedView">
+        <a-form layout="vertical" no-style :model="form" @finish="loadSharedView">
           <a-form-item name="password" :rules="[{ required: true, message: $t('msg.error.signUpRules.passwdRequired') }]">
-            <a-input-password v-model:value="password" :placeholder="$t('msg.info.signUp.enterPassword')" />
+            <a-input-password v-model:value="form.password" size="large" :placeholder="$t('msg.info.signUp.enterPassword')" />
           </a-form-item>
 
           <Transition name="layout">

From ce1be6ca18027c5bd7dab4c117861e028e9a8097 Mon Sep 17 00:00:00 2001
From: braks <78412429+bcakmakoglu@users.noreply.github.com>
Date: Thu, 6 Oct 2022 13:13:33 +0200
Subject: [PATCH 69/82] fix(nc-gui): survey form alignments and line height

---
 .../nc-gui/components/general/NocoIcon.vue    |   7 +-
 .../[projectType]/form/[viewId]/index.vue     |   6 +-
 .../form/[viewId]/index/index.vue             | 174 +++++++++---------
 .../form/[viewId]/index/survey.vue            |  97 +++++-----
 4 files changed, 145 insertions(+), 139 deletions(-)

diff --git a/packages/nc-gui/components/general/NocoIcon.vue b/packages/nc-gui/components/general/NocoIcon.vue
index 78fe72378c..1819b2c6a8 100644
--- a/packages/nc-gui/components/general/NocoIcon.vue
+++ b/packages/nc-gui/components/general/NocoIcon.vue
@@ -3,17 +3,16 @@ interface Props {
   width?: number
   height?: number
   animate?: boolean
-  dark?: boolean
 }
 
-const { width = 90, height = 90, animate = false, dark = false } = defineProps<Props>()
+const { width = 90, height = 90, animate = false } = defineProps<Props>()
 </script>
 
 <template>
   <div :style="{ left: `calc(50% - ${width / 2}px)`, top: `-${height / 2}px` }" class="absolute rounded-lg pt-1 pl-1 -ml-1">
     <div class="relative">
-      <img v-show="dark" :width="width" :height="height" alt="NocoDB" src="~/assets/img/icons/512x512-trans.png" />
-      <img v-show="!dark" :width="width" :height="height" alt="NocoDB" src="~/assets/img/icons/512x512.png" />
+      <img class="hidden dark:block" :width="width" :height="height" alt="NocoDB" src="~/assets/img/icons/512x512-trans.png" />
+      <img class="dark:hidden" :width="width" :height="height" alt="NocoDB" src="~/assets/img/icons/512x512.png" />
 
       <template v-if="animate">
         <div class="animated-bg-gradient opacity-100 rounded-full z-0 absolute bottom-1.45 right-1.45 h-4.5 w-4.5" />
diff --git a/packages/nc-gui/pages/[projectType]/form/[viewId]/index.vue b/packages/nc-gui/pages/[projectType]/form/[viewId]/index.vue
index 4d13318325..e0934eae82 100644
--- a/packages/nc-gui/pages/[projectType]/form/[viewId]/index.vue
+++ b/packages/nc-gui/pages/[projectType]/form/[viewId]/index.vue
@@ -38,14 +38,10 @@ router.afterEach((to) => shouldRedirect(to.name as string))
 
 <template>
   <div
-    class="overflow-y-auto overflow-x-hidden flex flex-wrap color-transition nc-form-view relative bg-primary bg-opacity-10 dark:(bg-slate-900) h-full min-h-[600px]"
+    class="scrollbar-thin-dull overflow-y-auto overflow-x-hidden flex flex-col color-transition nc-form-view relative bg-primary bg-opacity-10 dark:(bg-slate-900) h-full min-h-[600px]"
   >
     <NuxtPage />
 
-    <div class="flex w-full items-end mt-12">
-      <GeneralPoweredBy :dark="isDark" />
-    </div>
-
     <div
       class="color-transition flex items-center justify-center cursor-pointer absolute top-4 md:top-15 right-4 md:right-15 rounded-full p-2 bg-white dark:(bg-slate-600) shadow hover:(ring-1 ring-accent ring-opacity-100)"
       @click="onClick"
diff --git a/packages/nc-gui/pages/[projectType]/form/[viewId]/index/index.vue b/packages/nc-gui/pages/[projectType]/form/[viewId]/index/index.vue
index 6f2aa46a44..9b6cca67b7 100644
--- a/packages/nc-gui/pages/[projectType]/form/[viewId]/index/index.vue
+++ b/packages/nc-gui/pages/[projectType]/form/[viewId]/index/index.vue
@@ -20,102 +20,106 @@ function isRequired(_columnObj: Record<string, any>, required = false) {
 </script>
 
 <template>
-  <div
-    class="color-transition relative flex flex-col justify-center gap-2 w-full max-w-[max(33%,600px)] m-auto py-4 pb-8 px-16 md:(bg-white dark:bg-slate-700 rounded-lg border-1 border-gray-200 shadow-xl) mt-12"
-  >
-    <template v-if="sharedFormView">
-      <h1 class="prose-2xl font-bold self-center my-4">{{ sharedFormView.heading }}</h1>
-
-      <h2 v-if="sharedFormView.subheading" class="prose-lg text-slate-500 dark:text-slate-300 self-center">
-        {{ sharedFormView.subheading }}
-      </h2>
-
-      <a-alert v-if="notFound" type="warning" class="my-4 text-center" message="Not found" />
-
-      <template v-else-if="submitted">
-        <div class="flex justify-center">
-          <div v-if="sharedFormView" class="min-w-350px mt-3">
-            <a-alert
-              type="success"
-              class="my-4 text-center"
-              outlined
-              :message="sharedFormView.success_msg || 'Successfully submitted form data'"
-            />
-
-            <p v-if="sharedFormView.show_blank_form" class="text-xs text-slate-500 dark:text-slate-300 text-center my-4">
-              New form will be loaded after {{ secondsRemain }} seconds
-            </p>
-
-            <div v-if="sharedFormView.submit_another_form" class="text-center">
-              <a-button type="primary" @click="submitted = false"> Submit Another Form</a-button>
+  <div>
+    <div
+      class="color-transition relative flex flex-col justify-center gap-2 w-full max-w-[max(33%,600px)] m-auto py-4 pb-8 px-16 md:(bg-white dark:bg-slate-700 rounded-lg border-1 border-gray-200 shadow-xl) mt-12"
+    >
+      <template v-if="sharedFormView">
+        <h1 class="prose-2xl font-bold self-center my-4">{{ sharedFormView.heading }}</h1>
+
+        <h2 v-if="sharedFormView.subheading" class="prose-lg text-slate-500 dark:text-slate-300 self-center mb-4 leading-6">
+          {{ sharedFormView.subheading }}
+        </h2>
+
+        <a-alert v-if="notFound" type="warning" class="my-4 text-center" message="Not found" />
+
+        <template v-else-if="submitted">
+          <div class="flex justify-center">
+            <div v-if="sharedFormView" class="min-w-350px mt-3">
+              <a-alert
+                type="success"
+                class="my-4 text-center"
+                outlined
+                :message="sharedFormView.success_msg || 'Successfully submitted form data'"
+              />
+
+              <p v-if="sharedFormView.show_blank_form" class="text-xs text-slate-500 dark:text-slate-300 text-center my-4">
+                New form will be loaded after {{ secondsRemain }} seconds
+              </p>
+
+              <div v-if="sharedFormView.submit_another_form" class="text-center">
+                <a-button type="primary" @click="submitted = false"> Submit Another Form</a-button>
+              </div>
             </div>
           </div>
-        </div>
-      </template>
+        </template>
 
-      <template v-else>
-        <GeneralOverlay class="bg-gray-400/75" :model-value="isLoading" inline transition>
-          <div class="w-full h-full flex items-center justify-center">
-            <a-spin size="large" />
-          </div>
-        </GeneralOverlay>
-
-        <div class="nc-form-wrapper">
-          <div class="nc-form h-full">
-            <div class="flex flex-col gap-6">
-              <div v-for="(field, index) in formColumns" :key="index" class="flex flex-col gap-2">
-                <div class="flex nc-form-column-label">
-                  <LazySmartsheetHeaderVirtualCell
-                    v-if="isVirtualCol(field)"
-                    :column="{ ...field, title: field.label || field.title }"
-                    :required="isRequired(field, field.required)"
-                    :hide-menu="true"
-                  />
-
-                  <LazySmartsheetHeaderCell
-                    v-else
-                    :column="{ ...field, title: field.label || field.title }"
-                    :required="isRequired(field, field.required)"
-                    :hide-menu="true"
-                  />
-                </div>
+        <template v-else>
+          <GeneralOverlay class="bg-gray-400/75" :model-value="isLoading" inline transition>
+            <div class="w-full h-full flex items-center justify-center">
+              <a-spin size="large" />
+            </div>
+          </GeneralOverlay>
+
+          <div class="nc-form-wrapper">
+            <div class="nc-form h-full">
+              <div class="flex flex-col gap-6">
+                <div v-for="(field, index) in formColumns" :key="index" class="flex flex-col gap-2">
+                  <div class="flex nc-form-column-label">
+                    <LazySmartsheetHeaderVirtualCell
+                      v-if="isVirtualCol(field)"
+                      :column="{ ...field, title: field.label || field.title }"
+                      :required="isRequired(field, field.required)"
+                      :hide-menu="true"
+                    />
+
+                    <LazySmartsheetHeaderCell
+                      v-else
+                      :column="{ ...field, title: field.label || field.title }"
+                      :required="isRequired(field, field.required)"
+                      :hide-menu="true"
+                    />
+                  </div>
 
-                <div>
-                  <LazySmartsheetVirtualCell
-                    v-if="isVirtualCol(field)"
-                    class="mt-0 nc-input"
-                    :class="`nc-form-input-${field.title.replaceAll(' ', '')}`"
-                    :column="field"
-                  />
-
-                  <LazySmartsheetCell
-                    v-else
-                    v-model="formState[field.title]"
-                    class="nc-input"
-                    :class="`nc-form-input-${field.title.replaceAll(' ', '')}`"
-                    :column="field"
-                    :edit-enabled="true"
-                  />
-
-                  <div class="flex flex-col gap-2 text-slate-500 dark:text-slate-300 text-[0.75rem] my-2 px-1">
-                    <div v-for="error of v$.localState[field.title]?.$errors" :key="error" class="text-red-500">
-                      {{ error.$message }}
+                  <div>
+                    <LazySmartsheetVirtualCell
+                      v-if="isVirtualCol(field)"
+                      class="mt-0 nc-input"
+                      :class="`nc-form-input-${field.title.replaceAll(' ', '')}`"
+                      :column="field"
+                    />
+
+                    <LazySmartsheetCell
+                      v-else
+                      v-model="formState[field.title]"
+                      class="nc-input"
+                      :class="`nc-form-input-${field.title.replaceAll(' ', '')}`"
+                      :column="field"
+                      :edit-enabled="true"
+                    />
+
+                    <div class="flex flex-col gap-2 text-slate-500 dark:text-slate-300 text-[0.75rem] my-2 px-1">
+                      <div v-for="error of v$.localState[field.title]?.$errors" :key="error" class="text-red-500">
+                        {{ error.$message }}
+                      </div>
+
+                      {{ field.description }}
                     </div>
-
-                    {{ field.description }}
                   </div>
                 </div>
               </div>
-            </div>
 
-            <div class="text-center mt-4">
-              <button type="submit" class="uppercase scaling-btn prose-sm" @click="submitForm">
-                {{ $t('general.submit') }}
-              </button>
+              <div class="text-center mt-4">
+                <button type="submit" class="uppercase scaling-btn prose-sm" @click="submitForm">
+                  {{ $t('general.submit') }}
+                </button>
+              </div>
             </div>
           </div>
-        </div>
+        </template>
       </template>
-    </template>
+    </div>
+
+    <GeneralPoweredBy />
   </div>
 </template>
diff --git a/packages/nc-gui/pages/[projectType]/form/[viewId]/index/survey.vue b/packages/nc-gui/pages/[projectType]/form/[viewId]/index/survey.vue
index 8bb6d96f82..5d31023b30 100644
--- a/packages/nc-gui/pages/[projectType]/form/[viewId]/index/survey.vue
+++ b/packages/nc-gui/pages/[projectType]/form/[viewId]/index/survey.vue
@@ -151,25 +151,30 @@ onMounted(() => {
 </script>
 
 <template>
-  <div ref="el" class="w-full grid">
-    <template v-if="sharedFormView">
-      <div class="max-h-33vh max-w-[max(33%,600px)] mx-auto">
-        <div class="h-33vh flex flex-col justify-end">
-          <h1 class="prose-2xl font-bold self-center my-4">{{ sharedFormView.heading }}</h1>
-
-          <h2 class="prose-lg text-slate-500 dark:text-slate-300 self-center mb-4">
-            {{ sharedFormView.subheading }}
-          </h2>
-        </div>
+  <div ref="el" class="pt-8 md:p-0 w-full h-full flex flex-col">
+    <div
+      v-if="sharedFormView"
+      style="height: max(40vh, 250px); min-height: 250px"
+      class="max-w-[max(33%,600px)] mx-auto flex flex-col justify-end"
+    >
+      <div class="px-4 md:px-0 flex flex-col justify-end">
+        <h1 class="prose-2xl font-bold self-center my-4">{{ sharedFormView.heading }}</h1>
+
+        <h2
+          v-if="sharedFormView.subheading && sharedFormView.subheading !== ''"
+          class="prose-lg text-slate-500 dark:text-slate-300 self-center mb-4 leading-6"
+        >
+          {{ sharedFormView?.subheading }}
+        </h2>
       </div>
-    </template>
+    </div>
 
     <div class="h-full w-full flex items-center px-4 md:px-0">
       <Transition :name="`slide-${transitionName}`" :duration="1000" mode="out-in">
         <div
           ref="el"
           :key="field.title"
-          class="color-transition h-full flex flex-col justify-center gap-4 w-full max-w-[max(33%,600px)] m-auto"
+          class="color-transition h-full flex flex-col mt-6 gap-4 w-full max-w-[max(33%,600px)] m-auto"
         >
           <div v-if="field && !submitted" class="flex flex-col gap-2">
             <div class="flex nc-form-column-label">
@@ -210,7 +215,7 @@ onMounted(() => {
                   {{ error.$message }}
                 </div>
 
-                <div class="block">
+                <div class="block text-[14px]">
                   {{ field.description }}
                 </div>
               </div>
@@ -255,14 +260,6 @@ onMounted(() => {
             </div>
           </div>
 
-          <template v-if="!submitted">
-            <div class="flex-1" />
-
-            <div class="select-none text-center text-gray-500 dark:text-slate-200">
-              {{ index + 1 }} / {{ formColumns?.length }}
-            </div>
-          </template>
-
           <Transition name="slide-left">
             <div v-if="submitted" class="flex flex-col justify-center items-center text-center">
               <div class="text-lg px-6 py-3 bg-green-300 text-gray-700 rounded">
@@ -294,31 +291,41 @@ onMounted(() => {
       </Transition>
     </div>
 
-    <Transition name="fade">
-      <div
-        v-if="!submitted"
-        class="color-transition shadow-sm absolute bottom-18 right-1/2 transform translate-x-[50%] md:bottom-4 md:(right-12 transform-none) flex items-center bg-white border dark:bg-slate-500 rounded divide-x-1"
-      >
-        <a-tooltip :title="isFirst ? '' : 'Go to previous'" :mouse-enter-delay="0.25" :mouse-leave-delay="0">
-          <button class="p-0.5 flex items-center group color-transition" @click="goPrevious">
-            <MdiChevronLeft :class="isFirst ? 'text-gray-300' : 'group-hover:text-accent'" class="text-2xl md:text-md" />
-          </button>
-        </a-tooltip>
-
-        <a-tooltip
-          :title="v$.localState[field.title]?.$error ? '' : 'Go to next'"
-          :mouse-enter-delay="0.25"
-          :mouse-leave-delay="0"
-        >
-          <button class="p-0.5 flex items-center group color-transition" @click="goNext">
-            <MdiChevronRight
-              :class="isLast || v$.localState[field.title]?.$error ? 'text-gray-300' : 'group-hover:text-accent'"
-              class="text-2xl md:text-md"
-            />
-          </button>
-        </a-tooltip>
+    <template v-if="!submitted">
+      <div class="mb-24 md:my-4 select-none text-center text-gray-500 dark:text-slate-200">
+        {{ index + 1 }} / {{ formColumns?.length }}
       </div>
-    </Transition>
+    </template>
+
+    <div class="relative flex w-full items-end">
+      <Transition name="fade">
+        <div
+          v-if="!submitted"
+          class="color-transition shadow-sm absolute bottom-18 right-1/2 transform translate-x-[50%] md:bottom-4 md:(right-12 transform-none) flex items-center bg-white border dark:bg-slate-500 rounded divide-x-1"
+        >
+          <a-tooltip :title="isFirst ? '' : 'Go to previous'" :mouse-enter-delay="0.25" :mouse-leave-delay="0">
+            <button class="p-0.5 flex items-center group color-transition" @click="goPrevious">
+              <MdiChevronLeft :class="isFirst ? 'text-gray-300' : 'group-hover:text-accent'" class="text-2xl md:text-md" />
+            </button>
+          </a-tooltip>
+
+          <a-tooltip
+            :title="v$.localState[field.title]?.$error ? '' : 'Go to next'"
+            :mouse-enter-delay="0.25"
+            :mouse-leave-delay="0"
+          >
+            <button class="p-0.5 flex items-center group color-transition" @click="goNext">
+              <MdiChevronRight
+                :class="isLast || v$.localState[field.title]?.$error ? 'text-gray-300' : 'group-hover:text-accent'"
+                class="text-2xl md:text-md"
+              />
+            </button>
+          </a-tooltip>
+        </div>
+      </Transition>
+
+      <GeneralPoweredBy />
+    </div>
   </div>
 </template>
 

From e4a7497554e6412136093df72caf50c2091a3565 Mon Sep 17 00:00:00 2001
From: braks <78412429+bcakmakoglu@users.noreply.github.com>
Date: Thu, 6 Oct 2022 13:30:22 +0200
Subject: [PATCH 70/82] fix(nc-gui): dropzone injection not working

---
 packages/nc-gui/components/cell/attachment/Carousel.vue | 2 +-
 packages/nc-gui/components/cell/attachment/index.vue    | 5 +++--
 2 files changed, 4 insertions(+), 3 deletions(-)

diff --git a/packages/nc-gui/components/cell/attachment/Carousel.vue b/packages/nc-gui/components/cell/attachment/Carousel.vue
index 7b9b866b90..d9ecd64aeb 100644
--- a/packages/nc-gui/components/cell/attachment/Carousel.vue
+++ b/packages/nc-gui/components/cell/attachment/Carousel.vue
@@ -55,7 +55,7 @@ onClickOutside(carouselRef, () => {
         </div>
 
         <div
-          class="select-none group hover:ring active:ring-accent ring-opactiy-100 cursor-pointer leading-8 inline-block px-3 py-1 bg-gray-300 text-white mb-4 text-center rounded shadow"
+          class="select-none group hover:(ring-1 ring-accent) ring-opacity-100 cursor-pointer leading-8 inline-block px-3 py-1 bg-gray-300 text-white mb-4 text-center rounded shadow"
           @click.stop="downloadFile(selectedImage)"
         >
           <h3 class="group-hover:text-primary">{{ selectedImage && selectedImage.title }}</h3>
diff --git a/packages/nc-gui/components/cell/attachment/index.vue b/packages/nc-gui/components/cell/attachment/index.vue
index 2cac0fcc29..2ac2a353c6 100644
--- a/packages/nc-gui/components/cell/attachment/index.vue
+++ b/packages/nc-gui/components/cell/attachment/index.vue
@@ -37,7 +37,7 @@ const attachmentCellRef = ref<HTMLDivElement>()
 
 const sortableRef = ref<HTMLDivElement>()
 
-const currentCellRef = dropZoneInjection && dropZoneInjection.value ? ref() : dropZoneInjection
+const currentCellRef = ref<Element | undefined>(dropZoneInjection.value)
 
 const { cellRefs, isSharedForm } = useSmartsheetStoreOrThrow()!
 
@@ -60,6 +60,7 @@ const {
 watch(
   [() => rowIndex, isForm, attachmentCellRef],
   () => {
+    console.log(dropZoneInjection.value, currentCellRef.value)
     if (dropZoneInjection?.value) return
 
     if (!rowIndex && (isForm.value || isGallery.value)) {
@@ -87,7 +88,7 @@ const { dragging } = useSortable(sortableRef, visibleItems, updateModelValue, is
 
 const { state: rowState } = useSmartsheetRowStoreOrThrow()
 
-const { isOverDropZone } = useDropZone(currentCellRef, onDrop)
+const { isOverDropZone } = useDropZone(currentCellRef as any, onDrop)
 
 /** on new value, reparse our stored attachments */
 watch(

From f2bc114b293d7038df4776618175df95b6a6dd4b Mon Sep 17 00:00:00 2001
From: braks <78412429+bcakmakoglu@users.noreply.github.com>
Date: Thu, 6 Oct 2022 14:05:56 +0200
Subject: [PATCH 71/82] chore(nc-gui): remove logs

---
 packages/nc-gui/components/cell/attachment/index.vue | 1 -
 1 file changed, 1 deletion(-)

diff --git a/packages/nc-gui/components/cell/attachment/index.vue b/packages/nc-gui/components/cell/attachment/index.vue
index 2ac2a353c6..765031d826 100644
--- a/packages/nc-gui/components/cell/attachment/index.vue
+++ b/packages/nc-gui/components/cell/attachment/index.vue
@@ -60,7 +60,6 @@ const {
 watch(
   [() => rowIndex, isForm, attachmentCellRef],
   () => {
-    console.log(dropZoneInjection.value, currentCellRef.value)
     if (dropZoneInjection?.value) return
 
     if (!rowIndex && (isForm.value || isGallery.value)) {

From c552233f78884848dd21f6795912e07d2da13fe5 Mon Sep 17 00:00:00 2001
From: braks <78412429+bcakmakoglu@users.noreply.github.com>
Date: Thu, 6 Oct 2022 14:22:41 +0200
Subject: [PATCH 72/82] chore(nc-gui): decrease debounce max wait

---
 packages/nc-gui/components/smartsheet/Form.vue | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/nc-gui/components/smartsheet/Form.vue b/packages/nc-gui/components/smartsheet/Form.vue
index 9718296a14..4a7f74c53d 100644
--- a/packages/nc-gui/components/smartsheet/Form.vue
+++ b/packages/nc-gui/components/smartsheet/Form.vue
@@ -105,8 +105,8 @@ const updateView = useDebounceFn(
 
     updateFormView(formViewData.value)
   },
-  500,
-  { maxWait: 5000 },
+  300,
+  { maxWait: 2000 },
 )
 
 async function submitForm() {

From da3a7a5576a43246bd2311f38a9ce0b76c47066e Mon Sep 17 00:00:00 2001
From: braks <78412429+bcakmakoglu@users.noreply.github.com>
Date: Thu, 6 Oct 2022 14:25:14 +0200
Subject: [PATCH 73/82] chore(nc-gui): update comment

---
 packages/nc-gui/composables/useTheme/index.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/nc-gui/composables/useTheme/index.ts b/packages/nc-gui/composables/useTheme/index.ts
index 373ba8e922..b980b5d0e0 100644
--- a/packages/nc-gui/composables/useTheme/index.ts
+++ b/packages/nc-gui/composables/useTheme/index.ts
@@ -16,7 +16,7 @@ export const useTheme = createGlobalState((config?: Partial<ThemeConfig>) => {
   /** set initial config */
   setTheme(config ?? currentTheme.value)
 
-  /** set theme (persists in localstorage) */
+  /** set theme */
   function setTheme(theme?: Partial<ThemeConfig>) {
     const themePrimary = theme?.primaryColor ? tinycolor(theme.primaryColor) : tinycolor(themeV2Colors['royal-blue'].DEFAULT)
     const themeAccent = theme?.accentColor ? tinycolor(theme.accentColor) : tinycolor(themeV2Colors.pink['500'])

From 5047d1d88afc7b0c4f9261388a7db28634675a60 Mon Sep 17 00:00:00 2001
From: braks <78412429+bcakmakoglu@users.noreply.github.com>
Date: Thu, 6 Oct 2022 14:27:49 +0200
Subject: [PATCH 74/82] chore(nc-gui): mark picked theme color

---
 packages/nc-gui/pages/index/index/index.vue | 1 +
 1 file changed, 1 insertion(+)

diff --git a/packages/nc-gui/pages/index/index/index.vue b/packages/nc-gui/pages/index/index/index.vue
index f0ee020dbc..a4fd7fe006 100644
--- a/packages/nc-gui/pages/index/index/index.vue
+++ b/packages/nc-gui/pages/index/index/index.vue
@@ -237,6 +237,7 @@ onBeforeMount(loadProjects)
                       <template #expandIcon></template>
 
                       <LazyGeneralColorPicker
+                        :model-value="getProjectPrimary(record)"
                         :colors="projectThemeColors"
                         :row-size="9"
                         :advanced="false"

From 9bac78e0de1cd7a5602dfd11dc730915d2bb5b29 Mon Sep 17 00:00:00 2001
From: braks <78412429+bcakmakoglu@users.noreply.github.com>
Date: Thu, 6 Oct 2022 18:41:31 +0200
Subject: [PATCH 75/82] fix(nc-gui): redirect to 404 page if invalid viewid is
 requested

---
 packages/nc-gui/pages/[projectType]/form/[viewId].vue | 5 +++++
 packages/nc-gui/pages/error/404.vue                   | 4 ++--
 2 files changed, 7 insertions(+), 2 deletions(-)

diff --git a/packages/nc-gui/pages/[projectType]/form/[viewId].vue b/packages/nc-gui/pages/[projectType]/form/[viewId].vue
index 90cd2f1027..2e61ec8255 100644
--- a/packages/nc-gui/pages/[projectType]/form/[viewId].vue
+++ b/packages/nc-gui/pages/[projectType]/form/[viewId].vue
@@ -4,8 +4,10 @@ import {
   IsPublicInj,
   MetaInj,
   ReloadViewDataHookInj,
+  createError,
   createEventHook,
   definePageMeta,
+  navigateTo,
   provide,
   reactive,
   ref,
@@ -37,6 +39,9 @@ if (!notFound.value) {
   provide(IsFormInj, ref(true))
 
   useProvideSmartsheetStore(sharedView, meta, true)
+} else {
+  navigateTo('/error/404')
+  throw createError({ statusCode: 404, statusMessage: 'Page Not Found' })
 }
 
 const form = reactive({
diff --git a/packages/nc-gui/pages/error/404.vue b/packages/nc-gui/pages/error/404.vue
index 0948eb7d08..d30d9273e6 100644
--- a/packages/nc-gui/pages/error/404.vue
+++ b/packages/nc-gui/pages/error/404.vue
@@ -8,8 +8,8 @@ definePageMeta({
 </script>
 
 <template>
-  <div class="w-full h-[300px] flex justify-center items-center text-4xl">
-    <div class="text-gray-400 flex gap-2 items-center">
+  <div class="bg-primary bg-opacity-5 w-full h-full flex flex-col justify-center items-center text-4xl gap-12">
+    <div class="text-gray-400 flex gap-4 items-center">
       <MdiWarning />
       Page Not Found
     </div>

From 169fb64ca3eaddea42cccb4d4089ce77587a93dc Mon Sep 17 00:00:00 2001
From: Raju Udava <86527202+dstala@users.noreply.github.com>
Date: Thu, 6 Oct 2022 22:41:23 +0530
Subject: [PATCH 76/82] test: validate if grid is rendered

Signed-off-by: Raju Udava <86527202+dstala@users.noreply.github.com>
---
 scripts/cypress/support/commands.js | 6 ++++--
 1 file changed, 4 insertions(+), 2 deletions(-)

diff --git a/scripts/cypress/support/commands.js b/scripts/cypress/support/commands.js
index d930229d50..4c54088fe0 100644
--- a/scripts/cypress/support/commands.js
+++ b/scripts/cypress/support/commands.js
@@ -174,7 +174,7 @@ Cypress.Commands.add("gridWait", (rc) => {
   if (rc != 0) {
     cy.get(".nc-grid-row").should("have.length", rc);
   }
-})
+});
 
 // tn: table name
 // rc: row count. validate row count if rc!=0
@@ -332,7 +332,9 @@ Cypress.Commands.add("createTable", (name) => {
   cy.getActiveModal(".nc-modal-table-create")
     .find("button.ant-btn-primary:visible")
     .click();
-  cy.get(".xc-row-table.nc-grid").should("exist");
+
+  cy.gridWait(0);
+
   cy.url().should("contain", `table/${name}`);
   cy.get(`.nc-project-tree-tbl-${name}`).should("exist");
 });

From 3b88c4a0a3b4f344d2fbc3c10d96714f6f701bc8 Mon Sep 17 00:00:00 2001
From: Raju Udava <86527202+dstala@users.noreply.github.com>
Date: Fri, 7 Oct 2022 11:52:12 +0530
Subject: [PATCH 77/82] fix(nc-gui): validation error handling

Signed-off-by: Raju Udava <86527202+dstala@users.noreply.github.com>
---
 packages/nc-gui/components/smartsheet/Form.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/nc-gui/components/smartsheet/Form.vue b/packages/nc-gui/components/smartsheet/Form.vue
index 4a7f74c53d..ae58564208 100644
--- a/packages/nc-gui/components/smartsheet/Form.vue
+++ b/packages/nc-gui/components/smartsheet/Form.vue
@@ -114,7 +114,7 @@ async function submitForm() {
     await formRef.value?.validateFields()
   } catch (e: any) {
     e.errorFields.map((f: Record<string, any>) => message.error(f.errors.join(',')))
-    return
+    if (e.errorFields.length) return
   }
 
   const insertedRowData = await insertRow(formState)

From 12b9f43255a3b0cca10a45f6c7e16e835eb1bbd4 Mon Sep 17 00:00:00 2001
From: braks <78412429+bcakmakoglu@users.noreply.github.com>
Date: Fri, 7 Oct 2022 10:05:24 +0200
Subject: [PATCH 78/82] fix(nc-gui): stop propagation for non form cells

---
 packages/nc-gui/components/smartsheet/Cell.vue | 8 +++++---
 1 file changed, 5 insertions(+), 3 deletions(-)

diff --git a/packages/nc-gui/components/smartsheet/Cell.vue b/packages/nc-gui/components/smartsheet/Cell.vue
index ce20dbfa94..01cc8e824b 100644
--- a/packages/nc-gui/components/smartsheet/Cell.vue
+++ b/packages/nc-gui/components/smartsheet/Cell.vue
@@ -123,7 +123,7 @@ const {
   isPhoneNumber,
 } = useColumn(column)
 
-const syncAndNavigate = (dir: NavigateDir) => {
+const syncAndNavigate = (dir: NavigateDir, e: KeyboardEvent) => {
   if (isJSON.value) return
 
   if (currentRow.value.rowMeta.changed) {
@@ -131,6 +131,8 @@ const syncAndNavigate = (dir: NavigateDir) => {
     currentRow.value.rowMeta.changed = false
   }
   emit('navigate', dir)
+
+  if (!isForm.value) e.stopImmediatePropagation()
 }
 </script>
 
@@ -138,8 +140,8 @@ const syncAndNavigate = (dir: NavigateDir) => {
   <div
     class="nc-cell w-full"
     :class="[`nc-cell-${(column?.uidt || 'default').toLowerCase()}`, { 'text-blue-600': isPrimary && !virtual && !isForm }]"
-    @keydown.enter.exact="syncAndNavigate(NavigateDir.NEXT)"
-    @keydown.shift.enter.exact="syncAndNavigate(NavigateDir.PREV)"
+    @keydown.enter.exact="syncAndNavigate(NavigateDir.NEXT, $event)"
+    @keydown.shift.enter.exact="syncAndNavigate(NavigateDir.PREV, $event)"
   >
     <LazyCellTextArea v-if="isTextArea" v-model="vModel" />
     <LazyCellCheckbox v-else-if="isBoolean" v-model="vModel" />

From 8fca7fbacc1bc58a6de061d4c41e2a3855a7fbe4 Mon Sep 17 00:00:00 2001
From: braks <78412429+bcakmakoglu@users.noreply.github.com>
Date: Fri, 7 Oct 2022 10:09:25 +0200
Subject: [PATCH 79/82] fix(nc-gui): stop propagation for non form virtual
 cells

---
 .../nc-gui/components/smartsheet/VirtualCell.vue   | 14 +++++++++++---
 1 file changed, 11 insertions(+), 3 deletions(-)

diff --git a/packages/nc-gui/components/smartsheet/VirtualCell.vue b/packages/nc-gui/components/smartsheet/VirtualCell.vue
index dcdb3b1a45..9e935f9550 100644
--- a/packages/nc-gui/components/smartsheet/VirtualCell.vue
+++ b/packages/nc-gui/components/smartsheet/VirtualCell.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import type { ColumnType } from 'nocodb-sdk'
-import { ActiveCellInj, CellValueInj, ColumnInj, RowInj, provide, toRef, useVirtualCell } from '#imports'
+import { ActiveCellInj, CellValueInj, ColumnInj, IsFormInj, RowInj, inject, provide, ref, toRef, useVirtualCell } from '#imports'
 import type { Row } from '~/lib'
 import { NavigateDir } from '~/lib'
 
@@ -22,14 +22,22 @@ provide(ActiveCellInj, active)
 provide(RowInj, row)
 provide(CellValueInj, toRef(props, 'modelValue'))
 
+const isForm = inject(IsFormInj, ref(false))
+
 const { isLookup, isBt, isRollup, isMm, isHm, isFormula, isCount } = useVirtualCell(column)
+
+function onNavigate(dir: NavigateDir, e: KeyboardEvent) {
+  emit('navigate', dir)
+
+  if (!isForm.value) e.stopImmediatePropagation()
+}
 </script>
 
 <template>
   <div
     class="nc-virtual-cell w-full"
-    @keydown.enter.exact="emit('navigate', NavigateDir.NEXT)"
-    @keydown.shift.enter.exact="emit('navigate', NavigateDir.PREV)"
+    @keydown.enter.exact="onNavigate(NavigateDir.NEXT, $event)"
+    @keydown.shift.enter.exact="onNavigate(NavigateDir.PREV, $event)"
   >
     <LazyVirtualCellHasMany v-if="isHm" />
     <LazyVirtualCellManyToMany v-else-if="isMm" />

From c0987300ae64b7037d7d0a3c085fcd8d31f6a92b Mon Sep 17 00:00:00 2001
From: braks <78412429+bcakmakoglu@users.noreply.github.com>
Date: Fri, 7 Oct 2022 11:09:32 +0200
Subject: [PATCH 80/82] refactor(tests): remove looking for ant collapse

---
 scripts/cypress/integration/common/4b_table_view_share.js | 4 ----
 1 file changed, 4 deletions(-)

diff --git a/scripts/cypress/integration/common/4b_table_view_share.js b/scripts/cypress/integration/common/4b_table_view_share.js
index f65a27f874..d5d17a7dbf 100644
--- a/scripts/cypress/integration/common/4b_table_view_share.js
+++ b/scripts/cypress/integration/common/4b_table_view_share.js
@@ -13,10 +13,6 @@ const generateLinkWithPwd = () => {
     .should("be.visible");
 
   // enable checkbox & feed pwd, save
-  cy.getActiveModal(".nc-modal-share-view")
-    .find(".ant-collapse")
-    .should("exist")
-    .click();
   cy.getActiveModal(".nc-modal-share-view")
     .find(".ant-checkbox-input")
     .should("exist")

From 25e08de4d3a911767e671c3dbaecfac2943db1d9 Mon Sep 17 00:00:00 2001
From: Raju Udava <86527202+dstala@users.noreply.github.com>
Date: Fri, 7 Oct 2022 15:08:19 +0530
Subject: [PATCH 81/82] test: cy updates to support share view modal changes

Signed-off-by: Raju Udava <86527202+dstala@users.noreply.github.com>
---
 .../nc-gui/components/smartsheet/Grid.vue     | 293 +++++++++---------
 .../smartsheet/toolbar/ShareView.vue          |  22 +-
 .../integration/common/4b_table_view_share.js |  26 +-
 3 files changed, 174 insertions(+), 167 deletions(-)

diff --git a/packages/nc-gui/components/smartsheet/Grid.vue b/packages/nc-gui/components/smartsheet/Grid.vue
index 3e773052f9..58cfb6535b 100644
--- a/packages/nc-gui/components/smartsheet/Grid.vue
+++ b/packages/nc-gui/components/smartsheet/Grid.vue
@@ -365,93 +365,92 @@ watch([() => selected.row, () => selected.col], ([row, col]) => {
           @contextmenu="showContextMenu"
         >
           <thead>
-          <tr class="nc-grid-header border-1 bg-gray-100 sticky top[-1px]">
-            <th>
-              <div class="w-full h-full bg-gray-100 flex min-w-[70px] pl-5 pr-1 items-center">
-                <template v-if="!readOnly">
-                  <div class="nc-no-label text-gray-500" :class="{ hidden: selectedAllRecords }">#</div>
-                  <div
-                    :class="{ hidden: !selectedAllRecords, flex: selectedAllRecords }"
-                    class="nc-check-all w-full items-center"
-                  >
-                    <a-checkbox v-model:checked="selectedAllRecords" />
+            <tr class="nc-grid-header border-1 bg-gray-100 sticky top[-1px]">
+              <th>
+                <div class="w-full h-full bg-gray-100 flex min-w-[70px] pl-5 pr-1 items-center">
+                  <template v-if="!readOnly">
+                    <div class="nc-no-label text-gray-500" :class="{ hidden: selectedAllRecords }">#</div>
+                    <div
+                      :class="{ hidden: !selectedAllRecords, flex: selectedAllRecords }"
+                      class="nc-check-all w-full items-center"
+                    >
+                      <a-checkbox v-model:checked="selectedAllRecords" />
 
-                    <span class="flex-1" />
-                  </div>
-                </template>
-                <template v-else>
-                  <div class="text-gray-500">#</div>
-                </template>
-              </div>
-            </th>
-            <th
-              v-for="col in fields"
-              :key="col.title"
-              v-xc-ver-resize
-              :data-col="col.id"
-              :data-title="col.title"
-              @xcresize="onresize(col.id, $event)"
-              @xcresizing="onXcResizing(col.title, $event)"
-              @xcresized="resizingCol = null"
-            >
-              <div class="w-full h-full bg-gray-100 flex items-center">
-                <LazySmartsheetHeaderVirtualCell v-if="isVirtualCol(col)" :column="col" :hide-menu="readOnly" />
-
-                <LazySmartsheetHeaderCell v-else :column="col" :hide-menu="readOnly" />
-              </div>
-            </th>
-            <th
-              v-if="!readOnly && !isLocked && isUIAllowed('add-column') && !isSqlView"
-              v-e="['c:column:add']"
-              class="cursor-pointer"
-              @click.stop="addColumnDropdown = true"
-            >
-              <a-dropdown
-                v-model:visible="addColumnDropdown"
-                :trigger="['click']"
-                overlay-class-name="nc-dropdown-grid-add-column"
+                      <span class="flex-1" />
+                    </div>
+                  </template>
+                  <template v-else>
+                    <div class="text-gray-500">#</div>
+                  </template>
+                </div>
+              </th>
+              <th
+                v-for="col in fields"
+                :key="col.title"
+                v-xc-ver-resize
+                :data-col="col.id"
+                :data-title="col.title"
+                @xcresize="onresize(col.id, $event)"
+                @xcresizing="onXcResizing(col.title, $event)"
+                @xcresized="resizingCol = null"
               >
-                <div class="h-full w-[60px] flex items-center justify-center">
-                  <MdiPlus class="text-sm nc-column-add" />
+                <div class="w-full h-full bg-gray-100 flex items-center">
+                  <LazySmartsheetHeaderVirtualCell v-if="isVirtualCol(col)" :column="col" :hide-menu="readOnly" />
+
+                  <LazySmartsheetHeaderCell v-else :column="col" :hide-menu="readOnly" />
                 </div>
+              </th>
+              <th
+                v-if="!readOnly && !isLocked && isUIAllowed('add-column') && !isSqlView"
+                v-e="['c:column:add']"
+                class="cursor-pointer"
+                @click.stop="addColumnDropdown = true"
+              >
+                <a-dropdown
+                  v-model:visible="addColumnDropdown"
+                  :trigger="['click']"
+                  overlay-class-name="nc-dropdown-grid-add-column"
+                >
+                  <div class="h-full w-[60px] flex items-center justify-center">
+                    <MdiPlus class="text-sm nc-column-add" />
+                  </div>
 
-                <template #overlay>
-                  <SmartsheetColumnEditOrAddProvider
-                    v-if="addColumnDropdown"
-                    @submit="addColumnDropdown = false"
-                    @cancel="addColumnDropdown = false"
-                    @click.stop
-                    @keydown.stop
-                  />
-                </template>
-              </a-dropdown>
-            </th>
-          </tr>
+                  <template #overlay>
+                    <SmartsheetColumnEditOrAddProvider
+                      v-if="addColumnDropdown"
+                      @submit="addColumnDropdown = false"
+                      @cancel="addColumnDropdown = false"
+                      @click.stop
+                      @keydown.stop
+                    />
+                  </template>
+                </a-dropdown>
+              </th>
+            </tr>
           </thead>
           <!-- this prevent select text from field if not in edit mode -->
           <tbody ref="tbodyEl" @selectstart.prevent>
-          <LazySmartsheetRow v-for="(row, rowIndex) of data" ref="rowRefs" :key="rowIndex" :row="row">
-            <template #default="{ state }">
-              <tr class="nc-grid-row">
-                <td key="row-index" class="caption nc-grid-cell pl-5 pr-1">
-                  <div class="items-center flex gap-1 min-w-[55px]">
-                    <div
-                      v-if="!readOnly || !isLocked"
-                      class="nc-row-no text-xs text-gray-500"
-                      :class="{ toggle: !readOnly, hidden: row.rowMeta.selected }"
-                    >
-                      {{ rowIndex + 1 }}
-                    </div>
-                    <div
-                      v-if="!readOnly"
-                      :class="{ hidden: !row.rowMeta.selected, flex: row.rowMeta.selected }"
-                      class="nc-row-expand-and-checkbox"
-                    >
-                      <a-checkbox v-model:checked="row.rowMeta.selected" />
-                    </div>
-                    <span class="flex-1" />
-                    <div v-if="!readOnly && !isLocked" class="nc-expand"
-                         :class="{ 'nc-comment': row.rowMeta?.commentCount }">
+            <LazySmartsheetRow v-for="(row, rowIndex) of data" ref="rowRefs" :key="rowIndex" :row="row">
+              <template #default="{ state }">
+                <tr class="nc-grid-row">
+                  <td key="row-index" class="caption nc-grid-cell pl-5 pr-1">
+                    <div class="items-center flex gap-1 min-w-[55px]">
+                      <div
+                        v-if="!readOnly || !isLocked"
+                        class="nc-row-no text-xs text-gray-500"
+                        :class="{ toggle: !readOnly, hidden: row.rowMeta.selected }"
+                      >
+                        {{ rowIndex + 1 }}
+                      </div>
+                      <div
+                        v-if="!readOnly"
+                        :class="{ hidden: !row.rowMeta.selected, flex: row.rowMeta.selected }"
+                        class="nc-row-expand-and-checkbox"
+                      >
+                        <a-checkbox v-model:checked="row.rowMeta.selected" />
+                      </div>
+                      <span class="flex-1" />
+                      <div v-if="!readOnly && !isLocked" class="nc-expand" :class="{ 'nc-comment': row.rowMeta?.commentCount }">
                         <span
                           v-if="row.rowMeta?.commentCount"
                           class="py-1 px-3 rounded-full text-xs cursor-pointer select-none transform hover:(scale-110)"
@@ -460,82 +459,82 @@ watch([() => selected.row, () => selected.col], ([row, col]) => {
                         >
                           {{ row.rowMeta.commentCount }}
                         </span>
-                      <div
-                        v-else
-                        class="cursor-pointer flex items-center border-1 active:ring rounded p-1 hover:(bg-primary bg-opacity-10)"
-                      >
-                        <MdiArrowExpand
-                          v-e="['c:row-expand']"
-                          class="select-none transform hover:(text-accent scale-120) nc-row-expand"
-                          @click="expandForm(row, state)"
-                        />
+                        <div
+                          v-else
+                          class="cursor-pointer flex items-center border-1 active:ring rounded p-1 hover:(bg-primary bg-opacity-10)"
+                        >
+                          <MdiArrowExpand
+                            v-e="['c:row-expand']"
+                            class="select-none transform hover:(text-accent scale-120) nc-row-expand"
+                            @click="expandForm(row, state)"
+                          />
+                        </div>
                       </div>
                     </div>
-                  </div>
-                </td>
-                <td
-                  v-for="(columnObj, colIndex) of fields"
-                  :ref="cellRefs.set"
-                  :key="columnObj.id"
-                  class="cell relative cursor-pointer nc-grid-cell"
-                  :class="{
+                  </td>
+                  <td
+                    v-for="(columnObj, colIndex) of fields"
+                    :ref="cellRefs.set"
+                    :key="columnObj.id"
+                    class="cell relative cursor-pointer nc-grid-cell"
+                    :class="{
                       active:
                         (isUIAllowed('xcDatatableEditable') && selected.col === colIndex && selected.row === rowIndex) ||
                         (isUIAllowed('xcDatatableEditable') && selectedRange(rowIndex, colIndex)),
                     }"
-                  :data-key="rowIndex + columnObj.id"
-                  :data-col="columnObj.id"
-                  :data-title="columnObj.title"
-                  @click="selectCell(rowIndex, colIndex)"
-                  @dblclick="makeEditable(row, columnObj)"
-                  @mousedown="startSelectRange($event, rowIndex, colIndex)"
-                  @mouseover="selectBlock(rowIndex, colIndex)"
-                  @contextmenu="showContextMenu($event, { row: rowIndex, col: colIndex })"
-                >
-                  <div class="w-full h-full">
-                    <LazySmartsheetVirtualCell
-                      v-if="isVirtualCol(columnObj)"
-                      v-model="row.row[columnObj.title]"
-                      :column="columnObj"
-                      :active="selected.col === colIndex && selected.row === rowIndex"
-                      :row="row"
-                      @navigate="onNavigate"
-                    />
+                    :data-key="rowIndex + columnObj.id"
+                    :data-col="columnObj.id"
+                    :data-title="columnObj.title"
+                    @click="selectCell(rowIndex, colIndex)"
+                    @dblclick="makeEditable(row, columnObj)"
+                    @mousedown="startSelectRange($event, rowIndex, colIndex)"
+                    @mouseover="selectBlock(rowIndex, colIndex)"
+                    @contextmenu="showContextMenu($event, { row: rowIndex, col: colIndex })"
+                  >
+                    <div class="w-full h-full">
+                      <LazySmartsheetVirtualCell
+                        v-if="isVirtualCol(columnObj)"
+                        v-model="row.row[columnObj.title]"
+                        :column="columnObj"
+                        :active="selected.col === colIndex && selected.row === rowIndex"
+                        :row="row"
+                        @navigate="onNavigate"
+                      />
+
+                      <LazySmartsheetCell
+                        v-else
+                        v-model="row.row[columnObj.title]"
+                        :column="columnObj"
+                        :edit-enabled="hasEditPermission && editEnabled && selected.col === colIndex && selected.row === rowIndex"
+                        :row-index="rowIndex"
+                        :active="selected.col === colIndex && selected.row === rowIndex"
+                        @update:edit-enabled="editEnabled = false"
+                        @save="updateOrSaveRow(row, columnObj.title)"
+                        @navigate="onNavigate"
+                        @cancel="editEnabled = false"
+                      />
+                    </div>
+                  </td>
+                </tr>
+              </template>
+            </LazySmartsheetRow>
+
+            <tr v-if="!isView && !isLocked && hasEditPermission && !isSqlView">
+              <td
+                v-e="['c:row:add:grid-bottom']"
+                :colspan="visibleColLength + 1"
+                class="text-left pointer nc-grid-add-new-cell cursor-pointer"
+                @click="addEmptyRow()"
+              >
+                <div class="px-2 w-full flex items-center text-gray-500">
+                  <MdiPlus class="text-pint-500 text-xs ml-2 text-primary" />
 
-                    <LazySmartsheetCell
-                      v-else
-                      v-model="row.row[columnObj.title]"
-                      :column="columnObj"
-                      :edit-enabled="hasEditPermission && editEnabled && selected.col === colIndex && selected.row === rowIndex"
-                      :row-index="rowIndex"
-                      :active="selected.col === colIndex && selected.row === rowIndex"
-                      @update:edit-enabled="editEnabled = false"
-                      @save="updateOrSaveRow(row, columnObj.title)"
-                      @navigate="onNavigate"
-                      @cancel="editEnabled = false"
-                    />
-                  </div>
-                </td>
-              </tr>
-            </template>
-          </LazySmartsheetRow>
-
-          <tr v-if="!isView && !isLocked && hasEditPermission && !isSqlView">
-            <td
-              v-e="['c:row:add:grid-bottom']"
-              :colspan="visibleColLength + 1"
-              class="text-left pointer nc-grid-add-new-cell cursor-pointer"
-              @click="addEmptyRow()"
-            >
-              <div class="px-2 w-full flex items-center text-gray-500">
-                <MdiPlus class="text-pint-500 text-xs ml-2 text-primary" />
-
-                <span class="ml-1">
+                  <span class="ml-1">
                     {{ $t('activity.addRow') }}
                   </span>
-              </div>
-            </td>
-          </tr>
+                </div>
+              </td>
+            </tr>
           </tbody>
         </table>
 
diff --git a/packages/nc-gui/components/smartsheet/toolbar/ShareView.vue b/packages/nc-gui/components/smartsheet/toolbar/ShareView.vue
index 758259c0ae..bd52538985 100644
--- a/packages/nc-gui/components/smartsheet/toolbar/ShareView.vue
+++ b/packages/nc-gui/components/smartsheet/toolbar/ShareView.vue
@@ -215,14 +215,21 @@ watch(passwordProtected, (value) => {
         <div class="px-1 flex flex-col gap-2">
           <div>
             <!-- Survey Mode; todo: i18n -->
-            <a-checkbox v-if="shared.type === ViewTypes.FORM" v-model:checked="surveyMode" class="!text-xs">
+            <a-checkbox
+              v-if="shared.type === ViewTypes.FORM"
+              v-model:checked="surveyMode"
+              class="!text-xs"
+              data-cy="nc-share-view-checkbox-survey"
+            >
               Use Survey Mode
             </a-checkbox>
           </div>
 
           <div>
             <!-- todo: i18n -->
-            <a-checkbox v-model:checked="viewTheme" class="!text-xs"> Use Theme </a-checkbox>
+            <a-checkbox v-model:checked="viewTheme" class="!text-xs" data-cy="nc-share-view-checkbox-theme">
+              Use Theme
+            </a-checkbox>
 
             <div v-if="viewTheme" class="flex pl-2">
               <LazyGeneralColorPicker
@@ -237,7 +244,9 @@ watch(passwordProtected, (value) => {
 
           <div>
             <!-- Password Protection -->
-            <a-checkbox v-model:checked="passwordProtected" class="!text-xs">{{ $t('msg.info.beforeEnablePwd') }} </a-checkbox>
+            <a-checkbox v-model:checked="passwordProtected" class="!text-xs" data-cy="nc-share-view-checkbox-password"
+              >{{ $t('msg.info.beforeEnablePwd') }}
+            </a-checkbox>
 
             <div v-if="passwordProtected" class="ml-6 flex gap-2 mt-2 mb-4">
               <a-input
@@ -256,7 +265,12 @@ watch(passwordProtected, (value) => {
 
           <div>
             <!-- Allow Download -->
-            <a-checkbox v-if="shared && shared.type === ViewTypes.GRID" v-model:checked="allowCSVDownload" class="!text-xs">
+            <a-checkbox
+              v-if="shared && shared.type === ViewTypes.GRID"
+              v-model:checked="allowCSVDownload"
+              class="!text-xs"
+              data-cy="nc-share-view-checkbox-download"
+            >
               {{ $t('labels.downloadAllowed') }}
             </a-checkbox>
           </div>
diff --git a/scripts/cypress/integration/common/4b_table_view_share.js b/scripts/cypress/integration/common/4b_table_view_share.js
index d5d17a7dbf..fa2fe4eeb5 100644
--- a/scripts/cypress/integration/common/4b_table_view_share.js
+++ b/scripts/cypress/integration/common/4b_table_view_share.js
@@ -12,24 +12,18 @@ const generateLinkWithPwd = () => {
     .contains("This view is shared via a private link")
     .should("be.visible");
 
-  // enable checkbox & feed pwd, save
   cy.getActiveModal(".nc-modal-share-view")
-    .find(".ant-checkbox-input")
+    .find(`[data-cy="nc-share-view-checkbox-password"]`)
     .should("exist")
-    .first()
-    .then(($el) => {
-      if (!$el.prop("checked")) {
-        cy.wrap($el).click({ force: true });
-        cy.getActiveModal(".nc-modal-share-view")
-          .find('input[type="password"]')
-          .clear()
-          .type("1");
-        cy.getActiveModal(".nc-modal-share-view")
-          .find('button:contains("Save password")')
-          .click();
-        cy.toastWait("Successfully updated");
-      }
-    });
+    .click();
+  cy.getActiveModal(".nc-modal-share-view")
+    .find('input[type="password"]')
+    .clear()
+    .type("1");
+  cy.getActiveModal(".nc-modal-share-view")
+    .find('button:contains("Save password")')
+    .click();
+  cy.toastWait("Successfully updated");
 
   // copy link text, visit URL
   cy.getActiveModal(".nc-modal-share-view")

From 3974c877af720da5beb2c6cf93c7d2fdac5118e6 Mon Sep 17 00:00:00 2001
From: braks <78412429+bcakmakoglu@users.noreply.github.com>
Date: Fri, 7 Oct 2022 11:41:39 +0200
Subject: [PATCH 82/82] refactor(tests): add cy selectors and update share link
 test

---
 .../smartsheet/toolbar/ShareView.vue          | 19 +++++++++-----
 .../integration/common/4b_table_view_share.js | 26 +++++++------------
 2 files changed, 21 insertions(+), 24 deletions(-)

diff --git a/packages/nc-gui/components/smartsheet/toolbar/ShareView.vue b/packages/nc-gui/components/smartsheet/toolbar/ShareView.vue
index bd52538985..69411de2e7 100644
--- a/packages/nc-gui/components/smartsheet/toolbar/ShareView.vue
+++ b/packages/nc-gui/components/smartsheet/toolbar/ShareView.vue
@@ -198,7 +198,10 @@ watch(passwordProtected, (value) => {
       width="min(100vw,720px)"
       wrap-class-name="nc-modal-share-view"
     >
-      <div class="share-link-box nc-share-link-box !bg-primary !bg-opacity-5 ring-1 ring-accent ring-opacity-100">
+      <div
+        data-cy="nc-modal-share-view__link"
+        class="share-link-box !bg-primary !bg-opacity-5 ring-1 ring-accent ring-opacity-100"
+      >
         <div class="flex-1 h-min text-xs">{{ sharedViewUrl }}</div>
 
         <a v-e="['c:view:share:open-url']" :href="sharedViewUrl" target="_blank">
@@ -218,8 +221,8 @@ watch(passwordProtected, (value) => {
             <a-checkbox
               v-if="shared.type === ViewTypes.FORM"
               v-model:checked="surveyMode"
+              data-cy="nc-modal-share-view__survey-mode"
               class="!text-xs"
-              data-cy="nc-share-view-checkbox-survey"
             >
               Use Survey Mode
             </a-checkbox>
@@ -227,12 +230,13 @@ watch(passwordProtected, (value) => {
 
           <div>
             <!-- todo: i18n -->
-            <a-checkbox v-model:checked="viewTheme" class="!text-xs" data-cy="nc-share-view-checkbox-theme">
+            <a-checkbox v-model:checked="viewTheme" data-cy="nc-modal-share-view__with-theme" class="!text-xs">
               Use Theme
             </a-checkbox>
 
             <div v-if="viewTheme" class="flex pl-2">
               <LazyGeneralColorPicker
+                data-cy="nc-modal-share-view__theme-picker"
                 :model-value="shared.meta.theme?.primaryColor"
                 :colors="projectThemeColors"
                 :row-size="9"
@@ -244,20 +248,21 @@ watch(passwordProtected, (value) => {
 
           <div>
             <!-- Password Protection -->
-            <a-checkbox v-model:checked="passwordProtected" class="!text-xs" data-cy="nc-share-view-checkbox-password"
-              >{{ $t('msg.info.beforeEnablePwd') }}
+            <a-checkbox v-model:checked="passwordProtected" data-cy="nc-modal-share-view__with-password" class="!text-xs">
+              {{ $t('msg.info.beforeEnablePwd') }}
             </a-checkbox>
 
             <div v-if="passwordProtected" class="ml-6 flex gap-2 mt-2 mb-4">
               <a-input
                 v-model:value="shared.password"
+                data-cy="nc-modal-share-view__password"
                 size="small"
                 class="!text-xs max-w-[250px]"
                 type="password"
                 :placeholder="$t('placeholder.password.enter')"
               />
 
-              <a-button size="small" class="!text-xs" @click="saveShareLinkPassword">
+              <a-button data-cy="nc-modal-share-view__save-password" size="small" class="!text-xs" @click="saveShareLinkPassword">
                 {{ $t('placeholder.password.save') }}
               </a-button>
             </div>
@@ -268,8 +273,8 @@ watch(passwordProtected, (value) => {
             <a-checkbox
               v-if="shared && shared.type === ViewTypes.GRID"
               v-model:checked="allowCSVDownload"
+              data-cy="nc-modal-share-view__with-csv-download"
               class="!text-xs"
-              data-cy="nc-share-view-checkbox-download"
             >
               {{ $t('labels.downloadAllowed') }}
             </a-checkbox>
diff --git a/scripts/cypress/integration/common/4b_table_view_share.js b/scripts/cypress/integration/common/4b_table_view_share.js
index fa2fe4eeb5..c7757c841f 100644
--- a/scripts/cypress/integration/common/4b_table_view_share.js
+++ b/scripts/cypress/integration/common/4b_table_view_share.js
@@ -12,26 +12,18 @@ const generateLinkWithPwd = () => {
     .contains("This view is shared via a private link")
     .should("be.visible");
 
-  cy.getActiveModal(".nc-modal-share-view")
-    .find(`[data-cy="nc-share-view-checkbox-password"]`)
-    .should("exist")
-    .click();
-  cy.getActiveModal(".nc-modal-share-view")
-    .find('input[type="password"]')
-    .clear()
-    .type("1");
-  cy.getActiveModal(".nc-modal-share-view")
-    .find('button:contains("Save password")')
-    .click();
+  // enable checkbox & feed pwd, save
+  cy.get('[data-cy="nc-modal-share-view__with-password"]').click();
+  cy.get('[data-cy="nc-modal-share-view__password"]').clear().type('1')
+  cy.get('[data-cy="nc-modal-share-view__save-password"]').click();
   cy.toastWait("Successfully updated");
 
   // copy link text, visit URL
-  cy.getActiveModal(".nc-modal-share-view")
-    .find(".nc-share-link-box")
-    .then(($obj) => {
-      linkText = $obj.text().trim();
-      cy.log(linkText);
-    });
+  cy.get('[data-cy="nc-modal-share-view__link"]').then(($el) => {
+    linkText = $el.text();
+    // todo: visit url?
+    cy.log(linkText);
+  })
 };
 
 export const genTest = (apiType, dbType) => {