From d34e09a74039688d1aa6c8af67e26864fc057175 Mon Sep 17 00:00:00 2001
From: ozer550 <prathameshd419@gmail.com>
Date: Tue, 22 Apr 2025 12:05:56 +0530
Subject: [PATCH 01/13] refactor guest user channelItem card icons

---
 .../channelList/views/Channel/ChannelItem.vue | 24 +++++++++++++++----
 1 file changed, 20 insertions(+), 4 deletions(-)

diff --git a/contentcuration/contentcuration/frontend/channelList/views/Channel/ChannelItem.vue b/contentcuration/contentcuration/frontend/channelList/views/Channel/ChannelItem.vue
index c4fb7abf95..2f8450e3cc 100644
--- a/contentcuration/contentcuration/frontend/channelList/views/Channel/ChannelItem.vue
+++ b/contentcuration/contentcuration/frontend/channelList/views/Channel/ChannelItem.vue
@@ -110,6 +110,7 @@
               :to="channelDetailsLink"
             >
               <KIconButton
+                v-if="loggedIn"
                 :color="$themeTokens.primary"
                 data-test="details-button"
                 class="mr-1"
@@ -126,6 +127,14 @@
               data-test="token-button"
               @click.stop.prevent="tokenDialog = true"
             />
+            <KIconButton
+              v-if="!loggedIn && channel.published"
+              class="mr-1"
+              icon="openNewTab"
+              :tooltip="$tr('viewOnKolibri')"
+              data-test="view-on-kolibri"
+              @click.stop.prevent="viewOnKolibri"
+            />
             <ChannelStar
               v-if="loggedIn"
               :channelId="channelId"
@@ -329,10 +338,11 @@
       },
       showOptions() {
         return (
-          this.allowEdit ||
-          this.channel.source_url ||
-          this.channel.demo_server_url ||
-          (this.channel.published && this.allowEdit)
+          this.loggedIn &&
+          (this.allowEdit ||
+            this.channel.source_url ||
+            this.channel.demo_server_url ||
+            (this.channel.published && this.allowEdit))
         );
       },
       linkToChannelTree() {
@@ -385,6 +395,11 @@
           eventLabel: this.channel.primary_token,
         });
       },
+      viewOnKolibri() {
+        if (this.channel.demo_server_url) {
+          window.open(this.channel.demo_server_url, '_blank');
+        }
+      },
     },
     $trs: {
       resourceCount: '{count, plural,\n =1 {# resource}\n other {# resources}}',
@@ -408,6 +423,7 @@
       channelRemovedSnackbar: 'Channel removed',
       channelLanguageNotSetIndicator: 'No language set',
       cancel: 'Cancel',
+      viewOnKolibri: 'View on Kolibri',
     },
   };
 

From cc419825edee65554916bbcb09fa37d5a72d73a7 Mon Sep 17 00:00:00 2001
From: ozer550 <prathameshd419@gmail.com>
Date: Tue, 29 Apr 2025 11:36:54 +0530
Subject: [PATCH 02/13] add SidePanel for basic channel Details display

---
 .../channelList/views/Channel/CatalogList.vue |  25 +++-
 .../views/Channel/ChannelDetailsSidePanel.vue | 135 ++++++++++++++++++
 .../channelList/views/Channel/ChannelItem.vue |  20 ++-
 .../shared/views/details/DetailsPanel.vue     |  50 ++++---
 4 files changed, 200 insertions(+), 30 deletions(-)
 create mode 100644 contentcuration/contentcuration/frontend/channelList/views/Channel/ChannelDetailsSidePanel.vue

diff --git a/contentcuration/contentcuration/frontend/channelList/views/Channel/CatalogList.vue b/contentcuration/contentcuration/frontend/channelList/views/Channel/CatalogList.vue
index 2014b8ad85..e3561f9526 100644
--- a/contentcuration/contentcuration/frontend/channelList/views/Channel/CatalogList.vue
+++ b/contentcuration/contentcuration/frontend/channelList/views/Channel/CatalogList.vue
@@ -64,6 +64,7 @@
               :channelId="item.id"
               :detailsRouteName="detailsRouteName"
               style="flex-grow: 1; width: 100%"
+              @show-channel-details="handleShowChannelDetails"
             />
           </VLayout>
         </VFlex>
@@ -142,6 +143,12 @@
         </VLayout>
       </BottomBar>
     </VContainer>
+    <ChannelDetailsSidePanel
+      v-if="showSidePanel"
+      v-model="showSidePanel"
+      :channelId="selectedChannelId"
+      @close="handleCloseSidePanel"
+    />
   </div>
 
 </template>
@@ -156,6 +163,7 @@
   import sortBy from 'lodash/sortBy';
   import union from 'lodash/union';
   import { RouteNames } from '../../constants';
+  import ChannelDetailsSidePanel from './ChannelDetailsSidePanel';
   import CatalogFilters from './CatalogFilters';
   import ChannelItem from './ChannelItem';
   import LoadingText from 'shared/views/LoadingText';
@@ -178,6 +186,7 @@
       Checkbox,
       ToolBar,
       OfflineText,
