fix: disbale toolbar and top bar

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

@@ -62,7 +62,7 @@ const renderedText = computedAsync(async () => {
       </div>
 
       <div class="content">
-        <div class="flex flex-col py-6 gap-8">
+        <div class="flex flex-col py-6 gap-5">
           <div class="flex items-center">
             <div
               v-for="tag in tags"
@@ -73,7 +73,7 @@ const renderedText = computedAsync(async () => {
                 'bg-green-50': tag.color === 'green',
               }"
               :href="tag.href"
-              class="mr-4 flex gap-2 items-center px-1 rounded-md"
+              class="mr-3 flex gap-2 items-center px-1 rounded-md"
             >
               <component
                 :is="tag.icon"
@@ -90,7 +90,7 @@ const renderedText = computedAsync(async () => {
                   'text-purple-500': tag.color === 'purple',
                   'text-green-500': tag.color === 'green',
                 }"
-                class="leading-5"
+                class="leading-5 text-[13px]"
               >
                 {{ tag.text }}
               </span>
@@ -147,7 +147,7 @@ const renderedText = computedAsync(async () => {
       @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;
+        @apply bg-brand-500 absolute w-2 h-2 border-2 border-white left-0 rounded-full transform -translate-x-1/2;
         content: '';
       }
     }

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

@@ -27,7 +27,7 @@ const { isLoading } = useInfiniteScroll(
     class="overflow-y-auto nc-scrollbar-md mx-auto w-full"
   >
     <div class="max-w-260 mx-auto">
-      <FeedChangelogItem v-for="feed in githubFeed" :item="feed" />
+      <FeedChangelogItem v-for="feed in githubFeed" :key="feed.Id" :item="feed" />
     </div>
   </div>
 </template>

packages/nc-gui/components/feed/Recents/Card.vue

@@ -19,9 +19,9 @@ const {
 } = props
 
 const feedIcon = {
-  'Twitter': iconMap.twitter,
+  Twitter: iconMap.twitter,
-  'Youtube': iconMap.youtube,
+  Youtube: iconMap.youtube,
-  'Github Release': iconMap.githubSolid,
+  Github: iconMap.githubSolid,
 }
 
 const renderedText = computedAsync(async () => {
@@ -40,9 +40,9 @@ const renderedText = computedAsync(async () => {
 
 <template>
   <div class="bg-white rounded-2xl" style="width: 656px">
-    <div class="flex items-center justify-between px-5 py-5">
+    <div class="flex items-center justify-between px-5 py-4">
       <div class="flex items-center gap-3">
-        <component :is="feedIcon[source]" class="w-4 h-4 stroke-transparent" />
+        <component :is="feedIcon[source as any]" class="w-4 h-4 stroke-transparent" />
         <span class="font-weight-medium leading-5">
           {{ source }}
         </span>
@@ -51,9 +51,9 @@ const renderedText = computedAsync(async () => {
         {{ timeAgo(CreatedAt) }}
       </div>
     </div>
-    <template v-if="source === 'Github Release'">
+    <template v-if="source === 'Github'">
       <LazyCellAttachmentPreviewImage v-if="Images?.length" :srcs="getPossibleAttachmentSrc(Images[0], 'card_cover')" />
-      <div class="prose pl-5 mt-5" v-html="renderedText"></div>
+      <div class="prose px-5 mt-5" v-html="renderedText"></div>
     </template>
     <template v-else-if="source === 'Youtube'">
       <YoutubeVue3 :videoid="extractYoutubeVideoId(Url)" :height="410" :width="656" :autoplay="0" />

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

@@ -24,11 +24,11 @@ const { isLoading } = useInfiniteScroll(
   <div
     ref="scrollContainer"
     :style="{
-      height: 'calc(100dvh - var(--toolbar-height) - 3.25rem)',
+      height: 'calc(100dvh - var(--toolbar-height) - 3.1rem)',
     }"
     class="overflow-y-auto nc-scrollbar-md w-full"
   >
-    <div class="flex flex-col items-center gap-6">
+    <div class="flex flex-col my-6 items-center gap-6">
       <FeedRecentsCard v-for="feed in socialFeed" :key="feed.Id" :item="feed" />
     </div>
   </div>

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

@@ -4,22 +4,6 @@ const iFrame = ref<HTMLIFrameElement | null>(null)
 const isLoaded = ref(false)
 
 const handleIframeLoad = () => {
-  if (!iFrame.value) {
-    return
-  }
-  const iframeDocument = iFrame.value?.contentDocument || iFrame.value?.contentWindow?.document
-
-  const classList = ['.nc-table-topbar', '.nc-table-toolbar']
-
-  for (const className of classList) {
-    nextTick(() => {
-      const element = iframeDocument?.querySelector(className)
-
-      if (element) {
-        element.remove()
-      }
-    })
-  }
   isLoaded.value = true
 }
 </script>
@@ -27,7 +11,7 @@ const handleIframeLoad = () => {
 <template>
   <div
     :style="{
-      height: 'calc(100dvh - var(--toolbar-height))',
+      height: 'calc(100dvh - var(--toolbar-height) + 4rem)',
     }"
     :class="{
       'hidden': !isLoaded,
@@ -40,7 +24,7 @@ const handleIframeLoad = () => {
 
     <iframe
       ref="iFrame"
-      src="http://localhost:3000/#/nc/kanban/dc9d297d-2d89-4a33-9804-87924148913a"
+      src="http://localhost:3000/#/nc/kanban/dc9d297d-2d89-4a33-9804-87924148913a?disableTopbar=true&disableToolbar=true"
       width="100%"
       height="100%"
       style="border: none"

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

@@ -33,16 +33,17 @@ const openUrl = (url: string) => {
 </script>
 
 <template>
-  <div style="width: 232px" class="flex flex-col border-gray-200 rounded-lg border-1">
+  <div style="width: 232px" class="flex flex-col bg-white border-gray-200 rounded-lg border-1">
     <div class="text-gray-800 font-semibold leading-6 border-b-1 border-gray-200 px-4 py-3">Stay tuned</div>
     <div class="flex flex-col gap-2">
       <div
         v-for="social in socialIcons"
         :key="social.name"
         class="flex items-center cursor-pointer rounded-lg hover:bg-gray-100 py-3 px-4 gap-2 text-gray-800"
+        @click="openUrl(social.link)"
       >
         <component :is="social.icon" class="w-5 h-5 stroke-transparent" />
-        <span class="font-semibold" @click="openUrl(social.link)">{{ social.name }}</span>
+        <span class="font-semibold">{{ social.name }}</span>
       </div>
     </div>
   </div>

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

@@ -43,7 +43,7 @@ const tabs = [
 <template>
   <FeedHeader />
 
-  <FeedSocial class="absolute right-4 top-28" />
+  <FeedSocial v-if="activeTab === 'recents'" class="absolute right-4 top-28" />
   <div class="flex flex-col h-full">
     <NcTabs v-model:activeKey="activeTab" centered>
       <a-tab-pane v-for="tab in tabs" :key="tab.key" class="bg-gray-50 !h-full">

packages/nc-gui/components/feed/Youtube/Player.vue

@@ -14,16 +14,23 @@ const {
 </script>
 
 <template>
-  <div class="flex flex-col mt-6 gap-5">
+  <div class="mt-6 border-b-1 border-gray-200">
-    <YoutubeVue3 :videoid="extractYoutubeVideoId(Url)" :height="470" :width="764" :autoplay="0" :controls="1" />
+    <YoutubeVue3
+      :videoid="extractYoutubeVideoId(Url)"
+      class="!rounded-xl"
+      :height="470"
+      :width="764"
+      :autoplay="0"
+      :controls="1"
+    />
 
-    <div class="text-gray-900 font-bold text-2xl">
+    <div class="flex flex-col py-5 gap-4">
-      {{ Title }}
+      <div class="text-gray-900 font-bold text-2xl">
-    </div>
+        {{ Title }}
-    <div class="text-gray-900">
+      </div>
-      {{ Description.length > 200 ? `${Description.slice(0, 280)}...` : Description }}
+      <div class="text-gray-900">
+        {{ Description.length > 200 ? `${Description.slice(0, 280)}...` : Description }}
+      </div>
     </div>
   </div>
 </template>
-
-<style lang="scss"></style>

packages/nc-gui/components/smartsheet/Toolbar.vue

@@ -12,6 +12,10 @@ const containerRef = ref<HTMLElement>()
 
 const { width } = useElementSize(containerRef)
 
+const router = useRouter()
+
+const disableToolbar = computed(() => router.currentRoute.value.query?.disableToolbar === 'true')
+
 const isTab = computed(() => {
   if (!isCalendar.value) return false
   return width.value > 1200
@@ -29,7 +33,7 @@ provide(IsToolbarIconMode, isToolbarIconMode)
 
 <template>
   <div
-    v-if="!isMobileMode"
+    v-if="!isMobileMode && !disableToolbar"
     ref="containerRef"
     :class="{
       'px-4': isMobileMode,

packages/nc-gui/layouts/shared-view.vue

@@ -7,6 +7,10 @@ const { sharedView, allowCSVDownload } = useSharedView()
 
 const router = useRouter()
 
+const route = router.currentRoute
+
+const disableTopbar = computed(() => route.value.query?.disableTopbar === 'true')
+
 onMounted(() => {
   // check if we are inside an iframe
   // if we are, communicate to the parent page whenever we navigate to a new url,
@@ -50,6 +54,7 @@ export default {
   <a-layout id="nc-app">
     <a-layout class="!flex-col bg-white">
       <a-layout-header
+        v-if="!disableTopbar"
         class="nc-table-topbar flex items-center justify-between !bg-transparent !px-3 !py-2 border-b-1 border-gray-200 !h-[46px]"
       >
         <div class="flex items-center gap-6 h-7 max-w-[calc(100%_-_280px)] xs:max-w-[calc(100%_-_90px)]">