From b420d8861611246b352ad49881c269536958de7f Mon Sep 17 00:00:00 2001
From: DarkPhoenix2704 <anbarasun123@gmail.com>
Date: Wed, 2 Oct 2024 05:54:21 +0000
Subject: [PATCH] feat: feed wip

---
 .../nc-gui/components/dashboard/Sidebar.vue   |   1 +
 .../components/dashboard/Sidebar/Feed.vue     |  18 +++
 packages/nc-gui/components/feed/Header.vue    |  13 ++
 .../nc-gui/components/feed/Navigation.vue     | 140 ++++++++++++++++++
 packages/nc-gui/components/feed/View.vue      |  11 ++
 .../nc-gui/pages/index/[typeOrId]/feed.vue    |   7 +
 packages/nc-gui/store/workspace.ts            |  11 ++
 7 files changed, 201 insertions(+)
 create mode 100644 packages/nc-gui/components/dashboard/Sidebar/Feed.vue
 create mode 100644 packages/nc-gui/components/feed/Header.vue
 create mode 100644 packages/nc-gui/components/feed/Navigation.vue
 create mode 100644 packages/nc-gui/components/feed/View.vue
 create mode 100644 packages/nc-gui/pages/index/[typeOrId]/feed.vue

diff --git a/packages/nc-gui/components/dashboard/Sidebar.vue b/packages/nc-gui/components/dashboard/Sidebar.vue
index 80102bf614..84c30a176e 100644
--- a/packages/nc-gui/components/dashboard/Sidebar.vue
+++ b/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>
diff --git a/packages/nc-gui/components/dashboard/Sidebar/Feed.vue b/packages/nc-gui/components/dashboard/Sidebar/Feed.vue
new file mode 100644
index 0000000000..682c0cac4b
--- /dev/null
+++ b/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>
diff --git a/packages/nc-gui/components/feed/Header.vue b/packages/nc-gui/components/feed/Header.vue
new file mode 100644
index 0000000000..a9164aaba6
--- /dev/null
+++ b/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>
diff --git a/packages/nc-gui/components/feed/Navigation.vue b/packages/nc-gui/components/feed/Navigation.vue
new file mode 100644
index 0000000000..8747e0c284
--- /dev/null
+++ b/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>
diff --git a/packages/nc-gui/components/feed/View.vue b/packages/nc-gui/components/feed/View.vue
new file mode 100644
index 0000000000..c5ad68f699
--- /dev/null
+++ b/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>
diff --git a/packages/nc-gui/pages/index/[typeOrId]/feed.vue b/packages/nc-gui/pages/index/[typeOrId]/feed.vue
new file mode 100644
index 0000000000..96749ed619
--- /dev/null
+++ b/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>
diff --git a/packages/nc-gui/store/workspace.ts b/packages/nc-gui/store/workspace.ts
index 6989e06d34..00b3274320 100644
--- a/packages/nc-gui/store/workspace.ts
+++ b/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,