+      ChannelDetailsSidePanel,
     },
     mixins: [channelExportMixin, constantsTranslationMixin],
     data() {
@@ -185,12 +194,8 @@
         loading: true,
         loadError: false,
         selecting: false,
-
-        /**
-         * jayoshih: router guard makes it difficult to track
-         * differences between previous query params and new
-         * query params, so just track it manually
-         */
+        showSidePanel: false,
+        selectedChannelId: null,
         previousQuery: this.$route.query,
 
         /**
@@ -301,6 +306,14 @@
         this.setSelection(false);
         return this.downloadChannelsPDF(params);
       },
+      handleShowChannelDetails(channelId) {
+        this.showSidePanel = true;
+        this.selectedChannelId = channelId;
+      },
+      handleCloseSidePanel() {
+        this.showSidePanel = false;
+        this.selectedChannelId = null;
+      },
     },
     $trs: {
       resultsText: '{count, plural,\n =1 {# result found}\n other {# results found}}',
diff --git a/contentcuration/contentcuration/frontend/channelList/views/Channel/ChannelDetailsSidePanel.vue b/contentcuration/contentcuration/frontend/channelList/views/Channel/ChannelDetailsSidePanel.vue
new file mode 100644
index 0000000000..fa2b46e3d6
--- /dev/null
+++ b/contentcuration/contentcuration/frontend/channelList/views/Channel/ChannelDetailsSidePanel.vue
@@ -0,0 +1,135 @@
+<template>
+
+  <ResizableNavigationDrawer
+    right
+    :localName="'channel-details'"
+    :value="value"
+    :permanent="true"
+    :temporary="false"
+    clipped
+    app
+    v-bind="$attrs"
+    style="position: fixed; z-index: 10"
+    @input="$emit('input', $event)"
+    @resize="$emit('resize', $event)"
+  >
+    <div class="channel-details-content">
+      <VLayout
+        row
+        align-center
+        class="mb-4"
+      >
+        <VFlex>
+          <h2 class="font-weight-bold headline">
+            {{ channel ? channel.name : '' }}
+          </h2>
+        </VFlex>
+        <VSpacer />
+        <VFlex shrink>
+          <KIconButton
+            icon="close"
+            :tooltip="$tr('close')"
+            @click="$emit('input', false)"
+          />
+        </VFlex>
+      </VLayout>
+      <DetailsPanel
+        v-if="channel && details"
+        :details="channelWithDetails"
+        :loading="loading"
+      />
+    </div>
+  </ResizableNavigationDrawer>
+
+</template>
+
+
+<script>
+
+  import { mapActions, mapGetters } from 'vuex';
+  import DetailsPanel from 'shared/views/details/DetailsPanel';
+  import { routerMixin } from 'shared/mixins';
+  import ResizableNavigationDrawer from 'shared/views/ResizableNavigationDrawer';
+
+  export default {
+    name: 'ChannelDetailsSidePanel',
+    components: {
+      ResizableNavigationDrawer,
+      DetailsPanel,
+    },
+    mixins: [routerMixin],
+    props: {
+      channelId: {
+        type: String,
+        default: null,
+      },
+      value: {
+        type: Boolean,
+        default: false,
+      },
+    },
+    data() {
+      return {
+        details: null,
+        loading: true,
+      };
+    },
+    computed: {
+      ...mapGetters('channel', ['getChannel']),
+
+      channelWithDetails() {
+        if (!this.channel || !this.details) {
+          return {};
+        }
+        return { ...this.channel, ...this.details };
+      },
+      channel() {
+        return this.getChannel(this.channelId);
+      },
+    },
+    beforeMount() {
+      return this.load();
+    },
+    methods: {
+      ...mapActions('channel', ['loadChannel', 'loadChannelDetails']),
+      load() {
+        this.loading = true;
+        const channelPromise = this.loadChannel(this.channelId);
+        const detailsPromise = this.loadChannelDetails(this.channelId);
+
+        return Promise.all([channelPromise, detailsPromise])
+          .then(([channel, details]) => {
+            if (!channel) {
+              this.$router.replace(this.backLink).catch(() => {});
+              return;
+            }
+
+            this.details = details;
+            this.loading = false;
+          })
+          .catch(error => {
+            this.loading = false;
+            if (error.response) {
+              this.$store.dispatch('errors/handleAxiosError', error);
+            } else {
+              this.$store.dispatch('showSnackbarSimple', 'Error loading channel details');
+            }
+          });
+      },
+    },
+    $trs: {
+      close: 'Close',
+    },
+  };
+
+</script>
+
+
+<style>
+
+  .channel-details-content {
+    padding: 20px;
+    padding-top: 40px;
+  }
+
+</style>
diff --git a/contentcuration/contentcuration/frontend/channelList/views/Channel/ChannelItem.vue b/contentcuration/contentcuration/frontend/channelList/views/Channel/ChannelItem.vue
index 2f8450e3cc..a9359d08d8 100644
--- a/contentcuration/contentcuration/frontend/channelList/views/Channel/ChannelItem.vue
+++ b/contentcuration/contentcuration/frontend/channelList/views/Channel/ChannelItem.vue
@@ -8,8 +8,8 @@
       data-test="channel-card"
       tabindex="0"
       :href="linkToChannelTree ? channelHref : null"
-      :to="linkToChannelTree ? null : channelDetailsLink"
-      @click="goToChannelRoute"
+      :to="linkToChannelTree ? null : null"
+      @click="handleChannelClick"
     >
       <VLayout
         row
@@ -385,10 +385,18 @@
           });
         }
       },
-      goToChannelRoute() {
-        this.linkToChannelTree
-          ? (window.location.href = this.channelHref)
-          : this.$router.push(this.channelDetailsLink).catch(() => {});
+      handleChannelClick() {
+        if (this.linkToChannelTree) {
+          window.location.href = this.channelHref;
+          return;
+        }
+
+        if (!this.loggedIn) {
+          this.$emit('show-channel-details', this.channelId);
+          return;
+        }
+
+        this.$router.push(this.channelDetailsLink).catch(() => {});
       },
       trackTokenCopy() {
         this.$analytics.trackAction('channel_list', 'Copy token', {
diff --git a/contentcuration/contentcuration/frontend/shared/views/details/DetailsPanel.vue b/contentcuration/contentcuration/frontend/shared/views/details/DetailsPanel.vue
index 9db35d0376..53cb29ecbb 100644
--- a/contentcuration/contentcuration/frontend/shared/views/details/DetailsPanel.vue
+++ b/contentcuration/contentcuration/frontend/shared/views/details/DetailsPanel.vue
@@ -1,25 +1,31 @@
 <template>
 
   <div :class="{ printing }">
-    <div style="max-width: 300px">
-      <Thumbnail
-        :src="isChannel ? _details.thumbnail_url : _details.thumbnail_src"
-        :encoding="isChannel ? _details.thumbnail_encoding : null"
-      />
-    </div>
-    <br >
-    <h1
-      class="notranslate"
-      dir="auto"
+    <VLayout
+      row
+      class="details-layout"
     >
-      {{ isChannel ? _details.name : _details.title }}
-    </h1>
-    <p
-      class="notranslate"
-      dir="auto"
-    >
-      {{ _details.description }}
-    </p>
+      <VFlex
+        xs7
+        class="details-content"
+      >
+        <p
+          class="notranslate"
+          dir="auto"
+        >
+          {{ _details.description }}
+        </p>
+      </VFlex>
+      <VFlex
+        xs5
+        class="pa-3"
+      >
+        <Thumbnail
+          :src="isChannel ? _details.thumbnail_url : _details.thumbnail_src"
+          :encoding="isChannel ? _details.thumbnail_encoding : null"
+        />
+      </VFlex>
+    </VLayout>
     <br >
 
     <template v-if="isChannel">
@@ -606,6 +612,14 @@
     }
   }
 
+  .details-layout {
+    align-items: center;
+  }
+
+  .details-content {
+    padding-right: 16px;
+  }
+
   .v-toolbar__title {
     font-weight: bold;
   }

From 8a30e17b1b5dc0738179dbbc5555c836e72a5fd5 Mon Sep 17 00:00:00 2001
From: ozer550 <prathameshd419@gmail.com>
Date: Tue, 29 Apr 2025 16:11:17 +0530
Subject: [PATCH 03/13] add viewOnKolibri and generatedPdf buttons in Details
 Component

---
 .../views/Channel/ChannelDetailsSidePanel.vue | 21 ++++++-
 .../shared/views/details/DetailsPanel.vue     | 56 +++++++++++++++++--
 2 files changed, 72 insertions(+), 5 deletions(-)

diff --git a/contentcuration/contentcuration/frontend/channelList/views/Channel/ChannelDetailsSidePanel.vue b/contentcuration/contentcuration/frontend/channelList/views/Channel/ChannelDetailsSidePanel.vue
index fa2b46e3d6..54e08bb67a 100644
--- a/contentcuration/contentcuration/frontend/channelList/views/Channel/ChannelDetailsSidePanel.vue
+++ b/contentcuration/contentcuration/frontend/channelList/views/Channel/ChannelDetailsSidePanel.vue
@@ -37,6 +37,8 @@
         v-if="channel && details"
         :details="channelWithDetails"
         :loading="loading"
+        @generate-pdf="generatePDF"
+        @generate-csv="generateCSV"
       />
     </div>
   </ResizableNavigationDrawer>
@@ -50,6 +52,7 @@
   import DetailsPanel from 'shared/views/details/DetailsPanel';
   import { routerMixin } from 'shared/mixins';
   import ResizableNavigationDrawer from 'shared/views/ResizableNavigationDrawer';
+  import { channelExportMixin } from 'shared/views/channel/mixins';
 
   export default {
     name: 'ChannelDetailsSidePanel',
@@ -57,7 +60,7 @@
       ResizableNavigationDrawer,
       DetailsPanel,
     },
-    mixins: [routerMixin],
+    mixins: [routerMixin, channelExportMixin],
     props: {
       channelId: {
         type: String,
@@ -116,6 +119,22 @@
             }
           });
       },
+      async generatePDF() {
+        try {
+          this.$analytics.trackEvent('channel_details', 'Download PDF', {
+            id: this.channelId,
+          });
+          await this.generateChannelsPDF([this.channelWithDetails]);
+        } catch (error) {
+          this.$store.dispatch('showSnackbarSimple', 'Error generating PDF');
+        }
+      },
+      async generateCSV() {
+        this.$analytics.trackEvent('channel_details', 'Download CSV', {
+          id: this.channelId,
+        });
+        await this.generateChannelsCSV([this.channelWithDetails]);
+      },
     },
     $trs: {
       close: 'Close',
diff --git a/contentcuration/contentcuration/frontend/shared/views/details/DetailsPanel.vue b/contentcuration/contentcuration/frontend/shared/views/details/DetailsPanel.vue
index 53cb29ecbb..dbd1a06b1a 100644
--- a/contentcuration/contentcuration/frontend/shared/views/details/DetailsPanel.vue
+++ b/contentcuration/contentcuration/frontend/shared/views/details/DetailsPanel.vue
@@ -28,6 +28,47 @@
     </VLayout>
     <br >
 
+    <!-- Action Buttons -->
+    <VLayout
+      v-if="isChannel"
+      row
+      class="mb-4"
+    >
+      <VBtn
+        color="primary"
+        class="mr-2"
+        @click="viewInKolibri"
+      >
+        {{ $tr('viewInKolibri') }}
+      </VBtn>
+      <BaseMenu>
+        <template #activator="{ on }">
+          <VBtn
+            color="primary"
+            v-on="on"
+          >
+            {{ $tr('downloadButton') }}
+            <Icon
+              class="ml-1"
+              icon="dropdown"
+              :color="$themeTokens.textInverted"
+            />
+          </VBtn>
+        </template>
+        <VList>
+          <VListTile @click="$emit('generate-pdf')">
+            <VListTileTitle>{{ $tr('downloadPDF') }}</VListTileTitle>
+          </VListTile>
+          <VListTile
+            data-test="dl-csv"
+            @click="$emit('generate-csv')"
+          >
+            <VListTileTitle>{{ $tr('downloadCSV') }}</VListTileTitle>
+          </VListTile>
+        </VList>
+      </BaseMenu>
+    </VLayout>
+
     <template v-if="isChannel">
       <DetailsRow
         v-if="_details.published && _details.primary_token"
@@ -367,6 +408,7 @@
   import defaultsDeep from 'lodash/defaultsDeep';
   import camelCase from 'lodash/camelCase';
   import orderBy from 'lodash/orderBy';
+  import BaseMenu from '../BaseMenu.vue';
   import { SCALE_TEXT, SCALE, CHANNEL_SIZE_DIVISOR } from './constants';
   import DetailsRow from './DetailsRow';
   import { CategoriesLookup, LevelsLookup } from 'shared/constants';
@@ -425,6 +467,7 @@
       CopyToken,
       DetailsRow,
       Thumbnail,
+      BaseMenu,
     },
     mixins: [
       fileSizeMixin,
@@ -434,10 +477,6 @@
       metadataTranslationMixin,
     ],
     props: {
-      // Object matching that returned by the channel details and
-      // node details API endpoints, see backend for details of the
-      // object structure and keys. get_details method on ContentNode
-      // model as a starting point.`
       details: {
         type: Object,
         required: true,
@@ -558,6 +597,11 @@
       channelUrl(channel) {
         return window.Urls.channel(channel.id);
       },
+      viewInKolibri() {
+        if (this._details.demo_server_url) {
+          window.open(this._details.demo_server_url, '_blank');
+        }
+      },
     },
     $trs: {
       /* eslint-disable kolibri/vue-no-unused-translations */
@@ -596,6 +640,10 @@
       currentVersionHeading: 'Published version',
       primaryLanguageHeading: 'Primary language',
       unpublishedText: 'Unpublished',
+      viewInKolibri: 'View in Kolibri',
+      downloadButton: 'Download channel summary',
+      downloadPDF: 'Download PDF',
+      downloadCSV: 'Download CSV',
     },
   };
 

