From 03dcf812a59160abaef31bea6519a50716163321 Mon Sep 17 00:00:00 2001
From: Rotimi Best <best@classroomio.com>
Date: Sun, 7 Jun 2026 23:21:19 +0100
Subject: [PATCH] feat: fit ai chat trigger to center of page

- Updated the CSS classes for the AI assistant bar to adjust positioning based on the new side panel width variable.
- Introduced a new `onWidthPreview` prop in the SidePanelRail component to handle live resizing and update the side panel width dynamically.
- Added width state management in the SidePanelStore to ensure proper width handling during panel interactions.
- Improved layout handling in the course layout component to accommodate the new side panel width adjustments.
---
 .../ai-assistant/content-ask-ai-bar.svelte    |  4 +--
 .../side-panel/side-panel-rail.svelte         | 26 +++++++++++++------
 .../features/side-panel/utils/store.svelte.ts |  2 ++
 .../routes/(app)/courses/[id]/+layout.svelte  |  8 ++++--
 4 files changed, 28 insertions(+), 12 deletions(-)

diff --git a/apps/dashboard/src/lib/features/ai-assistant/content-ask-ai-bar.svelte b/apps/dashboard/src/lib/features/ai-assistant/content-ask-ai-bar.svelte
index 3d3fef5b..88b245fc 100644
--- a/apps/dashboard/src/lib/features/ai-assistant/content-ask-ai-bar.svelte
+++ b/apps/dashboard/src/lib/features/ai-assistant/content-ask-ai-bar.svelte
@@ -114,7 +114,7 @@
 
 {#if expanded}
   <div
-    class="ui:bg-background ui:border-border fixed right-0 bottom-0 left-0 z-40 border-t py-3 shadow-sm md:left-[var(--sidebar-width,0px)]"
+    class="ui:bg-background ui:border-border fixed right-0 bottom-0 left-0 z-40 border-t py-3 shadow-sm md:right-[var(--side-panel-width,0px)] md:left-[var(--sidebar-width,0px)]"
     in:fly={expandIn}
     out:fly={expandOut}
   >
@@ -135,7 +135,7 @@
   </div>
 {:else}
   <div
-    class="pointer-events-none fixed right-0 bottom-4 left-0 z-40 md:left-[var(--sidebar-width,0px)]"
+    class="pointer-events-none fixed right-0 bottom-4 left-0 z-40 md:right-[var(--side-panel-width,0px)] md:left-[var(--sidebar-width,0px)]"
     in:fade={collapseIn}
     out:fade={collapseOut}
   >
diff --git a/apps/dashboard/src/lib/features/side-panel/side-panel-rail.svelte b/apps/dashboard/src/lib/features/side-panel/side-panel-rail.svelte
index 9a86530a..1afcd227 100644
--- a/apps/dashboard/src/lib/features/side-panel/side-panel-rail.svelte
+++ b/apps/dashboard/src/lib/features/side-panel/side-panel-rail.svelte
@@ -5,7 +5,16 @@
   import { t } from '$lib/utils/functions/translations';
   import { sidePanel } from './utils/store.svelte';
 
-  let railShellElement: HTMLDivElement | null = $state(null);
+  interface Props {
+    /**
+     * Live-resize hook. The host writes `--side-panel-width` directly to the
+     * shared shell element so the panel and fixed siblings (e.g. the Ask AI
+     * bar) follow the drag without a per-frame reactivity round-trip.
+     */
+    onWidthPreview?: (width: number) => void;
+  }
+
+  let { onWidthPreview }: Props = $props();
 
   let railWidth = $state(0);
   let isWidthLoaded = $state(false);
@@ -65,6 +74,12 @@
     isWidthLoaded = true;
   });
 
+  // Publish the effective width so the shared ancestor can expose it as a CSS
+  // variable that fixed siblings (e.g. the Ask AI bar) can offset against.
+  $effect(() => {
+    sidePanel.width = activeDefinition ? railWidth : 0;
+  });
+
   $effect(() => {
     if (!isWidthLoaded) return;
 
@@ -100,7 +115,7 @@
       startWidth,
       resolveWidth: ({ startWidth, deltaX }) => clampWidth(startWidth - deltaX),
       onPreview: (width) => {
-        railShellElement?.style.setProperty('--side-panel-width', `${width}px`);
+        onWidthPreview?.(width);
       },
       onCommit: ({ width }) => {
         railWidth = width;
@@ -129,12 +144,7 @@
 
 {#if activeDefinition}
   {@const def = activeDefinition}
-  <div
-    bind:this={railShellElement}
-    data-side-panel-resizing={isRailResizing}
-    class="contents"
-    style={`--side-panel-width: ${railWidth}px;`}
-  >
+  <div data-side-panel-resizing={isRailResizing} class="contents">
     <div class="hidden shrink-0 md:block md:w-(--side-panel-width)"></div>
 
     <aside
diff --git a/apps/dashboard/src/lib/features/side-panel/utils/store.svelte.ts b/apps/dashboard/src/lib/features/side-panel/utils/store.svelte.ts
index 8807f76e..b1f9efe8 100644
--- a/apps/dashboard/src/lib/features/side-panel/utils/store.svelte.ts
+++ b/apps/dashboard/src/lib/features/side-panel/utils/store.svelte.ts
@@ -5,6 +5,7 @@ class SidePanelStore {
 
   activePanelId = $state<string | null>(null);
   panelProps = $state<Record<string, unknown>>({});
+  width = $state(0);
 
   register(definition: SidePanelDefinition) {
     this.definitions.set(definition.id, definition);
@@ -48,6 +49,7 @@ class SidePanelStore {
   close() {
     this.activePanelId = null;
     this.panelProps = {};
+    this.width = 0;
   }
 
   closeIfScope(scope: SidePanelScope) {
diff --git a/apps/dashboard/src/routes/(app)/courses/[id]/+layout.svelte b/apps/dashboard/src/routes/(app)/courses/[id]/+layout.svelte
index 5f71e0ea..bf5b4bfd 100644
--- a/apps/dashboard/src/routes/(app)/courses/[id]/+layout.svelte
+++ b/apps/dashboard/src/routes/(app)/courses/[id]/+layout.svelte
@@ -122,6 +122,10 @@
     sidebarProviderElement?.style.setProperty('--sidebar-width', `${nextWidth}px`);
   }
 
+  function handleSidePanelWidthPreview(width: number) {
+    sidebarProviderElement?.style.setProperty('--side-panel-width', `${width}px`);
+  }
+
   onMount(() => {
     try {
       const storedWidth = Number(localStorage.getItem(COURSE_SIDEBAR_STORAGE_KEY));
@@ -185,7 +189,7 @@
 <Sidebar.Provider
   bind:ref={sidebarProviderElement}
   data-sveltekit-preload-data="off"
-  style={`--sidebar-width: ${sidebarWidth}px;`}
+  style={`--sidebar-width: ${sidebarWidth}px; --side-panel-width: ${sidePanel.width}px;`}
 >
   <CourseSidebar
     {path}
@@ -224,5 +228,5 @@
     {/if}
   </Sidebar.Inset>
 
-  <SidePanelRail />
+  <SidePanelRail onWidthPreview={handleSidePanelWidthPreview} />
 </Sidebar.Provider>