feat(dashboard): add view course site actions and publish flow (#690)

Add View course site and Publish course options to org course context menus.
Replace the course header View as student button with View Course Site and
a companion overflow menu that includes View as student plus list actions.
Show a publish prompt modal for unpublished courses and support #publish
deep links in course settings.

apps/dashboard/src/lib/features/course/components/card-dropdown.svelte

@@ -1,16 +1,8 @@
 <script lang="ts">
   import * as DropdownMenu from '@cio/ui/base/dropdown-menu';
   import EllipsisVerticalIcon from '@lucide/svelte/icons/ellipsis-vertical';
-  import ExternalLinkIcon from '@lucide/svelte/icons/external-link';
-  import CopyIcon from '@lucide/svelte/icons/copy';
-  import { copyCourseModal, deleteCourseModal } from '$features/course/utils/store';
-  import { copyPublicCoursePageUrl, openCoursePreview } from '$features/course/utils/course-preview';
-  import { currentOrgDomain } from '$lib/utils/store/org';
   import { IconButton } from '@cio/ui/custom/icon-button';
-  import { t } from '$lib/utils/functions/translations';
-
-  import { goto } from '$app/navigation';
-  import { resolve } from '$app/paths';
+  import CourseContextMenuContent from './course-context-menu-content.svelte';
 
   interface Props {
     id: string;
@@ -34,43 +26,6 @@
   }: Props = $props();
 
   const showPublicCourseLinks = $derived(isPublished && courseType === 'PUBLIC' && slug.trim().length > 0);
-
-  function redirect(url: string) {
-    goto(resolve(url, {}));
-  }
-
-  function handleShareCourse() {
-    redirect(`/courses/${id}/settings#share`);
-  }
-
-  function handleInvite() {
-    redirect(`/courses/${id}/people?add=true`);
-  }
-
-  function handleDeleteCourse() {
-    $deleteCourseModal.open = true;
-    $deleteCourseModal.id = id;
-    $deleteCourseModal.title = title;
-  }
-
-  function handleCloneCourse() {
-    $copyCourseModal.open = true;
-    $copyCourseModal.id = id;
-    $copyCourseModal.title = title;
-    $copyCourseModal.description = description;
-  }
-
-  function handleOpenPublicCourse() {
-    openCoursePreview({
-      courseId: id,
-      courseSlug: slug,
-      currentOrgDomain: $currentOrgDomain
-    });
-  }
-
-  async function handleCopyCourseUrl() {
-    await copyPublicCoursePageUrl(slug, $currentOrgDomain);
-  }
 </script>
 
 {#if lmsPublicQuickOnly ? showPublicCourseLinks : true}
@@ -84,41 +39,7 @@
       </IconButton>
     </DropdownMenu.Trigger>
     <DropdownMenu.Content align="end">
-      {#if lmsPublicQuickOnly}
-        <DropdownMenu.Item onclick={handleOpenPublicCourse}>
-          <ExternalLinkIcon size={16} class="mr-2" />
-          {$t('courses.course_card.context_menu.open_public_course')}
-        </DropdownMenu.Item>
-        <DropdownMenu.Item onclick={() => void handleCopyCourseUrl()}>
-          <CopyIcon size={16} class="mr-2" />
-          {$t('courses.course_card.context_menu.copy_course_url')}
-        </DropdownMenu.Item>
-      {:else}
-        {#if showPublicCourseLinks}
-          <DropdownMenu.Item onclick={handleOpenPublicCourse}>
-            <ExternalLinkIcon size={16} class="mr-2" />
-            {$t('courses.course_card.context_menu.open_public_course')}
-          </DropdownMenu.Item>
-          <DropdownMenu.Item onclick={() => void handleCopyCourseUrl()}>
-            <CopyIcon size={16} class="mr-2" />
-            {$t('courses.course_card.context_menu.copy_course_url')}
-          </DropdownMenu.Item>
-          <DropdownMenu.Separator />
-        {/if}
-        <DropdownMenu.Item onclick={handleCloneCourse}>
-          {$t('courses.course_card.context_menu.clone')}
-        </DropdownMenu.Item>
-        <DropdownMenu.Item onclick={handleShareCourse}>
-          {$t('courses.course_card.context_menu.share')}
-        </DropdownMenu.Item>
-        <DropdownMenu.Item onclick={handleInvite}>
-          {$t('courses.course_card.context_menu.invite')}
-        </DropdownMenu.Item>
-        <DropdownMenu.Separator />
-        <DropdownMenu.Item class="text-red-600" onclick={handleDeleteCourse}>
-          {$t('courses.course_card.context_menu.delete')}
-        </DropdownMenu.Item>
-      {/if}
+      <CourseContextMenuContent {id} {title} {description} {isPublished} {courseType} {slug} {lmsPublicQuickOnly} />
     </DropdownMenu.Content>
   </DropdownMenu.Root>
 {/if}

apps/dashboard/src/lib/features/course/components/course-context-menu-content.svelte

@@ -0,0 +1,155 @@
+<script lang="ts">
+  import * as DropdownMenu from '@cio/ui/base/dropdown-menu';
+  import ExternalLinkIcon from '@lucide/svelte/icons/external-link';
+  import CopyIcon from '@lucide/svelte/icons/copy';
+  import EyeIcon from '@lucide/svelte/icons/eye';
+  import { goto } from '$app/navigation';
+  import { resolve } from '$app/paths';
+  import { copyCourseModal, deleteCourseModal } from '$features/course/utils/store';
+  import { copyPublicCoursePageUrl, openCoursePreview } from '$features/course/utils/course-preview';
+  import { currentOrgDomain } from '$lib/utils/store/org';
+  import { t } from '$lib/utils/functions/translations';
+
+  interface Props {
+    id: string;
+    title: string;
+    description: string;
+    isPublished?: boolean;
+    courseType?: string | null;
+    slug?: string;
+    /** Compact menu for LMS course cards */
+    lmsPublicQuickOnly?: boolean;
+    /** Include "View as student" (course header menu) */
+    includeViewAsStudent?: boolean;
+    onViewAsStudent?: () => void;
+    /** List view includes an explicit Open action */
+    includeOpen?: boolean;
+    /** Hide org management actions (clone, share, invite, delete) */
+    hideOrgActions?: boolean;
+  }
+
+  let {
+    id,
+    title,
+    description,
+    isPublished = false,
+    courseType = null,
+    slug = '',
+    lmsPublicQuickOnly = false,
+    includeViewAsStudent = false,
+    onViewAsStudent,
+    includeOpen = false,
+    hideOrgActions = false
+  }: Props = $props();
+
+  const showPublicCourseLinks = $derived(isPublished && courseType === 'PUBLIC' && slug.trim().length > 0);
+
+  function redirect(url: string) {
+    goto(resolve(url, {}));
+  }
+
+  function handleShareCourse() {
+    redirect(`/courses/${id}/settings#share`);
+  }
+
+  function handleInvite() {
+    redirect(`/courses/${id}/people?add=true`);
+  }
+
+  function handlePublishCourse() {
+    redirect(`/courses/${id}/settings#publish`);
+  }
+
+  function handleDeleteCourse() {
+    $deleteCourseModal.open = true;
+    $deleteCourseModal.id = id;
+    $deleteCourseModal.title = title;
+  }
+
+  function handleCloneCourse() {
+    $copyCourseModal.open = true;
+    $copyCourseModal.id = id;
+    $copyCourseModal.title = title;
+    $copyCourseModal.description = description;
+  }
+
+  function handleOpenCourse() {
+    redirect(`/courses/${id}`);
+  }
+
+  function handleViewCourseSite() {
+    openCoursePreview({
+      courseId: id,
+      courseSlug: slug,
+      currentOrgDomain: $currentOrgDomain
+    });
+  }
+
+  async function handleCopyCourseUrl() {
+    await copyPublicCoursePageUrl(slug, $currentOrgDomain);
+  }
+</script>
+
+{#if lmsPublicQuickOnly}
+  <DropdownMenu.Item onclick={handleViewCourseSite}>
+    <ExternalLinkIcon size={16} class="mr-2" />
+    {$t('courses.course_card.context_menu.view_course_site')}
+  </DropdownMenu.Item>
+  <DropdownMenu.Item onclick={() => void handleCopyCourseUrl()}>
+    <CopyIcon size={16} class="mr-2" />
+    {$t('courses.course_card.context_menu.copy_course_url')}
+  </DropdownMenu.Item>
+{:else}
+  {#if includeViewAsStudent}
+    <DropdownMenu.Item onclick={() => onViewAsStudent?.()}>
+      <EyeIcon size={16} class="mr-2" />
+      {$t('course.header.view_as_student')}
+    </DropdownMenu.Item>
+    <DropdownMenu.Separator />
+  {/if}
+
+  {#if isPublished}
+    <DropdownMenu.Item onclick={handleViewCourseSite}>
+      <ExternalLinkIcon size={16} class="mr-2" />
+      {$t('courses.course_card.context_menu.view_course_site')}
+    </DropdownMenu.Item>
+    {#if showPublicCourseLinks}
+      <DropdownMenu.Item onclick={() => void handleCopyCourseUrl()}>
+        <CopyIcon size={16} class="mr-2" />
+        {$t('courses.course_card.context_menu.copy_course_url')}
+      </DropdownMenu.Item>
+    {/if}
+    {#if !hideOrgActions || includeOpen}
+      <DropdownMenu.Separator />
+    {/if}
+  {:else}
+    <DropdownMenu.Item onclick={handlePublishCourse}>
+      {$t('courses.course_card.context_menu.publish_course')}
+    </DropdownMenu.Item>
+    {#if !hideOrgActions || includeOpen}
+      <DropdownMenu.Separator />
+    {/if}
+  {/if}
+
+  {#if includeOpen}
+    <DropdownMenu.Item onclick={handleOpenCourse}>
+      {$t('courses.course_card.context_menu.open')}
+    </DropdownMenu.Item>
+  {/if}
+
+  {#if !hideOrgActions}
+    <DropdownMenu.Item onclick={handleCloneCourse}>
+      {$t('courses.course_card.context_menu.clone')}
+    </DropdownMenu.Item>
+    <DropdownMenu.Item onclick={handleShareCourse}>
+      {$t('courses.course_card.context_menu.share')}
+    </DropdownMenu.Item>
+    <DropdownMenu.Item onclick={handleInvite}>
+      {$t('courses.course_card.context_menu.invite')}
+    </DropdownMenu.Item>
+    <DropdownMenu.Separator />
+    <DropdownMenu.Item class="text-red-600" onclick={handleDeleteCourse}>
+      {$t('courses.course_card.context_menu.delete')}
+    </DropdownMenu.Item>
+  {/if}
+{/if}

apps/dashboard/src/lib/features/course/components/course-header.svelte

@@ -1,7 +1,10 @@
 <script lang="ts">
   import { Separator } from '@cio/ui/base/separator';
   import * as Sidebar from '@cio/ui/base/sidebar';
-  import EyeIcon from '@lucide/svelte/icons/eye';
+  import * as ButtonGroup from '@cio/ui/base/button-group';
+  import * as DropdownMenu from '@cio/ui/base/dropdown-menu';
+  import ExternalLinkIcon from '@lucide/svelte/icons/external-link';
+  import EllipsisVerticalIcon from '@lucide/svelte/icons/ellipsis-vertical';
   import { Button } from '@cio/ui/base/button';
   import { Waves } from '@cio/ui/custom/animation';
   import { page } from '$app/state';
@@ -12,23 +15,46 @@
   import { courseApi } from '$features/course/api';
   import { getActiveCourseNavKey } from '$features/course/utils/functions';
   import { toggleAiAssistant } from '$features/ai-assistant/utils/store';
+  import { openCoursePreview } from '$features/course/utils/course-preview';
   import { t } from '$lib/utils/functions/translations';
   import CoursePublishBadge from './course-publish-badge.svelte';
   import CoursePublicBadge from './course-public-badge.svelte';
+  import CourseContextMenuContent from './course-context-menu-content.svelte';
   import ViewAsStudentModal from './view-as-student-modal.svelte';
+  import ViewCourseSiteUnpublishedModal from './view-course-site-unpublished-modal.svelte';
 
   const siteName = $derived($currentOrg.siteName);
   const showCoursePublishBadge = $derived(!$isStudentExperience);
   const isPublicCourse = $derived(courseApi.course?.type === 'PUBLIC');
   const activeNavKey = $derived(getActiveCourseNavKey(page.url.pathname, courseApi.course?.id ?? ''));
+  const isPublished = $derived(courseApi.course?.isPublished ?? false);
 
   let viewAsStudentOpen = $state(false);
+  let viewCourseSiteUnpublishedOpen = $state(false);
 
   $effect(() => {
     if (!siteName) return;
 
     setupProgressApi.fetchSetupProgress(siteName);
   });
+
+  function handleViewCourseSite() {
+    const course = courseApi.course;
+    if (!course?.id) {
+      return;
+    }
+
+    if (!isPublished) {
+      viewCourseSiteUnpublishedOpen = true;
+      return;
+    }
+
+    openCoursePreview({
+      courseId: course.id,
+      courseSlug: course.slug,
+      currentOrgDomain: $currentOrgDomain
+    });
+  }
 </script>
 
 <header
@@ -52,7 +78,7 @@
         {/if}
 
         {#if showCoursePublishBadge}
-          <CoursePublishBadge isPublished={courseApi.course?.isPublished ?? false} />
+          <CoursePublishBadge {isPublished} />
         {/if}
       </div>
     </div>
@@ -78,16 +104,47 @@
     </Button>
 
     {#if !$isStudentExperience}
-      <Button
-        variant="outline"
-        size="sm"
-        onclick={() => (viewAsStudentOpen = true)}
-        disabled={!courseApi.course?.id}
-        aria-label={$t('course.header.view_as_student')}
-      >
-        <EyeIcon size={14} />
-        <span class="hidden sm:inline">{$t('course.header.view_as_student')}</span>
-      </Button>
+      <ButtonGroup.Root>
+        <Button
+          variant="outline"
+          size="sm"
+          onclick={handleViewCourseSite}
+          disabled={!courseApi.course?.id}
+          aria-label={$t('course.header.view_course_site')}
+        >
+          <ExternalLinkIcon size={14} />
+          <span class="hidden sm:inline">{$t('course.header.view_course_site')}</span>
+        </Button>
+        <DropdownMenu.Root>
+          <DropdownMenu.Trigger>
+            {#snippet child({ props })}
+              <Button
+                {...props}
+                variant="outline"
+                size="sm"
+                aria-label={$t('courses.course_card.actions_menu_aria')}
+                disabled={!courseApi.course?.id}
+              >
+                <EllipsisVerticalIcon size={14} />
+              </Button>
+            {/snippet}
+          </DropdownMenu.Trigger>
+          <DropdownMenu.Content align="end">
+            {#if courseApi.course}
+              <CourseContextMenuContent
+                id={courseApi.course.id}
+                title={courseApi.course.title}
+                description={courseApi.course.description}
+                isPublished={courseApi.course.isPublished ?? false}
+                courseType={courseApi.course.type}
+                slug={courseApi.course.slug ?? ''}
+                includeViewAsStudent={true}
+                onViewAsStudent={() => (viewAsStudentOpen = true)}
+              />
+            {/if}
+          </DropdownMenu.Content>
+        </DropdownMenu.Root>
+      </ButtonGroup.Root>
     {/if}
   </div>
 </header>
@@ -98,3 +155,5 @@
   courseSlug={courseApi.course?.slug}
   currentOrgDomain={$currentOrgDomain}
 />
+
+<ViewCourseSiteUnpublishedModal bind:open={viewCourseSiteUnpublishedOpen} currentOrgDomain={$currentOrgDomain} />

apps/dashboard/src/lib/features/course/components/course-list-row.svelte

@@ -10,14 +10,10 @@
   import { ContentType } from '@cio/utils/constants/content';
   import { Image } from '$features/ui';
   import { t } from '$lib/utils/functions/translations';
-  import { copyCourseModal, deleteCourseModal } from '$features/course/utils/store';
-  import { copyPublicCoursePageUrl, openCoursePreview } from '$features/course/utils/course-preview';
-  import { currentOrgDomain } from '$lib/utils/store/org';
   import { buildCoursePlaceholderAvatarUrl } from '$features/course/utils/course-list-row-utils';
   import CourseContentIcon from './course-content-icon.svelte';
   import CoursePublicBadge from './course-public-badge.svelte';
-  import ExternalLinkIcon from '@lucide/svelte/icons/external-link';
-  import CopyIcon from '@lucide/svelte/icons/copy';
+  import CourseContextMenuContent from './course-context-menu-content.svelte';
 
   interface Tag {
     id: string;
@@ -133,30 +129,6 @@
     }
     goto(resolve(`/courses/${id}`, {}));
   }
-
-  function handleOpen(e: MouseEvent) {
-    e.stopPropagation();
-    goto(resolve(`/courses/${id}`, {}));
-  }
-
-  function handleClone(e: MouseEvent) {
-    e.stopPropagation();
-    $copyCourseModal.open = true;
-    $copyCourseModal.id = id;
-    $copyCourseModal.title = title;
-    $copyCourseModal.description = description;
-  }
-
-  function handleDelete(e: MouseEvent) {
-    e.stopPropagation();
-    $deleteCourseModal.open = true;
-    $deleteCourseModal.id = id;
-    $deleteCourseModal.title = title;
-  }
-
-  async function handleCopyCourseUrl() {
-    await copyPublicCoursePageUrl(slug, $currentOrgDomain);
-  }
 </script>
 
 <ResourceListRow.Root
@@ -317,37 +289,27 @@
               {/snippet}
             </DropdownMenu.Trigger>
             <DropdownMenu.Content align="end">
-              {#if showPublicCourseLinks}
-                <DropdownMenu.Item
-                  onclick={() =>
-                    openCoursePreview({
-                      courseId: id,
-                      courseSlug: slug,
-                      currentOrgDomain: $currentOrgDomain
-                    })}
-                >
-                  <ExternalLinkIcon class="mr-2 size-4" />
-                  {$t('courses.course_card.context_menu.open_public_course')}
-                </DropdownMenu.Item>
-                <DropdownMenu.Item onclick={() => void handleCopyCourseUrl()}>
-                  <CopyIcon class="mr-2 size-4" />
-                  {$t('courses.course_card.context_menu.copy_course_url')}
-                </DropdownMenu.Item>
-              {/if}
-              {#if !isLMS}
-                {#if showPublicCourseLinks}
-                  <DropdownMenu.Separator />
-                {/if}
-                <DropdownMenu.Item onclick={handleOpen}>
-                  {$t('courses.course_card.context_menu.open')}
-                </DropdownMenu.Item>
-                <DropdownMenu.Item onclick={handleClone}>
-                  {$t('courses.course_card.context_menu.clone')}
-                </DropdownMenu.Item>
-                <DropdownMenu.Separator />
-                <DropdownMenu.Item variant="destructive" onclick={handleDelete}>
-                  {$t('courses.course_card.context_menu.delete')}
-                </DropdownMenu.Item>
+              {#if isLMS}
+                <CourseContextMenuContent
+                  {id}
+                  {title}
+                  {description}
+                  {isPublished}
+                  courseType={type}
+                  {slug}
+                  lmsPublicQuickOnly={true}
+                />
+              {:else}
+                <CourseContextMenuContent
+                  {id}
+                  {title}
+                  {description}
+                  {isPublished}
+                  courseType={type}
+                  {slug}
+                  includeOpen={true}
+                  hideOrgActions={false}
+                />
               {/if}
             </DropdownMenu.Content>
           </DropdownMenu.Root>

apps/dashboard/src/lib/features/course/components/view-course-site-unpublished-modal.svelte

@@ -0,0 +1,66 @@
+<script lang="ts">
+  import { Button } from '@cio/ui/base/button';
+  import * as Dialog from '@cio/ui/base/dialog';
+  import { courseApi } from '$features/course/api';
+  import { publishCourse } from '$features/course/utils/publish-course';
+  import { openCoursePreview } from '$features/course/utils/course-preview';
+  import { t } from '$lib/utils/functions/translations';
+
+  interface Props {
+    open?: boolean;
+    currentOrgDomain?: string;
+  }
+
+  let { open = $bindable(false), currentOrgDomain = '' }: Props = $props();
+
+  let isPublishing = $state(false);
+
+  async function handlePublishCourse() {
+    const course = courseApi.course;
+    if (!course?.id) {
+      return;
+    }
+
+    isPublishing = true;
+
+    const published = await publishCourse(course);
+    isPublishing = false;
+
+    if (!published) {
+      return;
+    }
+
+    open = false;
+
+    openCoursePreview({
+      courseId: course.id,
+      courseSlug: courseApi.course?.slug,
+      currentOrgDomain
+    });
+  }
+</script>
+
+<Dialog.Root
+  bind:open
+  onOpenChange={(isOpen) => {
+    if (!isOpen && !isPublishing) {
+      open = false;
+    }
+  }}
+>
+  <Dialog.Content class="w-[calc(100%-2rem)] max-w-md! p-4">
+    <Dialog.Header>
+      <Dialog.Title>{$t('course.view_course_site.unpublished_title')}</Dialog.Title>
+      <Dialog.Description>{$t('course.view_course_site.unpublished_description')}</Dialog.Description>
+    </Dialog.Header>
+
+    <Dialog.Footer>
+      <Button variant="outline" onclick={() => (open = false)} disabled={isPublishing}>
+        {$t('course.view_course_site.cancel')}
+      </Button>
+      <Button variant="default" onclick={handlePublishCourse} loading={isPublishing} disabled={!courseApi.course?.id}>
+        {$t('course.view_course_site.publish_course')}
+      </Button>
+    </Dialog.Footer>
+  </Dialog.Content>
+</Dialog.Root>

apps/dashboard/src/lib/features/course/pages/settings.svelte

@@ -794,7 +794,7 @@
 
   <Field.Separator />
 
-  <Field.Set>
+  <Field.Set id="publish">
     <Field.Legend>{$t('course.navItem.settings.publish')}</Field.Legend>
     <Field.Description>{$t('course.navItem.settings.determines')}</Field.Description>
     <Field.Field orientation="horizontal">

apps/dashboard/src/lib/features/course/utils/publish-course.ts

@@ -0,0 +1,32 @@
+import { generateSlug } from '@cio/utils/functions';
+import { isObject } from '$lib/utils/functions/isObject';
+import { courseApi } from '$features/course/api';
+import type { Course } from '$features/course/utils/types';
+
+export async function publishCourse(course: Course): Promise<boolean> {
+  if (!course?.id) {
+    return false;
+  }
+
+  let slug = course.slug?.trim() ? course.slug : undefined;
+  if (!slug) {
+    slug = generateSlug(course.title, { appendTimestamp: true });
+  }
+
+  const metadataPayload = {
+    ...(isObject(course.metadata) ? course.metadata : {}),
+    allowNewStudent: true
+  };
+
+  const result = await courseApi.update(
+    course.id,
+    {
+      isPublished: true,
+      slug,
+      metadata: metadataPayload
+    },
+    { showSuccessToast: true }
+  );
+
+  return !!result;
+}