From aa70d4ee62596e365e18d1ab81ce86c59003ffdf Mon Sep 17 00:00:00 2001
From: ozer550 <prathameshd419@gmail.com>
Date: Fri, 2 May 2025 15:14:55 +0530
Subject: [PATCH 04/13] make icon selection dynamic

---
 .../channelList/views/Channel/ChannelItem.vue | 106 +++++++++++++-----
 .../channelList/views/Channel/ChannelList.vue |   1 +
 .../shared/views/details/DetailsPanel.vue     |   6 +
 3 files changed, 86 insertions(+), 27 deletions(-)

diff --git a/contentcuration/contentcuration/frontend/channelList/views/Channel/ChannelItem.vue b/contentcuration/contentcuration/frontend/channelList/views/Channel/ChannelItem.vue
index a9359d08d8..90a2aeacf5 100644
--- a/contentcuration/contentcuration/frontend/channelList/views/Channel/ChannelItem.vue
+++ b/contentcuration/contentcuration/frontend/channelList/views/Channel/ChannelItem.vue
@@ -110,30 +110,23 @@
               :to="channelDetailsLink"
             >
               <KIconButton
-                v-if="loggedIn"
+                v-if="detailsIcon"
                 :color="$themeTokens.primary"
-                data-test="details-button"
+                :data-test="detailsIcon.dataTest"
                 class="mr-1"
