編集中でもチャンネル/クリップフォルダを遷移したときには編集内容を上書きするように

src/components/Main/MainView/ChannelView/ChannelSidebar/ChannelSidebarTopic.vue

@@ -13,7 +13,7 @@
 </template>
 
 <script lang="ts" setup>
-import { computed } from 'vue'
+import { computed, watch } from 'vue'
 import apis from '/@/lib/apis'
 import { ChannelId } from '/@/types/entity-ids'
 import { useChannelsStore } from '/@/store/entities/channels'
@@ -31,17 +31,20 @@ const { channelsMap } = useChannelsStore()
 const remoteTopic = computed(
   () => channelsMap.value.get(props.channelId)?.topic ?? ''
 )
-const { localValue: localTopic, isEditing } = useLocalInput(
-  remoteTopic,
-  async topic => {
-    try {
-      await apis.editChannelTopic(props.channelId, { topic })
-      return true
-    } catch (e) {
-      // eslint-disable-next-line no-console
-      console.error(e)
-      return false
-    }
+const {
+  localValue: localTopic,
+  isEditing,
+  sync
+} = useLocalInput(remoteTopic, async topic => {
+  try {
+    await apis.editChannelTopic(props.channelId, { topic })
+    return true
+  } catch (e) {
+    // eslint-disable-next-line no-console
+    console.error(e)
+    return false
   }
-)
+})
+
+watch(() => props.channelId, sync)
 </script>

src/components/Main/MainView/ClipsView/ClipsSidebar/ClipsSidebarContent.vue

@@ -29,7 +29,7 @@
 </template>
 
 <script lang="ts" setup>
-import { computed } from 'vue'
+import { computed, watch } from 'vue'
 import { ClipFolderId } from '/@/types/entity-ids'
 import apis from '/@/lib/apis'
 import router, {
@@ -69,17 +69,21 @@ const { localValue: localName, isEditing: isNameEditing } = useLocalInput(
   }
 )
 
-const { localValue: localDescription, isEditing: isDescriptionEditing } =
-  useLocalInput(remoteDescription, async description => {
-    try {
-      await apis.editClipFolder(props.clipFolderId, { description })
-      return true
-    } catch (e) {
-      // eslint-disable-next-line no-console
-      console.error(e)
-      return false
-    }
-  })
+const {
+  localValue: localDescription,
+  isEditing: isDescriptionEditing,
+  sync
+} = useLocalInput(remoteDescription, async description => {
+  try {
+    await apis.editClipFolder(props.clipFolderId, { description })
+    return true
+  } catch (e) {
+    // eslint-disable-next-line no-console
+    console.error(e)
+    return false
+  }
+})
+watch(() => props.clipFolderId, sync)
 
 const { defaultChannelName } = useBrowserSettings()
 

src/composables/utils/useLocalInput.ts

@@ -28,7 +28,11 @@ const useLocalInput = <T>(
     }
   })
 
-  return { localValue, isEditing }
+  const sync = () => {
+    localValue.value = remoteValue.value
+  }
+
+  return { localValue, isEditing, sync }
 }
 
 export default useLocalInput

tests/unit/composables/utils/useLocalInput.spec.ts

@@ -54,7 +54,7 @@ describe('useLocalInput', () => {
     const f = vi.fn().mockReturnValue(true)
 
     const remoteValue = ref('1')
-    const { localValue, isEditing } = useLocalInput(remoteValue, f)
+    const { isEditing } = useLocalInput(remoteValue, f)
     isEditing.value = true
     await nextTick()
     expect(f).not.toHaveBeenCalled()
@@ -70,11 +70,22 @@ describe('useLocalInput', () => {
     const f = vi.fn().mockReturnValue(false)
 
     const remoteValue = ref('1')
-    const { localValue, isEditing } = useLocalInput(remoteValue, f)
+    const { isEditing } = useLocalInput(remoteValue, f)
     isEditing.value = true
     await nextTick()
     isEditing.value = false
     await nextTick()
     expect(isEditing.value).toBe(true)
   })
+
+  it('sync function works', async () => {
+    const f = vi.fn().mockReturnValue(false)
+
+    const remoteValue = ref('1')
+    const { localValue, isEditing, sync } = useLocalInput(remoteValue, f)
+    isEditing.value = true
+    localValue.value = '2'
+    sync()
+    expect(localValue.value).toBe('1')
+  })
 })