From 38fd9b2942fb7ea2d0277980dd30746b83006940 Mon Sep 17 00:00:00 2001
From: mehm8128 <mehm8128@gmail.com>
Date: Sun, 5 Nov 2023 23:43:08 +0900
Subject: [PATCH 01/25] =?UTF-8?q?=E4=B8=80=E6=97=A6=E3=82=B9=E3=82=BF?=
 =?UTF-8?q?=E3=83=B3=E3=83=97=E3=81=AE=E4=BD=9C=E6=88=90=E3=81=8C=E3=81=A7?=
 =?UTF-8?q?=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

---
 src/components/Modal/Common/ModalFrame.vue    |   2 +-
 src/components/Modal/ModalContainer.vue       |   8 +
 .../StampCreateModal/StampCreateModal.vue     | 170 ++++++++++++++++++
 src/components/Settings/ImageUpload.vue       |  38 +---
 src/components/Settings/StampTab/NewStamp.vue | 121 +++----------
 .../Settings/StampTab/StampItem.vue           |   5 +-
 .../{EditStamp.vue => StampManagement.vue}    |   2 +-
 src/components/UI/FormButton.vue              |  16 +-
 src/store/ui/modal/states.ts                  |   7 +
 src/views/Settings/StampTab.vue               |   6 +-
 10 files changed, 240 insertions(+), 135 deletions(-)
 create mode 100644 src/components/Modal/StampCreateModal/StampCreateModal.vue
 rename src/components/Settings/StampTab/{EditStamp.vue => StampManagement.vue} (95%)

diff --git a/src/components/Modal/Common/ModalFrame.vue b/src/components/Modal/Common/ModalFrame.vue
index 8637f7af9..c3cdff219 100644
--- a/src/components/Modal/Common/ModalFrame.vue
+++ b/src/components/Modal/Common/ModalFrame.vue
@@ -49,7 +49,7 @@ const { clearModal } = useModalStore()
   display: flex;
   flex-flow: column nowrap;
   max-height: 480px;
-  max-width: 440px;
+  max-width: 600px;
   width: #{calc(100% - 32px)};
   border-radius: 4px;
   overflow: hidden;
diff --git a/src/components/Modal/ModalContainer.vue b/src/components/Modal/ModalContainer.vue
index a30bf2153..451f0a805 100644
--- a/src/components/Modal/ModalContainer.vue
+++ b/src/components/Modal/ModalContainer.vue
@@ -41,6 +41,11 @@
             ? currentState.userId
             : undefined
         "
+        :file="
+          currentState.type === 'settings-stamp-create'
+            ? currentState.file
+            : undefined
+        "
       />
     </div>
   </transition>
@@ -63,6 +68,7 @@ import GroupCreateModal from './GroupCreateModal/GroupCreateModal.vue'
 import GroupMemberEditModal from './GroupMemberEditModal/GroupMemberEditModal.vue'
 import GroupAdminAddModal from './GroupAdminAddModal/GroupAdminAddModal.vue'
 import GroupMemberAddModal from './GroupMemberAddModal/GroupMemberAddModal.vue'
+import StampCreateModal from './StampCreateModal/StampCreateModal.vue'
 
 const { shouldShowModal, currentState } = useModalStore()
 
