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.

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>