FormSelector.vueに検索機能を追加

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
@@ -64,11 +64,12 @@ const { clearModal } = useModalStore()
 }
 .body {
   width: 100%;
-  padding: 16px 24px;
+  padding: 16px;
   overflow: {
     x: hidden;
     y: auto;
   }
   scrollbar-gutter: stable;
 }
 </style>
+<!-- TODO: 依存しているコンポーネントが未修正 -->

src/components/Modal/Common/ModalHeader.vue

@@ -3,11 +3,17 @@
     <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" />{{
-          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>
@@ -19,7 +25,7 @@ import ModalReturnButton from './ModalReturnButton.vue'
 withDefaults(
   defineProps<{
     iconMdi?: boolean
-    iconName: string
+    iconName?: string
     title: string
     subtitle?: string
     returnButton?: boolean
@@ -69,6 +75,9 @@ withDefaults(
     weight: 500;
     size: 0.875rem;
   }
+  &[data-has-icon] {
+    padding-left: 0;
+  }
 }
 .icon {
   margin-right: 16px;

src/components/Modal/GroupCreateModal/GroupCreateModal.vue

@@ -22,8 +22,9 @@
     <form-checkbox
       v-model="addMember"
       :class="[$style.item, $style.memberCheckbox]"
-      label="自分自身をメンバーに追加する"
-    />
+    >
+      自分自身をメンバーに追加する
+    </form-checkbox>
     <div :class="$style.createButtonWrapper">
       <form-button label="作成" @click="create" />
     </div>

src/components/Modal/ModalContainer.vue

@@ -63,6 +63,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 SettingsCacheClearModal from './SettingsCacheClearModal/SettingsCacheClearModal.vue'
 
 const { shouldShowModal, currentState } = useModalStore()
 
@@ -96,6 +97,8 @@ const component = computed(() => {
       return GroupAdminAddModal
     case 'group-member-add':
       return GroupMemberAddModal
+    case 'settings-cache-clear':
+      return SettingsCacheClearModal
   }
   // eslint-disable-next-line no-console
   console.error('Unexpected modal type:', currentState.value)

src/components/Modal/SettingsCacheClearModal/SettingsCacheClearModal.vue

@@ -0,0 +1,214 @@
+<template>
+  <modal-frame
+    title="キャッシュの削除"
+    subtitle="キャッシュを削除する項目を選んで下さい。"
+  >
+    <form-button label="update" type="secondary" @click="updateCacheSize" />
+    <div :class="$style.content">
+      <form-checkbox
+        v-for="name in cacheNames"
+        :key="name"
+        v-model="cacheNameToIsSelected[name]"
+        :class="$style.checkbox"
+      >
+        <div :class="$style.label">
+          {{ cacheLabel(name) }}
+          <span>{{ cacheSize[name] }}</span>
+        </div>
+      </form-checkbox>
+      <div :class="$style.buttonContainer">
+        <form-button label="キャンセル" type="tertiary" @click="clearModal" />
+        <form-button
+          label="削除する"
+          type="secondary"
+          :disabled="!anyCacheSelected"
+          is-danger
+          @click="clearCache"
+        />
+      </div>
+    </div>
+  </modal-frame>
+</template>
+
+<script lang="ts" setup>
+import { onMounted, ref, computed } from 'vue'
+import { useToastStore } from '/@/store/ui/toast'
+import { wait } from '/@/lib/basic/timer'
+import ModalFrame from '../Common/ModalFrame.vue'
+import FormButton from '/@/components/UI/FormButton.vue'
+import { useModalStore } from '/@/store/ui/modal'
+import FormCheckbox from '/@/components/UI/FormCheckbox.vue'
+import { prettifyFileSize } from '/@/lib/basic/file'
+
+declare global {
+  interface StorageEstimate {
+    usageDetails: Record<CacheName, number>
+  }
+}
+
+const confirmClear = () => window.confirm('本当に削除しますか？')
+
+/* CacheStorageのnameはsw.jsを参照 */
+const clearCacheStorage = (cacheName: string) => window.caches.delete(cacheName)
+
+const { addSuccessToast } = useToastStore()
+const showToast = (extraMessage?: string) => {
+  addSuccessToast(
+    `削除に成功しました${extraMessage ? `: ${extraMessage}` : ''}`
+  )
+}
+
+const cacheNames = [
+  'traQ_S-precache',
+  'files-cache',
+  'thumbnail-cache'
+] as const
+type CacheName = (typeof cacheNames)[number]
+
+const cacheNameToIsSelected = ref<Record<CacheName, boolean>>({
+  'traQ_S-precache': false,
+  'files-cache': false,
+  'thumbnail-cache': false
+})
+const anyCacheSelected = computed(() => {
+  return Object.values(cacheNameToIsSelected).includes(true)
+})
+
+const cacheSize = ref<Record<CacheName, number>>({
+  'traQ_S-precache': -1,
+  'files-cache': -1,
+  'thumbnail-cache': -1
+})
+
+onMounted(() => {
+  updateCacheSize()
+})
+
+const updateCacheSize = async () => {
+  await Promise.all(
+    cacheNames.map(async name => {
+      cacheSize.value[name] = await calculateCacheSize(name)
+    })
+  )
+}
+
+const calculateCacheSize = async (cacheName: CacheName) => {
+  const cache = await caches.open(cacheName)
+  const keys = await cache.keys()
+  let size = 0
+  Promise.all(
+    keys.map(async key => {
+      const response = await cache.match(key)
+      if (!response) return
+      const blob = await response.blob()
+      size += blob.size
+    })
+  )
+  return size
+}
+
+const cacheLabel = (cacheName: CacheName) => {
+  switch (cacheName) {
+    case 'traQ_S-precache':
+      return 'traQ本体'
+    case 'files-cache':
+      return 'ファイルの本体一覧'
+    case 'thumbnail-cache':
+      return 'ファイルのサムネイル一覧'
+    default:
+      throw new Error(`Unknown cache name: ${cacheName satisfies CacheName}`)
+  }
+}
+
+const { clearModal } = useModalStore()
+
+const isClearingCache = ref<boolean>(false)
+
+// TODO: 名前の改善
+const clearMainCache = async () => {
+  const names = await window.caches.keys()
+  return names
+    .filter(name => name.startsWith('traQ_S-precache'))
+    .map(name => clearCacheStorage(name))
+}
+
+// TODO: 処理を綺麗にできると嬉しい
+// TODO: promise周りの処理順の確認
+// TODO: キャッシュの対応関係の確認
+const clearCache = async () => {
+  if (isClearingCache.value || !confirmClear()) return
+  isClearingCache.value = true
+  const promises = []
+  if (cacheNameToIsSelected.value['traQ_S-precache']) {
+    promises.push(clearMainCache())
+  }
+  if (cacheNameToIsSelected.value['files-cache']) {
+    promises.push(clearCacheStorage('files-cache'))
+  }
+  if (cacheNameToIsSelected.value['thumbnail-cache']) {
+    promises.push(clearCacheStorage('thumbnail-cache'))
+  }
+  await Promise.all(promises.flat())
+  if (!cacheNameToIsSelected.value['traQ_S-precache']) {
+    isClearingCache.value = false
+    clearModal()
+    showToast()
+    return
+  }
+  const registration = await navigator.serviceWorker?.getRegistration()
+  if (!registration) {
+    isClearingCache.value = false
+    clearModal()
+    showToast()
+    return
+  }
+  registration.unregister()
+  isClearingCache.value = false
+  clearModal()
+  showToast('1秒後にリロードします')
+  await wait(1000)
+  window.location.reload()
+}
+</script>
+
+<style lang="scss" module>
+.content {
+  display: flex;
+  flex-direction: column;
+  gap: 32px;
+}
+.checkboxContainer {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+.checkbox {
+  @include color-ui-secondary;
+  &:has(:checked) {
+    @include color-ui-primary;
+  }
+  display: flex;
+  justify-content: space-between;
+  gap: 4px;
+  padding: 8px;
+  align-items: center;
+  cursor: pointer;
+  border: solid 2px transparent;
+  border-radius: 4px;
+  &:focus-within {
+    border-color: $theme-accent-focus-default;
+  }
+}
+.label {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  width: 100%;
+  padding: 8px 16px;
+}
+.buttonContainer {
+  display: flex;
+  justify-content: flex-end;
+  gap: 16px;
+}
+</style>