From 6a005ed4bc5ea571bb493e656709fd5f81f2692c Mon Sep 17 00:00:00 2001
From: mehm8128 <mehm8128@gmail.com>
Date: Tue, 12 Dec 2023 17:29:51 +0900
Subject: [PATCH 1/3] =?UTF-8?q?=E3=83=A2=E3=83=BC=E3=83=80=E3=83=AB?=
 =?UTF-8?q?=E3=81=8B=E3=82=89=E3=82=AF=E3=83=AA=E3=83=83=E3=83=97=E3=83=95?=
 =?UTF-8?q?=E3=82=A9=E3=83=AB=E3=83=80=E3=82=92=E4=BD=9C=E3=82=8C=E3=82=8B?=
 =?UTF-8?q?=E3=82=88=E3=81=86=E3=81=AB?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../Modal/ClipCreateModal/ClipCreateModal.vue |  86 +++++----------
 .../Modal/ClipCreateModal/ClipFolderNew.vue   | 102 ++++++++++++++++++
 src/composables/clips/createClip.ts           |  44 ++++++++
 3 files changed, 174 insertions(+), 58 deletions(-)
 create mode 100644 src/components/Modal/ClipCreateModal/ClipFolderNew.vue
 create mode 100644 src/composables/clips/createClip.ts

diff --git a/src/components/Modal/ClipCreateModal/ClipCreateModal.vue b/src/components/Modal/ClipCreateModal/ClipCreateModal.vue
index 025f529c2..90926378b 100644
--- a/src/components/Modal/ClipCreateModal/ClipCreateModal.vue
+++ b/src/components/Modal/ClipCreateModal/ClipCreateModal.vue
@@ -4,71 +4,31 @@
       <inline-markdown :class="$style.subtitle" :content="messageContent" />
     </template>
     <template #default>
-      <clip-folder-element
-        v-for="clipFolder in sortedClipFolders"
-        :key="clipFolder.id"
-        :folder-name="clipFolder.name"
-        :is-selected="isSelected.has(clipFolder.id)"
-        @click="toggleClip(clipFolder.id)"
-      />
+      <div>
+        <clip-folder-element
+          v-for="clipFolder in sortedClipFolders"
+          :key="clipFolder.id"
+          :folder-name="clipFolder.name"
+          :is-selected="isSelected.has(clipFolder.id)"
+          @click="toggleClip(clipFolder.id)"
+        />
+        <clip-folder-new @create-clip-folder="handleCreateClipFolder" />
+      </div>
     </template>
   </modal-frame>
 </template>
 
-<script lang="ts">
-import type { Ref } from 'vue'
-import { computed, ref } from 'vue'
-import apis from '/@/lib/apis'
-import type { MessageId, ClipFolderId } from '/@/types/entity-ids'
-import { useToastStore } from '/@/store/ui/toast'
-import type { AxiosError } from 'axios'
-import { useMessagesStore } from '/@/store/entities/messages'
-import useSortedClipFolders from '/@/composables/clips/useSortedClipFolders'
-
-const useCreateClip = (
-  props: { messageId: MessageId },
-  isSelected: Ref<Set<ClipFolderId>>
-) => {
-  const { addSuccessToast, addErrorToast } = useToastStore()
-
-  const createClip = async (clipFolderId: ClipFolderId) => {
-    try {
-      await apis.clipMessage(clipFolderId, {
-        messageId: props.messageId
-      })
-      isSelected.value.add(clipFolderId)
-      addSuccessToast('クリップフォルダに追加しました')
-    } catch (e) {
-      if ((e as AxiosError).response?.status === 409) {
-        isSelected.value.add(clipFolderId)
-        addErrorToast('すでに追加されています')
-        return
-      } else {
-        addErrorToast('追加に失敗しました')
-      }
-      throw e
-    }
-  }
-  const deleteClip = async (clipFolderId: ClipFolderId) => {
-    await apis.unclipMessage(clipFolderId, props.messageId)
-    isSelected.value.delete(clipFolderId)
-    addSuccessToast('クリップフォルダから削除しました')
-  }
-  const toggleClip = async (clipFolderId: ClipFolderId) => {
-    if (isSelected.value.has(clipFolderId)) {
-      await deleteClip(clipFolderId)
-    } else {
-      await createClip(clipFolderId)
-    }
-  }
-  return { toggleClip }
-}
-</script>
-
 <script lang="ts" setup>
 import ModalFrame from '../Common/ModalFrame.vue'
 import ClipFolderElement from './ClipFolderElement.vue'
 import InlineMarkdown from '/@/components/UI/InlineMarkdown.vue'