-                icon="info"
-                :tooltip="$tr('details')"
+                :icon="detailsIcon.icon"
+                :tooltip="detailsIcon.tooltip"
               />
             </KRouterLink>
 
             <KIconButton
-              v-if="!allowEdit && channel.published"
+              v-for="config in filteredIcons"
+              :key="config.key"
               class="mr-1"
-              icon="copy"
-              :tooltip="$tr('copyToken')"
-              data-test="token-button"
-              @click.stop.prevent="tokenDialog = true"
-            />
-            <KIconButton
-              v-if="!loggedIn && channel.published"
-              class="mr-1"
-              icon="openNewTab"
-              :tooltip="$tr('viewOnKolibri')"
-              data-test="view-on-kolibri"
-              @click.stop.prevent="viewOnKolibri"
+              :icon="config.icon"
+              :tooltip="config.tooltip"
+              :data-test="config.dataTest"
+              @click.stop.prevent="config.clickHandler"
             />
             <ChannelStar
               v-if="loggedIn"
@@ -141,7 +134,8 @@
               :bookmark="channel.bookmark"
               class="mr-1"
             />
-            <BaseMenu v-if="showOptions">
+
+            <BaseMenu v-if="iconConfigs.find(config => config.key === 'kebab-menu').show">
               <template #activator="{ on }">
                 <VBtn
                   icon
@@ -280,6 +274,10 @@
         type: Boolean,
         default: false,
       },