@@ -96,6 +102,8 @@ const component = computed(() => {
       return GroupAdminAddModal
     case 'group-member-add':
       return GroupMemberAddModal
+    case 'settings-stamp-create':
+      return StampCreateModal
   }
   // eslint-disable-next-line no-console
   console.error('Unexpected modal type:', currentState.value)
diff --git a/src/components/Modal/StampCreateModal/StampCreateModal.vue b/src/components/Modal/StampCreateModal/StampCreateModal.vue
new file mode 100644
index 000000000..d75db9524
--- /dev/null
+++ b/src/components/Modal/StampCreateModal/StampCreateModal.vue
@@ -0,0 +1,170 @@
+<template>
+  <modal-frame title="新規スタンプ登録" icon-name="">
+    <div :class="$style.container">
+      <image-upload v-model="stampImage" :class="$style.form" />
+      <div :class="$style.rightContainer">
+        <form-input
+          v-model="newStampName"
+          label="スタンプ名"
+          prefix=":"
+          suffix=":"
+          :max-length="32"
+          :class="$style.form"
+        />
+        <label :class="$style.label">所有者</label>
+        <p :class="$style.creator">@ {{ detail?.name }}</p>
+      </div>
+    </div>
+    <p :class="$style.note">{{ cropperNote }}</p>
+    <div :class="$style.buttonContainer">
+      <form-button label="キャンセル" color="secondary" @click="cancel" />
+      <form-button
+        label="登録する"
+        :disabled="!isCreateEnabled"
+        :loading="isCreating"
+        :class="$style.form"
+        @click="createStamp"
+      />
+    </div>
+  </modal-frame>
+</template>
+
+<script lang="ts" setup>
+import { ref, computed, watch, type Ref } from 'vue'
+import apis, { formatResizeError } from '/@/lib/apis'
+import { isValidStampName } from '/@/lib/validate'
+import { useToastStore } from '/@/store/ui/toast'
+import { imageSize } from '/@/components/Settings/StampTab/imageSize'
+import ImageUpload from '/@/components/Settings/ImageUpload.vue'
+import FormInput from '/@/components/UI/FormInput.vue'
+import FormButton from '/@/components/UI/FormButton.vue'
+import ModalFrame from '../Common/ModalFrame.vue'
+import { useMeStore } from '/@/store/domain/me'
+import { useModalStore } from '/@/store/ui/modal'
+
+const props = defineProps<{
+  file: File
+}>()
+
+const { detail } = useMeStore()
+const { clearModal } = useModalStore()
+
+const stampImage = ref(props.file)
+const newStampName = ref('')
+const isCreateEnabled = computed(() => isValidStampName(newStampName.value))
+watch(
+  () => stampImage.value,
+  newImageData => {
+    if (!newStampName.value && newImageData && newImageData.name) {
+      newStampName.value = trimExt(newImageData.name)
+    }
+  }
+)
+
+const isGif = stampImage.value.type === 'image/gif'
+const cropperNote = computed(() =>
+  isGif ? 'GIFは切り抜きできません' : '画像の位置・サイズを編集できます'
+)
+
+/**
+ * 拡張子を削る
+ */
+const trimExt = (filename: string) => filename.replace(/\.[^.]+$/, '')
+
+const useStampCreate = (
+  newStampName: Ref<string>,
+  stampImage: Ref<File | undefined>
+) => {
+  const { addSuccessToast, addErrorToast } = useToastStore()
+  const isCreating = ref(false)
+
+  const createStamp = async () => {
+    if (!stampImage.value) return
+    try {
+      const size = await imageSize(stampImage.value)
+      if (size.height !== size.width) {
+        addErrorToast('画像が正方形ではありません。編集してください')
+        return
+      }
+    } catch (e) {
+      // eslint-disable-next-line no-console
+      console.error('スタンプの作成に失敗しました', e)
+      addErrorToast(formatResizeError(e, 'スタンプの作成に失敗しました'))
+    }
+    try {
+      isCreating.value = true
+      await apis.createStamp(newStampName.value, stampImage.value)
+      newStampName.value = ''
+      stampImage.value = undefined
+
+      addSuccessToast('スタンプを登録しました')
+    } catch (e) {
+      // eslint-disable-next-line no-console
+      console.error('スタンプの作成に失敗しました', e)
+
+      addErrorToast(formatResizeError(e, 'スタンプの作成に失敗しました'))
+    }
+    isCreating.value = false
+    clearModal()
+  }
+
+  return { isCreating, createStamp }
+}
+
+const { isCreating, createStamp } = useStampCreate(newStampName, stampImage)
+const cancel = () => {
+  clearModal()
+}
+</script>
+
+<style lang="scss" module>
+.subtitle {
+  a {
+    pointer-events: none;
+  }
+}
+.item {
+  margin: 16px 0;
+
+  &:first-child {
+    margin-top: 0;
+  }
+
+  &:last-child {
+    margin-bottom: 0;
+  }
+}
+
+.form {
+  margin: 8px 0;
+}
+
+.container {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  gap: 16px;
+}
+.rightContainer {
+  width: 100%;
+}
+
+.label {
+  @include color-ui-secondary;
+  margin-bottom: 16px;
+}
+.creator {
+  @include color-ui-primary;
+}
+.note {
+  @include color-ui-secondary;
+  margin-left: 12px;
+  margin-bottom: 12px;
+}
+.buttonContainer {
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+  gap: 16px;
+}
+</style>
diff --git a/src/components/Settings/ImageUpload.vue b/src/components/Settings/ImageUpload.vue
index 5e3494d59..e00bb6924 100644
--- a/src/components/Settings/ImageUpload.vue
+++ b/src/components/Settings/ImageUpload.vue
@@ -1,24 +1,19 @@
 <template>
-  <div>
-    <form-button label="ファイルを選択" @click="selectImage" />
-    <div v-if="originalImgUrl">
-      <div :class="$style.cropper" :data-is-rounded="$boolAttr(rounded)">
-        <img ref="imgEle" :src="originalImgUrl" />
-      </div>
-      <p :class="$style.note">{{ cropperNote }}</p>
-      <form-button label="キャンセル" @click="cancel" />
-    </div>
+  <div
+    v-if="originalImgUrl"
+    :class="$style.cropper"
+    :data-is-rounded="$boolAttr(rounded)"
+  >
+    <img ref="imgEle" :src="originalImgUrl" />
   </div>
 </template>
 
 <script lang="ts" setup>
 import { ref, watchEffect, shallowRef, onUnmounted } from 'vue'
 import Cropper from 'cropperjs'
-import FormButton from '/@/components/UI/FormButton.vue'
 import 'cropperjs/dist/cropper.css'
 import useObjectURL from '/@/composables/dom/useObjectURL'
 import { useModelValueSyncer } from '/@/composables/useModelSyncer'
-import { useFileSelect } from '/@/composables/dom/useFileSelect'
 
 const props = withDefaults(
   defineProps<{
@@ -51,14 +46,10 @@ const cropperDefaultOptions = {
   autoCrop: true,
   dragMode: 'move' as const
 } as const
-const acceptImageType = ['image/jpeg', 'image/png', 'image/gif'].join(',')
 
 const value = useModelValueSyncer(props, emit)
 
-const originalImg = ref<File | undefined>()
-const { selectImage } = useFileSelect({ accept: acceptImageType }, files => {
-  originalImg.value = files[0]
-})
+const originalImg = ref<File | undefined>(props.modelValue)
 const originalImgUrl = useObjectURL(originalImg)
 
 let cropper: Cropper | undefined
@@ -105,10 +96,6 @@ const updateImgView = () => {
         }
       }
 
-  cropperNote.value = isGif
-    ? 'GIFは切り抜きできません'
-    : '画像の位置・サイズを編集できます'
-
   if (cropper) cropper.destroy()
   cropper = new Cropper(imgEle.value, options)
   cropper.replace(originalImgUrl.value ?? '')
@@ -122,10 +109,6 @@ watchEffect(() => {
   }
 })
 
-const cancel = () => {
-  emit('update:modelValue', undefined)
-}
-
 onUnmounted(() => {
   if (cropper) cropper.destroy()
 })
@@ -133,8 +116,8 @@ onUnmounted(() => {
 
 <style lang="scss" module>
 .cropper {
-  width: 400px;
-  height: 400px;
+  width: 200px;
+  height: 200px;
   margin: 12px;
   &[data-is-rounded] {
     :global(.cropper-view-box),
@@ -143,7 +126,4 @@ onUnmounted(() => {
     }
   }
 }
-.note {
-  margin: 12px;
-}
 </style>
diff --git a/src/components/Settings/StampTab/NewStamp.vue b/src/components/Settings/StampTab/NewStamp.vue
index 849fe2915..1d2c48638 100644
--- a/src/components/Settings/StampTab/NewStamp.vue
+++ b/src/components/Settings/StampTab/NewStamp.vue
@@ -1,113 +1,46 @@
 <template>
-  <div :class="$style.element">
-    <h3 :class="$style.header">スタンプ新規登録</h3>
-    <div :class="$style.content">
-      <image-upload v-model="stampImage" :class="$style.form" />
-      <form-input
-        v-model="newStampName"
-        label="スタンプ名"
-        prefix=":"
-        suffix=":"
-        :max-length="32"
-        :class="$style.form"
-      />
-      <form-button
-        label="新規登録"
-        :disabled="!isCreateEnabled"
-        :loading="isCreating"
-        :class="$style.form"
-        @click="createStamp"
-      />
-    </div>
+  <div :class="$style.container">
+    <form-button
+      label="スタンプを追加する"
+      :class="$style.form"
+      icon="plus"
+      mdi
+      type="secondary"
+      @click="selectImage"
+    />
   </div>
 </template>
 
-<script lang="ts">
-import type { Ref } from 'vue'
-import { watch } from 'vue'
-import { ref, computed } from 'vue'
-import apis, { formatResizeError } from '/@/lib/apis'
-import { isValidStampName } from '/@/lib/validate'
-import { useToastStore } from '/@/store/ui/toast'
-import { imageSize } from './imageSize'
-
-/**
- * 拡張子を削る
- */
-const trimExt = (filename: string) => filename.replace(/\.[^.]+$/, '')
-
-const useStampCreate = (
-  newStampName: Ref<string>,
-  stampImage: Ref<File | undefined>
-) => {
-  const { addSuccessToast, addErrorToast } = useToastStore()
-  const isCreating = ref(false)
-
-  const createStamp = async () => {
-    if (!stampImage.value) return
-    try {
-      const size = await imageSize(stampImage.value)
-      if (size.height !== size.width) {
-        addErrorToast('画像が正方形ではありません。編集してください')
-        return
-      }
-    } catch (e) {
-      // eslint-disable-next-line no-console
-      console.error('スタンプの作成に失敗しました', e)
-      addErrorToast(formatResizeError(e, 'スタンプの作成に失敗しました'))
-    }
-    try {
-      isCreating.value = true
-      await apis.createStamp(newStampName.value, stampImage.value)
-      newStampName.value = ''
-      stampImage.value = undefined
-
-      addSuccessToast('スタンプを登録しました')
-    } catch (e) {
-      // eslint-disable-next-line no-console
-      console.error('スタンプの作成に失敗しました', e)
-
-      addErrorToast(formatResizeError(e, 'スタンプの作成に失敗しました'))
-    }
-    isCreating.value = false
-  }
-
-  return { isCreating, createStamp }
-}
-</script>
-
 <script lang="ts" setup>
-import ImageUpload from '../ImageUpload.vue'
-import FormInput from '/@/components/UI/FormInput.vue'
+import { ref } from 'vue'
 import FormButton from '/@/components/UI/FormButton.vue'
+import { useFileSelect } from '/@/composables/dom/useFileSelect'
+import { useModalStore } from '/@/store/ui/modal'
 
-const stampImage = ref<File | undefined>()
-const newStampName = ref('')
-const isCreateEnabled = computed(
-  () => isValidStampName(newStampName.value) && stampImage.value !== undefined
-)
-watch(
-  () => stampImage.value,
-  newImageData => {
-    if (!newStampName.value && newImageData && newImageData.name) {
-      newStampName.value = trimExt(newImageData.name)
-    }
-  }
-)
+const { pushModal } = useModalStore()
 
-const { isCreating, createStamp } = useStampCreate(newStampName, stampImage)
+const acceptImageType = ['image/jpeg', 'image/png', 'image/gif'].join(',')
+
+const originalImg = ref<File | undefined>()
+const { selectImage } = useFileSelect({ accept: acceptImageType }, files => {
+  originalImg.value = files[0]
+
+  if (!originalImg.value) return
+  pushModal({
+    type: 'settings-stamp-create',
+    file: originalImg.value
+  })
+  originalImg.value = undefined
+})
 </script>
 
 <style lang="scss" module>
 .header {
   margin-bottom: 8px;
 }
-.element {
+.container {
   margin: 24px 0;
 }
-.content {
-  margin-left: 12px;
-}
 .form {
   margin: 8px 0;
 }
diff --git a/src/components/Settings/StampTab/StampItem.vue b/src/components/Settings/StampTab/StampItem.vue
index 0c4cf57dd..31d529d51 100644
--- a/src/components/Settings/StampTab/StampItem.vue
+++ b/src/components/Settings/StampTab/StampItem.vue
@@ -6,7 +6,6 @@
       <a-icon
         name="pencil-outline"
         mdi
-        :size="20"
         :class="$style.editIcon"
         @click="onStartEdit"
       />
@@ -200,9 +199,7 @@ const { isEditing, editStamp } = useStampEdit(
 }
 
 .editIcon {
-  .container:not(:hover) & {
-    display: none;
-  }
+  @include color-ui-secondary;
 }
 
 .stamp {
diff --git a/src/components/Settings/StampTab/EditStamp.vue b/src/components/Settings/StampTab/StampManagement.vue
similarity index 95%
rename from src/components/Settings/StampTab/EditStamp.vue
rename to src/components/Settings/StampTab/StampManagement.vue
index 556f13062..50736d4a7 100644
--- a/src/components/Settings/StampTab/EditStamp.vue
+++ b/src/components/Settings/StampTab/StampManagement.vue
@@ -1,6 +1,6 @@
 <template>
   <div :class="$style.element">
-    <h3 :class="$style.header">スタンプ編集</h3>
+    <h3 :class="$style.header">スタンプ管理</h3>
     <div :class="$style.content">
       <stamp-item
         v-for="stamp in myStamps"
diff --git a/src/components/UI/FormButton.vue b/src/components/UI/FormButton.vue
index a1aa69e18..1874fd05a 100644
--- a/src/components/UI/FormButton.vue
+++ b/src/components/UI/FormButton.vue
@@ -6,7 +6,10 @@
     :data-type="type"
     :data-is-danger="$boolAttr(isDanger)"
   >
-    <div :class="$style.label">{{ label }}</div>
+    <div :class="$style.label">
+      <a-icon v-if="icon" :mdi="mdi" :name="icon" />
+      {{ label }}
+    </div>
     <loading-spinner
       v-if="loading"
       :class="$style.spinner"
@@ -18,7 +21,8 @@
 <script lang="ts" setup>
 import { computed } from 'vue'
 import LoadingSpinner from '/@/components/UI/LoadingSpinner.vue'
-import { match, P } from 'ts-pattern'
+import AIcon from '/@/components/UI/AIcon.vue'
+import { match, P } from 'ts-pattern';
 
 interface Type {
   type?: 'primary' | 'secondary' | 'tertiary'
@@ -38,6 +42,8 @@ type Props = {
   label?: string
   loading?: boolean
   disabled?: boolean
+  icon?: string
+  mdi?: boolean
 } & (NonDangerType | DangerType)
 
 const props = withDefaults(defineProps<Props>(), {
@@ -45,7 +51,8 @@ const props = withDefaults(defineProps<Props>(), {
   loading: false,
   disabled: false,
   type: 'primary',
-  isDanger: false
+  isDanger: false,
+  mdi: false,
 })
 
 const spinnerColor = computed(() => {
@@ -97,6 +104,9 @@ const spinnerColor = computed(() => {
   }
 }
 .label {
+  display: flex;
+  align-items: center;
+  gap: 12px;
   margin: 8px 32px;
   .container[data-is-loading] & {
     visibility: hidden;
diff --git a/src/store/ui/modal/states.ts b/src/store/ui/modal/states.ts
index 4e105b482..ce5a0a72e 100644
--- a/src/store/ui/modal/states.ts
+++ b/src/store/ui/modal/states.ts
@@ -24,6 +24,7 @@ type ModalStateType =
   | 'group-member-edit'
   | 'group-admin-add'
   | 'group-member-add'
+  | 'settings-stamp-create'
 
 export type ModalState =
   | UserModalState
@@ -40,6 +41,7 @@ export type ModalState =
   | GroupMemberEditModalState
   | GroupAdminAddModalState
   | GroupMemberAddModalState
+  | SettingsStampCreateModalState
 
 interface BaseModalState {
   /** モーダル種別 */
@@ -123,3 +125,8 @@ interface GroupMemberAddModalState extends BaseModalState {
   type: 'group-member-add'
   id: UserGroupId
 }
+
+interface SettingsStampCreateModalState extends BaseModalState {
+  type: 'settings-stamp-create'
+  file: File
+}
diff --git a/src/views/Settings/StampTab.vue b/src/views/Settings/StampTab.vue
index 9095e7efa..42394b9c6 100644
--- a/src/views/Settings/StampTab.vue
+++ b/src/views/Settings/StampTab.vue
@@ -1,17 +1,17 @@
 <template>
   <section>
     <new-stamp />
-    <edit-stamp />
+    <stamp-management />
     <div :class="$style.element">
       <h3 :class="$style.header">スタンプパレット</h3>
-      <p title="4/1には実装されるよ" :class="$style.content">実装予定</p>
+      <p :class="$style.content">実装予定</p>
     </div>
   </section>
 </template>
 
 <script lang="ts" setup>
 import NewStamp from '/@/components/Settings/StampTab/NewStamp.vue'
-import EditStamp from '/@/components/Settings/StampTab/EditStamp.vue'
+import StampManagement from '/@/components/Settings/StampTab/StampManagement.vue'
 import { useStampsStore } from '/@/store/entities/stamps'
 import { useStampPalettesStore } from '/@/store/entities/stampPalettes'
 import { useUsersStore } from '/@/store/entities/users'

From 2d8023f45f68d7849275625b895167fec5a70523 Mon Sep 17 00:00:00 2001
From: mehm8128 <mehm8128@gmail.com>
Date: Mon, 6 Nov 2023 15:01:30 +0900
Subject: [PATCH 02/25] =?UTF-8?q?edit=E3=82=82=E7=94=BB=E5=83=8F=E5=91=A8?=
 =?UTF-8?q?=E3=82=8A=E4=BB=A5=E5=A4=96=E5=AE=9F=E8=A3=85?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/Modal/ModalContainer.vue       |   6 +-
 .../Modal/StampEditModal/StampEditModal.vue   | 230 ++++++++++++++++++
 src/components/Settings/ImageUpload.vue       |   5 +-
 .../Settings/StampTab/StampItem.vue           | 190 +--------------
 .../Settings/StampTab/StampManagement.vue     |  15 +-
 src/store/ui/modal/states.ts                  |  10 +-
 6 files changed, 268 insertions(+), 188 deletions(-)
 create mode 100644 src/components/Modal/StampEditModal/StampEditModal.vue

diff --git a/src/components/Modal/ModalContainer.vue b/src/components/Modal/ModalContainer.vue
index 451f0a805..05fc5880f 100644
--- a/src/components/Modal/ModalContainer.vue
+++ b/src/components/Modal/ModalContainer.vue
@@ -11,7 +11,8 @@
           currentState.type === 'file' ||
           currentState.type === 'channel-manage' ||
           currentState.type === 'group-admin-add' ||
-          currentState.type === 'group-member-add'
+          currentState.type === 'group-member-add' ||
+          currentState.type === 'settings-stamp-edit'
             ? currentState.id
             : undefined
         "
@@ -69,6 +70,7 @@ import GroupMemberEditModal from './GroupMemberEditModal/GroupMemberEditModal.vu
 import GroupAdminAddModal from './GroupAdminAddModal/GroupAdminAddModal.vue'
 import GroupMemberAddModal from './GroupMemberAddModal/GroupMemberAddModal.vue'
 import StampCreateModal from './StampCreateModal/StampCreateModal.vue'
+import StampEditModal from './StampEditModal/StampEditModal.vue'
 
 const { shouldShowModal, currentState } = useModalStore()
 
@@ -104,6 +106,8 @@ const component = computed(() => {
       return GroupMemberAddModal
     case 'settings-stamp-create':
       return StampCreateModal
+    case 'settings-stamp-edit':
+      return StampEditModal
   }
   // eslint-disable-next-line no-console
   console.error('Unexpected modal type:', currentState.value)
diff --git a/src/components/Modal/StampEditModal/StampEditModal.vue b/src/components/Modal/StampEditModal/StampEditModal.vue
new file mode 100644
index 000000000..da085df35
--- /dev/null
+++ b/src/components/Modal/StampEditModal/StampEditModal.vue
@@ -0,0 +1,230 @@
+<template>
+  <modal-frame title="スタンプ編集" icon-name="">
+    <div :class="$style.container">
+      <image-upload v-model="newImageData" :class="$style.form" />
+      <div :class="$style.rightContainer">
+        <form-input
+          v-model="state.name"
+          label="スタンプ名"
+          prefix=":"
+          suffix=":"
+          :max-length="32"
+          :class="$style.form"
+        />
+        <form-selector
+          v-model="state.creatorId"
+          label="所有者"
+          :options="creatorOptions"
+        />
+      </div>
+    </div>
+    <p v-if="newImageData" :class="$style.note">{{ cropperNote }}</p>
+    <div :class="$style.buttonContainer">
+      <form-button label="キャンセル" color="secondary" @click="cancel" />
+      <form-button
+        label="更新する"
+        :disabled="!stampChanged || !isNameValid"
+        :loading="isEditing"
+        :class="$style.form"
+        @click="editStamp"
+      />
+    </div>
+  </modal-frame>
+</template>
+
+<script lang="ts" setup>
+import type { Ref } from 'vue'
+import { computed, reactive, ref } from 'vue'
+import apis, { formatResizeError } from '/@/lib/apis'
+import type { Stamp } from '@traptitech/traq'
+import useStateDiff from '/@/components/Settings/composables/useStateDiff'
+import { isValidStampName } from '/@/lib/validate'
+import { useToastStore } from '/@/store/ui/toast'
+import { imageSize } from '/@/components/Settings/StampTab/imageSize'
+import ImageUpload from '/@/components/Settings/ImageUpload.vue'
+import FormInput from '/@/components/UI/FormInput.vue'
+import FormSelector from '/@/components/UI/FormSelector.vue'
+import FormButton from '/@/components/UI/FormButton.vue'
+import useUserList from '/@/composables/users/useUserList'
+import { useStampsStore } from '/@/store/entities/stamps'
+import { useModalStore } from '/@/store/ui/modal'
+import type { StampId } from '/@/types/entity-ids'
+import ModalFrame from '../Common/ModalFrame.vue'
+import { onMounted } from 'vue'
+
+type StampEditState = Pick<Stamp, 'name' | 'creatorId'>
+
+const props = defineProps<{
+  id: StampId
+}>()
+
+const { clearModal } = useModalStore()
+const { stampsMap } = useStampsStore()
+const stamp = computed(() => stampsMap.value.get(props.id) ?? ({} as Stamp))
+
+const userList = useUserList(['inactive', 'bot'])
+const creatorOptions = computed(() =>
+  userList.value.map(u => ({ key: `@${u.name}`, value: u.id }))
+)
+
+const newImageData = ref<File | undefined>()
+
+const useState = (stamp: Stamp) => {
+  const oldState = computed(
+    (): StampEditState => ({
+      name: stamp.name,
+      creatorId: stamp.creatorId
+    })
+  )
+  const newState = reactive({ ...oldState.value })
+
+  const { hasDiff, getDiffKeys } = useStateDiff<StampEditState>()
+  const isStateChanged = computed(() => hasDiff(newState, oldState))
+  const diffKeys = computed(() => getDiffKeys(newState, oldState))
+
+  return { state: newState, isStateChanged, diffKeys }
+}
+
+const useStampEdit = (
+  stamp: Stamp,
+  state: StampEditState,
+  newImageData: Ref<File | undefined>,
+  isStateChanged: Ref<boolean>,
+  diffKeys: Ref<Array<keyof StampEditState>>,
+  afterSuccess: () => void
+) => {
+  const { addSuccessToast, addErrorToast } = useToastStore()
+  const isEditing = ref(false)
+
+  const editStamp = async () => {
+    try {
+      if (newImageData.value) {
+        const size = await imageSize(newImageData.value)
+        if (size.height !== size.width) {
+          addErrorToast('画像が正方形ではありません。編集してください')
+          return
+        }
+      }
+      try {
+        isEditing.value = true
+        const promises = []
+        if (isStateChanged.value) {
+          promises.push(
+            apis.editStamp(stamp.id, {
+              name: diffKeys.value.includes('name') ? state.name : undefined,
+              creatorId: diffKeys.value.includes('creatorId')
+                ? state.creatorId
+                : undefined
+            })
+          )
+        }
+        if (newImageData.value !== undefined) {
+          promises.push(apis.changeStampImage(stamp.id, newImageData.value))
+        }
+        await Promise.all(promises)
+        afterSuccess()
+
+        addSuccessToast('スタンプを更新しました')
+      } catch (e) {
+        // eslint-disable-next-line no-console
+        console.error('スタンプの編集に失敗しました', e)
+
+        addErrorToast(formatResizeError(e, 'スタンプの編集に失敗しました'))
+      }
+      isEditing.value = false
+    } catch (e) {
+      // eslint-disable-next-line no-console
+      console.error('スタンプの編集に失敗しました', e)
+      addErrorToast(formatResizeError(e, 'スタンプの編集に失敗しました'))
+    }
+  }
+
+  return { isEditing, editStamp }
+}
+
+const { state, isStateChanged, diffKeys } = useState(stamp.value)
+const stampChanged = computed(
+  () => isStateChanged.value || newImageData.value !== undefined
+)
+const isNameValid = computed(() => isValidStampName(state.name))
+
+const { isEditing, editStamp } = useStampEdit(
+  stamp.value,
+  state,
+  newImageData,
+  isStateChanged,
+  diffKeys,
+  () => {
+    newImageData.value = undefined
+    clearModal()
+  }
+)
+
+const isGif = newImageData.value?.type === 'image/gif'
+const cropperNote = computed(() =>
+  isGif ? 'GIFは切り抜きできません' : '画像の位置・サイズを編集できます'
+)
+
+const cancel = () => {
+  clearModal()
+}
+
+onMounted(async () => {
+  const stampImage = (await apis.getStampImage(props.id)).data
+  newImageData.value = new File([stampImage], 'stamp.png', {
+    type: 'image/png'
+  })
+})
+</script>
+
+<style lang="scss" module>
+.subtitle {
+  a {
+    pointer-events: none;
+  }
+}
+.item {
+  margin: 16px 0;
+
+  &:first-child {
+    margin-top: 0;
+  }
+
+  &:last-child {
+    margin-bottom: 0;
+  }
+}
+
+.form {
+  margin: 8px 0;
+}
+
+.container {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  gap: 16px;
+}
+.rightContainer {
+  width: 100%;
+}
+
+.label {
+  @include color-ui-secondary;
+  margin-bottom: 16px;
+}
+.creator {
+  @include color-ui-primary;
+}
+.note {
+  @include color-ui-secondary;
+  margin-left: 12px;
+  margin-bottom: 12px;
+}
+.buttonContainer {
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+  gap: 16px;
+}
+</style>
diff --git a/src/components/Settings/ImageUpload.vue b/src/components/Settings/ImageUpload.vue
index e00bb6924..6cfd0f0b2 100644
--- a/src/components/Settings/ImageUpload.vue
+++ b/src/components/Settings/ImageUpload.vue
@@ -54,7 +54,6 @@ const originalImgUrl = useObjectURL(originalImg)
 
 let cropper: Cropper | undefined
 const imgEle = shallowRef<HTMLImageElement>()
-const cropperNote = ref('')
 
 const updateImgView = () => {
   if (!originalImg.value) {
@@ -101,6 +100,10 @@ const updateImgView = () => {
   cropper.replace(originalImgUrl.value ?? '')
 }
 
+watchEffect(() => {
+  originalImg.value = props.modelValue
+})
+
 watchEffect(updateImgView)
 
 watchEffect(() => {
diff --git a/src/components/Settings/StampTab/StampItem.vue b/src/components/Settings/StampTab/StampItem.vue
index 31d529d51..b44bde5b5 100644
--- a/src/components/Settings/StampTab/StampItem.vue
+++ b/src/components/Settings/StampTab/StampItem.vue
@@ -1,147 +1,27 @@
 <template>
-  <div :class="$style.container" :aria-selected="isSelected">
+  <div :class="$style.container">
     <img :src="url" :class="$style.stamp" />
-    <div v-if="!isSelected" :class="$style.notSelected">
+    <div :class="$style.notSelected">
       <p>:{{ stamp.name }}:</p>
-      <a-icon
-        name="pencil-outline"
-        mdi
+      <icon-button
+        icon-name="pencil-outline"
+        icon-mdi
         :class="$style.editIcon"
         @click="onStartEdit"
       />
     </div>
-    <div v-else :class="$style.selected">
-      <div :class="$style.forms">
-        <form-input
-          v-model="state.name"
-          label="スタンプ名"
-          prefix=":"
-          suffix=":"
-          :max-length="32"
-        />
-        <form-selector
-          v-model="state.creatorId"
-          label="所有者"
-          :options="creatorOptions"
-        />
-        <image-upload v-model="newImageData" />
-      </div>
-      <form-button
-        label="変更"
-        :class="$style.changeButton"
-        :disabled="!stampChanged || !isNameValid"
-        :loading="isEditing"
-        @click="editStamp"
-      />
-    </div>
   </div>
 </template>
 
-<script lang="ts">
-import type { Ref } from 'vue'
-import { computed, reactive, ref } from 'vue'
-import apis, { buildFilePath, formatResizeError } from '/@/lib/apis'
-import type { Stamp } from '@traptitech/traq'
-import useStateDiff from '../composables/useStateDiff'
-import { isValidStampName } from '/@/lib/validate'
-import { useToastStore } from '/@/store/ui/toast'
-import { imageSize } from './imageSize'
-
-type StampEditState = Pick<Stamp, 'name' | 'creatorId'>
-
-const useState = (props: { stamp: Stamp }) => {
-  const oldState = computed(
-    (): StampEditState => ({
-      name: props.stamp.name,
-      creatorId: props.stamp.creatorId
-    })
-  )
-  const newState = reactive({ ...oldState.value })
-
-  const { hasDiff, getDiffKeys } = useStateDiff<StampEditState>()
-  const isStateChanged = computed(() => hasDiff(newState, oldState))
-  const diffKeys = computed(() => getDiffKeys(newState, oldState))
-
-  return { state: newState, isStateChanged, diffKeys }
-}
-
-const useStampEdit = (
-  props: { stamp: Stamp },
-  state: StampEditState,
-  newImageData: Ref<File | undefined>,
-  isStateChanged: Ref<boolean>,
-  diffKeys: Ref<Array<keyof StampEditState>>,
-  afterSuccess: () => void
-) => {
-  const { addSuccessToast, addErrorToast } = useToastStore()
-  const isEditing = ref(false)
-
-  const editStamp = async () => {
-    try {
-      if (newImageData.value) {
-        const size = await imageSize(newImageData.value)
-        if (size.height !== size.width) {
-          addErrorToast('画像が正方形ではありません。編集してください')
-          return
-        }
-      }
-      try {
-        isEditing.value = true
-        const promises = []
-        if (isStateChanged.value) {
-          promises.push(
-            apis.editStamp(props.stamp.id, {
-              name: diffKeys.value.includes('name') ? state.name : undefined,
-              creatorId: diffKeys.value.includes('creatorId')
-                ? state.creatorId
-                : undefined
-            })
-          )
-        }
-        if (newImageData.value !== undefined) {
-          promises.push(
-            apis.changeStampImage(props.stamp.id, newImageData.value)
-          )
-        }
-        await Promise.all(promises)
-        afterSuccess()
-
-        addSuccessToast('スタンプを更新しました')
-      } catch (e) {
-        // eslint-disable-next-line no-console
-        console.error('スタンプの編集に失敗しました', e)
-
-        addErrorToast(formatResizeError(e, 'スタンプの編集に失敗しました'))
-      }
-      isEditing.value = false
-    } catch (e) {
-      // eslint-disable-next-line no-console
-      console.error('スタンプの編集に失敗しました', e)
-      addErrorToast(formatResizeError(e, 'スタンプの編集に失敗しました'))
-    }
-  }
-
-  return { isEditing, editStamp }
-}
-</script>
-
 <script lang="ts" setup>
-import ImageUpload from '../ImageUpload.vue'
-import FormInput from '/@/components/UI/FormInput.vue'
-import FormSelector from '/@/components/UI/FormSelector.vue'
-import FormButton from '/@/components/UI/FormButton.vue'
-import AIcon from '/@/components/UI/AIcon.vue'
-import useUserList from '/@/composables/users/useUserList'
+import type { Stamp } from '@traptitech/traq'
+import { computed } from 'vue'
+import IconButton from '/@/components/UI/IconButton.vue'
+import { buildFilePath } from '/@/lib/apis'
 
-const props = withDefaults(
-  defineProps<{
-    stamp: Stamp
-    isSelected?: boolean
-  }>(),
-  {
-    isSelected: false
-  }
-)
+const props = defineProps<{
+  stamp: Stamp
+}>()
 
 const emit = defineEmits<{
   (e: 'startEdit'): void
@@ -150,37 +30,9 @@ const emit = defineEmits<{
 
 const url = computed(() => buildFilePath(props.stamp.fileId))
 
-const userList = useUserList(['inactive', 'bot'])
-const creatorOptions = computed(() =>
-  userList.value.map(u => ({ key: `@${u.name}`, value: u.id }))
-)
-
-const newImageData = ref<File | undefined>()
-
-const { state, isStateChanged, diffKeys } = useState(props)
-const stampChanged = computed(
-  () => isStateChanged.value || newImageData.value !== undefined
-)
-const isNameValid = computed(() => isValidStampName(state.name))
-
 const onStartEdit = () => {
   emit('startEdit')
 }
-const onEndEdit = () => {
-  emit('endEdit')
-}
-
-const { isEditing, editStamp } = useStampEdit(
-  props,
-  state,
-  newImageData,
-  isStateChanged,
-  diffKeys,
-  () => {
-    newImageData.value = undefined
-    onEndEdit()
-  }
-)
 </script>
 
 <style lang="scss" module>
@@ -193,7 +45,7 @@ const { isEditing, editStamp } = useStampEdit(
     top: 12px;
     bottom: 12px;
   }
-  &:not([aria-selected='true']):hover {
+  &:hover {
     @include background-tertiary;
   }
 }
@@ -213,20 +65,4 @@ const { isEditing, editStamp } = useStampEdit(
   width: 100%;
   padding: 0 24px;
 }
-.selected {
-  padding-left: 12px;
-  width: 100%;
-  display: flex;
-  align-items: flex-end;
-  justify-content: space-between;
-}
-.forms {
-  display: flex;
-  flex-flow: row wrap;
-  align-items: flex-end;
-  gap: 12px;
-}
-.changeButton {
-  word-break: keep-all;
-}
 </style>
diff --git a/src/components/Settings/StampTab/StampManagement.vue b/src/components/Settings/StampTab/StampManagement.vue
index 50736d4a7..1291c721a 100644
--- a/src/components/Settings/StampTab/StampManagement.vue
+++ b/src/components/Settings/StampTab/StampManagement.vue
@@ -6,9 +6,7 @@
         v-for="stamp in myStamps"
         :key="stamp.id"
         :stamp="stamp"
-        :is-selected="stamp.id === selectedStampId"
         @start-edit="selectStamp(stamp.id)"
-        @end-edit="unselectStamp"
       />
     </div>
   </div>
@@ -16,13 +14,15 @@
 
 <script lang="ts" setup>
 import StampItem from './StampItem.vue'
-import { computed, ref } from 'vue'
+import { computed } from 'vue'
 import type { StampId } from '/@/types/entity-ids'
 import { useMeStore } from '/@/store/domain/me'
 import { useStampsStore } from '/@/store/entities/stamps'
+import { useModalStore } from '/@/store/ui/modal'
 
 const { myId } = useMeStore()
 const { stampsMap } = useStampsStore()
+const { pushModal } = useModalStore()
 
 // TODO: 管理者なら全部変えられるたぶん https://github.com/traPtitech/traQ_S-UI/issues/291
 
@@ -30,12 +30,11 @@ const myStamps = computed(() =>
   [...stampsMap.value.values()].filter(stamp => stamp.creatorId === myId.value)
 )
 
-const selectedStampId = ref<StampId | null>()
 const selectStamp = (id: StampId) => {
-  selectedStampId.value = id
-}
-const unselectStamp = () => {
-  selectedStampId.value = null
+  pushModal({
+    type: 'settings-stamp-edit',
+    id
+  })
 }
 </script>
 
diff --git a/src/store/ui/modal/states.ts b/src/store/ui/modal/states.ts
index ce5a0a72e..be0cdf593 100644
--- a/src/store/ui/modal/states.ts
+++ b/src/store/ui/modal/states.ts
@@ -5,7 +5,8 @@ import type {
   FileId,
   UserGroupId,
   TagId,
-  MessageId
+  MessageId,
+  StampId
 } from '/@/types/entity-ids'
 
 type ModalStateType =
@@ -25,6 +26,7 @@ type ModalStateType =
   | 'group-admin-add'
   | 'group-member-add'
   | 'settings-stamp-create'
+  | 'settings-stamp-edit'
 
 export type ModalState =
   | UserModalState
@@ -42,6 +44,7 @@ export type ModalState =
   | GroupAdminAddModalState
   | GroupMemberAddModalState
   | SettingsStampCreateModalState
+  | SettingsStampEditModalState
 
 interface BaseModalState {
   /** モーダル種別 */
@@ -130,3 +133,8 @@ interface SettingsStampCreateModalState extends BaseModalState {
   type: 'settings-stamp-create'
   file: File
 }
+
+interface SettingsStampEditModalState extends BaseModalState {
+  type: 'settings-stamp-edit'
+  id: StampId
+}

From 510e3d36a65245c6ffb4ac4cb30cca5686d16875 Mon Sep 17 00:00:00 2001
From: mehm8128 <mehm8128@gmail.com>
Date: Sat, 11 Nov 2023 00:30:20 +0900
Subject: [PATCH 03/25] =?UTF-8?q?=E3=83=A2=E3=83=BC=E3=83=80=E3=83=AB?=
 =?UTF-8?q?=E3=82=92=E3=83=87=E3=82=B6=E3=82=A4=E3=83=B3=E3=81=AE=E5=A4=89?=
 =?UTF-8?q?=E6=9B=B4=E3=81=AB=E5=BE=93=E3=81=A3=E3=81=9F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/Modal/Common/ModalFrame.vue    |  2 +-
 src/components/Modal/ModalContainer.vue       |  5 +-
 .../StampCreateModal/StampCreateModal.vue     | 90 +++++++++----------
 .../Modal/StampEditModal/StampEditModal.vue   | 83 ++++++++---------
 .../StampImageEditModal.vue                   | 83 +++++++++++++++++
 src/components/Settings/ImageUpload.vue       |  8 +-
 src/components/Settings/StampTab/NewStamp.vue | 20 ++---
 src/store/ui/modal/states.ts                  |  8 +-
 8 files changed, 182 insertions(+), 117 deletions(-)
 create mode 100644 src/components/Modal/StampImageEditModal/StampImageEditModal.vue

diff --git a/src/components/Modal/Common/ModalFrame.vue b/src/components/Modal/Common/ModalFrame.vue
index c3cdff219..8637f7af9 100644
--- a/src/components/Modal/Common/ModalFrame.vue
+++ b/src/components/Modal/Common/ModalFrame.vue
@@ -49,7 +49,7 @@ const { clearModal } = useModalStore()
   display: flex;
   flex-flow: column nowrap;
   max-height: 480px;
-  max-width: 600px;
+  max-width: 440px;
   width: #{calc(100% - 32px)};
   border-radius: 4px;
   overflow: hidden;
diff --git a/src/components/Modal/ModalContainer.vue b/src/components/Modal/ModalContainer.vue
index 05fc5880f..427365114 100644
--- a/src/components/Modal/ModalContainer.vue
+++ b/src/components/Modal/ModalContainer.vue
@@ -43,7 +43,7 @@
             : undefined
         "
         :file="
-          currentState.type === 'settings-stamp-create'
+          currentState.type === 'settings-stamp-image-edit'
             ? currentState.file
             : undefined
         "
@@ -71,6 +71,7 @@ import GroupAdminAddModal from './GroupAdminAddModal/GroupAdminAddModal.vue'
 import GroupMemberAddModal from './GroupMemberAddModal/GroupMemberAddModal.vue'
 import StampCreateModal from './StampCreateModal/StampCreateModal.vue'
 import StampEditModal from './StampEditModal/StampEditModal.vue'
+import StampImageEditModal from './StampImageEditModal/StampImageEditModal.vue'
 
 const { shouldShowModal, currentState } = useModalStore()
 
@@ -108,6 +109,8 @@ const component = computed(() => {
       return StampCreateModal
     case 'settings-stamp-edit':
       return StampEditModal
+    case 'settings-stamp-image-edit':
+      return StampImageEditModal
   }
   // eslint-disable-next-line no-console
   console.error('Unexpected modal type:', currentState.value)
diff --git a/src/components/Modal/StampCreateModal/StampCreateModal.vue b/src/components/Modal/StampCreateModal/StampCreateModal.vue
index d75db9524..92a0d4248 100644
--- a/src/components/Modal/StampCreateModal/StampCreateModal.vue
+++ b/src/components/Modal/StampCreateModal/StampCreateModal.vue
@@ -1,8 +1,13 @@
 <template>
   <modal-frame title="新規スタンプ登録" icon-name="">
     <div :class="$style.container">
-      <image-upload v-model="stampImage" :class="$style.form" />
-      <div :class="$style.rightContainer">
+      <div :class="$style.leftContainer">
+        <button :class="$style.imgButton" @click="selectImage">
+          <img v-if="imageUrl" :src="imageUrl" width="136" height="136" />
+          <a-icon v-else name="plus" mdi />
+        </button>
+      </div>
+      <div>
         <form-input
           v-model="newStampName"
           label="スタンプ名"
@@ -15,7 +20,7 @@
         <p :class="$style.creator">@ {{ detail?.name }}</p>
       </div>
     </div>
-    <p :class="$style.note">{{ cropperNote }}</p>
+    <p :class="$style.note">{{ note }}</p>
     <div :class="$style.buttonContainer">
       <form-button label="キャンセル" color="secondary" @click="cancel" />
       <form-button
@@ -34,23 +39,25 @@ import { ref, computed, watch, type Ref } from 'vue'
 import apis, { formatResizeError } from '/@/lib/apis'
 import { isValidStampName } from '/@/lib/validate'
 import { useToastStore } from '/@/store/ui/toast'
-import { imageSize } from '/@/components/Settings/StampTab/imageSize'
-import ImageUpload from '/@/components/Settings/ImageUpload.vue'
 import FormInput from '/@/components/UI/FormInput.vue'
 import FormButton from '/@/components/UI/FormButton.vue'
 import ModalFrame from '../Common/ModalFrame.vue'
 import { useMeStore } from '/@/store/domain/me'
 import { useModalStore } from '/@/store/ui/modal'
-
-const props = defineProps<{
-  file: File
-}>()
+import AIcon from '/@/components/UI/AIcon.vue'
+import { useFileSelect } from '/@/composables/dom/useFileSelect'
 
 const { detail } = useMeStore()
-const { clearModal } = useModalStore()
+const { clearModal, pushModal } = useModalStore()
 
-const stampImage = ref(props.file)
+const stampImage = ref<File>()
+const imageUrl = computed(() =>
+  stampImage.value ? URL.createObjectURL(stampImage.value) : undefined
+)
 const newStampName = ref('')
+
+const acceptImageType = ['image/jpeg', 'image/png', 'image/gif'].join(',')
+
 const isCreateEnabled = computed(() => isValidStampName(newStampName.value))
 watch(
   () => stampImage.value,
@@ -61,9 +68,10 @@ watch(
   }
 )
 
-const isGif = stampImage.value.type === 'image/gif'
-const cropperNote = computed(() =>
-  isGif ? 'GIFは切り抜きできません' : '画像の位置・サイズを編集できます'
+const note = computed(() =>
+  stampImage.value
+    ? '画像をクリックしてアップロード'
+    : '＋をクリックしてアップロード'
 )
 
 /**
@@ -80,17 +88,6 @@ const useStampCreate = (
 
   const createStamp = async () => {
     if (!stampImage.value) return
-    try {
-      const size = await imageSize(stampImage.value)
-      if (size.height !== size.width) {
-        addErrorToast('画像が正方形ではありません。編集してください')
-        return
-      }
-    } catch (e) {
-      // eslint-disable-next-line no-console
-      console.error('スタンプの作成に失敗しました', e)
-      addErrorToast(formatResizeError(e, 'スタンプの作成に失敗しました'))
-    }
     try {
       isCreating.value = true
       await apis.createStamp(newStampName.value, stampImage.value)
@@ -115,26 +112,17 @@ const { isCreating, createStamp } = useStampCreate(newStampName, stampImage)
 const cancel = () => {
   clearModal()
 }
+
+const { selectImage } = useFileSelect({ accept: acceptImageType }, files => {
+  if (!files[0]) return
+  pushModal({
+    type: 'settings-stamp-image-edit',
+    file: files[0]
+  })
+})
 </script>
 
 <style lang="scss" module>
-.subtitle {
-  a {
-    pointer-events: none;
-  }
-}
-.item {
-  margin: 16px 0;
-
-  &:first-child {
-    margin-top: 0;
-  }
-
-  &:last-child {
-    margin-bottom: 0;
-  }
-}
-
 .form {
   margin: 8px 0;
 }
@@ -142,11 +130,23 @@ const cancel = () => {
 .container {
   display: flex;
   justify-content: space-between;
-  align-items: center;
   gap: 16px;
 }
-.rightContainer {
+.leftContainer {
+  width: 136px;
+  height: 136px;
+  margin: 8px 0;
+  flex-grow: 1;
+}
+.imgButton {
   width: 100%;
+  height: 100%;
+  border: 2px solid $theme-ui-secondary-default;
+  border-radius: 4px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
 }
 
 .label {
@@ -158,8 +158,8 @@ const cancel = () => {
 }
 .note {
   @include color-ui-secondary;
-  margin-left: 12px;
   margin-bottom: 12px;
+  font-size: 12px;
 }
 .buttonContainer {
   display: flex;
diff --git a/src/components/Modal/StampEditModal/StampEditModal.vue b/src/components/Modal/StampEditModal/StampEditModal.vue
index da085df35..bdca9c5fe 100644
--- a/src/components/Modal/StampEditModal/StampEditModal.vue
+++ b/src/components/Modal/StampEditModal/StampEditModal.vue
@@ -1,8 +1,12 @@
 <template>
   <modal-frame title="スタンプ編集" icon-name="">
     <div :class="$style.container">
-      <image-upload v-model="newImageData" :class="$style.form" />
-      <div :class="$style.rightContainer">
+      <div :class="$style.leftContainer">
+        <button :class="$style.imgButton" @click="selectImage">
+          <img :src="imageUrl" width="136" height="136" />
+        </button>
+      </div>
+      <div>
         <form-input
           v-model="state.name"
           label="スタンプ名"
@@ -18,7 +22,7 @@
         />
       </div>
     </div>
-    <p v-if="newImageData" :class="$style.note">{{ cropperNote }}</p>
+    <p :class="$style.note">{{ note }}</p>
     <div :class="$style.buttonContainer">
       <form-button label="キャンセル" color="secondary" @click="cancel" />
       <form-button
@@ -35,13 +39,11 @@
 <script lang="ts" setup>
 import type { Ref } from 'vue'
 import { computed, reactive, ref } from 'vue'
-import apis, { formatResizeError } from '/@/lib/apis'
+import apis, { buildFilePath, formatResizeError } from '/@/lib/apis'
 import type { Stamp } from '@traptitech/traq'
 import useStateDiff from '/@/components/Settings/composables/useStateDiff'
 import { isValidStampName } from '/@/lib/validate'
 import { useToastStore } from '/@/store/ui/toast'
-import { imageSize } from '/@/components/Settings/StampTab/imageSize'
-import ImageUpload from '/@/components/Settings/ImageUpload.vue'
 import FormInput from '/@/components/UI/FormInput.vue'
 import FormSelector from '/@/components/UI/FormSelector.vue'
 import FormButton from '/@/components/UI/FormButton.vue'
@@ -50,7 +52,7 @@ import { useStampsStore } from '/@/store/entities/stamps'
 import { useModalStore } from '/@/store/ui/modal'
 import type { StampId } from '/@/types/entity-ids'
 import ModalFrame from '../Common/ModalFrame.vue'
-import { onMounted } from 'vue'
+import { useFileSelect } from '/@/composables/dom/useFileSelect'
 
 type StampEditState = Pick<Stamp, 'name' | 'creatorId'>
 
@@ -58,7 +60,7 @@ const props = defineProps<{
   id: StampId
 }>()
 
-const { clearModal } = useModalStore()
+const { clearModal, pushModal } = useModalStore()
 const { stampsMap } = useStampsStore()
 const stamp = computed(() => stampsMap.value.get(props.id) ?? ({} as Stamp))
 
@@ -68,6 +70,11 @@ const creatorOptions = computed(() =>
 )
 
 const newImageData = ref<File | undefined>()
+const imageUrl = computed(() =>
+  stamp.value ? buildFilePath(stamp.value.fileId) : ''
+)
+
+const acceptImageType = ['image/jpeg', 'image/png', 'image/gif'].join(',')
 
 const useState = (stamp: Stamp) => {
   const oldState = computed(
@@ -98,13 +105,6 @@ const useStampEdit = (
 
   const editStamp = async () => {
     try {
-      if (newImageData.value) {
-        const size = await imageSize(newImageData.value)
-        if (size.height !== size.width) {
-          addErrorToast('画像が正方形ではありません。編集してください')
-          return
-        }
-      }
       try {
         isEditing.value = true
         const promises = []
@@ -160,40 +160,22 @@ const { isEditing, editStamp } = useStampEdit(
   }
 )
 
-const isGif = newImageData.value?.type === 'image/gif'
-const cropperNote = computed(() =>
-  isGif ? 'GIFは切り抜きできません' : '画像の位置・サイズを編集できます'
-)
+const note = '画像をクリックしてアップロード'
 
 const cancel = () => {
   clearModal()
 }
 
-onMounted(async () => {
-  const stampImage = (await apis.getStampImage(props.id)).data
-  newImageData.value = new File([stampImage], 'stamp.png', {
-    type: 'image/png'
+const { selectImage } = useFileSelect({ accept: acceptImageType }, files => {
+  if (!files[0]) return
+  pushModal({
+    type: 'settings-stamp-image-edit',
+    file: files[0]
   })
 })
 </script>
 
 <style lang="scss" module>
-.subtitle {
-  a {
-    pointer-events: none;
-  }
-}
-.item {
-  margin: 16px 0;
-
-  &:first-child {
-    margin-top: 0;
-  }
-
-  &:last-child {
-    margin-bottom: 0;
-  }
-}
 
 .form {
   margin: 8px 0;
@@ -202,20 +184,25 @@ onMounted(async () => {
 .container {
   display: flex;
   justify-content: space-between;
-  align-items: center;
   gap: 16px;
 }
-.rightContainer {
+.leftContainer {
+  width: 136px;
+  height: 136px;
+  margin: 8px 0;
+  flex-grow: 1;
+}
+.imgButton {
   width: 100%;
+  height: 100%;
+  border: 2px solid $theme-ui-secondary-default;
+  border-radius: 4px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
 }
 
-.label {
-  @include color-ui-secondary;
-  margin-bottom: 16px;
-}
-.creator {
-  @include color-ui-primary;
-}
 .note {
   @include color-ui-secondary;
   margin-left: 12px;
diff --git a/src/components/Modal/StampImageEditModal/StampImageEditModal.vue b/src/components/Modal/StampImageEditModal/StampImageEditModal.vue
new file mode 100644
index 000000000..2548b8dec
--- /dev/null
+++ b/src/components/Modal/StampImageEditModal/StampImageEditModal.vue
@@ -0,0 +1,83 @@
+<template>
+  <modal-frame
+    title="スタンプ画像の編集"
+    subtitle="画像の位置・サイズを編集できます"
+    icon-name=""
+  >
+    <div :class="$style.container">
+      <image-upload v-model="stampImage" />
+    </div>
+    <div :class="$style.buttonContainer">
+      <form-button label="キャンセル" color="secondary" @click="cancel" />
+      <form-button
+        label="更新する"
+        :loading="isCreating"
+        @click="createStamp"
+      />
+    </div>
+  </modal-frame>
+</template>
+
+<script lang="ts" setup>
+import { ref, type Ref } from 'vue'
+import { formatResizeError } from '/@/lib/apis'
+import { useToastStore } from '/@/store/ui/toast'
+import { imageSize } from '/@/components/Settings/StampTab/imageSize'
+import FormButton from '/@/components/UI/FormButton.vue'
+import ModalFrame from '../Common/ModalFrame.vue'
+import { useModalStore } from '/@/store/ui/modal'
+import ImageUpload from '/@/components/Settings/ImageUpload.vue'
+
+const props = defineProps<{
+  file: File
+}>()
+
+const { popModal } = useModalStore()
+
+const stampImage = ref<File>(props.file)
+
+const useStampCreate = (stampImage: Ref<File | undefined>) => {
+  const { addErrorToast } = useToastStore()
+  const isCreating = ref(false)
+
+  const createStamp = async () => {
+    if (!stampImage.value) return
+    isCreating.value = true
+    try {
+      const size = await imageSize(stampImage.value)
+      if (size.height !== size.width) {
+        addErrorToast('画像が正方形ではありません。編集してください')
+        return
+      }
+    } catch (e) {
+      // eslint-disable-next-line no-console
+      console.error('画像の整形に失敗しました', e)
+      addErrorToast(formatResizeError(e, '画像の整形に失敗しました'))
+    }
+    isCreating.value = false
+    popModal()
+  }
+
+  return { isCreating, createStamp }
+}
+
+const { isCreating, createStamp } = useStampCreate(stampImage)
+const cancel = () => {
+  popModal()
+}
+</script>
+
+<style lang="scss" module>
+.container {
+  display: flex;
+  justify-content: center;
+}
+
+.buttonContainer {
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+  gap: 16px;
+  margin-top: 16px;
+}
+</style>
diff --git a/src/components/Settings/ImageUpload.vue b/src/components/Settings/ImageUpload.vue
index 6cfd0f0b2..9cfe50ccc 100644
--- a/src/components/Settings/ImageUpload.vue
+++ b/src/components/Settings/ImageUpload.vue
@@ -100,10 +100,6 @@ const updateImgView = () => {
   cropper.replace(originalImgUrl.value ?? '')
 }
 
-watchEffect(() => {
-  originalImg.value = props.modelValue
-})
-
 watchEffect(updateImgView)
 
 watchEffect(() => {
@@ -119,8 +115,8 @@ onUnmounted(() => {
 
 <style lang="scss" module>
 .cropper {
-  width: 200px;
-  height: 200px;
+  width: 280px;
+  height: 280px;
   margin: 12px;
   &[data-is-rounded] {
     :global(.cropper-view-box),
diff --git a/src/components/Settings/StampTab/NewStamp.vue b/src/components/Settings/StampTab/NewStamp.vue
index 1d2c48638..a0459709a 100644
--- a/src/components/Settings/StampTab/NewStamp.vue
+++ b/src/components/Settings/StampTab/NewStamp.vue
@@ -5,33 +5,23 @@
       :class="$style.form"
       icon="plus"
       mdi
-      type="secondary"
-      @click="selectImage"
+      color="secondary"
+      @click="handleOpenModal"
     />
   </div>
 </template>
 
 <script lang="ts" setup>
-import { ref } from 'vue'
 import FormButton from '/@/components/UI/FormButton.vue'
-import { useFileSelect } from '/@/composables/dom/useFileSelect'
 import { useModalStore } from '/@/store/ui/modal'
 
 const { pushModal } = useModalStore()
 
-const acceptImageType = ['image/jpeg', 'image/png', 'image/gif'].join(',')
-
-const originalImg = ref<File | undefined>()
-const { selectImage } = useFileSelect({ accept: acceptImageType }, files => {
-  originalImg.value = files[0]
-
-  if (!originalImg.value) return
+const handleOpenModal = () => {
   pushModal({
-    type: 'settings-stamp-create',
-    file: originalImg.value
+    type: 'settings-stamp-create'
   })
-  originalImg.value = undefined
-})
+}
 </script>
 
 <style lang="scss" module>
diff --git a/src/store/ui/modal/states.ts b/src/store/ui/modal/states.ts
index be0cdf593..0c05a2645 100644
--- a/src/store/ui/modal/states.ts
+++ b/src/store/ui/modal/states.ts
@@ -27,6 +27,7 @@ type ModalStateType =
   | 'group-member-add'
   | 'settings-stamp-create'
   | 'settings-stamp-edit'
+  | 'settings-stamp-image-edit'
 
 export type ModalState =
   | UserModalState
@@ -45,6 +46,7 @@ export type ModalState =
   | GroupMemberAddModalState
   | SettingsStampCreateModalState
   | SettingsStampEditModalState
+  | SettingsStampImageEditModalState
 
 interface BaseModalState {
   /** モーダル種別 */
@@ -131,10 +133,14 @@ interface GroupMemberAddModalState extends BaseModalState {
 
 interface SettingsStampCreateModalState extends BaseModalState {
   type: 'settings-stamp-create'
-  file: File
 }
 
 interface SettingsStampEditModalState extends BaseModalState {
   type: 'settings-stamp-edit'
   id: StampId
 }
+
+interface SettingsStampImageEditModalState extends BaseModalState {
+  type: 'settings-stamp-image-edit'
+  file: File
+}

From 2bab0c0fbc31dc86d6fcdef761ebeda5ccf8bdb6 Mon Sep 17 00:00:00 2001
From: mehm8128 <mehm8128@gmail.com>
Date: Sat, 11 Nov 2023 01:25:11 +0900
Subject: [PATCH 04/25] =?UTF-8?q?=E4=B8=89=E7=82=B9=E3=83=AA=E3=83=BC?=
 =?UTF-8?q?=E3=83=80=E3=83=BC=E3=83=A1=E3=83=8B=E3=83=A5=E3=83=BC=E3=82=92?=
 =?UTF-8?q?=E8=A1=A8=E7=A4=BA?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/assets/mdi.ts                             |   6 +-
 .../Settings/StampTab/StampContextMenu.vue    | 109 ++++++++++++++++++
 .../Settings/StampTab/StampItem.vue           |  30 +++--
 .../Settings/StampTab/StampManagement.vue     |  11 +-
 4 files changed, 135 insertions(+), 21 deletions(-)
 create mode 100644 src/components/Settings/StampTab/StampContextMenu.vue

diff --git a/src/assets/mdi.ts b/src/assets/mdi.ts
index c7dd5a045..2130c677b 100644
--- a/src/assets/mdi.ts
+++ b/src/assets/mdi.ts
@@ -79,7 +79,8 @@ import {
   mdiCrown,
   mdiFormatTitle,
   mdiCloseCircle,
-  mdiNotebook
+  mdiNotebook,
+  mdiDelete
 } from '@mdi/js'
 
 interface MdiIconsMapping {
@@ -167,7 +168,8 @@ const mdi: MdiIconsMapping = {
   'music-note': mdiMusicNote,
   stop: mdiStop,
   crown: mdiCrown,
-  'format-title': mdiFormatTitle
+  'format-title': mdiFormatTitle,
+  delete: mdiDelete
 }
 
 export default mdi
diff --git a/src/components/Settings/StampTab/StampContextMenu.vue b/src/components/Settings/StampTab/StampContextMenu.vue
new file mode 100644
index 000000000..75336278c
--- /dev/null
+++ b/src/components/Settings/StampTab/StampContextMenu.vue
@@ -0,0 +1,109 @@
+<template>
+  <context-menu-container :position="position" @close="close">
+    <div :class="$style.container">
+      <button :class="$style.button" @click="withClose(updateStampImage)">
+        <a-icon name="file-image" mdi />
+        スタンプ画像を更新する
+      </button>
+      <button :class="$style.button" @click="withClose(editStamp)">
+        <a-icon name="pencil-outline" mdi />
+        スタンプを編集する
+      </button>
+      <button
+        :class="[$style.button, $style.dangerButton]"
+        @click="withClose(deleteStamp)"
+      >
+        <a-icon name="delete" mdi />
+        スタンプを削除する
+      </button>
+    </div>
+  </context-menu-container>
+</template>
+
+<script lang="ts" setup>
+import type { StampId } from '/@/types/entity-ids'
+import type { Point } from '/@/lib/basic/point'
+import ContextMenuContainer from '/@/components/UI/ContextMenuContainer.vue'
+import { useModalStore } from '/@/store/ui/modal'
+import { useFileSelect } from '/@/composables/dom/useFileSelect'
+import apis from '/@/lib/apis'
+import useExecWithToast from '/@/composables/toast/useExecWithToast'
+import AIcon from '/@/components/UI/AIcon.vue'
+
+const props = defineProps<{
+  position: Point
+  stampId: StampId
+}>()
+
+const emit = defineEmits<{
+  (e: 'close'): void
+}>()
+
+const { pushModal } = useModalStore()
+const { execWithToast } = useExecWithToast()
+
+const acceptImageType = ['image/jpeg', 'image/png', 'image/gif'].join(',')
+
+const close = () => {
+  emit('close')
+}
+const withClose = async (func: () => void | Promise<void>) => {
+  await func()
+  close()
+}
+
+const { selectImage } = useFileSelect({ accept: acceptImageType }, files => {
+  //FIXME: 先にclose()してinput要素が消えちゃうから実行されない
+  if (!files[0]) return
+  pushModal({
+    type: 'settings-stamp-image-edit',
+    file: files[0]
+  })
+})
+
+const updateStampImage = () => {
+  selectImage()
+}
+
+const editStamp = () => {
+  pushModal({
+    type: 'settings-stamp-edit',
+    id: props.stampId
+  })
+}
+
+const deleteStamp = () => {
+  if (!confirm('本当にこのスタンプを削除しますか？')) return
+
+  execWithToast(
+    'スタンプを削除しました',
+    'スタンプの削除に失敗しました',
+    async () => {
+      await apis.deleteStamp(props.stampId)
+    }
+  )
+}
+</script>
+
+<style lang="scss" module>
+.container {
+  @include background-primary;
+  @include drop-shadow-default;
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+  width: max-content;
+  padding: 16px 16px;
+  border-radius: 4px;
+}
+
+.button {
+  @include color-ui-primary;
+  display: flex;
+  gap: 12px;
+  cursor: pointer;
+}
+.dangerButton {
+  color: $theme-accent-error-default;
+}
+</style>
diff --git a/src/components/Settings/StampTab/StampItem.vue b/src/components/Settings/StampTab/StampItem.vue
index b44bde5b5..205b4ef31 100644
--- a/src/components/Settings/StampTab/StampItem.vue
+++ b/src/components/Settings/StampTab/StampItem.vue
@@ -4,12 +4,18 @@
     <div :class="$style.notSelected">
       <p>:{{ stamp.name }}:</p>
       <icon-button
-        icon-name="pencil-outline"
+        icon-name="dots-horizontal"
         icon-mdi
         :class="$style.editIcon"
-        @click="onStartEdit"
+        @click="onDotsClick"
       />
     </div>
+    <stamp-context-menu
+      v-if="contextMenuPosition"
+      :position="contextMenuPosition"
+      :stamp-id="stamp.id"
+      @close="closeContextMenu"
+    />
   </div>
 </template>
 
@@ -18,20 +24,26 @@ import type { Stamp } from '@traptitech/traq'
 import { computed } from 'vue'
 import IconButton from '/@/components/UI/IconButton.vue'
 import { buildFilePath } from '/@/lib/apis'
+import useContextMenu from '/@/composables/useContextMenu'
+import StampContextMenu from './StampContextMenu.vue'
 
 const props = defineProps<{
   stamp: Stamp
 }>()
 
-const emit = defineEmits<{
-  (e: 'startEdit'): void
-  (e: 'endEdit'): void
-}>()
-
 const url = computed(() => buildFilePath(props.stamp.fileId))
 
-const onStartEdit = () => {
-  emit('startEdit')
+const {
+  position: contextMenuPosition,
+  open: openContextMenu,
+  close: closeContextMenu
+} = useContextMenu()
+
+const onDotsClick = (e: MouseEvent) => {
+  openContextMenu({
+    x: e.pageX,
+    y: e.pageY
+  })
 }
 </script>
 
diff --git a/src/components/Settings/StampTab/StampManagement.vue b/src/components/Settings/StampTab/StampManagement.vue
index 1291c721a..81100b23a 100644
--- a/src/components/Settings/StampTab/StampManagement.vue
+++ b/src/components/Settings/StampTab/StampManagement.vue
@@ -6,7 +6,6 @@
         v-for="stamp in myStamps"
         :key="stamp.id"
         :stamp="stamp"
-        @start-edit="selectStamp(stamp.id)"
       />
     </div>
   </div>
@@ -15,14 +14,11 @@
 <script lang="ts" setup>
 import StampItem from './StampItem.vue'
 import { computed } from 'vue'
-import type { StampId } from '/@/types/entity-ids'
 import { useMeStore } from '/@/store/domain/me'
 import { useStampsStore } from '/@/store/entities/stamps'
-import { useModalStore } from '/@/store/ui/modal'
 
 const { myId } = useMeStore()
 const { stampsMap } = useStampsStore()
-const { pushModal } = useModalStore()
 
 // TODO: 管理者なら全部変えられるたぶん https://github.com/traPtitech/traQ_S-UI/issues/291
 
@@ -30,12 +26,7 @@ const myStamps = computed(() =>
   [...stampsMap.value.values()].filter(stamp => stamp.creatorId === myId.value)
 )
 
-const selectStamp = (id: StampId) => {
-  pushModal({
-    type: 'settings-stamp-edit',
-    id
-  })
-}
+
 </script>
 
 <style lang="scss" module>

From d764f1b8308e0e764cac493e460e3b1c69cc82ff Mon Sep 17 00:00:00 2001
From: mehm8128 <mehm8128@gmail.com>
Date: Sat, 11 Nov 2023 12:46:47 +0900
Subject: [PATCH 05/25] =?UTF-8?q?admin=E3=81=AF=E4=BB=96=E3=81=AE=E4=BA=BA?=
 =?UTF-8?q?=E3=81=AE=E3=82=B9=E3=82=BF=E3=83=B3=E3=83=97=E3=82=92=E8=A1=A8?=
 =?UTF-8?q?=E7=A4=BA=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

---
 .../Settings/StampTab/StampItem.vue           |  56 +++++++--
 .../Settings/StampTab/StampManagement.vue     | 109 +++++++++++++++++-
 2 files changed, 147 insertions(+), 18 deletions(-)

diff --git a/src/components/Settings/StampTab/StampItem.vue b/src/components/Settings/StampTab/StampItem.vue
index 205b4ef31..64c62f2a6 100644
--- a/src/components/Settings/StampTab/StampItem.vue
+++ b/src/components/Settings/StampTab/StampItem.vue
@@ -1,12 +1,21 @@
 <template>
   <div :class="$style.container">
-    <img :src="url" :class="$style.stamp" />
-    <div :class="$style.notSelected">
-      <p>:{{ stamp.name }}:</p>
+    <img :src="url" :class="$style.stamp" loading="lazy" />
+    <div :class="$style.innerContainer">
+      <div :class="$style.textContainer">
+        <p>:{{ stamp.name }}:</p>
+        <p
+          v-if="showCreator"
+          :title="`@${stamp.creatorId}`"
+          :class="$style.creator"
+        >
+          @{{ stamp.creatorId }}
+        </p>
+      </div>
       <icon-button
         icon-name="dots-horizontal"
         icon-mdi
-        :class="$style.editIcon"
+        :class="$style.dotsButon"
         @click="onDotsClick"
       />
     </div>
@@ -27,9 +36,15 @@ import { buildFilePath } from '/@/lib/apis'
 import useContextMenu from '/@/composables/useContextMenu'
 import StampContextMenu from './StampContextMenu.vue'
 
-const props = defineProps<{
-  stamp: Stamp
-}>()
+const props = withDefaults(
+  defineProps<{
+    stamp: Stamp
+    showCreator?: boolean
+  }>(),
+  {
+    showCreator: false
+  }
+)
 
 const url = computed(() => buildFilePath(props.stamp.fileId))
 
@@ -57,24 +72,41 @@ const onDotsClick = (e: MouseEvent) => {
     top: 12px;
     bottom: 12px;
   }
-  &:hover {
-    @include background-tertiary;
-  }
 }
 
-.editIcon {
+.textContainer {
+  width: 100%;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+.creator {
   @include color-ui-secondary;
+  max-width: 120px;
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+}
+
+.dotsButon {
+  @include color-ui-tertiary;
+  padding: 4px;
+  &:hover {
+    @include color-ui-secondary;
+    @include background-secondary;
+  }
 }
 
 .stamp {
   height: 40px;
   width: 40px;
 }
-.notSelected {
+.innerContainer {
   display: flex;
   align-items: center;
   justify-content: space-between;
   width: 100%;
+  gap: 8px;
   padding: 0 24px;
 }
 </style>
diff --git a/src/components/Settings/StampTab/StampManagement.vue b/src/components/Settings/StampTab/StampManagement.vue
index 81100b23a..5cdfb1d04 100644
--- a/src/components/Settings/StampTab/StampManagement.vue
+++ b/src/components/Settings/StampTab/StampManagement.vue
@@ -1,32 +1,123 @@
 <template>
-  <div :class="$style.element">
+  <section :class="$style.element">
     <h3 :class="$style.header">スタンプ管理</h3>
-    <div :class="$style.content">
+    <div
+      v-if="hasChannelEditPermission"
+      role="tablist"
+      :class="$style.tablist"
+      @keydown.left="onKeydown"
+      @keydown.right="onKeydown"
+    >
+      <a-tab
+        :id="myStampTabId"
+        ref="myStampTab"
+        :aria-selected="currentTab === 'myStamp'"
+        :aria-controls="myStampPanelId"
+        :tabindex="currentTab === 'myStamp' ? 0 : -1"
+        label="所有スタンプ"
+        @click="currentTab = 'myStamp'"
+      />
+      <a-tab
+        :id="otherStampTabId"
+        ref="otherStampTab"
+        :aria-selected="currentTab === 'otherStamp'"
+        :aria-controls="otherStampPanelId"
+        :tabindex="currentTab === 'otherStamp' ? 0 : -1"
+        label="その他のスタンプ"
+        @click="currentTab = 'otherStamp'"
+      />
+    </div>
+    <div
+      :id="myStampPanelId"
+      :class="$style.content"
+      role="tabpanel"
+      :hidden="currentTab !== 'myStamp'"
+    >
+      <p v-if="myStamps.length === 0">所有しているスタンプはありません</p>
       <stamp-item
         v-for="stamp in myStamps"
+        v-else
         :key="stamp.id"
         :stamp="stamp"
       />
     </div>
-  </div>
+    <div
+      v-if="hasChannelEditPermission"
+      :id="otherStampPanelId"
+      :class="$style.content"
+      role="tabpanel"
+      :hidden="currentTab !== 'otherStamp'"
+    >
+      <stamp-item
+        v-for="stamp in otherStamps"
+        :key="stamp.id"
+        :stamp="stamp"
+        show-creator
+      />
+    </div>
+  </section>
 </template>
 
 <script lang="ts" setup>
 import StampItem from './StampItem.vue'
-import { computed } from 'vue'
+import { computed, ref, type Ref } from 'vue'
 import { useMeStore } from '/@/store/domain/me'
 import { useStampsStore } from '/@/store/entities/stamps'
+import { randomString } from '/@/lib/basic/randomString'
+import ATab from '/@/components/UI/ATab.vue'
+import { UserPermission } from '@traptitech/traq'
 
 const { myId } = useMeStore()
 const { stampsMap } = useStampsStore()
 
-// TODO: 管理者なら全部変えられるたぶん https://github.com/traPtitech/traQ_S-UI/issues/291
-
 const myStamps = computed(() =>
   [...stampsMap.value.values()].filter(stamp => stamp.creatorId === myId.value)
 )
+const otherStamps = computed(() =>
+  [...stampsMap.value.values()].filter(stamp => stamp.creatorId !== myId.value)
+)
 
+const { detail } = useMeStore()
+const hasChannelEditPermission = computed(() =>
+  detail.value?.permissions.includes(UserPermission.EditStampCreatedByOthers)
+)
 
+const myStampTab = ref<InstanceType<typeof ATab> | null>(null)
+const otherStampTab = ref<InstanceType<typeof ATab> | null>(null)
+
+const myStampTabId = randomString()
+const otherStampTabId = randomString()
+
+const myStampPanelId = randomString()
+const otherStampPanelId = randomString()
+
+const tabNames = ['myStamp', 'otherStamp'] as const
+const tabNameRefs: Record<
+  (typeof tabNames)[number],
+  Ref<InstanceType<typeof ATab> | null>
+> = {
+  myStamp: myStampTab,
+  otherStamp: otherStampTab
+}
+const currentTab = ref<(typeof tabNames)[number]>('myStamp')
+const onKeydown = (e: KeyboardEvent) => {
+  const index = tabNames.indexOf(currentTab.value)
+  if (index === -1) return
+
+  let nextIndex: number
+  if (e.key === 'ArrowLeft') {
+    nextIndex = index - 1
+  } else if (e.key === 'ArrowRight') {
+    nextIndex = index + 1
+  } else {
+    return
+  }
+
+  nextIndex = (nextIndex + tabNames.length) % tabNames.length
+
+  currentTab.value = tabNames[nextIndex] ?? currentTab.value
+  tabNameRefs[currentTab.value].value?.focus()
+}
 </script>
 
 <style lang="scss" module>
@@ -39,4 +130,10 @@ const myStamps = computed(() =>
 .content {
   margin-left: 12px;
 }
+
+.tablist {
+  display: flex;
+  gap: 8px;
+  margin-bottom: 4px;
+}
 </style>

From 11a6df18fbd150f22a904bb26f2fe0a112179bcf Mon Sep 17 00:00:00 2001
From: mehm8128 <mehm8128@gmail.com>
Date: Sat, 11 Nov 2023 12:57:58 +0900
Subject: [PATCH 06/25] =?UTF-8?q?loading=3D"lazy"=E3=81=A7=E5=9E=8B?=
 =?UTF-8?q?=E3=82=A8=E3=83=A9=E3=83=BC=E3=81=8C=E5=87=BA=E3=81=AA=E3=81=84?=
 =?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

---
 src/components/Modal/StampEditModal/StampEditModal.vue | 1 -
 src/types/volar-env.d.ts                               | 3 +++
 2 files changed, 3 insertions(+), 1 deletion(-)

diff --git a/src/components/Modal/StampEditModal/StampEditModal.vue b/src/components/Modal/StampEditModal/StampEditModal.vue
index bdca9c5fe..63793e048 100644
--- a/src/components/Modal/StampEditModal/StampEditModal.vue
+++ b/src/components/Modal/StampEditModal/StampEditModal.vue
@@ -176,7 +176,6 @@ const { selectImage } = useFileSelect({ accept: acceptImageType }, files => {
 </script>
 
 <style lang="scss" module>
-
 .form {
   margin: 8px 0;
 }
diff --git a/src/types/volar-env.d.ts b/src/types/volar-env.d.ts
index 9d1224a97..d819a6a2f 100644
--- a/src/types/volar-env.d.ts
+++ b/src/types/volar-env.d.ts
@@ -13,6 +13,9 @@ declare module '@vue/runtime-dom' {
     enterkeyhint?: string
   }
   interface SVGAttributes extends DataAndAriaAttributes {}
+  interface ImgHTMLAttributes extends HTMLAttributes {
+    loading?: 'lazy' | 'eager' | 'auto'
+  }
 }
 
 declare module '@vue/runtime-core' {

From 70adb1d0e2bb0c3525f9dd0622bcd239bac39654 Mon Sep 17 00:00:00 2001
From: mehm8128 <mehm8128@gmail.com>
Date: Sat, 11 Nov 2023 13:23:34 +0900
Subject: [PATCH 07/25] =?UTF-8?q?=E8=A1=A8=E7=A4=BA=E3=82=92=E8=AA=BF?=
 =?UTF-8?q?=E6=95=B4?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/Modal/Common/ModalFrame.vue                   | 2 +-
 src/components/Modal/Common/ModalHeader.vue                  | 4 ++--
 src/components/Modal/StampCreateModal/StampCreateModal.vue   | 2 +-
 src/components/Modal/StampEditModal/StampEditModal.vue       | 2 +-
 .../Modal/StampImageEditModal/StampImageEditModal.vue        | 1 -
 src/components/Settings/StampTab/StampContextMenu.vue        | 4 ++--
 src/components/Settings/StampTab/StampManagement.vue         | 5 ++---
 src/components/UI/FormButton.vue                             | 2 +-
 8 files changed, 10 insertions(+), 12 deletions(-)

diff --git a/src/components/Modal/Common/ModalFrame.vue b/src/components/Modal/Common/ModalFrame.vue
index 8637f7af9..d56806daf 100644
--- a/src/components/Modal/Common/ModalFrame.vue
+++ b/src/components/Modal/Common/ModalFrame.vue
@@ -28,7 +28,7 @@ import { useModalStore } from '/@/store/ui/modal'
 withDefaults(
   defineProps<{
     iconMdi?: boolean
-    iconName: string
+    iconName?: string
     title: string
     subtitle?: string
     returnButton?: boolean
diff --git a/src/components/Modal/Common/ModalHeader.vue b/src/components/Modal/Common/ModalHeader.vue
index 314098f4d..e03964527 100644
--- a/src/components/Modal/Common/ModalHeader.vue
+++ b/src/components/Modal/Common/ModalHeader.vue
@@ -3,7 +3,7 @@
     <modal-return-button v-if="returnButton" :class="$style.returnButton" />
     <div :class="$style.content">
       <h1 :class="$style.title">
-        <a-icon :class="$style.icon" :name="iconName" :mdi="iconMdi" />{{
+        <a-icon v-if="iconName" :class="$style.icon" :name="iconName" :mdi="iconMdi" />{{
           title
         }}
       </h1>
@@ -19,7 +19,7 @@ import ModalReturnButton from './ModalReturnButton.vue'
 withDefaults(
   defineProps<{
     iconMdi?: boolean
-    iconName: string
+    iconName?: string
     title: string
     subtitle?: string
     returnButton?: boolean
diff --git a/src/components/Modal/StampCreateModal/StampCreateModal.vue b/src/components/Modal/StampCreateModal/StampCreateModal.vue
index 92a0d4248..9075daf7e 100644
--- a/src/components/Modal/StampCreateModal/StampCreateModal.vue
+++ b/src/components/Modal/StampCreateModal/StampCreateModal.vue
@@ -1,5 +1,5 @@
 <template>
-  <modal-frame title="新規スタンプ登録" icon-name="">
+  <modal-frame title="新規スタンプ登録">
     <div :class="$style.container">
       <div :class="$style.leftContainer">
         <button :class="$style.imgButton" @click="selectImage">
diff --git a/src/components/Modal/StampEditModal/StampEditModal.vue b/src/components/Modal/StampEditModal/StampEditModal.vue
index 63793e048..c014f58ad 100644
--- a/src/components/Modal/StampEditModal/StampEditModal.vue
+++ b/src/components/Modal/StampEditModal/StampEditModal.vue
@@ -1,5 +1,5 @@
 <template>
-  <modal-frame title="スタンプ編集" icon-name="">
+  <modal-frame title="スタンプ編集">
     <div :class="$style.container">
       <div :class="$style.leftContainer">
         <button :class="$style.imgButton" @click="selectImage">
diff --git a/src/components/Modal/StampImageEditModal/StampImageEditModal.vue b/src/components/Modal/StampImageEditModal/StampImageEditModal.vue
index 2548b8dec..9f5fb0d50 100644
--- a/src/components/Modal/StampImageEditModal/StampImageEditModal.vue
+++ b/src/components/Modal/StampImageEditModal/StampImageEditModal.vue
@@ -2,7 +2,6 @@
   <modal-frame
     title="スタンプ画像の編集"
     subtitle="画像の位置・サイズを編集できます"
-    icon-name=""
   >
     <div :class="$style.container">
       <image-upload v-model="stampImage" />
diff --git a/src/components/Settings/StampTab/StampContextMenu.vue b/src/components/Settings/StampTab/StampContextMenu.vue
index 75336278c..1fb5baebb 100644
--- a/src/components/Settings/StampTab/StampContextMenu.vue
+++ b/src/components/Settings/StampTab/StampContextMenu.vue
@@ -1,7 +1,7 @@
 <template>
   <context-menu-container :position="position" @close="close">
     <div :class="$style.container">
-      <button :class="$style.button" @click="withClose(updateStampImage)">
+      <button :class="$style.button" @click="updateStampImage">
         <a-icon name="file-image" mdi />
         スタンプ画像を更新する
       </button>
@@ -53,12 +53,12 @@ const withClose = async (func: () => void | Promise<void>) => {
 }
 
 const { selectImage } = useFileSelect({ accept: acceptImageType }, files => {
-  //FIXME: 先にclose()してinput要素が消えちゃうから実行されない
   if (!files[0]) return
   pushModal({
     type: 'settings-stamp-image-edit',
     file: files[0]
   })
+  close()
 })
 
 const updateStampImage = () => {
diff --git a/src/components/Settings/StampTab/StampManagement.vue b/src/components/Settings/StampTab/StampManagement.vue
index 5cdfb1d04..6335e0dbb 100644
--- a/src/components/Settings/StampTab/StampManagement.vue
+++ b/src/components/Settings/StampTab/StampManagement.vue
@@ -28,10 +28,10 @@
       />
     </div>
     <div
+      v-if="currentTab === 'myStamp'"
       :id="myStampPanelId"
       :class="$style.content"
       role="tabpanel"
-      :hidden="currentTab !== 'myStamp'"
     >
       <p v-if="myStamps.length === 0">所有しているスタンプはありません</p>
       <stamp-item
@@ -42,11 +42,10 @@
       />
     </div>
     <div
-      v-if="hasChannelEditPermission"
+      v-if="hasChannelEditPermission && currentTab === 'otherStamp'"
       :id="otherStampPanelId"
       :class="$style.content"
       role="tabpanel"
-      :hidden="currentTab !== 'otherStamp'"
     >
       <stamp-item
         v-for="stamp in otherStamps"
diff --git a/src/components/UI/FormButton.vue b/src/components/UI/FormButton.vue
index 1874fd05a..0aaee9ee2 100644
--- a/src/components/UI/FormButton.vue
+++ b/src/components/UI/FormButton.vue
@@ -106,7 +106,7 @@ const spinnerColor = computed(() => {
 .label {
   display: flex;
   align-items: center;
-  gap: 12px;
+  gap: 8px;
   margin: 8px 32px;
   .container[data-is-loading] & {
     visibility: hidden;

From b8961be3b6dc8cb5349340c5fc36b939857d1c5d Mon Sep 17 00:00:00 2001
From: mehm8128 <mehm8128@gmail.com>
Date: Sat, 11 Nov 2023 21:38:56 +0900
Subject: [PATCH 08/25] =?UTF-8?q?=E8=A1=A8=E7=A4=BA=E3=81=A1=E3=82=87?=
 =?UTF-8?q?=E3=81=A3=E3=81=A8=E7=9B=B4=E3=81=97=E3=81=9F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/Modal/Common/ModalHeader.vue     | 17 +++++++++++++----
 .../Modal/StampCreateModal/StampCreateModal.vue |  1 +
 .../Modal/StampEditModal/StampEditModal.vue     |  3 ++-
 src/components/Settings/StampTab/StampItem.vue  | 17 +++++++++--------
 4 files changed, 25 insertions(+), 13 deletions(-)

diff --git a/src/components/Modal/Common/ModalHeader.vue b/src/components/Modal/Common/ModalHeader.vue
index e03964527..b847b761f 100644
--- a/src/components/Modal/Common/ModalHeader.vue
+++ b/src/components/Modal/Common/ModalHeader.vue
@@ -3,11 +3,16 @@
     <modal-return-button v-if="returnButton" :class="$style.returnButton" />
     <div :class="$style.content">
       <h1 :class="$style.title">
-        <a-icon v-if="iconName" :class="$style.icon" :name="iconName" :mdi="iconMdi" />{{
-          title
-        }}
+        <a-icon
+          v-if="iconName"
+          :class="$style.icon"
+          :name="iconName"
+          :mdi="iconMdi"
+        />{{ title }}
       </h1>
-      <h2 :class="$style.subtitle"><slot name="subtitle" /></h2>
+      <h2 :class="$style.subtitle" :data-has-icon="$boolAttr(!iconName)">
+        <slot name="subtitle" />
+      </h2>
     </div>
   </div>
 </template>
@@ -69,6 +74,10 @@ withDefaults(
     weight: 500;
     size: 0.875rem;
   }
+
+  &[data-has-icon] {
+    padding-left: 0;
+  }
 }
 .icon {
   margin-right: 16px;
diff --git a/src/components/Modal/StampCreateModal/StampCreateModal.vue b/src/components/Modal/StampCreateModal/StampCreateModal.vue
index 9075daf7e..beedf15c3 100644
--- a/src/components/Modal/StampCreateModal/StampCreateModal.vue
+++ b/src/components/Modal/StampCreateModal/StampCreateModal.vue
@@ -133,6 +133,7 @@ const { selectImage } = useFileSelect({ accept: acceptImageType }, files => {
   gap: 16px;
 }
 .leftContainer {
+  min-width: 136px;
   width: 136px;
   height: 136px;
   margin: 8px 0;
diff --git a/src/components/Modal/StampEditModal/StampEditModal.vue b/src/components/Modal/StampEditModal/StampEditModal.vue
index c014f58ad..c4f0f4188 100644
--- a/src/components/Modal/StampEditModal/StampEditModal.vue
+++ b/src/components/Modal/StampEditModal/StampEditModal.vue
@@ -186,6 +186,7 @@ const { selectImage } = useFileSelect({ accept: acceptImageType }, files => {
   gap: 16px;
 }
 .leftContainer {
+  min-width: 136px;
   width: 136px;
   height: 136px;
   margin: 8px 0;
@@ -204,8 +205,8 @@ const { selectImage } = useFileSelect({ accept: acceptImageType }, files => {
 
 .note {
   @include color-ui-secondary;
-  margin-left: 12px;
   margin-bottom: 12px;
+  font-size: 12px;
 }
 .buttonContainer {
   display: flex;
diff --git a/src/components/Settings/StampTab/StampItem.vue b/src/components/Settings/StampTab/StampItem.vue
index 64c62f2a6..0b53058bf 100644
--- a/src/components/Settings/StampTab/StampItem.vue
+++ b/src/components/Settings/StampTab/StampItem.vue
@@ -12,12 +12,9 @@
           @{{ stamp.creatorId }}
         </p>
       </div>
-      <icon-button
-        icon-name="dots-horizontal"
-        icon-mdi
-        :class="$style.dotsButon"
-        @click="onDotsClick"
-      />
+      <button :class="$style.dotsButton" @click="onDotsClick">
+        <a-icon name="dots-horizontal" mdi />
+      </button>
     </div>
     <stamp-context-menu
       v-if="contextMenuPosition"
@@ -31,10 +28,10 @@
 <script lang="ts" setup>
 import type { Stamp } from '@traptitech/traq'
 import { computed } from 'vue'
-import IconButton from '/@/components/UI/IconButton.vue'
 import { buildFilePath } from '/@/lib/apis'
 import useContextMenu from '/@/composables/useContextMenu'
 import StampContextMenu from './StampContextMenu.vue'
+import AIcon from '/@/components/UI/AIcon.vue'
 
 const props = withDefaults(
   defineProps<{
@@ -88,9 +85,13 @@ const onDotsClick = (e: MouseEvent) => {
   text-overflow: ellipsis;
 }
 
-.dotsButon {
+.dotsButton {
   @include color-ui-tertiary;
   padding: 4px;
+  border-radius: 4px;
+  cursor: pointer;
+  display: flex;
+
   &:hover {
     @include color-ui-secondary;
     @include background-secondary;

From 4cf792c0d43ae93a04c0b15d5c0087a2324df66b Mon Sep 17 00:00:00 2001
From: mehm8128 <mehm8128@gmail.com>
Date: Sun, 3 Dec 2023 19:48:42 +0900
Subject: [PATCH 09/25] =?UTF-8?q?=E3=83=9C=E3=82=BF=E3=83=B3=E3=81=AE?=
 =?UTF-8?q?=E8=89=B2=E3=82=92=E5=A4=89=E6=9B=B4?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/Modal/StampCreateModal/StampCreateModal.vue      | 2 +-
 src/components/Modal/StampEditModal/StampEditModal.vue          | 2 +-
 .../Modal/StampImageEditModal/StampImageEditModal.vue           | 2 +-
 src/components/Settings/StampTab/NewStamp.vue                   | 2 +-
 4 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/src/components/Modal/StampCreateModal/StampCreateModal.vue b/src/components/Modal/StampCreateModal/StampCreateModal.vue
index beedf15c3..ff2719b08 100644
--- a/src/components/Modal/StampCreateModal/StampCreateModal.vue
+++ b/src/components/Modal/StampCreateModal/StampCreateModal.vue
@@ -22,7 +22,7 @@
     </div>
     <p :class="$style.note">{{ note }}</p>
     <div :class="$style.buttonContainer">
-      <form-button label="キャンセル" color="secondary" @click="cancel" />
+      <form-button label="キャンセル" type="tertiary" @click="cancel" />
       <form-button
         label="登録する"
         :disabled="!isCreateEnabled"
diff --git a/src/components/Modal/StampEditModal/StampEditModal.vue b/src/components/Modal/StampEditModal/StampEditModal.vue
index c4f0f4188..02ceaf996 100644
--- a/src/components/Modal/StampEditModal/StampEditModal.vue
+++ b/src/components/Modal/StampEditModal/StampEditModal.vue
@@ -24,7 +24,7 @@
     </div>
     <p :class="$style.note">{{ note }}</p>
     <div :class="$style.buttonContainer">
-      <form-button label="キャンセル" color="secondary" @click="cancel" />
+      <form-button label="キャンセル" type="tertiary" @click="cancel" />
       <form-button
         label="更新する"
         :disabled="!stampChanged || !isNameValid"
diff --git a/src/components/Modal/StampImageEditModal/StampImageEditModal.vue b/src/components/Modal/StampImageEditModal/StampImageEditModal.vue
index 9f5fb0d50..8172b251b 100644
--- a/src/components/Modal/StampImageEditModal/StampImageEditModal.vue
+++ b/src/components/Modal/StampImageEditModal/StampImageEditModal.vue
@@ -7,7 +7,7 @@
       <image-upload v-model="stampImage" />
     </div>
     <div :class="$style.buttonContainer">
-      <form-button label="キャンセル" color="secondary" @click="cancel" />
+      <form-button label="キャンセル" type="tertiary" @click="cancel" />
       <form-button
         label="更新する"
         :loading="isCreating"
diff --git a/src/components/Settings/StampTab/NewStamp.vue b/src/components/Settings/StampTab/NewStamp.vue
index a0459709a..56f7d8862 100644
--- a/src/components/Settings/StampTab/NewStamp.vue
+++ b/src/components/Settings/StampTab/NewStamp.vue
@@ -5,7 +5,7 @@
       :class="$style.form"
       icon="plus"
       mdi
-      color="secondary"
+      type="secondary"
       @click="handleOpenModal"
     />
   </div>

From 3a33e653d9653deaefdf9a4ad18ed57e71128782 Mon Sep 17 00:00:00 2001
From: mehm8128 <mehm8128@gmail.com>
Date: Sun, 3 Dec 2023 20:24:43 +0900
Subject: [PATCH 10/25] =?UTF-8?q?=E3=82=B9=E3=82=BF=E3=83=B3=E3=83=97?=
 =?UTF-8?q?=E3=82=92=E5=90=8D=E5=89=8D=E9=A0=86=E3=81=AB=E3=82=BD=E3=83=BC?=
 =?UTF-8?q?=E3=83=88?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/Settings/StampTab/StampManagement.vue | 9 +++++++--
 src/components/UI/FormButton.vue                     | 4 ++--
 2 files changed, 9 insertions(+), 4 deletions(-)

diff --git a/src/components/Settings/StampTab/StampManagement.vue b/src/components/Settings/StampTab/StampManagement.vue
index 6335e0dbb..94c2b1129 100644
--- a/src/components/Settings/StampTab/StampManagement.vue
+++ b/src/components/Settings/StampTab/StampManagement.vue
@@ -65,15 +65,20 @@ import { useStampsStore } from '/@/store/entities/stamps'
 import { randomString } from '/@/lib/basic/randomString'
 import ATab from '/@/components/UI/ATab.vue'
 import { UserPermission } from '@traptitech/traq'
+import { compareString } from '/@/lib/basic/string'
 
 const { myId } = useMeStore()
 const { stampsMap } = useStampsStore()
 
 const myStamps = computed(() =>
-  [...stampsMap.value.values()].filter(stamp => stamp.creatorId === myId.value)
+  [...stampsMap.value.values()]
+    .filter(stamp => stamp.creatorId === myId.value)
+    .sort((a, b) => compareString(a.name, b.name))
 )
 const otherStamps = computed(() =>
-  [...stampsMap.value.values()].filter(stamp => stamp.creatorId !== myId.value)
+  [...stampsMap.value.values()]
+    .filter(stamp => stamp.creatorId !== myId.value)
+    .sort((a, b) => compareString(a.name, b.name))
 )
 
 const { detail } = useMeStore()
diff --git a/src/components/UI/FormButton.vue b/src/components/UI/FormButton.vue
index 0aaee9ee2..9db6f555d 100644
--- a/src/components/UI/FormButton.vue
+++ b/src/components/UI/FormButton.vue
@@ -22,7 +22,7 @@
 import { computed } from 'vue'
 import LoadingSpinner from '/@/components/UI/LoadingSpinner.vue'
 import AIcon from '/@/components/UI/AIcon.vue'
-import { match, P } from 'ts-pattern';
+import { match, P } from 'ts-pattern'
 
 interface Type {
   type?: 'primary' | 'secondary' | 'tertiary'
@@ -52,7 +52,7 @@ const props = withDefaults(defineProps<Props>(), {
   disabled: false,
   type: 'primary',
   isDanger: false,
-  mdi: false,
+  mdi: false
 })
 
 const spinnerColor = computed(() => {

From 8287e75520075d4653cbf5d16b793b2ff88d631a Mon Sep 17 00:00:00 2001
From: mehm8128 <mehm8128@gmail.com>
Date: Sun, 3 Dec 2023 22:31:34 +0900
Subject: [PATCH 11/25] =?UTF-8?q?=E3=82=B9=E3=82=BF=E3=83=B3=E3=83=97?=
 =?UTF-8?q?=E6=83=85=E5=A0=B1=E7=B7=A8=E9=9B=86=E3=81=A7=E7=94=BB=E5=83=8F?=
 =?UTF-8?q?=E7=B7=A8=E9=9B=86=E3=82=92=E3=81=A7=E3=81=8D=E3=81=AA=E3=81=84?=
 =?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/StampEditModal/StampEditModal.vue   | 37 +++----------------
 1 file changed, 5 insertions(+), 32 deletions(-)

diff --git a/src/components/Modal/StampEditModal/StampEditModal.vue b/src/components/Modal/StampEditModal/StampEditModal.vue
index 02ceaf996..a686f4679 100644
--- a/src/components/Modal/StampEditModal/StampEditModal.vue
+++ b/src/components/Modal/StampEditModal/StampEditModal.vue
@@ -2,9 +2,7 @@
   <modal-frame title="スタンプ編集">
     <div :class="$style.container">
       <div :class="$style.leftContainer">
-        <button :class="$style.imgButton" @click="selectImage">
-          <img :src="imageUrl" width="136" height="136" />
-        </button>
+        <img :src="imageUrl" :class="$style.img" width="136" height="136" />
       </div>
       <div>
         <form-input
@@ -22,7 +20,6 @@
         />
       </div>
     </div>
-    <p :class="$style.note">{{ note }}</p>
     <div :class="$style.buttonContainer">
       <form-button label="キャンセル" type="tertiary" @click="cancel" />
       <form-button
@@ -52,7 +49,6 @@ import { useStampsStore } from '/@/store/entities/stamps'
 import { useModalStore } from '/@/store/ui/modal'
 import type { StampId } from '/@/types/entity-ids'
 import ModalFrame from '../Common/ModalFrame.vue'
-import { useFileSelect } from '/@/composables/dom/useFileSelect'
 
 type StampEditState = Pick<Stamp, 'name' | 'creatorId'>
 
@@ -60,7 +56,7 @@ const props = defineProps<{
   id: StampId
 }>()
 
-const { clearModal, pushModal } = useModalStore()
+const { clearModal } = useModalStore()
 const { stampsMap } = useStampsStore()
 const stamp = computed(() => stampsMap.value.get(props.id) ?? ({} as Stamp))
 
@@ -74,8 +70,6 @@ const imageUrl = computed(() =>
   stamp.value ? buildFilePath(stamp.value.fileId) : ''
 )
 
-const acceptImageType = ['image/jpeg', 'image/png', 'image/gif'].join(',')
-
 const useState = (stamp: Stamp) => {
   const oldState = computed(
     (): StampEditState => ({
@@ -160,19 +154,9 @@ const { isEditing, editStamp } = useStampEdit(
   }
 )
 
-const note = '画像をクリックしてアップロード'
-
 const cancel = () => {
   clearModal()
 }
-
-const { selectImage } = useFileSelect({ accept: acceptImageType }, files => {
-  if (!files[0]) return
-  pushModal({
-    type: 'settings-stamp-image-edit',
-    file: files[0]
-  })
-})
 </script>
 
 <style lang="scss" module>
@@ -184,6 +168,7 @@ const { selectImage } = useFileSelect({ accept: acceptImageType }, files => {
   display: flex;
   justify-content: space-between;
   gap: 16px;
+  margin-bottom: 12px;
 }
 .leftContainer {
   min-width: 136px;
@@ -192,22 +177,10 @@ const { selectImage } = useFileSelect({ accept: acceptImageType }, files => {
   margin: 8px 0;
   flex-grow: 1;
 }
-.imgButton {
-  width: 100%;
-  height: 100%;
-  border: 2px solid $theme-ui-secondary-default;
-  border-radius: 4px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  cursor: pointer;
+.img {
+  border: 1px solid $theme-accent-primary-default;
 }
 
-.note {
-  @include color-ui-secondary;
-  margin-bottom: 12px;
-  font-size: 12px;
-}
 .buttonContainer {
   display: flex;
   align-items: center;

From ade377d083421e327557848e887e367115322397 Mon Sep 17 00:00:00 2001
From: mehm8128 <mehm8128@gmail.com>
Date: Mon, 4 Dec 2023 00:07:43 +0900
Subject: [PATCH 12/25] =?UTF-8?q?=E4=B8=80=E9=80=9A=E3=82=8A=E5=8B=95?=
 =?UTF-8?q?=E3=81=8F=E3=82=88=E3=81=86=E3=81=AB=E3=81=AA=E3=81=A3=E3=81=9F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/Modal/ModalContainer.vue       |   4 +-
 .../StampCreateModal/StampCreateModal.vue     | 142 ++++--------------
 .../Modal/StampCreateModal/StampImageEdit.vue |  76 ++++++++++
 .../Modal/StampCreateModal/StampInfoEdit.vue  | 129 ++++++++++++++++
 .../Modal/StampEditModal/StampEditModal.vue   |   1 +
 .../StampImageEditModal.vue                   |  44 +++---
 src/components/Settings/StampTab/NewStamp.vue |  11 +-
 .../Settings/StampTab/StampContextMenu.vue    |   1 +
 src/store/ui/modal/states.ts                  |   2 +
 9 files changed, 277 insertions(+), 133 deletions(-)
 create mode 100644 src/components/Modal/StampCreateModal/StampImageEdit.vue
 create mode 100644 src/components/Modal/StampCreateModal/StampInfoEdit.vue

diff --git a/src/components/Modal/ModalContainer.vue b/src/components/Modal/ModalContainer.vue
index 427365114..72f755614 100644
--- a/src/components/Modal/ModalContainer.vue
+++ b/src/components/Modal/ModalContainer.vue
@@ -12,7 +12,8 @@
           currentState.type === 'channel-manage' ||
           currentState.type === 'group-admin-add' ||
           currentState.type === 'group-member-add' ||
-          currentState.type === 'settings-stamp-edit'
+          currentState.type === 'settings-stamp-edit'||
+          currentState.type === 'settings-stamp-image-edit'
             ? currentState.id
             : undefined
         "
@@ -43,6 +44,7 @@
             : undefined
         "
         :file="
+          currentState.type === 'settings-stamp-create' ||
           currentState.type === 'settings-stamp-image-edit'
             ? currentState.file
             : undefined
diff --git a/src/components/Modal/StampCreateModal/StampCreateModal.vue b/src/components/Modal/StampCreateModal/StampCreateModal.vue
index ff2719b08..ac4672b70 100644
--- a/src/components/Modal/StampCreateModal/StampCreateModal.vue
+++ b/src/components/Modal/StampCreateModal/StampCreateModal.vue
@@ -1,125 +1,41 @@
 <template>
-  <modal-frame title="新規スタンプ登録">
-    <div :class="$style.container">
-      <div :class="$style.leftContainer">
-        <button :class="$style.imgButton" @click="selectImage">
-          <img v-if="imageUrl" :src="imageUrl" width="136" height="136" />
-          <a-icon v-else name="plus" mdi />
-        </button>
-      </div>
-      <div>
-        <form-input
-          v-model="newStampName"
-          label="スタンプ名"
-          prefix=":"
-          suffix=":"
-          :max-length="32"
-          :class="$style.form"
-        />
-        <label :class="$style.label">所有者</label>
-        <p :class="$style.creator">@ {{ detail?.name }}</p>
-      </div>
-    </div>
-    <p :class="$style.note">{{ note }}</p>
-    <div :class="$style.buttonContainer">
-      <form-button label="キャンセル" type="tertiary" @click="cancel" />
-      <form-button
-        label="登録する"
-        :disabled="!isCreateEnabled"
-        :loading="isCreating"
-        :class="$style.form"
-        @click="createStamp"
-      />
-    </div>
+  <modal-frame title="新規スタンプ登録" :subtitle="subtitle">
+    <stamp-image-edit
+      v-if="step === 'image'"
+      :file="file"
+      @update-file="updateFile"
+    />
+    <stamp-info-edit v-else :stamp-image="stampImage" :stamp-name="stampName" @back="backToImageEdit" />
   </modal-frame>
 </template>
 
 <script lang="ts" setup>
-import { ref, computed, watch, type Ref } from 'vue'
-import apis, { formatResizeError } from '/@/lib/apis'
-import { isValidStampName } from '/@/lib/validate'
-import { useToastStore } from '/@/store/ui/toast'
-import FormInput from '/@/components/UI/FormInput.vue'
-import FormButton from '/@/components/UI/FormButton.vue'
-import ModalFrame from '../Common/ModalFrame.vue'
-import { useMeStore } from '/@/store/domain/me'
-import { useModalStore } from '/@/store/ui/modal'
-import AIcon from '/@/components/UI/AIcon.vue'
-import { useFileSelect } from '/@/composables/dom/useFileSelect'
-
-const { detail } = useMeStore()
-const { clearModal, pushModal } = useModalStore()
-
-const stampImage = ref<File>()
-const imageUrl = computed(() =>
-  stampImage.value ? URL.createObjectURL(stampImage.value) : undefined
-)
-const newStampName = ref('')
-
-const acceptImageType = ['image/jpeg', 'image/png', 'image/gif'].join(',')
-
-const isCreateEnabled = computed(() => isValidStampName(newStampName.value))
-watch(
-  () => stampImage.value,
-  newImageData => {
-    if (!newStampName.value && newImageData && newImageData.name) {
-      newStampName.value = trimExt(newImageData.name)
-    }
-  }
-)
-
-const note = computed(() =>
-  stampImage.value
-    ? '画像をクリックしてアップロード'
-    : '＋をクリックしてアップロード'
+import ModalFrame from '/@/components/Modal/Common/ModalFrame.vue'
+import { ref, computed } from 'vue'
+import StampImageEdit from './StampImageEdit.vue'
+import StampInfoEdit from './StampInfoEdit.vue'
+
+const props = defineProps<{
+  file: File
+}>()
+
+const stampImage = ref<File>(props.file)
+const stampName = ref('')
+
+const step = ref<'image' | 'info'>('image')
+const subtitle = computed(() =>
+  step.value === 'image'
+    ? '画像の位置・サイズを編集できます'
+    : 'スタンプの名前を入力してください'
 )
 
-/**
- * 拡張子を削る
- */
-const trimExt = (filename: string) => filename.replace(/\.[^.]+$/, '')
-
-const useStampCreate = (
-  newStampName: Ref<string>,
-  stampImage: Ref<File | undefined>
-) => {
-  const { addSuccessToast, addErrorToast } = useToastStore()
-  const isCreating = ref(false)
-
-  const createStamp = async () => {
-    if (!stampImage.value) return
-    try {
-      isCreating.value = true
-      await apis.createStamp(newStampName.value, stampImage.value)
-      newStampName.value = ''
-      stampImage.value = undefined
-
-      addSuccessToast('スタンプを登録しました')
-    } catch (e) {
-      // eslint-disable-next-line no-console
-      console.error('スタンプの作成に失敗しました', e)
-
-      addErrorToast(formatResizeError(e, 'スタンプの作成に失敗しました'))
-    }
-    isCreating.value = false
-    clearModal()
-  }
-
-  return { isCreating, createStamp }
+const updateFile = (file: File) => {
+  stampImage.value = file
+  step.value = 'info'
 }
-
-const { isCreating, createStamp } = useStampCreate(newStampName, stampImage)
-const cancel = () => {
-  clearModal()
+const backToImageEdit = () => {
+  step.value = 'image'
 }
-
-const { selectImage } = useFileSelect({ accept: acceptImageType }, files => {
-  if (!files[0]) return
-  pushModal({
-    type: 'settings-stamp-image-edit',
-    file: files[0]
-  })
-})
 </script>
 
 <style lang="scss" module>
diff --git a/src/components/Modal/StampCreateModal/StampImageEdit.vue b/src/components/Modal/StampCreateModal/StampImageEdit.vue
new file mode 100644
index 000000000..c515fc102
--- /dev/null
+++ b/src/components/Modal/StampCreateModal/StampImageEdit.vue
@@ -0,0 +1,76 @@
+<template>
+  <div>
+    <div :class="$style.container">
+      <image-upload v-model="stampImage" />
+    </div>
+    <div :class="$style.buttonContainer">
+      <form-button label="キャンセル" type="tertiary" @click="cancel" />
+      <form-button label="次へ" :loading="isChecking" @click="checkStampImage" />
+    </div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { ref } from 'vue'
+import { formatResizeError } from '/@/lib/apis'
+import { useToastStore } from '/@/store/ui/toast'
+import { imageSize } from '/@/components/Settings/StampTab/imageSize'
+import FormButton from '/@/components/UI/FormButton.vue'
+import { useModalStore } from '/@/store/ui/modal'
+import ImageUpload from '/@/components/Settings/ImageUpload.vue'
+
+const props = defineProps<{
+  file: File
+}>()
+const emit = defineEmits<{
+  (e: 'updateFile', file: File): void
+}>()
+
+const { popModal } = useModalStore()
+
+const stampImage = ref<File>(props.file)
+
+const useCheckStamp = (stampImage: File) => {
+  const { addErrorToast } = useToastStore()
+  const isChecking = ref(false)
+
+  const checkStampImage = async () => {
+    isChecking.value = true
+    try {
+      const size = await imageSize(stampImage)
+      if (size.height !== size.width) {
+        addErrorToast('画像が正方形ではありません。編集してください')
+        return
+      }
+    } catch (e) {
+      // eslint-disable-next-line no-console
+      console.error('画像の整形に失敗しました', e)
+      addErrorToast(formatResizeError(e, '画像の整形に失敗しました'))
+    }
+    emit('updateFile', stampImage)
+    isChecking.value = false
+  }
+
+  return { isChecking, checkStampImage }
+}
+
+const { isChecking, checkStampImage } = useCheckStamp(stampImage.value)
+const cancel = () => {
+  popModal()
+}
+</script>
+
+<style lang="scss" module>
+.container {
+  display: flex;
+  justify-content: center;
+}
+
+.buttonContainer {
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+  gap: 16px;
+  margin-top: 16px;
+}
+</style>
diff --git a/src/components/Modal/StampCreateModal/StampInfoEdit.vue b/src/components/Modal/StampCreateModal/StampInfoEdit.vue
new file mode 100644
index 000000000..ab8dfd66a
--- /dev/null
+++ b/src/components/Modal/StampCreateModal/StampInfoEdit.vue
@@ -0,0 +1,129 @@
+<template>
+  <div>
+    <div :class="$style.container">
+      <div :class="$style.leftContainer">
+        <img :class="$style.img" :src="imageUrl" width="136" height="136" />
+      </div>
+      <div>
+        <form-input
+          v-model="newStampName"
+          label="スタンプ名"
+          prefix=":"
+          suffix=":"
+          :max-length="32"
+          :class="$style.form"
+          focus-on-mount
+        />
+        <label :class="$style.label">所有者</label>
+        <p :class="$style.creator">@ {{ detail?.name }}</p>
+      </div>
+    </div>
+    <div :class="$style.buttonContainer">
+      <form-button label="戻る" type="tertiary" @click="back" />
+      <form-button
+        label="登録する"
+        :loading="isCreating"
+        :class="$style.form"
+        @click="createStamp"
+      />
+    </div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { ref, computed } from 'vue'
+import apis, { formatResizeError } from '/@/lib/apis'
+import { useToastStore } from '/@/store/ui/toast'
+import FormInput from '/@/components/UI/FormInput.vue'
+import FormButton from '/@/components/UI/FormButton.vue'
+import { useMeStore } from '/@/store/domain/me'
+import { useModalStore } from '/@/store/ui/modal'
+
+const props = defineProps<{
+  stampName: string
+  stampImage: File
+}>()
+const emit = defineEmits<{
+  (e: 'back'): void
+}>()
+
+const { detail } = useMeStore()
+const { clearModal } = useModalStore()
+
+const imageUrl = computed(() => URL.createObjectURL(props.stampImage))
+const newStampName = ref(props.stampName)
+
+const useStampCreate = (newStampName: string, stampImage: File) => {
+  const { addSuccessToast, addErrorToast } = useToastStore()
+  const isCreating = ref(false)
+
+  const createStamp = async () => {
+    try {
+      isCreating.value = true
+      await apis.createStamp(newStampName, stampImage)
+
+      addSuccessToast('スタンプを登録しました')
+    } catch (e) {
+      // eslint-disable-next-line no-console
+      console.error('スタンプの作成に失敗しました', e)
+
+      addErrorToast(formatResizeError(e, 'スタンプの作成に失敗しました'))
+    }
+    URL.revokeObjectURL(imageUrl.value)
+    clearModal()
+    isCreating.value = false
+  }
+
+  return { isCreating, createStamp }
+}
+
+const { isCreating, createStamp } = useStampCreate(
+  newStampName.value,
+  props.stampImage
+)
+const back = () => {
+  emit('back')
+}
+</script>
+
+<style lang="scss" module>
+.form {
+  margin: 8px 0;
+}
+
+.container {
+  display: flex;
+  justify-content: space-between;
+  gap: 16px;
+  margin-bottom: 12px;
+}
+.leftContainer {
+  min-width: 136px;
+  width: 136px;
+  height: 136px;
+  margin: 8px 0;
+  flex-grow: 1;
+}
+.img {
+  border: 1px solid $theme-accent-primary-default;
+}
+
+.label {
+  @include color-ui-secondary;
+  margin-bottom: 16px;
+}
+.creator {
+  @include color-ui-primary;
+}
+.note {
+  @include color-ui-secondary;
+  margin-bottom: 12px;
+  font-size: 12px;
+}
+.buttonContainer {
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+  gap: 16px;
+}
+</style>
diff --git a/src/components/Modal/StampEditModal/StampEditModal.vue b/src/components/Modal/StampEditModal/StampEditModal.vue
index a686f4679..79507a10b 100644
--- a/src/components/Modal/StampEditModal/StampEditModal.vue
+++ b/src/components/Modal/StampEditModal/StampEditModal.vue
@@ -12,6 +12,7 @@
           suffix=":"
           :max-length="32"
           :class="$style.form"
+          focus-on-mount
         />
         <form-selector
           v-model="state.creatorId"
diff --git a/src/components/Modal/StampImageEditModal/StampImageEditModal.vue b/src/components/Modal/StampImageEditModal/StampImageEditModal.vue
index 8172b251b..82666e3eb 100644
--- a/src/components/Modal/StampImageEditModal/StampImageEditModal.vue
+++ b/src/components/Modal/StampImageEditModal/StampImageEditModal.vue
@@ -10,40 +10,41 @@
       <form-button label="キャンセル" type="tertiary" @click="cancel" />
       <form-button
         label="更新する"
-        :loading="isCreating"
-        @click="createStamp"
+        :loading="isEditing"
+        @click="editStampImage"
       />
     </div>
   </modal-frame>
 </template>
 
 <script lang="ts" setup>
-import { ref, type Ref } from 'vue'
-import { formatResizeError } from '/@/lib/apis'
+import { ref } from 'vue'
+import apis, { formatResizeError } from '/@/lib/apis'
 import { useToastStore } from '/@/store/ui/toast'
 import { imageSize } from '/@/components/Settings/StampTab/imageSize'
 import FormButton from '/@/components/UI/FormButton.vue'
 import ModalFrame from '../Common/ModalFrame.vue'
 import { useModalStore } from '/@/store/ui/modal'
 import ImageUpload from '/@/components/Settings/ImageUpload.vue'
+import type { StampId } from '/@/types/entity-ids'
 
 const props = defineProps<{
   file: File
+  id: StampId
 }>()
 
-const { popModal } = useModalStore()
+const { clearModal } = useModalStore()
 
 const stampImage = ref<File>(props.file)
 
-const useStampCreate = (stampImage: Ref<File | undefined>) => {
-  const { addErrorToast } = useToastStore()
-  const isCreating = ref(false)
+const useStampImageEdit = (stampImage: File) => {
+  const { addSuccessToast, addErrorToast } = useToastStore()
+  const isEditing = ref(false)
 
-  const createStamp = async () => {
-    if (!stampImage.value) return
-    isCreating.value = true
+  const editStampImage = async () => {
+    isEditing.value = true
     try {
-      const size = await imageSize(stampImage.value)
+      const size = await imageSize(stampImage)
       if (size.height !== size.width) {
         addErrorToast('画像が正方形ではありません。編集してください')
         return
@@ -53,16 +54,25 @@ const useStampCreate = (stampImage: Ref<File | undefined>) => {
       console.error('画像の整形に失敗しました', e)
       addErrorToast(formatResizeError(e, '画像の整形に失敗しました'))
     }
-    isCreating.value = false
-    popModal()
+    try {
+      await apis.changeStampImage(props.id, stampImage)
+
+      addSuccessToast('スタンプ画像を変更しました')
+    } catch (e) {
+      // eslint-disable-next-line no-console
+      console.error('スタンプ画像の変更に失敗しました', e)
+      addErrorToast(formatResizeError(e, 'スタンプ画像の変更に失敗しました'))
+    }
+    clearModal()
+    isEditing.value = false
   }
 
-  return { isCreating, createStamp }
+  return { isEditing, editStampImage }
 }
 
-const { isCreating, createStamp } = useStampCreate(stampImage)
+const { isEditing, editStampImage } = useStampImageEdit(stampImage.value)
 const cancel = () => {
-  popModal()
+  clearModal()
 }
 </script>
 
diff --git a/src/components/Settings/StampTab/NewStamp.vue b/src/components/Settings/StampTab/NewStamp.vue
index 56f7d8862..2c213ca01 100644
--- a/src/components/Settings/StampTab/NewStamp.vue
+++ b/src/components/Settings/StampTab/NewStamp.vue
@@ -13,14 +13,21 @@
 
 <script lang="ts" setup>
 import FormButton from '/@/components/UI/FormButton.vue'
+import { useFileSelect } from '/@/composables/dom/useFileSelect';
 import { useModalStore } from '/@/store/ui/modal'
 
 const { pushModal } = useModalStore()
 
-const handleOpenModal = () => {
+const acceptImageType = ['image/jpeg', 'image/png', 'image/gif'].join(',')
+const { selectImage } = useFileSelect({ accept: acceptImageType }, files => {
+  if (!files[0]) return
   pushModal({
-    type: 'settings-stamp-create'
+    type: 'settings-stamp-create',
+    file: files[0]
   })
+})
+const handleOpenModal = () => {
+  selectImage()
 }
 </script>
 
diff --git a/src/components/Settings/StampTab/StampContextMenu.vue b/src/components/Settings/StampTab/StampContextMenu.vue
index 1fb5baebb..bd9b9261d 100644
--- a/src/components/Settings/StampTab/StampContextMenu.vue
+++ b/src/components/Settings/StampTab/StampContextMenu.vue
@@ -56,6 +56,7 @@ const { selectImage } = useFileSelect({ accept: acceptImageType }, files => {
   if (!files[0]) return
   pushModal({
     type: 'settings-stamp-image-edit',
+    id: props.stampId,
     file: files[0]
   })
   close()
diff --git a/src/store/ui/modal/states.ts b/src/store/ui/modal/states.ts
index 0c05a2645..3cfddbcb7 100644
--- a/src/store/ui/modal/states.ts
+++ b/src/store/ui/modal/states.ts
@@ -133,6 +133,7 @@ interface GroupMemberAddModalState extends BaseModalState {
 
 interface SettingsStampCreateModalState extends BaseModalState {
   type: 'settings-stamp-create'
+  file: File
 }
 
 interface SettingsStampEditModalState extends BaseModalState {
@@ -142,5 +143,6 @@ interface SettingsStampEditModalState extends BaseModalState {
 
 interface SettingsStampImageEditModalState extends BaseModalState {
   type: 'settings-stamp-image-edit'
+  id: StampId
   file: File
 }

From e9ae2a50101015e52010f23833db36f87f095bec Mon Sep 17 00:00:00 2001
From: mehm8128 <mehm8128@gmail.com>
Date: Mon, 4 Dec 2023 00:31:48 +0900
Subject: [PATCH 13/25] =?UTF-8?q?ref=E5=A4=96=E3=81=97=E3=81=9F=E3=81=AE?=
 =?UTF-8?q?=E3=82=92=E6=88=BB=E3=81=97=E3=81=9F&format?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/Modal/ModalContainer.vue       |  2 +-
 .../StampCreateModal/StampCreateModal.vue     |  3 +-
 .../Modal/StampCreateModal/StampImageEdit.vue | 17 ++++--
 .../Modal/StampCreateModal/StampInfoEdit.vue  | 30 ++++++---
 .../Modal/StampEditModal/StampEditModal.vue   | 61 +++++++++++--------
 .../StampImageEditModal.vue                   | 11 ++--
 src/components/Settings/StampTab/NewStamp.vue |  2 +-
 7 files changed, 75 insertions(+), 51 deletions(-)

diff --git a/src/components/Modal/ModalContainer.vue b/src/components/Modal/ModalContainer.vue
index 72f755614..b0b7276bb 100644
--- a/src/components/Modal/ModalContainer.vue
+++ b/src/components/Modal/ModalContainer.vue
@@ -12,7 +12,7 @@
           currentState.type === 'channel-manage' ||
           currentState.type === 'group-admin-add' ||
           currentState.type === 'group-member-add' ||
-          currentState.type === 'settings-stamp-edit'||
+          currentState.type === 'settings-stamp-edit' ||
           currentState.type === 'settings-stamp-image-edit'
             ? currentState.id
             : undefined
diff --git a/src/components/Modal/StampCreateModal/StampCreateModal.vue b/src/components/Modal/StampCreateModal/StampCreateModal.vue
index ac4672b70..64dd89cc3 100644
--- a/src/components/Modal/StampCreateModal/StampCreateModal.vue
+++ b/src/components/Modal/StampCreateModal/StampCreateModal.vue
@@ -5,7 +5,7 @@
       :file="file"
       @update-file="updateFile"
     />
-    <stamp-info-edit v-else :stamp-image="stampImage" :stamp-name="stampName" @back="backToImageEdit" />
+    <stamp-info-edit v-else :stamp-image="stampImage" @back="backToImageEdit" />
   </modal-frame>
 </template>
 
@@ -20,7 +20,6 @@ const props = defineProps<{
 }>()
 
 const stampImage = ref<File>(props.file)
-const stampName = ref('')
 
 const step = ref<'image' | 'info'>('image')
 const subtitle = computed(() =>
diff --git a/src/components/Modal/StampCreateModal/StampImageEdit.vue b/src/components/Modal/StampCreateModal/StampImageEdit.vue
index c515fc102..3bc3c66bd 100644
--- a/src/components/Modal/StampCreateModal/StampImageEdit.vue
+++ b/src/components/Modal/StampCreateModal/StampImageEdit.vue
@@ -5,13 +5,17 @@
     </div>
     <div :class="$style.buttonContainer">
       <form-button label="キャンセル" type="tertiary" @click="cancel" />
-      <form-button label="次へ" :loading="isChecking" @click="checkStampImage" />
+      <form-button
+        label="次へ"
+        :loading="isChecking"
+        @click="checkStampImage"
+      />
     </div>
   </div>
 </template>
 
 <script lang="ts" setup>
-import { ref } from 'vue'
+import { ref, type Ref } from 'vue'
 import { formatResizeError } from '/@/lib/apis'
 import { useToastStore } from '/@/store/ui/toast'
 import { imageSize } from '/@/components/Settings/StampTab/imageSize'
@@ -30,14 +34,15 @@ const { popModal } = useModalStore()
 
 const stampImage = ref<File>(props.file)
 
-const useCheckStamp = (stampImage: File) => {
+const useCheckStamp = (stampImage: Ref<File>) => {
   const { addErrorToast } = useToastStore()
   const isChecking = ref(false)
 
   const checkStampImage = async () => {
+    if (!stampImage.value) return
     isChecking.value = true
     try {
-      const size = await imageSize(stampImage)
+      const size = await imageSize(stampImage.value)
       if (size.height !== size.width) {
         addErrorToast('画像が正方形ではありません。編集してください')
         return
@@ -47,14 +52,14 @@ const useCheckStamp = (stampImage: File) => {
       console.error('画像の整形に失敗しました', e)
       addErrorToast(formatResizeError(e, '画像の整形に失敗しました'))
     }
-    emit('updateFile', stampImage)
+    emit('updateFile', stampImage.value)
     isChecking.value = false
   }
 
   return { isChecking, checkStampImage }
 }
 
-const { isChecking, checkStampImage } = useCheckStamp(stampImage.value)
+const { isChecking, checkStampImage } = useCheckStamp(stampImage)
 const cancel = () => {
   popModal()
 }
diff --git a/src/components/Modal/StampCreateModal/StampInfoEdit.vue b/src/components/Modal/StampCreateModal/StampInfoEdit.vue
index ab8dfd66a..79553bf64 100644
--- a/src/components/Modal/StampCreateModal/StampInfoEdit.vue
+++ b/src/components/Modal/StampCreateModal/StampInfoEdit.vue
@@ -31,16 +31,16 @@
 </template>
 
 <script lang="ts" setup>
-import { ref, computed } from 'vue'
+import { ref, computed, type Ref } from 'vue'
 import apis, { formatResizeError } from '/@/lib/apis'
 import { useToastStore } from '/@/store/ui/toast'
 import FormInput from '/@/components/UI/FormInput.vue'
 import FormButton from '/@/components/UI/FormButton.vue'
 import { useMeStore } from '/@/store/domain/me'
 import { useModalStore } from '/@/store/ui/modal'
+import type { AxiosError } from 'axios'
 
 const props = defineProps<{
-  stampName: string
   stampImage: File
 }>()
 const emit = defineEmits<{
@@ -51,26 +51,38 @@ const { detail } = useMeStore()
 const { clearModal } = useModalStore()
 
 const imageUrl = computed(() => URL.createObjectURL(props.stampImage))
-const newStampName = ref(props.stampName)
+const newStampName = ref('')
 
-const useStampCreate = (newStampName: string, stampImage: File) => {
+const useStampCreate = (newStampName: Ref<string>, stampImage: File) => {
   const { addSuccessToast, addErrorToast } = useToastStore()
   const isCreating = ref(false)
 
   const createStamp = async () => {
     try {
       isCreating.value = true
-      await apis.createStamp(newStampName, stampImage)
+      await apis.createStamp(newStampName.value, stampImage)
 
       addSuccessToast('スタンプを登録しました')
+      URL.revokeObjectURL(imageUrl.value)
+      clearModal()
     } catch (e) {
       // eslint-disable-next-line no-console
       console.error('スタンプの作成に失敗しました', e)
 
-      addErrorToast(formatResizeError(e, 'スタンプの作成に失敗しました'))
+      const err = e as AxiosError<{ message: string }>
+      if (!err.response) {
+        addErrorToast(formatResizeError(e, 'スタンプの作成に失敗しました'))
+        return
+      }
+      const message: string = err.response.data.message
+      switch (message) {
+        case 'this name has already been used':
+          addErrorToast('このスタンプ名は既に使われています')
+          break
+        default:
+          addErrorToast(formatResizeError(e, 'スタンプの作成に失敗しました'))
+      }
     }
-    URL.revokeObjectURL(imageUrl.value)
-    clearModal()
     isCreating.value = false
   }
 
@@ -78,7 +90,7 @@ const useStampCreate = (newStampName: string, stampImage: File) => {
 }
 
 const { isCreating, createStamp } = useStampCreate(
-  newStampName.value,
+  newStampName,
   props.stampImage
 )
 const back = () => {
diff --git a/src/components/Modal/StampEditModal/StampEditModal.vue b/src/components/Modal/StampEditModal/StampEditModal.vue
index 79507a10b..6f6da4a4e 100644
--- a/src/components/Modal/StampEditModal/StampEditModal.vue
+++ b/src/components/Modal/StampEditModal/StampEditModal.vue
@@ -50,6 +50,7 @@ import { useStampsStore } from '/@/store/entities/stamps'
 import { useModalStore } from '/@/store/ui/modal'
 import type { StampId } from '/@/types/entity-ids'
 import ModalFrame from '../Common/ModalFrame.vue'
+import type { AxiosError } from 'axios'
 
 type StampEditState = Pick<Stamp, 'name' | 'creatorId'>
 
@@ -100,38 +101,44 @@ const useStampEdit = (
 
   const editStamp = async () => {
     try {
-      try {
-        isEditing.value = true
-        const promises = []
-        if (isStateChanged.value) {
-          promises.push(
-            apis.editStamp(stamp.id, {
-              name: diffKeys.value.includes('name') ? state.name : undefined,
-              creatorId: diffKeys.value.includes('creatorId')
-                ? state.creatorId
-                : undefined
-            })
-          )
-        }
-        if (newImageData.value !== undefined) {
-          promises.push(apis.changeStampImage(stamp.id, newImageData.value))
-        }
-        await Promise.all(promises)
-        afterSuccess()
-
-        addSuccessToast('スタンプを更新しました')
-      } catch (e) {
-        // eslint-disable-next-line no-console
-        console.error('スタンプの編集に失敗しました', e)
-
-        addErrorToast(formatResizeError(e, 'スタンプの編集に失敗しました'))
+      isEditing.value = true
+      const promises = []
+      if (isStateChanged.value) {
+        promises.push(
+          apis.editStamp(stamp.id, {
+            name: diffKeys.value.includes('name') ? state.name : undefined,
+            creatorId: diffKeys.value.includes('creatorId')
+              ? state.creatorId
+              : undefined
+          })
+        )
       }
-      isEditing.value = false
+      if (newImageData.value !== undefined) {
+        promises.push(apis.changeStampImage(stamp.id, newImageData.value))
+      }
+      await Promise.all(promises)
+      afterSuccess()
+
+      addSuccessToast('スタンプを更新しました')
     } catch (e) {
       // eslint-disable-next-line no-console
       console.error('スタンプの編集に失敗しました', e)
-      addErrorToast(formatResizeError(e, 'スタンプの編集に失敗しました'))
+
+      const err = e as AxiosError<{ message: string }>
+      if (!err.response) {
+        addErrorToast(formatResizeError(e, 'スタンプの編集に失敗しました'))
+        return
+      }
+      const message: string = err.response.data.message
+      switch (message) {
+        case 'this name has already been used':
+          addErrorToast('このスタンプ名は既に使われています')
+          break
+        default:
+          addErrorToast(formatResizeError(e, 'スタンプの編集に失敗しました'))
+      }
     }
+    isEditing.value = false
   }
 
   return { isEditing, editStamp }
diff --git a/src/components/Modal/StampImageEditModal/StampImageEditModal.vue b/src/components/Modal/StampImageEditModal/StampImageEditModal.vue
index 82666e3eb..7e483a07d 100644
--- a/src/components/Modal/StampImageEditModal/StampImageEditModal.vue
+++ b/src/components/Modal/StampImageEditModal/StampImageEditModal.vue
@@ -18,7 +18,7 @@
 </template>
 
 <script lang="ts" setup>
-import { ref } from 'vue'
+import { ref, type Ref } from 'vue'
 import apis, { formatResizeError } from '/@/lib/apis'
 import { useToastStore } from '/@/store/ui/toast'
 import { imageSize } from '/@/components/Settings/StampTab/imageSize'
@@ -37,14 +37,15 @@ const { clearModal } = useModalStore()
 
 const stampImage = ref<File>(props.file)
 
-const useStampImageEdit = (stampImage: File) => {
+const useStampImageEdit = (stampImage: Ref<File>) => {
   const { addSuccessToast, addErrorToast } = useToastStore()
   const isEditing = ref(false)
 
   const editStampImage = async () => {
+    if (!stampImage.value) return
     isEditing.value = true
     try {
-      const size = await imageSize(stampImage)
+      const size = await imageSize(stampImage.value)
       if (size.height !== size.width) {
         addErrorToast('画像が正方形ではありません。編集してください')
         return
@@ -55,7 +56,7 @@ const useStampImageEdit = (stampImage: File) => {
       addErrorToast(formatResizeError(e, '画像の整形に失敗しました'))
     }
     try {
-      await apis.changeStampImage(props.id, stampImage)
+      await apis.changeStampImage(props.id, stampImage.value)
 
       addSuccessToast('スタンプ画像を変更しました')
     } catch (e) {
@@ -70,7 +71,7 @@ const useStampImageEdit = (stampImage: File) => {
   return { isEditing, editStampImage }
 }
 
-const { isEditing, editStampImage } = useStampImageEdit(stampImage.value)
+const { isEditing, editStampImage } = useStampImageEdit(stampImage)
 const cancel = () => {
   clearModal()
 }
diff --git a/src/components/Settings/StampTab/NewStamp.vue b/src/components/Settings/StampTab/NewStamp.vue
index 2c213ca01..2a01347f1 100644
--- a/src/components/Settings/StampTab/NewStamp.vue
+++ b/src/components/Settings/StampTab/NewStamp.vue
@@ -13,7 +13,7 @@
 
 <script lang="ts" setup>
 import FormButton from '/@/components/UI/FormButton.vue'
-import { useFileSelect } from '/@/composables/dom/useFileSelect';
+import { useFileSelect } from '/@/composables/dom/useFileSelect'
 import { useModalStore } from '/@/store/ui/modal'
 
 const { pushModal } = useModalStore()

From d50e32dcbc5a1234bcdd1a8c14a2179811ea4200 Mon Sep 17 00:00:00 2001
From: mehm8128 <mehm8128@gmail.com>
Date: Wed, 27 Dec 2023 22:31:04 +0900
Subject: [PATCH 14/25] =?UTF-8?q?uuid=E3=81=98=E3=82=83=E3=81=AA=E3=81=8F?=
 =?UTF-8?q?=E3=81=A6uid=E3=82=92=E8=A1=A8=E7=A4=BA=E3=81=99=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

---
 src/components/Settings/StampTab/StampItem.vue | 10 ++++++++--
 1 file changed, 8 insertions(+), 2 deletions(-)

diff --git a/src/components/Settings/StampTab/StampItem.vue b/src/components/Settings/StampTab/StampItem.vue
index 0b53058bf..ce1dbac74 100644
--- a/src/components/Settings/StampTab/StampItem.vue
+++ b/src/components/Settings/StampTab/StampItem.vue
@@ -6,10 +6,10 @@
         <p>:{{ stamp.name }}:</p>
         <p
           v-if="showCreator"
-          :title="`@${stamp.creatorId}`"
+          :title="`@${creatorName}`"
           :class="$style.creator"
         >
-          @{{ stamp.creatorId }}
+          @{{ creatorName }}
         </p>
       </div>
       <button :class="$style.dotsButton" @click="onDotsClick">
@@ -32,6 +32,7 @@ import { buildFilePath } from '/@/lib/apis'
 import useContextMenu from '/@/composables/useContextMenu'
 import StampContextMenu from './StampContextMenu.vue'
 import AIcon from '/@/components/UI/AIcon.vue'
+import { useUsersStore } from '/@/store/entities/users'
 
 const props = withDefaults(
   defineProps<{
@@ -43,6 +44,11 @@ const props = withDefaults(
   }
 )
 
+const { usersMap } = useUsersStore()
+const creatorName = computed(
+  () => usersMap.value.get(props.stamp.creatorId)?.name ?? 'unknown'
+)
+
 const url = computed(() => buildFilePath(props.stamp.fileId))
 
 const {

From 85961648932d4b1bc16ea32fef5bfd1121591362 Mon Sep 17 00:00:00 2001
From: mehm8128 <mehm8128@gmail.com>
Date: Sat, 6 Jan 2024 17:56:53 +0900
Subject: [PATCH 15/25] =?UTF-8?q?=E3=83=97=E3=83=AD=E3=83=95=E3=82=A3?=
 =?UTF-8?q?=E3=83=BC=E3=83=AB=E3=82=BF=E3=83=96=E3=82=92=E6=94=B9=E4=BF=AE?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/Modal/Common/ModalFrame.vue    |   2 +-
 src/components/Modal/ModalContainer.vue       |   6 +-
 .../ProfileIconEditModal.vue                  |  79 ++++++++
 src/store/ui/modal/states.ts                  |   7 +
 src/views/Settings/ProfileTab.vue             | 187 ++++++++----------
 5 files changed, 178 insertions(+), 103 deletions(-)
 create mode 100644 src/components/Modal/ProfileIconEditModal/ProfileIconEditModal.vue

diff --git a/src/components/Modal/Common/ModalFrame.vue b/src/components/Modal/Common/ModalFrame.vue
index d56806daf..4d567f7f1 100644
--- a/src/components/Modal/Common/ModalFrame.vue
+++ b/src/components/Modal/Common/ModalFrame.vue
@@ -64,7 +64,7 @@ const { clearModal } = useModalStore()
 }
 .body {
   width: 100%;
-  padding: 16px 24px;
+  padding: 16px;
   overflow: {
     x: hidden;
     y: auto;
diff --git a/src/components/Modal/ModalContainer.vue b/src/components/Modal/ModalContainer.vue
index b0b7276bb..70a45facd 100644
--- a/src/components/Modal/ModalContainer.vue
+++ b/src/components/Modal/ModalContainer.vue
@@ -45,7 +45,8 @@
         "
         :file="
           currentState.type === 'settings-stamp-create' ||
-          currentState.type === 'settings-stamp-image-edit'
+          currentState.type === 'settings-stamp-image-edit' ||
+          currentState.type === 'settings-profile-icon-edit'
             ? currentState.file
             : undefined
         "
@@ -74,6 +75,7 @@ import GroupMemberAddModal from './GroupMemberAddModal/GroupMemberAddModal.vue'
 import StampCreateModal from './StampCreateModal/StampCreateModal.vue'
 import StampEditModal from './StampEditModal/StampEditModal.vue'
 import StampImageEditModal from './StampImageEditModal/StampImageEditModal.vue'
+import ProfileIconEditModal from './ProfileIconEditModal/ProfileIconEditModal.vue'
 
 const { shouldShowModal, currentState } = useModalStore()
 
@@ -113,6 +115,8 @@ const component = computed(() => {
       return StampEditModal
     case 'settings-stamp-image-edit':
       return StampImageEditModal
+    case 'settings-profile-icon-edit':
+      return ProfileIconEditModal
   }
   // eslint-disable-next-line no-console
   console.error('Unexpected modal type:', currentState.value)
diff --git a/src/components/Modal/ProfileIconEditModal/ProfileIconEditModal.vue b/src/components/Modal/ProfileIconEditModal/ProfileIconEditModal.vue
new file mode 100644
index 000000000..a0ff9ccee
--- /dev/null
+++ b/src/components/Modal/ProfileIconEditModal/ProfileIconEditModal.vue
@@ -0,0 +1,79 @@
+<template>
+  <modal-frame
+    title="アイコンの編集"
+    subtitle="画像の位置・サイズを編集できます"
+  >
+    <div :class="$style.container">
+      <image-upload v-model="iconImage" />
+    </div>
+    <div :class="$style.buttonContainer">
+      <form-button label="キャンセル" type="tertiary" @click="cancel" />
+      <form-button
+        label="更新する"
+        :loading="isEditing"
+        @click="editIconImage"
+      />
+    </div>
+  </modal-frame>
+</template>
+
+<script lang="ts" setup>
+import { ref, type Ref } from 'vue'
+import apis, { formatResizeError } from '/@/lib/apis'
+import { useToastStore } from '/@/store/ui/toast'
+import FormButton from '/@/components/UI/FormButton.vue'
+import ModalFrame from '../Common/ModalFrame.vue'
+import { useModalStore } from '/@/store/ui/modal'
+import ImageUpload from '/@/components/Settings/ImageUpload.vue'
+
+const props = defineProps<{
+  file: File
+}>()
+
+const { clearModal } = useModalStore()
+
+const iconImage = ref<File>(props.file)
+
+const useIconImageEdit = (iconImage: Ref<File>) => {
+  const { addSuccessToast, addErrorToast } = useToastStore()
+  const isEditing = ref(false)
+
+  const editIconImage = async () => {
+    if (!iconImage.value) return
+    isEditing.value = true
+    try {
+      await apis.changeMyIcon(iconImage.value)
+
+      addSuccessToast('アイコン画像を変更しました')
+    } catch (e) {
+      // eslint-disable-next-line no-console
+      console.error('アイコン画像の変更に失敗しました', e)
+      addErrorToast(formatResizeError(e, 'アイコン画像の変更に失敗しました'))
+    }
+    clearModal()
+    isEditing.value = false
+  }
+
+  return { isEditing, editIconImage }
+}
+
+const { isEditing, editIconImage } = useIconImageEdit(iconImage)
+const cancel = () => {
+  clearModal()
+}
+</script>
+
+<style lang="scss" module>
+.container {
+  display: flex;
+  justify-content: center;
+}
+
+.buttonContainer {
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+  gap: 16px;
+  margin-top: 16px;
+}
+</style>
diff --git a/src/store/ui/modal/states.ts b/src/store/ui/modal/states.ts
index 3cfddbcb7..ba4f8bcf3 100644
--- a/src/store/ui/modal/states.ts
+++ b/src/store/ui/modal/states.ts
@@ -28,6 +28,7 @@ type ModalStateType =
   | 'settings-stamp-create'
   | 'settings-stamp-edit'
   | 'settings-stamp-image-edit'
+  | 'settings-profile-icon-edit'
 
 export type ModalState =
   | UserModalState
@@ -47,6 +48,7 @@ export type ModalState =
   | SettingsStampCreateModalState
   | SettingsStampEditModalState
   | SettingsStampImageEditModalState
+  | SettingsProfileIconEdit
 
 interface BaseModalState {
   /** モーダル種別 */
@@ -146,3 +148,8 @@ interface SettingsStampImageEditModalState extends BaseModalState {
   id: StampId
   file: File
 }
+
+interface SettingsProfileIconEdit extends BaseModalState {
+  type: 'settings-profile-icon-edit'
+  file: File
+}
diff --git a/src/views/Settings/ProfileTab.vue b/src/views/Settings/ProfileTab.vue
index 2f8c47ada..35262365d 100644
--- a/src/views/Settings/ProfileTab.vue
+++ b/src/views/Settings/ProfileTab.vue
@@ -1,64 +1,49 @@
 <template>
-  <section>
-    <div :class="$style.element">
-      <h3 :class="$style.header">アイコン</h3>
-      <user-icon
-        :user-id="detail.id"
-        :size="100"
-        prevent-modal
-        :class="$style.icon"
-      />
-      <image-upload v-model="newIcon" rounded :class="$style.uploder" />
-    </div>
-    <div :class="$style.element">
-      <h3 :class="$style.header">表示名</h3>
-      <form-input
-        v-model="state.displayName"
-        :class="$style.form"
-        :max-length="32"
+  <div>
+    <section :class="$style.section">
+      <h3 :class="$style.heading">アイコン</h3>
+      <user-icon :user-id="detail.id" :size="200" prevent-modal />
+      <form-button
+        label="アイコンを変更する"
+        type="secondary"
+        :class="$style.iconEditButton"
+        @click="handleOpenModal"
       />
+    </section>
+    <div :class="$style.section">
+      <h3 :class="$style.heading">表示名</h3>
+      <form-input v-model="state.displayName" :max-length="32" />
     </div>
-    <div :class="$style.element">
-      <h3 :class="$style.header">ひとこと</h3>
+    <section :class="$style.section">
+      <h3 :class="$style.heading">ひとこと</h3>
       <div :class="$style.bioContainer">
-        <form-text-area
-          v-model="state.bio"
-          :class="$style.form"
-          rows="1"
-          :max-length="1000"
-        />
-        <div :class="$style.form">
-          <h4>プレビュー</h4>
-          <inline-markdown :content="state.bio" accept-action />
-        </div>
+        <inline-markdown :content="state.bio" accept-action />
+        <form-text-area v-model="state.bio" rows="2" :max-length="1000" />
       </div>
-    </div>
-    <div :class="$style.element">
-      <h3 :class="$style.header">ホームチャンネル</h3>
-      <form-selector
-        v-model="state.homeChannel"
-        :options="channelOptions"
-        :class="$style.form"
-      />
-    </div>
-    <div :class="$style.element">
-      <h3 :class="$style.header">𝕏</h3>
-      <form-input
-        v-model="state.twitterId"
-        prefix="@"
-        :class="$style.form"
-        :max-length="15"
+    </section>
+    <section :class="$style.section">
+      <h3 :class="$style.heading">ホームチャンネル</h3>
+      <form-selector v-model="state.homeChannel" :options="channelOptions" />
+    </section>
+    <section :class="$style.section">
+      <h3 :class="$style.heading">X (旧:Twitter)</h3>
+      <form-input v-model="state.twitterId" prefix="@" :max-length="15" />
+    </section>
+    <div :class="$style.buttonContainer">
+      <form-button
+        label="リセット"
+        :disabled="!isChanged"
+        type="tertiary"
+        @click="handleReset"
       />
-    </div>
-    <div :class="$style.updater">
       <form-button
-        label="更新"
+        label="プロフィールを更新"
         :disabled="!canUpdate"
         :loading="isUpdating"
-        @click="onUpdateClick"
+        @click="handleUpdate"
       />
     </div>
-  </section>
+  </div>
 </template>
 
 <script lang="ts">
@@ -77,6 +62,10 @@ import { useChannelsStore } from '/@/store/entities/channels'
 import { useUsersStore } from '/@/store/entities/users'
 import { useStampsStore } from '/@/store/entities/stamps'
 import { useGroupsStore } from '/@/store/entities/groups'
+import FormButton from '/@/components/UI/FormButton.vue'
+import { useFileSelect } from '/@/composables/dom/useFileSelect'
+import { useModalStore } from '/@/store/ui/modal'
+import { onBeforeRouteLeave } from 'vue-router'
 
 const useState = (detail: Ref<UserDetail>) => {
   const profile = computed(() => ({
@@ -90,7 +79,12 @@ const useState = (detail: Ref<UserDetail>) => {
   const { hasDiff } = useStateDiff<UserDetail>()
   const isStateChanged = computed(() => hasDiff(state, detail))
 
-  return { state, isStateChanged }
+  const handleReset = () => {
+    if (!confirm('変更をリセットしますか？')) return
+    Object.assign(state, profile.value)
+  }
+
+  return { state, isStateChanged, handleReset }
 }
 
 type Profile = Pick<
@@ -98,26 +92,14 @@ type Profile = Pick<
   'displayName' | 'bio' | 'twitterId' | 'homeChannel'
 > & { homeChannel: string }
 
-const useProfileUpdate = (
-  state: Profile,
-  newIcon: Ref<File | undefined>,
-  isStateChanged: Ref<boolean>
-) => {
+const useProfileUpdate = (state: Profile) => {
   const { addSuccessToast, addErrorToast } = useToastStore()
   const isUpdating = ref(false)
 
-  const onUpdateClick = async () => {
-    const promises = []
-    if (newIcon.value !== undefined) {
-      promises.push(apis.changeMyIcon(newIcon.value))
-    }
-    if (isStateChanged.value) {
-      promises.push(apis.editMe(state))
-    }
+  const handleUpdate = async () => {
     try {
       isUpdating.value = true
-      await Promise.all(promises)
-      newIcon.value = undefined
+      await apis.editMe(state)
 
       addSuccessToast('プロフィールを更新しました')
     } catch (e) {
@@ -128,7 +110,7 @@ const useProfileUpdate = (
     }
     isUpdating.value = false
   }
-  return { isUpdating, onUpdateClick }
+  return { isUpdating, handleUpdate }
 }
 
 const useIsLengthValid = (state: Profile) => {
@@ -147,10 +129,8 @@ const useIsLengthValid = (state: Profile) => {
 
 <script lang="ts" setup>
 import UserIcon from '/@/components/UI/UserIcon.vue'
-import ImageUpload from '/@/components/Settings/ImageUpload.vue'
 import FormInput from '/@/components/UI/FormInput.vue'
 import FormSelector from '/@/components/UI/FormSelector.vue'
-import FormButton from '/@/components/UI/FormButton.vue'
 import FormTextArea from '/@/components/UI/FormTextArea.vue'
 import InlineMarkdown from '/@/components/UI/InlineMarkdown.vue'
 
@@ -171,18 +151,11 @@ fetchStamps()
 
 const { channelOptions } = useChannelOptions('--未設定--')
 
-const { state, isStateChanged } = useState(detail)
+const { state, isStateChanged, handleReset } = useState(detail)
 
-const newIcon = ref<File | undefined>()
-const isChanged = computed(
-  () => isStateChanged.value || newIcon.value !== undefined
-)
+const isChanged = computed(() => isStateChanged.value)
 
-const { isUpdating, onUpdateClick } = useProfileUpdate(
-  state,
-  newIcon,
-  isChanged
-)
+const { isUpdating, handleUpdate } = useProfileUpdate(state)
 const isLengthValid = useIsLengthValid(state)
 const isTwitterIdValid = computed(
   () => state.twitterId === '' || isValidTwitter(state.twitterId)
@@ -191,38 +164,50 @@ const isTwitterIdValid = computed(
 const canUpdate = computed(
   () => isChanged.value && isLengthValid.value && isTwitterIdValid.value
 )
+
+const { pushModal } = useModalStore()
+
+const acceptImageType = ['image/jpeg', 'image/png', 'image/gif'].join(',')
+const { selectImage } = useFileSelect({ accept: acceptImageType }, files => {
+  if (!files[0]) return
+  pushModal({
+    type: 'settings-profile-icon-edit',
+    file: files[0]
+  })
+})
+const handleOpenModal = () => {
+  selectImage()
+}
+
+onBeforeRouteLeave(() => {
+  if (!isChanged.value) return
+  const result = window.confirm(
+    'このページを離れると変更が破棄されます。本当に離れますか？'
+  )
+  if (!result) {
+    return false
+  }
+})
 </script>
 
 <style lang="scss" module>
-.element {
+.section {
   margin: 24px 0;
 }
-.header {
-  margin-bottom: 8px;
-}
-.form {
-  margin-left: 12px;
+.heading {
+  margin-bottom: 4px;
 }
-.icon {
-  margin: {
-    bottom: 8px;
-    left: 36px;
-  }
-}
-.uploder {
-  margin-left: 12px;
+.iconEditButton {
+  margin-top: 8px;
 }
 .bioContainer {
   display: flex;
-  flex-wrap: wrap;
-  > * {
-    width: 50%;
-    flex: 1 1 15rem;
-  }
+  flex-direction: column;
+  gap: 4px;
 }
-.updater {
+.buttonContainer {
   display: flex;
-  justify-content: center;
-  margin-top: 24px;
+  justify-content: end;
+  gap: 16px;
 }
 </style>

From 05e329050be6caefc00138ac816e66bbdb0c3a08 Mon Sep 17 00:00:00 2001
From: mehm8128 <mehm8128@gmail.com>
Date: Sat, 6 Jan 2024 18:01:25 +0900
Subject: [PATCH 16/25] =?UTF-8?q?cropper=E3=81=AEmargin=E6=B6=88=E3=81=97?=
 =?UTF-8?q?=E3=81=9F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/Settings/ImageUpload.vue | 1 -
 1 file changed, 1 deletion(-)

diff --git a/src/components/Settings/ImageUpload.vue b/src/components/Settings/ImageUpload.vue
index 9cfe50ccc..a9392c8fb 100644
--- a/src/components/Settings/ImageUpload.vue
+++ b/src/components/Settings/ImageUpload.vue
@@ -117,7 +117,6 @@ onUnmounted(() => {
 .cropper {
   width: 280px;
   height: 280px;
-  margin: 12px;
   &[data-is-rounded] {
     :global(.cropper-view-box),
     :global(.cropper-face) {

From 3bf8a0bc23a8e0673fb4ab1bb96e4210415f3177 Mon Sep 17 00:00:00 2001
From: mehm8128 <mehm8128@gmail.com>
Date: Sat, 6 Jan 2024 18:07:46 +0900
Subject: [PATCH 17/25] =?UTF-8?q?iconsize=E3=82=92=E8=BF=BD=E5=8A=A0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/UI/UserIcon.vue | 14 +++++++++++++-
 1 file changed, 13 insertions(+), 1 deletion(-)

diff --git a/src/components/UI/UserIcon.vue b/src/components/UI/UserIcon.vue
index 6251c1046..2cd10e424 100644
--- a/src/components/UI/UserIcon.vue
+++ b/src/components/UI/UserIcon.vue
@@ -20,7 +20,19 @@ import { useMeStore } from '/@/store/domain/me'
 import { useUsersStore } from '/@/store/entities/users'
 import NotificationIndicator from '/@/components/UI/NotificationIndicator.vue'
 
-export type IconSize = 160 | 100 | 64 | 48 | 44 | 40 | 36 | 32 | 28 | 24 | 20
+export type IconSize =
+  | 200
+  | 160
+  | 100
+  | 64
+  | 48
+  | 44
+  | 40
+  | 36
+  | 32
+  | 28
+  | 24
+  | 20
 
 const props = withDefaults(
   defineProps<{

From 84c0503bb3660c20b229340921f1d514aa3bb0b5 Mon Sep 17 00:00:00 2001
From: mehm8128 <mehm8128@gmail.com>
Date: Tue, 2 Apr 2024 10:37:29 +0900
Subject: [PATCH 18/25] =?UTF-8?q?=E6=97=A7Twitter=E3=81=AB?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/Settings/ProfileTab.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/views/Settings/ProfileTab.vue b/src/views/Settings/ProfileTab.vue
index 35262365d..14603a7b7 100644
--- a/src/views/Settings/ProfileTab.vue
+++ b/src/views/Settings/ProfileTab.vue
@@ -26,7 +26,7 @@
       <form-selector v-model="state.homeChannel" :options="channelOptions" />
     </section>
     <section :class="$style.section">
-      <h3 :class="$style.heading">X (旧:Twitter)</h3>
+      <h3 :class="$style.heading">X (旧Twitter)</h3>
       <form-input v-model="state.twitterId" prefix="@" :max-length="15" />
     </section>
     <div :class="$style.buttonContainer">

From b139c30ae9f3cd1ccefd4d2150302c69513c987a Mon Sep 17 00:00:00 2001
From: mehm8128 <mehm8128@gmail.com>
Date: Fri, 5 Apr 2024 21:04:06 +0900
Subject: [PATCH 19/25] =?UTF-8?q?=E3=82=A2=E3=82=A4=E3=82=B3=E3=83=B3?=
 =?UTF-8?q?=E5=A4=89=E6=9B=B4=E3=83=9C=E3=82=BF=E3=83=B3=E3=82=92=E7=A7=BB?=
 =?UTF-8?q?=E5=8B=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/Settings/ProfileTab.vue | 21 ++++++++++++++-------
 1 file changed, 14 insertions(+), 7 deletions(-)

diff --git a/src/views/Settings/ProfileTab.vue b/src/views/Settings/ProfileTab.vue
index 14603a7b7..886b4f1c4 100644
--- a/src/views/Settings/ProfileTab.vue
+++ b/src/views/Settings/ProfileTab.vue
@@ -2,13 +2,15 @@
   <div>
     <section :class="$style.section">
       <h3 :class="$style.heading">アイコン</h3>
-      <user-icon :user-id="detail.id" :size="200" prevent-modal />
-      <form-button
-        label="アイコンを変更する"
-        type="secondary"
-        :class="$style.iconEditButton"
-        @click="handleOpenModal"
-      />
+      <div :class="$style.iconContainer">
+        <user-icon :user-id="detail.id" :size="200" prevent-modal />
+        <form-button
+          label="アイコンを変更する"
+          type="secondary"
+          :class="$style.iconEditButton"
+          @click="handleOpenModal"
+        />
+      </div>
     </section>
     <div :class="$style.section">
       <h3 :class="$style.heading">表示名</h3>
@@ -197,6 +199,11 @@ onBeforeRouteLeave(() => {
 .heading {
   margin-bottom: 4px;
 }
+.iconContainer{
+  display: flex;
+  align-items: end;
+  justify-content: space-between;
+}
 .iconEditButton {
   margin-top: 8px;
 }

From c0830035aafc44f8f0d5ffa6db25e1a66817bc41 Mon Sep 17 00:00:00 2001
From: mehm8128 <mehm8128@gmail.com>
Date: Fri, 5 Apr 2024 21:06:28 +0900
Subject: [PATCH 20/25] format

---
 src/views/Settings/ProfileTab.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/views/Settings/ProfileTab.vue b/src/views/Settings/ProfileTab.vue
index 886b4f1c4..9d23c2e0a 100644
--- a/src/views/Settings/ProfileTab.vue
+++ b/src/views/Settings/ProfileTab.vue
@@ -199,7 +199,7 @@ onBeforeRouteLeave(() => {
 .heading {
   margin-bottom: 4px;
 }
-.iconContainer{
+.iconContainer {
   display: flex;
   align-items: end;
   justify-content: space-between;

From 7fd6584e19540a5bc2207a3c6693f2b961e2a802 Mon Sep 17 00:00:00 2001
From: mehm8128 <mehm8128@gmail.com>
Date: Thu, 9 May 2024 20:27:25 +0900
Subject: [PATCH 21/25] =?UTF-8?q?=E3=81=A1=E3=82=87=E3=81=A3=E3=81=A8?=
 =?UTF-8?q?=E4=BF=AE=E6=AD=A3?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/Settings/ProfileTab.vue | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/src/views/Settings/ProfileTab.vue b/src/views/Settings/ProfileTab.vue
index 9d23c2e0a..6cc2d4b46 100644
--- a/src/views/Settings/ProfileTab.vue
+++ b/src/views/Settings/ProfileTab.vue
@@ -12,10 +12,10 @@
         />
       </div>
     </section>
-    <div :class="$style.section">
+    <section :class="$style.section">
       <h3 :class="$style.heading">表示名</h3>
       <form-input v-model="state.displayName" :max-length="32" />
-    </div>
+    </section>
     <section :class="$style.section">
       <h3 :class="$style.heading">ひとこと</h3>
       <div :class="$style.bioContainer">
@@ -201,7 +201,7 @@ onBeforeRouteLeave(() => {
 }
 .iconContainer {
   display: flex;
-  align-items: end;
+  align-items: flex-end;
   justify-content: space-between;
 }
 .iconEditButton {
@@ -214,7 +214,7 @@ onBeforeRouteLeave(() => {
 }
 .buttonContainer {
   display: flex;
-  justify-content: end;
+  justify-content: flex-end;
   gap: 16px;
 }
 </style>

From 5f27f842e795797d412b402b036f5c3f75283da9 Mon Sep 17 00:00:00 2001
From: mehm8128 <mehm8128@gmail.com>
Date: Thu, 20 Jun 2024 00:08:03 +0900
Subject: [PATCH 22/25] =?UTF-8?q?sp=E3=81=A7=E3=82=B9=E3=82=BF=E3=83=B3?=
 =?UTF-8?q?=E3=83=97=E5=90=8D=E3=81=8C=E9=95=B7=E3=81=84=E3=81=A8=E3=81=8D?=
 =?UTF-8?q?=E3=81=AB=E3=81=AF=E3=81=BF=E5=87=BA=E3=81=AA=E3=81=84=E3=82=88?=
 =?UTF-8?q?=E3=81=86=E3=81=AB?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/Settings/StampTab/StampItem.vue | 10 ++++++----
 1 file changed, 6 insertions(+), 4 deletions(-)

diff --git a/src/components/Settings/StampTab/StampItem.vue b/src/components/Settings/StampTab/StampItem.vue
index ce1dbac74..51d163e76 100644
--- a/src/components/Settings/StampTab/StampItem.vue
+++ b/src/components/Settings/StampTab/StampItem.vue
@@ -3,7 +3,7 @@
     <img :src="url" :class="$style.stamp" loading="lazy" />
     <div :class="$style.innerContainer">
       <div :class="$style.textContainer">
-        <p>:{{ stamp.name }}:</p>
+        <p :class="$style.stampName">:{{ stamp.name }}:</p>
         <p
           v-if="showCreator"
           :title="`@${creatorName}`"
@@ -82,13 +82,15 @@ const onDotsClick = (e: MouseEvent) => {
   display: flex;
   justify-content: space-between;
   align-items: center;
+  gap: 8px;
+}
+.stampName {
+  word-break: break-all;
 }
 .creator {
   @include color-ui-secondary;
   max-width: 120px;
-  overflow: hidden;
-  white-space: nowrap;
-  text-overflow: ellipsis;
+  word-break: break-all;
 }
 
 .dotsButton {

From 37251f4aeefd6903a409654a45c3a1f6b4bfcc3e Mon Sep 17 00:00:00 2001
From: mehm8128 <mehm8128@gmail.com>
Date: Thu, 20 Jun 2024 00:10:46 +0900
Subject: [PATCH 23/25] remove unused import

---
 src/components/Modal/ModalContainer.vue | 1 -
 1 file changed, 1 deletion(-)

diff --git a/src/components/Modal/ModalContainer.vue b/src/components/Modal/ModalContainer.vue
index 4abd117d9..6816f9585 100644
--- a/src/components/Modal/ModalContainer.vue
+++ b/src/components/Modal/ModalContainer.vue
@@ -77,7 +77,6 @@ import StampEditModal from './StampEditModal/StampEditModal.vue'
 import StampImageEditModal from './StampImageEditModal/StampImageEditModal.vue'
 import ProfileIconEditModal from './ProfileIconEditModal/ProfileIconEditModal.vue'
 import SettingsThemeEditModal from './SettingsThemeEditModal/SettingsThemeEditModal.vue'
-import { error } from 'console'
 
 const { shouldShowModal, currentState } = useModalStore()
 

From d15c500432e834df8f9f390acc1c4ee73947271e Mon Sep 17 00:00:00 2001
From: mehm8128 <mehm8128@gmail.com>
Date: Tue, 2 Jul 2024 20:55:44 +0900
Subject: [PATCH 24/25] =?UTF-8?q?=E3=82=BF=E3=83=96=E3=81=AE=E8=83=8C?=
 =?UTF-8?q?=E6=99=AF=E8=89=B2=E3=81=8C=E3=83=90=E3=82=B0=E3=81=A3=E3=81=A6?=
 =?UTF-8?q?=E3=81=9F=E3=81=AE=E3=82=92=E7=9B=B4=E3=81=97=E3=81=9F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/UI/ATab.vue | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/components/UI/ATab.vue b/src/components/UI/ATab.vue
index 1388457f9..58862339b 100644
--- a/src/components/UI/ATab.vue
+++ b/src/components/UI/ATab.vue
@@ -28,6 +28,7 @@ defineExpose({ focus })
   padding: 0.25rem 1rem;
   cursor: pointer;
   position: relative;
+  isolation: isolate;
   @include color-ui-secondary;
 
   &[aria-selected='true'] {

From bae8de0f1b2e24ea1d7576e97d4326c620c339bf Mon Sep 17 00:00:00 2001
From: nokhnaton <sage_of_forest@icloud.com>
Date: Thu, 17 Oct 2024 19:42:51 +0900
Subject: [PATCH 25/25] fix format

---
 src/components/UI/FormButton.vue | 1 -
 1 file changed, 1 deletion(-)

diff --git a/src/components/UI/FormButton.vue b/src/components/UI/FormButton.vue
index afd156f60..b87edd0b1 100644
--- a/src/components/UI/FormButton.vue
+++ b/src/components/UI/FormButton.vue
@@ -46,7 +46,6 @@ type Props = {
   mdi?: boolean
 } & (NonDangerType | DangerType)
 
-
 const {
   label = '',
   loading = false,