+import { computed, ref } from 'vue'
+import apis from '/@/lib/apis'
+import type { ClipFolderId } from '/@/types/entity-ids'
+import { useMessagesStore } from '/@/store/entities/messages'
+import useSortedClipFolders from '/@/composables/clips/useSortedClipFolders'
+import { useCreateClip } from '/@/composables/clips/createClip'
+import ClipFolderNew from './ClipFolderNew.vue'
 
 const props = defineProps<{
   messageId: string
@@ -85,7 +45,11 @@ apis.getMessageClips(props.messageId).then(res => {
 })
 
 const messageContent = computed(() => message.value?.content ?? '')
-const { toggleClip } = useCreateClip(props, isSelected)
+const { toggleClip } = useCreateClip(props.messageId, isSelected)
+
+const handleCreateClipFolder = (newClipFolderId: ClipFolderId) => {
+  toggleClip(newClipFolderId)
+}
 </script>
 
 <style lang="scss" module>
@@ -105,4 +69,10 @@ const { toggleClip } = useCreateClip(props, isSelected)
     margin-bottom: 0;
   }
 }
+
+.buttonContainer {
+  display: flex;
+  justify-content: center;
+  margin-top: 16px;
+}
 </style>
diff --git a/src/components/Modal/ClipCreateModal/ClipFolderNew.vue b/src/components/Modal/ClipCreateModal/ClipFolderNew.vue
new file mode 100644
index 000000000..c5921dcbb
--- /dev/null
+++ b/src/components/Modal/ClipCreateModal/ClipFolderNew.vue
@@ -0,0 +1,102 @@
+<template>
+  <div :class="$style.container">
+    <a-icon :class="$style.icon" mdi name="bookmark" />
+    <div :class="$style.inputContainer">
+      <input
+        v-model="clipFolderName"
+        type="text"
+        :class="$style.input"
+        placeholder="クリップフォルダを新規作成"
+      />
+      <length-count :val="clipFolderName" :max-length="30" />
+    </div>
+    <button
+      :class="$style.button"
+      :disabled="clipFolderName.length === 0 || isExceeded || adding"
+      @click="createClipFolder"
+    >
+      <a-icon name="plus" mdi :class="$style.icon" />
+    </button>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { ref, reactive } from 'vue'
+import AIcon from '/@/components/UI/AIcon.vue'
+import useMaxLength from '/@/composables/utils/useMaxLength'
+import apis from '/@/lib/apis'
+import { useToastStore } from '/@/store/ui/toast'
+import LengthCount from '/@/components/UI/LengthCount.vue'
+import type { ClipFolderId } from '/@/types/entity-ids'
+
+const emit = defineEmits<{
+  (e: 'createClipFolder', id: ClipFolderId): void
+}>()
+
+const { addErrorToast } = useToastStore()
+
+const clipFolderName = ref('')
+const adding = ref(false)
+const { isExceeded } = useMaxLength(
+  reactive({ val: clipFolderName, maxLength: 30 })
+)
+
+const createClipFolder = async () => {
+  adding.value = true
+  try {
+    const newClipFolder = (await apis.createClipFolder({
+      name: clipFolderName.value,
+      description: ''
+    })).data
+    clipFolderName.value = ''
+    emit('createClipFolder', newClipFolder.id)
+  } catch {
+    addErrorToast('クリップフォルダの作成に失敗しました')
+  }
+  adding.value = false
+}
+</script>
+
+<style lang="scss" module>
+.container {
+  @include color-ui-primary;
+  display: flex;
+  cursor: pointer;
+  gap: 8px;
+  padding: 8px 0;
+}
+.icon {
+  vertical-align: middle;
+}
+
+.inputContainer {
+  @include color-ui-secondary;
+  @include background-secondary;
+  display: flex;
+  align-items: center;
+  flex: 1 1;
+  padding: 4px;
+  border-radius: 6px;
+}
+
+.input {
+  @include color-text-primary;
+  width: 100%;
+  padding: 0 8px;
+  &::placeholder {
+    @include color-ui-secondary;
+  }
+}
+
+.button {
+  @include color-ui-secondary;
+  @include background-secondary;
+  padding: 0 12px;
+  margin-left: 8px;
+  border-radius: 6px;
+  cursor: pointer;
+  &:disabled {
+    cursor: not-allowed;
+  }
+}
+</style>
diff --git a/src/composables/clips/createClip.ts b/src/composables/clips/createClip.ts
new file mode 100644
index 000000000..afa73a1af
--- /dev/null
+++ b/src/composables/clips/createClip.ts
@@ -0,0 +1,44 @@
+import type { Ref } from 'vue'
+import apis from '/@/lib/apis'
+import type { MessageId, ClipFolderId } from '/@/types/entity-ids'
+import { useToastStore } from '/@/store/ui/toast'
+import type { AxiosError } from 'axios'
+
+export const useCreateClip = (
+  messageId: MessageId,
+  isSelected: Ref<Set<ClipFolderId>>
+) => {
+  const { addSuccessToast, addErrorToast } = useToastStore()
+
+  const createClip = async (clipFolderId: ClipFolderId) => {
+    try {
+      await apis.clipMessage(clipFolderId, {
+        messageId: messageId
+      })
+      isSelected.value.add(clipFolderId)
+      addSuccessToast('クリップフォルダに追加しました')
+    } catch (e) {
+      if ((e as AxiosError).response?.status === 409) {
+        isSelected.value.add(clipFolderId)
+        addErrorToast('すでに追加されています')
+        return
+      } else {
+        addErrorToast('追加に失敗しました')
+      }
+      throw e
+    }
+  }
+  const deleteClip = async (clipFolderId: ClipFolderId) => {
+    await apis.unclipMessage(clipFolderId, messageId)
+    isSelected.value.delete(clipFolderId)
+    addSuccessToast('クリップフォルダから削除しました')
+  }
+  const toggleClip = async (clipFolderId: ClipFolderId) => {
+    if (isSelected.value.has(clipFolderId)) {
+      await deleteClip(clipFolderId)
+    } else {
+      await createClip(clipFolderId)
+    }
+  }
+  return { toggleClip }
+}

