refactor(gui-v2): correct height for container

packages/nc-gui-v2/app.vue

@@ -3,10 +3,13 @@ import MdiAt from '~icons/mdi/at'
 import MdiLogout from '~icons/mdi/logout'
 import MdiDotsVertical from '~icons/mdi/dots-vertical'
 import MaterialSymbolsMenu from '~icons/material-symbols/menu'
+import MdiReload from '~icons/mdi/reload'
 import { navigateTo } from '#app'
 
 const { $state } = useNuxtApp()
 
+const { isLoading } = useApi()
+
 const sidebar = ref<HTMLDivElement>()
 
 const email = computed(() => $state.user?.value?.email ?? '---')
@@ -16,11 +19,9 @@ const signOut = () => {
   navigateTo('/signin')
 }
 
-const toggleSidebar = useToggle($state.sidebarOpen)
-
 const sidebarOpen = computed({
   get: () => !$state.sidebarOpen.value,
-  set: (val) => toggleSidebar(val),
+  set: (val) => ($state.sidebarOpen.value = !val),
 })
 </script>
 
@@ -41,15 +42,9 @@ const sidebarOpen = computed({
           <span class="prose-xl">NocoDB</span>
         </div>
 
-        <!-- todo: loading is not yet supported by nuxt 3 - see https://v3.nuxtjs.org/migration/component-options#loading
+        <div v-show="isLoading" class="text-gray-400 ml-3">
-          <span v-show="$nuxt.$loading.show" class="caption grey--text ml-3">
+          {{ $t('general.loading') }} <MdiReload :class="{ 'animate-infinite animate-spin !text-success': isLoading }" />
-            {{ $t('general.loading') }} <v-icon small color="grey">mdi-spin mdi-loading</v-icon>
+        </div>
-          </span>
-
-
-          todo: replace shortkey?
-          <span v-shortkey="['ctrl', 'shift', 'd']" @shortkey="openDiscord" />
-           -->
       </div>
 
       <div class="flex-1" />

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

@@ -45,18 +45,10 @@ export default {
 </script>
 
 <template>
-  <div class="d-flex align-center">
+  <div class="flex items-center mb-2">
     <span v-if="count !== null && count !== Infinity" class="caption ml-2"> {{ count }} record{{ count !== 1 ? 's' : '' }} </span>
-    <v-spacer />
+
-    <!--    <v-pagination
+    <div class="flex-1" />
-      v-if="count !== Infinity"
-      v-model="page"
-      style="max-width: 100%"
-      :length="Math.ceil(count / size)"
-      :total-visible="8"
-      color="primary lighten-2"
-      class="nc-pagination"
-    /> -->
 
     <a-pagination
       v-if="count !== Infinity"
@@ -86,8 +78,7 @@ export default {
       </v-text-field>
     </div>
 
-    <v-spacer />
+    <div class="flex-1" />
-    <v-spacer />
   </div>
 </template>
 

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

@@ -273,7 +273,7 @@ function onApiSnippet() {
 </script>
 
 <template>
-  <a-layout-sider class="views-navigation-drawer bg-white shadow" :width="toggleDrawer ? 0 : 250">
+  <a-layout-sider class="shadow" :width="toggleDrawer ? 0 : 250">
     <div class="flex flex-col h-full">
       <a-menu class="flex-1" :selected-keys="selected">
         <h3 class="pt-3 px-3 text-xs font-semibold">{{ $t('objects.views') }}</h3>
@@ -389,7 +389,7 @@ function onApiSnippet() {
 
         <div class="flex flex-col gap-4 mt-8">
           <button
-            class="flex items-center gap-2 w-full mx-3 p-4 rounded bordered bg-primary transform translate-x-4 hover:translate-x-0 transition duration-150 ease"
+            class="flex items-center gap-2 w-full mx-3 p-4 rounded bordered !bg-primary text-white transform translate-x-4 hover:translate-x-0 transition duration-150 ease"
             @click="onApiSnippet"
           >
             <MdiXml />Get API Snippet
@@ -402,6 +402,14 @@ function onApiSnippet() {
             <MdiHook />{{ $t('objects.webhooks') }}
           </button>
         </div>
+
+        <general-flipping-card class="my-4 h-[250px] w-[250px]">
+          <template #front>
+            <general-social />
+
+            <a v-t="['e:hiring']" href="https://angel.co/company/nocodb" target="_blank"> 🚀 We are Hiring! 🚀 </a>
+          </template>
+        </general-flipping-card>
       </a-menu>
     </div>
 

packages/nc-gui-v2/layouts/default.vue

@@ -18,7 +18,7 @@ export default {
 </script>
 
 <template>
-  <a-layout-content>
+  <a-layout-content class="pl-2 pt-2">
     <teleport v-if="$slots.sidebar" to="#sidebar">
       <slot name="sidebar" />
     </teleport>

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

@@ -36,13 +36,13 @@ function openQuickImportDialog(type: string) {
 </script>
 
 <template>
-  <div class="nc-container d-flex flex-column">
+  <div class="nc-container flex flex-col">
     <div>
-      <a-tabs v-model:activeKey="activeTabIndex" size="small" type="editable-card" @edit="closeTab">
+      <a-tabs v-model:activeKey="activeTabIndex" type="editable-card" @edit="closeTab">
         <a-tab-pane v-for="(tab, i) in tabs" :key="i" :tab="tab.title" />
 
         <template #leftExtra>
-          <a-menu v-model:selectedKeys="currentMenu" mode="horizontal">
+          <a-menu v-model:selectedKeys="currentMenu" class="border-0" mode="horizontal">
             <a-sub-menu key="addORImport">
               <template #title>
                 <div class="text-sm flex items-center gap-2">
@@ -142,7 +142,7 @@ function openQuickImportDialog(type: string) {
 
 <style scoped>
 .nc-container {
-  height: calc(calc(100vh - var(--header-height)));
+  height: calc(100% + var(--header-height));
   @apply overflow-hidden;
 }
 

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

@@ -1,13 +1,5 @@
 <template>
   <NuxtLayout>
-    <div class="w-full nc-container">
+    <NuxtPage />
-      <NuxtPage />
-    </div>
   </NuxtLayout>
 </template>
-
-<style scoped>
-.nc-container {
-  @apply h-[calc(100vh_-_var(--header-height))];
-}
-</style>