Fix download sql and header actions

apps/database-new/app/[thread_id]/[message_id]/CodeEditorContainer.tsx

@@ -11,9 +11,8 @@ function CodeEditorContainer({ children }: { children: ReactNode }) {
   return (
     <div
       className={cn(
-        snap.hideCode ? 'max-w-0' : 'max-w-lg 2xl:max-w-xl',
-        'w-full xl:border-l',
-        'grow flex flex-col h-full'
+        'grow flex flex-col h-full w-full xl:border-l pt-4',
+        snap.hideCode ? 'max-w-0' : 'max-w-lg 2xl:max-w-xl'
       )}
     >
       {children}

apps/database-new/components/Header/HeaderActions.tsx

@@ -1,17 +1,18 @@
 'use client'
 import Link from 'next/link'
-import { useSelectedLayoutSegment } from 'next/navigation'
+
+import { useParams } from 'next/navigation'
 import { Button } from 'ui'
 
 import SaveSchemaDropdown from './SaveSchemaDropdown'
 import ToggleCodeEditorButton from './ToggleCodeEditorButton'
 
 const HeaderActions = () => {
-  const segment = useSelectedLayoutSegment()
+  const params = useParams()
 
   return (
     <div className="flex items-center gap-x-2">
-      {segment && segment.includes('thread') && (
+      {params.thread_id && (
         <div className="hidden xl:flex items-center gap-x-2">
           <ToggleCodeEditorButton />
           <SaveSchemaDropdown />

apps/database-new/components/MonacoEditor/index.tsx

@@ -2,6 +2,7 @@
 
 import Editor, { BeforeMount, EditorProps } from '@monaco-editor/react'
 import { merge } from 'lodash'
+import { useAppStateSnapshot } from '@/lib/state'
 
 interface MonacoEditorProps {
   id: string
@@ -28,6 +29,9 @@ const MonacoEditor = ({
   // const monacoRef = useRef<any>()
   // const { resolvedTheme } = useTheme()
 
+  const snap = useAppStateSnapshot()
+  snap.setSelectedCode(value ?? defaultValue ?? '')
+
   const beforeMount: BeforeMount = (monaco) => {
     // monacoRef.current = monaco
     monaco.editor.defineTheme('supabase', {