From a0cc2324ff4551f629811cb06122623ad2d81044 Mon Sep 17 00:00:00 2001
From: mehm8128 <mehm8128@gmail.com>
Date: Tue, 12 Dec 2023 17:53:48 +0900
Subject: [PATCH 2/3] =?UTF-8?q?messageTools=E3=81=8B=E3=82=89=E3=83=87?=
 =?UTF-8?q?=E3=83=95=E3=82=A9=E3=83=AB=E3=83=88=E3=83=95=E3=82=A9=E3=83=AB?=
 =?UTF-8?q?=E3=83=80=E3=81=AB=E8=BF=BD=E5=8A=A0=E3=83=BB=E5=89=8A=E9=99=A4?=
 =?UTF-8?q?=E3=81=8C=E3=81=A7=E3=81=8D=E3=82=8B=E3=82=88=E3=81=86=E3=81=AB?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../MainView/MessageElement/MessageTools.vue  | 32 ++++++++++++++++++-
 1 file changed, 31 insertions(+), 1 deletion(-)

diff --git a/src/components/Main/MainView/MessageElement/MessageTools.vue b/src/components/Main/MainView/MessageElement/MessageTools.vue
index b0a595e16..135351155 100644
--- a/src/components/Main/MainView/MessageElement/MessageTools.vue
+++ b/src/components/Main/MainView/MessageElement/MessageTools.vue
@@ -61,6 +61,14 @@
           :class="$style.icon"
           @click="toggleStampPicker"
         />
+        <a-icon
+          mdi
+          :name="clipIconName"
+          :size="28"
+          :class="$style.icon"
+          :data-clipped="$boolAttr(isClipped)"
+          @click="openClipCreateModal"
+        />
         <a-icon
           :class="$style.icon"
           :size="28"