+      isInChannelList: {
+        type: Boolean,
+        default: false,
+      },
     },
     data() {
       return {
@@ -336,15 +334,6 @@
       libraryMode() {
         return window.libraryMode;
       },
-      showOptions() {
-        return (
-          this.loggedIn &&
-          (this.allowEdit ||
-            this.channel.source_url ||
-            this.channel.demo_server_url ||
-            (this.channel.published && this.allowEdit))
-        );
-      },
       linkToChannelTree() {
         return this.loggedIn && !this.libraryMode;
       },
@@ -358,6 +347,69 @@
       hasUnpublishedChanges() {
         return !this.channel.last_published || this.channel.modified > this.channel.last_published;
       },
+      filteredIcons() {
+        return this.iconConfigs
+          .filter(c => ['copy', 'open-tab-link'].includes(c.key))
+          .filter(c => c.show);
+      },
+      detailsIcon() {
+        return this.iconConfigs.find(c => c.key === 'details' && c.show);
+      },
+      iconConfigs() {
+        return [
+          {
+            key: 'copy',
+            show: !this.allowEdit && this.channel.published,
+            icon: 'copy',
+            tooltip: this.$tr('copyToken'),
+            dataTest: 'token-button',
+            clickHandler: () => {
+              this.tokenDialog = true;
+            },
+          },
+          // show open tab link when
+          // only one of source or demo server url is present
+          // we do not show this icon if we are in channel list
+          {
+            key: 'open-tab-link',
+            show:
+              !this.isInChannelList &&
+              ((this.loggedIn && !this.channel.demo_server_url && this.channel.source_url) ||
+                (this.loggedIn && !this.channel.source_url && this.channel.demo_server_url) ||
+                (!this.loggedIn &&
+                  this.channel.published &&
+                  // this check ensures that we show link to both in kebab menu
+                  !(this.channel.source_url && this.channel.demo_server_url))),
+            icon: 'openNewTab',
+            tooltip: this.channel.demo_server_url
+              ? this.$tr('viewOnKolibri')
+              : this.$tr('goToWebsite'),
+            dataTest: 'view-on-kolibri',
+            clickHandler: () => {
+              this.viewOnKolibri();
+            },
+          },
+          {
+            key: 'details',
+            show: !this.libraryMode && this.loggedIn,
+            icon: 'info',
+            tooltip: this.$tr('details'),
+            dataTest: 'details-button',
+            to: this.channelDetailsLink,
+          },
+          // show kebab menu when
+          // we are listing channels
+          // or when both source and demo server urls are present and user is logged in
+          {
+            key: 'kebab-menu',
+            show:
+              this.isInChannelList ||
+              (this.loggedIn && this.channel.source_url && this.channel.demo_server_url),
+            icon: 'optionsVertical',
+            dataTest: 'menu',
+          },
+        ];
+      },
     },
     mounted() {
       if (this.channel.added) {
diff --git a/contentcuration/contentcuration/frontend/channelList/views/Channel/ChannelList.vue b/contentcuration/contentcuration/frontend/channelList/views/Channel/ChannelList.vue
index eba4dd2032..6b4e7a53cc 100644
--- a/contentcuration/contentcuration/frontend/channelList/views/Channel/ChannelList.vue
+++ b/contentcuration/contentcuration/frontend/channelList/views/Channel/ChannelList.vue
@@ -55,6 +55,7 @@
                 v-for="channel in listChannels"
                 :key="channel.id"
                 :channelId="channel.id"
+                :isInChannelList="true"
                 allowEdit
                 fullWidth
               />
diff --git a/contentcuration/contentcuration/frontend/shared/views/details/DetailsPanel.vue b/contentcuration/contentcuration/frontend/shared/views/details/DetailsPanel.vue
index dbd1a06b1a..0c9b3994e0 100644
--- a/contentcuration/contentcuration/frontend/shared/views/details/DetailsPanel.vue
+++ b/contentcuration/contentcuration/frontend/shared/views/details/DetailsPanel.vue
@@ -33,12 +33,18 @@
       v-if="isChannel"
       row
       class="mb-4"
+      style="margin-left: -8px"
     >
       <VBtn
         color="primary"
         class="mr-2"
         @click="viewInKolibri"
       >
+        <Icon
+          class="mr-2"
+          icon="openNewTab"
+          :color="$themeTokens.textInverted"
+        />
         {{ $tr('viewInKolibri') }}
       </VBtn>
       <BaseMenu>

From bfb975d12147ea6dd332a08733923f7c4d1926dc Mon Sep 17 00:00:00 2001
From: ozer550 <prathameshd419@gmail.com>
Date: Mon, 5 May 2025 10:49:49 +0530
Subject: [PATCH 05/13] change behaviour of sidePanel buttons when the user is
 logged in

---
 .../channelList/views/Channel/ChannelItem.vue | 24 +-----------
 .../shared/views/details/DetailsPanel.vue     | 37 ++++++++++++++++++-
 2 files changed, 37 insertions(+), 24 deletions(-)

diff --git a/contentcuration/contentcuration/frontend/channelList/views/Channel/ChannelItem.vue b/contentcuration/contentcuration/frontend/channelList/views/Channel/ChannelItem.vue
index 90a2aeacf5..518653a238 100644
--- a/contentcuration/contentcuration/frontend/channelList/views/Channel/ChannelItem.vue
+++ b/contentcuration/contentcuration/frontend/channelList/views/Channel/ChannelItem.vue
@@ -7,8 +7,6 @@
       :class="{ added }"
       data-test="channel-card"
       tabindex="0"
-      :href="linkToChannelTree ? channelHref : null"
-      :to="linkToChannelTree ? null : null"
       @click="handleChannelClick"
     >
       <VLayout
@@ -334,16 +332,6 @@
       libraryMode() {
         return window.libraryMode;
       },
-      linkToChannelTree() {
-        return this.loggedIn && !this.libraryMode;
-      },
-      channelHref() {
-        if (this.linkToChannelTree) {
-          return window.Urls.channel(this.channelId);
-        } else {
-          return false;
-        }
-      },
       hasUnpublishedChanges() {
         return !this.channel.last_published || this.channel.modified > this.channel.last_published;
       },
@@ -438,17 +426,7 @@
         }
       },
       handleChannelClick() {
-        if (this.linkToChannelTree) {
-          window.location.href = this.channelHref;
-          return;
-        }
-
-        if (!this.loggedIn) {
-          this.$emit('show-channel-details', this.channelId);
-          return;
-        }
-
-        this.$router.push(this.channelDetailsLink).catch(() => {});
+        this.$emit('show-channel-details', this.channelId);
       },
       trackTokenCopy() {
         this.$analytics.trackAction('channel_list', 'Copy token', {
diff --git a/contentcuration/contentcuration/frontend/shared/views/details/DetailsPanel.vue b/contentcuration/contentcuration/frontend/shared/views/details/DetailsPanel.vue
index 0c9b3994e0..365a737eb3 100644
--- a/contentcuration/contentcuration/frontend/shared/views/details/DetailsPanel.vue
+++ b/contentcuration/contentcuration/frontend/shared/views/details/DetailsPanel.vue
@@ -36,6 +36,7 @@
       style="margin-left: -8px"
     >
       <VBtn
+        v-if="!loggedIn"
         color="primary"
         class="mr-2"
         @click="viewInKolibri"
@@ -47,13 +48,21 @@
         />
         {{ $tr('viewInKolibri') }}
       </VBtn>
+      <VBtn
+        v-else
+        color="primary"
+        class="mr-2"
+        :href="channelHref"
+      >
+        {{ $tr('goToChannel') }}
+      </VBtn>
       <BaseMenu>
         <template #activator="{ on }">
           <VBtn
             color="primary"
             v-on="on"
           >
-            {{ $tr('downloadButton') }}
+            {{ loggedIn ? $tr('options') : $tr('downloadButton') }}
             <Icon
               class="ml-1"
               icon="dropdown"
@@ -62,6 +71,21 @@
           </VBtn>
         </template>
         <VList>
+          <template v-if="loggedIn">
+            <VListTile
+              v-if="_details.source_url"
+              :href="_details.source_url"
+              target="_blank"
+            >
+              <VListTileTitle>{{ $tr('goToWebsite') }}</VListTileTitle>
+            </VListTile>
+            <VListTile
+              v-if="_details.demo_server_url"
+              @click="viewInKolibri"
+            >
+              <VListTileTitle>{{ $tr('viewInKolibri') }}</VListTileTitle>
+            </VListTile>
+          </template>
           <VListTile @click="$emit('generate-pdf')">
             <VListTileTitle>{{ $tr('downloadPDF') }}</VListTileTitle>
           </VListTile>
@@ -410,6 +434,7 @@
 
 <script>
 
+  import { mapGetters } from 'vuex';
   import cloneDeep from 'lodash/cloneDeep';
   import defaultsDeep from 'lodash/defaultsDeep';
   import camelCase from 'lodash/camelCase';
@@ -497,6 +522,13 @@
       },
     },
     computed: {
+      ...mapGetters(['loggedIn']),
+      channelHref() {
+        if (this.loggedIn && !window.libraryMode) {
+          return window.Urls.channel(this._details.id);
+        }
+        return null;
+      },
       _details() {
         const details = cloneDeep(this.details);
         defaultsDeep(details, DEFAULT_DETAILS);
@@ -647,6 +679,9 @@
       primaryLanguageHeading: 'Primary language',
       unpublishedText: 'Unpublished',
       viewInKolibri: 'View in Kolibri',
+      goToChannel: 'Go to Channel',
+      goToWebsite: 'Go to source website',
+      options: 'Options',
       downloadButton: 'Download channel summary',
       downloadPDF: 'Download PDF',
       downloadCSV: 'Download CSV',

From 8d6967f52422a72acea6db95385ab57b12d6172d Mon Sep 17 00:00:00 2001
From: ozer550 <prathameshd419@gmail.com>
Date: Mon, 5 May 2025 11:09:55 +0530
Subject: [PATCH 06/13] fix broken redirection of ChannelItem cards in
 ChannelList component

---
 .../channelList/views/Channel/ChannelItem.vue    | 16 +++++++++++++++-
 1 file changed, 15 insertions(+), 1 deletion(-)

diff --git a/contentcuration/contentcuration/frontend/channelList/views/Channel/ChannelItem.vue b/contentcuration/contentcuration/frontend/channelList/views/Channel/ChannelItem.vue
index 518653a238..240ff81626 100644
--- a/contentcuration/contentcuration/frontend/channelList/views/Channel/ChannelItem.vue
+++ b/contentcuration/contentcuration/frontend/channelList/views/Channel/ChannelItem.vue
@@ -7,6 +7,8 @@
       :class="{ added }"
       data-test="channel-card"
       tabindex="0"
+      :href="isInChannelList && linkToChannelTree ? channelHref : null"
+      :to="isInChannelList ? (linkToChannelTree ? null : channelDetailsLink) : null"
       @click="handleChannelClick"
     >
       <VLayout
@@ -398,6 +400,16 @@
           },
         ];
       },
+      linkToChannelTree() {
+        return this.loggedIn && !this.libraryMode;
+      },
+      channelHref() {
+        if (this.linkToChannelTree) {
+          return window.Urls.channel(this.channelId);
+        } else {
+          return false;
+        }
+      },
     },
     mounted() {
       if (this.channel.added) {
@@ -426,7 +438,9 @@
         }
       },
       handleChannelClick() {
-        this.$emit('show-channel-details', this.channelId);
+        if (!this.isInChannelList) {
+          this.$emit('show-channel-details', this.channelId);
+        }
       },
       trackTokenCopy() {
         this.$analytics.trackAction('channel_list', 'Copy token', {

From c2aff381a67712a671b5c06a6a6e625e9c197dfe Mon Sep 17 00:00:00 2001
From: ozer550 <prathameshd419@gmail.com>
Date: Tue, 6 May 2025 11:20:13 +0530
Subject: [PATCH 07/13] add backdrop opacity for sidePanel

---
 .../channelList/views/Channel/CatalogList.vue | 47 +++++++++++++++++++
 .../views/Channel/ChannelDetailsSidePanel.vue |  4 +-
 2 files changed, 48 insertions(+), 3 deletions(-)

diff --git a/contentcuration/contentcuration/frontend/channelList/views/Channel/CatalogList.vue b/contentcuration/contentcuration/frontend/channelList/views/Channel/CatalogList.vue
index e3561f9526..915a0b4c51 100644
--- a/contentcuration/contentcuration/frontend/channelList/views/Channel/CatalogList.vue
+++ b/contentcuration/contentcuration/frontend/channelList/views/Channel/CatalogList.vue
@@ -143,6 +143,16 @@
         </VLayout>
       </BottomBar>
     </VContainer>
+    <transition
+      name="backdrop"
+      appear
+    >
+      <div
+        v-if="showSidePanel"
+        class="backdrop"
+        @click="handleCloseSidePanel"
+      ></div>
+    </transition>
     <ChannelDetailsSidePanel
       v-if="showSidePanel"
       v-model="showSidePanel"
@@ -339,4 +349,41 @@
     margin: 0 auto;
   }
 
+  .backdrop {
+    position: fixed;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0;
+    z-index: 9;
+    width: 100%;
+    height: 100%;
+    background: rgba(0, 0, 0, 0.7);
+    background-attachment: fixed;
+  }
+
+  .backdrop-enter {
+    opacity: 0;
+  }
+
+  .backdrop-enter-to {
+    opacity: 1;
+  }
+
+  .backdrop-enter-active {
+    transition: opacity 0.2s ease-in-out;
+  }
+
+  .backdrop-leave {
+    opacity: 1;
+  }
+
+  .backdrop-leave-to {
+    opacity: 0;
+  }
+
+  .backdrop-leave-active {
+    transition: opacity 0.2s ease-in-out;
+  }
+
 </style>
diff --git a/contentcuration/contentcuration/frontend/channelList/views/Channel/ChannelDetailsSidePanel.vue b/contentcuration/contentcuration/frontend/channelList/views/Channel/ChannelDetailsSidePanel.vue
index 54e08bb67a..f9ce1c9917 100644
--- a/contentcuration/contentcuration/frontend/channelList/views/Channel/ChannelDetailsSidePanel.vue
+++ b/contentcuration/contentcuration/frontend/channelList/views/Channel/ChannelDetailsSidePanel.vue
@@ -6,10 +6,8 @@
     :value="value"
     :permanent="true"
     :temporary="false"
-    clipped
-    app
     v-bind="$attrs"
-    style="position: fixed; z-index: 10"
+    style=" position: fixed; top: 0; right: 0;z-index: 10; height: 100vh"
     @input="$emit('input', $event)"
     @resize="$emit('resize', $event)"
   >

From 9b37daf81c6383940d622658dfea0d1b4f8fc604 Mon Sep 17 00:00:00 2001
From: ozer550 <prathameshd419@gmail.com>
Date: Mon, 12 May 2025 10:50:17 +0530
Subject: [PATCH 08/13] remove link to open catalog server in a new page when
 the url is not available as guest user

---
 .../frontend/channelList/views/Channel/ChannelItem.vue          | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/contentcuration/contentcuration/frontend/channelList/views/Channel/ChannelItem.vue b/contentcuration/contentcuration/frontend/channelList/views/Channel/ChannelItem.vue
index 240ff81626..23898d8676 100644
--- a/contentcuration/contentcuration/frontend/channelList/views/Channel/ChannelItem.vue
+++ b/contentcuration/contentcuration/frontend/channelList/views/Channel/ChannelItem.vue
@@ -363,7 +363,7 @@
           {
             key: 'open-tab-link',
             show:
-              !this.isInChannelList &&
+              !this.isInChannelList && (this.channel.demo_server_url || this.channel.source_url) &&
               ((this.loggedIn && !this.channel.demo_server_url && this.channel.source_url) ||
                 (this.loggedIn && !this.channel.source_url && this.channel.demo_server_url) ||
                 (!this.loggedIn &&

From 4ef719ac7b073f0c7b60f09d77542b3b41731933 Mon Sep 17 00:00:00 2001
From: ozer550 <prathameshd419@gmail.com>
Date: Mon, 12 May 2025 10:51:06 +0530
Subject: [PATCH 09/13] linting

---
 .../frontend/channelList/views/Channel/ChannelItem.vue         | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/contentcuration/contentcuration/frontend/channelList/views/Channel/ChannelItem.vue b/contentcuration/contentcuration/frontend/channelList/views/Channel/ChannelItem.vue
index 23898d8676..ed7e625e98 100644
--- a/contentcuration/contentcuration/frontend/channelList/views/Channel/ChannelItem.vue
+++ b/contentcuration/contentcuration/frontend/channelList/views/Channel/ChannelItem.vue
@@ -363,7 +363,8 @@
           {
             key: 'open-tab-link',
             show:
-              !this.isInChannelList && (this.channel.demo_server_url || this.channel.source_url) &&
+              !this.isInChannelList &&
+              (this.channel.demo_server_url || this.channel.source_url) &&
               ((this.loggedIn && !this.channel.demo_server_url && this.channel.source_url) ||
                 (this.loggedIn && !this.channel.source_url && this.channel.demo_server_url) ||
                 (!this.loggedIn &&

From 57e7f4cd9947def0d021ca54df716f70bf765390 Mon Sep 17 00:00:00 2001
From: "pre-commit-ci-lite[bot]"
 <117423508+pre-commit-ci-lite[bot]@users.noreply.github.com>
Date: Mon, 12 May 2025 05:24:02 +0000
Subject: [PATCH 10/13] [pre-commit.ci lite] apply automatic fixes

---
 .../channelList/views/Channel/ChannelDetailsSidePanel.vue       | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/contentcuration/contentcuration/frontend/channelList/views/Channel/ChannelDetailsSidePanel.vue b/contentcuration/contentcuration/frontend/channelList/views/Channel/ChannelDetailsSidePanel.vue
index f9ce1c9917..c54292c438 100644
--- a/contentcuration/contentcuration/frontend/channelList/views/Channel/ChannelDetailsSidePanel.vue
+++ b/contentcuration/contentcuration/frontend/channelList/views/Channel/ChannelDetailsSidePanel.vue
@@ -7,7 +7,7 @@
     :permanent="true"
     :temporary="false"
     v-bind="$attrs"
-    style=" position: fixed; top: 0; right: 0;z-index: 10; height: 100vh"
+    style="position: fixed; top: 0; right: 0; z-index: 10; height: 100vh"
     @input="$emit('input', $event)"
     @resize="$emit('resize', $event)"
   >

From 1f42ec90b906e5e35b1541e12f2e29f43dddccd1 Mon Sep 17 00:00:00 2001
From: ozer550 <prathameshd419@gmail.com>
Date: Mon, 12 May 2025 10:56:05 +0530
Subject: [PATCH 11/13] add optional chaining to kebab menu

---
 .../frontend/channelList/views/Channel/ChannelItem.vue          | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/contentcuration/contentcuration/frontend/channelList/views/Channel/ChannelItem.vue b/contentcuration/contentcuration/frontend/channelList/views/Channel/ChannelItem.vue
index ed7e625e98..9749869da2 100644
--- a/contentcuration/contentcuration/frontend/channelList/views/Channel/ChannelItem.vue
+++ b/contentcuration/contentcuration/frontend/channelList/views/Channel/ChannelItem.vue
@@ -135,7 +135,7 @@
               class="mr-1"
             />
 
-            <BaseMenu v-if="iconConfigs.find(config => config.key === 'kebab-menu').show">
+            <BaseMenu v-if="iconConfigs.find(config => config.key === 'kebab-menu')?.show">
               <template #activator="{ on }">
                 <VBtn
                   icon

From 7174328d7027c11d760e68754339387c66cb9ccb Mon Sep 17 00:00:00 2001
From: ozer550 <prathameshd419@gmail.com>
Date: Mon, 12 May 2025 11:23:48 +0530
Subject: [PATCH 12/13] show external link button in Details component only
 when it is available

---
 .../frontend/shared/views/details/DetailsPanel.vue            | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/contentcuration/contentcuration/frontend/shared/views/details/DetailsPanel.vue b/contentcuration/contentcuration/frontend/shared/views/details/DetailsPanel.vue
index 365a737eb3..adbd257548 100644
--- a/contentcuration/contentcuration/frontend/shared/views/details/DetailsPanel.vue
+++ b/contentcuration/contentcuration/frontend/shared/views/details/DetailsPanel.vue
@@ -36,7 +36,7 @@
       style="margin-left: -8px"
     >
       <VBtn
-        v-if="!loggedIn"
+        v-if="!loggedIn && _details.demo_server_url"
         color="primary"
         class="mr-2"
         @click="viewInKolibri"
@@ -49,7 +49,7 @@
         {{ $tr('viewInKolibri') }}
       </VBtn>
       <VBtn
-        v-else
+        v-else-if="_details.source_url"
         color="primary"
         class="mr-2"
         :href="channelHref"

From c12fea6c04148f1b8281a78e937cb7de808229b9 Mon Sep 17 00:00:00 2001
From: ozer550 <prathameshd419@gmail.com>
Date: Fri, 23 May 2025 12:23:02 +0530
Subject: [PATCH 13/13] remove inline kebabMenu calculations

---
 .../frontend/channelList/views/Channel/ChannelItem.vue      | 6 +++++-
 .../channelList/views/Channel/__tests__/channelItem.spec.js | 1 +
 2 files changed, 6 insertions(+), 1 deletion(-)

diff --git a/contentcuration/contentcuration/frontend/channelList/views/Channel/ChannelItem.vue b/contentcuration/contentcuration/frontend/channelList/views/Channel/ChannelItem.vue
index 9749869da2..c83842bf44 100644
--- a/contentcuration/contentcuration/frontend/channelList/views/Channel/ChannelItem.vue
+++ b/contentcuration/contentcuration/frontend/channelList/views/Channel/ChannelItem.vue
@@ -135,7 +135,7 @@
               class="mr-1"
             />
 
-            <BaseMenu v-if="iconConfigs.find(config => config.key === 'kebab-menu')?.show">
+            <BaseMenu v-if="showKebabMenu">
               <template #activator="{ on }">
                 <VBtn
                   icon
@@ -411,6 +411,10 @@
           return false;
         }
       },
+      showKebabMenu() {
+        const kebabConfig = this.iconConfigs.find(config => config.key === 'kebab-menu');
+        return Boolean(kebabConfig && kebabConfig.show);
+      },
     },
     mounted() {
       if (this.channel.added) {
diff --git a/contentcuration/contentcuration/frontend/channelList/views/Channel/__tests__/channelItem.spec.js b/contentcuration/contentcuration/frontend/channelList/views/Channel/__tests__/channelItem.spec.js
index bee20bfd13..8c4a9fb5c7 100644
--- a/contentcuration/contentcuration/frontend/channelList/views/Channel/__tests__/channelItem.spec.js
+++ b/contentcuration/contentcuration/frontend/channelList/views/Channel/__tests__/channelItem.spec.js
@@ -24,6 +24,7 @@ function makeWrapper(allowEdit, deleteStub, libraryMode) {
     propsData: {
       channelId: channelId,
       allowEdit: allowEdit,
+      isInChannelList: true,
     },
     computed: {
       libraryMode() {