feat: feed wip

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

@@ -60,6 +60,7 @@ onUnmounted(() => {
       <GeneralGift v-if="!isEeUI" />
       <div class="border-t-1 w-full"></div>
       <DashboardSidebarBeforeUserInfo />
+      <DashboardSidebarFeed />
       <DashboardSidebarUserInfo />
     </div>
   </div>

packages/nc-gui/components/dashboard/Sidebar/Feed.vue

@@ -0,0 +1,18 @@
+<script setup lang="ts">
+const { navigateToFeed } = useWorkspace()
+
+const gotoFeed = async () => {
+  await navigateToFeed()
+}
+</script>
+
+<template>
+  <div class="px-2 py-2">
+    <div class="flex items-center py-1.5 cursor-pointer px-3 hover:bg-gray-100 bg-[#F0F3FF] rounded-md gap-3" @click="gotoFeed">
+      <GeneralIcon class="text-yellow-500" icon="magic" />
+      <span class="text-[#2952CC] font-semibold"> What’s New! </span>
+    </div>
+  </div>
+</template>
+
+<style scoped lang="scss"></style>

packages/nc-gui/components/feed/Header.vue

@@ -0,0 +1,13 @@
+<script setup lang="ts"></script>
+
+<template>
+  <div class="w-full px-3 h-12 border-b-1 border-gray-200 py-2">
+    <div class="flex items-center gap-3">
+      <GeneralIcon icon="magic" class="text-yellow-500" />
+
+      <span class="text-gray-800 text-xl font-medium"> What’s New! </span>
+    </div>
+  </div>
+</template>
+
+<style scoped lang="scss"></style>

packages/nc-gui/components/feed/Navigation.vue

@@ -0,0 +1,140 @@
+<script setup lang="ts">
+const props = defineProps<{
+  activeKey: string
+}>()
+
+const emits = defineEmits(['update:activeKey'])
+
+const activeKey = useVModel(props, 'activeKey', emits)
+
+const navigationElements = [
+  {
+    key: 'recents',
+    icon: iconMap.clock,
+    title: 'Recents',
+    description: 'Recent activities',
+  },
+  {
+    key: 'changelog',
+    icon: iconMap.list,
+    title: 'Changelog',
+    description: 'Recent changes',
+  },
+  {
+    key: 'roadmap',
+    icon: iconMap.ncNavigation,
+    title: 'Roadmap',
+    description: 'Upcoming features',
+  },
+]
+</script>
+
+<template>
+  <div style="height: calc(100% - var(--topbar-height))" class="w-80 p-3 flex flex-col justify-between">
+    <div class="flex flex-col gap-1">
+      <div
+        v-for="elem in navigationElements"
+        :key="elem.title"
+        :class="{
+          'bg-[#F0F3FF]': activeKey === elem.key,
+          'hover:bg-gray-100': activeKey !== elem.key,
+        }"
+        class="flex items-center rounded-lg cursor-pointer transition-all gap-2 p-2"
+        @click="activeKey = elem.key"
+      >
+        <div
+          :class="{
+            '!bg-transparent': activeKey === elem.key,
+          }"
+          class="bg-gray-200 rounded-md h-6 flex items-center justify-center w-6"
+        >
+          <component
+            :is="elem.icon"
+            :class="{
+              'text-[#2952CC]': activeKey === elem.key,
+            }"
+            class="text-gray-700 w-4 h-4"
+          />
+        </div>
+        <div class="flex gap-1 flex-col">
+          <div
+            :class="{
+              'text-[#2952CC]': activeKey === elem.key,
+              'text-gray-800': activeKey !== elem.key,
+            }"
+            class="font-semibold"
+          >
+            {{ elem.title }}
+          </div>
+
+          <div class="text-xs text-gray-500">
+            {{ elem.description }}
+          </div>
+        </div>
+      </div>
+    </div>
+    <NcMenu>
+      <a
+        v-e="['c:nocodb:twitter']"
+        href="https://twitter.com/nocodb"
+        target="_blank"
+        class="!underline-transparent"
+        rel="noopener noreferrer"
+      >
+        <NcMenuItem class="social-icon-wrapper group">
+          <GeneralIcon class="social-icon" icon="ncTwitter" />
+          <span class="menu-btn"> @nocodb </span>
+        </NcMenuItem>
+      </a>
+      <a
+        v-e="['c:nocodb:discord']"
+        href="https://discord.gg/5RgZmkW"
+        target="_blank"
+        class="!underline-transparent"
+        rel="noopener noreferrer"
+      >
+        <NcMenuItem class="social-icon-wrapper">
+          <GeneralIcon class="social-icon" icon="ncDiscord" />
+          <span class="menu-btn"> {{ $t('labels.community.joinDiscord') }} </span>
+        </NcMenuItem>
+      </a>
+      <a
+        v-e="['c:nocodb:reddit']"
+        href="https://www.reddit.com/r/NocoDB"
+        target="_blank"
+        class="!underline-transparent"
+        rel="noopener noreferrer"
+      >
+        <NcMenuItem class="social-icon-wrapper">
+          <GeneralIcon class="social-icon" icon="ncReddit" />
+          <span class="menu-btn"> {{ $t('labels.community.joinReddit') }} </span>
+        </NcMenuItem>
+      </a>
+    </NcMenu>
+  </div>
+</template>
+
+<style scoped lang="scss">
+menu-btn {
+  line-height: 1.5;
+}
+.menu-icon {
+  @apply w-4 h-4;
+  font-size: 1rem;
+}
+
+:deep(.ant-popover-inner-content) {
+  @apply !p-0 !rounded-md;
+}
+
+.social-icon {
+  @apply my-0.5 w-4 h-4 stroke-transparent;
+}
+
+.social-icon-wrapper {
+  @apply !w-5 !h-5 !text-gray-800;
+  .nc-icon {
+    @apply mr-0.15;
+  }
+}
+</style>

packages/nc-gui/components/feed/View.vue

@@ -0,0 +1,11 @@
+<script setup lang="ts">
+const activeKey = ref('recents')
+</script>
+
+<template>
+  <FeedHeader />
+
+  <FeedNavigation v-model:active-key="activeKey" />
+</template>
+
+<style scoped lang="scss"></style>

packages/nc-gui/pages/index/[typeOrId]/feed.vue

@@ -0,0 +1,7 @@
+<script setup lang="ts"></script>
+
+<template>
+  <FeedView />
+</template>
+
+<style scoped lang="scss"></style>

packages/nc-gui/store/workspace.ts

@@ -238,6 +238,16 @@ export const useWorkspace = defineStore('workspaceStore', () => {
     }
   }
 
+  const navigateToFeed = async (_?: string, cmdOrCtrl?: boolean) => {
+    if (cmdOrCtrl) {
+      await navigateTo('/nc/feed', {
+        open: navigateToBlankTargetOpenOption,
+      })
+    } else {
+      await navigateTo('/nc/feed')
+    }
+  }
+
   const auditLogsQuery = ref<Partial<AuditLogsQuery>>(defaultAuditLogsQuery)
 
   const audits = ref<null | Array<AuditType>>(null)
@@ -326,6 +336,7 @@ export const useWorkspace = defineStore('workspaceStore', () => {
     auditLogsQuery,
     audits,
     auditPaginationData,
+    navigateToFeed,
     loadAudits,
     isIntegrationsPageOpened,
     navigateToIntegrations,