feat(assets): add rename and delete action

packages/devtools-kit/src/_types/rpc.ts

@@ -56,6 +56,8 @@ export interface ServerFunctions {
   getImageMeta(filepath: string): Promise<ImageMeta | undefined>
   getTextAssetContent(filepath: string, limit?: number): Promise<string | undefined>
   writeStaticAssets(token: string, file: { name: string; data: string }[], path: string): Promise<string[]>
+  deleteStaticAsset(token: string, file: string): Promise<void>
+  renameStaticAsset(token: string, oldPath: string, newPath: string): Promise<void>
 
   // Actions
   customTabAction(name: string, action: number): Promise<boolean>

packages/devtools/client/components/AssetDetails.vue

@@ -3,21 +3,24 @@ import { useTimeAgo } from '@vueuse/core'
 import type { AssetInfo, CodeSnippet } from '~/../src/types'
 
 const props = defineProps<{
-  asset: AssetInfo
+  modelValue: AssetInfo
 }>()
 
+const emit = defineEmits<{ (...args: any): void }>()
+const asset = useVModel(props, 'modelValue', emit, { passive: true })
+
 const openInEditor = useOpenInEditor()
 
 const imageMeta = computedAsync(() => {
-  if (props.asset.type !== 'image')
+  if (asset.value.type !== 'image')
     return undefined
-  return rpc.getImageMeta(props.asset.filePath)
+  return rpc.getImageMeta(asset.value.filePath)
 })
 
 const textContent = computedAsync(() => {
-  if (props.asset.type !== 'text')
+  if (asset.value.type !== 'text')
     return undefined
-  return rpc.getTextAssetContent(props.asset.filePath)
+  return rpc.getTextAssetContent(asset.value.filePath)
 })
 
 const config = useServerConfig()
@@ -28,32 +31,32 @@ const hasNuxtImage = computed(() => {
 
 const codeSnippets = computed(() => {
   const items: CodeSnippet[] = []
-  if (props.asset.type === 'image') {
+  if (asset.value.type === 'image') {
     const attrs = imageMeta.value?.width
       ? `\n  width="${imageMeta.value.width}"\n  height="${imageMeta.value.height}" `
       : ' '
     items.push(
-      { lang: 'vue-html', code: `<img${attrs}\n  src="${props.asset.publicPath}"\n/>`, name: 'Plain Image' },
+      { lang: 'vue-html', code: `<img${attrs}\n  src="${asset.value.publicPath}"\n/>`, name: 'Plain Image' },
     )
     hasNuxtImage.value && items.push(
-      { lang: 'vue-html', code: `<NuxtImage${attrs}\n  src="${props.asset.publicPath}"\n/>`, name: 'Nuxt Image', docs: 'https://image.nuxtjs.org/components/nuxt-img' },
-      { lang: 'vue-html', code: `<NuxtPicture${attrs}\n  src="${props.asset.publicPath}"\n/>`, name: 'Nuxt Picture', docs: 'https://image.nuxtjs.org/components/nuxt-picture' },
+      { lang: 'vue-html', code: `<NuxtImage${attrs}\n  src="${asset.value.publicPath}"\n/>`, name: 'Nuxt Image', docs: 'https://image.nuxtjs.org/components/nuxt-img' },
+      { lang: 'vue-html', code: `<NuxtPicture${attrs}\n  src="${asset.value.publicPath}"\n/>`, name: 'Nuxt Picture', docs: 'https://image.nuxtjs.org/components/nuxt-picture' },
     )
     return items
   }
 
   items.push({
     lang: 'html',
-    code: `<a download href="${props.asset.publicPath}">\n  Download ${props.asset.path.split('/').slice(-1)[0]}\n</a>`,
+    code: `<a download href="${asset.value.publicPath}">\n  Download ${asset.value.path.split('/').slice(-1)[0]}\n</a>`,
     name: 'Download link',
   })
   return items
 })
 
 const copy = useCopy()
-const timeago = useTimeAgo(() => props.asset.mtime)
+const timeAgo = useTimeAgo(() => asset.value.mtime)
 const fileSize = computed(() => {
-  const size = props.asset.size
+  const size = asset.value.size
   if (size < 1024)
     return `${size} B`
   if (size < 1024 * 1024)
@@ -81,8 +84,64 @@ const supportsPreview = computed(() => {
     'text',
     'video',
     'font',
-  ].includes(props.asset.type)
+  ].includes(asset.value.type)
 })
+
+const deleteDialog = ref(false)
+async function deleteAsset() {
+  try {
+    await rpc.deleteStaticAsset(await ensureDevAuthToken(), asset.value.filePath)
+    asset.value = undefined as any
+    deleteDialog.value = false
+    showNotification({
+      message: 'Asset deleted',
+      icon: 'i-carbon-checkmark',
+      classes: 'text-green',
+    })
+  }
+  catch (error) {
+    showNotification({
+      message: 'Something went wrong!',
+      icon: 'i-carbon-warning',
+      classes: 'text-red',
+    })
+  }
+}
+
+const renameDialog = ref(false)
+const newName = ref('')
+async function renameAsset() {
+  const parts = asset.value.filePath.split('/')
+  const oldName = parts.slice(-1)[0].split('.').slice(0, -1).join('.')
+
+  if (!newName.value || newName.value === oldName) {
+    return showNotification({
+      message: 'Please enter a new name',
+      icon: 'i-carbon-warning',
+      classes: 'text-orange',
+    })
+  }
+
+  try {
+    const extension = parts.slice(-1)[0].split('.').slice(-1)[0]
+    const fullPath = `${parts.slice(0, -1).join('/')}/${newName.value}.${extension}`
+    await rpc.renameStaticAsset(await ensureDevAuthToken(), asset.value.filePath, fullPath)
+    asset.value = undefined as any
+    renameDialog.value = false
+    showNotification({
+      message: 'Asset renamed',
+      icon: 'i-carbon-checkmark',
+      classes: 'text-green',
+    })
+  }
+  catch (error) {
+    showNotification({
+      message: 'Something went wrong!',
+      icon: 'i-carbon-warning',
+      classes: 'text-red',
+    })
+  }
+}
 </script>
 
 <template>
@@ -189,7 +248,7 @@ const supportsPreview = computed(() => {
           <td w-30 ws-nowrap pr5 text-right op50>
             Last modified
           </td>
-          <td>{{ new Date(asset.mtime).toLocaleString() }} <span op70>({{ timeago }})</span></td>
+          <td>{{ new Date(asset.mtime).toLocaleString() }} <span op70>({{ timeAgo }})</span></td>
         </tr>
       </tbody>
     </table>
@@ -202,9 +261,15 @@ const supportsPreview = computed(() => {
       <div x-divider />
     </div>
     <div flex="~ gap2 wrap">
-      <NButton :to="asset.publicPath" download target="_blank" icon="carbon-download">
+      <NButton :to="asset.publicPath" download target="_blank" icon="carbon-download" n="green">
         Download
       </NButton>
+      <NButton icon="carbon-text-annotation-toggle" n="blue" @click="renameDialog = !renameDialog">
+        Rename
+      </NButton>
+      <NButton icon="carbon-delete" n="red" @click="deleteDialog = !deleteDialog">
+        Delete
+      </NButton>
       <NButton v-if="asset.type === 'image'" disabled icon="carbon-image-service">
         Optimize image (Coming soon)
       </NButton>
@@ -219,4 +284,32 @@ const supportsPreview = computed(() => {
       :code-snippets="codeSnippets"
     />
   </div>
+  <NDialog v-model="deleteDialog">
+    <div flex="~ col gap-4" min-h-full w-full of-hidden p8>
+      <span>
+        Are you sure you want to delete this asset?
+      </span>
+      <div flex="~ gap2 wrap justify-center">
+        <NButton icon="carbon-close" @click="deleteDialog = false">
+          Cancel
+        </NButton>
+        <NButton icon="carbon-delete" n="red" @click="deleteAsset">
+          Delete
+        </NButton>
+      </div>
+    </div>
+  </NDialog>
+  <NDialog v-model="renameDialog">
+    <div flex="~ col gap-4" min-h-full w-full of-hidden p8>
+      <NTextInput v-model="newName" placeholder="New name" n="blue" />
+      <div flex="~ gap2 wrap justify-center">
+        <NButton icon="carbon-close" @click="renameDialog = false">
+          Cancel
+        </NButton>
+        <NButton icon="carbon-text-annotation-toggle" n="blue" @click="renameAsset">
+          Rename
+        </NButton>
+      </div>
+    </div>
+  </NDialog>
 </template>

packages/devtools/client/pages/modules/assets.vue

@@ -130,7 +130,7 @@ const navbar = ref<HTMLElement>()
       :navbar="navbar"
       @close="selected = undefined"
     >
-      <AssetDetails v-if="selected" :asset="selected" />
+      <AssetDetails v-if="selected" v-model="selected" />
     </DrawerRight>
   </div>
 </template>

packages/devtools/src/server-rpc/assets.ts

@@ -114,5 +114,18 @@ export function setupAssetsRPC({ nuxt, ensureDevAuthToken, refresh }: NuxtDevtoo
         }),
       )
     },
+    async deleteStaticAsset(token: string, path: string) {
+      await ensureDevAuthToken(token)
+
+      return await fsp.unlink(path)
+    },
+    async renameStaticAsset(token: string, oldPath: string, newPath: string) {
+      await ensureDevAuthToken(token)
+
+      const exist = cache?.find(asset => asset.filePath === newPath)
+      if (exist)
+        throw new Error(`File ${newPath} already exists`)
+      return await fsp.rename(oldPath, newPath)
+    },
   } satisfies Partial<ServerFunctions>
 }