From cd3a96f4bbdf429da38305fa3e7e54cb44bb829b Mon Sep 17 00:00:00 2001
From: Alex Velez <velezllaquealex@gmail.com>
Date: Mon, 28 Jul 2025 10:56:18 -0500
Subject: [PATCH 01/17] Copy side panel modal to Studio

---
 .../frontend/shared/strings/commonStrings.js  |  13 +
 .../shared/views/SidePanelModal/Backdrop.vue  |  75 +++++
 .../shared/views/SidePanelModal/index.vue     | 274 ++++++++++++++++++
 3 files changed, 362 insertions(+)
 create mode 100644 contentcuration/contentcuration/frontend/shared/strings/commonStrings.js
 create mode 100644 contentcuration/contentcuration/frontend/shared/views/SidePanelModal/Backdrop.vue
 create mode 100644 contentcuration/contentcuration/frontend/shared/views/SidePanelModal/index.vue

diff --git a/contentcuration/contentcuration/frontend/shared/strings/commonStrings.js b/contentcuration/contentcuration/frontend/shared/strings/commonStrings.js
new file mode 100644
index 0000000000..7b3137c2e2
--- /dev/null
+++ b/contentcuration/contentcuration/frontend/shared/strings/commonStrings.js
@@ -0,0 +1,13 @@
+import { createTranslator } from 'shared/i18n';
+
+export const commonStrings = createTranslator('CommonStrings', {
+  backAction: {
+    message: 'Back',
+    context:
+      'Indicates going back to a previous step in multi-step workflows. It can be used as a label of the back button that is displayed next to the continue button.',
+  },
+  closeAction: {
+    message: 'Close',
+    context: 'A label for an action that closes a dialog or window',
+  },
+});
diff --git a/contentcuration/contentcuration/frontend/shared/views/SidePanelModal/Backdrop.vue b/contentcuration/contentcuration/frontend/shared/views/SidePanelModal/Backdrop.vue
new file mode 100644
index 0000000000..af8d2b99e1
--- /dev/null
+++ b/contentcuration/contentcuration/frontend/shared/views/SidePanelModal/Backdrop.vue
@@ -0,0 +1,75 @@
+<template>
+
+  <transition
+    name="backdrop"
+    appear
+  >
+    <div
+      class="backdrop"
+      :class="{ 'has-transitions': transitions }"
+      @click="$emit('click')"
+    >
+      <slot></slot>
+    </div>
+  </transition>
+
+</template>
+
+
+<script>
+
+  export default {
+    name: 'Backdrop',
+    props: {
+      transitions: {
+        // If true, backdrop will have enter/leave transitions
+        type: Boolean,
+        default: false,
+      },
+    },
+  };
+
+</script>
+
+
+<style lang="scss" scoped>
+
+  .backdrop {
+    position: fixed;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0;
+    // Overlays everything except the sidepanel and KModals
+    z-index: 11;
+    width: 100%;
+    height: 100%;
+    background: rgba(0, 0, 0, 0.7);
+    background-attachment: fixed;
+  }
+
+  .has-transitions.backdrop-enter {
+    opacity: 0;
+  }
+
+  .has-transitions.backdrop-enter-to {
+    opacity: 1;
+  }
+
+  .has-transitions.backdrop-enter-active {
+    transition: opacity 0.2s ease-in-out;
+  }
+
+  .has-transitions.backdrop-leave {
+    opacity: 1;
+  }
+
+  .has-transitions.backdrop-leave-to {
+    opacity: 0;
+  }
+
+  .has-transitions.backdrop-leave-active {
+    transition: opacity 0.2s ease-in-out;
+  }
+
+</style>
diff --git a/contentcuration/contentcuration/frontend/shared/views/SidePanelModal/index.vue b/contentcuration/contentcuration/frontend/shared/views/SidePanelModal/index.vue
new file mode 100644
index 0000000000..30b695e5d0
--- /dev/null
+++ b/contentcuration/contentcuration/frontend/shared/views/SidePanelModal/index.vue
@@ -0,0 +1,274 @@
+<template>
+
+  <div
+    ref="sidePanel"
+    :tabindex="0"
+    :class="{ 'is-rtl': isRtl, 'is-mobile': isMobile }"
+    @keyup.esc="closePanel"
+  >
+    <transition name="side-panel">
+      <KFocusTrap
+        @shouldFocusFirstEl="focusFirstEl"
+        @shouldFocusLastEl="focusLastEl"
+      >
+        <section
+          class="side-panel"
+          role="region"
+          :style="sidePanelStyles"
+          :aria-label="ariaLabel"
+        >
+          <!-- Fixed header -->
+          <div
+            ref="fixedHeader"
+            :class="{ 'side-panel-header': true, immersive: immersive }"
+            :style="headerStyles"
+          >
+            <div
+              class="header-content"
+              :style="{
+                flexDirection: closeButtonIconType === 'close' ? 'row' : 'row-reverse',
+              }"
+            >
+              <div style="overflow: hidden">
+                <slot name="header"> </slot>
+              </div>
+              <KIconButton
+                v-if="closeButtonIconType"
+                :icon="closeButtonIconType"
+                class="close-button"
+                :ariaLabel="closeButtonMessage"
+                :tooltip="closeButtonMessage"
+                @click="closePanel"
+              />
+            </div>
+          </div>
+
+          <!-- Default slot for inserting content which will scroll on overflow -->
+          <div
+            class="side-panel-content"
+            @scroll="isScrolled = $event.target.scrollTop > 0"
+          >
+            <slot :isScrolled="isScrolled"></slot>
+          </div>
+          <div
+            v-if="$slots.bottomNavigation"
+            ref="fixedBottombar"
+            class="bottom-navigation"
+            :style="{ backgroundColor: $themeTokens.surface }"
+          >
+            <slot name="bottomNavigation"></slot>
+          </div>
+        </section>
+      </KFocusTrap>
+    </transition>
+
+    <Backdrop
+      :transitions="true"
+      class="backdrop"
+      @click="closePanel"
+    />
+  </div>
+
+</template>
+
+
+<script>
+
+  import { ref } from 'vue';
+  import useKResponsiveWindow from 'kolibri-design-system/lib/composables/useKResponsiveWindow';
+  import Backdrop from './Backdrop.vue';
+  import { commonStrings } from 'shared/strings/commonStrings';
+
+  export default {
+    name: 'SidePanelModal',
+    components: {
+      Backdrop,
+    },
+    setup() {
+      const { windowBreakpoint } = useKResponsiveWindow();
+      return {
+        /* Will be calculated in mounted() as it will get the height of the fixedHeader then */
+        // @type {RefImpl<number>}
+        windowBreakpoint,
+        lastFocus: null,
+        isScrolled: ref(false),
+      };
+    },
+    props: {
+      /* CloseButtonIconType icon from parent component */
+      closeButtonIconType: {
+        type: String,
+        required: false,
+        default: 'close',
+        validator: value => {
+          return ['close', 'back'].includes(value);
+        },
+      },
+      /* Optionally override the default width of the side panel with valid CSS value */
+      sidePanelWidth: {
+        type: String,
+        required: false,
+        default: '436px',
+      },
+      /* Which side of the screen should the panel be fixed? Reverses the value when isRtl */
+      alignment: {
+        type: String,
+        required: true,
+        validator(value) {
+          return ['right', 'left'].includes(value);
+        },
+      },
+      ariaLabel: {
+        type: String,
+        required: false,
+        default: null,
+      },
+      immersive: {
+        type: Boolean,
+        required: false,
+        default: false,
+      },
+    },
+    computed: {
+      isMobile() {
+        // This should be suitable for any mobile/tablet
+        return this.windowBreakpoint <= 2;
+      },
+      /* Returns an object with properties left or right set to the appropriate value
+         depending on isRtl and this.alignment */
+      rtlAlignment() {
+        if (this.isRtl && this.alignment === 'left') {
+          return 'right';
+        } else if (this.isRtl && this.alignment === 'right') {
+          return 'left';
+        } else {
+          return this.alignment;
+        }
+      },
+      /* Returns an object with this.rtlAlignment set to 0 */
+      langDirStyles() {
+        return {
+          [this.rtlAlignment]: 0,
+        };
+      },
+      responsiveWidth() {
+        return this.isMobile ? '100vw' : this.sidePanelWidth;
+      },
+      /** Styling Properties */
+      headerStyles() {
+        return {
+          backgroundColor: this.immersive ? this.$themeTokens.appBar : this.$themeTokens.surface,
+          borderBottom: `1px solid ${this.$themePalette.grey.v_400}`,
+        };
+      },
+      sidePanelStyles() {
+        return {
+          ...this.langDirStyles,
+          width: this.responsiveWidth,
+          top: 0,
+          position: 'fixed',
+          color: this.$themeTokens.text,
+          backgroundColor: this.$themeTokens.surface,
+          'z-index': 12,
+        };
+      },
+      closeButtonMessage() {
+        const { backAction, closeAction } = commonStrings;
+        return this.closeButtonIconType === 'back' ? backAction : closeAction;
+      },
+    },
+    beforeMount() {
+      this.lastFocus = document.activeElement;
+    },
+    /* this is the easiest way I could think to avoid having dual scroll bars and to avoid
+     strange screen-squeezing behavior noted here:
+     https://user-images.githubusercontent.com/79847249/164241012-b161bad7-8a46-4221-a391-a375899ed9a9.mp4 */
+    mounted() {
+      const htmlTag = window.document.getElementsByTagName('html')[0];
+      htmlTag.style['overflow-y'] = 'hidden';
+      this.$nextTick(() => {
+        this.focusFirstEl();
+        this.$emit('shouldFocusFirstEl');
+      });
+    },
+    beforeDestroy() {
+      const htmlTag = window.document.getElementsByTagName('html')[0];
+      htmlTag.style['overflow-y'] = 'auto';
+    },
+    destroyed() {
+      window.setTimeout(() => this.lastFocus.focus());
+    },
+    methods: {
+      closePanel() {
+        this.$emit('closePanel');
+      },
+      focusLastEl() {
+        this.$el.querySelector('.close-button').focus();
+      },
+      /**
+       * @public
+       * Reset the next focus to the first focus element
+       */
+      focusFirstEl() {
+        this.$el.querySelector('.close-button').focus();
+      },
+    },
+  };
+
+</script>
+
+
+<style lang="scss" scoped>
+
+  @import '~kolibri-design-system/lib/styles/definitions';
+
+  .header-content {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    width: 100%;
+    height: 100%;
+  }
+
+  /** Need to be sure a KDropdownMenu shows up on the Side Panel */
+  /deep/ .tippy-popper {
+    z-index: 24;
+  }
+
+  .side-panel {
+    display: flex;
+    flex-direction: column;
+    height: 100%;
+
+    .side-panel-header {
+      z-index: 1;
+      width: 100%;
+      min-height: 60px;
+      padding: 0 1em;
+
+      &.immersive {
+        @extend %dropshadow-2dp;
+      }
+    }
+
+    .side-panel-content {
+      flex-grow: 1;
+      padding: 24px 32px 16px;
+      overflow-x: hidden;
+      overflow-y: auto;
+    }
+
+    .bottom-navigation {
+      @extend %dropshadow-2dp;
+
+      z-index: 1;
+      display: flex;
+      justify-content: space-between;
+      width: 100%;
+      padding: 1em;
+      line-height: 2.5em;
+      text-align: center;
+    }
+  }
+
+</style>

From 0fd741d1475ef3a593c4cdfeab3c79dee663b344 Mon Sep 17 00:00:00 2001
From: Alex Velez <velezllaquealex@gmail.com>
Date: Mon, 28 Jul 2025 10:56:55 -0500
Subject: [PATCH 02/17] Add community channels strings file

---
 .../frontend/shared/strings/communityChannelsStrings.js        | 3 +++
 1 file changed, 3 insertions(+)
 create mode 100644 contentcuration/contentcuration/frontend/shared/strings/communityChannelsStrings.js

diff --git a/contentcuration/contentcuration/frontend/shared/strings/communityChannelsStrings.js b/contentcuration/contentcuration/frontend/shared/strings/communityChannelsStrings.js
new file mode 100644
index 0000000000..489af9eb43
--- /dev/null
+++ b/contentcuration/contentcuration/frontend/shared/strings/communityChannelsStrings.js
@@ -0,0 +1,3 @@
+import { createTranslator } from 'shared/i18n';
+
+export const communityChannelsStrings = createTranslator('CommunityChannelsStrings', {});

From 83527704778727054ff8b0e7bf9b16e474d939ed Mon Sep 17 00:00:00 2001
From: taoerman <qiliu0523@gmail.com>
Date: Mon, 11 Aug 2025 21:17:16 -0700
Subject: [PATCH 03/17] Update channel publishing UX to support publishing
 channel draft versions

fix some typo

fix a bug

modal

fix some bugs

fix frame bug
---
 .../sidePanels/PublishSidePanel.vue           | 267 ++++++++++++++++++
 .../views/TreeView/TreeViewBase.vue           |  27 +-
 .../views/progress/ProgressModal.vue          |  43 ++-
 .../frontend/shared/data/resources.js         |  57 +++-
 .../strings/communityChannelsStrings.js       |  17 +-
 5 files changed, 390 insertions(+), 21 deletions(-)
 create mode 100644 contentcuration/contentcuration/frontend/channelEdit/components/sidePanels/PublishSidePanel.vue

diff --git a/contentcuration/contentcuration/frontend/channelEdit/components/sidePanels/PublishSidePanel.vue b/contentcuration/contentcuration/frontend/channelEdit/components/sidePanels/PublishSidePanel.vue
new file mode 100644
index 0000000000..f31aac212c
--- /dev/null
+++ b/contentcuration/contentcuration/frontend/channelEdit/components/sidePanels/PublishSidePanel.vue
@@ -0,0 +1,267 @@
+<template>
+  <div>
+    <SidePanelModal
+      alignment="right"
+      :ariaLabel="$tr('publishPanelAria')"
+      @keyup.esc="onClose"
+      @closePanel="onClose"
+    >
+      <template #header>
+        <h2 style="margin: 0">{{ getPanelTitle() }}</h2>
+      </template>
+
+      <template #default>
+        <div class="form-section">
+          <VRadioGroup v-model="mode">
+            <VRadio
+              :label="$tr('modeLive')"
+              value="live"
+            />
+            <div class="radio-description">{{ getLiveModeDescription() }}</div>
+            
+            <!-- Live mode content nested under the radio button -->
+            <div v-if="mode === 'live'" class="live-mode-content" style="margin-left: 24px; margin-top: 16px;">
+              <div class="info-section">
+                <VIconWrapper class="info-icon">info</VIconWrapper>
+                <span>{{ $tr('publishingInfo', { version: currentChannel.version, time: formattedPublishTime }) }}</span>
+              </div>
+              
+                                            <div class="form-section" style="width: 100%; max-width: 100%;">
+                  <div class="textarea-container">
+                    <label class="label">{{ $tr('versionNotesLabel') }}</label>
+                    <textarea
+                      v-model="version_notes"
+                      :rows="4"
+                      :maxlength="30"
+                      class="custom-textarea"
+                      :placeholder="$tr('versionNotesLabel')"
+                    ></textarea>
+                    <div class="char-counter">{{ version_notes.length }} / 30</div>
+                  </div>
+                </div>
+              
+              <div v-if="incompleteResourcesCount > 0" class="form-section warning-section">
+                <div class="warning-content">
+                  <VIconWrapper class="warning-icon">warning</VIconWrapper>
+                  <div class="warning-text">
+                    <div class="warning-title">{{ $tr('incompleteResourcesWarning', { count: incompleteResourcesCount }) }}</div>
+                    <div class="warning-description">{{ $tr('incompleteResourcesDescription') }}</div>
+                  </div>
+                </div>
+              </div>
+            </div>
+            
+            <VRadio
+              :label="$tr('modeDraft')"
+              value="draft"
+            />
+            <div class="radio-description">{{ $tr('modeDraftDescription') }}</div>
+          </VRadioGroup>
+        </div>
+      </template>
+
+      <template #bottomNavigation>
+        <div class="footer">
+          <VBtn flat @click="onClose">{{ $tr('cancel') }}</VBtn>
+          <VBtn
+            color="primary"
+            :disabled="submitting"
+            @click="submit"
+          >
+            {{ getButtonText() }}
+          </VBtn>
+        </div>
+      </template>
+    </SidePanelModal>
+  </div>
+</template>
+
+<script>
+import SidePanelModal from 'shared/views/SidePanelModal';
+import VIconWrapper from 'shared/views/VIconWrapper';
+import { Channel } from 'shared/data/resources';
+import { forceServerSync } from 'shared/data/serverSync';
+import { communityChannelsStrings } from 'shared/strings/communityChannelsStrings';
+
+import { mapGetters } from 'vuex';
+
+export default {
+  name: 'PublishSidePanel',
+  components: { 
+    SidePanelModal,
+    VIconWrapper,
+  },
+  props: {
+    open: { type: Boolean, required: true },
+    channelId: { type: String, required: true },
+  },
+  emits: ['close', 'submitted'],
+  data() {
+    return {
+      mode: 'live',
+      version_notes: '',
+      submitting: false,
+    };
+  },
+  computed: {
+    ...mapGetters('currentChannel', ['currentChannel']),
+    ...mapGetters('contentNode', ['getContentNode']),
+    formattedPublishTime() {
+      if (!this.currentChannel) return '';
+      const now = new Date();
+      const timeString = now.toLocaleTimeString('en-US', { 
+        hour: 'numeric', 
+        minute: '2-digit',
+        hour12: true 
+      });
+      const dateString = now.toLocaleDateString('en-US', { 
+        month: 'numeric', 
+        day: 'numeric', 
+        year: 'numeric' 
+      });
+      return `${timeString} - ${dateString}`;
+    },
+    incompleteResourcesCount() {
+      if (!this.currentChannel) return 0;
+      const rootNode = this.getContentNode(this.currentChannel.root_id);
+      return rootNode ? rootNode.error_count || 0 : 0;
+    },
+  },
+  methods: {
+    onClose() {
+      if (!this.submitting) this.$emit('close');
+    },
+    async submit() {
+      try {
+        this.submitting = true;
+        if (this.mode === 'draft') {
+          await Channel.publishDraft(this.currentChannel.id, { use_staging_tree: false });
+          await forceServerSync();
+          this.$emit('submitted');
+          this.$emit('close');
+        } else {
+          await Channel.publish(this.channelId, {
+            version_notes: this.version_notes,
+          });
+          this.$emit('submitted');
+          this.$emit('close');
+        }
+      } catch (error) {
+        this.$store.dispatch('shared/handleAxiosError', error);
+      } finally {
+        this.submitting = false;
+      }
+    },
+    getPanelTitle() {
+      return this.mode === 'draft' ? this.$tr('publishToLibrary') : this.$tr('publishChannel');
+    },
+    getLiveModeDescription() {
+      return this.$tr('modeLiveDescription');
+    },
+    getButtonText() {
+      return this.mode === 'draft' ? this.$tr('saveDraft') : this.$tr('publishLive');
+    },
+  },
+  $trs: {
+    publishToLibrary: 'Publish to library',
+    publishChannel: 'Publish channel',
+    publishPanelAria: 'Publish channel side panel',
+    publishLive: 'PUBLISH',
+    saveDraft: 'SAVE DRAFT',
+    modeLive: 'Live',
+    modeDraft: 'Draft (staging)',
+    versionNotesLabel: 'Describe what\'s new in this channel version',
+    cancel: 'CANCEL',
+    modeLiveDescription: 'This edition will be accessible to the public through the Kolibri public library.',
+    modeDraftDescription: 'Your channel will be saved as a draft, allowing you to review or conduct quality checks without altering the published version on Kolibri public library.',
+    publishingInfo: 'You\'re publishing: Version {version} ({time})',
+    incompleteResourcesWarning: '{count} incomplete resources.',
+    incompleteResourcesDescription: 'Incomplete resources will not be published and made available for download in Kolibri. Click \'Publish\' to confirm that you would like to publish anyway.',
+    maxLengthError: 'Maximum 30 characters allowed',
+  },
+};
+</script>
+
+<style scoped>
+.form-section { 
+  margin: 16px 0; 
+}
+.label { 
+  display: block; 
+  font-weight: 600; 
+  margin-bottom: 6px; 
+}
+.footer { 
+  display: flex; 
+  justify-content: flex-end; 
+  gap: 8px; 
+  padding: 12px 0; 
+}
+.radio-description {
+  margin-left: 24px;
+  margin-bottom: 16px;
+  color: rgba(0, 0, 0, 0.6);
+  font-size: 14px;
+}
+.info-section {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 12px;
+  background-color: #f5f5f5;
+  border-radius: 4px;
+}
+.info-icon {
+  color: #1976d2;
+}
+.warning-section {
+  margin-top: 16px;
+}
+.warning-content {
+  display: flex;
+  align-items: flex-start;
+  gap: 12px;
+  padding: 16px;
+  background-color: #fff3cd;
+  border: 1px solid #ffeaa7;
+  border-radius: 8px;
+}
+.warning-icon {
+  color: #f39c12;
+  flex-shrink: 0;
+  margin-top: 2px;
+}
+.warning-text {
+  flex: 1;
+}
+.warning-title {
+  font-weight: bold;
+  color: #e74c3c;
+  margin-bottom: 8px;
+}
+.warning-description {
+  color: #6c757d;
+  line-height: 1.4;
+}
+.textarea-container {
+  width: 100%;
+}
+.custom-textarea {
+  width: 100%;
+  min-height: 100px;
+  padding: 12px;
+  border: 1px solid #e0e0e0;
+  border-radius: 4px;
+  font-family: inherit;
+  font-size: 14px;
+  line-height: 1.5;
+  resize: vertical;
+  box-sizing: border-box;
+}
+.char-counter {
+  text-align: center;
+  color: #666;
+  font-size: 12px;
+  margin-top: 4px;
+}
+</style> 
\ No newline at end of file
diff --git a/contentcuration/contentcuration/frontend/channelEdit/views/TreeView/TreeViewBase.vue b/contentcuration/contentcuration/frontend/channelEdit/views/TreeView/TreeViewBase.vue
index 6fd78d52eb..c6ada7182a 100644
--- a/contentcuration/contentcuration/frontend/channelEdit/views/TreeView/TreeViewBase.vue
+++ b/contentcuration/contentcuration/frontend/channelEdit/views/TreeView/TreeViewBase.vue
@@ -53,7 +53,7 @@
         </KRouterLink>
       </VToolbarItems>
       <VSpacer />