@@ -82,7 +90,7 @@
 
 <script lang="ts" setup>
 import { computed, ref } from 'vue'
-import type { StampId, MessageId } from '/@/types/entity-ids'
+import type { StampId, MessageId, ClipFolderId } from '/@/types/entity-ids'
 import { useStampPickerInvoker } from '/@/store/ui/stampPicker'
 import { useResponsiveStore } from '/@/store/ui/responsive'
 import apis from '/@/lib/apis'
@@ -95,6 +103,7 @@ import AStamp from '/@/components/UI/AStamp.vue'
 import MessageContextMenu from './MessageContextMenu.vue'
 import useToggle from '/@/composables/utils/useToggle'
 import { useStampHistory } from '/@/store/domain/stampHistory'
+import { useCreateClip } from '/@/composables/clips/createClip'
 
 const props = withDefaults(
   defineProps<{
@@ -169,6 +178,24 @@ const onDotsClick = (e: MouseEvent) => {
   })
 }
 
+const DEFAULT_CLIP_FOLDER_ID = '201fcb38-3dbe-4a53-8c0c-37b47bed9985' // FIXME: あとで直す
+const clippedFolders = ref(new Set<ClipFolderId>())
+const isClipped = computed(() =>
+  clippedFolders.value.has(DEFAULT_CLIP_FOLDER_ID)
+)
+
+apis.getMessageClips(props.messageId).then(res => {
+  clippedFolders.value = new Set(res.data.map(c => c.folderId))
+})
+const clipIconName = computed(() => {
+  return isClipped.value ? 'bookmark-check' : 'bookmark'
+})
+
+const { toggleClip } = useCreateClip(props.messageId, clippedFolders)
+const openClipCreateModal = () => {
+  toggleClip(DEFAULT_CLIP_FOLDER_ID)
+}
+
 const { isMobile } = useResponsiveStore()
 
 const { value: showQuickReaction, toggle: toggleQuickReaction } = useToggle(
@@ -231,6 +258,9 @@ const { value: showQuickReaction, toggle: toggleQuickReaction } = useToggle(
   &:hover {
     @include background-secondary;
   }
+  &[data-clipped] {
+    @include color-accent-primary;
+  }
 }
 
 .stampListItem {

From f3106328e413b1d46953ff32abf804eb743df146 Mon Sep 17 00:00:00 2001
From: mehm8128 <mehm8128@gmail.com>
Date: Tue, 12 Dec 2023 18:30:40 +0900
Subject: [PATCH 3/3] rename

---
 .../Main/MainView/MessageElement/MessageTools.vue         | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/src/components/Main/MainView/MessageElement/MessageTools.vue b/src/components/Main/MainView/MessageElement/MessageTools.vue
index 135351155..7db50641a 100644
--- a/src/components/Main/MainView/MessageElement/MessageTools.vue
+++ b/src/components/Main/MainView/MessageElement/MessageTools.vue
@@ -179,19 +179,19 @@ const onDotsClick = (e: MouseEvent) => {
 }
 
 const DEFAULT_CLIP_FOLDER_ID = '201fcb38-3dbe-4a53-8c0c-37b47bed9985' // FIXME: あとで直す
-const clippedFolders = ref(new Set<ClipFolderId>())
+const clippingFolderIds = ref(new Set<ClipFolderId>())
 const isClipped = computed(() =>
-  clippedFolders.value.has(DEFAULT_CLIP_FOLDER_ID)
+  clippingFolderIds.value.has(DEFAULT_CLIP_FOLDER_ID)
 )
 
 apis.getMessageClips(props.messageId).then(res => {
-  clippedFolders.value = new Set(res.data.map(c => c.folderId))
+  clippingFolderIds.value = new Set(res.data.map(c => c.folderId))
 })
 const clipIconName = computed(() => {
   return isClipped.value ? 'bookmark-check' : 'bookmark'
 })
 
-const { toggleClip } = useCreateClip(props.messageId, clippedFolders)
+const { toggleClip } = useCreateClip(props.messageId, clippingFolderIds)
 const openClipCreateModal = () => {
   toggleClip(DEFAULT_CLIP_FOLDER_ID)
 }