fix(widget): powered toggle persistence, copy buttons, version dates, showLessonsCount, color pickers, and loading spinner

apps/api/src/services/widget.ts

@@ -23,7 +23,7 @@ import {
   type TUpdateWidget
 } from '@cio/utils/validation/widget';
 
-import { getOrganizationById } from '@cio/db/queries/organization';
+import { getActiveOrganizationPlan, getOrganizationById } from '@cio/db/queries/organization';
 import {
   buildWidgetPayload,
   generateWidgetPublicKey,
@@ -48,13 +48,14 @@ export async function listOrganizationWidgets(orgId: string) {
 
 export async function createOrganizationWidget(orgId: string, userId: string, data: TCreateWidget) {
   try {
+    const activePlan = await getActiveOrganizationPlan(orgId);
     const widget = await createWidget({
       organizationId: orgId,
       name: data.name,
       layoutType: data.layoutType,
       selectionMode: data.selectionMode,
       publicKey: generateWidgetPublicKey(),
-      config: normalizeWidgetConfig(data.config ?? getDefaultWidgetConfig()),
+      config: normalizeWidgetConfig(data.config ?? getDefaultWidgetConfig(), activePlan?.planName ?? null),
       createdByUserId: userId,
       updatedByUserId: userId
     });
@@ -132,7 +133,10 @@ export async function getOrganizationWidgetDetail(orgId: string, widgetId: strin
 
 export async function updateOrganizationWidget(orgId: string, widgetId: string, userId: string, data: TUpdateWidget) {
   try {
-    const existingWidget = await getWidgetById(orgId, widgetId);
+    const [existingWidget, activePlan] = await Promise.all([
+      getWidgetById(orgId, widgetId),
+      getActiveOrganizationPlan(orgId)
+    ]);
     if (!existingWidget) {
       throw new AppError('Widget not found', ErrorCodes.WIDGET_NOT_FOUND, 404);
     }
@@ -141,7 +145,10 @@ export async function updateOrganizationWidget(orgId: string, widgetId: string,
       name: data.name ?? existingWidget.name,
       layoutType: data.layoutType ?? existingWidget.layoutType,
       selectionMode: data.selectionMode ?? existingWidget.selectionMode,
-      config: normalizeWidgetConfig((data.config ?? existingWidget.config) as Record<string, unknown>),
+      config: normalizeWidgetConfig(
+        (data.config ?? existingWidget.config) as Record<string, unknown>,
+        activePlan?.planName ?? null
+      ),
       hasUnpublishedChanges: true,
       updatedByUserId: userId
     });

apps/dashboard/src/hooks.server.ts

@@ -43,6 +43,7 @@ export const handle: Handle = async (args) => {
 
   const cookieString = event.cookies.getAll().map((c) => `${c.name}=${c.value}`);
   console.log('event.cookies', cookieString);
+  console.log('page path', event.url.pathname);
   const sessionData = await getSessionData(event.cookies);
 
   if (sessionData) {

apps/dashboard/src/lib/features/ui/upgrade-modal.svelte

@@ -49,14 +49,15 @@
       checkoutURL.searchParams.set('products', isYearlyPlan ? plan.CTA.PRODUCT_ID_YEARLY : plan.CTA.PRODUCT_ID);
       checkoutURL.searchParams.set('orgId', $currentOrg.id);
 
-      window.location.href = checkoutURL.toString();
+      requestAnimationFrame(() => {
+        window.location.href = checkoutURL.toString();
+      });
     } catch (error) {
+      isLoadingPlan = null;
       console.error('Error subscribing', error);
 
       snackbar.error('snackbar.upgrade.failed');
     }
-
-    isLoadingPlan = null;
   }
 
   function onUpgrade() {

apps/dashboard/src/lib/features/widget/components/widget-editor-header.svelte

@@ -15,6 +15,8 @@
     isDirty: boolean;
     layoutValidationError: string | null;
     editingName: boolean;
+    saving: boolean;
+    publishing: boolean;
     onSave: () => void;
     onPublish: () => void;
     onDiscard: () => void;
@@ -29,6 +31,8 @@
     isDirty,
     layoutValidationError,
     editingName,
+    saving,
+    publishing,
     onSave,
     onPublish,
     onDiscard,
@@ -103,11 +107,12 @@
       size="sm"
       type="button"
       disabled={!isDirty || Boolean(layoutValidationError)}
+      loading={saving}
       onclick={onSave}
     >
       {$t('widgets.editor.save_changes')}
     </Button>
-    <Button size="sm" type="button" disabled={Boolean(layoutValidationError)} onclick={onPublish}>
+    <Button size="sm" type="button" disabled={Boolean(layoutValidationError)} loading={publishing} onclick={onPublish}>
       {$t('widgets.actions.publish')}
     </Button>
   </div>

apps/dashboard/src/lib/features/widget/pages/widget-editor.svelte

@@ -34,6 +34,8 @@
       isDirty={store.isDirty}
       layoutValidationError={store.layoutValidationError}
       editingName={store.editingName}
+      saving={store.saving}
+      publishing={store.publishing}
       onSave={() => store.saveWidget()}
       onPublish={() => store.publishWidget()}
       onDiscard={() => store.resetDraft()}

apps/dashboard/src/lib/features/widget/panels/design-panel.svelte

@@ -45,33 +45,65 @@
           </Select.Content>
         </Select.Root>
       </Field.Field>
-      <InputField
-        label={$t('widgets.form.primary_color')}
-        bind:value={draftConfig.colors.primaryColor}
-        maxLength={64}
-        errorMessage={errFor('config.colors.primaryColor')}
-      />
-      <InputField
-        label={$t('widgets.form.background_color')}
-        bind:value={draftConfig.colors.backgroundColor}
-        isDisabled={!canUseCustomColors}
-        maxLength={64}
-        errorMessage={errFor('config.colors.backgroundColor')}
-      />
-      <InputField
-        label={$t('widgets.form.text_color')}
-        bind:value={draftConfig.colors.textColor}
-        isDisabled={!canUseCustomColors}
-        maxLength={64}
-        errorMessage={errFor('config.colors.textColor')}
-      />
-      <InputField
-        label={$t('widgets.form.border_color')}
-        bind:value={draftConfig.colors.borderColor}
-        isDisabled={!canUseCustomColors}
-        maxLength={64}
-        errorMessage={errFor('config.colors.borderColor')}
-      />
+      <Field.Field>
+        <Field.Label>{$t('widgets.form.primary_color')}</Field.Label>
+        <div class="ui:flex ui:items-center ui:gap-2">
+          <input
+            type="color"
+            bind:value={draftConfig.colors.primaryColor}
+            class="ui:h-9 ui:w-9 ui:cursor-pointer ui:rounded ui:border ui:bg-transparent ui:p-0.5"
+          />
+          <span class="ui:text-muted-foreground ui:font-mono ui:text-sm">{draftConfig.colors.primaryColor}</span>
+        </div>
+        {#if errFor('config.colors.primaryColor')}
+          <Field.Error>{errFor('config.colors.primaryColor')}</Field.Error>
+        {/if}
+      </Field.Field>
+      <Field.Field>
+        <Field.Label>{$t('widgets.form.background_color')}</Field.Label>
+        <div class="ui:flex ui:items-center ui:gap-2">
+          <input
+            type="color"
+            bind:value={draftConfig.colors.backgroundColor}
+            disabled={!canUseCustomColors}
+            class="ui:h-9 ui:w-9 ui:cursor-pointer ui:rounded ui:border ui:bg-transparent ui:p-0.5 disabled:ui:cursor-not-allowed disabled:ui:opacity-50"
+          />
+          <span class="ui:text-muted-foreground ui:font-mono ui:text-sm">{draftConfig.colors.backgroundColor}</span>
+        </div>
+        {#if errFor('config.colors.backgroundColor')}
+          <Field.Error>{errFor('config.colors.backgroundColor')}</Field.Error>
+        {/if}
+      </Field.Field>
+      <Field.Field>
+        <Field.Label>{$t('widgets.form.text_color')}</Field.Label>
+        <div class="ui:flex ui:items-center ui:gap-2">
+          <input
+            type="color"
+            bind:value={draftConfig.colors.textColor}
+            disabled={!canUseCustomColors}
+            class="ui:h-9 ui:w-9 ui:cursor-pointer ui:rounded ui:border ui:bg-transparent ui:p-0.5 disabled:ui:cursor-not-allowed disabled:ui:opacity-50"
+          />
+          <span class="ui:text-muted-foreground ui:font-mono ui:text-sm">{draftConfig.colors.textColor}</span>
+        </div>
+        {#if errFor('config.colors.textColor')}
+          <Field.Error>{errFor('config.colors.textColor')}</Field.Error>
+        {/if}
+      </Field.Field>
+      <Field.Field>
+        <Field.Label>{$t('widgets.form.border_color')}</Field.Label>
+        <div class="ui:flex ui:items-center ui:gap-2">
+          <input
+            type="color"
+            bind:value={draftConfig.colors.borderColor}
+            disabled={!canUseCustomColors}
+            class="ui:h-9 ui:w-9 ui:cursor-pointer ui:rounded ui:border ui:bg-transparent ui:p-0.5 disabled:ui:cursor-not-allowed disabled:ui:opacity-50"
+          />
+          <span class="ui:text-muted-foreground ui:font-mono ui:text-sm">{draftConfig.colors.borderColor}</span>
+        </div>
+        {#if errFor('config.colors.borderColor')}
+          <Field.Error>{errFor('config.colors.borderColor')}</Field.Error>
+        {/if}
+      </Field.Field>
       <InputField
         type="number"
         label={$t('widgets.form.border_radius')}

apps/dashboard/src/lib/features/widget/panels/embed-panel.svelte

@@ -1,5 +1,6 @@
 <script lang="ts">
   import { Button } from '@cio/ui/base/button';
+  import { CopyButton } from '@cio/ui/base/copy-button';
   import * as Tabs from '@cio/ui/base/tabs';
   import { TextareaField } from '@cio/ui/custom/textarea-field';
   import { t } from '$lib/utils/functions/translations';
@@ -26,9 +27,9 @@
     <Tabs.Content value="html" class="mt-4 space-y-3">
       <TextareaField label={$t('widgets.form.embed_code')} value={detail.widget.embedCode} rows={6} readonly />
       <div class="flex flex-wrap gap-2">
-        <Button variant="outline" onclick={() => navigator.clipboard.writeText(detail.widget.embedCode)}>
+        <CopyButton text={detail.widget.embedCode} variant="outline">
           {$t('widgets.actions.copy_embed')}
-        </Button>
+        </CopyButton>
       </div>
     </Tabs.Content>
 
@@ -36,9 +37,9 @@
       <TextareaField label={$t('widgets.embed.url_label')} value={detail.widget.hostedEmbedUrl} rows={2} readonly />
       <p class="ui:text-muted-foreground text-xs">{$t('widgets.embed.url_helper')}</p>
       <div class="flex flex-wrap gap-2">
-        <Button variant="outline" onclick={() => navigator.clipboard.writeText(detail.widget.hostedEmbedUrl)}>
+        <CopyButton text={detail.widget.hostedEmbedUrl} variant="outline">
           {$t('widgets.actions.copy_url')}
-        </Button>
+        </CopyButton>
       </div>
     </Tabs.Content>
   </Tabs.Root>
@@ -50,7 +51,15 @@
         <div class="ui:border-border ui:bg-card/50 flex items-center justify-between rounded-2xl border p-3">
           <div>
             <div class="font-medium">v{version.version}</div>
-            <div class="ui:text-muted-foreground text-xs">{version.publishedAt}</div>
+            <div class="ui:text-muted-foreground text-xs">
+              {new Date(version.publishedAt).toLocaleString(undefined, {
+                year: 'numeric',
+                month: 'short',
+                day: 'numeric',
+                hour: 'numeric',
+                minute: '2-digit'
+              })}
+            </div>
           </div>
           <Button variant="outline" size="sm" onclick={() => onRollback(version.id)}>
             {$t('widgets.actions.restore')}

apps/dashboard/src/lib/features/widget/store/widget-editor.store.svelte.ts

@@ -21,6 +21,8 @@ class WidgetEditorStore {
   selectedCourseIds = $state<string[]>([]);
 
   // ── UI state ───────────────────────────────────────────────────────────────
+  saving = $state(false);
+  publishing = $state(false);
   activePanel = $state<PanelId>('select-courses');
   editingName = $state(false);
   courseSearch = $state('');
@@ -180,43 +182,53 @@ class WidgetEditorStore {
   async saveWidget(silent = false): Promise<boolean> {
     if (!this.detail) return false;
 
+    this.saving = true;
     widgetApi.resetErrors();
 
-    const updatedWidget = await widgetApi.updateWidget(
-      this.detail.widget.id,
-      {
-        name: this.draftName,
-        layoutType: this.draftLayoutType,
-        selectionMode: this.draftSelectionMode,
-        config: this.draftConfig,
-        selectedCourseIds: this.selectedCourseIds
-      },
-      silent
-    );
+    try {
+      const updatedWidget = await widgetApi.updateWidget(
+        this.detail.widget.id,
+        {
+          name: this.draftName,
+          layoutType: this.draftLayoutType,
+          selectionMode: this.draftSelectionMode,
+          config: this.draftConfig,
+          selectedCourseIds: this.selectedCourseIds
+        },
+        silent
+      );
 
-    if (!updatedWidget) return false;
+      if (!updatedWidget) return false;
 
-    await widgetApi.getWidget(this.detail.widget.id);
-    if (widgetApi.widgetDetail) {
-      this.applyDetail(widgetApi.widgetDetail);
+      await widgetApi.getWidget(this.detail.widget.id);
+      if (widgetApi.widgetDetail) {
+        this.applyDetail(widgetApi.widgetDetail);
+      }
+
+      return true;
+    } finally {
+      this.saving = false;
     }
-
-    return true;
   }
 
   async publishWidget() {
-    const saved = await this.saveWidget(true);
-    if (!saved || !this.detail) return;
+    this.publishing = true;
+    try {
+      const saved = await this.saveWidget(true);
+      if (!saved || !this.detail) return;
 
-    const published = await widgetApi.publishWidget(this.detail.widget.id);
-    if (!published) return;
+      const published = await widgetApi.publishWidget(this.detail.widget.id);
+      if (!published) return;
 
-    await widgetApi.getWidget(this.detail.widget.id);
-    if (widgetApi.widgetDetail) {
-      this.applyDetail(widgetApi.widgetDetail);
+      await widgetApi.getWidget(this.detail.widget.id);
+      if (widgetApi.widgetDetail) {
+        this.applyDetail(widgetApi.widgetDetail);
+      }
+
+      this.activePanel = 'embed';
+    } finally {
+      this.publishing = false;
     }
-
-    this.activePanel = 'embed';
   }
 
   async rollback(versionId: string) {

packages/ui/src/custom/widget-layouts/card-grid.svelte

@@ -50,7 +50,7 @@
             {:else}
               <span></span>
             {/if}
-            <span class="cio-cg-meta">{formatLessonsLine(course)}</span>
+            <span class="cio-cg-meta">{formatLessonsLine(course, payload.design.content.showLessonsCount)}</span>
           </div>
         </div>
       </a>

packages/ui/src/custom/widget-layouts/carousel.svelte

@@ -91,7 +91,7 @@
                   <TypeBadge courseType={course.courseType} />
                 </div>
               {/if}
-              <div class="cio-cr-meta">{formatLessonsLine(course)}</div>
+              <div class="cio-cr-meta">{formatLessonsLine(course, payload.design.content.showLessonsCount)}</div>
             </div>
           </a>
         {/each}

packages/ui/src/custom/widget-layouts/compact-list.svelte

@@ -3,6 +3,7 @@
   import Stars from './atoms/stars.svelte';
   import TypeBadge from './atoms/type-badge.svelte';
   import Thumb from './atoms/thumb.svelte';
+  import { formatLessonsLine } from './utils';
 
   let { payload }: { payload: TWidgetPayload } = $props();
 
@@ -25,7 +26,7 @@
           <div class="cio-cl-top">
             <span class="cio-cl-title">{course.title}</span>
             {#if payload.design.content.showLessonsCount}
-              <span class="cio-cl-lessons">{course.lessonCount} lessons</span>
+              <span class="cio-cl-lessons">{formatLessonsLine(course, payload.design.content.showLessonsCount)}</span>
             {/if}
           </div>
           <div class="cio-cl-mid">

packages/ui/src/custom/widget-layouts/course-widget.svelte

@@ -22,15 +22,23 @@
     if (!payload || !rootEl) return;
     ensureWidgetGoogleFontsLoaded(rootEl, payload.design);
   });
+
+  $effect(() => {
+    if (!rootEl) return;
+    const existing = rootEl.querySelector<HTMLStyleElement>('[data-cio-widget-custom-css]');
+    if (existing) existing.remove();
+    if (!customCss) return;
+    const styleEl = document.createElement('style');
+    styleEl.setAttribute('data-cio-widget-custom-css', '');
+    styleEl.textContent = customCss;
+    rootEl.appendChild(styleEl);
+  });
 </script>
 
 {#if !payload}
   <div class="cio-widget cio-widget--empty">No widget payload provided.</div>
 {:else}
   <div bind:this={rootEl} class="cio-widget" style={cssVars} data-cio-layout={payload.layoutType}>
-    {#if customCss}
-      <svelte:element this={'style'} data-cio-widget-custom-css="">{customCss}</svelte:element>
-    {/if}
     {#if payload.layoutType === 'card_grid'}
       <CardGrid {payload} />
     {:else if payload.layoutType === 'tag_filter'}

packages/ui/src/custom/widget-layouts/primary-course.svelte

@@ -31,7 +31,7 @@
           {/if}
           <span class="cio-ph-sep">·</span>
         {/if}
-        <span class="cio-ph-meta">{formatLessonsLine(featured)}</span>
+        <span class="cio-ph-meta">{formatLessonsLine(featured, payload.design.content.showLessonsCount)}</span>
       </div>
       {#if payload.design.content.showCourseTypeBadge || featured.tags.length > 0}
         <div class="cio-ph-badges">

packages/ui/src/custom/widget-layouts/utils.ts

@@ -56,7 +56,8 @@ export function getCourseExcerpt(course: TWidgetPayloadCourse, maxLength = 160):
   return `${flat.slice(0, maxLength - 1).trim()}…`;
 }
 
-export function formatLessonsLine(course: TWidgetPayloadCourse): string {
+export function formatLessonsLine(course: TWidgetPayloadCourse, showLessonsCount?: boolean): string {
+  if (showLessonsCount === false) return '';
   const parts: string[] = [];
   if (course.lessonCount) parts.push(`${course.lessonCount} lessons`);
   if (course.exerciseCount) parts.push(`${course.exerciseCount} exercises`);