-      <SavingIndicator v-if="!offline" />
+      <SavingIndicator v-if="!offline && !isDraftPublishing" />
       <OfflineText indicator />
       <ProgressModal />
       <div
@@ -207,9 +207,12 @@
     />
     <slot></slot>
 
-    <PublishModal
-      v-if="showPublishModal"
-      v-model="showPublishModal"
+    <PublishSidePanel
+      v-if="showPublishSidePanel && currentChannel && currentChannel.id"
+      :open="showPublishSidePanel"
+      :channelId="currentChannel.id"
+      @close="showPublishSidePanel = false"
+      @submitted="showPublishSidePanel = false"
     />
     <template v-if="isPublished">
       <ChannelTokenModal
@@ -313,7 +316,7 @@
   import Clipboard from '../../components/Clipboard';
   import SyncResourcesModal from '../sync/SyncResourcesModal';
   import ProgressModal from '../progress/ProgressModal';
-  import PublishModal from '../../components/publish/PublishModal';
+
   import QuickEditModal from '../../components/QuickEditModal';
   import SavingIndicator from '../../components/edit/SavingIndicator';
   import { DraggableRegions, DraggableUniverses, RouteNames } from '../../constants';
@@ -328,6 +331,7 @@
   import DraggableRegion from 'shared/views/draggable/DraggableRegion';
   import { DropEffect } from 'shared/mixins/draggable/constants';
   import DraggablePlaceholder from 'shared/views/draggable/DraggablePlaceholder';
