Files UX Sprint

apps/frontend/src/components/ui/servers/FileItem.vue

@@ -2,40 +2,61 @@
   <li
     role="button"
     data-pyro-file
-    :class="containerClasses"
+    :class="[
+      containerClasses,
+      isDragOver && type === 'directory' ? 'bg-brand-highlight' : '',
+      isDragging ? 'opacity-50' : '',
+    ]"
     tabindex="0"
+    draggable="true"
     @click="selectItem"
     @contextmenu="openContextMenu"
     @keydown="(e) => e.key === 'Enter' && selectItem()"
+    @dragstart="handleDragStart"
+    @dragend="handleDragEnd"
+    @dragenter.prevent="handleDragEnter"
+    @dragover.prevent="handleDragOver"
+    @dragleave.prevent="handleDragLeave"
+    @drop.prevent="handleDrop"
   >
-    <div data-pyro-file-metadata class="flex w-full items-center gap-4 truncate">
+    <div
+      data-pyro-file-metadata
+      class="pointer-events-none flex w-full items-center gap-4 truncate"
+    >
       <div
-        class="flex size-8 items-center justify-center rounded-full bg-bg-raised p-[6px] group-hover:bg-brand-highlight group-hover:text-brand group-focus:bg-brand-highlight group-focus:text-brand"
+        class="pointer-events-none flex size-8 items-center justify-center rounded-full bg-bg-raised p-[6px] group-hover:bg-brand-highlight group-hover:text-brand group-focus:bg-brand-highlight group-focus:text-brand"
+        :class="isEditableFile ? 'group-active:scale-[0.8]' : ''"
       >
         <component :is="iconComponent" class="size-6" />
       </div>
-      <div class="flex w-full flex-col truncate">
+      <div class="pointer-events-none flex w-full flex-col truncate">
         <span
-          class="w-[98%] truncate font-bold group-hover:text-contrast group-focus:text-contrast"
-          >{{ name }}</span
+          class="pointer-events-none w-[98%] truncate font-bold group-hover:text-contrast group-focus:text-contrast"
         >
-        <span class="text-xs text-secondary group-hover:text-primary">
+          {{ name }}
+        </span>
+        <span class="pointer-events-none text-xs text-secondary group-hover:text-primary">
           {{ subText }}
         </span>
       </div>
     </div>
-
-    <div data-pyro-file-actions class="flex w-fit flex-shrink-0 items-center gap-4 md:gap-12">
-      <span class="w-[160px] text-nowrap text-right font-mono text-sm text-secondary">{{
-        formattedDate
-      }}</span>
+    <div
+      data-pyro-file-actions
+      class="pointer-events-auto flex w-fit flex-shrink-0 items-center gap-4 md:gap-12"
+    >
+      <span class="hidden w-[160px] text-nowrap font-mono text-sm text-secondary md:flex">
+        {{ formattedCreationDate }}
+      </span>
+      <span class="w-[160px] text-nowrap font-mono text-sm text-secondary">
+        {{ formattedModifiedDate }}
+      </span>
       <ButtonStyled circular type="transparent">
         <UiServersTeleportOverflowMenu :options="menuOptions" direction="left" position="bottom">
           <MoreHorizontalIcon class="h-5 w-5 bg-transparent" />
-          <template #rename> <EditIcon /> Rename </template>
-          <template #move> <RightArrowIcon /> Move </template>
-          <template #download> <DownloadIcon /> Download </template>
-          <template #delete> <TrashIcon /> Delete </template>
+          <template #rename><EditIcon /> Rename</template>
+          <template #move><RightArrowIcon /> Move</template>
+          <template #download><DownloadIcon /> Download</template>
+          <template #delete><TrashIcon /> Delete</template>
         </UiServersTeleportOverflowMenu>
       </ButtonStyled>
     </div>
@@ -54,6 +75,7 @@ import {
   RightArrowIcon,
 } from "@modrinth/assets";
 import { computed, shallowRef, ref } from "vue";
