memi-board 0.56.2 → 0.58.0

package/dist/runtime/components/CommentForm.vue

@@ -134,69 +134,71 @@ onUnmounted(() => {
 <template>
   <form
     v-if="isSignedIn && canComment"
-    class="flex flex-col gap-2"
+    class="overflow-hidden rounded-xl border border-default bg-default"
     @submit.prevent="handleSubmit"
   >
-    <UTextarea
-      v-model="body"
-      @paste="imageField?.handlePaste($event)"
-      :placeholder="parent ? t('commentForm.replyTo', { name: parent.authorName || t('common.label.user') }) : t('commentForm.placeholder')"
-      :rows="2"
-      autoresize
-      :maxrows="10"
-      :disabled="submitting || aiBusy || isWriteRestricted"
-      :maxlength="COMMENT_BODY_MAX_LENGTH"
-    />
-    <MemiBoardCommentAi v-model="body" v-model:translations="translations" :board-id="boardId"
-      :disabled="submitting || imageBusy || isWriteRestricted" @busy="aiBusy = $event" />
-    <MemiBoardCommentImageField
-      ref="imageField"
-      v-model="image"
-      :post-id="postId"
-      :comment-id="draftId"
-      :disabled="submitting || isWriteRestricted"
-      @busy="imageBusy = $event"
-    />
-    <p
-      v-if="isWriteRestricted && restrictedMessage"
-      class="text-xs text-warning"
-    >
-      {{ restrictedMessage }}
-    </p>
-    <div class="flex justify-between items-center">
-      <span class="text-xs text-dimmed">{{ formatNumber(body.length) }} / {{ formatNumber(COMMENT_BODY_MAX_LENGTH) }}</span>
-      <p
-        v-if="error"
-        class="text-xs text-error"
-      >
+    <div class="flex flex-col gap-3 p-3 sm:p-4">
+      <UTextarea
+        v-model="body"
+        @paste="imageField?.handlePaste($event)"
+        :placeholder="parent ? t('commentForm.replyTo', { name: parent.authorName || t('common.label.user') }) : t('commentForm.placeholder')"
+        :rows="3"
+        autoresize
+        :maxrows="10"
+        :disabled="submitting || aiBusy || isWriteRestricted"
+        :maxlength="COMMENT_BODY_MAX_LENGTH"
+        class="w-full"
+      />
+      <p v-if="isWriteRestricted && restrictedMessage" class="text-xs text-warning">
+        {{ restrictedMessage }}
+      </p>
+      <p v-if="error" class="text-xs text-error" role="alert">
         {{ error }}
       </p>
-      <p
-        v-else-if="notice"
-        class="text-xs text-warning"
-      >
+      <p v-else-if="notice" class="text-xs text-warning" role="status">
         {{ notice }}
       </p>
-      <div class="flex-1" />
-      <UButton
-        v-if="parent"
-        type="button"
-        size="sm"
-        :label="t('common.action.cancel')"
-        color="neutral"
-        variant="ghost"
-        :disabled="imageBusy || submitting || aiBusy"
-        @click="handleCancel"
-      />
-      <UButton
-        type="submit"
-        @pointerdown="imeSafeSubmitPointerDown"
-        @click="imeSafeSubmitClick"
-        size="sm"
-        :label="parent ? t('commentForm.submitReply') : t('commentForm.submit')"
-        :loading="submitting"
-        :disabled="!body.trim() || isWriteRestricted || imageBusy || aiBusy"
+    </div>
+    <div class="flex flex-col gap-3 border-t border-default bg-muted/30 px-3 py-2.5 sm:flex-row sm:items-center sm:px-4">
+      <MemiBoardCommentImageField
+        ref="imageField"
+        v-model="image"
+        :post-id="postId"
+        :comment-id="draftId"
+        :disabled="submitting || isWriteRestricted"
+        compact
+        class="min-w-0 flex-1"
+        @busy="imageBusy = $event"
       />
+      <div class="ms-auto flex shrink-0 flex-wrap items-center justify-end gap-2 sm:gap-3">
+        <MemiBoardCommentAi
+          v-model="body"
+          v-model:translations="translations"
+          :board-id="boardId"
+          :disabled="submitting || imageBusy || isWriteRestricted"
+          @busy="aiBusy = $event"
+        />
+        <span class="text-xs text-dimmed tabular-nums">{{ formatNumber(body.length) }} / {{ formatNumber(COMMENT_BODY_MAX_LENGTH) }}</span>
+        <UButton
+          v-if="parent"
+          type="button"
+          size="sm"
+          :label="t('common.action.cancel')"
+          color="neutral"
+          variant="ghost"
+          :disabled="imageBusy || submitting || aiBusy"
+          @click="handleCancel"
+        />
+        <UButton
+          type="submit"
+          @pointerdown="imeSafeSubmitPointerDown"
+          @click="imeSafeSubmitClick"
+          size="sm"
+          :label="parent ? t('commentForm.submitReply') : t('commentForm.submit')"
+          :loading="submitting"
+          :disabled="!body.trim() || isWriteRestricted || imageBusy || aiBusy"
+        />
+      </div>
     </div>
   </form>
   <component

package/dist/runtime/components/CommentImageField.vue

@@ -9,6 +9,7 @@ const props = defineProps<{
   commentId: string
   modelValue: Attachment | null
   disabled?: boolean
+  compact?: boolean
 }>()
 
 const emit = defineEmits<{
@@ -166,22 +167,25 @@ onUnmounted(() => {
           class="max-h-40 max-w-full rounded-md border border-default object-contain"
         >
       </button>
-      <UButton
-        type="button"
-        icon="i-lucide-x"
-        size="xs"
-        color="neutral"
-        variant="ghost"
-        :aria-label="t('commentForm.removeImage')"
-        :disabled="disabled || uploading"
-        @click="remove"
-      />
+      <UTooltip :text="t('commentForm.removeImage')" :delay-duration="200">
+        <UButton
+          type="button"
+          icon="i-lucide-x"
+          size="xs"
+          color="neutral"
+          variant="ghost"
+          :aria-label="t('commentForm.removeImage')"
+          :disabled="disabled || uploading"
+          @click="remove"
+        />
+      </UTooltip>
     </div>
     <button
       v-else
       type="button"
-      class="rounded-md border border-dashed px-3 py-4 text-left text-xs text-muted transition-colors disabled:cursor-not-allowed disabled:opacity-60"
-      :class="dragOver ? 'border-primary bg-elevated/60' : 'border-default hover:bg-elevated/40'"
+      class="flex items-center gap-2 rounded-md border border-dashed px-3 text-left text-xs text-muted transition-colors disabled:cursor-not-allowed disabled:opacity-60"
+      :class="[compact ? 'py-2.5' : 'py-4', dragOver ? 'border-primary bg-elevated/60' : 'border-default hover:bg-elevated/40']"
+      :title="compact ? t('commentForm.attachNote') : undefined"
       :disabled="disabled || uploading"
       @click="openPicker"
       @dragenter.prevent="dragOver = true"
@@ -189,6 +193,7 @@ onUnmounted(() => {
       @dragleave="onDragLeave"
       @drop.prevent="onDrop"
     >
+      <UIcon v-if="compact" name="i-lucide-image-plus" class="size-4 shrink-0" />
       {{ uploading ? t('commentForm.uploading') : t('commentForm.attachHint') }}
     </button>
     <UProgress
@@ -196,7 +201,7 @@ onUnmounted(() => {
       :model-value="Math.round(progress * 100)"
       size="sm"
     />
-    <p class="text-xs text-dimmed">
+    <p v-if="!compact" class="text-xs text-dimmed">
       {{ t('commentForm.attachNote') }}
     </p>
     <p

package/dist/runtime/components/CommentItem.vue

@@ -13,6 +13,7 @@ import {
   useMemiBoardI18n,
   useMemiBoardModeration,
 } from 'memi-board/runtime'
+import MemiBoardAuthorMenu from './AuthorMenu.vue'
 import MemiBoardCommentAi from './CommentAi.vue'
 import MemiBoardCommentImageField from './CommentImageField.vue'
 import MemiBoardImageLightbox from './ImageLightbox.vue'
@@ -23,6 +24,9 @@ const props = defineProps<{
   postId: string
   now: number
   deleting?: boolean
+  authorProfileTo?: (authorUid: string) => string | undefined
+  authorPostsTo?: (authorUid: string) => string | undefined
+  authorCommentsTo?: (authorUid: string) => string | undefined
 }>()
 
 const emit = defineEmits<{
@@ -143,19 +147,23 @@ async function saveEdit() {
   }
 }
 
-async function toggleBlind() {
-  if (!props.comment.id || !user.value || !canManageBoard(props.comment.boardId)) return
-  const next = !localBlinded.value
-  const confirmed = window.confirm(next
-    ? t('commentItem.blindConfirm')
-    : t('commentItem.unblindConfirm'))
-  if (!confirmed) return
-
+const blindConfirmOpen = ref(false)
+const blindTarget = ref(false)
+function toggleBlind() {
+  if (!props.comment.id || !user.value || !canManageBoard(props.comment.boardId) || blindSaving.value) return
+  editError.value = ''
+  blindTarget.value = !localBlinded.value
+  blindConfirmOpen.value = true
+}
+async function confirmBlind() {
+  if (!props.comment.id || !user.value || !canManageBoard(props.comment.boardId) || blindSaving.value) return
+  const next = blindTarget.value
   blindSaving.value = true
   editError.value = ''
   try {
     await setCommentBlinded(props.comment.id, next, user.value.uid)
     localBlinded.value = next
+    blindConfirmOpen.value = false
     if (next) cancelEdit()
   }
   catch (cause) {
@@ -189,7 +197,17 @@ async function toggleLike() {
     />
     <div class="min-w-0 flex-1">
       <div class="flex items-center gap-2">
-        <span class="text-sm font-medium">{{ comment.authorName ?? t('common.label.anonymous') }}</span>
+        <MemiBoardAuthorMenu
+          v-if="comment.authorUid"
+          :author-uid="comment.authorUid"
+          :author-name="comment.authorName"
+          :author-photo="comment.authorPhoto"
+          :show-avatar="false"
+          :author-profile-to="authorProfileTo"
+          :author-posts-to="authorPostsTo"
+          :author-comments-to="authorCommentsTo"
+        />
+        <span v-else class="text-sm font-medium">{{ comment.authorName ?? t('common.label.anonymous') }}</span>
         <UPopover :content="{ side: 'top' }" :ui="{ content: 'h-auto w-max' }">
           <time
             :datetime="date?.toISOString()"
@@ -275,8 +293,7 @@ async function toggleLike() {
       </div>
       <div v-else>
         <p class="whitespace-pre-wrap break-words text-sm">
-          <span v-if="comment.parentId && comment.replyToName" class="mr-1 text-primary">@{{ comment.replyToName }}</span>
-          {{ displayedBody }}
+          <span v-if="comment.parentId && comment.replyToName" class="mr-1 text-primary">@{{ comment.replyToName }}</span><span v-text="displayedBody" />
         </p>
         <button
           v-if="localImage"
@@ -302,17 +319,18 @@ async function toggleLike() {
       </p>
     </div>
     <div class="flex shrink-0 items-center gap-1">
-      <UButton
-        v-if="isSignedIn && commentLikes && comment.id"
-        icon="i-lucide-heart"
-        size="xs"
-        variant="ghost"
-        :color="isLiked ? 'error' : 'neutral'"
-        :label="String(localLikeCount)"
-        :loading="likePending"
-        :aria-label="isLiked ? t('common.action.unlike') : t('common.action.like')"
-        @click="toggleLike"
-      />
+      <UTooltip v-if="isSignedIn && commentLikes && comment.id" :text="isLiked ? t('common.action.unlike') : t('common.action.like')" :delay-duration="200">
+        <UButton
+          icon="i-lucide-heart"
+          size="xs"
+          variant="ghost"
+          :color="isLiked ? 'error' : 'neutral'"
+          :label="String(localLikeCount)"
+          :loading="likePending"
+          :aria-label="isLiked ? t('common.action.unlike') : t('common.action.like')"
+          @click="toggleLike"
+        />
+      </UTooltip>
       <span
         v-else
         class="flex items-center gap-0.5 px-1 text-xs text-muted"
@@ -321,44 +339,61 @@ async function toggleLike() {
         <UIcon name="i-lucide-heart" class="size-3.5" />
         {{ localLikeCount }}
       </span>
-      <UButton
-        v-if="canEditComment(comment) && comment.id && !localBlinded"
-        icon="i-lucide-pencil"
-        size="xs"
-        color="neutral"
-        variant="ghost"
-        :aria-label="t('commentItem.edit')"
-        :disabled="editing"
-        @click="startEdit"
-      />
-      <UButton
-        v-if="canManageBoard(comment.boardId) && comment.id"
-        :icon="localBlinded ? 'i-lucide-eye' : 'i-lucide-eye-off'"
-        size="xs"
-        :color="localBlinded ? 'neutral' : 'warning'"
-        variant="ghost"
-        :loading="blindSaving"
-        :aria-label="localBlinded ? t('commentItem.unblind') : t('commentItem.blind')"
-        @click="toggleBlind"
-      />
-      <UButton
-        icon="i-lucide-reply"
-        size="xs"
-        color="neutral"
-        variant="ghost"
-        :aria-label="t('common.action.reply')"
-        @click="emit('reply', comment)"
-      />
-      <UButton
-        v-if="canDeleteComment(comment) && comment.id"
-        icon="i-lucide-trash-2"
-        size="xs"
-        variant="ghost"
-        color="error"
-        :loading="deleting"
-        :aria-label="t('commentItem.delete')"
-        @click="emit('delete', comment.id)"
-      />
+      <UTooltip v-if="canEditComment(comment) && comment.id && !localBlinded" :text="t('commentItem.edit')" :delay-duration="200">
+        <UButton
+          icon="i-lucide-pencil"
+          size="xs"
+          color="neutral"
+          variant="ghost"
+          :aria-label="t('commentItem.edit')"
+          :disabled="editing"
+          @click="startEdit"
+        />
+      </UTooltip>
+      <UTooltip v-if="canManageBoard(comment.boardId) && comment.id" :text="localBlinded ? t('commentItem.unblind') : t('commentItem.blind')" :delay-duration="200">
+        <UButton
+          :icon="localBlinded ? 'i-lucide-eye' : 'i-lucide-eye-off'"
+          size="xs"
+          :color="localBlinded ? 'neutral' : 'warning'"
+          variant="ghost"
+          :loading="blindSaving"
+          :aria-label="localBlinded ? t('commentItem.unblind') : t('commentItem.blind')"
+          @click="toggleBlind"
+        />
+      </UTooltip>
+      <UTooltip :text="t('common.action.reply')" :delay-duration="200">
+        <UButton
+          icon="i-lucide-reply"
+          size="xs"
+          color="neutral"
+          variant="ghost"
+          :aria-label="t('common.action.reply')"
+          @click="emit('reply', comment)"
+        />
+      </UTooltip>
+      <UTooltip v-if="canDeleteComment(comment) && comment.id" :text="t('commentItem.delete')" :delay-duration="200">
+        <UButton
+          icon="i-lucide-trash-2"
+          size="xs"
+          variant="ghost"
+          color="error"
+          :loading="deleting"
+          :aria-label="t('commentItem.delete')"
+          @click="emit('delete', comment.id)"
+        />
+      </UTooltip>
     </div>
+    <UModal v-model:open="blindConfirmOpen" :title="t(blindTarget ? 'commentItem.blind' : 'commentItem.unblind')" :dismissible="!blindSaving" :close="blindSaving ? false : undefined">
+      <template #body>
+        <div class="space-y-4">
+          <p class="text-sm text-muted">{{ t(blindTarget ? 'commentItem.blindConfirm' : 'commentItem.unblindConfirm') }}</p>
+          <p v-if="editError" role="alert" class="text-sm text-error">{{ editError }}</p>
+          <div class="flex flex-wrap justify-end gap-2">
+            <UButton color="neutral" variant="outline" :label="t('common.action.cancel')" :disabled="blindSaving" @click="blindConfirmOpen = false" />
+            <UButton :label="t('common.action.confirm')" :loading="blindSaving" @click="confirmBlind" />
+          </div>
+        </div>
+      </template>
+    </UModal>
   </div>
 </template>

package/dist/runtime/components/CommentList.vue

@@ -9,7 +9,13 @@ import {
 import MemiBoardCommentSkeleton from './CommentSkeleton.vue'
 import MemiBoardCommentThread from './CommentThread.vue'
 
-const props = defineProps<{ boardId: string, postId: string }>()
+const props = defineProps<{
+  boardId: string
+  postId: string
+  authorProfileTo?: (authorUid: string) => string | undefined
+  authorPostsTo?: (authorUid: string) => string | undefined
+  authorCommentsTo?: (authorUid: string) => string | undefined
+}>()
 
 const { t } = useMemiBoardI18n()
 
@@ -99,6 +105,9 @@ onUnmounted(() => {
       :board-id="boardId"
       :post-id="postId"
       :now="now"
+      :author-profile-to="authorProfileTo"
+      :author-posts-to="authorPostsTo"
+      :author-comments-to="authorCommentsTo"
     />
 
     <div

package/dist/runtime/components/CommentThread.vue

@@ -6,7 +6,15 @@ import MemiBoardCommentForm from './CommentForm.vue'
 import MemiBoardCommentItem from './CommentItem.vue'
 import MemiBoardCommentSkeleton from './CommentSkeleton.vue'
 
-const props = defineProps<{ boardId: string, postId: string, root: CommentModel, now: number }>()
+const props = defineProps<{
+  boardId: string
+  postId: string
+  root: CommentModel
+  now: number
+  authorProfileTo?: (authorUid: string) => string | undefined
+  authorPostsTo?: (authorUid: string) => string | undefined
+  authorCommentsTo?: (authorUid: string) => string | undefined
+}>()
 
 const { t } = useMemiBoardI18n()
 
@@ -81,6 +89,9 @@ async function handleDelete(comment: CommentModel) {
       :board-id="boardId"
       :post-id="postId"
       :now="now"
+      :author-profile-to="authorProfileTo"
+      :author-posts-to="authorPostsTo"
+      :author-comments-to="authorCommentsTo"
       :deleting="deletingId === root.id"
       @reply="startReply"
       @delete="handleDelete(root)"
@@ -104,8 +115,11 @@ async function handleDelete(comment: CommentModel) {
         :key="reply.id"
         :comment="reply"
         :board-id="boardId"
-      :post-id="postId"
+        :post-id="postId"
         :now="now"
+        :author-profile-to="authorProfileTo"
+        :author-posts-to="authorPostsTo"
+        :author-comments-to="authorCommentsTo"
         :deleting="deletingId === reply.id"
         :class="(reply.depth ?? 1) >= 2 ? 'ml-4 sm:ml-8' : ''"
         @reply="startReply"

package/dist/runtime/components/CustomFieldEditor.vue

@@ -61,14 +61,16 @@ function remove(index: number) {
           @update:model-value="emit('dirty')"
         />
       </div>
-      <UButton
-        class="shrink-0"
-        icon="i-lucide-x"
-        color="neutral"
-        variant="ghost"
-        :aria-label="t('common.action.delete')"
-        @click="remove(index)"
-      />
+      <UTooltip :text="t('common.action.delete')" :delay-duration="200">
+        <UButton
+          class="shrink-0"
+          icon="i-lucide-x"
+          color="neutral"
+          variant="ghost"
+          :aria-label="t('common.action.delete')"
+          @click="remove(index)"
+        />
+      </UTooltip>
     </div>
     <div>
       <UButton

package/dist/runtime/components/Detail.vue

@@ -271,15 +271,17 @@ watch(() => props.postId, () => {
             {{ shownTitle }}
           </h1>
         </div>
-        <UButton
-          icon="i-lucide-arrow-left"
-          :aria-label="t('detail.backToList')"
-          color="neutral"
-          variant="ghost"
-          size="sm"
-          class="shrink-0"
-          @click="emit('list')"
-        />
+        <UTooltip :text="t('detail.backToList')" :delay-duration="200">
+          <UButton
+            icon="i-lucide-arrow-left"
+            :aria-label="t('detail.backToList')"
+            color="neutral"
+            variant="ghost"
+            size="sm"
+            class="shrink-0"
+            @click="emit('list')"
+          />
+        </UTooltip>
       </div>
       <div
         v-if="post.tags?.length"
@@ -435,7 +437,13 @@ watch(() => props.postId, () => {
       <h2 class="text-sm font-medium text-muted">
         {{ t('detail.comments') }}
       </h2>
-      <MemiBoardCommentList :board-id="boardId" :post-id="postId" />
+      <MemiBoardCommentList
+        :board-id="boardId"
+        :post-id="postId"
+        :author-profile-to="authorProfileTo"
+        :author-posts-to="authorPostsTo"
+        :author-comments-to="authorCommentsTo"
+      />
       <MemiBoardCommentForm :board-id="boardId" :post-id="postId" />
     </section>
 

package/dist/runtime/components/Editor.vue

@@ -50,7 +50,7 @@ const emit = defineEmits<{ saved: [id: string], cancel: [] }>()
 
 const { user, isSignedIn, isWriteRestricted, restrictedMessage, canManageBoard } = useMemiBoardAuth()
 const resolvedBoardId = computed(() => props.boardId || props.fixedCategory || '')
-const { createPostId, getPost, createPost, updatePost, resolveUniqueSlug, setPostPinned } = useMemiBoardPosts(resolvedBoardId)
+const { createPostId, getPost, createPost, updatePost, setPostPinned } = useMemiBoardPosts(resolvedBoardId)
 const { getBoard, ensureSettings } = useMemiBoardSettings()
 // 보드 설정 언어 → 호스트 언어 순.
 const { t, dir, locale, translationEnabled, aiEnabled } = useMemiBoardI18n({ boardLocale: () => getBoard(resolvedBoardId.value)?.locale })
@@ -1161,9 +1161,6 @@ async function handleSubmit() {
 
   saving.value = true
   submitHint.value = t('editor.hint.reviewing')
-  // 새 글 slug 중복 확인을 검열과 동시에 시작 — 검열에 걸리면 결과만 버린다.
-  const slugPromise = !props.postId && !imageBoard ? resolveUniqueSlug(title.value) : null
-  slugPromise?.catch(() => {})
   try {
     const plain = plainTextFromHtml(content.value)
     const moderationText = `${title.value}\n${plain}`
@@ -1226,7 +1223,6 @@ async function handleSubmit() {
     else {
       const id = await createPost({
         ...payload,
-        slug: (await slugPromise) ?? undefined,
         postId: attachmentNamespace.value,
         authorUid: user.value.uid,
         authorName: user.value.displayName,