edit title

src/components/IssueContent.vue

@@ -30,9 +30,16 @@ const cancel = () => {
 <template>
   <div class="issue-content">
     <template v-if="!editing">
-      <v-sheet class="pa-4 cursor-pointer content-sheet" @click="startEdit">
+      <v-hover #default="{ isHovering, props }">
+        <v-sheet
+          v-bind="props"
+          :class="isHovering ? 'px-4' : 'px-0'"
+          class="py-1 cursor-pointer content-sheet"
+          @click="startEdit"
+        >
           {{ text ?? 'click to add content' }}
         </v-sheet>
+      </v-hover>
     </template>
 
     <template v-else>
@@ -50,4 +57,7 @@ const cancel = () => {
 .content-sheet:hover {
   background-color: rgba(var(--v-theme-on-surface), 0.06);
 }
+.v-sheet {
+  transition: padding 0.2s ease-in-out;
+}
 </style>

src/components/IssueDetails.vue

@@ -7,6 +7,7 @@ import type { Issue } from '@/api/issue.api.ts'
 import StatusMenu from '@/components/StatusMenu.vue'
 import AssigneeMenu from '@/components/AssigneeMenu.vue'
 import ReporterInfo from '@/components/ReporterInfo.vue'
+import IssueTitle from '@/components/IssueTitle.vue'
 
 interface Props {
   ckey: string
@@ -40,6 +41,15 @@ async function fetch() {
 
 watchEffect(async () => fetch())
 
+const onTitleChanged = async (title: string) => {
+  if (!issue.value) return
+  const updated = await issueStore.update(issue.value.id, { title })
+  if (updated) {
+    issue.value = updated
+    emit('assigneeChanged', updated)
+  }
+}
+
 const onContentChanged = async (content: string) => {
   if (!issue.value) return
   const updated = await issueStore.update(issue.value.id, { content })
@@ -78,7 +88,8 @@ defineExpose({
 <template>
   <div v-if="issue" class="d-flex flex-column ga-4 pa-4">
     <div>{{ ckey }}</div>
-    <div class="text-uppercase text-title-large">{{ issue.title }}</div>
+
+    <issue-title :text="issue.title" @changed="onTitleChanged" />
 
     <v-card elevation="0" border>
       <v-card-text class="u-grid">

src/components/IssueTitle.vue

@@ -30,9 +30,18 @@ const cancel = () => {
 <template>
   <div class="issue-title">
     <template v-if="!editing">
-      <v-sheet class="pa-4 cursor-pointer title-sheet" @click="startEdit">
+      <v-hover #default="{ isHovering, props }">
-        {{ text ?? 'click to add title' }}
+        <v-sheet
+          v-bind="props"
+          :class="isHovering ? 'px-3' : 'px-0'"
+          class="py-1 cursor-pointer title-sheet"
+          @click="startEdit"
+        >
+          <div class="text-uppercase text-title-large">
+            {{ text ?? 'click to write text' }}
+          </div>
         </v-sheet>
+      </v-hover>
     </template>
 
     <template v-else>
@@ -50,4 +59,8 @@ const cancel = () => {
 .title-sheet:hover {
   background-color: rgba(var(--v-theme-on-surface), 0.06);
 }
+
+.v-sheet {
+  transition: padding 0.2s ease-in-out;
+}
 </style>