+import { renderToString } from "@vue/server-renderer";
 import { useRouter, useRoute } from "vue-router";
 import {
   UiServersIconsCogFolderIcon,
@@ -70,12 +92,27 @@ interface FileItemProps {
   size?: number;
   count?: number;
   modified: number;
+  created: number;
   path: string;
 }
 
 const props = defineProps<FileItemProps>();
 
-const emit = defineEmits(["rename", "download", "delete", "move", "edit", "contextmenu"]);
+const emit = defineEmits<{
+  (e: "rename", item: { name: string; type: string; path: string }): void;
+  (e: "move", item: { name: string; type: string; path: string }): void;
+  (
+    e: "moveDirectTo",
+    item: { name: string; type: string; path: string; destination: string },
+  ): void;
+  (e: "download", item: { name: string; type: string; path: string }): void;
+  (e: "delete", item: { name: string; type: string; path: string }): void;
+  (e: "edit", item: { name: string; type: string; path: string }): void;
+  (e: "contextmenu", x: number, y: number): void;
+}>();
+
+const isDragOver = ref(false);
+const isDragging = ref(false);
 
 const codeExtensions = Object.freeze([
   "json",
@@ -114,6 +151,7 @@ const router = useRouter();
 const containerClasses = computed(() => [
   "group m-0 p-0 focus:!outline-none flex w-full select-none items-center justify-between overflow-hidden border-0 border-b border-solid border-bg-raised p-3 last:border-none hover:bg-bg-raised focus:bg-bg-raised",
   isEditableFile.value ? "cursor-pointer" : props.type === "directory" ? "cursor-pointer" : "",
+  isDragOver.value ? "bg-brand-highlight" : "",
 ]);
 
 const fileExtension = computed(() => props.name.split(".").pop()?.toLowerCase() || "");
@@ -161,7 +199,7 @@ const subText = computed(() => {
   return formattedSize.value;
 });
 
-const formattedDate = computed(() => {
+const formattedModifiedDate = computed(() => {
   const date = new Date(props.modified * 1000);
   return `${date.toLocaleDateString("en-US", {
     month: "2-digit",
@@ -174,6 +212,19 @@ const formattedDate = computed(() => {
   })}`;
 });
 
+const formattedCreationDate = computed(() => {
+  const date = new Date(props.created * 1000);
+  return `${date.toLocaleDateString("en-US", {
+    month: "2-digit",
+    day: "2-digit",
+    year: "2-digit",
+  })}, ${date.toLocaleTimeString("en-US", {
+    hour: "numeric",
+    minute: "numeric",
+    hour12: true,
+  })}`;
+});
+
 const isEditableFile = computed(() => {
   if (props.type === "file") {
     const ext = fileExtension.value;
@@ -226,4 +277,121 @@ const selectItem = () => {
     isNavigating.value = false;
   }, 500);
 };
+
+const getDragIcon = async () => {
+  let iconToUse;
+
+  if (props.type === "directory") {
+    if (props.name === "config") {
+      iconToUse = UiServersIconsCogFolderIcon;
+    } else if (props.name === "world") {
+      iconToUse = UiServersIconsEarthIcon;
+    } else if (props.name === "resourcepacks") {
+      iconToUse = PaletteIcon;
+    } else {
+      iconToUse = FolderOpenIcon;
+    }
+  } else {
+    const ext = fileExtension.value;
+    if (codeExtensions.includes(ext)) {
+      iconToUse = UiServersIconsCodeFileIcon;
+    } else if (textExtensions.includes(ext)) {
+      iconToUse = UiServersIconsTextFileIcon;
+    } else if (imageExtensions.includes(ext)) {
+      iconToUse = UiServersIconsImageFileIcon;
+    } else {
+      iconToUse = FileIcon;
+    }
+  }
+
+  return await renderToString(h(iconToUse));
+};
+
+const handleDragStart = async (event: DragEvent) => {
+  if (!event.dataTransfer) return;
+  isDragging.value = true;
+
+  const dragGhost = document.createElement("div");
+  dragGhost.className =
+    "fixed left-0 top-0 flex items-center max-w-[500px] flex-row gap-3 rounded-lg bg-bg-raised p-3 shadow-lg pointer-events-none";
+
+  const iconContainer = document.createElement("div");
+  iconContainer.className = "flex size-6 items-center justify-center";
+
+  const icon = document.createElement("div");
+  icon.className = "size-4";
+  icon.innerHTML = await getDragIcon();
+  iconContainer.appendChild(icon);
+
+  const nameSpan = document.createElement("span");
+  nameSpan.className = "font-bold truncate text-contrast";
+  nameSpan.textContent = props.name;
+
+  dragGhost.appendChild(iconContainer);
+  dragGhost.appendChild(nameSpan);
+  document.body.appendChild(dragGhost);
+
+  event.dataTransfer.setDragImage(dragGhost, 0, 0);
+
+  requestAnimationFrame(() => {
+    document.body.removeChild(dragGhost);
+  });
+
+  event.dataTransfer.setData(
+    "application/pyro-file-move",
+    JSON.stringify({
+      name: props.name,
+      type: props.type,
+      path: props.path,
+    }),
+  );
+  event.dataTransfer.effectAllowed = "move";
+};
+
+const isChildPath = (parentPath: string, childPath: string) => {
+  return childPath.startsWith(parentPath + "/");
+};
+
+const handleDragEnd = () => {
+  isDragging.value = false;
+};
+
+const handleDragEnter = () => {
+  if (props.type !== "directory") return;
+  isDragOver.value = true;
+};
+
+const handleDragOver = (event: DragEvent) => {
+  if (props.type !== "directory" || !event.dataTransfer) return;
+  event.dataTransfer.dropEffect = "move";
+};
+
+const handleDragLeave = () => {
+  isDragOver.value = false;
+};
+
+const handleDrop = (event: DragEvent) => {
+  isDragOver.value = false;
+  if (props.type !== "directory" || !event.dataTransfer) return;
+
+  try {
+    const dragData = JSON.parse(event.dataTransfer.getData("application/pyro-file-move"));
+
+    if (dragData.path === props.path) return;
+
+    if (dragData.type === "directory" && isChildPath(dragData.path, props.path)) {
+      console.error("Cannot move a folder into its own subfolder");
+      return;
+    }
+
+    emit("moveDirectTo", {
+      name: dragData.name,
+      type: dragData.type,
+      path: dragData.path,
+      destination: props.path,
+    });
+  } catch (error) {
+    console.error("Error handling file drop:", error);
+  }
+};
 </script>

apps/frontend/src/components/ui/servers/FileVirtualList.vue

@@ -32,6 +32,7 @@
           @rename="$emit('rename', item)"
           @download="$emit('download', item)"
           @move="$emit('move', item)"
+          @move-direct-to="$emit('moveDirectTo', $event)"
           @edit="$emit('edit', item)"
           @contextmenu="(x, y) => $emit('contextmenu', item, x, y)"
         />
@@ -55,6 +56,7 @@ const emit = defineEmits<{
   (e: "edit", item: any): void;
   (e: "contextmenu", item: any, x: number, y: number): void;
   (e: "loadMore"): void;
+  (e: "moveDirectTo", item: any): void;
 }>();
 
 const ITEM_HEIGHT = 61;

apps/frontend/src/components/ui/servers/FilesBrowseNavbar.vue

@@ -80,6 +80,7 @@
             :options="[
               { id: 'normal', action: () => $emit('sort', 'default') },
               { id: 'modified', action: () => $emit('sort', 'modified') },
+              { id: 'created', action: () => $emit('sort', 'created') },
               { id: 'filesOnly', action: () => $emit('sort', 'filesOnly') },
               { id: 'foldersOnly', action: () => $emit('sort', 'foldersOnly') },
             ]"
@@ -91,11 +92,12 @@
             <DropdownIcon aria-hidden="true" class="h-5 w-5 text-secondary" />
             <template #normal> Alphabetical </template>
             <template #modified> Date modified </template>
+            <template #created> Date created </template>
             <template #filesOnly> Files only </template>
             <template #foldersOnly> Folders only </template>
           </UiServersTeleportOverflowMenu>
         </ButtonStyled>
-        <div class="mx-1 w-full text-sm sm:w-40">
+        <div class="mx-1 w-full text-sm sm:w-48">
           <label for="search-folder" class="sr-only">Search folder</label>
           <div class="relative">
             <SearchIcon
@@ -183,6 +185,8 @@ const sortMethodLabel = computed(() => {
   switch (props.sortMethod) {
     case "modified":
       return "Date modified";
+    case "created":
+      return "Date created";
     case "filesOnly":
       return "Files only";
     case "foldersOnly":

apps/frontend/src/components/ui/servers/FilesContextMenu.vue

@@ -13,8 +13,8 @@
         id="item-context-menu"
         ref="ctxRef"
         :style="{
-          border: '1px solid var(--color-button-bg)',
-          borderRadius: 'var(--radius-md)',
+          border: '1px solid var(--color-divider)',
+          borderRadius: 'var(--radius-lg)',
           backgroundColor: 'var(--color-raised-bg)',
           padding: 'var(--gap-sm)',
           boxShadow: 'var(--shadow-floating)',
@@ -31,7 +31,7 @@
           Rename
         </button>
         <button class="btn btn-transparent flex !w-full items-center" @click="$emit('move', item)">
-          <ArrowBigUpDashIcon class="h-5 w-5" />
+          <RightArrowIcon />
           Move
         </button>
         <button
@@ -55,7 +55,7 @@
 </template>
 
 <script setup lang="ts">
-import { EditIcon, ArrowBigUpDashIcon, DownloadIcon, TrashIcon } from "@modrinth/assets";
+import { EditIcon, DownloadIcon, TrashIcon, RightArrowIcon } from "@modrinth/assets";
 
 interface FileItem {
   type: string;

apps/frontend/src/components/ui/servers/FilesCreateItemModal.vue

@@ -1,5 +1,5 @@
 <template>
-  <NewModal ref="modal" :header="`Creating a ${type}`">
+  <NewModal ref="modal" :header="`Creating a ${displayType}`">
     <form class="flex flex-col gap-4 md:w-[600px]" @submit.prevent="handleSubmit">
       <div class="flex flex-col gap-2">
         <div class="font-semibold text-contrast">Name</div>
@@ -18,7 +18,7 @@
         <ButtonStyled color="brand">
           <button :disabled="!!error" type="submit">
             <PlusIcon class="h-5 w-5" />
-            Create
+            Create {{ displayType }}
           </button>
         </ButtonStyled>
         <ButtonStyled>
@@ -46,6 +46,7 @@ const emit = defineEmits<{
 }>();
 
 const modal = ref<typeof NewModal>();
+const displayType = computed(() => (props.type === "directory" ? "folder" : props.type));
 const createInput = ref<HTMLInputElement | null>(null);
 const itemName = ref("");
 const submitted = ref(false);

apps/frontend/src/components/ui/servers/FilesEditingNavbar.vue

@@ -6,15 +6,15 @@
   >
     <nav
       aria-label="Breadcrumb navigation"
-      class="m-0 flex list-none items-center p-0 text-contrast"
+      class="m-0 flex min-w-0 flex-shrink items-center p-0 text-contrast"
     >
-      <ol class="m-0 flex list-none items-center p-0">
-        <li class="-ml-1">
+      <ol class="m-0 flex min-w-0 flex-shrink list-none items-center p-0">
+        <li class="-ml-1 flex-shrink-0">
           <ButtonStyled type="transparent">
             <button
               v-tooltip="'Back to home'"
               type="button"
-              class="grid h-12 w-10 place-content-center focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-brand"
+              class="mr-2 grid h-12 w-10 place-content-center focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-brand"
               @click="goHome"
             >
               <span