fix(frontend): ドライブファイルを日付以外で並び替える場合は月でグループ化して表示しないように (#16978)

* fix(frontend): ドライブファイルを日付以外で並び替える場合は月でグループ化して表示しないように

* Update Changelog

1 files changed, 52 insertions, 27 deletions

diff --git a/packages/frontend/src/components/MkDrive.vue b/packages/frontend/src/components/MkDrive.vue
index b84532b40b..d8c949d8eb 100644
--- a/packages/frontend/src/components/MkDrive.vue
+++ b/packages/frontend/src/components/MkDrive.vue
@@ -83,34 +83,58 @@ SPDX-License-Identifier: AGPL-3.0-only
 			</div>
 			<MkButton v-if="foldersPaginator.canFetchOlder.value" primary rounded @click="foldersPaginator.fetchOlder()">{{ i18n.ts.loadMore }}</MkButton>
 
-			<MkStickyContainer v-for="(item, i) in filesTimeline" :key="`${item.date.getFullYear()}/${item.date.getMonth() + 1}`">
-				<template #header>
-					<div :class="$style.date">
-						<span><i class="ti ti-chevron-down"></i> {{ item.date.getFullYear() }}/{{ item.date.getMonth() + 1 }}</span>
-					</div>
-				</template>
+			<template v-if="shouldBeGroupedByDate">
+				<MkStickyContainer v-for="(item, i) in filesTimeline" :key="`${item.date.getFullYear()}/${item.date.getMonth() + 1}`">
+					<template #header>
+						<div :class="$style.date">
+							<span><i class="ti ti-chevron-down"></i> {{ item.date.getFullYear() }}/{{ item.date.getMonth() + 1 }}</span>
+						</div>
+					</template>
+
+					<TransitionGroup
+						tag="div"
+						:enterActiveClass="prefer.s.animation ? $style.transition_files_enterActive : ''"
+						:leaveActiveClass="prefer.s.animation ? $style.transition_files_leaveActive : ''"
+						:enterFromClass="prefer.s.animation ? $style.transition_files_enterFrom : ''"
+						:leaveToClass="prefer.s.animation ? $style.transition_files_leaveTo : ''"
+						:moveClass="prefer.s.animation ? $style.transition_files_move : ''"
+						:class="$style.files"
+					>
+						<XFile
+							v-for="file in item.items" :key="file.id"
+							:class="$style.file"
+							:file="file"
+							:folder="folder"
+							:isSelected="selectedFiles.some(x => x.id === file.id)"
+							@click="onFileClick($event, file)"
+							@dragstart="onFileDragstart(file, $event)"
+							@dragend="isDragSource = false"
+						/>
+					</TransitionGroup>
+				</MkStickyContainer>
+			</template>
+			<TransitionGroup
+				v-else
+				tag="div"
+				:enterActiveClass="prefer.s.animation ? $style.transition_files_enterActive : ''"
+				:leaveActiveClass="prefer.s.animation ? $style.transition_files_leaveActive : ''"
+				:enterFromClass="prefer.s.animation ? $style.transition_files_enterFrom : ''"
+				:leaveToClass="prefer.s.animation ? $style.transition_files_leaveTo : ''"
+				:moveClass="prefer.s.animation ? $style.transition_files_move : ''"
+				:class="$style.files"
+			>
+				<XFile
+					v-for="file in filesPaginator.items.value" :key="file.id"
+					:class="$style.file"
+					:file="file"
+					:folder="folder"
+					:isSelected="selectedFiles.some(x => x.id === file.id)"
+					@click="onFileClick($event, file)"
+					@dragstart="onFileDragstart(file, $event)"
+					@dragend="isDragSource = false"
+				/>
+			</TransitionGroup>
 
-				<TransitionGroup
-					tag="div"
-					:enterActiveClass="prefer.s.animation ? $style.transition_files_enterActive : ''"
-					:leaveActiveClass="prefer.s.animation ? $style.transition_files_leaveActive : ''"
-					:enterFromClass="prefer.s.animation ? $style.transition_files_enterFrom : ''"
-					:leaveToClass="prefer.s.animation ? $style.transition_files_leaveTo : ''"
-					:moveClass="prefer.s.animation ? $style.transition_files_move : ''"
-					:class="$style.files"
-				>
-					<XFile
-						v-for="file in item.items" :key="file.id"
-						:class="$style.file"
-						:file="file"
-						:folder="folder"
-						:isSelected="selectedFiles.some(x => x.id === file.id)"
-						@click="onFileClick($event, file)"
-						@dragstart="onFileDragstart(file, $event)"
-						@dragend="isDragSource = false"
-					/>
-				</TransitionGroup>
-			</MkStickyContainer>
 			<MkButton v-show="filesPaginator.canFetchOlder.value" :class="$style.loadMore" primary rounded @click="filesPaginator.fetchOlder()">{{ i18n.ts.loadMore }}</MkButton>
 
 			<div v-if="filesPaginator.items.value.length == 0 && foldersPaginator.items.value.length == 0 && !fetching" :class="$style.empty">
@@ -217,6 +241,7 @@ const foldersPaginator = markRaw(new Paginator('drive/folders', {
 }));
 
 const filesTimeline = makeDateGroupedTimelineComputedRef(filesPaginator.items, 'month');
+const shouldBeGroupedByDate = computed(() => ['+createdAt', '-createdAt'].includes(sortModeSelect.value));
 
 watch(folder, () => emit('cd', folder.value));
 watch(sortModeSelect, () => {