wip

packages/frontend/src/components/MkDrive.file.vue

@@ -240,8 +240,8 @@ function onDragend() {
 
 .name {
 	display: block;
-	margin: 4px 0 0 0;
-	font-size: 0.8em;
+	margin: 8px 0 0 0;
+	font-size: 85%;
 	text-align: center;
 	word-break: break-all;
 	color: var(--MI_THEME-fg);

packages/frontend/src/components/MkDrive.vue

@@ -35,6 +35,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 		</nav>
 	</template>
 
+	<div>
 		<div
 			ref="main"
 			:class="[$style.main, { [$style.uploading]: uploadings.length > 0, [$style.fetching]: fetching }]"
@@ -101,6 +102,13 @@ SPDX-License-Identifier: AGPL-3.0-only
 		</div>
 		<MkLoading v-if="fetching"/>
 		<div v-if="draghover" :class="$style.dropzone"></div>
+	</div>
+
+	<template #footer>
+		<div v-if="isEditMode" :class="$style.footer">
+			<MkButton primary rounded @click="move()"><i class="ti ti-folder-symlink"></i> {{ i18n.ts.move }}...</MkButton>
+		</div>
+	</template>
 </MkStickyContainer>
 </template>
 
@@ -156,6 +164,8 @@ const draghover = ref(false);
 // (自分自身の階層にドロップできないようにするためのフラグ)
 const isDragSource = ref(false);
 
+const isEditMode = ref(false);
+
 const fetching = ref(true);
 
 const sortModeSelect = ref<NonNullable<Misskey.entities.DriveFilesRequest['sort']>>('+createdAt');
@@ -171,6 +181,7 @@ const filesPaginator = usePagination({
 		})),
 	},
 	autoInit: false,
+	autoReInit: false,
 });
 
 const foldersPaginator = usePagination({
@@ -182,6 +193,7 @@ const foldersPaginator = usePagination({
 		})),
 	},
 	autoInit: false,
+	autoReInit: false,
 });
 
 const filesTimeline = makeDateGroupedTimelineComputedRef(filesPaginator.items, 'month');
@@ -613,6 +625,11 @@ function getMenu() {
 		text: i18n.ts.createFolder,
 		icon: 'ti ti-folder-plus',
 		action: () => { createFolder(); },
+	}, { type: 'divider' }, {
+		type: 'switch',
+		text: i18n.ts.edit,
+		icon: 'ti ti-pointer',
+		ref: isEditMode,
 	});
 
 	return menu;
@@ -739,6 +756,14 @@ onBeforeUnmount(() => {
 	background-color: color(from var(--MI_THEME-bg) srgb r g b / 0.85);
 }
 
+.footer {
+	padding: 8px 16px;
+	font-size: 90%;
+	-webkit-backdrop-filter: var(--MI-blur, blur(8px));
+	backdrop-filter: var(--MI-blur, blur(8px));
+	background-color: color(from var(--MI_THEME-bg) srgb r g b / 0.85);
+}
+
 .empty {
 	padding: 16px;
 	text-align: center;

packages/frontend/src/composables/use-pagination.ts

@@ -40,6 +40,7 @@ export type PagingCtx<E extends keyof Misskey.Endpoints = keyof Misskey.Endpoint
 export function usePagination<Endpoint extends keyof Misskey.Endpoints, T = Misskey.Endpoints[Endpoint]['res'] extends (infer I)[] ? I : never>(props: {
 	ctx: PagingCtx<Endpoint>;
 	autoInit?: boolean;
+	autoReInit?: boolean;
 	useShallowRef?: boolean;
 }) {
 	const items = props.useShallowRef ? shallowRef<T[]>([]) : ref<T[]>([]);
@@ -50,8 +51,9 @@ export function usePagination<Endpoint extends keyof Misskey.Endpoints, T = Miss
 	const canFetchOlder = ref(false);
 	const error = ref(false);
 
-	// パラメータに何らかの変更があった際、再読込したい（チャンネル等のIDが変わったなど）
+	if (props.autoReInit !== false) {
 		watch(() => [props.ctx.endpoint, props.ctx.params], init, { deep: true });
+	}
 
 	function getNewestId(): string | null | undefined {
 		// 様々な要因により並び順は保証されないのでソートが必要