feat: changelog ui

packages/nc-gui/assets/nc-icons/youtube2.svg

@@ -0,0 +1,11 @@
+<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g id="Social Icons" clip-path="url(#clip0_47_9415)">
+<path id="Vector" d="M19.6016 5.15454C19.4885 4.72906 19.2657 4.34073 18.9554 4.02842C18.6451 3.71612 18.2582 3.49079 17.8334 3.375C16.2698 2.95454 10.0198 2.95454 10.0198 2.95454C10.0198 2.95454 3.76978 2.95454 2.20614 3.375C1.78138 3.49079 1.39449 3.71612 1.08418 4.02842C0.773872 4.34073 0.55103 4.72906 0.437957 5.15454C0.0197754 6.725 0.0197754 10 0.0197754 10C0.0197754 10 0.0197754 13.275 0.437957 14.8455C0.55103 15.2709 0.773872 15.6593 1.08418 15.9716C1.39449 16.2839 1.78138 16.5092 2.20614 16.625C3.76978 17.0455 10.0198 17.0455 10.0198 17.0455C10.0198 17.0455 16.2698 17.0455 17.8334 16.625C18.2582 16.5092 18.6451 16.2839 18.9554 15.9716C19.2657 15.6593 19.4885 15.2709 19.6016 14.8455C20.0198 13.275 20.0198 10 20.0198 10C20.0198 10 20.0198 6.725 19.6016 5.15454Z" fill="#FF0302"/>
+<path id="Vector_2" d="M7.97437 12.9739V7.02617L13.2016 10L7.97437 12.9739Z" fill="#FEFEFE"/>
+</g>
+<defs>
+<clipPath id="clip0_47_9415">
+<rect width="20" height="20" fill="white"/>
+</clipPath>
+</defs>
+</svg>

packages/nc-gui/components/feed/Changelog/Item.vue

@@ -0,0 +1,61 @@
+<script setup lang="ts"></script>
+
+<template>
+  <div class="block relative">
+    <div class="relative pb-12">
+      <div class="aside">
+        <div class="aside-divider">
+          <div class="aside-divider-dot"></div>
+        </div>
+        <div class="aside-inner">
+          <div class="text-sm text-gray-700 leading-5">August 16th 2024</div>
+        </div>
+      </div>
+
+      <div class="content">
+        <div class="flex flex-col py-6 gap-8">
+          <h1>Connect Kit</h1>
+          <p>
+            This update includes improvements to the CoinbaseWalletSDK connect popup and MockConnector . Fixed CoinbaseWalletSDK
+            connect popup now works on first interaction. MockConnector now working as intended.
+          </p>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style scoped lang="scss">
+.content {
+  @apply !pl-50;
+}
+
+.aside {
+  @apply absolute left-0 top-2 bottom-2 w-44;
+
+  .aside-inner {
+    @apply sticky top-0;
+  }
+
+  .aside-divider {
+    @apply absolute top-0 right-0 bottom-0 w-1.5;
+    &:before {
+      @apply absolute bg-[#E7E7E9] left-0 transform -translate-x-1/2;
+      content: '';
+      top: 6px;
+      bottom: -18px;
+      width: 2px;
+      border-radius: 2px;
+    }
+
+    .aside-divider-dot {
+      @apply sticky top-0
+      transform: translateY(calc(-50% + 3px)) translateX(50%);
+      &:before {
+        @apply bg-brand-500 absolute w-1.5 h-1.5 left-0 rounded-full transform -translate-x-1/2;
+        content: '';
+      }
+    }
+  }
+}
+</style>

packages/nc-gui/components/feed/Changelog/index.vue

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

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

@@ -7,6 +7,8 @@ const emits = defineEmits(['update:activeKey'])
 
 const activeKey = useVModel(props, 'activeKey', emits)
 
+const { $e } = useNuxtApp()
+
 const navigationElements = [
   {
     key: 'recents',
@@ -27,6 +29,38 @@ const navigationElements = [
     description: 'Upcoming features',
   },
 ]
+
+const socialLinks = [
+  {
+    key: 'youtube',
+    icon: iconMap.youtube,
+    title: 'NocoDB',
+    url: 'https://www.youtube.com/@nocodb',
+  },
+  {
+    key: 'twitter',
+    icon: iconMap.twitter,
+    title: '@nocodb',
+    url: 'https://x.com/nocodb',
+  },
+  {
+    key: 'discord',
+    icon: iconMap.discord,
+    title: 'NocoDB',
+    url: 'https://discord.gg/5RgZmkW',
+  },
+  {
+    key: 'reddit',
+    icon: iconMap.reddit,
+    title: 'r/NocoDB',
+    url: 'https://www.reddit.com/r/NocoDB',
+  },
+]
+
+const openLink = (url: string, key: string) => {
+  $e(`c:nocodb:${key}`)
+  window.open(url, '_blank')
+}
 </script>
 
 <template>
@@ -73,68 +107,20 @@ const navigationElements = [
         </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"
+    <div class="flex flex-col gap-1">
+      <div
+        v-for="social in socialLinks"
+        :key="social.key"
+        class="flex items-center w-full cursor-pointer transition-all gap-2 px-3 py-2"
+        @click="openLink(social.url, social.key)"
       >
-        <NcMenuItem class="social-icon-wrapper">
-          <GeneralIcon class="social-icon" icon="ncReddit" />
-          <span class="menu-btn"> {{ $t('labels.community.joinReddit') }} </span>
-        </NcMenuItem>
-      </a>
-    </NcMenu>
+        <component :is="social.icon" class="w-5 h-5 stroke-transparent" />
+        <span class="text-[13px] text-gray-800 font-medium">
+          {{ social.title }}
+        </span>
+      </div>
+    </div>
   </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>
+<style scoped lang="scss"></style>

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

@@ -4,8 +4,14 @@ const activeKey = ref('recents')
 
 <template>
   <FeedHeader />
-
-  <FeedNavigation v-model:active-key="activeKey" />
+  <div class="flex gap-6 justify-center h-full">
+    <FeedNavigation v-model:active-key="activeKey" class="flex-grow-1" />
+    <div style="height: calc(100% - var(--topbar-height) - 32px)" class="overflow-y-auto w-full mt-8">
+      <div>
+        <FeedChangelog v-if="activeKey === 'changelog'" />
+      </div>
+    </div>
+  </div>
 </template>
 
 <style scoped lang="scss"></style>

packages/nc-gui/utils/iconUtils.ts

@@ -531,6 +531,7 @@ import NcMousePointerIcon from '~icons/nc-icons-v2/mouse-pointer.svg'
 import NcAlignLeftIcon from '~icons/nc-icons-v2/align-left.svg'
 import NcHeartIcon from '~icons/nc-icons-v2/heart.svg'
 import NcTrendingUpIcon from '~icons/nc-icons-v2/trending-up.svg'
+import NcYoutube2Icon from '~icons/nc-icons/youtube2.svg'
 
 import NcSlash1 from '~icons/nc-icons/slash1'
 
@@ -1338,6 +1339,7 @@ export const iconMap = {
   ncPlaceholderIcon: NcPlaceholderIcon,
   ncSpanner: NcSpanner,
   ncScript: NcScript,
+  youtube: NcYoutube2Icon,
 }
 
 export const getMdiIcon = (type: string): any => {