feat(review): ability to resize review card editor (#66)

Author: larbish

src/app/src/components/content/ContentCardReview.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import type { DraftItem, DatabaseItem, DatabasePageItem } from '../../types'
 import type { PropType } from 'vue'
-import { ref, computed, nextTick, watch } from 'vue'
+import { ref, computed, nextTick, watch, onMounted, onUnmounted } from 'vue'
 import { DraftStatus, ContentFileExtension } from '../../types'
 import { getFileExtension } from '../../utils/file'
 import { generateContentFromDocument, isEqual } from '../../utils/content'
@@ -25,6 +25,46 @@ const isLoadingContent = ref(false)
 const isOpen = ref(false)
 const isAutomaticFormattingDetected = ref(false)
 
+const height = ref(200)
+const isResizing = ref(false)
+const resizeStartY = ref(0)
+const resizeStartHeight = ref(0)
+const MIN_HEIGHT = 200
+const MAX_HEIGHT = 600
+
+function startResize(event: MouseEvent) {
+  event.preventDefault()
+  isResizing.value = true
+  resizeStartY.value = event.clientY
+  resizeStartHeight.value = height.value
+}
+
+function handleMouseMove(event: MouseEvent) {
+  if (!isResizing.value) return
+
+  event.preventDefault()
+  const deltaY = event.clientY - resizeStartY.value
+  const newHeight = resizeStartHeight.value + deltaY
+
+  // Limit to constraints
+  height.value = Math.min(MAX_HEIGHT, Math.max(MIN_HEIGHT, newHeight))
+}
+
+function handleMouseUp() {
+  if (!isResizing.value) return
+  isResizing.value = false
+}
+
+onMounted(() => {
+  document.addEventListener('mousemove', handleMouseMove)
+  document.addEventListener('mouseup', handleMouseUp)
+})
+
+onUnmounted(() => {
+  document.removeEventListener('mousemove', handleMouseMove)
+  document.removeEventListener('mouseup', handleMouseUp)
+})
+
 const language = computed(() => {
   const ext = getFileExtension(props.draftItem.fsPath)
   switch (ext) {
@@ -65,7 +105,6 @@ async function initializeEditor() {
       language: language.value,
       colorMode: ui.colorMode,
       editorOptions: {
-        // hide unchanged regions
         hideUnchangedRegions: {
           enabled: true,
         },
@@ -91,7 +130,10 @@ async function initializeEditor() {
     :draft-item="draftItem"
   >
     <template #open>
-      <div class="bg-elevated h-[200px]">
+      <div
+        class="bg-elevated relative"
+        :style="{ height: `${height}px` }"
+      >
         <div
           v-if="isLoadingContent"
           class="p-4 flex items-center justify-center h-full"
@@ -116,6 +158,18 @@ async function initializeEditor() {
             class="w-full h-full"
           />
         </div>
+
+        <!-- Resize handle -->
+        <div
+          class="absolute bottom-0 left-0 right-0 h-1 cursor-row-resize bg-transparent hover:bg-accented transition-colors duration-200 group"
+          :class="{ 'bg-accented': isResizing }"
+          @mousedown="startResize"
+        >
+          <div
+            class="absolute bottom-0 left-1/2 transform -translate-x-1/2 h-1 w-8 bg-inverted rounded-t opacity-0 group-hover:opacity-100 transition-opacity duration-200"
+            :class="{ 'opacity-100': isResizing }"
+          />
+        </div>
       </div>
     </template>
   </ItemCardReview>

src/app/src/composables/useMonaco.ts

@@ -47,14 +47,8 @@ export function useMonaco(target: Ref<HTMLElement | undefined>, options: UseMona
       lineNumbers: 'off',
       readOnly: options.readOnly ?? false,
       wordWrap: 'on',
+      automaticLayout: true,
       overflowWidgetsDomNode: monacoPortal,
-      scrollbar: options.readOnly
-        ? {
-            vertical: 'hidden',
-            horizontal: 'hidden',
-            handleMouseWheel: false,
-          }
-        : undefined,
       ...options.editorOptions,
     })
 

src/app/src/composables/useMonacoDiff.ts

@@ -1,4 +1,4 @@
-import { watch, unref, type Ref } from 'vue'
+import { watch, unref, type Ref, shallowRef } from 'vue'
 import type { editor as Editor } from 'modern-monaco/editor-core'
 import { setupMonaco } from '../utils/monaco/index'
 
@@ -11,7 +11,7 @@ export interface UseMonacoDiffOptions {
 }
 
 export function useMonacoDiff(target: Ref, options: UseMonacoDiffOptions) {
-  let editor: Editor.IStandaloneDiffEditor | null = null
+  const editor = shallowRef<Editor.IStandaloneDiffEditor | null>(null)
   let isInitialized = false
 
   const getTheme = (mode: 'light' | 'dark' = 'dark') => {
@@ -25,7 +25,7 @@ export function useMonacoDiff(target: Ref, options: UseMonacoDiffOptions) {
     const monaco = await setupMonaco()
     const colorMode = unref(options.colorMode) || 'dark'
 
-    editor = monaco.createDiffEditor(el, {
+    editor.value = monaco.createDiffEditor(el, {
       theme: getTheme(colorMode),
       lineNumbers: 'off',
       readOnly: true,
@@ -37,15 +37,14 @@ export function useMonacoDiff(target: Ref, options: UseMonacoDiffOptions) {
       ...options.editorOptions,
     })
 
-    // Watch for color mode changes
     watch(options.colorMode, (newMode) => {
-      editor?.updateOptions({
+      editor.value?.updateOptions({
         // @ts-expect-error -- theme is missing from IDiffEditorOptions
         theme: getTheme(newMode),
       })
     })
 
-    editor.setModel({
+    editor.value.setModel({
       original: monaco.editor.createModel(options.original, options.language),
       modified: monaco.editor.createModel(options.modified, options.language),
     })
@@ -63,15 +62,15 @@ export function useMonacoDiff(target: Ref, options: UseMonacoDiffOptions) {
       }
       else if (!el && isInitialized) {
         isInitialized = false
-        editor?.dispose()
-        editor = null
+        editor.value?.dispose()
+        editor.value = null
       }
     },
     { immediate: true, flush: 'post' },
   )
 
   const setOptions = (opts: Editor.IStandaloneDiffEditorConstructionOptions) => {
-    editor?.updateOptions(opts)
+    editor.value?.updateOptions(opts)
   }
 
   return {