fix: Use auto resizable Textarea

desktop/package.json

@@ -14,6 +14,7 @@
     "@tauri-apps/plugin-dialog": "^2.4.0",
     "@tauri-apps/plugin-opener": "^2",
     "@tauri-apps/plugin-sql": "~2",
+    "@vueuse/core": "^14.0.0",
     "fuse.js": "^7.1.0",
     "marked": "^16.3.0",
     "shiki": "^3.13.0",

desktop/src/components/NoteCreator.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { ref, computed } from 'vue';
 import Button from './Button.vue';
-import ContentEditable from './ContentEditable.vue';
+import Textarea from './Textarea.vue';
 
 const noteContent = ref('');
 
@@ -16,6 +16,7 @@ const canPost = computed(() => {
 });
 
 const createNote = () => {
+  console.log(noteContent.value);
   if (canPost.value) {
     emit('create', noteContent.value);
     noteContent.value = '';
@@ -32,11 +33,12 @@ const handleKeydown = (e: KeyboardEvent) => {
 <template>
   <div class="note-creator">
     <!-- Input Area -->
-    <ContentEditable
+    <Textarea
+      class="textarea"
       v-model="noteContent"
       @keydown="handleKeydown"
-      placeholder="Share your thoughts..."
-      min-height="120px"
+      placeholder="What's on your mind?"
+      :rows="2"
     />
 
     <!-- Actions -->

desktop/src/components/NoteItem.vue

@@ -2,7 +2,7 @@
 import { ref, onMounted, watch } from 'vue';
 import { renderMarkdown } from '../utils/markdown';
 import Button from './Button.vue';
-import ContentEditable from './ContentEditable.vue';
+import Textarea from './Textarea.vue';
 import ConfirmModal from './ConfirmModal.vue';
 import '../styles/markdown.css';
 
@@ -210,7 +210,7 @@ const formatDate = (date: Date) => {
       ></div>
 
       <div v-if="isEditing" class="edit-container">
-        <ContentEditable
+        <Textarea
           v-model="editContent"
           @keydown="handleEditKeydown"
           autofocus

desktop/src/components/Textarea.vue

@@ -0,0 +1,100 @@
+<script setup lang="ts">
+import { useTextareaAutosize } from '@vueuse/core';
+
+interface Props {
+  modelValue: string;
+  placeholder?: string;
+  disabled?: boolean;
+  autofocus?: boolean;
+  rows?: number;
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  placeholder: '',
+  disabled: false,
+  autofocus: false,
+  rows: 2,
+  modelValue: '',
+});
+
+const { textarea, input } = useTextareaAutosize({
+  styleProp: 'minHeight',
+  input: props.modelValue,
+});
+
+const emit = defineEmits<{
+  'update:modelValue': [value: string];
+  keydown: [event: KeyboardEvent];
+}>();
+
+const handleInput = (e: Event) => {
+  const target = e.target as HTMLTextAreaElement;
+  emit('update:modelValue', target.value);
+};
+
+const handleKeydown = (e: KeyboardEvent) => {
+  emit('keydown', e);
+};
+</script>
+
+<template>
+  <textarea
+    ref="textarea"
+    v-model="input"
+    @input="handleInput"
+    @keydown="handleKeydown"
+    :placeholder="placeholder"
+    :disabled="disabled"
+    :autofocus="autofocus"
+    :rows="rows"
+    class="textarea"
+  ></textarea>
+</template>
+
+<style scoped>
+.textarea {
+  -ms-overflow-style: none;
+  scrollbar-width: none;
+  width: 100%;
+  background-color: transparent;
+  color: var(--color-text-primary);
+  border: 2px solid var(--color-border);
+  font-size: 1rem;
+  line-height: 1.6;
+  transition:
+    border-color 0.2s,
+    background-color 0.2s;
+  border-radius: 0.5rem;
+  padding: 0.75rem;
+  outline: none;
+  box-sizing: border-box;
+  font-family: inherit;
+  resize: none;
+  overflow-y: hidden;
+}
+
+.textarea::-webkit-scrollbar {
+  display: none;
+}
+
+.textarea::placeholder {
+  color: var(--color-text-secondary);
+  opacity: 1;
+}
+
+.textarea:hover:not(:disabled) {
+  border-color: var(--color-border-hover);
+  background-color: var(--color-surface);
+}
+
+.textarea:focus:not(:disabled),
+.textarea:focus-visible:not(:disabled) {
+  border-color: var(--color-border-active);
+}
+
+.textarea:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+  user-select: none;
+}
+</style>