WIP - display drawer shadow when open

backend/src/models/base.model.ts

@@ -1,7 +1,38 @@
-import { Model, ModelOptions, QueryContext, snakeCaseMappers } from 'objection';
+import { Model, ModelOptions, QueryContext } from 'objection';
 
 export class BaseModel extends Model {
-  static columnNameMappers = snakeCaseMappers();
+  /**
+   * Use a minimal column mapper: keep property names as-is, but handle
+   * timestamp fields that are stored as created_at/updated_at in the DB.
+   */
+  static columnNameMappers = {
+    parse(dbRow: Record<string, any>) {
+      const mapped: Record<string, any> = {};
+      for (const [key, value] of Object.entries(dbRow || {})) {
+        if (key === 'created_at') {
+          mapped.createdAt = value;
+        } else if (key === 'updated_at') {
+          mapped.updatedAt = value;
+        } else {
+          mapped[key] = value;
+        }
+      }
+      return mapped;
+    },
+    format(model: Record<string, any>) {
+      const mapped: Record<string, any> = {};
+      for (const [key, value] of Object.entries(model || {})) {
+        if (key === 'createdAt') {
+          mapped.created_at = value;
+        } else if (key === 'updatedAt') {
+          mapped.updated_at = value;
+        } else {
+          mapped[key] = value;
+        }
+      }
+      return mapped;
+    },
+  };
 
   id: string;
   createdAt: Date;

backend/src/object/models/dynamic-model.factory.ts

@@ -179,6 +179,7 @@ export class DynamicModelFactory {
    * Convert a field definition to JSON schema property
    */
   private static fieldToJsonSchema(field: FieldDefinition): Record<string, any> {
+    const baseSchema = () => {
       switch (field.type.toUpperCase()) {
       case 'TEXT':
       case 'STRING':
@@ -226,6 +227,18 @@ export class DynamicModelFactory {
       default:
           return { type: 'string' };
       }
+    };
+
+    const schema = baseSchema();
+
+    // Allow null for non-required fields so optional strings/numbers don't fail validation
+    if (!field.isRequired) {
+      return {
+        anyOf: [schema, { type: 'null' }],
+      };
+    }
+
+    return schema;
   }
 
   /**

backend/src/object/object.service.ts

@@ -1179,7 +1179,8 @@ export class ObjectService {
       objectApiName,
       editableData,
     );
-    await boundModel.query().where({ id: recordId }).update(normalizedEditableData);
+    // Use patch to avoid validating or overwriting fields that aren't present in the edit view
+    await boundModel.query().patch(normalizedEditableData).where({ id: recordId });
     const record = await boundModel.query().where({ id: recordId }).first();
     await this.indexRecord(resolvedTenantId, objectApiName, objectDefModel.fields, record);
     return record;

frontend/app.vue

@@ -1,13 +1,11 @@
 <script setup lang="ts">
 import { Toaster } from 'vue-sonner'
-import BottomDrawer from '@/components/BottomDrawer.vue'
 </script>
 
 <template>
   <div>
     <Toaster position="top-right" :duration="4000" richColors />
     <NuxtPage />
-    <BottomDrawer />
   </div>
 </template>
 

frontend/components/BottomDrawer.vue

@@ -11,6 +11,9 @@ import { useSoftphone } from '~/composables/useSoftphone'
 const isDrawerOpen = useState<boolean>('bottomDrawerOpen', () => false)
 const activeTab = useState<string>('bottomDrawerTab', () => 'softphone')
 const drawerHeight = useState<number>('bottomDrawerHeight', () => 240)
+const props = defineProps<{
+  bounds?: { left: number; width: number }
+}>()
 
 const softphone = useSoftphone()
 
@@ -190,9 +193,17 @@ onBeforeUnmount(() => {
 </script>
 
 <template>
-  <div class="pointer-events-none fixed inset-x-0 bottom-0 z-30 flex justify-center px-2">
   <div
-      class="pointer-events-auto w-full border border-border bg-background shadow-xl transition-all duration-200"
+    class="pointer-events-none fixed bottom-0 z-30 flex justify-center px-2"
+    :style="{
+      left: props.bounds?.left ? `${props.bounds.left}px` : '0',
+      width: props.bounds?.width ? `${props.bounds.width}px` : '100vw',
+      right: props.bounds?.width ? 'auto' : '0',
+    }"
+  >
+    <div
+      class="pointer-events-auto w-full border border-border bg-background transition-all duration-200"
+      :class="{ 'shadow-2xl': isDrawerOpen }"
       :style="{ height: `${isDrawerOpen ? drawerHeight : collapsedHeight}px` }"
     >
       <div class="grid grid-cols-3 items-center justify-between border-border px-2 py-2">

frontend/layouts/default.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { ref } from 'vue'
+import { onBeforeUnmount, onMounted, ref } from 'vue'
 import AppSidebar from '@/components/AppSidebar.vue'
 import BottomDrawer from '@/components/BottomDrawer.vue'
 import {
@@ -15,6 +15,9 @@ import { SidebarInset, SidebarProvider, SidebarTrigger } from '@/components/ui/s
 
 const route = useRoute()
 const { breadcrumbs: customBreadcrumbs } = useBreadcrumbs()
+const drawerBounds = useState('bottomDrawerBounds', () => ({ left: 0, width: 0 }))
+const insetRef = ref<any>(null)
+let resizeObserver: ResizeObserver | null = null
 
 const breadcrumbs = computed(() => {
   // If custom breadcrumbs are set by the page, use those
@@ -30,12 +33,47 @@ const breadcrumbs = computed(() => {
     isLast: index === paths.length - 1,
   }))
 })
+
+const resolveInsetEl = (): HTMLElement | null => {
+  const maybeComponent = insetRef.value as any
+  if (!maybeComponent) return null
+  return maybeComponent.$el ? maybeComponent.$el as HTMLElement : (maybeComponent as HTMLElement)
+}
+
+const updateBounds = () => {
+  const el = resolveInsetEl()
+  if (!el || typeof el.getBoundingClientRect !== 'function') return
+  const rect = el.getBoundingClientRect()
+  drawerBounds.value = {
+    left: rect.left,
+    width: rect.width,
+  }
+}
+
+onMounted(() => {
+  updateBounds()
+  const el = resolveInsetEl()
+  if (el && 'ResizeObserver' in window) {
+    resizeObserver = new ResizeObserver(updateBounds)
+    resizeObserver.observe(el)
+  }
+  window.addEventListener('resize', updateBounds)
+})
+
+onBeforeUnmount(() => {
+  const el = resolveInsetEl()
+  if (resizeObserver && el) {
+    resizeObserver.unobserve(el)
+  }
+  resizeObserver = null
+  window.removeEventListener('resize', updateBounds)
+})
 </script>
 
 <template>
   <SidebarProvider>
     <AppSidebar />
-    <SidebarInset class="flex flex-col">
+    <SidebarInset ref="insetRef" class="relative flex flex-col">
       <header
         class="relative z-10 flex h-16 shrink-0 items-center gap-2 bg-background transition-[width,height] ease-linear group-has-data-[collapsible=icon]/sidebar-wrapper:h-12 border-b shadow-md"
       >
@@ -73,7 +111,8 @@ const breadcrumbs = computed(() => {
         <slot />
       </div>
 
-      
+      <!-- Keep BottomDrawer bound to the inset width so it aligns with the sidebar layout -->
+      <BottomDrawer :bounds="drawerBounds" />
     </SidebarInset>
   </SidebarProvider>
 </template>