+  import PublishSidePanel from '../../components/sidePanels/PublishSidePanel';
 
   export default {
     name: 'TreeViewBase',
@@ -335,7 +339,7 @@
       DraggableRegion,
       MainNavigationDrawer,
       ToolBar,
-      PublishModal,
+      PublishSidePanel,
       ProgressModal,
       ChannelTokenModal,
       SyncResourcesModal,
@@ -357,7 +361,7 @@
     data() {
       return {
         drawer: false,
-        showPublishModal: false,
+        showPublishSidePanel: false,
         showTokenModal: false,
         showSyncModal: false,
         showClipboard: false,
@@ -389,9 +393,12 @@
       isRicecooker() {
         return Boolean(this.currentChannel.ricecooker_version);
       },
+      isDraftPublishing() {
+        return this.currentChannel && this.currentChannel.publishing && this.currentChannel.publishing_draft;
+      },
       disablePublish() {
         return (
-          this.currentChannel.publishing ||
+          (this.currentChannel.publishing && !this.currentChannel.publishing_draft) || 
           !this.isChanged ||
           !this.currentChannel.language ||
           (this.rootNode && !this.rootNode.resource_count)
@@ -502,7 +509,9 @@
         this.trackClickEvent('Delete channel');
       },
       publishChannel() {
-        this.showPublishModal = true;
+        console.log('publishChannel called, currentChannel:', this.currentChannel);
+        console.log('Setting showPublishSidePanel to true');
+        this.showPublishSidePanel = true;
         this.trackClickEvent('Publish');
       },
       trackClickEvent(eventLabel) {
diff --git a/contentcuration/contentcuration/frontend/channelEdit/views/progress/ProgressModal.vue b/contentcuration/contentcuration/frontend/channelEdit/views/progress/ProgressModal.vue
index 73815f39fe..228e73935c 100644
--- a/contentcuration/contentcuration/frontend/channelEdit/views/progress/ProgressModal.vue
+++ b/contentcuration/contentcuration/frontend/channelEdit/views/progress/ProgressModal.vue
@@ -29,12 +29,32 @@
     >
       <span>{{ $tr('publishHeader') }}</span>&nbsp;<span>{{ progressPercent }}</span>
     </div>
+    <div
+      v-else-if="isPublishingDraft"
+      class="grey--text"
+      data-test="progress"
+    >
+      <VProgressCircular
+        indeterminate
+        size="16"
+        width="2"
+        color="loading"
+        class="mr-2"
+      />
+      <span>{{ $tr('draftHeader') }}</span>
+    </div>
+    <div
+      v-else-if="showDraftSaved"
+      class="grey--text"
+    >
+      {{ $tr('draftSaved') }}
+    </div>
     <div
       v-else
       class="grey--text"
     >
       {{
-        lastPublished
+        lastPublished && !isPublishingDraft
           ? $tr('lastPublished', { last_published: $formatRelative(lastPublished, now) })
           : $tr('unpublishedText')
       }}
@@ -65,7 +85,24 @@
         // add condition so that publishing modal is only visible for users
         // who have channel publishing permissions
         if (this.canManage) {
-          return this.currentChannel && this.currentChannel.publishing;
+          return this.currentChannel && this.currentChannel.publishing && !this.currentChannel.publishing_draft;
+        }
+        return false;
+      },
+      isPublishingDraft() {
+        if (this.canManage) {
+          return this.currentChannel && this.currentChannel.publishing && this.currentChannel.publishing_draft;
+        }
+        return false;
+      },
+      showDraftSaved() {
+        if (this.canManage) {
+          return this.currentChannel && 
+                 !this.currentChannel.publishing && 
+                 !this.currentChannel.publishing_draft && 
+                 this.currentChannel.last_published &&
+                 !this.currentChannel.published &&
+                 !this.currentTask; 
         }
         return false;
       },
@@ -137,6 +174,8 @@
     $trs: {
       defaultErrorText: 'Last attempt to publish failed',
       publishHeader: 'Publishing channel',
+      draftHeader: 'Saving draft...',
+      draftSaved: 'Saved just now',
       lastPublished: 'Published {last_published}',
       unpublishedText: 'Unpublished',
       syncHeader: 'Syncing resources',
diff --git a/contentcuration/contentcuration/frontend/shared/data/resources.js b/contentcuration/contentcuration/frontend/shared/data/resources.js
index cb7a3dc73b..0b29a78fb2 100644
--- a/contentcuration/contentcuration/frontend/shared/data/resources.js
+++ b/contentcuration/contentcuration/frontend/shared/data/resources.js
@@ -1238,18 +1238,57 @@ export const Channel = new CreateModelResource({
     const {
       use_staging_tree = false,
     } = opts;
-
-    const change = new PublishedNextChange({
-      key: id,
-      use_staging_tree,
-      table: this.tableName,
-      source: CLIENTID,
-    });
-    return this.transaction({ mode: 'rw' }, CHANGES_TABLE, () => {
-      return this._saveAndQueueChange(change);
+  
+    return this.transaction({ mode: 'rw' }, () => {
+      return this.table.update(id, { 
+        publishing: true,
+        publishing_draft: true  
+      });
+    }).then(() => {
+      const change = new PublishedNextChange({
+        key: id,
+        use_staging_tree,
+        table: this.tableName,
+        source: CLIENTID,
+      });
+      return this.transaction({ mode: 'rw' }, CHANGES_TABLE, () => {
+        return this._saveAndQueueChange(change);
+      });
+    }).then(() => {
+      this._monitorDraftCompletion(id);
+      return Promise.resolve();
     });
   },
 
+  _monitorDraftCompletion(channelId) {
+    const checkInterval = setInterval(async () => {
+      try {
+        const changes = await this.table.db.table(CHANGES_TABLE)
+          .where('table')
+          .equals(TABLE_NAMES.CHANNEL)
+          .and(change => change.key === channelId && change.type === CHANGE_TYPES.PUBLISHED_NEXT)
+          .toArray();
+        
+        if (changes.length === 0) {
+          clearInterval(checkInterval);
+          await this.transaction({ mode: 'rw' }, () => {
+            return this.table.update(channelId, { 
+              publishing: false,
+              publishing_draft: false
+            });
+          });
+        }
+      } catch (error) {
+        console.error('Error monitoring draft completion:', error);
+        clearInterval(checkInterval);
+      }
+    }, 2000); 
+    
+    setTimeout(() => {
+      clearInterval(checkInterval);
+    }, 300000); 
+  },
+
   deploy(id) {
     const change = new DeployedChange({
       key: id,
diff --git a/contentcuration/contentcuration/frontend/shared/strings/communityChannelsStrings.js b/contentcuration/contentcuration/frontend/shared/strings/communityChannelsStrings.js
index 489af9eb43..5a63754ef8 100644
--- a/contentcuration/contentcuration/frontend/shared/strings/communityChannelsStrings.js
+++ b/contentcuration/contentcuration/frontend/shared/strings/communityChannelsStrings.js
@@ -1,3 +1,18 @@
 import { createTranslator } from 'shared/i18n';
 
-export const communityChannelsStrings = createTranslator('CommunityChannelsStrings', {});
+export const communityChannelsStrings = createTranslator('CommunityChannelsStrings', {
+  // Core publishing actions
+  publish: 'Publish',
+  saveDraft: 'Save draft',
+  
+  // Publishing modes
+  mode: 'Mode',
+  live: 'Live',
+  draft: 'Draft',
+  
+  // Form labels
+  versionNotes: 'Version notes',
+  
+  // Actions
+  cancel: 'Cancel',
+});

From b3944002ba5c033be2402619e57d31dcb4170b62 Mon Sep 17 00:00:00 2001
From: taoerman <qiliu0523@gmail.com>
Date: Fri, 1 Aug 2025 16:45:19 -0700
Subject: [PATCH 04/17] Update channel logic to support publishing channel
 draft

update

tests for publish draft using main tree

Enhanced publish functionality to support three publish types

fixed

fix frontend tests
---
 .../pages/StagingTreePage/index.vue           |   4 +-
 .../vuex/currentChannel/actions.js            |   4 +
 .../shared/data/__tests__/changes.spec.js     |   5 +-
 .../frontend/shared/data/changes.js           |   5 +-
 .../frontend/shared/data/resources.js         |   5 +-
 .../frontend/shared/data/serverSync.js        |   2 +-
 .../tests/test_exportchannel.py               | 113 +++++++++++++++++-
 .../contentcuration/tests/viewsets/base.py    |   4 +-
 .../tests/viewsets/test_channel.py            |   4 +-
 .../contentcuration/utils/publish.py          |  40 ++++---
 .../contentcuration/viewsets/channel.py       |  24 ++--
 .../contentcuration/viewsets/sync/utils.py    |   3 +-
 12 files changed, 169 insertions(+), 44 deletions(-)

diff --git a/contentcuration/contentcuration/frontend/channelEdit/pages/StagingTreePage/index.vue b/contentcuration/contentcuration/frontend/channelEdit/pages/StagingTreePage/index.vue
index 6c7240e25f..612a870f7a 100644
--- a/contentcuration/contentcuration/frontend/channelEdit/pages/StagingTreePage/index.vue
+++ b/contentcuration/contentcuration/frontend/channelEdit/pages/StagingTreePage/index.vue
@@ -552,7 +552,7 @@
       ...mapActions('currentChannel', [
         'loadCurrentChannelStagingDiff',
         'deployCurrentChannel',
-        'publishDraftChannel',
+        'publishStagingChannel',
         'reloadCurrentChannelStagingDiff',
       ]),
       ...mapActions('currentChannel', { loadCurrentChannel: 'loadChannel' }),
@@ -646,7 +646,7 @@
         this.displayPublishDraftDialog = false;
         this.isPublishingDraft = true;
 
-        this.publishDraftChannel()
+        this.publishStagingChannel()
           .then(() => {
             this.isPublishingDraft = false;
             this.showSnackbar({
diff --git a/contentcuration/contentcuration/frontend/channelEdit/vuex/currentChannel/actions.js b/contentcuration/contentcuration/frontend/channelEdit/vuex/currentChannel/actions.js
index df5f528cd4..7659c0630d 100644
--- a/contentcuration/contentcuration/frontend/channelEdit/vuex/currentChannel/actions.js
+++ b/contentcuration/contentcuration/frontend/channelEdit/vuex/currentChannel/actions.js
@@ -59,6 +59,10 @@ export function publishDraftChannel(context) {
   return Channel.publishDraft(context.state.currentChannelId);
 }
 
+export function publishStagingChannel(context) {
+  return Channel.publishDraft(context.state.currentChannelId, true);
+}
+
 export function channelLanguageExistsInResources(context) {
   const channelId = context.state.currentChannelId;
   return Channel.languageExistsInResources(channelId);
diff --git a/contentcuration/contentcuration/frontend/shared/data/__tests__/changes.spec.js b/contentcuration/contentcuration/frontend/shared/data/__tests__/changes.spec.js
index 51b69efe8b..9ea28f3e54 100644
--- a/contentcuration/contentcuration/frontend/shared/data/__tests__/changes.spec.js
+++ b/contentcuration/contentcuration/frontend/shared/data/__tests__/changes.spec.js
@@ -257,6 +257,9 @@ describe('Change Types', () => {
     const change = new PublishedNextChange({
       key: '1',
       table: TABLE_NAMES.CHANNEL,
+      use_staging_tree: false,
+      version_notes: 'Test version notes',
+      language: 'en',
       source: CLIENTID,
     });
     const rev = await change.saveChange();
@@ -264,7 +267,7 @@ describe('Change Types', () => {
     expect(persistedChange).toEqual({
       rev,
       channel_id: change.key,
-      ...pick(change, ['type', 'key', 'table', 'source']),
+      ...pick(change, ['type', 'key', 'table', 'use_staging_tree', 'version_notes', 'language', 'source']),
     });
   });
 
diff --git a/contentcuration/contentcuration/frontend/shared/data/changes.js b/contentcuration/contentcuration/frontend/shared/data/changes.js
index 8c7f02d49a..a59e06ffeb 100644
--- a/contentcuration/contentcuration/frontend/shared/data/changes.js
+++ b/contentcuration/contentcuration/frontend/shared/data/changes.js
@@ -439,7 +439,7 @@ export class PublishedChange extends Change {
 }
 
 export class PublishedNextChange extends Change {
-  constructor(fields) {
+  constructor({ use_staging_tree, version_notes, language, ...fields }) {
     fields.type = CHANGE_TYPES.PUBLISHED_NEXT;
     super(fields);
     if (this.table !== TABLE_NAMES.CHANNEL) {
@@ -447,6 +447,9 @@ export class PublishedNextChange extends Change {
         `${this.changeType} is only supported by ${TABLE_NAMES.CHANNEL} table but ${this.table} was passed instead`,
       );
     }
+    this.setAndValidateBoolean(use_staging_tree, 'use_staging_tree');
+    this.setAndValidateIsDefined(version_notes, 'version_notes');
+    this.setAndValidateIsDefined(language, 'language');
     this.setChannelAndUserId({ id: this.key });
   }
 }
diff --git a/contentcuration/contentcuration/frontend/shared/data/resources.js b/contentcuration/contentcuration/frontend/shared/data/resources.js
index 17e3431cb7..b55245ffbd 100644
--- a/contentcuration/contentcuration/frontend/shared/data/resources.js
+++ b/contentcuration/contentcuration/frontend/shared/data/resources.js
@@ -1234,9 +1234,12 @@ export const Channel = new CreateModelResource({
     });
   },
 
-  publishDraft(id) {
+  publishDraft(id, use_staging_tree=false, version_notes="") {
     const change = new PublishedNextChange({
       key: id,
+      use_staging_tree: use_staging_tree,
+      version_notes: version_notes,
+      language: currentLanguage,
       table: this.tableName,
       source: CLIENTID,
     });
diff --git a/contentcuration/contentcuration/frontend/shared/data/serverSync.js b/contentcuration/contentcuration/frontend/shared/data/serverSync.js
index 72c8c60e4c..0015766058 100644
--- a/contentcuration/contentcuration/frontend/shared/data/serverSync.js
+++ b/contentcuration/contentcuration/frontend/shared/data/serverSync.js
@@ -36,7 +36,7 @@ const ChangeTypeMapFields = {
     'excluded_descendants',
   ]),
   [CHANGE_TYPES.PUBLISHED]: commonFields.concat(['version_notes', 'language']),
-  [CHANGE_TYPES.PUBLISHED_NEXT]: commonFields,
+  [CHANGE_TYPES.PUBLISHED_NEXT]: commonFields.concat(['use_staging_tree', 'version_notes', 'language']),
   [CHANGE_TYPES.SYNCED]: commonFields.concat([
     'titles_and_descriptions',
     'resource_details',
diff --git a/contentcuration/contentcuration/tests/test_exportchannel.py b/contentcuration/contentcuration/tests/test_exportchannel.py
index 95d75e7886..c7c3097a4c 100644
--- a/contentcuration/contentcuration/tests/test_exportchannel.py
+++ b/contentcuration/contentcuration/tests/test_exportchannel.py
@@ -885,6 +885,7 @@ def run_publish_channel(self):
             send_email=False,
             progress_tracker=None,
             language="fr",
+            is_draft_version=True,
             use_staging_tree=True,
         )
 
@@ -894,11 +895,9 @@ def test_none_staging_tree(self):
         with self.assertRaises(NoneContentNodeTreeError):
             self.run_publish_channel()
 
-    def test_staging_tree_published(self):
-        self.assertFalse(self.content_channel.staging_tree.published)
+    def test_staging_tree_not_published_for_draft(self):
         self.run_publish_channel()
-        self.content_channel.refresh_from_db()
-        self.assertTrue(self.content_channel.staging_tree.published)
+        self.assertFalse(self.content_channel.staging_tree.published)
 
     def test_next_version_exported(self):
         self.run_publish_channel()
@@ -928,6 +927,7 @@ def test_staging_tree_used_for_publish(self):
             self.admin_user.id,
             True,
             progress_tracker=None,
+            is_draft_version=True,
             use_staging_tree=True,
         )
         set_active_content_database(self.tempdb)
@@ -944,3 +944,108 @@ def test_staging_tree_used_for_publish(self):
         set_active_content_database(None)
         if os.path.exists(self.tempdb):
             os.remove(self.tempdb)
+
+class PublishDraftUsingMainTreeTestCase(StudioTestCase):
+    @classmethod
+    def setUpClass(cls):
+        super(PublishDraftUsingMainTreeTestCase, cls).setUpClass()
+        cls.patch_copy_db = patch("contentcuration.utils.publish.save_export_database")
+        cls.mock_save_export = cls.patch_copy_db.start()
+
+    @classmethod
+    def tearDownClass(cls):
+        super(PublishDraftUsingMainTreeTestCase, cls).tearDownClass()
+        cls.patch_copy_db.stop()
+
+    def setUp(self):
+        super(PublishDraftUsingMainTreeTestCase, self).setUp()
+
+        self.channel_version = 3
+        self.incomplete_video_in_main = "Incomplete video in main tree"
+        self.complete_video_in_main = "Complete video in main tree"
+
+        self.content_channel = channel()
+        self.content_channel.version = self.channel_version
+        self.content_channel.save()
+
+        # Incomplete node in main_tree should be excluded.
+        new_node = create_node(
+            {"kind_id": "video", "title": self.incomplete_video_in_main, "children": []}
+        )
+        new_node.complete = False
+        new_node.parent = self.content_channel.main_tree
+        new_node.published = False
+        new_node.save()
+
+        # Complete node in main_tree should be included.
+        new_node = create_node(
+            {"kind_id": "video", "title": self.complete_video_in_main, "children": []}
+        )
+        new_node.complete = True
+        new_node.parent = self.content_channel.main_tree
+        new_node.published = False
+        new_node.save()
+
+    def run_publish_channel(self):
+        publish_channel(
+            self.admin_user.id,
+            self.content_channel.id,
+            version_notes="",
+            force=False,
+            force_exercises=False,
+            send_email=False,
+            progress_tracker=None,
+            language="fr",
+            is_draft_version=True,
+            use_staging_tree=False,
+        )
+
+    def test_next_version_exported(self):
+        self.run_publish_channel()
+        self.mock_save_export.assert_called_with(
+            self.content_channel.id,
+            "next",
+            True,
+        )
+
+    def test_main_tree_not_impacted(self):
+        self.assertFalse(self.content_channel.main_tree.published)
+        self.run_publish_channel()
+        self.content_channel.refresh_from_db()
+        self.assertFalse(self.content_channel.main_tree.published)
+
+    def test_channel_version_not_incremented(self):
+        self.assertEqual(self.content_channel.version, self.channel_version)
+        self.run_publish_channel()
+        self.content_channel.refresh_from_db()
+        self.assertEqual(self.content_channel.version, self.channel_version)
+
+    def test_main_tree_used_for_publish(self):
+        set_channel_icon_encoding(self.content_channel)
+        self.tempdb = create_content_database(
+            self.content_channel,
+            True,
+            self.admin_user.id,
+            True,
+            progress_tracker=None,
+            is_draft_version=True,
+            use_staging_tree=False,
+        )
+        set_active_content_database(self.tempdb)
+
+        nodes = kolibri_models.ContentNode.objects.all()
+        self.assertEqual(nodes.filter(title=self.incomplete_video_in_main).count(), 0)
+        self.assertEqual(nodes.filter(title=self.complete_video_in_main).count(), 1)
+
+        cleanup_content_database_connection(self.tempdb)
+        set_active_content_database(None)
+        if os.path.exists(self.tempdb):
+            os.remove(self.tempdb)
+
+    def test_only_next_file_created(self):
+        self.mock_save_export.reset_mock()
+        self.run_publish_channel()
+        self.assertEqual(self.mock_save_export.call_count, 1)
+        call_args = self.mock_save_export.call_args
+        self.assertEqual(call_args[0][1], "next")  
+        self.assertEqual(call_args[0][2], True)    
diff --git a/contentcuration/contentcuration/tests/viewsets/base.py b/contentcuration/contentcuration/tests/viewsets/base.py
index 617d23bb26..23cea48f53 100644
--- a/contentcuration/contentcuration/tests/viewsets/base.py
+++ b/contentcuration/contentcuration/tests/viewsets/base.py
@@ -94,8 +94,8 @@ def generate_publish_channel_event(channel_id):
     return event
 
 
-def generate_publish_next_event(channel_id):
-    event = base_generate_publish_next_event(channel_id)
+def generate_publish_next_event(channel_id, use_staging_tree=False):
+    event = base_generate_publish_next_event(channel_id, use_staging_tree=use_staging_tree)
     event["rev"] = random.randint(1, 10000000)
     return event
 
diff --git a/contentcuration/contentcuration/tests/viewsets/test_channel.py b/contentcuration/contentcuration/tests/viewsets/test_channel.py
index d0e1dd4fca..cf2081446a 100644
--- a/contentcuration/contentcuration/tests/viewsets/test_channel.py
+++ b/contentcuration/contentcuration/tests/viewsets/test_channel.py
@@ -500,7 +500,7 @@ def test_publish_next(self):
 
         self.assertEqual(response.status_code, 200)
         modified_channel = models.Channel.objects.get(id=channel.id)
-        self.assertEqual(modified_channel.staging_tree.published, True)
+        self.assertEqual(modified_channel.staging_tree.published, False)
 
     def test_publish_next_with_incomplete_staging_tree(self):
         channel = testdata.channel()
@@ -515,7 +515,7 @@ def test_publish_next_with_incomplete_staging_tree(self):
         channel.save()
         self.assertEqual(channel.staging_tree.published, False)
 
-        response = self.sync_changes([generate_publish_next_event(channel.id)])
+        response = self.sync_changes([generate_publish_next_event(channel.id, use_staging_tree=True)])
 
         self.assertEqual(response.status_code, 200)
         self.assertTrue(
diff --git a/contentcuration/contentcuration/utils/publish.py b/contentcuration/contentcuration/utils/publish.py
index 841f440134..fbd4b0651a 100644
--- a/contentcuration/contentcuration/utils/publish.py
+++ b/contentcuration/contentcuration/utils/publish.py
@@ -146,18 +146,22 @@ def create_content_database(
     user_id,
     force_exercises,
     progress_tracker=None,
+    is_draft_version=False,
     use_staging_tree=False,
 ):
     """
     :type progress_tracker: contentcuration.utils.celery.ProgressTracker|None
     """
+    if not is_draft_version and use_staging_tree:
+        raise ValueError("Staging tree is only supported for draft versions")
+
     # increment the channel version
-    if not use_staging_tree and not force:
+    if not is_draft_version and not force:
         raise_if_nodes_are_all_unchanged(channel)
     fh, tempdb = tempfile.mkstemp(suffix=".sqlite3")
 
     with using_content_database(tempdb):
-        if not use_staging_tree and not channel.main_tree.publishing:
+        if not is_draft_version and not channel.main_tree.publishing:
             channel.mark_publishing(user_id)
 
         call_command(
@@ -183,11 +187,11 @@ def create_content_database(
             progress_tracker.track(90)
         map_prerequisites(base_tree)
         # Need to save as version being published, not current version
-        version = "next" if use_staging_tree else channel.version + 1
+        version = "next" if is_draft_version else channel.version + 1
         save_export_database(
             channel.pk,
             version,
-            use_staging_tree,
+            is_draft_version,
         )
         if channel.public:
             mapper = ChannelMapper(kolibri_channel)
@@ -1127,14 +1131,14 @@ def mark_all_nodes_as_published(tree):
     logging.info("Marked all nodes as published.")
 
 
-def save_export_database(channel_id, version, use_staging_tree=False):
+def save_export_database(channel_id, version, is_draft_version=False):
     logging.debug("Saving export database")
     current_export_db_location = get_active_content_database()
     target_paths = [
         os.path.join(settings.DB_ROOT, "{}-{}.sqlite3".format(channel_id, version))
     ]
     # Only create non-version path if not using the staging tree
-    if not use_staging_tree:
+    if not is_draft_version:
         target_paths.append(
             os.path.join(settings.DB_ROOT, "{id}.sqlite3".format(id=channel_id))
         )
@@ -1297,6 +1301,7 @@ def publish_channel(  # noqa: C901
     send_email=False,
     progress_tracker=None,
     language=settings.LANGUAGE_CODE,
+    is_draft_version=False,
     use_staging_tree=False,
 ):
     """
@@ -1317,23 +1322,23 @@ def publish_channel(  # noqa: C901
             user_id,
             force_exercises,
             progress_tracker=progress_tracker,
-            use_staging_tree=use_staging_tree,
+            is_draft_version=is_draft_version,
+            use_staging_tree=use_staging_tree,   
         )
         add_tokens_to_channel(channel)
-        if not use_staging_tree:
+        if not is_draft_version:
             increment_channel_version(channel)
             sync_contentnode_and_channel_tsvectors(channel_id=channel.id)
             mark_all_nodes_as_published(base_tree)
             fill_published_fields(channel, version_notes)
-
-        # Attributes not getting set for some reason, so just save it here
-        base_tree.publishing = False
-        base_tree.changed = False
-        base_tree.published = True
-        base_tree.save()
+            base_tree.publishing = False
+            base_tree.changed = False
+            base_tree.published = True
+            base_tree.save()
+        
 
         # Delete public channel cache.
-        if not use_staging_tree and channel.public:
+        if not is_draft_version and channel.public:
             delete_public_channel_cache_keys()
 
         if send_email:
@@ -1355,8 +1360,9 @@ def publish_channel(  # noqa: C901
     finally:
         if kolibri_temp_db and os.path.exists(kolibri_temp_db):
             os.remove(kolibri_temp_db)
-        base_tree.publishing = False
-        base_tree.save()
+        if not is_draft_version:
+            base_tree.publishing = False
+            base_tree.save()
 
     elapsed = time.time() - start
 
diff --git a/contentcuration/contentcuration/viewsets/channel.py b/contentcuration/contentcuration/viewsets/channel.py
index d18f58bb99..59bc208dab 100644
--- a/contentcuration/contentcuration/viewsets/channel.py
+++ b/contentcuration/contentcuration/viewsets/channel.py
@@ -614,28 +614,29 @@ def publish(self, pk, version_notes="", language=None):
                 raise
 
     def publish_next_from_changes(self, changes):
+
         errors = []
         for publish in changes:
             try:
-                self.publish_next(publish["key"])
+                self.publish_next(
+                    publish["key"],
+                    version_notes=publish.get("version_notes"),
+                    language=publish.get("language"),
+                    use_staging_tree=publish.get("use_staging_tree", False), 
+                )
             except Exception as e:
                 log_sync_exception(e, user=self.request.user, change=publish)
                 publish["errors"] = [str(e)]
                 errors.append(publish)
         return errors
 
-    def publish_next(self, pk):
+    def publish_next(self, pk, version_notes="", language=None, use_staging_tree=False):
         logging.debug("Entering the publish staging channel endpoint")
 
         channel = self.get_edit_queryset().get(pk=pk)
 
         if channel.deleted:
             raise ValidationError("Cannot publish a deleted channel")
-        elif channel.staging_tree.publishing:
-            raise ValidationError("Channel staging tree is already publishing")
-
-        channel.staging_tree.publishing = True
-        channel.staging_tree.save()
 
         with create_change_tracker(
             pk, CHANNEL, channel.id, self.request.user, "export-channel-staging-tree"
@@ -644,8 +645,11 @@ def publish_next(self, pk):
                 channel = publish_channel(
                     self.request.user.pk,
                     channel.id,
+                    version_notes=version_notes,
                     progress_tracker=progress_tracker,
-                    use_staging_tree=True,
+                    language=language,
+                    is_draft_version=True,
+                    use_staging_tree=use_staging_tree,
                 )
                 Change.create_changes(
                     [
@@ -661,12 +665,8 @@ def publish_next(self, pk):
                     applied=True,
                 )
             except ChannelIncompleteError:
-                channel.staging_tree.publishing = False
-                channel.staging_tree.save()
                 raise ValidationError("Channel is not ready to be published")
             except Exception:
-                channel.staging_tree.publishing = False
-                channel.staging_tree.save()
                 raise
 
     def sync_from_changes(self, changes):
diff --git a/contentcuration/contentcuration/viewsets/sync/utils.py b/contentcuration/contentcuration/viewsets/sync/utils.py
index e7df210926..99922ee6c8 100644
--- a/contentcuration/contentcuration/viewsets/sync/utils.py
+++ b/contentcuration/contentcuration/viewsets/sync/utils.py
@@ -98,10 +98,11 @@ def generate_update_descendants_event(key, mods, channel_id=None, user_id=None):
     return event
 
 
-def generate_publish_next_event(key, version_notes="", language=None):
+def generate_publish_next_event(key, version_notes="", language=None, use_staging_tree=False):
     event = _generate_event(key, CHANNEL, PUBLISHED_NEXT, key, None)
     event["version_notes"] = version_notes
     event["language"] = language
+    event["use_staging_tree"] = use_staging_tree
     return event
 
 

From 3d3d4d3ff8f31a0a62175577a7cf8e06241087fd Mon Sep 17 00:00:00 2001
From: taoerman <qiliu0523@gmail.com>
Date: Thu, 7 Aug 2025 23:54:13 -0700
Subject: [PATCH 05/17] delete version_notes and language for publish next

---
 .../channelEdit/vuex/currentChannel/actions.js     |  4 ++--
 .../frontend/shared/data/changes.js                |  2 --
 .../frontend/shared/data/resources.js              | 14 ++++++++++----
 contentcuration/contentcuration/utils/publish.py   |  2 +-
 .../contentcuration/viewsets/channel.py            |  8 +++-----
 5 files changed, 16 insertions(+), 14 deletions(-)

diff --git a/contentcuration/contentcuration/frontend/channelEdit/vuex/currentChannel/actions.js b/contentcuration/contentcuration/frontend/channelEdit/vuex/currentChannel/actions.js
index 7659c0630d..33e084e453 100644
--- a/contentcuration/contentcuration/frontend/channelEdit/vuex/currentChannel/actions.js
+++ b/contentcuration/contentcuration/frontend/channelEdit/vuex/currentChannel/actions.js
@@ -56,11 +56,11 @@ export function publishChannel(context, version_notes) {
 }
 
 export function publishDraftChannel(context) {
-  return Channel.publishDraft(context.state.currentChannelId);
+  return Channel.publishDraft(context.state.currentChannelId, {use_staging_tree: false});
 }
 
 export function publishStagingChannel(context) {
-  return Channel.publishDraft(context.state.currentChannelId, true);
+  return Channel.publishDraft(context.state.currentChannelId, { use_staging_tree: true });
 }
 
 export function channelLanguageExistsInResources(context) {
diff --git a/contentcuration/contentcuration/frontend/shared/data/changes.js b/contentcuration/contentcuration/frontend/shared/data/changes.js
index a59e06ffeb..a67e224973 100644
--- a/contentcuration/contentcuration/frontend/shared/data/changes.js
+++ b/contentcuration/contentcuration/frontend/shared/data/changes.js
@@ -448,8 +448,6 @@ export class PublishedNextChange extends Change {
       );
     }
     this.setAndValidateBoolean(use_staging_tree, 'use_staging_tree');
-    this.setAndValidateIsDefined(version_notes, 'version_notes');
-    this.setAndValidateIsDefined(language, 'language');
     this.setChannelAndUserId({ id: this.key });
   }
 }
diff --git a/contentcuration/contentcuration/frontend/shared/data/resources.js b/contentcuration/contentcuration/frontend/shared/data/resources.js
index b55245ffbd..2d7e4dc89f 100644
--- a/contentcuration/contentcuration/frontend/shared/data/resources.js
+++ b/contentcuration/contentcuration/frontend/shared/data/resources.js
@@ -1234,12 +1234,18 @@ export const Channel = new CreateModelResource({
     });
   },
 
-  publishDraft(id, use_staging_tree=false, version_notes="") {
+  publishDraft(id, opts={}) {
+    const {
+      use_staging_tree = false,
+      version_notes = '',
+      language = currentLanguage,
+    } = opts;
+
     const change = new PublishedNextChange({
       key: id,
-      use_staging_tree: use_staging_tree,
-      version_notes: version_notes,
-      language: currentLanguage,
+      use_staging_tree,
+      version_notes,
+      language,
       table: this.tableName,
       source: CLIENTID,
     });
diff --git a/contentcuration/contentcuration/utils/publish.py b/contentcuration/contentcuration/utils/publish.py
index fbd4b0651a..a04a05d1e5 100644
--- a/contentcuration/contentcuration/utils/publish.py
+++ b/contentcuration/contentcuration/utils/publish.py
@@ -1137,7 +1137,7 @@ def save_export_database(channel_id, version, is_draft_version=False):
     target_paths = [
         os.path.join(settings.DB_ROOT, "{}-{}.sqlite3".format(channel_id, version))
     ]
-    # Only create non-version path if not using the staging tree
+    # Only create non-version path if not is_draft_version
     if not is_draft_version:
         target_paths.append(
             os.path.join(settings.DB_ROOT, "{id}.sqlite3".format(id=channel_id))
diff --git a/contentcuration/contentcuration/viewsets/channel.py b/contentcuration/contentcuration/viewsets/channel.py
index 59bc208dab..bf4feb2053 100644
--- a/contentcuration/contentcuration/viewsets/channel.py
+++ b/contentcuration/contentcuration/viewsets/channel.py
@@ -620,8 +620,8 @@ def publish_next_from_changes(self, changes):
             try:
                 self.publish_next(
                     publish["key"],
-                    version_notes=publish.get("version_notes"),
-                    language=publish.get("language"),
+                    # version_notes=publish.get("version_notes"),
+                    # language=publish.get("language"),
                     use_staging_tree=publish.get("use_staging_tree", False), 
                 )
             except Exception as e:
@@ -630,7 +630,7 @@ def publish_next_from_changes(self, changes):
                 errors.append(publish)
         return errors
 
-    def publish_next(self, pk, version_notes="", language=None, use_staging_tree=False):
+    def publish_next(self, pk, use_staging_tree=False):
         logging.debug("Entering the publish staging channel endpoint")
 
         channel = self.get_edit_queryset().get(pk=pk)
@@ -645,9 +645,7 @@ def publish_next(self, pk, version_notes="", language=None, use_staging_tree=Fal
                 channel = publish_channel(
                     self.request.user.pk,
                     channel.id,
-                    version_notes=version_notes,
                     progress_tracker=progress_tracker,
-                    language=language,
                     is_draft_version=True,
                     use_staging_tree=use_staging_tree,
                 )

From 1bb3c4c7ccdcb0f111dc02239694dc352fb6f5c7 Mon Sep 17 00:00:00 2001
From: taoerman <qiliu0523@gmail.com>
Date: Fri, 8 Aug 2025 00:36:06 -0700
Subject: [PATCH 06/17] delete all version_notes and language for publish_next

---
 .../frontend/shared/data/__tests__/changes.spec.js            | 4 +---
 .../contentcuration/frontend/shared/data/changes.js           | 2 +-
 .../contentcuration/frontend/shared/data/resources.js         | 4 ----
 .../contentcuration/frontend/shared/data/serverSync.js        | 2 +-
 contentcuration/contentcuration/tests/test_exportchannel.py   | 4 ----
 contentcuration/contentcuration/viewsets/channel.py           | 2 --
 contentcuration/contentcuration/viewsets/sync/utils.py        | 4 +---
 7 files changed, 4 insertions(+), 18 deletions(-)

diff --git a/contentcuration/contentcuration/frontend/shared/data/__tests__/changes.spec.js b/contentcuration/contentcuration/frontend/shared/data/__tests__/changes.spec.js
index 9ea28f3e54..76a9264276 100644
--- a/contentcuration/contentcuration/frontend/shared/data/__tests__/changes.spec.js
+++ b/contentcuration/contentcuration/frontend/shared/data/__tests__/changes.spec.js
@@ -258,8 +258,6 @@ describe('Change Types', () => {
       key: '1',
       table: TABLE_NAMES.CHANNEL,
       use_staging_tree: false,
-      version_notes: 'Test version notes',
-      language: 'en',
       source: CLIENTID,
     });
     const rev = await change.saveChange();
@@ -267,7 +265,7 @@ describe('Change Types', () => {
     expect(persistedChange).toEqual({
       rev,
       channel_id: change.key,
-      ...pick(change, ['type', 'key', 'table', 'use_staging_tree', 'version_notes', 'language', 'source']),
+      ...pick(change, ['type', 'key', 'table', 'use_staging_tree', 'source']),
     });
   });
 
diff --git a/contentcuration/contentcuration/frontend/shared/data/changes.js b/contentcuration/contentcuration/frontend/shared/data/changes.js
index a67e224973..acb9f963e2 100644
--- a/contentcuration/contentcuration/frontend/shared/data/changes.js
+++ b/contentcuration/contentcuration/frontend/shared/data/changes.js
@@ -439,7 +439,7 @@ export class PublishedChange extends Change {
 }
 
 export class PublishedNextChange extends Change {
-  constructor({ use_staging_tree, version_notes, language, ...fields }) {
+  constructor({ use_staging_tree, ...fields }) {
     fields.type = CHANGE_TYPES.PUBLISHED_NEXT;
     super(fields);
     if (this.table !== TABLE_NAMES.CHANNEL) {
diff --git a/contentcuration/contentcuration/frontend/shared/data/resources.js b/contentcuration/contentcuration/frontend/shared/data/resources.js
index 2d7e4dc89f..cb7a3dc73b 100644
--- a/contentcuration/contentcuration/frontend/shared/data/resources.js
+++ b/contentcuration/contentcuration/frontend/shared/data/resources.js
@@ -1237,15 +1237,11 @@ export const Channel = new CreateModelResource({
   publishDraft(id, opts={}) {
     const {
       use_staging_tree = false,
-      version_notes = '',
-      language = currentLanguage,
     } = opts;
 
     const change = new PublishedNextChange({
       key: id,
       use_staging_tree,
-      version_notes,
-      language,
       table: this.tableName,
       source: CLIENTID,
     });
diff --git a/contentcuration/contentcuration/frontend/shared/data/serverSync.js b/contentcuration/contentcuration/frontend/shared/data/serverSync.js
index 0015766058..29efce4c16 100644
--- a/contentcuration/contentcuration/frontend/shared/data/serverSync.js
+++ b/contentcuration/contentcuration/frontend/shared/data/serverSync.js
@@ -36,7 +36,7 @@ const ChangeTypeMapFields = {
     'excluded_descendants',
   ]),
   [CHANGE_TYPES.PUBLISHED]: commonFields.concat(['version_notes', 'language']),
-  [CHANGE_TYPES.PUBLISHED_NEXT]: commonFields.concat(['use_staging_tree', 'version_notes', 'language']),
+  [CHANGE_TYPES.PUBLISHED_NEXT]: commonFields.concat(['use_staging_tree']),
   [CHANGE_TYPES.SYNCED]: commonFields.concat([
     'titles_and_descriptions',
     'resource_details',
diff --git a/contentcuration/contentcuration/tests/test_exportchannel.py b/contentcuration/contentcuration/tests/test_exportchannel.py
index c7c3097a4c..f8dd4cf08a 100644
--- a/contentcuration/contentcuration/tests/test_exportchannel.py
+++ b/contentcuration/contentcuration/tests/test_exportchannel.py
@@ -879,12 +879,10 @@ def run_publish_channel(self):
         publish_channel(
             self.admin_user.id,
             self.content_channel.id,
-            version_notes="",
             force=False,
             force_exercises=False,
             send_email=False,
             progress_tracker=None,
-            language="fr",
             is_draft_version=True,
             use_staging_tree=True,
         )
@@ -990,12 +988,10 @@ def run_publish_channel(self):
         publish_channel(
             self.admin_user.id,
             self.content_channel.id,
-            version_notes="",
             force=False,
             force_exercises=False,
             send_email=False,
             progress_tracker=None,
-            language="fr",
             is_draft_version=True,
             use_staging_tree=False,
         )
diff --git a/contentcuration/contentcuration/viewsets/channel.py b/contentcuration/contentcuration/viewsets/channel.py
index bf4feb2053..be7f26e799 100644
--- a/contentcuration/contentcuration/viewsets/channel.py
+++ b/contentcuration/contentcuration/viewsets/channel.py
@@ -620,8 +620,6 @@ def publish_next_from_changes(self, changes):
             try:
                 self.publish_next(
                     publish["key"],
-                    # version_notes=publish.get("version_notes"),
-                    # language=publish.get("language"),
                     use_staging_tree=publish.get("use_staging_tree", False), 
                 )
             except Exception as e:
diff --git a/contentcuration/contentcuration/viewsets/sync/utils.py b/contentcuration/contentcuration/viewsets/sync/utils.py
index 99922ee6c8..8f5ce98a05 100644
--- a/contentcuration/contentcuration/viewsets/sync/utils.py
+++ b/contentcuration/contentcuration/viewsets/sync/utils.py
@@ -98,10 +98,8 @@ def generate_update_descendants_event(key, mods, channel_id=None, user_id=None):
     return event
 
 
-def generate_publish_next_event(key, version_notes="", language=None, use_staging_tree=False):
+def generate_publish_next_event(key, use_staging_tree=False):
     event = _generate_event(key, CHANNEL, PUBLISHED_NEXT, key, None)
-    event["version_notes"] = version_notes
-    event["language"] = language
     event["use_staging_tree"] = use_staging_tree
     return event
 

From a6ddd3e9b0c1c354224866c383f68b89214b3952 Mon Sep 17 00:00:00 2001
From: Alex Velez <velezllaquealex@gmail.com>
Date: Mon, 28 Jul 2025 10:56:18 -0500
Subject: [PATCH 07/17] Copy side panel modal to Studio

---
 .../frontend/shared/strings/commonStrings.js  |  13 +
 .../shared/views/SidePanelModal/Backdrop.vue  |  75 +++++
 .../shared/views/SidePanelModal/index.vue     | 274 ++++++++++++++++++
 3 files changed, 362 insertions(+)
 create mode 100644 contentcuration/contentcuration/frontend/shared/strings/commonStrings.js
 create mode 100644 contentcuration/contentcuration/frontend/shared/views/SidePanelModal/Backdrop.vue
 create mode 100644 contentcuration/contentcuration/frontend/shared/views/SidePanelModal/index.vue

diff --git a/contentcuration/contentcuration/frontend/shared/strings/commonStrings.js b/contentcuration/contentcuration/frontend/shared/strings/commonStrings.js
new file mode 100644
index 0000000000..7b3137c2e2
--- /dev/null
+++ b/contentcuration/contentcuration/frontend/shared/strings/commonStrings.js
@@ -0,0 +1,13 @@
+import { createTranslator } from 'shared/i18n';
+
+export const commonStrings = createTranslator('CommonStrings', {
+  backAction: {
+    message: 'Back',
+    context:
+      'Indicates going back to a previous step in multi-step workflows. It can be used as a label of the back button that is displayed next to the continue button.',
+  },
+  closeAction: {
+    message: 'Close',
+    context: 'A label for an action that closes a dialog or window',
+  },
+});
diff --git a/contentcuration/contentcuration/frontend/shared/views/SidePanelModal/Backdrop.vue b/contentcuration/contentcuration/frontend/shared/views/SidePanelModal/Backdrop.vue
new file mode 100644
index 0000000000..af8d2b99e1
--- /dev/null
+++ b/contentcuration/contentcuration/frontend/shared/views/SidePanelModal/Backdrop.vue
@@ -0,0 +1,75 @@
+<template>
+
+  <transition
+    name="backdrop"
+    appear
+  >
+    <div
+      class="backdrop"
+      :class="{ 'has-transitions': transitions }"
+      @click="$emit('click')"
+    >
+      <slot></slot>
+    </div>
+  </transition>
+
+</template>
+
+
+<script>
+
+  export default {
+    name: 'Backdrop',
+    props: {
+      transitions: {
+        // If true, backdrop will have enter/leave transitions
+        type: Boolean,
+        default: false,
+      },
+    },
+  };
+
+</script>
+
+
+<style lang="scss" scoped>
+
+  .backdrop {
+    position: fixed;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0;
+    // Overlays everything except the sidepanel and KModals
+    z-index: 11;
+    width: 100%;
+    height: 100%;
+    background: rgba(0, 0, 0, 0.7);
+    background-attachment: fixed;
+  }
+
+  .has-transitions.backdrop-enter {
+    opacity: 0;
+  }
+
+  .has-transitions.backdrop-enter-to {
+    opacity: 1;
+  }
+
+  .has-transitions.backdrop-enter-active {
+    transition: opacity 0.2s ease-in-out;
+  }
+
+  .has-transitions.backdrop-leave {
+    opacity: 1;
+  }
+
+  .has-transitions.backdrop-leave-to {
+    opacity: 0;
+  }
+
+  .has-transitions.backdrop-leave-active {
+    transition: opacity 0.2s ease-in-out;
+  }
+
+</style>
diff --git a/contentcuration/contentcuration/frontend/shared/views/SidePanelModal/index.vue b/contentcuration/contentcuration/frontend/shared/views/SidePanelModal/index.vue
new file mode 100644
index 0000000000..30b695e5d0
--- /dev/null
+++ b/contentcuration/contentcuration/frontend/shared/views/SidePanelModal/index.vue
@@ -0,0 +1,274 @@
+<template>
+
+  <div
+    ref="sidePanel"
+    :tabindex="0"
+    :class="{ 'is-rtl': isRtl, 'is-mobile': isMobile }"
+    @keyup.esc="closePanel"
+  >
+    <transition name="side-panel">
+      <KFocusTrap
+        @shouldFocusFirstEl="focusFirstEl"
+        @shouldFocusLastEl="focusLastEl"
+      >
+        <section
+          class="side-panel"
+          role="region"
+          :style="sidePanelStyles"
+          :aria-label="ariaLabel"
+        >
+          <!-- Fixed header -->
+          <div
+            ref="fixedHeader"
+            :class="{ 'side-panel-header': true, immersive: immersive }"
+            :style="headerStyles"
+          >
+            <div
+              class="header-content"
+              :style="{
+                flexDirection: closeButtonIconType === 'close' ? 'row' : 'row-reverse',
+              }"
+            >
+              <div style="overflow: hidden">
+                <slot name="header"> </slot>
+              </div>
+              <KIconButton
+                v-if="closeButtonIconType"
+                :icon="closeButtonIconType"
+                class="close-button"
+                :ariaLabel="closeButtonMessage"
+                :tooltip="closeButtonMessage"
+                @click="closePanel"
+              />
+            </div>
+          </div>
+
+          <!-- Default slot for inserting content which will scroll on overflow -->
+          <div
+            class="side-panel-content"
+            @scroll="isScrolled = $event.target.scrollTop > 0"
+          >
+            <slot :isScrolled="isScrolled"></slot>
+          </div>
+          <div
+            v-if="$slots.bottomNavigation"
+            ref="fixedBottombar"
+            class="bottom-navigation"
+            :style="{ backgroundColor: $themeTokens.surface }"
+          >
+            <slot name="bottomNavigation"></slot>
+          </div>
+        </section>
+      </KFocusTrap>
+    </transition>
+
+    <Backdrop
+      :transitions="true"
+      class="backdrop"
+      @click="closePanel"
+    />
+  </div>
+
+</template>
+
+
+<script>
+
+  import { ref } from 'vue';
+  import useKResponsiveWindow from 'kolibri-design-system/lib/composables/useKResponsiveWindow';
+  import Backdrop from './Backdrop.vue';
+  import { commonStrings } from 'shared/strings/commonStrings';
+
+  export default {
+    name: 'SidePanelModal',
+    components: {
+      Backdrop,
+    },
+    setup() {
+      const { windowBreakpoint } = useKResponsiveWindow();
+      return {
+        /* Will be calculated in mounted() as it will get the height of the fixedHeader then */
+        // @type {RefImpl<number>}
+        windowBreakpoint,
+        lastFocus: null,
+        isScrolled: ref(false),
+      };
+    },
+    props: {
+      /* CloseButtonIconType icon from parent component */
+      closeButtonIconType: {
+        type: String,
+        required: false,
+        default: 'close',
+        validator: value => {
+          return ['close', 'back'].includes(value);
+        },
+      },
+      /* Optionally override the default width of the side panel with valid CSS value */
+      sidePanelWidth: {
+        type: String,
+        required: false,
+        default: '436px',
+      },
+      /* Which side of the screen should the panel be fixed? Reverses the value when isRtl */
+      alignment: {
+        type: String,
+        required: true,
+        validator(value) {
+          return ['right', 'left'].includes(value);
+        },
+      },
+      ariaLabel: {
+        type: String,
+        required: false,
+        default: null,
+      },
+      immersive: {
+        type: Boolean,
+        required: false,
+        default: false,
+      },
+    },
+    computed: {
+      isMobile() {
+        // This should be suitable for any mobile/tablet
+        return this.windowBreakpoint <= 2;
+      },
+      /* Returns an object with properties left or right set to the appropriate value
+         depending on isRtl and this.alignment */
+      rtlAlignment() {
+        if (this.isRtl && this.alignment === 'left') {
+          return 'right';
+        } else if (this.isRtl && this.alignment === 'right') {
+          return 'left';
+        } else {
+          return this.alignment;
+        }
+      },
+      /* Returns an object with this.rtlAlignment set to 0 */
+      langDirStyles() {
+        return {
+          [this.rtlAlignment]: 0,
+        };
+      },
+      responsiveWidth() {
+        return this.isMobile ? '100vw' : this.sidePanelWidth;
+      },
+      /** Styling Properties */
+      headerStyles() {
+        return {
+          backgroundColor: this.immersive ? this.$themeTokens.appBar : this.$themeTokens.surface,
+          borderBottom: `1px solid ${this.$themePalette.grey.v_400}`,
+        };
+      },
+      sidePanelStyles() {
+        return {
+          ...this.langDirStyles,
+          width: this.responsiveWidth,
+          top: 0,
+          position: 'fixed',
+          color: this.$themeTokens.text,
+          backgroundColor: this.$themeTokens.surface,
+          'z-index': 12,
+        };
+      },
+      closeButtonMessage() {
+        const { backAction, closeAction } = commonStrings;
+        return this.closeButtonIconType === 'back' ? backAction : closeAction;
+      },
+    },
+    beforeMount() {
+      this.lastFocus = document.activeElement;
+    },
+    /* this is the easiest way I could think to avoid having dual scroll bars and to avoid
+     strange screen-squeezing behavior noted here:
+     https://user-images.githubusercontent.com/79847249/164241012-b161bad7-8a46-4221-a391-a375899ed9a9.mp4 */
+    mounted() {
+      const htmlTag = window.document.getElementsByTagName('html')[0];
+      htmlTag.style['overflow-y'] = 'hidden';
+      this.$nextTick(() => {
+        this.focusFirstEl();
+        this.$emit('shouldFocusFirstEl');
+      });
+    },
+    beforeDestroy() {
+      const htmlTag = window.document.getElementsByTagName('html')[0];
+      htmlTag.style['overflow-y'] = 'auto';
+    },
+    destroyed() {
+      window.setTimeout(() => this.lastFocus.focus());
+    },
+    methods: {
+      closePanel() {
+        this.$emit('closePanel');
+      },
+      focusLastEl() {
+        this.$el.querySelector('.close-button').focus();
+      },
+      /**
+       * @public
+       * Reset the next focus to the first focus element
+       */
+      focusFirstEl() {
+        this.$el.querySelector('.close-button').focus();
+      },
+    },
+  };
+
+</script>
+
+
+<style lang="scss" scoped>
+
+  @import '~kolibri-design-system/lib/styles/definitions';
+
+  .header-content {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    width: 100%;
+    height: 100%;
+  }
+
+  /** Need to be sure a KDropdownMenu shows up on the Side Panel */
+  /deep/ .tippy-popper {
+    z-index: 24;
+  }
+
+  .side-panel {
+    display: flex;
+    flex-direction: column;
+    height: 100%;
+
+    .side-panel-header {
+      z-index: 1;
+      width: 100%;
+      min-height: 60px;
+      padding: 0 1em;
+
+      &.immersive {
+        @extend %dropshadow-2dp;
+      }
+    }
+
+    .side-panel-content {
+      flex-grow: 1;
+      padding: 24px 32px 16px;
+      overflow-x: hidden;
+      overflow-y: auto;
+    }
+
+    .bottom-navigation {
+      @extend %dropshadow-2dp;
+
+      z-index: 1;
+      display: flex;
+      justify-content: space-between;
+      width: 100%;
+      padding: 1em;
+      line-height: 2.5em;
+      text-align: center;
+    }
+  }
+
+</style>

From a0545da437aefc7ebf94b63b65e3431ffb9b6a5f Mon Sep 17 00:00:00 2001
From: Alex Velez <velezllaquealex@gmail.com>
Date: Mon, 28 Jul 2025 10:56:55 -0500
Subject: [PATCH 08/17] Add community channels strings file

---
 .../frontend/shared/strings/communityChannelsStrings.js        | 3 +++
 1 file changed, 3 insertions(+)
 create mode 100644 contentcuration/contentcuration/frontend/shared/strings/communityChannelsStrings.js

diff --git a/contentcuration/contentcuration/frontend/shared/strings/communityChannelsStrings.js b/contentcuration/contentcuration/frontend/shared/strings/communityChannelsStrings.js
new file mode 100644
index 0000000000..489af9eb43
--- /dev/null
+++ b/contentcuration/contentcuration/frontend/shared/strings/communityChannelsStrings.js
@@ -0,0 +1,3 @@
+import { createTranslator } from 'shared/i18n';
+
+export const communityChannelsStrings = createTranslator('CommunityChannelsStrings', {});

From 39ce0a3bcee86bc8a0d6a51a52d155e6c408634a Mon Sep 17 00:00:00 2001
From: taoerman <qiliu0523@gmail.com>
Date: Mon, 11 Aug 2025 21:17:16 -0700
Subject: [PATCH 09/17] Update channel publishing UX to support publishing
 channel draft versions

fix some typo

fix a bug

modal

fix some bugs

fix frame bug
---
 .../sidePanels/PublishSidePanel.vue           | 267 ++++++++++++++++++
 .../views/TreeView/TreeViewBase.vue           |  27 +-
 .../views/progress/ProgressModal.vue          |  43 ++-
 .../frontend/shared/data/resources.js         |  57 +++-
 .../strings/communityChannelsStrings.js       |  17 +-
 5 files changed, 390 insertions(+), 21 deletions(-)
 create mode 100644 contentcuration/contentcuration/frontend/channelEdit/components/sidePanels/PublishSidePanel.vue

diff --git a/contentcuration/contentcuration/frontend/channelEdit/components/sidePanels/PublishSidePanel.vue b/contentcuration/contentcuration/frontend/channelEdit/components/sidePanels/PublishSidePanel.vue
new file mode 100644
index 0000000000..f31aac212c
--- /dev/null
+++ b/contentcuration/contentcuration/frontend/channelEdit/components/sidePanels/PublishSidePanel.vue
@@ -0,0 +1,267 @@
+<template>
+  <div>
+    <SidePanelModal
+      alignment="right"
+      :ariaLabel="$tr('publishPanelAria')"
+      @keyup.esc="onClose"
+      @closePanel="onClose"
+    >
+      <template #header>
+        <h2 style="margin: 0">{{ getPanelTitle() }}</h2>
+      </template>
+
+      <template #default>
+        <div class="form-section">
+          <VRadioGroup v-model="mode">
+            <VRadio
+              :label="$tr('modeLive')"
+              value="live"
+            />
+            <div class="radio-description">{{ getLiveModeDescription() }}</div>
+            
+            <!-- Live mode content nested under the radio button -->
+            <div v-if="mode === 'live'" class="live-mode-content" style="margin-left: 24px; margin-top: 16px;">
+              <div class="info-section">
+                <VIconWrapper class="info-icon">info</VIconWrapper>
+                <span>{{ $tr('publishingInfo', { version: currentChannel.version, time: formattedPublishTime }) }}</span>
+              </div>
+              
+                                            <div class="form-section" style="width: 100%; max-width: 100%;">
+                  <div class="textarea-container">
+                    <label class="label">{{ $tr('versionNotesLabel') }}</label>
+                    <textarea
+                      v-model="version_notes"
+                      :rows="4"
+                      :maxlength="30"
+                      class="custom-textarea"
+                      :placeholder="$tr('versionNotesLabel')"
+                    ></textarea>
+                    <div class="char-counter">{{ version_notes.length }} / 30</div>
+                  </div>
+                </div>
+              
+              <div v-if="incompleteResourcesCount > 0" class="form-section warning-section">
+                <div class="warning-content">
+                  <VIconWrapper class="warning-icon">warning</VIconWrapper>
+                  <div class="warning-text">
+                    <div class="warning-title">{{ $tr('incompleteResourcesWarning', { count: incompleteResourcesCount }) }}</div>
+                    <div class="warning-description">{{ $tr('incompleteResourcesDescription') }}</div>
+                  </div>
+                </div>
+              </div>
+            </div>
+            
+            <VRadio
+              :label="$tr('modeDraft')"
+              value="draft"
+            />
+            <div class="radio-description">{{ $tr('modeDraftDescription') }}</div>
+          </VRadioGroup>
+        </div>
+      </template>
+
+      <template #bottomNavigation>
+        <div class="footer">
+          <VBtn flat @click="onClose">{{ $tr('cancel') }}</VBtn>
+          <VBtn
+            color="primary"
+            :disabled="submitting"
+            @click="submit"
+          >
+            {{ getButtonText() }}
+          </VBtn>
+        </div>
+      </template>
+    </SidePanelModal>
+  </div>
+</template>
+
+<script>
+import SidePanelModal from 'shared/views/SidePanelModal';
+import VIconWrapper from 'shared/views/VIconWrapper';
+import { Channel } from 'shared/data/resources';
+import { forceServerSync } from 'shared/data/serverSync';
+import { communityChannelsStrings } from 'shared/strings/communityChannelsStrings';
+
+import { mapGetters } from 'vuex';
+
+export default {
+  name: 'PublishSidePanel',
+  components: { 
+    SidePanelModal,
+    VIconWrapper,
+  },
+  props: {
+    open: { type: Boolean, required: true },
+    channelId: { type: String, required: true },
+  },
+  emits: ['close', 'submitted'],
+  data() {
+    return {
+      mode: 'live',
+      version_notes: '',
+      submitting: false,
+    };
+  },
+  computed: {
+    ...mapGetters('currentChannel', ['currentChannel']),
+    ...mapGetters('contentNode', ['getContentNode']),
+    formattedPublishTime() {
+      if (!this.currentChannel) return '';
+      const now = new Date();
+      const timeString = now.toLocaleTimeString('en-US', { 
+        hour: 'numeric', 
+        minute: '2-digit',
+        hour12: true 
+      });
+      const dateString = now.toLocaleDateString('en-US', { 
+        month: 'numeric', 
+        day: 'numeric', 
+        year: 'numeric' 
+      });
+      return `${timeString} - ${dateString}`;
+    },
+    incompleteResourcesCount() {
+      if (!this.currentChannel) return 0;
+      const rootNode = this.getContentNode(this.currentChannel.root_id);
+      return rootNode ? rootNode.error_count || 0 : 0;
+    },
+  },
+  methods: {
+    onClose() {
+      if (!this.submitting) this.$emit('close');
+    },
+    async submit() {
+      try {
+        this.submitting = true;
+        if (this.mode === 'draft') {
+          await Channel.publishDraft(this.currentChannel.id, { use_staging_tree: false });
+          await forceServerSync();
+          this.$emit('submitted');
+          this.$emit('close');
+        } else {
+          await Channel.publish(this.channelId, {
+            version_notes: this.version_notes,
+          });
+          this.$emit('submitted');
+          this.$emit('close');
+        }
+      } catch (error) {
+        this.$store.dispatch('shared/handleAxiosError', error);
+      } finally {
+        this.submitting = false;
+      }
+    },
+    getPanelTitle() {
+      return this.mode === 'draft' ? this.$tr('publishToLibrary') : this.$tr('publishChannel');
+    },
+    getLiveModeDescription() {
+      return this.$tr('modeLiveDescription');
+    },
+    getButtonText() {
+      return this.mode === 'draft' ? this.$tr('saveDraft') : this.$tr('publishLive');
+    },
+  },
+  $trs: {
+    publishToLibrary: 'Publish to library',
+    publishChannel: 'Publish channel',
+    publishPanelAria: 'Publish channel side panel',
+    publishLive: 'PUBLISH',
+    saveDraft: 'SAVE DRAFT',
+    modeLive: 'Live',
+    modeDraft: 'Draft (staging)',
+    versionNotesLabel: 'Describe what\'s new in this channel version',
+    cancel: 'CANCEL',
+    modeLiveDescription: 'This edition will be accessible to the public through the Kolibri public library.',
+    modeDraftDescription: 'Your channel will be saved as a draft, allowing you to review or conduct quality checks without altering the published version on Kolibri public library.',
+    publishingInfo: 'You\'re publishing: Version {version} ({time})',
+    incompleteResourcesWarning: '{count} incomplete resources.',
+    incompleteResourcesDescription: 'Incomplete resources will not be published and made available for download in Kolibri. Click \'Publish\' to confirm that you would like to publish anyway.',
+    maxLengthError: 'Maximum 30 characters allowed',
+  },
+};
+</script>
+
+<style scoped>
+.form-section { 
+  margin: 16px 0; 
+}
+.label { 
+  display: block; 
+  font-weight: 600; 
+  margin-bottom: 6px; 
+}
+.footer { 
+  display: flex; 
+  justify-content: flex-end; 
+  gap: 8px; 
+  padding: 12px 0; 
+}
+.radio-description {
+  margin-left: 24px;
+  margin-bottom: 16px;
+  color: rgba(0, 0, 0, 0.6);
+  font-size: 14px;
+}
+.info-section {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 12px;
+  background-color: #f5f5f5;
+  border-radius: 4px;
+}
+.info-icon {
+  color: #1976d2;
+}
+.warning-section {
+  margin-top: 16px;
+}
+.warning-content {
+  display: flex;
+  align-items: flex-start;
+  gap: 12px;
+  padding: 16px;
+  background-color: #fff3cd;
+  border: 1px solid #ffeaa7;
+  border-radius: 8px;
+}
+.warning-icon {
+  color: #f39c12;
+  flex-shrink: 0;
+  margin-top: 2px;
+}
+.warning-text {
+  flex: 1;
+}
+.warning-title {
+  font-weight: bold;
+  color: #e74c3c;
+  margin-bottom: 8px;
+}
+.warning-description {
+  color: #6c757d;
+  line-height: 1.4;
+}
+.textarea-container {
+  width: 100%;
+}
+.custom-textarea {
+  width: 100%;
+  min-height: 100px;
+  padding: 12px;
+  border: 1px solid #e0e0e0;
+  border-radius: 4px;
+  font-family: inherit;
+  font-size: 14px;
+  line-height: 1.5;
+  resize: vertical;
+  box-sizing: border-box;
+}
+.char-counter {
+  text-align: center;
+  color: #666;
+  font-size: 12px;
+  margin-top: 4px;
+}
+</style> 
\ No newline at end of file
diff --git a/contentcuration/contentcuration/frontend/channelEdit/views/TreeView/TreeViewBase.vue b/contentcuration/contentcuration/frontend/channelEdit/views/TreeView/TreeViewBase.vue
index 6fd78d52eb..c6ada7182a 100644
--- a/contentcuration/contentcuration/frontend/channelEdit/views/TreeView/TreeViewBase.vue
+++ b/contentcuration/contentcuration/frontend/channelEdit/views/TreeView/TreeViewBase.vue
@@ -53,7 +53,7 @@
         </KRouterLink>
       </VToolbarItems>
       <VSpacer />
-      <SavingIndicator v-if="!offline" />
+      <SavingIndicator v-if="!offline && !isDraftPublishing" />
       <OfflineText indicator />
       <ProgressModal />
       <div
@@ -207,9 +207,12 @@
     />
     <slot></slot>
 
-    <PublishModal
-      v-if="showPublishModal"
-      v-model="showPublishModal"
+    <PublishSidePanel
+      v-if="showPublishSidePanel && currentChannel && currentChannel.id"
+      :open="showPublishSidePanel"
+      :channelId="currentChannel.id"
+      @close="showPublishSidePanel = false"
+      @submitted="showPublishSidePanel = false"
     />
     <template v-if="isPublished">
       <ChannelTokenModal
@@ -313,7 +316,7 @@
   import Clipboard from '../../components/Clipboard';
   import SyncResourcesModal from '../sync/SyncResourcesModal';
   import ProgressModal from '../progress/ProgressModal';
-  import PublishModal from '../../components/publish/PublishModal';
+
   import QuickEditModal from '../../components/QuickEditModal';
   import SavingIndicator from '../../components/edit/SavingIndicator';
   import { DraggableRegions, DraggableUniverses, RouteNames } from '../../constants';
@@ -328,6 +331,7 @@
   import DraggableRegion from 'shared/views/draggable/DraggableRegion';
   import { DropEffect } from 'shared/mixins/draggable/constants';
   import DraggablePlaceholder from 'shared/views/draggable/DraggablePlaceholder';
+  import PublishSidePanel from '../../components/sidePanels/PublishSidePanel';
 
   export default {
     name: 'TreeViewBase',
@@ -335,7 +339,7 @@
       DraggableRegion,
       MainNavigationDrawer,
       ToolBar,
-      PublishModal,
+      PublishSidePanel,
       ProgressModal,
       ChannelTokenModal,
       SyncResourcesModal,
@@ -357,7 +361,7 @@
     data() {
       return {
         drawer: false,
-        showPublishModal: false,
+        showPublishSidePanel: false,
         showTokenModal: false,
         showSyncModal: false,
         showClipboard: false,
@@ -389,9 +393,12 @@
       isRicecooker() {
         return Boolean(this.currentChannel.ricecooker_version);
       },
+      isDraftPublishing() {
+        return this.currentChannel && this.currentChannel.publishing && this.currentChannel.publishing_draft;
+      },
       disablePublish() {
         return (
-          this.currentChannel.publishing ||
+          (this.currentChannel.publishing && !this.currentChannel.publishing_draft) || 
           !this.isChanged ||
           !this.currentChannel.language ||
           (this.rootNode && !this.rootNode.resource_count)
@@ -502,7 +509,9 @@
         this.trackClickEvent('Delete channel');
       },
       publishChannel() {
-        this.showPublishModal = true;
+        console.log('publishChannel called, currentChannel:', this.currentChannel);
+        console.log('Setting showPublishSidePanel to true');
+        this.showPublishSidePanel = true;
         this.trackClickEvent('Publish');
       },
       trackClickEvent(eventLabel) {
diff --git a/contentcuration/contentcuration/frontend/channelEdit/views/progress/ProgressModal.vue b/contentcuration/contentcuration/frontend/channelEdit/views/progress/ProgressModal.vue
index 73815f39fe..228e73935c 100644
--- a/contentcuration/contentcuration/frontend/channelEdit/views/progress/ProgressModal.vue
+++ b/contentcuration/contentcuration/frontend/channelEdit/views/progress/ProgressModal.vue
@@ -29,12 +29,32 @@
     >
       <span>{{ $tr('publishHeader') }}</span>&nbsp;<span>{{ progressPercent }}</span>
     </div>
+    <div
+      v-else-if="isPublishingDraft"
+      class="grey--text"
+      data-test="progress"
+    >
+      <VProgressCircular
+        indeterminate
+        size="16"
+        width="2"
+        color="loading"
+        class="mr-2"
+      />
+      <span>{{ $tr('draftHeader') }}</span>
+    </div>
+    <div
+      v-else-if="showDraftSaved"
+      class="grey--text"
+    >
+      {{ $tr('draftSaved') }}
+    </div>
     <div
       v-else
       class="grey--text"
     >
       {{
-        lastPublished
+        lastPublished && !isPublishingDraft
           ? $tr('lastPublished', { last_published: $formatRelative(lastPublished, now) })
           : $tr('unpublishedText')
       }}
@@ -65,7 +85,24 @@
         // add condition so that publishing modal is only visible for users
         // who have channel publishing permissions
         if (this.canManage) {
-          return this.currentChannel && this.currentChannel.publishing;
+          return this.currentChannel && this.currentChannel.publishing && !this.currentChannel.publishing_draft;
+        }
+        return false;
+      },
+      isPublishingDraft() {
+        if (this.canManage) {
+          return this.currentChannel && this.currentChannel.publishing && this.currentChannel.publishing_draft;
+        }
+        return false;
+      },
+      showDraftSaved() {
+        if (this.canManage) {
+          return this.currentChannel && 
+                 !this.currentChannel.publishing && 
+                 !this.currentChannel.publishing_draft && 
+                 this.currentChannel.last_published &&
+                 !this.currentChannel.published &&
+                 !this.currentTask; 
         }
         return false;
       },
@@ -137,6 +174,8 @@
     $trs: {
       defaultErrorText: 'Last attempt to publish failed',
       publishHeader: 'Publishing channel',
+      draftHeader: 'Saving draft...',
+      draftSaved: 'Saved just now',
       lastPublished: 'Published {last_published}',
       unpublishedText: 'Unpublished',
       syncHeader: 'Syncing resources',
diff --git a/contentcuration/contentcuration/frontend/shared/data/resources.js b/contentcuration/contentcuration/frontend/shared/data/resources.js
index cb7a3dc73b..0b29a78fb2 100644
--- a/contentcuration/contentcuration/frontend/shared/data/resources.js
+++ b/contentcuration/contentcuration/frontend/shared/data/resources.js
@@ -1238,18 +1238,57 @@ export const Channel = new CreateModelResource({
     const {
       use_staging_tree = false,
     } = opts;
-
-    const change = new PublishedNextChange({
-      key: id,
-      use_staging_tree,
-      table: this.tableName,
-      source: CLIENTID,
-    });
-    return this.transaction({ mode: 'rw' }, CHANGES_TABLE, () => {
-      return this._saveAndQueueChange(change);
+  
+    return this.transaction({ mode: 'rw' }, () => {
+      return this.table.update(id, { 
+        publishing: true,
+        publishing_draft: true  
+      });
+    }).then(() => {
+      const change = new PublishedNextChange({
+        key: id,
+        use_staging_tree,
+        table: this.tableName,
+        source: CLIENTID,
+      });
+      return this.transaction({ mode: 'rw' }, CHANGES_TABLE, () => {
+        return this._saveAndQueueChange(change);
+      });
+    }).then(() => {
+      this._monitorDraftCompletion(id);
+      return Promise.resolve();
     });
   },
 
+  _monitorDraftCompletion(channelId) {
+    const checkInterval = setInterval(async () => {
+      try {
+        const changes = await this.table.db.table(CHANGES_TABLE)
+          .where('table')
+          .equals(TABLE_NAMES.CHANNEL)
+          .and(change => change.key === channelId && change.type === CHANGE_TYPES.PUBLISHED_NEXT)
+          .toArray();
+        
+        if (changes.length === 0) {
+          clearInterval(checkInterval);
+          await this.transaction({ mode: 'rw' }, () => {
+            return this.table.update(channelId, { 
+              publishing: false,
+              publishing_draft: false
+            });
+          });
+        }
+      } catch (error) {
+        console.error('Error monitoring draft completion:', error);
+        clearInterval(checkInterval);
+      }
+    }, 2000); 
+    
+    setTimeout(() => {
+      clearInterval(checkInterval);
+    }, 300000); 
+  },
+
   deploy(id) {
     const change = new DeployedChange({
       key: id,
diff --git a/contentcuration/contentcuration/frontend/shared/strings/communityChannelsStrings.js b/contentcuration/contentcuration/frontend/shared/strings/communityChannelsStrings.js
index 489af9eb43..5a63754ef8 100644
--- a/contentcuration/contentcuration/frontend/shared/strings/communityChannelsStrings.js
+++ b/contentcuration/contentcuration/frontend/shared/strings/communityChannelsStrings.js
@@ -1,3 +1,18 @@
 import { createTranslator } from 'shared/i18n';
 
-export const communityChannelsStrings = createTranslator('CommunityChannelsStrings', {});
+export const communityChannelsStrings = createTranslator('CommunityChannelsStrings', {
+  // Core publishing actions
+  publish: 'Publish',
+  saveDraft: 'Save draft',
+  
+  // Publishing modes
+  mode: 'Mode',
+  live: 'Live',
+  draft: 'Draft',
+  
+  // Form labels
+  versionNotes: 'Version notes',
+  
+  // Actions
+  cancel: 'Cancel',
+});

From cf1a7898dfabbbe7e57421e5d8aa6016aeb1f85a Mon Sep 17 00:00:00 2001
From: taoerman <qiliu0523@gmail.com>
Date: Tue, 12 Aug 2025 12:10:30 -0700
Subject: [PATCH 10/17] fix code

---
 .../sidePanels/PublishSidePanel.vue           | 335 ++++++++++++------
 .../frontend/shared/data/resources.js         |  36 +-
 .../strings/communityChannelsStrings.js       |  63 +++-
 3 files changed, 289 insertions(+), 145 deletions(-)

diff --git a/contentcuration/contentcuration/frontend/channelEdit/components/sidePanels/PublishSidePanel.vue b/contentcuration/contentcuration/frontend/channelEdit/components/sidePanels/PublishSidePanel.vue
index f31aac212c..d1a8ce1926 100644
--- a/contentcuration/contentcuration/frontend/channelEdit/components/sidePanels/PublishSidePanel.vue
+++ b/contentcuration/contentcuration/frontend/channelEdit/components/sidePanels/PublishSidePanel.vue
@@ -2,20 +2,22 @@
   <div>
     <SidePanelModal
       alignment="right"
-      :ariaLabel="$tr('publishPanelAria')"
-      @keyup.esc="onClose"
+      sidePanelWidth="700px"
+      closeButtonIconType="close"
       @closePanel="onClose"
     >
       <template #header>
-        <h2 style="margin: 0">{{ getPanelTitle() }}</h2>
+        <h1 style="margin: 0">{{ getPanelTitle() }}</h1>
       </template>
 
       <template #default>
         <div class="form-section">
-          <VRadioGroup v-model="mode">
-            <VRadio
-              :label="$tr('modeLive')"
-              value="live"
+                    <KRadioButtonGroup>
+            <KRadioButton
+              :label="modeLive$()"
+              :buttonValue="'live'"
+              :currentValue="mode"
+              @input="mode = 'live'"
             />
             <div class="radio-description">{{ getLiveModeDescription() }}</div>
             
@@ -23,46 +25,58 @@
             <div v-if="mode === 'live'" class="live-mode-content" style="margin-left: 24px; margin-top: 16px;">
               <div class="info-section">
                 <VIconWrapper class="info-icon">info</VIconWrapper>
-                <span>{{ $tr('publishingInfo', { version: currentChannel.version, time: formattedPublishTime }) }}</span>
+                <span>{{ publishingInfo$({ version: currentChannel.version, time: formattedPublishTime }) }}</span>
               </div>
               
-                                            <div class="form-section" style="width: 100%; max-width: 100%;">
-                  <div class="textarea-container">
-                    <label class="label">{{ $tr('versionNotesLabel') }}</label>
-                    <textarea
-                      v-model="version_notes"
-                      :rows="4"
-                      :maxlength="30"
-                      class="custom-textarea"
-                      :placeholder="$tr('versionNotesLabel')"
-                    ></textarea>
-                    <div class="char-counter">{{ version_notes.length }} / 30</div>
-                  </div>
-                </div>
+              <div class="form-section">
+                <KTextbox
+                  v-model="version_notes"
+                  :label="versionNotesLabel$()"
+                  :invalid="version_notes.length > 250"
+                  :invalidText="maxLengthError$()"
+                  :showInvalidText="version_notes.length > 250"
+                  textArea
+                  :maxlength="250"
+                />
+              </div>
+              
+              <!-- Language selector -->
+              <div v-if="showLanguageDropdown" class="form-section">
+                <KSelect
+                  v-model="language"
+                  :label="languageLabel$()"
+                  :invalid="showLanguageInvalidText"
+                  :invalidText="languageRequiredMessage$()"
+                  :options="languages"
+                  @change="onLanguageChange"
+                />
+              </div>
               
               <div v-if="incompleteResourcesCount > 0" class="form-section warning-section">
                 <div class="warning-content">
                   <VIconWrapper class="warning-icon">warning</VIconWrapper>
                   <div class="warning-text">
-                    <div class="warning-title">{{ $tr('incompleteResourcesWarning', { count: incompleteResourcesCount }) }}</div>
-                    <div class="warning-description">{{ $tr('incompleteResourcesDescription') }}</div>
+                    <div class="warning-title">{{ incompleteResourcesWarning$({ count: incompleteResourcesCount }) }}</div>
+                    <div class="warning-description">{{ incompleteResourcesDescription$() }}</div>
                   </div>
                 </div>
               </div>
             </div>
             
-            <VRadio
-              :label="$tr('modeDraft')"
-              value="draft"
+            <KRadioButton
+              :label="modeDraft$()"
+              :buttonValue="'draft'"
+              :currentValue="mode"
+              @input="mode = 'draft'"
             />
-            <div class="radio-description">{{ $tr('modeDraftDescription') }}</div>
-          </VRadioGroup>
+            <div class="radio-description">{{ modeDraftDescription$() }}</div>
+          </KRadioButtonGroup>
         </div>
       </template>
 
       <template #bottomNavigation>
         <div class="footer">
-          <VBtn flat @click="onClose">{{ $tr('cancel') }}</VBtn>
+          <VBtn flat @click="onClose">{{ cancel$() }}</VBtn>
           <VBtn
             color="primary"
             :disabled="submitting"
@@ -77,37 +91,67 @@
 </template>
 
 <script>
+import { ref, computed, getCurrentInstance, watch, onMounted } from 'vue';
 import SidePanelModal from 'shared/views/SidePanelModal';
 import VIconWrapper from 'shared/views/VIconWrapper';
+import KRadioButtonGroup from 'kolibri-design-system/lib/KRadioButtonGroup';
+import KRadioButton from 'kolibri-design-system/lib/KRadioButton';
+import KTextbox from 'kolibri-design-system/lib/KTextbox';
+import KSelect from 'kolibri-design-system/lib/KSelect';
 import { Channel } from 'shared/data/resources';
 import { forceServerSync } from 'shared/data/serverSync';
 import { communityChannelsStrings } from 'shared/strings/communityChannelsStrings';
-
-import { mapGetters } from 'vuex';
+import { LanguagesList } from 'shared/leUtils/Languages';
 
 export default {
   name: 'PublishSidePanel',
   components: { 
     SidePanelModal,
     VIconWrapper,
+    KRadioButtonGroup,
+    KRadioButton,
+    KTextbox,
+    KSelect,
   },
   props: {
     open: { type: Boolean, required: true },
     channelId: { type: String, required: true },
   },
   emits: ['close', 'submitted'],
-  data() {
-    return {
-      mode: 'live',
-      version_notes: '',
-      submitting: false,
-    };
-  },
-  computed: {
-    ...mapGetters('currentChannel', ['currentChannel']),
-    ...mapGetters('contentNode', ['getContentNode']),
-    formattedPublishTime() {
-      if (!this.currentChannel) return '';
+  setup(props, { emit }) {
+    const mode = ref('live');
+    const version_notes = ref('');
+    const submitting = ref(false);
+    const language = ref({});
+    const showLanguageInvalidText = ref(false);
+
+    const instance = getCurrentInstance();
+    const store = instance.proxy.$store;
+
+    const {
+      publishToLibrary$,
+      publishChannel$,
+      publishLive$,
+      saveDraft$,
+      modeLive$,
+      modeDraft$,
+      versionNotesLabel$,
+      modeLiveDescription$,
+      modeDraftDescription$,
+      publishingInfo$,
+      incompleteResourcesWarning$,
+      incompleteResourcesDescription$,
+      maxLengthError$,
+      cancel$,
+      languageLabel$,
+      languageRequiredMessage$,
+    } = communityChannelsStrings;
+
+    const currentChannel = computed(() => store.getters['currentChannel/currentChannel']);
+    const getContentNode = computed(() => store.getters['contentNode/getContentNode']);
+
+    const formattedPublishTime = computed(() => {
+      if (!currentChannel.value) return '';
       const now = new Date();
       const timeString = now.toLocaleTimeString('en-US', { 
         hour: 'numeric', 
@@ -120,64 +164,148 @@ export default {
         year: 'numeric' 
       });
       return `${timeString} - ${dateString}`;
-    },
-    incompleteResourcesCount() {
-      if (!this.currentChannel) return 0;
-      const rootNode = this.getContentNode(this.currentChannel.root_id);
+    });
+
+    const incompleteResourcesCount = computed(() => {
+      if (!currentChannel.value) return 0;
+      const rootNode = getContentNode.value(currentChannel.value.root_id);
       return rootNode ? rootNode.error_count || 0 : 0;
-    },
-  },
-  methods: {
-    onClose() {
-      if (!this.submitting) this.$emit('close');
-    },
-    async submit() {
+    });
+
+
+
+    const showLanguageDropdown = computed(() => {
+      return mode.value === 'live';
+    });
+
+    const languages = computed(() => {
+      return filterLanguages(() => true);
+    });
+
+    const isLanguageValid = computed(() => {
+      return Object.keys(language.value).length > 0;
+    });
+
+    watch(currentChannel, (newChannel) => {
+      if (newChannel) {
+        initializeLanguage();
+      }
+    }, { immediate: true });
+
+    onMounted(() => {
+      initializeLanguage();
+    });
+
+    const onClose = () => {
+      if (!submitting.value) emit('close');
+    };
+
+    const submit = async () => {
       try {
-        this.submitting = true;
-        if (this.mode === 'draft') {
-          await Channel.publishDraft(this.currentChannel.id, { use_staging_tree: false });
+        submitting.value = true;
+        if (mode.value === 'draft') {
+          await Channel.publishDraft(currentChannel.value.id, { use_staging_tree: false });
           await forceServerSync();
-          this.$emit('submitted');
-          this.$emit('close');
+          emit('submitted');
+          emit('close');
         } else {
-          await Channel.publish(this.channelId, {
-            version_notes: this.version_notes,
-          });
-          this.$emit('submitted');
-          this.$emit('close');
+          if (language.value && language.value.value && language.value.value !== currentChannel.value?.language) {
+            await store.dispatch('channel/updateChannel', {
+              id: currentChannel.value.id,
+              language: language.value.value,
+            });
+          }
+          
+          await Channel.publish(props.channelId, version_notes.value);
+          
+          emit('submitted');
+          emit('close');
         }
       } catch (error) {
-        this.$store.dispatch('shared/handleAxiosError', error);
+        store.dispatch('shared/handleAxiosError', error);
       } finally {
-        this.submitting = false;
+        submitting.value = false;
       }
-    },
-    getPanelTitle() {
-      return this.mode === 'draft' ? this.$tr('publishToLibrary') : this.$tr('publishChannel');
-    },
-    getLiveModeDescription() {
-      return this.$tr('modeLiveDescription');
-    },
-    getButtonText() {
-      return this.mode === 'draft' ? this.$tr('saveDraft') : this.$tr('publishLive');
-    },
-  },
-  $trs: {
-    publishToLibrary: 'Publish to library',
-    publishChannel: 'Publish channel',
-    publishPanelAria: 'Publish channel side panel',
-    publishLive: 'PUBLISH',
-    saveDraft: 'SAVE DRAFT',
-    modeLive: 'Live',
-    modeDraft: 'Draft (staging)',
-    versionNotesLabel: 'Describe what\'s new in this channel version',
-    cancel: 'CANCEL',
-    modeLiveDescription: 'This edition will be accessible to the public through the Kolibri public library.',
-    modeDraftDescription: 'Your channel will be saved as a draft, allowing you to review or conduct quality checks without altering the published version on Kolibri public library.',
-    publishingInfo: 'You\'re publishing: Version {version} ({time})',
-    incompleteResourcesWarning: '{count} incomplete resources.',
-    incompleteResourcesDescription: 'Incomplete resources will not be published and made available for download in Kolibri. Click \'Publish\' to confirm that you would like to publish anyway.',
-    maxLengthError: 'Maximum 30 characters allowed',
+    };
+
+    const getPanelTitle = () => {
+      return mode.value === 'draft' ? publishToLibrary$() : publishChannel$();
+    };
+
+    const getLiveModeDescription = () => {
+      return modeLiveDescription$();
+    };
+
+    const getButtonText = () => {
+      return mode.value === 'draft' ? saveDraft$() : publishLive$();
+    };
+
+    const onLanguageChange = () => {
+      showLanguageInvalidText.value = !isLanguageValid.value;
+    };
+
+    const filterLanguages = (filterFn) => {
+      return LanguagesList.filter(filterFn).map(l => ({
+        value: l.id,
+        label: l.native_name,
+      }));
+    };
+
+    const initializeLanguage = () => {
+      if (currentChannel.value?.language) {
+        const channelLang = filterLanguages(l => l.id === currentChannel.value.language)[0];
+        if (channelLang) {
+          language.value = channelLang;
+        } else {
+          language.value = {
+            value: currentChannel.value.language,
+            label: currentChannel.value.language
+          };
+        }
+      } else {
+        language.value = { value: 'en', label: 'English' };
+      }
+    };
+
+    return {
+      mode,
+      version_notes,
+      submitting,
+      language,
+      showLanguageInvalidText,
+      
+      currentChannel,
+      getContentNode,
+      formattedPublishTime,
+      incompleteResourcesCount,
+      showLanguageDropdown,
+      languages,
+      isLanguageValid,
+      
+      publishToLibrary$,
+      publishChannel$,
+      publishLive$,
+      saveDraft$,
+      modeLive$,
+      modeDraft$,
+      versionNotesLabel$,
+      modeLiveDescription$,
+      modeDraftDescription$,
+      publishingInfo$,
+      incompleteResourcesWarning$,
+      incompleteResourcesDescription$,
+      maxLengthError$,
+      cancel$,
+      languageLabel$,
+      languageRequiredMessage$,
+      
+      onClose,
+      submit,
+      getPanelTitle,
+      getLiveModeDescription,
+      getButtonText,
+      onLanguageChange,
+    };
   },
 };
 </script>
@@ -243,25 +371,4 @@ export default {
   color: #6c757d;
   line-height: 1.4;
 }
-.textarea-container {
-  width: 100%;
-}
-.custom-textarea {
-  width: 100%;
-  min-height: 100px;
-  padding: 12px;
-  border: 1px solid #e0e0e0;
-  border-radius: 4px;
-  font-family: inherit;
-  font-size: 14px;
-  line-height: 1.5;
-  resize: vertical;
-  box-sizing: border-box;
-}
-.char-counter {
-  text-align: center;
-  color: #666;
-  font-size: 12px;
-  margin-top: 4px;
-}
 </style> 
\ No newline at end of file
diff --git a/contentcuration/contentcuration/frontend/shared/data/resources.js b/contentcuration/contentcuration/frontend/shared/data/resources.js
index 0b29a78fb2..829a61f558 100644
--- a/contentcuration/contentcuration/frontend/shared/data/resources.js
+++ b/contentcuration/contentcuration/frontend/shared/data/resources.js
@@ -1213,23 +1213,25 @@ export const Channel = new CreateModelResource({
     return this.transaction({ mode: 'rw' }, () => {
       return this.table.update(id, { publishing: true });
     }).then(() => {
-      const change = new PublishedChange({
-        key: id,
-        version_notes,
-        language: currentLanguage,
-        table: this.tableName,
-        source: CLIENTID,
-      });
-      return this.transaction({ mode: 'rw' }, CHANGES_TABLE, TABLE_NAMES.CONTENTNODE, () => {
-        return Promise.all([
-          this._saveAndQueueChange(change),
-          ContentNode.table.where({ channel_id: id }).modify({
-            changed: false,
-            published: true,
-            has_new_descendants: false,
-            has_updated_descendants: false,
-          }),
-        ]);
+      return this.table.get(id).then(channel => {
+        const change = new PublishedChange({
+          key: id,
+          version_notes,
+          language: channel.language || currentLanguage,
+          table: this.tableName,
+          source: CLIENTID,
+        });
+        return this.transaction({ mode: 'rw' }, CHANGES_TABLE, TABLE_NAMES.CONTENTNODE, () => {
+          return Promise.all([
+            this._saveAndQueueChange(change),
+            ContentNode.table.where({ channel_id: id }).modify({
+              changed: false,
+              published: true,
+              has_new_descendants: false,
+              has_updated_descendants: false,
+            }),
+          ]);
+        });
       });
     });
   },
diff --git a/contentcuration/contentcuration/frontend/shared/strings/communityChannelsStrings.js b/contentcuration/contentcuration/frontend/shared/strings/communityChannelsStrings.js
index 5a63754ef8..e7ce1d374e 100644
--- a/contentcuration/contentcuration/frontend/shared/strings/communityChannelsStrings.js
+++ b/contentcuration/contentcuration/frontend/shared/strings/communityChannelsStrings.js
@@ -1,18 +1,53 @@
 import { createTranslator } from 'shared/i18n';
 
 export const communityChannelsStrings = createTranslator('CommunityChannelsStrings', {
-  // Core publishing actions
-  publish: 'Publish',
-  saveDraft: 'Save draft',
-  
-  // Publishing modes
-  mode: 'Mode',
-  live: 'Live',
-  draft: 'Draft',
-  
-  // Form labels
-  versionNotes: 'Version notes',
-  
-  // Actions
-  cancel: 'Cancel',
+  // Publishing panel strings
+  publishToLibrary: {
+    message: 'Publish to library',
+  },
+  publishChannel: {
+    message: 'Publish channel',
+  },
+  publishLive: {
+    message: 'PUBLISH',
+  },
+  saveDraft: {
+    message: 'SAVE DRAFT',
+  },
+  modeLive: {
+    message: 'Live',
+  },
+  modeDraft: {
+    message: 'Draft (staging)',
+  },
+  versionNotesLabel: {
+    message: 'Describe what\'s new in this channel version',
+  },
+  modeLiveDescription: {
+    message: 'This edition will be accessible to the public through the Kolibri public library.',
+  },
+  modeDraftDescription: {
+    message: 'Your channel will be saved as a draft, allowing you to review or conduct quality checks without altering the published version on Kolibri public library.',
+  },
+  publishingInfo: {
+    message: 'You\'re publishing: Version {version} ({time})',
+  },
+  incompleteResourcesWarning: {
+    message: '{count} incomplete resources.',
+  },
+  incompleteResourcesDescription: {
+    message: 'Incomplete resources will not be published and made available for download in Kolibri. Click \'Publish\' to confirm that you would like to publish anyway.',
+  },
+  maxLengthError: {
+    message: 'Maximum 250 characters allowed',
+  },
+  cancel: {
+    message: 'CANCEL',
+  },
+  languageLabel: {
+    message: 'Language',
+  },
+  languageRequiredMessage: {
+    message: 'Language is required',
+  },
 });

From c234fc33ff61d57abe37eff1515bb6f841466847 Mon Sep 17 00:00:00 2001
From: taoerman <qiliu0523@gmail.com>
Date: Wed, 13 Aug 2025 21:00:05 -0700
Subject: [PATCH 11/17] fix code according to comments

---
 .../sidePanels/PublishSidePanel.vue           | 696 ++++++++++--------
 .../views/TreeView/TreeViewBase.vue           |  13 +-
 .../views/progress/ProgressModal.vue          |  30 +-
 .../vuex/currentChannel/actions.js            |   2 +-
 .../frontend/shared/data/resources.js         |  80 +-
 .../strings/communityChannelsStrings.js       |  13 +-
 6 files changed, 466 insertions(+), 368 deletions(-)

diff --git a/contentcuration/contentcuration/frontend/channelEdit/components/sidePanels/PublishSidePanel.vue b/contentcuration/contentcuration/frontend/channelEdit/components/sidePanels/PublishSidePanel.vue
index f10493ea3a..a18d12b633 100644
--- a/contentcuration/contentcuration/frontend/channelEdit/components/sidePanels/PublishSidePanel.vue
+++ b/contentcuration/contentcuration/frontend/channelEdit/components/sidePanels/PublishSidePanel.vue
@@ -1,4 +1,5 @@
 <template>
+
   <div>
     <SidePanelModal
       alignment="right"
@@ -15,33 +16,61 @@
           <KRadioButtonGroup>
             <KRadioButton
               :label="modeLive$()"
-              :buttonValue="'live'"
+              :buttonValue="PublishModes.LIVE"
               :currentValue="mode"
-              @input="mode = 'live'"
+              @input="mode = PublishModes.LIVE"
             />
-            <div class="radio-description">{{ getLiveModeDescription() }}</div>
-            
+            <div
+              class="radio-description"
+              :style="{ color: $themeTokens.annotation }"
+            >
+              {{ modeLiveDescription$() }}
+            </div>
+
             <!-- Live mode content nested under the radio button -->
-            <div v-if="mode === 'live'" class="live-mode-content" style="margin-left: 24px; margin-top: 16px;">
-              <div class="info-section">
-                <VIconWrapper class="info-icon">info</VIconWrapper>
-                <span>{{ publishingInfo$({ version: currentChannel.version, time: formattedPublishTime }) }}</span>
+            <div
+              v-if="mode === PublishModes.LIVE"
+              class="live-mode-content"
+              style="margin-top: 16px; margin-left: 24px"
+            >
+              <div
+                class="info-section"
+                :style="{
+                  backgroundColor: $themeTokens.surface,
+                  border: `1px solid ${$themeTokens.outline}`,
+                }"
+              >
+                <KIcon
+                  icon="info"
+                  :style="{ color: $themeTokens.primary }"
+                />
+                <span>{{
+                  publishingInfo$({
+                    version: currentChannel.version + 1,
+                    time: formattedPublishTime,
+                  })
+                }}</span>
               </div>
-              
+
               <div class="form-section">
                 <KTextbox
                   v-model="version_notes"
                   :label="versionNotesLabel$()"
-                  :invalid="version_notes.length > 250"
-                  :invalidText="maxLengthError$()"
-                  :showInvalidText="version_notes.length > 250"
+                  :invalid="version_notes.length === 0 || version_notes.length > 250"
+                  :invalidText="
+                    version_notes.length === 0 ? 'Version notes are required' : maxLengthError$()
+                  "
+                  :showInvalidText="version_notes.length === 0 || version_notes.length > 250"
                   textArea
                   :maxlength="250"
                 />
               </div>
-              
+
               <!-- Language selector -->
-              <div v-if="showLanguageDropdown" class="form-section">
+              <div
+                v-if="showLanguageDropdown"
+                class="form-section"
+              >
                 <KSelect
                   v-model="language"
                   :label="languageLabel$()"
@@ -51,322 +80,401 @@
                   @change="onLanguageChange"
                 />
               </div>
-              
-              <div v-if="incompleteResourcesCount > 0" class="form-section warning-section">
-                <div class="warning-content">
-                  <VIconWrapper class="warning-icon">warning</VIconWrapper>
+
+              <div
+                v-if="incompleteResourcesCount > 0"
+                class="form-section warning-section"
+              >
+                <div
+                  class="warning-content"
+                  :style="{
+                    backgroundColor: $themeTokens.warning,
+                    border: `1px solid ${$themeTokens.warningOutline}`,
+                  }"
+                >
+                  <KIcon
+                    icon="warning"
+                    :style="{ color: $themeTokens.warningText }"
+                  />
                   <div class="warning-text">
-                    <div class="warning-title">{{ incompleteResourcesWarning$({ count: incompleteResourcesCount }) }}</div>
-                    <div class="warning-description">{{ incompleteResourcesDescription$() }}</div>
+                    <div
+                      class="warning-title"
+                      :style="{ color: $themeTokens.error }"
+                    >
+                      {{ incompleteResourcesWarning$({ count: incompleteResourcesCount }) }}
+                    </div>
+                    <div
+                      class="warning-description"
+                      :style="{ color: $themeTokens.annotation }"
+                    >
+                      {{ incompleteResourcesDescription$() }}
+                    </div>
                   </div>
                 </div>
               </div>
             </div>
-            
+
             <KRadioButton
               :label="modeDraft$()"
-              :buttonValue="'draft'"
+              :buttonValue="PublishModes.DRAFT"
               :currentValue="mode"
-              @input="mode = 'draft'"
+              @input="mode = PublishModes.DRAFT"
             />
-            <div class="radio-description">{{ modeDraftDescription$() }}</div>
+            <div
+              class="radio-description"
+              :style="{ color: $themeTokens.annotation }"
+            >
+              {{ modeDraftDescription$() }}
+            </div>
           </KRadioButtonGroup>
         </div>
       </template>
 
       <template #bottomNavigation>
         <div class="footer">
-          <VBtn flat @click="onClose">{{ cancel$() }}</VBtn>
-          <VBtn
+          <KButton
+            flat
+            @click="onClose"
+          >
+            {{ cancel$() }}
+          </KButton>
+          <KButton
             color="primary"
-            :disabled="submitting"
+            :disabled="submitting || !isFormValid"
             @click="submit"
           >
-            {{ getButtonText() }}
-          </VBtn>
+            {{ buttonText }}
+          </KButton>
         </div>
       </template>
     </SidePanelModal>
   </div>
+
 </template>
 
+
 <script>
-import { ref, computed, getCurrentInstance, watch, onMounted } from 'vue';
-import SidePanelModal from 'shared/views/SidePanelModal';
-import VIconWrapper from 'shared/views/VIconWrapper';
-import KRadioButtonGroup from 'kolibri-design-system/lib/KRadioButtonGroup';
-import KRadioButton from 'kolibri-design-system/lib/KRadioButton';
-import KTextbox from 'kolibri-design-system/lib/KTextbox';
-import KSelect from 'kolibri-design-system/lib/KSelect';
-import { Channel } from 'shared/data/resources';
-import { forceServerSync } from 'shared/data/serverSync';
-import { communityChannelsStrings } from 'shared/strings/communityChannelsStrings';
-import { LanguagesList } from 'shared/leUtils/Languages';
-
-export default {
-  name: 'PublishSidePanel',
-  components: { 
-    SidePanelModal,
-    VIconWrapper,
-    KRadioButtonGroup,
-    KRadioButton,
-    KTextbox,
-    KSelect,
-  },
-  props: {
-    open: { type: Boolean, required: true },
-    channelId: { type: String, required: true },
-  },
-  emits: ['close', 'submitted'],
-  setup(props, { emit }) {
-    const mode = ref('live');
-    const version_notes = ref('');
-    const submitting = ref(false);
-    const language = ref({});
-    const showLanguageInvalidText = ref(false);
-
-    const instance = getCurrentInstance();
-    const store = instance.proxy.$store;
-
-    const {
-      publishToLibrary$,
-      publishChannel$,
-      publishLive$,
-      saveDraft$,
-      modeLive$,
-      modeDraft$,
-      versionNotesLabel$,
-      modeLiveDescription$,
-      modeDraftDescription$,
-      publishingInfo$,
-      incompleteResourcesWarning$,
-      incompleteResourcesDescription$,
-      maxLengthError$,
-      cancel$,
-      languageLabel$,
-      languageRequiredMessage$,
-    } = communityChannelsStrings;
-
-    const currentChannel = computed(() => store.getters['currentChannel/currentChannel']);
-    const getContentNode = computed(() => store.getters['contentNode/getContentNode']);
-
-    const formattedPublishTime = computed(() => {
-      if (!currentChannel.value) return '';
-      const now = new Date();
-      const timeString = now.toLocaleTimeString('en-US', { 
-        hour: 'numeric', 
-        minute: '2-digit',
-        hour12: true 
+
+  import { ref, computed, getCurrentInstance, watch, onMounted } from 'vue';
+  import SidePanelModal from 'shared/views/SidePanelModal';
+  import { Channel } from 'shared/data/resources';
+  import { forceServerSync } from 'shared/data/serverSync';
+  import { communityChannelsStrings } from 'shared/strings/communityChannelsStrings';
+  import { LanguagesList } from 'shared/leUtils/Languages';
+
+  export default {
+    name: 'PublishSidePanel',
+    components: {
+      SidePanelModal,
+    },
+    setup(props, { emit }) {
+      const PublishModes = {
+        LIVE: 'live',
+        DRAFT: 'draft',
+      };
+
+      const mode = ref(PublishModes.LIVE);
+      const version_notes = ref('');
+      const submitting = ref(false);
+      const language = ref({});
+      const showLanguageInvalidText = ref(false);
+
+      const instance = getCurrentInstance();
+      const store = instance.proxy.$store;
+
+      const {
+        publishChannel$,
+        publishLive$,
+        saveDraft$,
+        modeLive$,
+        modeDraft$,
+        versionNotesLabel$,
+        modeLiveDescription$,
+        modeDraftDescription$,
+        publishingInfo$,
+        incompleteResourcesWarning$,
+        incompleteResourcesDescription$,
+        maxLengthError$,
+        cancel$,
+        languageLabel$,
+        languageRequiredMessage$,
+      } = communityChannelsStrings;
+
+      const currentChannel = computed(() => store.getters['currentChannel/currentChannel']);
+      const getContentNode = computed(() => store.getters['contentNode/getContentNode']);
+      const areAllChangesSaved = computed(() => store.getters['areAllChangesSaved']);
+
+      const formattedPublishTime = computed(() => {
+        if (!currentChannel.value) return '';
+        const now = new Date();
+        const timeString = now.toLocaleTimeString('en-US', {
+          hour: 'numeric',
+          minute: '2-digit',
+          hour12: true,
+        });
+        const dateString = now.toLocaleDateString('en-US', {
+          month: 'numeric',
+          day: 'numeric',
+          year: 'numeric',
+        });
+        return `${timeString} - ${dateString}`;
       });
-      const dateString = now.toLocaleDateString('en-US', { 
-        month: 'numeric', 
-        day: 'numeric', 
-        year: 'numeric' 
+
+      const incompleteResourcesCount = computed(() => {
+        if (!currentChannel.value) return 0;
+        const rootNode = getContentNode.value(currentChannel.value.root_id);
+        return rootNode?.error_count || 0;
       });
-      return `${timeString} - ${dateString}`;
-    });
 
-    const incompleteResourcesCount = computed(() => {
-      if (!currentChannel.value) return 0;
-      const rootNode = getContentNode.value(currentChannel.value.root_id);
-      return rootNode ? rootNode.error_count || 0 : 0;
-    });
+      const showLanguageDropdown = computed(() => {
+        if (!currentChannel.value) return false;
 
-    const showLanguageDropdown = computed(() => {
-      return mode.value === 'live';
-    });
+        const isCheffedChannel = Boolean(currentChannel.value.ricecooker_version);
+        const isPrivateChannel = currentChannel.value.public === false;
+        const isFirstPublish = currentChannel.value.version === 0;
+        const channelLanguageExists = currentChannel.value.language;
 
-    const languages = computed(() => {
-      return filterLanguages(() => true);
-    });
+        return ((isCheffedChannel || isPrivateChannel) && isFirstPublish) || !channelLanguageExists;
+      });
 
-    const isLanguageValid = computed(() => {
-      return Object.keys(language.value).length > 0;
-    });
+      const languages = computed(() => {
+        if (!currentChannel.value) return [];
+        return filterLanguages(l => currentChannel.value.channelLanguages?.includes(l.id));
+      });
 
-    watch(currentChannel, (newChannel) => {
-      if (newChannel) {
-        initializeLanguage();
-      }
-    }, { immediate: true });
-
-    onMounted(() => {
-      initializeLanguage();
-    });
-
-    const onClose = () => {
-      if (!submitting.value) emit('close');
-    };
-
-    const submit = async () => {
-      try {
-        submitting.value = true;
-        if (mode.value === 'draft') {
-          await Channel.publishDraft(currentChannel.value.id, { use_staging_tree: false });
-          await forceServerSync();
-          emit('submitted');
-          emit('close');
+      const isLanguageValid = computed(() => {
+        return Object.keys(language.value).length > 0;
+      });
+
+      const defaultLanguage = computed(() => {
+        if (!currentChannel.value?.language) return {};
+        const channelLang = filterLanguages(l => l.id === currentChannel.value.language)[0];
+        return languages.value.some(lang => lang.value === channelLang?.value) ? channelLang : {};
+      });
+
+      // Validate the version and language for live mode
+      const isFormValid = computed(() => {
+        if (mode.value === PublishModes.LIVE) {
+          const versionNotesValid =
+            version_notes.value.length > 0 && version_notes.value.length <= 250;
+          const languageValid = showLanguageDropdown.value ? isLanguageValid.value : true;
+          return versionNotesValid && languageValid;
+        }
+        return true;
+      });
+
+      const buttonText = computed(() => {
+        return mode.value === PublishModes.DRAFT ? saveDraft$() : publishLive$();
+      });
+
+      const filterLanguages = filterFn => {
+        return LanguagesList.filter(filterFn).map(l => ({
+          value: l.id,
+          label: l.native_name,
+        }));
+      };
+
+      const initializeLanguage = () => {
+        if (currentChannel.value?.language) {
+          const channelLang = defaultLanguage.value;
+          if (Object.keys(channelLang).length > 0) {
+            language.value = channelLang;
+          } else {
+            // Fallback to channel language even if not in available options
+            language.value = {
+              value: currentChannel.value.language,
+              label: currentChannel.value.language,
+            };
+          }
         } else {
-          if (language.value && language.value.value && language.value.value !== currentChannel.value?.language) {
-            await store.dispatch('channel/updateChannel', {
-              id: currentChannel.value.id,
-              language: language.value.value,
-            });
+          language.value = {};
+        }
+
+        validateSelectedLanguage();
+      };
+
+      // Validate the selected language when it changes
+      const validateSelectedLanguage = () => {
+        if (Object.keys(language.value).length > 0 && languages.value.length > 0) {
+          const isValidLanguage = languages.value.some(lang => lang.value === language.value.value);
+          if (!isValidLanguage) {
+            language.value = {};
           }
-          
-          await Channel.publish(props.channelId, version_notes.value);
-          
-          emit('submitted');
-          emit('close');
         }
-      } catch (error) {
-        store.dispatch('shared/handleAxiosError', error);
-      } finally {
-        submitting.value = false;
-      }
-    };
-
-    const getPanelTitle = () => {
-      return mode.value === 'draft' ? publishToLibrary$() : publishChannel$();
-    };
-
-    const getLiveModeDescription = () => {
-      return modeLiveDescription$();
-    };
-
-    const getButtonText = () => {
-      return mode.value === 'draft' ? saveDraft$() : publishLive$();
-    };
-
-    const onLanguageChange = () => {
-      showLanguageInvalidText.value = !isLanguageValid.value;
-    };
-
-    const filterLanguages = (filterFn) => {
-      return LanguagesList.filter(filterFn).map(l => ({
-        value: l.id,
-        label: l.native_name,
-      }));
-    };
-
-    const initializeLanguage = () => {
-      if (currentChannel.value?.language) {
-        const channelLang = filterLanguages(l => l.id === currentChannel.value.language)[0];
-        if (channelLang) {
-          language.value = channelLang;
-        } else {
-          language.value = {
-            value: currentChannel.value.language,
-            label: currentChannel.value.language
-          };
+      };
+
+      watch(
+        currentChannel,
+        newChannel => {
+          if (newChannel) {
+            initializeLanguage();
+          }
+        },
+        { immediate: true },
+      );
+
+      onMounted(() => {
+        initializeLanguage();
+      });
+
+      const onClose = () => {
+        if (!submitting.value) emit('close');
+      };
+
+      const submit = async () => {
+        // Prevent submission if form is invalid
+        if (!isFormValid.value) {
+          return;
         }
-      } else {
-        language.value = { value: 'en', label: 'English' };
-      }
-    };
-
-    return {
-      mode,
-      version_notes,
-      submitting,
-      language,
-      showLanguageInvalidText,
-      
-      currentChannel,
-      getContentNode,
-      formattedPublishTime,
-      incompleteResourcesCount,
-      showLanguageDropdown,
-      languages,
-      isLanguageValid,
-      
-      publishToLibrary$,
-      publishChannel$,
-      publishLive$,
-      saveDraft$,
-      modeLive$,
-      modeDraft$,
-      versionNotesLabel$,
-      modeLiveDescription$,
-      modeDraftDescription$,
-      publishingInfo$,
-      incompleteResourcesWarning$,
-      incompleteResourcesDescription$,
-      maxLengthError$,
-      cancel$,
-      languageLabel$,
-      languageRequiredMessage$,
-      
-      onClose,
-      submit,
-      getPanelTitle,
-      getLiveModeDescription,
-      getButtonText,
-      onLanguageChange,
-    };
-  },
-};
+
+        try {
+          submitting.value = true;
+
+          // Check if we need to sync unsaved changes for both modes
+          if (!areAllChangesSaved.value) {
+            await forceServerSync();
+          }
+
+          if (mode.value === PublishModes.DRAFT) {
+            await Channel.publishDraft(currentChannel.value.id, { use_staging_tree: false });
+            emit('submitted');
+            emit('close');
+          } else {
+            if (
+              language.value &&
+              language.value.value &&
+              language.value.value !== currentChannel.value?.language
+            ) {
+              await store.dispatch('channel/updateChannel', {
+                id: currentChannel.value.id,
+                language: language.value.value,
+              });
+            }
+
+            await Channel.publish(props.channelId, version_notes.value);
+
+            emit('submitted');
+            emit('close');
+          }
+        } catch (error) {
+          store.dispatch('shared/handleAxiosError', error);
+        } finally {
+          submitting.value = false;
+        }
+      };
+
+      const getPanelTitle = () => {
+        return publishChannel$();
+      };
+
+      const onLanguageChange = () => {
+        showLanguageInvalidText.value = !isLanguageValid.value;
+      };
+
+      return {
+        PublishModes,
+        mode,
+        version_notes,
+        submitting,
+        language,
+        showLanguageInvalidText,
+
+        currentChannel,
+        formattedPublishTime,
+        incompleteResourcesCount,
+        showLanguageDropdown,
+        languages,
+        isFormValid,
+        buttonText,
+
+        modeLive$,
+        modeDraft$,
+        versionNotesLabel$,
+        modeLiveDescription$,
+        modeDraftDescription$,
+        publishingInfo$,
+        incompleteResourcesWarning$,
+        incompleteResourcesDescription$,
+        maxLengthError$,
+        cancel$,
+        languageLabel$,
+        languageRequiredMessage$,
+
+        onClose,
+        submit,
+        getPanelTitle,
+        onLanguageChange,
+      };
+    },
+    props: {
+      channelId: { type: String, required: true },
+    },
+    emits: ['close', 'submitted'],
+  };
+
 </script>
 
+
 <style scoped>
-.form-section { 
-  margin: 16px 0; 
-}
-.label { 
-  display: block; 
-  font-weight: 600; 
-  margin-bottom: 6px; 
-}
-.footer { 
-  display: flex; 
-  justify-content: flex-end; 
-  gap: 8px; 
-  padding: 12px 0; 
-}
-.radio-description {
-  margin-left: 24px;
-  margin-bottom: 16px;
-  color: rgba(0, 0, 0, 0.6);
-  font-size: 14px;
-}
-.info-section {
-  display: flex;
-  align-items: center;
-  gap: 8px;
-  padding: 12px;
-  background-color: #f5f5f5;
-  border-radius: 4px;
-}
-.info-icon {
-  color: #1976d2;
-}
-.warning-section {
-  margin-top: 16px;
-}
-.warning-content {
-  display: flex;
-  align-items: flex-start;
-  gap: 12px;
-  padding: 16px;
-  background-color: #fff3cd;
-  border: 1px solid #ffeaa7;
-  border-radius: 8px;
-}
-.warning-icon {
-  color: #f39c12;
-  flex-shrink: 0;
-  margin-top: 2px;
-}
-.warning-text {
-  flex: 1;
-}
-.warning-title {
-  font-weight: bold;
-  color: #e74c3c;
-  margin-bottom: 8px;
-}
-.warning-description {
-  color: #6c757d;
-  line-height: 1.4;
-}
-</style> 
\ No newline at end of file
+
+  .form-section {
+    margin: 16px 0;
+  }
+
+  .label {
+    display: block;
+    margin-bottom: 6px;
+    font-weight: 600;
+  }
+
+  .footer {
+    display: flex;
+    gap: 8px;
+    justify-content: flex-end;
+    padding: 12px 0;
+  }
+
+  .radio-description {
+    margin-bottom: 16px;
+    margin-left: 24px;
+  }
+
+  .info-section {
+    display: flex;
+    gap: 8px;
+    align-items: center;
+    padding: 12px;
+    border-radius: 4px;
+  }
+
+  .warning-section {
+    margin-top: 16px;
+  }
+
+  .warning-content {
+    display: flex;
+    gap: 12px;
+    align-items: flex-start;
+    padding: 16px;
+    border-radius: 8px;
+  }
+
+  .warning-icon {
+    flex-shrink: 0;
+    margin-top: 2px;
+  }
+
+  .warning-text {
+    flex: 1;
+  }
+
+  .warning-title {
+    margin-bottom: 8px;
+    font-weight: bold;
+  }
+
+  .warning-description {
+    line-height: 1.4;
+  }
+
+</style>
diff --git a/contentcuration/contentcuration/frontend/channelEdit/views/TreeView/TreeViewBase.vue b/contentcuration/contentcuration/frontend/channelEdit/views/TreeView/TreeViewBase.vue
index c6ada7182a..e001873b0c 100644
--- a/contentcuration/contentcuration/frontend/channelEdit/views/TreeView/TreeViewBase.vue
+++ b/contentcuration/contentcuration/frontend/channelEdit/views/TreeView/TreeViewBase.vue
@@ -209,7 +209,6 @@
 
     <PublishSidePanel
       v-if="showPublishSidePanel && currentChannel && currentChannel.id"
-      :open="showPublishSidePanel"
       :channelId="currentChannel.id"
       @close="showPublishSidePanel = false"
       @submitted="showPublishSidePanel = false"
@@ -320,6 +319,7 @@
   import QuickEditModal from '../../components/QuickEditModal';
   import SavingIndicator from '../../components/edit/SavingIndicator';
   import { DraggableRegions, DraggableUniverses, RouteNames } from '../../constants';
+  import PublishSidePanel from '../../components/sidePanels/PublishSidePanel';
   import MainNavigationDrawer from 'shared/views/MainNavigationDrawer';
   import ToolBar from 'shared/views/ToolBar';
   import ChannelTokenModal from 'shared/views/channel/ChannelTokenModal';
@@ -331,7 +331,6 @@
   import DraggableRegion from 'shared/views/draggable/DraggableRegion';
   import { DropEffect } from 'shared/mixins/draggable/constants';
   import DraggablePlaceholder from 'shared/views/draggable/DraggablePlaceholder';
-  import PublishSidePanel from '../../components/sidePanels/PublishSidePanel';
 
   export default {
     name: 'TreeViewBase',
@@ -394,11 +393,15 @@
         return Boolean(this.currentChannel.ricecooker_version);
       },
       isDraftPublishing() {
-        return this.currentChannel && this.currentChannel.publishing && this.currentChannel.publishing_draft;
+        return (
+          this.currentChannel &&
+          this.currentChannel.publishing &&
+          this.currentChannel.publishing_draft
+        );
       },
       disablePublish() {
         return (
-          (this.currentChannel.publishing && !this.currentChannel.publishing_draft) || 
+          (this.currentChannel.publishing && !this.currentChannel.publishing_draft) ||
           !this.isChanged ||
           !this.currentChannel.language ||
           (this.rootNode && !this.rootNode.resource_count)
@@ -509,8 +512,6 @@
         this.trackClickEvent('Delete channel');
       },
       publishChannel() {
-        console.log('publishChannel called, currentChannel:', this.currentChannel);
-        console.log('Setting showPublishSidePanel to true');
         this.showPublishSidePanel = true;
         this.trackClickEvent('Publish');
       },
diff --git a/contentcuration/contentcuration/frontend/channelEdit/views/progress/ProgressModal.vue b/contentcuration/contentcuration/frontend/channelEdit/views/progress/ProgressModal.vue
index 228e73935c..5d974561f2 100644
--- a/contentcuration/contentcuration/frontend/channelEdit/views/progress/ProgressModal.vue
+++ b/contentcuration/contentcuration/frontend/channelEdit/views/progress/ProgressModal.vue
@@ -43,12 +43,6 @@
       />
       <span>{{ $tr('draftHeader') }}</span>
     </div>
-    <div
-      v-else-if="showDraftSaved"
-      class="grey--text"
-    >
-      {{ $tr('draftSaved') }}
-    </div>
     <div
       v-else
       class="grey--text"
@@ -85,24 +79,21 @@
         // add condition so that publishing modal is only visible for users
         // who have channel publishing permissions
         if (this.canManage) {
-          return this.currentChannel && this.currentChannel.publishing && !this.currentChannel.publishing_draft;
+          return (
+            this.currentChannel &&
+            this.currentChannel.publishing &&
+            !this.currentChannel.publishing_draft
+          );
         }
         return false;
       },
       isPublishingDraft() {
         if (this.canManage) {
-          return this.currentChannel && this.currentChannel.publishing && this.currentChannel.publishing_draft;
-        }
-        return false;
-      },
-      showDraftSaved() {
-        if (this.canManage) {
-          return this.currentChannel && 
-                 !this.currentChannel.publishing && 
-                 !this.currentChannel.publishing_draft && 
-                 this.currentChannel.last_published &&
-                 !this.currentChannel.published &&
-                 !this.currentTask; 
+          return (
+            this.currentChannel &&
+            this.currentChannel.publishing &&
+            this.currentChannel.publishing_draft
+          );
         }
         return false;
       },
@@ -175,7 +166,6 @@
       defaultErrorText: 'Last attempt to publish failed',
       publishHeader: 'Publishing channel',
       draftHeader: 'Saving draft...',
-      draftSaved: 'Saved just now',
       lastPublished: 'Published {last_published}',
       unpublishedText: 'Unpublished',
       syncHeader: 'Syncing resources',
diff --git a/contentcuration/contentcuration/frontend/channelEdit/vuex/currentChannel/actions.js b/contentcuration/contentcuration/frontend/channelEdit/vuex/currentChannel/actions.js
index 33e084e453..7f63f8fbd7 100644
--- a/contentcuration/contentcuration/frontend/channelEdit/vuex/currentChannel/actions.js
+++ b/contentcuration/contentcuration/frontend/channelEdit/vuex/currentChannel/actions.js
@@ -56,7 +56,7 @@ export function publishChannel(context, version_notes) {
 }
 
 export function publishDraftChannel(context) {
-  return Channel.publishDraft(context.state.currentChannelId, {use_staging_tree: false});
+  return Channel.publishDraft(context.state.currentChannelId, { use_staging_tree: false });
 }
 
 export function publishStagingChannel(context) {
diff --git a/contentcuration/contentcuration/frontend/shared/data/resources.js b/contentcuration/contentcuration/frontend/shared/data/resources.js
index 829a61f558..fb0bacb400 100644
--- a/contentcuration/contentcuration/frontend/shared/data/resources.js
+++ b/contentcuration/contentcuration/frontend/shared/data/resources.js
@@ -1217,7 +1217,7 @@ export const Channel = new CreateModelResource({
         const change = new PublishedChange({
           key: id,
           version_notes,
-          language: channel.language || currentLanguage,
+          language: currentLanguage || channel.language,
           table: this.tableName,
           source: CLIENTID,
         });
@@ -1236,59 +1236,59 @@ export const Channel = new CreateModelResource({
     });
   },
 
-  publishDraft(id, opts={}) {
-    const {
-      use_staging_tree = false,
-    } = opts;
-  
+  publishDraft(id, opts = {}) {
+    const { use_staging_tree = false } = opts;
+
     return this.transaction({ mode: 'rw' }, () => {
-      return this.table.update(id, { 
+      return this.table.update(id, {
         publishing: true,
-        publishing_draft: true  
+        publishing_draft: true,
       });
-    }).then(() => {
-      const change = new PublishedNextChange({
-        key: id,
-        use_staging_tree,
-        table: this.tableName,
-        source: CLIENTID,
-      });
-      return this.transaction({ mode: 'rw' }, CHANGES_TABLE, () => {
-        return this._saveAndQueueChange(change);
+    })
+      .then(() => {
+        const change = new PublishedNextChange({
+          key: id,
+          use_staging_tree,
+          table: this.tableName,
+          source: CLIENTID,
+        });
+        return this.transaction({ mode: 'rw' }, CHANGES_TABLE, () => {
+          return this._saveAndQueueChange(change);
+        });
+      })
+      .then(() => {
+        this._monitorDraftCompletion(id);
+        return Promise.resolve();
       });
-    }).then(() => {
-      this._monitorDraftCompletion(id);
-      return Promise.resolve();
-    });
   },
 
   _monitorDraftCompletion(channelId) {
-    const checkInterval = setInterval(async () => {
-      try {
-        const changes = await this.table.db.table(CHANGES_TABLE)
-          .where('table')
-          .equals(TABLE_NAMES.CHANNEL)
-          .and(change => change.key === channelId && change.type === CHANGE_TYPES.PUBLISHED_NEXT)
-          .toArray();
-        
+    const observable = liveQuery(() => {
+      return this.table.db
+        .table(CHANGES_TABLE)
+        .where('table')
+        .equals(TABLE_NAMES.CHANNEL)
+        .and(change => change.key === channelId && change.type === CHANGE_TYPES.PUBLISHED_NEXT)
+        .toArray();
+    });
+
+    const subscription = observable.subscribe({
+      next: async changes => {
         if (changes.length === 0) {
-          clearInterval(checkInterval);
+          subscription.unsubscribe();
           await this.transaction({ mode: 'rw' }, () => {
-            return this.table.update(channelId, { 
+            return this.table.update(channelId, {
               publishing: false,
-              publishing_draft: false
+              publishing_draft: false,
             });
           });
         }
-      } catch (error) {
-        console.error('Error monitoring draft completion:', error);
-        clearInterval(checkInterval);
-      }
-    }, 2000); 
-    
+      },
+    });
+
     setTimeout(() => {
-      clearInterval(checkInterval);
-    }, 300000); 
+      subscription.unsubscribe();
+    }, 300000);
   },
 
   deploy(id) {
diff --git a/contentcuration/contentcuration/frontend/shared/strings/communityChannelsStrings.js b/contentcuration/contentcuration/frontend/shared/strings/communityChannelsStrings.js
index e7ce1d374e..7a944d3137 100644
--- a/contentcuration/contentcuration/frontend/shared/strings/communityChannelsStrings.js
+++ b/contentcuration/contentcuration/frontend/shared/strings/communityChannelsStrings.js
@@ -2,9 +2,6 @@ import { createTranslator } from 'shared/i18n';
 
 export const communityChannelsStrings = createTranslator('CommunityChannelsStrings', {
   // Publishing panel strings
-  publishToLibrary: {
-    message: 'Publish to library',
-  },
   publishChannel: {
     message: 'Publish channel',
   },
@@ -21,22 +18,24 @@ export const communityChannelsStrings = createTranslator('CommunityChannelsStrin
     message: 'Draft (staging)',
   },
   versionNotesLabel: {
-    message: 'Describe what\'s new in this channel version',
+    message: "Describe what's new in this channel version",
   },
   modeLiveDescription: {
     message: 'This edition will be accessible to the public through the Kolibri public library.',
   },
   modeDraftDescription: {
-    message: 'Your channel will be saved as a draft, allowing you to review or conduct quality checks without altering the published version on Kolibri public library.',
+    message:
+      'Your channel will be saved as a draft, allowing you to review or conduct quality checks without altering the published version on Kolibri public library.',
   },
   publishingInfo: {
-    message: 'You\'re publishing: Version {version} ({time})',
+    message: "You're publishing: Version {version} ({time})",
   },
   incompleteResourcesWarning: {
     message: '{count} incomplete resources.',
   },
   incompleteResourcesDescription: {
-    message: 'Incomplete resources will not be published and made available for download in Kolibri. Click \'Publish\' to confirm that you would like to publish anyway.',
+    message:
+      "Incomplete resources will not be published and made available for download in Kolibri. Click 'Publish' to confirm that you would like to publish anyway.",
   },
   maxLengthError: {
     message: 'Maximum 250 characters allowed',

From 0a52d4fa9de583368b4989c53d6afd22a9e04d27 Mon Sep 17 00:00:00 2001
From: taoerman <qiliu0523@gmail.com>
Date: Wed, 13 Aug 2025 21:41:23 -0700
Subject: [PATCH 12/17] fix language code

---
 .../components/sidePanels/PublishSidePanel.vue       | 12 +++++-------
 1 file changed, 5 insertions(+), 7 deletions(-)

diff --git a/contentcuration/contentcuration/frontend/channelEdit/components/sidePanels/PublishSidePanel.vue b/contentcuration/contentcuration/frontend/channelEdit/components/sidePanels/PublishSidePanel.vue
index a18d12b633..99983f9c09 100644
--- a/contentcuration/contentcuration/frontend/channelEdit/components/sidePanels/PublishSidePanel.vue
+++ b/contentcuration/contentcuration/frontend/channelEdit/components/sidePanels/PublishSidePanel.vue
@@ -279,13 +279,9 @@
           const channelLang = defaultLanguage.value;
           if (Object.keys(channelLang).length > 0) {
             language.value = channelLang;
-          } else {
-            // Fallback to channel language even if not in available options
-            language.value = {
-              value: currentChannel.value.language,
-              label: currentChannel.value.language,
-            };
-          }
+                  } else {
+          language.value = {};
+        }
         } else {
           language.value = {};
         }
@@ -294,6 +290,7 @@
       };
 
       // Validate the selected language when it changes
+      // Ensure language is always valid within available options
       const validateSelectedLanguage = () => {
         if (Object.keys(language.value).length > 0 && languages.value.length > 0) {
           const isValidLanguage = languages.value.some(lang => lang.value === language.value.value);
@@ -369,6 +366,7 @@
 
       const onLanguageChange = () => {
         showLanguageInvalidText.value = !isLanguageValid.value;
+        validateSelectedLanguage();
       };
 
       return {

From 62b20fc104e75366b826ed3f2e72632f9b3f4884 Mon Sep 17 00:00:00 2001
From: taoerman <qiliu0523@gmail.com>
Date: Wed, 13 Aug 2025 23:37:27 -0700
Subject: [PATCH 13/17] fix language selector

---
 .../sidePanels/PublishSidePanel.vue           | 82 ++++++++++---------
 .../frontend/shared/data/resources.js         |  4 +-
 2 files changed, 47 insertions(+), 39 deletions(-)

diff --git a/contentcuration/contentcuration/frontend/channelEdit/components/sidePanels/PublishSidePanel.vue b/contentcuration/contentcuration/frontend/channelEdit/components/sidePanels/PublishSidePanel.vue
index 99983f9c09..96b0d74df1 100644
--- a/contentcuration/contentcuration/frontend/channelEdit/components/sidePanels/PublishSidePanel.vue
+++ b/contentcuration/contentcuration/frontend/channelEdit/components/sidePanels/PublishSidePanel.vue
@@ -155,7 +155,7 @@
 
 <script>
 
-  import { ref, computed, getCurrentInstance, watch, onMounted } from 'vue';
+  import { ref, computed, getCurrentInstance, onMounted } from 'vue';
   import SidePanelModal from 'shared/views/SidePanelModal';
   import { Channel } from 'shared/data/resources';
   import { forceServerSync } from 'shared/data/serverSync';
@@ -178,10 +178,17 @@
       const submitting = ref(false);
       const language = ref({});
       const showLanguageInvalidText = ref(false);
+      const channelLanguages = ref([]);
+      const channelLanguageExists = ref(true);
 
       const instance = getCurrentInstance();
       const store = instance.proxy.$store;
 
+      const channelLanguageExistsInResources = () =>
+        store.dispatch('currentChannel/channelLanguageExistsInResources');
+      const getLanguagesInChannelResources = () =>
+        store.dispatch('currentChannel/getLanguagesInChannelResources');
+
       const {
         publishChannel$,
         publishLive$,
@@ -239,19 +246,13 @@
 
       const languages = computed(() => {
         if (!currentChannel.value) return [];
-        return filterLanguages(l => currentChannel.value.channelLanguages?.includes(l.id));
+        return filterLanguages(l => channelLanguages.value.includes(l.id));
       });
 
       const isLanguageValid = computed(() => {
         return Object.keys(language.value).length > 0;
       });
 
-      const defaultLanguage = computed(() => {
-        if (!currentChannel.value?.language) return {};
-        const channelLang = filterLanguages(l => l.id === currentChannel.value.language)[0];
-        return languages.value.some(lang => lang.value === channelLang?.value) ? channelLang : {};
-      });
-
       // Validate the version and language for live mode
       const isFormValid = computed(() => {
         if (mode.value === PublishModes.LIVE) {
@@ -274,23 +275,7 @@
         }));
       };
 
-      const initializeLanguage = () => {
-        if (currentChannel.value?.language) {
-          const channelLang = defaultLanguage.value;
-          if (Object.keys(channelLang).length > 0) {
-            language.value = channelLang;
-                  } else {
-          language.value = {};
-        }
-        } else {
-          language.value = {};
-        }
-
-        validateSelectedLanguage();
-      };
-
       // Validate the selected language when it changes
-      // Ensure language is always valid within available options
       const validateSelectedLanguage = () => {
         if (Object.keys(language.value).length > 0 && languages.value.length > 0) {
           const isValidLanguage = languages.value.some(lang => lang.value === language.value.value);
@@ -300,18 +285,41 @@
         }
       };
 
-      watch(
-        currentChannel,
-        newChannel => {
-          if (newChannel) {
-            initializeLanguage();
-          }
-        },
-        { immediate: true },
-      );
-
       onMounted(() => {
-        initializeLanguage();
+        if (currentChannel.value) {
+          channelLanguageExistsInResources().then(exists => {
+            channelLanguageExists.value = exists;
+            if (!exists) {
+              getLanguagesInChannelResources().then(languages => {
+                channelLanguages.value = languages.length
+                  ? languages
+                  : [currentChannel.value.language];
+                // Set language and validate
+                if (currentChannel.value.language) {
+                  const channelLang = languages.value.find(
+                    l => l.value === currentChannel.value.language,
+                  );
+                  language.value = channelLang || {};
+                } else {
+                  language.value = {};
+                }
+                validateSelectedLanguage();
+              });
+            } else {
+              channelLanguages.value = [currentChannel.value.language];
+              // Set language and validate
+              if (currentChannel.value.language) {
+                const channelLang = languages.value.find(
+                  l => l.value === currentChannel.value.language,
+                );
+                language.value = channelLang || {};
+              } else {
+                language.value = {};
+              }
+              validateSelectedLanguage();
+            }
+          });
+        }
       });
 
       const onClose = () => {
@@ -348,7 +356,7 @@
               });
             }
 
-            await Channel.publish(props.channelId, version_notes.value);
+            await Channel.publish(props.channelId, version_notes.value, language.value.value);
 
             emit('submitted');
             emit('close');
@@ -366,7 +374,7 @@
 
       const onLanguageChange = () => {
         showLanguageInvalidText.value = !isLanguageValid.value;
-        validateSelectedLanguage();
+        validateSelectedLanguage(); // Ensure language is always valid
       };
 
       return {
diff --git a/contentcuration/contentcuration/frontend/shared/data/resources.js b/contentcuration/contentcuration/frontend/shared/data/resources.js
index fb0bacb400..8c0023378b 100644
--- a/contentcuration/contentcuration/frontend/shared/data/resources.js
+++ b/contentcuration/contentcuration/frontend/shared/data/resources.js
@@ -1209,7 +1209,7 @@ export const Channel = new CreateModelResource({
     });
   },
 
-  publish(id, version_notes) {
+  publish(id, version_notes, language) {
     return this.transaction({ mode: 'rw' }, () => {
       return this.table.update(id, { publishing: true });
     }).then(() => {
@@ -1217,7 +1217,7 @@ export const Channel = new CreateModelResource({
         const change = new PublishedChange({
           key: id,
           version_notes,
-          language: currentLanguage || channel.language,
+          language: language || currentLanguage || channel.language,
           table: this.tableName,
           source: CLIENTID,
         });

From 0c6849143d41b45ddbeea9fea49dc076eef1553d Mon Sep 17 00:00:00 2001
From: taoerman <qiliu0523@gmail.com>
Date: Thu, 14 Aug 2025 16:10:56 -0700
Subject: [PATCH 14/17] continue to fix language selector

---
 .../sidePanels/PublishSidePanel.vue           | 26 ++++++-------------
 1 file changed, 8 insertions(+), 18 deletions(-)

diff --git a/contentcuration/contentcuration/frontend/channelEdit/components/sidePanels/PublishSidePanel.vue b/contentcuration/contentcuration/frontend/channelEdit/components/sidePanels/PublishSidePanel.vue
index 96b0d74df1..1cbf7bf0d0 100644
--- a/contentcuration/contentcuration/frontend/channelEdit/components/sidePanels/PublishSidePanel.vue
+++ b/contentcuration/contentcuration/frontend/channelEdit/components/sidePanels/PublishSidePanel.vue
@@ -249,6 +249,12 @@
         return filterLanguages(l => channelLanguages.value.includes(l.id));
       });
 
+      const defaultLanguage = computed(() => {
+        if (!currentChannel.value?.language) return {};
+        const channelLang = filterLanguages(l => l.id === currentChannel.value.language)[0];
+        return languages.value.some(lang => lang.value === channelLang?.value) ? channelLang : {};
+      });
+
       const isLanguageValid = computed(() => {
         return Object.keys(language.value).length > 0;
       });
@@ -294,28 +300,12 @@
                 channelLanguages.value = languages.length
                   ? languages
                   : [currentChannel.value.language];
-                // Set language and validate
-                if (currentChannel.value.language) {
-                  const channelLang = languages.value.find(
-                    l => l.value === currentChannel.value.language,
-                  );
-                  language.value = channelLang || {};
-                } else {
-                  language.value = {};
-                }
+                language.value = defaultLanguage.value;
                 validateSelectedLanguage();
               });
             } else {
               channelLanguages.value = [currentChannel.value.language];
-              // Set language and validate
-              if (currentChannel.value.language) {
-                const channelLang = languages.value.find(
-                  l => l.value === currentChannel.value.language,
-                );
-                language.value = channelLang || {};
-              } else {
-                language.value = {};
-              }
+              language.value = defaultLanguage.value;
               validateSelectedLanguage();
             }
           });

From 6cefdde24f3c79195d36bd3d84555a3100e4070b Mon Sep 17 00:00:00 2001
From: taoerman <qiliu0523@gmail.com>
Date: Wed, 20 Aug 2025 18:50:07 -0700
Subject: [PATCH 15/17] fix according to comments

---
 .../sidePanels/PublishSidePanel.vue           | 132 ++++++++++--------
 .../views/TreeView/TreeViewBase.vue           |   4 +-
 .../frontend/shared/data/resources.js         |   4 +-
 .../strings/communityChannelsStrings.js       |  19 +--
 package.json                                  |   2 +-
 5 files changed, 84 insertions(+), 77 deletions(-)

diff --git a/contentcuration/contentcuration/frontend/channelEdit/components/sidePanels/PublishSidePanel.vue b/contentcuration/contentcuration/frontend/channelEdit/components/sidePanels/PublishSidePanel.vue
index 1cbf7bf0d0..a554cb9b1d 100644
--- a/contentcuration/contentcuration/frontend/channelEdit/components/sidePanels/PublishSidePanel.vue
+++ b/contentcuration/contentcuration/frontend/channelEdit/components/sidePanels/PublishSidePanel.vue
@@ -42,12 +42,11 @@
               >
                 <KIcon
                   icon="info"
-                  :style="{ color: $themeTokens.primary }"
+                  :color="$themeTokens.primary"
                 />
                 <span>{{
                   publishingInfo$({
                     version: currentChannel.version + 1,
-                    time: formattedPublishTime,
                   })
                 }}</span>
               </div>
@@ -56,13 +55,12 @@
                 <KTextbox
                   v-model="version_notes"
                   :label="versionNotesLabel$()"
-                  :invalid="version_notes.length === 0 || version_notes.length > 250"
-                  :invalidText="
-                    version_notes.length === 0 ? 'Version notes are required' : maxLengthError$()
-                  "
-                  :showInvalidText="version_notes.length === 0 || version_notes.length > 250"
+                  :invalid="version_notes.length === 0"
+                  :invalidText="'Version notes are required'"
+                  :showInvalidText="showVersionNotesInvalidText"
                   textArea
                   :maxlength="250"
+                  @blur="onVersionNotesBlur"
                 />
               </div>
 
@@ -88,13 +86,13 @@
                 <div
                   class="warning-content"
                   :style="{
-                    backgroundColor: $themeTokens.warning,
-                    border: `1px solid ${$themeTokens.warningOutline}`,
+                    backgroundColor: $themePalette.yellow.v_100,
+                    borderRadius: '4px',
                   }"
                 >
                   <KIcon
                     icon="warning"
-                    :style="{ color: $themeTokens.warningText }"
+                    :color="$themePalette.yellow.v_500"
                   />
                   <div class="warning-text">
                     <div
@@ -107,7 +105,13 @@
                       class="warning-description"
                       :style="{ color: $themeTokens.annotation }"
                     >
-                      {{ incompleteResourcesDescription$() }}
+                      {{ incompleteResourcesDescription1$() }}
+                    </div>
+                    <div
+                      class="warning-description"
+                      :style="{ color: $themeTokens.annotation }"
+                    >
+                      {{ incompleteResourcesDescription2$() }}
                     </div>
                   </div>
                 </div>
@@ -133,17 +137,17 @@
       <template #bottomNavigation>
         <div class="footer">
           <KButton
-            flat
+            appearance="flat-button"
             @click="onClose"
           >
-            {{ cancel$() }}
+            {{ cancelAction$() }}
           </KButton>
           <KButton
-            color="primary"
+            primary
             :disabled="submitting || !isFormValid"
             @click="submit"
           >
-            {{ buttonText }}
+            {{ submitText }}
           </KButton>
         </div>
       </template>
@@ -178,6 +182,7 @@
       const submitting = ref(false);
       const language = ref({});
       const showLanguageInvalidText = ref(false);
+      const showVersionNotesInvalidText = ref(false); // lazy validation
       const channelLanguages = ref([]);
       const channelLanguageExists = ref(true);
 
@@ -200,9 +205,9 @@
         modeDraftDescription$,
         publishingInfo$,
         incompleteResourcesWarning$,
-        incompleteResourcesDescription$,
-        maxLengthError$,
-        cancel$,
+        incompleteResourcesDescription1$,
+        incompleteResourcesDescription2$,
+        cancelAction$,
         languageLabel$,
         languageRequiredMessage$,
       } = communityChannelsStrings;
@@ -211,22 +216,6 @@
       const getContentNode = computed(() => store.getters['contentNode/getContentNode']);
       const areAllChangesSaved = computed(() => store.getters['areAllChangesSaved']);
 
-      const formattedPublishTime = computed(() => {
-        if (!currentChannel.value) return '';
-        const now = new Date();
-        const timeString = now.toLocaleTimeString('en-US', {
-          hour: 'numeric',
-          minute: '2-digit',
-          hour12: true,
-        });
-        const dateString = now.toLocaleDateString('en-US', {
-          month: 'numeric',
-          day: 'numeric',
-          year: 'numeric',
-        });
-        return `${timeString} - ${dateString}`;
-      });
-
       const incompleteResourcesCount = computed(() => {
         if (!currentChannel.value) return 0;
         const rootNode = getContentNode.value(currentChannel.value.root_id);
@@ -259,18 +248,21 @@
         return Object.keys(language.value).length > 0;
       });
 
+      const isVersionNotesValid = computed(() => {
+        return version_notes.value.length > 0;
+      });
+
       // Validate the version and language for live mode
       const isFormValid = computed(() => {
         if (mode.value === PublishModes.LIVE) {
-          const versionNotesValid =
-            version_notes.value.length > 0 && version_notes.value.length <= 250;
+          const versionNotesValid = isVersionNotesValid.value;
           const languageValid = showLanguageDropdown.value ? isLanguageValid.value : true;
           return versionNotesValid && languageValid;
         }
         return true;
       });
 
-      const buttonText = computed(() => {
+      const submitText = computed(() => {
         return mode.value === PublishModes.DRAFT ? saveDraft$() : publishLive$();
       });
 
@@ -291,24 +283,27 @@
         }
       };
 
-      onMounted(() => {
+      onMounted(async () => {
         if (currentChannel.value) {
-          channelLanguageExistsInResources().then(exists => {
+          try {
+            const exists = await channelLanguageExistsInResources();
             channelLanguageExists.value = exists;
+
             if (!exists) {
-              getLanguagesInChannelResources().then(languages => {
-                channelLanguages.value = languages.length
-                  ? languages
-                  : [currentChannel.value.language];
-                language.value = defaultLanguage.value;
-                validateSelectedLanguage();
-              });
+              const languages = await getLanguagesInChannelResources();
+              channelLanguages.value = languages.length
+                ? languages
+                : [currentChannel.value.language];
+              language.value = defaultLanguage.value;
+              validateSelectedLanguage();
             } else {
               channelLanguages.value = [currentChannel.value.language];
               language.value = defaultLanguage.value;
               validateSelectedLanguage();
             }
-          });
+          } catch (error) {
+            // Error loading channel language information
+          }
         }
       });
 
@@ -317,8 +312,8 @@
       };
 
       const submit = async () => {
-        // Prevent submission if form is invalid
-        if (!isFormValid.value) {
+        // Validate form before submission
+        if (!validate()) {
           return;
         }
 
@@ -332,7 +327,6 @@
 
           if (mode.value === PublishModes.DRAFT) {
             await Channel.publishDraft(currentChannel.value.id, { use_staging_tree: false });
-            emit('submitted');
             emit('close');
           } else {
             if (
@@ -346,9 +340,8 @@
               });
             }
 
-            await Channel.publish(props.channelId, version_notes.value, language.value.value);
+            await Channel.publish(currentChannel.value.id, version_notes.value);
 
-            emit('submitted');
             emit('close');
           }
         } catch (error) {
@@ -367,6 +360,22 @@
         validateSelectedLanguage(); // Ensure language is always valid
       };
 
+      const onVersionNotesBlur = () => {
+        showVersionNotesInvalidText.value = !isVersionNotesValid.value;
+      };
+
+      const validate = () => {
+        if (mode.value === PublishModes.DRAFT) {
+          // For draft mode, no validation is required
+          return true;
+        } else {
+          // For live mode, validate version notes and language
+          showVersionNotesInvalidText.value = !isVersionNotesValid.value;
+          showLanguageInvalidText.value = !isLanguageValid.value;
+          return !showVersionNotesInvalidText.value && !showLanguageInvalidText.value;
+        }
+      };
+
       return {
         PublishModes,
         mode,
@@ -374,14 +383,14 @@
         submitting,
         language,
         showLanguageInvalidText,
+        showVersionNotesInvalidText,
 
         currentChannel,
-        formattedPublishTime,
         incompleteResourcesCount,
         showLanguageDropdown,
         languages,
         isFormValid,
-        buttonText,
+        submitText,
 
         modeLive$,
         modeDraft$,
@@ -390,9 +399,9 @@
         modeDraftDescription$,
         publishingInfo$,
         incompleteResourcesWarning$,
-        incompleteResourcesDescription$,
-        maxLengthError$,
-        cancel$,
+        incompleteResourcesDescription1$,
+        incompleteResourcesDescription2$,
+        cancelAction$,
         languageLabel$,
         languageRequiredMessage$,
 
@@ -400,12 +409,11 @@
         submit,
         getPanelTitle,
         onLanguageChange,
+        onVersionNotesBlur,
       };
     },
-    props: {
-      channelId: { type: String, required: true },
-    },
-    emits: ['close', 'submitted'],
+
+    emits: ['close'],
   };
 
 </script>
@@ -427,6 +435,7 @@
     display: flex;
     gap: 8px;
     justify-content: flex-end;
+    width: 100%;
     padding: 12px 0;
   }
 
@@ -452,7 +461,6 @@
     gap: 12px;
     align-items: flex-start;
     padding: 16px;
-    border-radius: 8px;
   }
 
   .warning-icon {
diff --git a/contentcuration/contentcuration/frontend/channelEdit/views/TreeView/TreeViewBase.vue b/contentcuration/contentcuration/frontend/channelEdit/views/TreeView/TreeViewBase.vue
index e001873b0c..95bb47fa68 100644
--- a/contentcuration/contentcuration/frontend/channelEdit/views/TreeView/TreeViewBase.vue
+++ b/contentcuration/contentcuration/frontend/channelEdit/views/TreeView/TreeViewBase.vue
@@ -208,10 +208,8 @@
     <slot></slot>
 
     <PublishSidePanel
-      v-if="showPublishSidePanel && currentChannel && currentChannel.id"
-      :channelId="currentChannel.id"
+      v-if="showPublishSidePanel"
       @close="showPublishSidePanel = false"
-      @submitted="showPublishSidePanel = false"
     />
     <template v-if="isPublished">
       <ChannelTokenModal
diff --git a/contentcuration/contentcuration/frontend/shared/data/resources.js b/contentcuration/contentcuration/frontend/shared/data/resources.js
index 8c0023378b..fb0bacb400 100644
--- a/contentcuration/contentcuration/frontend/shared/data/resources.js
+++ b/contentcuration/contentcuration/frontend/shared/data/resources.js
@@ -1209,7 +1209,7 @@ export const Channel = new CreateModelResource({
     });
   },
 
-  publish(id, version_notes, language) {
+  publish(id, version_notes) {
     return this.transaction({ mode: 'rw' }, () => {
       return this.table.update(id, { publishing: true });
     }).then(() => {
@@ -1217,7 +1217,7 @@ export const Channel = new CreateModelResource({
         const change = new PublishedChange({
           key: id,
           version_notes,
-          language: language || currentLanguage || channel.language,
+          language: currentLanguage || channel.language,
           table: this.tableName,
           source: CLIENTID,
         });
diff --git a/contentcuration/contentcuration/frontend/shared/strings/communityChannelsStrings.js b/contentcuration/contentcuration/frontend/shared/strings/communityChannelsStrings.js
index 7a944d3137..11ac62f2db 100644
--- a/contentcuration/contentcuration/frontend/shared/strings/communityChannelsStrings.js
+++ b/contentcuration/contentcuration/frontend/shared/strings/communityChannelsStrings.js
@@ -6,10 +6,10 @@ export const communityChannelsStrings = createTranslator('CommunityChannelsStrin
     message: 'Publish channel',
   },
   publishLive: {
-    message: 'PUBLISH',
+    message: 'Publish',
   },
   saveDraft: {
-    message: 'SAVE DRAFT',
+    message: 'Save draft',
   },
   modeLive: {
     message: 'Live',
@@ -28,19 +28,20 @@ export const communityChannelsStrings = createTranslator('CommunityChannelsStrin
       'Your channel will be saved as a draft, allowing you to review or conduct quality checks without altering the published version on Kolibri public library.',
   },
   publishingInfo: {
-    message: "You're publishing: Version {version} ({time})",
+    message: "You're publishing: Version {version}",
   },
   incompleteResourcesWarning: {
-    message: '{count} incomplete resources.',
+    message:
+      '{count, number} {count, plural, one {incomplete resource} other {incomplete resources}}.',
   },
-  incompleteResourcesDescription: {
+  incompleteResourcesDescription1: {
     message:
-      "Incomplete resources will not be published and made available for download in Kolibri. Click 'Publish' to confirm that you would like to publish anyway.",
+      'Incomplete resources will not be published and made available for download in Kolibri.',
   },
-  maxLengthError: {
-    message: 'Maximum 250 characters allowed',
+  incompleteResourcesDescription2: {
+    message: "Click 'Publish' to confirm that you would like to publish anyway.",
   },
-  cancel: {
+  cancelAction: {
     message: 'CANCEL',
   },
   languageLabel: {
diff --git a/package.json b/package.json
index 366ee8e8e6..e981376cd6 100644
--- a/package.json
+++ b/package.json
@@ -179,7 +179,7 @@
     "> 1%",
     "Firefox ESR"
   ],
-  "packageManager": "pnpm@10.4.1+sha512.c753b6c3ad7afa13af388fa6d808035a008e30ea9993f58c6663e2bc5ff21679aa834db094987129aa4d488b86df57f7b634981b2f827cdcacc698cc0cfb88af",
+  "packageManager": "pnpm@10.14.0+sha512.ad27a79641b49c3e481a16a805baa71817a04bbe06a38d17e60e2eaee83f6a146c6a688125f5792e48dd5ba30e7da52a5cda4c3992b9ccf333f9ce223af84748",
   "volta": {
     "node": "18.20.7",
     "pnpm": "10.4.1"

From 30b48bb52a3343f83cae8eef3778eda6344d0356 Mon Sep 17 00:00:00 2001
From: taoerman <qiliu0523@gmail.com>
Date: Wed, 20 Aug 2025 21:46:23 -0700
Subject: [PATCH 16/17] fixed code to pass format test

---
 .../sidePanels/PublishSidePanel.vue           | 30 ++++++++-----------
 1 file changed, 12 insertions(+), 18 deletions(-)

diff --git a/contentcuration/contentcuration/frontend/channelEdit/components/sidePanels/PublishSidePanel.vue b/contentcuration/contentcuration/frontend/channelEdit/components/sidePanels/PublishSidePanel.vue
index a554cb9b1d..582e9280b3 100644
--- a/contentcuration/contentcuration/frontend/channelEdit/components/sidePanels/PublishSidePanel.vue
+++ b/contentcuration/contentcuration/frontend/channelEdit/components/sidePanels/PublishSidePanel.vue
@@ -285,24 +285,18 @@
 
       onMounted(async () => {
         if (currentChannel.value) {
-          try {
-            const exists = await channelLanguageExistsInResources();
-            channelLanguageExists.value = exists;
-
-            if (!exists) {
-              const languages = await getLanguagesInChannelResources();
-              channelLanguages.value = languages.length
-                ? languages
-                : [currentChannel.value.language];
-              language.value = defaultLanguage.value;
-              validateSelectedLanguage();
-            } else {
-              channelLanguages.value = [currentChannel.value.language];
-              language.value = defaultLanguage.value;
-              validateSelectedLanguage();
-            }
-          } catch (error) {
-            // Error loading channel language information
+          const exists = await channelLanguageExistsInResources();
+          channelLanguageExists.value = exists;
+
+          if (!exists) {
+            const languages = await getLanguagesInChannelResources();
+            channelLanguages.value = languages.length ? languages : [currentChannel.value.language];
+            language.value = defaultLanguage.value;
+            validateSelectedLanguage();
+          } else {
+            channelLanguages.value = [currentChannel.value.language];
+            language.value = defaultLanguage.value;
+            validateSelectedLanguage();
           }
         }
       });

From 78e6bce6bbb6cf9d939325356f7a67d9b1bf9f5b Mon Sep 17 00:00:00 2001
From: taoerman <qiliu0523@gmail.com>
Date: Wed, 27 Aug 2025 12:05:48 -0700
Subject: [PATCH 17/17] revert package.json change

---
 package.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/package.json b/package.json
index c857126d79..46434542c9 100644
--- a/package.json
+++ b/package.json
@@ -182,7 +182,7 @@
     "> 1%",
     "Firefox ESR"
   ],
-  "packageManager": "pnpm@10.15.0+sha512.486ebc259d3e999a4e8691ce03b5cac4a71cbeca39372a9b762cb500cfdf0873e2cb16abe3d951b1ee2cf012503f027b98b6584e4df22524e0c7450d9ec7aa7b",
+  "packageManager": "pnpm@10.12.4+sha512.5ea8b0deed94ed68691c9bad4c955492705c5eeb8a87ef86bc62c74a26b037b08ff9570f108b2e4dbd1dd1a9186fea925e527f141c648e85af45631074680184",
   "volta": {
     "node": "20.19.3",
     "pnpm": "10.12.4"