From 2e039a7c3371e9d097071c8f01b76e2d05096415 Mon Sep 17 00:00:00 2001
From: Duncan McClean <duncan@duncanmcclean.com>
Date: Tue, 20 May 2025 10:33:05 +0100
Subject: [PATCH 01/23] One asset container at a time.

---
 .../js/components/assets/AssetManager.vue     |  2 +-
 .../js/components/assets/Browser/Browser.vue  | 44 +++++--------------
 2 files changed, 13 insertions(+), 33 deletions(-)

diff --git a/resources/js/components/assets/AssetManager.vue b/resources/js/components/assets/AssetManager.vue
index 24d2ecba9e2..d5773675b88 100644
--- a/resources/js/components/assets/AssetManager.vue
+++ b/resources/js/components/assets/AssetManager.vue
@@ -3,7 +3,7 @@
         ref="browser"
         :can-create-containers="canCreateContainers"
         :create-container-url="createContainerUrl"
-        :initial-container="container"
+        :container="container"
         :initial-per-page="$config.get('paginationSize')"
         :initial-editing-asset-id="initialEditingAssetId"
         :selected-path="path"
diff --git a/resources/js/components/assets/Browser/Browser.vue b/resources/js/components/assets/Browser/Browser.vue
index bf374e44350..336f8ac6fee 100644
--- a/resources/js/components/assets/Browser/Browser.vue
+++ b/resources/js/components/assets/Browser/Browser.vue
@@ -165,7 +165,7 @@ export default {
         autoselectUploads: Boolean,
         canCreateContainers: Boolean,
         createContainerUrl: String,
-        initialContainer: Object,
+        container: Object,
         initialEditingAssetId: String,
         maxFiles: Number,
         queryScopes: Array,
@@ -188,7 +188,6 @@ export default {
                 },
             ],
             containers: [],
-            container: {},
             initializing: true,
             loading: true,
             assets: [],
@@ -202,8 +201,8 @@ export default {
             page: 1,
             preferencesPrefix: null,
             meta: {},
-            sortColumn: this.initialContainer.sort_field,
-            sortDirection: this.initialContainer.sort_direction,
+            sortColumn: this.container.sort_field,
+            sortDirection: this.container.sort_direction,
             mode: 'table',
             actionUrl: null,
             folderActionUrl: null,
@@ -215,7 +214,7 @@ export default {
 
     computed: {
         actionContext() {
-            return { container: this.selectedContainer };
+            return { container: this.container.id };
         },
 
         canCreateFolders() {
@@ -276,10 +275,6 @@ export default {
             return this.selectedAssets.length >= this.maxFiles;
         },
 
-        selectedContainer() {
-            return typeof this.initialContainer === 'object' ? this.initialContainer.id : this.initialContainer;
-        },
-
         showAssetEditor() {
             return Boolean(this.editedAssetId);
         },
@@ -309,29 +304,25 @@ export default {
         },
     },
 
-    mounted() {
-        this.loadContainers();
-    },
-
     created() {
         this.$events.$on('editor-action-started', this.actionStarted);
         this.$events.$on('editor-action-completed', this.actionCompleted);
     },
 
+    mounted() {
+        this.initializing = true;
+        this.preferencesPrefix = `assets.${this.container.id}`;
+        this.mode = this.getPreference('mode') || 'table';
+        this.setInitialPerPage();
+        this.loadAssets();
+    },
+
     unmounted() {
         this.$events.$off('editor-action-started', this.actionStarted);
         this.$events.$off('editor-action-completed', this.actionCompleted);
     },
 
     watch: {
-        container(container) {
-            this.initializing = true;
-            this.preferencesPrefix = `assets.${container.id}`;
-            this.mode = this.getPreference('mode') || 'table';
-            this.setInitialPerPage();
-            this.loadAssets();
-        },
-
         mode(mode) {
             this.setPreference('mode', mode == 'table' ? null : mode);
         },
@@ -344,10 +335,6 @@ export default {
             this.$emit('navigated', this.container, path);
         },
 
-        initialContainer() {
-            this.container = this.initialContainer;
-        },
-
         initializing(isInitializing, wasInitializing) {
             if (wasInitializing && this.autofocusSearch) {
                 this.$nextTick(() => this.$refs.search.focus());
@@ -491,13 +478,6 @@ export default {
                 });
         },
 
-        loadContainers() {
-            this.$axios.get(cp_url('asset-containers')).then((response) => {
-                this.containers = keyBy(response.data, 'id');
-                this.container = this.containers[this.selectedContainer];
-            });
-        },
-
         openFileBrowser() {
             this.$refs.uploader.browse();
         },

From 01337e5f0181ae5e311959dfe30f5e662b3e7c68 Mon Sep 17 00:00:00 2001
From: Duncan McClean <duncan@duncanmcclean.com>
Date: Tue, 20 May 2025 10:47:18 +0100
Subject: [PATCH 02/23] Use new dropdown components

---
 .../js/components/assets/Browser/Browser.vue  | 44 +++++++++++++------
 1 file changed, 30 insertions(+), 14 deletions(-)

diff --git a/resources/js/components/assets/Browser/Browser.vue b/resources/js/components/assets/Browser/Browser.vue
index 336f8ac6fee..2ec4a1165b4 100644
--- a/resources/js/components/assets/Browser/Browser.vue
+++ b/resources/js/components/assets/Browser/Browser.vue
@@ -1,19 +1,35 @@
 <template>
     <div class="min-h-screen" ref="browser" @keydown.shift="shiftDown" @keyup="clearShift">
         <Header :title="__(container.title)" icon="assets">
-            <dropdown-list v-if="container.can_edit || container.can_delete || container.can_create">
-                <dropdown-item v-if="canCreateContainers" v-text="__('Create Container')" :redirect="createContainerUrl" />
-                <dropdown-item v-if="container.can_edit" v-text="__('Edit Container')" :redirect="container.edit_url" />
-                <dropdown-item v-text="__('Edit Blueprint')" :redirect="container.blueprint_url" />
-                <dropdown-item v-if="container.can_delete" class="warning" @click="$refs.deleter.confirm()">
-                    {{ __('Delete Container') }}
-                    <resource-deleter
-                        ref="deleter"
-                        :resource-title="__(container.title)"
-                        :route="container.delete_url"
+            <Dropdown v-if="container.can_edit || container.can_delete || container.can_create">
+                <DropdownMenu>
+                    <DropdownItem
+                        v-if="canCreateContainers"
+                        :text="__('Create Container')"
+                        :href="createContainerUrl"
                     />
-                </dropdown-item>
-            </dropdown-list>
+                    <DropdownItem
+                        v-if="container.can_edit"
+                        :text="__('Edit Container')"
+                        :href="container.edit_url"
+                    />
+                    <DropdownItem
+                        :text="__('Edit Blueprint')"
+                        :href="container.blueprint_url"
+                    />
+                    <DropdownItem
+                        v-if="container.can_delete"
+                        :text="__('Delete Container')"
+                        @click="$event.preventDefault(); $refs.deleter.confirm()"
+                    />
+                </DropdownMenu>
+            </Dropdown>
+
+            <resource-deleter
+                ref="deleter"
+                :resource-title="__(container.title)"
+                :route="container.delete_url"
+            />
 
             <Button v-if="canUpload" :text="__('Upload')" icon="upload" @click="openFileBrowser" />
             <Button v-if="canCreateFolders" :text="__('Create Folder')" icon="folder-add" @click="creatingFolder = true" />
@@ -152,12 +168,12 @@ import Uploader from '../Uploader.vue';
 import Uploads from '../Uploads.vue';
 import HasActions from '../../data-list/HasActions';
 import { keyBy, sortBy } from 'lodash-es';
-import { Header, Button } from '@statamic/ui';
+import { Header, Button, Dropdown, DropdownItem, DropdownMenu } from '@statamic/ui';
 
 export default {
     mixins: [HasActions, HasPagination, HasPreferences],
 
-    components: { AssetThumbnail, AssetEditor, Uploader, Uploads, Grid, Table, Header, Button },
+    components: { DropdownMenu, DropdownItem, Dropdown, AssetThumbnail, AssetEditor, Uploader, Uploads, Grid, Table, Header, Button },
 
     props: {
         allowSelectingExistingUpload: Boolean,

From e372def328cb308fdf7f443b1a8c62cb21dd8513 Mon Sep 17 00:00:00 2001
From: Duncan McClean <duncan@duncanmcclean.com>
Date: Tue, 20 May 2025 10:49:56 +0100
Subject: [PATCH 03/23] Prevent warnings about `actionOpened`

---
 resources/js/components/assets/Browser/Browser.vue | 1 -
 resources/js/components/assets/Browser/Grid.vue    | 1 +
 2 files changed, 1 insertion(+), 1 deletion(-)

diff --git a/resources/js/components/assets/Browser/Browser.vue b/resources/js/components/assets/Browser/Browser.vue
index 2ec4a1165b4..bcdfbfa6fac 100644
--- a/resources/js/components/assets/Browser/Browser.vue
+++ b/resources/js/components/assets/Browser/Browser.vue
@@ -224,7 +224,6 @@ export default {
             folderActionUrl: null,
             shifting: false,
             lastItemClicked: null,
-            actionOpened: null,
         };
     },
 
diff --git a/resources/js/components/assets/Browser/Grid.vue b/resources/js/components/assets/Browser/Grid.vue
index 73e9f30b876..fdf95cbec34 100644
--- a/resources/js/components/assets/Browser/Grid.vue
+++ b/resources/js/components/assets/Browser/Grid.vue
@@ -161,6 +161,7 @@ export default {
 
     data() {
         return {
+            actionOpened: null,
             thumbnailSize: 200,
             newFolderName: null,
         };

From fb5f791bda032dbb85e6f272ae9268756e231437 Mon Sep 17 00:00:00 2001
From: Duncan McClean <duncan@duncanmcclean.com>
Date: Tue, 20 May 2025 11:12:47 +0100
Subject: [PATCH 04/23] wip

---
 resources/js/components/assets/AssetManager.vue      | 3 +--
 resources/views/assets/browse.blade.php              | 2 +-
 src/Http/Controllers/CP/Assets/BrowserController.php | 2 ++
 3 files changed, 4 insertions(+), 3 deletions(-)

diff --git a/resources/js/components/assets/AssetManager.vue b/resources/js/components/assets/AssetManager.vue
index d5773675b88..e99ab90b74c 100644
--- a/resources/js/components/assets/AssetManager.vue
+++ b/resources/js/components/assets/AssetManager.vue
@@ -18,7 +18,7 @@
 <script>
 export default {
     props: {
-        initialContainer: Object,
+        container: Object,
         initialPath: String,
         initialEditingAssetId: String,
         actions: Array,
@@ -28,7 +28,6 @@ export default {
 
     data() {
         return {
-            container: this.initialContainer,
             path: this.initialPath,
             selectedAssets: [],
         };
diff --git a/resources/views/assets/browse.blade.php b/resources/views/assets/browse.blade.php
index 5ce5c1d4981..8c2d203c693 100644
--- a/resources/views/assets/browse.blade.php
+++ b/resources/views/assets/browse.blade.php
@@ -8,7 +8,7 @@
 
 @section('content')
     <asset-manager
-        :initial-container="{{ json_encode($container) }}"
+        :container="{{ json_encode($container) }}"
         :can-create-containers="{{ Statamic\Support\Str::bool($user->can('create', \Statamic\Contracts\Assets\AssetContainer::class)) }}"
         create-container-url="{{ cp_route('asset-containers.create') }}"
         initial-path="{{ $folder }}"
diff --git a/src/Http/Controllers/CP/Assets/BrowserController.php b/src/Http/Controllers/CP/Assets/BrowserController.php
index f394ff73858..d155771b92a 100644
--- a/src/Http/Controllers/CP/Assets/BrowserController.php
+++ b/src/Http/Controllers/CP/Assets/BrowserController.php
@@ -44,6 +44,8 @@ public function show($container, $path = '/')
                 'blueprint_url' => cp_route('asset-containers.blueprint.edit', $container->handle()),
                 'can_edit' => User::current()->can('edit', $container),
                 'can_delete' => User::current()->can('delete', $container),
+                'allow_uploads' => $container->allowUploads(),
+                'create_folders' => $container->createFolders(),
                 'sort_field' => $container->sortField(),
                 'sort_direction' => $container->sortDirection(),
             ],

From d3db98a8c9f337c4a87e0add02662d6dad07f11f Mon Sep 17 00:00:00 2001
From: Duncan McClean <duncan@duncanmcclean.com>
Date: Tue, 20 May 2025 11:13:21 +0100
Subject: [PATCH 05/23] Move new folder events into `sharedAssetEvents` object

---
 resources/js/components/assets/Browser/Browser.vue | 7 ++-----
 1 file changed, 2 insertions(+), 5 deletions(-)

diff --git a/resources/js/components/assets/Browser/Browser.vue b/resources/js/components/assets/Browser/Browser.vue
index bcdfbfa6fac..1571c4e965d 100644
--- a/resources/js/components/assets/Browser/Browser.vue
+++ b/resources/js/components/assets/Browser/Browser.vue
@@ -93,10 +93,7 @@
                                 v-on="sharedAssetEvents"
                                 :columns="columns"
                                 :loading="loading"
-                                :mode="mode"
                                 @sorted="sorted"
-                                @create-folder="createFolder"
-                                @cancel-creating-folder="creatingFolder = false"
                             />
 
                             <!-- Grid Mode -->
@@ -107,8 +104,6 @@
                                 v-on="sharedAssetEvents"
                                 :assets="assets"
                                 :selected-assets="selectedAssets"
-                                @create-folder="createFolder"
-                                @cancel-creating-folder="creatingFolder = false"
                                 @toggle-selection="toggleSelection"
                             >
                                 <template #footer>
@@ -315,6 +310,8 @@ export default {
                 'edit': this.edit,
                 'edit-asset': (event) => this.$emit('edit-asset', event),
                 'select-folder': this.selectFolder,
+                'create-folder': this.createFolder,
+                'cancel-creating-folder': () => (this.creatingFolder = false),
             };
         },
     },

From dc6e73319236e3a8a8789e57827358a583eb33e8 Mon Sep 17 00:00:00 2001
From: Duncan McClean <duncan@duncanmcclean.com>
Date: Tue, 20 May 2025 11:16:42 +0100
Subject: [PATCH 06/23] Do away with unused asset container index view

It doesn't look like we link to it anywhere and it's actually broken on v5, so let's get rid of it.

Keeping the endpoing since we *do* use it via AJAX.
---
 .../views/assets/containers/index.blade.php   | 22 -------------------
 .../CP/Assets/AssetContainersController.php   | 10 +--------
 .../ListAssetContainersTest.php               | 17 --------------
 3 files changed, 1 insertion(+), 48 deletions(-)
 delete mode 100644 resources/views/assets/containers/index.blade.php

diff --git a/resources/views/assets/containers/index.blade.php b/resources/views/assets/containers/index.blade.php
deleted file mode 100644
index aebe58a0972..00000000000
--- a/resources/views/assets/containers/index.blade.php
+++ /dev/null
@@ -1,22 +0,0 @@
-@php
-    use function Statamic\trans as __;
-@endphp
-
-@extends('statamic::layout')
-@section('title', __('Asset Containers'))
-
-@section('content')
-    <div class="mb-6 flex">
-        <h1 class="flex-1">{{ __('Asset Containers') }}</h1>
-
-        @can('create', 'Statamic\Contracts\Assets\AssetContainer')
-            <a href="{{ cp_route('asset-containers.create') }}" class="btn">{{ __('Create Asset Container') }}</a>
-        @endcan
-    </div>
-
-    <asset-container-list
-        :initial-rows="{{ json_encode($containers) }}"
-        :columns="{{ json_encode($columns) }}"
-        :visible-columns="{{ json_encode($visibleColumns) }}"
-    ></asset-container-list>
-@endsection
diff --git a/src/Http/Controllers/CP/Assets/AssetContainersController.php b/src/Http/Controllers/CP/Assets/AssetContainersController.php
index 28e1995fe0f..d03fb29629f 100644
--- a/src/Http/Controllers/CP/Assets/AssetContainersController.php
+++ b/src/Http/Controllers/CP/Assets/AssetContainersController.php
@@ -38,15 +38,7 @@ public function index(Request $request)
             ];
         })->values();
 
-        if ($request->wantsJson()) {
-            return $containers;
-        }
-
-        return view('statamic::assets.containers.index', [
-            'containers' => $containers->all(),
-            'columns' => ['title'],
-            'visibleColumns' => ['title'],
-        ]);
+        return $containers;
     }
 
     public function edit($container)
diff --git a/tests/Feature/AssetContainers/ListAssetContainersTest.php b/tests/Feature/AssetContainers/ListAssetContainersTest.php
index 71a96c8fd85..8b2dd4a51c8 100644
--- a/tests/Feature/AssetContainers/ListAssetContainersTest.php
+++ b/tests/Feature/AssetContainers/ListAssetContainersTest.php
@@ -30,23 +30,6 @@ public function it_lists_containers_you_have_access_to_when_requested_as_json()
             ->assertJson($this->containerArray());
     }
 
-    #[Test]
-    public function it_loads_a_view_when_requested_normally()
-    {
-        $this->setTestRoles(['test' => ['access cp', 'view two assets', 'view three assets']]);
-        $user = User::make()->assignRole('test')->save();
-        AssetContainer::make('one')->save();
-        AssetContainer::make('two')->save();
-        AssetContainer::make('three')->save();
-
-        $this
-            ->actingAs($user)
-            ->get(cp_route('asset-containers.index'))
-            ->assertSuccessful()
-            ->assertViewIs('statamic::assets.containers.index')
-            ->assertViewHas('containers', $this->containerArray());
-    }
-
     public function containerArray()
     {
         return [

From b2ee3eb0ffb5217000aed92b7c0f92ba989df61f Mon Sep 17 00:00:00 2001
From: Duncan McClean <duncan@duncanmcclean.com>
Date: Tue, 20 May 2025 11:19:24 +0100
Subject: [PATCH 07/23] We won't be navigating between containers anymore.

---
 resources/js/components/assets/AssetManager.vue    | 5 ++---
 resources/js/components/assets/Browser/Browser.vue | 4 ++--
 2 files changed, 4 insertions(+), 5 deletions(-)

diff --git a/resources/js/components/assets/AssetManager.vue b/resources/js/components/assets/AssetManager.vue
index e99ab90b74c..3d4b078307b 100644
--- a/resources/js/components/assets/AssetManager.vue
+++ b/resources/js/components/assets/AssetManager.vue
@@ -59,10 +59,9 @@ export default {
         },
 
         /**
-         * When a user has navigated to another folder or container
+         * When a user has navigated to another folder.
          */
-        navigate(container, path) {
-            this.container = container;
+        navigate(path) {
             this.path = path;
             this.pushState();
 
diff --git a/resources/js/components/assets/Browser/Browser.vue b/resources/js/components/assets/Browser/Browser.vue
index 1571c4e965d..c7ed797398c 100644
--- a/resources/js/components/assets/Browser/Browser.vue
+++ b/resources/js/components/assets/Browser/Browser.vue
@@ -344,7 +344,7 @@ export default {
                 ? [this.path, this.editedAssetBasename].filter((value) => value != '/').join('/') + '/edit'
                 : this.path;
 
-            this.$emit('navigated', this.container, path);
+            this.$emit('navigated', path);
         },
 
         initializing(isInitializing, wasInitializing) {
@@ -499,7 +499,7 @@ export default {
             this.path = path;
             this.page = 1;
 
-            this.$emit('navigated', this.container, this.path);
+            this.$emit('navigated', this.path);
         },
 
         selectRange(from, to) {

From d786cb2626d68200d33e8f4542d0457aaac8b00a Mon Sep 17 00:00:00 2001
From: Duncan McClean <duncan@duncanmcclean.com>
Date: Tue, 20 May 2025 12:42:18 +0100
Subject: [PATCH 08/23] Don't keep track of container here. It never changes.

---
 resources/js/components/assets/AssetManager.vue | 1 -
 1 file changed, 1 deletion(-)

diff --git a/resources/js/components/assets/AssetManager.vue b/resources/js/components/assets/AssetManager.vue
index 3d4b078307b..cf0a4a2558a 100644
--- a/resources/js/components/assets/AssetManager.vue
+++ b/resources/js/components/assets/AssetManager.vue
@@ -48,7 +48,6 @@ export default {
             window.history.replaceState({ container: { ...this.container }, path: this.path }, '');
 
             window.onpopstate = (e) => {
-                this.container = e.state.container;
                 this.path = e.state.path;
             };
         },

From e875cd72a6fd49f9c45e4b3094418351bfe95d7f Mon Sep 17 00:00:00 2001
From: Duncan McClean <duncan@duncanmcclean.com>
Date: Tue, 20 May 2025 14:12:23 +0100
Subject: [PATCH 09/23] Rename thumbnail size preference key

It should be nested under the `assets` key (like columns, sort direction, etc).

It should also be in snake case.
---
 resources/js/components/assets/Browser/Grid.vue | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/resources/js/components/assets/Browser/Grid.vue b/resources/js/components/assets/Browser/Grid.vue
index fdf95cbec34..565ecbb2972 100644
--- a/resources/js/components/assets/Browser/Grid.vue
+++ b/resources/js/components/assets/Browser/Grid.vue
@@ -170,13 +170,13 @@ export default {
     watch: {
         thumbnailSize: {
             handler: debounce(function(size) {
-                this.$preferences.set('asset-browser-thumbnail-size', size);
+                this.$preferences.set('assets.browser_thumbnail_size', size);
             }, 300)
         }
     },
 
     mounted() {
-        const savedSize = this.$preferences.get('asset-browser-thumbnail-size');
+        const savedSize = this.$preferences.get('assets.browser_thumbnail_size');
         if (savedSize) this.thumbnailSize = savedSize;
     },
 

From 6be4505e453b25bb9a952b195b30e5d0224f657a Mon Sep 17 00:00:00 2001
From: Duncan McClean <duncan@duncanmcclean.com>
Date: Tue, 20 May 2025 14:24:42 +0100
Subject: [PATCH 10/23] Ensure toggle group always has a value.

Otherwise, you could end up with no selected mode in the asset browser.
---
 resources/js/components/ui/Toggle/Group.vue | 9 ++++++++-
 1 file changed, 8 insertions(+), 1 deletion(-)

diff --git a/resources/js/components/ui/Toggle/Group.vue b/resources/js/components/ui/Toggle/Group.vue
index c32ecba7d30..ca4d9d763e5 100644
--- a/resources/js/components/ui/Toggle/Group.vue
+++ b/resources/js/components/ui/Toggle/Group.vue
@@ -51,15 +51,22 @@ const groupClasses = cva({
 })({
     notGhost: props.variant !== 'ghost',
 });
+
+function updateModelValue(value) {
+    if (value) {
+        emit('update:modelValue', value);
+    }
+}
 </script>
 
 <template>
     <WithField :label :description :required>
         <ToggleGroupRoot
-            v-model="toggleState"
             :type="multiple ? 'multiple' : 'single'"
             :class="groupClasses"
             data-ui-toggle-group
+            :model-value="toggleState"
+            @update:model-value="updateModelValue"
         >
             <slot />
         </ToggleGroupRoot>

From 33fa7848b940aa79a0627f340c76b71698f58b06 Mon Sep 17 00:00:00 2001
From: Duncan McClean <duncan@duncanmcclean.com>
Date: Tue, 20 May 2025 14:34:44 +0100
Subject: [PATCH 11/23] Ability to navigate between previous/next assets

Using "cmd + left arrow" and "cmd + right arrow" (or ctrl on Windows)
---
 .../js/components/assets/Browser/Browser.vue  | 70 +++++++++++++++++--
 .../js/components/assets/Editor/Editor.vue    | 29 +++++++-
 2 files changed, 90 insertions(+), 9 deletions(-)

diff --git a/resources/js/components/assets/Browser/Browser.vue b/resources/js/components/assets/Browser/Browser.vue
index c7ed797398c..1652dc70581 100644
--- a/resources/js/components/assets/Browser/Browser.vue
+++ b/resources/js/components/assets/Browser/Browser.vue
@@ -146,6 +146,8 @@
             v-if="showAssetEditor"
             :id="editedAssetId"
             :read-only="!canEdit"
+            @previous="editPreviousAsset"
+            @next="editNextAsset"
             @closed="closeAssetEditor"
             @saved="assetSaved"
         />
@@ -385,13 +387,7 @@ export default {
             this.loadAssets();
         },
 
-        assetDeleted() {
-            this.closeAssetEditor();
-            this.loadAssets();
-        },
-
         assetSaved() {
-            this.closeAssetEditor();
             this.loadAssets();
         },
 
@@ -399,6 +395,66 @@ export default {
             this.shifting = false;
         },
 
+        async editPreviousAsset() {
+            let currentAssetIndex = this.assets.findIndex((asset) => asset.id === this.editedAssetId);
+
+            // When we're editing the first asset on the page, navigating to the previous asset
+            // requires us to load the previous page of assets, if there is one.
+            if (currentAssetIndex === 0) {
+                if (this.page > 1) {
+                    this.page = this.page - 1;
+                    await this.loadAssets();
+
+                    if (this.assets.length > 0) {
+                        this.editedAssetId = null;
+
+                        this.$nextTick(() => {
+                            this.editedAssetId = this.assets.slice(-1)[0].id;
+                        });
+                    }
+                }
+
+                this.editedAssetId = null;
+                return;
+            }
+
+            this.editedAssetId = null;
+
+            this.$nextTick(() => {
+                this.editedAssetId = this.assets.slice(currentAssetIndex - 1, currentAssetIndex)[0].id;
+            });
+        },
+
+        async editNextAsset() {
+            let currentAssetIndex = this.assets.findIndex((asset) => asset.id === this.editedAssetId);
+
+            // When we're editing the last asset on the page, navigating to the next asset
+            // requires us to load the next page of assets, if there is one.
+            if (currentAssetIndex === this.assets.length - 1) {
+                if (this.meta.last_page > this.page) {
+                    this.page = this.page + 1;
+                    await this.loadAssets();
+
+                    if (this.assets.length > 0) {
+                        this.editedAssetId = null;
+
+                        this.$nextTick(() => {
+                            this.editedAssetId = this.assets[0].id;
+                        });
+                    }
+                }
+
+                this.editedAssetId = null;
+                return;
+            }
+
+            this.editedAssetId = null;
+
+            this.$nextTick(() => {
+                this.editedAssetId = this.assets.slice(currentAssetIndex + 1, currentAssetIndex + 2)[0].id;
+            });
+        },
+
         closeAssetEditor() {
             this.editedAssetId = null;
         },
@@ -461,7 +517,7 @@ export default {
                   ).replace(/\/$/, '')
                 : cp_url(`assets/browse/folders/${this.container.id}/${this.path || ''}`).replace(/\/$/, '');
 
-            this.$axios
+            return this.$axios
                 .get(url, { params: this.parameters })
                 .then((response) => {
                     const data = response.data;
diff --git a/resources/js/components/assets/Editor/Editor.vue b/resources/js/components/assets/Editor/Editor.vue
index 4eb6c9a0cb9..343fa0bb14c 100644
--- a/resources/js/components/assets/Editor/Editor.vue
+++ b/resources/js/components/assets/Editor/Editor.vue
@@ -260,7 +260,7 @@
                         <button type="button" class="btn" @click="close">
                             {{ __('Cancel') }}
                         </button>
-                        <button type="button" class="btn-primary" @click="save" v-if="!readOnly">
+                        <button type="button" class="btn-primary" @click="saveAndClose" v-if="!readOnly">
                             {{ __('Save') }}
                         </button>
                     </div>
@@ -296,7 +296,7 @@ import HasHiddenFields from '../../publish/HasHiddenFields';
 import { pick, flatten } from 'lodash-es';
 
 export default {
-    emits: ['saved', 'closed', 'action-completed'],
+    emits: ['previous', 'next', 'saved', 'closed', 'action-completed'],
 
     mixins: [HasHiddenFields],
 
@@ -392,6 +392,12 @@ export default {
 
     mounted() {
         this.load();
+
+        window.addEventListener('keydown', this.keydown);
+    },
+
+    beforeUnmount() {
+        window.removeEventListener('keydown', this.keydown);
     },
 
     events: {
@@ -450,6 +456,18 @@ export default {
             });
         },
 
+        keydown(event) {
+            if ((event.metaKey || event.ctrlKey) && event.key === 'ArrowLeft') {
+                this.save();
+                this.$emit('previous');
+            }
+
+            if ((event.metaKey || event.ctrlKey) && event.key === 'ArrowRight') {
+                this.save();
+                this.$emit('next');
+            }
+        },
+
         openFocalPointEditor() {
             this.showFocalPointEditor = true;
         },
@@ -464,6 +482,13 @@ export default {
             this.$dirty.add(this.publishContainer);
         },
 
+        // We only want to close when clicking the save button, not when saving when navigating between prev/next assets.
+        // TODO: Can likely be refactored when we implement the new publish form components.
+        saveAndClose() {
+            this.save();
+            this.close();
+        },
+
         save() {
             this.saving = true;
             const url = cp_url(`assets/${utf8btoa(this.id)}`);

From ce865814551c3ea8e09a04a1edb22c39c26fe29f Mon Sep 17 00:00:00 2001
From: Duncan McClean <duncan@duncanmcclean.com>
Date: Tue, 20 May 2025 14:47:35 +0100
Subject: [PATCH 12/23] Ensure folders can be created in Grid mode, when no
 existing folders exist.

---
 resources/js/components/assets/Browser/Grid.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/resources/js/components/assets/Browser/Grid.vue b/resources/js/components/assets/Browser/Grid.vue
index 565ecbb2972..929078f4df5 100644
--- a/resources/js/components/assets/Browser/Grid.vue
+++ b/resources/js/components/assets/Browser/Grid.vue
@@ -7,7 +7,7 @@
 
         <ui-card class="space-y-8">
             <!-- Folders -->
-            <section class="folder-grid-listing" v-if="folders.length">
+            <section class="folder-grid-listing" v-if="folders.length || creatingFolder">
                 <div
                     class="group/folder relative"
                     v-for="folder in folders"

From 9da783d32b19060b1166976626268318d970e924 Mon Sep 17 00:00:00 2001
From: Duncan McClean <duncan@duncanmcclean.com>
Date: Tue, 20 May 2025 15:46:52 +0100
Subject: [PATCH 13/23] Prevent the images themselves being dragged

---
 resources/js/components/assets/Browser/Grid.vue      | 1 +
 resources/js/components/assets/Browser/Thumbnail.vue | 2 ++
 2 files changed, 3 insertions(+)

diff --git a/resources/js/components/assets/Browser/Grid.vue b/resources/js/components/assets/Browser/Grid.vue
index 929078f4df5..71844595c27 100644
--- a/resources/js/components/assets/Browser/Grid.vue
+++ b/resources/js/components/assets/Browser/Grid.vue
@@ -79,6 +79,7 @@
                                                 v-if="asset.is_image"
                                                 :src="asset.thumbnail"
                                                 loading="lazy"
+                                                :draggable="false"
                                                 :class="{
                                                     'size-full p-4': asset.extension === 'svg',
                                                     'rounded-lg p-1': asset.orientation === 'square',
diff --git a/resources/js/components/assets/Browser/Thumbnail.vue b/resources/js/components/assets/Browser/Thumbnail.vue
index 1e8ae434ef2..41433718084 100644
--- a/resources/js/components/assets/Browser/Thumbnail.vue
+++ b/resources/js/components/assets/Browser/Thumbnail.vue
@@ -5,6 +5,7 @@
             :src="asset.thumbnail"
             class="asset-thumbnail mx-auto max-h-8 max-w-full rounded-sm"
             loading="lazy"
+            :draggable="false"
             :class="{ 'h-8 w-8 object-cover': square }"
         />
         <img
@@ -12,6 +13,7 @@
             :src="asset.url"
             class="asset-thumbnail mx-auto h-8 max-w-full rounded-sm"
             loading="lazy"
+            :draggable="false"
         />
         <file-icon v-else :extension="asset.extension" class="asset-thumbnail h-8 w-8 rounded-sm p-px" />
     </div>

From a24c92c2f6bca23812a9c99401779c14ab0a03b8 Mon Sep 17 00:00:00 2001
From: Duncan McClean <duncan@duncanmcclean.com>
Date: Tue, 20 May 2025 17:24:28 +0100
Subject: [PATCH 14/23] Drag & drop assets and folders in grid mode

---
 .../js/components/assets/Browser/Grid.vue     | 63 ++++++++++++++++++-
 1 file changed, 61 insertions(+), 2 deletions(-)

diff --git a/resources/js/components/assets/Browser/Grid.vue b/resources/js/components/assets/Browser/Grid.vue
index 71844595c27..8aab6a395f3 100644
--- a/resources/js/components/assets/Browser/Grid.vue
+++ b/resources/js/components/assets/Browser/Grid.vue
@@ -9,10 +9,16 @@
             <!-- Folders -->
             <section class="folder-grid-listing" v-if="folders.length || creatingFolder">
                 <div
-                    class="group/folder relative"
+                    data-folder
+                    v-if="!restrictFolderNavigation"
                     v-for="folder in folders"
                     :key="folder.path"
-                    v-if="!restrictFolderNavigation"
+                    class="group/folder relative"
+                    :draggable="true"
+                    @dragover.prevent
+                    @drop="handleDropOnFolder(folder)"
+                    @dragstart="draggingFolder = folder.path"
+                    @dragend="draggingFolder = null"
                 >
                     <Context>
                         <template #trigger>
@@ -69,7 +75,12 @@
                         <template #trigger>
                             <div class="asset-tile group relative" :class="{ 'bg-checkerboard': asset.can_be_transparent }">
                                 <button
+                                    data-asset
                                     class="size-full"
+                                    :draggable="true"
+                                    @dragover.prevent
+                                    @dragstart="draggingAsset = asset.id"
+                                    @dragend="draggingAsset = null"
                                     @click.stop="toggleSelection(asset.id, index, $event)"
                                     @dblclick.stop="$emit('edit-asset', asset)"
                                 >
@@ -141,6 +152,7 @@ import { Context, ContextMenu, ContextItem, ContextLabel, ContextSeparator, Edit
 
 export default {
     mixins: [AssetBrowserMixin],
+
     components: {
         ContextItem,
         ContextLabel,
@@ -154,6 +166,7 @@ export default {
         EditableRoot,
         Breadcrumbs,
     },
+
     props: {
         assets: { type: Array },
         selectedAssets: { type: Array },
@@ -165,6 +178,8 @@ export default {
             actionOpened: null,
             thumbnailSize: 200,
             newFolderName: null,
+            draggingAsset: null,
+            draggingFolder: null,
         };
     },
 
@@ -214,6 +229,50 @@ export default {
         clearNewFolderName() {
             this.newFolderName = null;
         },
+
+        handleDropOnFolder(destinationFolder) {
+            if (this.draggingAsset) {
+                let asset = this.assets.find((asset) => asset.id === this.draggingAsset);
+                let action = asset.actions.find((action) => action.handle === 'move_asset');
+
+                if (!action) {
+                    return;
+                }
+
+                const payload = {
+                    action: action.handle,
+                    context: action.context,
+                    selections: [this.draggingAsset],
+                    values: { folder: destinationFolder.path },
+                };
+
+                this.$axios
+                    .post(this.actionUrl, payload)
+                    .then(response => this.$emit('action-completed', true, response))
+                    .finally(() => this.draggingAsset = null);
+            }
+
+            if (this.draggingFolder) {
+                let folder = this.folders.find((folder) => folder.path === this.draggingFolder);
+                let action = folder.actions.find((action) => action.handle === 'move_asset_folder');
+
+                if (!action) {
+                    return;
+                }
+
+                const payload = {
+                    action: action.handle,
+                    context: action.context,
+                    selections: [this.draggingFolder],
+                    values: { folder: destinationFolder.path },
+                };
+
+                this.$axios
+                    .post(this.folderActionUrl, payload)
+                    .then(response => this.$emit('action-completed', true, response))
+                    .finally(() => this.draggingFolder = null);
+            }
+        },
     },
 };
 </script>

From 593f12e6b0bde53d95e3642181c7def1959edd46 Mon Sep 17 00:00:00 2001
From: Duncan McClean <duncan@duncanmcclean.com>
Date: Thu, 22 May 2025 15:56:49 +0100
Subject: [PATCH 15/23] Prevent upload overlay showing when dragging assets &
 folders

---
 resources/js/components/assets/Browser/Browser.vue |  4 +++-
 resources/js/components/assets/Browser/Grid.vue    | 10 +++++++++-
 2 files changed, 12 insertions(+), 2 deletions(-)

diff --git a/resources/js/components/assets/Browser/Browser.vue b/resources/js/components/assets/Browser/Browser.vue
index 1652dc70581..a1e31fb6b2d 100644
--- a/resources/js/components/assets/Browser/Browser.vue
+++ b/resources/js/components/assets/Browser/Browser.vue
@@ -49,7 +49,7 @@
             ref="uploader"
             :container="container.id"
             :path="path"
-            :enabled="canUpload"
+            :enabled="!preventDragging && canUpload"
             @updated="uploadsUpdated"
             @upload-complete="uploadCompleted"
             @error="uploadError"
@@ -221,6 +221,7 @@ export default {
             folderActionUrl: null,
             shifting: false,
             lastItemClicked: null,
+            preventDragging: false,
         };
     },
 
@@ -314,6 +315,7 @@ export default {
                 'select-folder': this.selectFolder,
                 'create-folder': this.createFolder,
                 'cancel-creating-folder': () => (this.creatingFolder = false),
+                'prevent-dragging': (preventDragging) => (this.preventDragging = preventDragging),
             };
         },
     },
diff --git a/resources/js/components/assets/Browser/Grid.vue b/resources/js/components/assets/Browser/Grid.vue
index 8aab6a395f3..8be7b63f90a 100644
--- a/resources/js/components/assets/Browser/Grid.vue
+++ b/resources/js/components/assets/Browser/Grid.vue
@@ -188,7 +188,15 @@ export default {
             handler: debounce(function(size) {
                 this.$preferences.set('assets.browser_thumbnail_size', size);
             }, 300)
-        }
+        },
+
+        draggingAsset() {
+            this.$emit('prevent-dragging', this.draggingAsset !== null);
+        },
+
+        draggingFolder() {
+            this.$emit('prevent-dragging', this.draggingFolder !== null);
+        },
     },
 
     mounted() {

From 971fd34f80a8987745b369f0691646b847886262 Mon Sep 17 00:00:00 2001
From: Duncan McClean <duncan@duncanmcclean.com>
Date: Thu, 22 May 2025 16:01:57 +0100
Subject: [PATCH 16/23] Remove data attributes. I never ended up using them.

---
 resources/js/components/assets/Browser/Grid.vue | 2 --
 1 file changed, 2 deletions(-)

diff --git a/resources/js/components/assets/Browser/Grid.vue b/resources/js/components/assets/Browser/Grid.vue
index 8be7b63f90a..4bb0cdea33e 100644
--- a/resources/js/components/assets/Browser/Grid.vue
+++ b/resources/js/components/assets/Browser/Grid.vue
@@ -9,7 +9,6 @@
             <!-- Folders -->
             <section class="folder-grid-listing" v-if="folders.length || creatingFolder">
                 <div
-                    data-folder
                     v-if="!restrictFolderNavigation"
                     v-for="folder in folders"
                     :key="folder.path"
@@ -75,7 +74,6 @@
                         <template #trigger>
                             <div class="asset-tile group relative" :class="{ 'bg-checkerboard': asset.can_be_transparent }">
                                 <button
-                                    data-asset
                                     class="size-full"
                                     :draggable="true"
                                     @dragover.prevent

From 1a57ba48408291fd4b0372b8b829e3eab494331e Mon Sep 17 00:00:00 2001
From: Duncan McClean <duncan@duncanmcclean.com>
Date: Thu, 22 May 2025 16:12:25 +0100
Subject: [PATCH 17/23] Dry up new folder stuff.

I didn't realise there was a mixin for this when I built it. Much nicer now.
---
 .../assets/Browser/AssetBrowserMixin.js           | 15 +++++++++++++++
 resources/js/components/assets/Browser/Grid.vue   | 10 ----------
 resources/js/components/assets/Browser/Table.vue  | 15 ---------------
 3 files changed, 15 insertions(+), 25 deletions(-)

diff --git a/resources/js/components/assets/Browser/AssetBrowserMixin.js b/resources/js/components/assets/Browser/AssetBrowserMixin.js
index 0ea81f5e0f4..153246f24a6 100644
--- a/resources/js/components/assets/Browser/AssetBrowserMixin.js
+++ b/resources/js/components/assets/Browser/AssetBrowserMixin.js
@@ -8,6 +8,13 @@ export default {
         folders: Array,
         path: String,
         restrictFolderNavigation: Boolean,
+        creatingFolder: Boolean,
+    },
+
+    data() {
+        return {
+            newFolderName: null,
+        }
     },
 
     methods: {
@@ -30,5 +37,13 @@ export default {
         selectFolder(path) {
             this.$emit('select-folder', path);
         },
+
+        focusNewFolderInput() {
+            this.$refs.newFolderInput?.edit();
+        },
+
+        clearNewFolderName() {
+            this.newFolderName = null;
+        },
     },
 };
diff --git a/resources/js/components/assets/Browser/Grid.vue b/resources/js/components/assets/Browser/Grid.vue
index 4bb0cdea33e..8d541da48c9 100644
--- a/resources/js/components/assets/Browser/Grid.vue
+++ b/resources/js/components/assets/Browser/Grid.vue
@@ -168,14 +168,12 @@ export default {
     props: {
         assets: { type: Array },
         selectedAssets: { type: Array },
-        creatingFolder: { type: Boolean },
     },
 
     data() {
         return {
             actionOpened: null,
             thumbnailSize: 200,
-            newFolderName: null,
             draggingAsset: null,
             draggingFolder: null,
         };
@@ -228,14 +226,6 @@ export default {
             this.$emit('toggle-selection', id, index, $event);
         },
 
-        focusNewFolderInput() {
-            this.$refs.newFolderInput?.edit();
-        },
-
-        clearNewFolderName() {
-            this.newFolderName = null;
-        },
-
         handleDropOnFolder(destinationFolder) {
             if (this.draggingAsset) {
                 let asset = this.assets.find((asset) => asset.id === this.draggingAsset);
diff --git a/resources/js/components/assets/Browser/Table.vue b/resources/js/components/assets/Browser/Table.vue
index be86df20a9a..e0c9e3df0b7 100644
--- a/resources/js/components/assets/Browser/Table.vue
+++ b/resources/js/components/assets/Browser/Table.vue
@@ -149,27 +149,12 @@ export default {
     props: {
         loading: Boolean,
         columns: Array,
-        creatingFolder: { type: Boolean },
-    },
-
-    data() {
-        return {
-            newFolderName: null,
-        };
     },
 
     methods: {
         sorted(column, direction) {
             this.$emit('sorted', column, direction);
         },
-
-        focusNewFolderInput() {
-            this.$refs.newFolderInput?.edit();
-        },
-
-        clearNewFolderName() {
-            this.newFolderName = null;
-        },
     },
 
     watch: {

From f344ddbb0820447e173697199f50f132fe1ba844 Mon Sep 17 00:00:00 2001
From: Duncan McClean <duncan@duncanmcclean.com>
Date: Thu, 22 May 2025 16:14:01 +0100
Subject: [PATCH 18/23] Use the same order between two asset browser
 components.

---
 resources/js/components/assets/Browser/Table.vue | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/resources/js/components/assets/Browser/Table.vue b/resources/js/components/assets/Browser/Table.vue
index e0c9e3df0b7..93b33bbc3be 100644
--- a/resources/js/components/assets/Browser/Table.vue
+++ b/resources/js/components/assets/Browser/Table.vue
@@ -132,6 +132,8 @@ import AssetBrowserMixin from './AssetBrowserMixin';
 import { Panel, Dropdown, DropdownMenu, DropdownItem, DropdownLabel, DropdownSeparator, Editable } from '@statamic/ui';
 
 export default {
+    mixins: [AssetBrowserMixin],
+
     components: {
         Editable,
         AssetThumbnail,
@@ -144,8 +146,6 @@ export default {
         DropdownSeparator,
     },
 
-    mixins: [AssetBrowserMixin],
-
     props: {
         loading: Boolean,
         columns: Array,

From e764448a38f323546ded42ce669f1317bbc28ecb Mon Sep 17 00:00:00 2001
From: Duncan McClean <duncan@duncanmcclean.com>
Date: Fri, 23 May 2025 12:43:40 +0100
Subject: [PATCH 19/23] Uncomment assets css

---
 resources/css/cp.css | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/resources/css/cp.css b/resources/css/cp.css
index 9ab90a8f5bc..5e98e47c76c 100644
--- a/resources/css/cp.css
+++ b/resources/css/cp.css
@@ -16,7 +16,7 @@
 
 /* Components */
 @import './components/array.css';
-/* @import './components/assets.css'; */
+@import './components/assets.css';
 @import './components/blueprints.css';
 @import './components/cards.css';
 @import './components/column-picker.css';

From 8616dc423eeb9c4ba88b6df21d14ff19e56644df Mon Sep 17 00:00:00 2001
From: Duncan McClean <duncan@duncanmcclean.com>
Date: Fri, 23 May 2025 13:19:20 +0100
Subject: [PATCH 20/23] Drag & drop assets and folders in table mode

---
 .../assets/Browser/AssetBrowserMixin.js       | 56 +++++++++++++++++++
 .../js/components/assets/Browser/Grid.vue     | 56 +------------------
 .../js/components/assets/Browser/Table.vue    | 23 +++++++-
 3 files changed, 78 insertions(+), 57 deletions(-)

diff --git a/resources/js/components/assets/Browser/AssetBrowserMixin.js b/resources/js/components/assets/Browser/AssetBrowserMixin.js
index 153246f24a6..2da47719697 100644
--- a/resources/js/components/assets/Browser/AssetBrowserMixin.js
+++ b/resources/js/components/assets/Browser/AssetBrowserMixin.js
@@ -14,9 +14,21 @@ export default {
     data() {
         return {
             newFolderName: null,
+            draggingAsset: null,
+            draggingFolder: null,
         }
     },
 
+    watch: {
+        draggingAsset() {
+            this.$emit('prevent-dragging', this.draggingAsset !== null);
+        },
+
+        draggingFolder() {
+            this.$emit('prevent-dragging', this.draggingFolder !== null);
+        },
+    },
+
     methods: {
         actionCompleted() {
             this.$emit('action-completed');
@@ -45,5 +57,49 @@ export default {
         clearNewFolderName() {
             this.newFolderName = null;
         },
+
+        handleFolderDrop(destinationFolder) {
+            if (this.draggingAsset) {
+                let asset = this.assets.find((asset) => asset.id === this.draggingAsset);
+                let action = asset.actions.find((action) => action.handle === 'move_asset');
+
+                if (!action) {
+                    return;
+                }
+
+                const payload = {
+                    action: action.handle,
+                    context: action.context,
+                    selections: [this.draggingAsset],
+                    values: { folder: destinationFolder.path },
+                };
+
+                this.$axios
+                    .post(this.actionUrl, payload)
+                    .then(response => this.$emit('action-completed', true, response))
+                    .finally(() => this.draggingAsset = null);
+            }
+
+            if (this.draggingFolder) {
+                let folder = this.folders.find((folder) => folder.path === this.draggingFolder);
+                let action = folder.actions.find((action) => action.handle === 'move_asset_folder');
+
+                if (!action) {
+                    return;
+                }
+
+                const payload = {
+                    action: action.handle,
+                    context: action.context,
+                    selections: [this.draggingFolder],
+                    values: { folder: destinationFolder.path },
+                };
+
+                this.$axios
+                    .post(this.folderActionUrl, payload)
+                    .then(response => this.$emit('action-completed', true, response))
+                    .finally(() => this.draggingFolder = null);
+            }
+        },
     },
 };
diff --git a/resources/js/components/assets/Browser/Grid.vue b/resources/js/components/assets/Browser/Grid.vue
index 8d541da48c9..bf0b5890954 100644
--- a/resources/js/components/assets/Browser/Grid.vue
+++ b/resources/js/components/assets/Browser/Grid.vue
@@ -15,7 +15,7 @@
                     class="group/folder relative"
                     :draggable="true"
                     @dragover.prevent
-                    @drop="handleDropOnFolder(folder)"
+                    @drop="handleFolderDrop(folder)"
                     @dragstart="draggingFolder = folder.path"
                     @dragend="draggingFolder = null"
                 >
@@ -174,8 +174,6 @@ export default {
         return {
             actionOpened: null,
             thumbnailSize: 200,
-            draggingAsset: null,
-            draggingFolder: null,
         };
     },
 
@@ -185,14 +183,6 @@ export default {
                 this.$preferences.set('assets.browser_thumbnail_size', size);
             }, 300)
         },
-
-        draggingAsset() {
-            this.$emit('prevent-dragging', this.draggingAsset !== null);
-        },
-
-        draggingFolder() {
-            this.$emit('prevent-dragging', this.draggingFolder !== null);
-        },
     },
 
     mounted() {
@@ -225,50 +215,6 @@ export default {
         toggleSelection(id, index, $event) {
             this.$emit('toggle-selection', id, index, $event);
         },
-
-        handleDropOnFolder(destinationFolder) {
-            if (this.draggingAsset) {
-                let asset = this.assets.find((asset) => asset.id === this.draggingAsset);
-                let action = asset.actions.find((action) => action.handle === 'move_asset');
-
-                if (!action) {
-                    return;
-                }
-
-                const payload = {
-                    action: action.handle,
-                    context: action.context,
-                    selections: [this.draggingAsset],
-                    values: { folder: destinationFolder.path },
-                };
-
-                this.$axios
-                    .post(this.actionUrl, payload)
-                    .then(response => this.$emit('action-completed', true, response))
-                    .finally(() => this.draggingAsset = null);
-            }
-
-            if (this.draggingFolder) {
-                let folder = this.folders.find((folder) => folder.path === this.draggingFolder);
-                let action = folder.actions.find((action) => action.handle === 'move_asset_folder');
-
-                if (!action) {
-                    return;
-                }
-
-                const payload = {
-                    action: action.handle,
-                    context: action.context,
-                    selections: [this.draggingFolder],
-                    values: { folder: destinationFolder.path },
-                };
-
-                this.$axios
-                    .post(this.folderActionUrl, payload)
-                    .then(response => this.$emit('action-completed', true, response))
-                    .finally(() => this.draggingFolder = null);
-            }
-        },
     },
 };
 </script>
diff --git a/resources/js/components/assets/Browser/Table.vue b/resources/js/components/assets/Browser/Table.vue
index 93b33bbc3be..ae119741cfe 100644
--- a/resources/js/components/assets/Browser/Table.vue
+++ b/resources/js/components/assets/Browser/Table.vue
@@ -1,6 +1,7 @@
 <template>
     <Panel class="relative overflow-x-auto overscroll-x-contain">
         <data-list-table
+            ref="dataListTable"
             :allow-bulk-actions="true"
             :loading="loading"
             :toggle-selection-on-row-click="true"
@@ -21,9 +22,15 @@
                     <td :colspan="columns.length" />
                 </tr>
                 <tr
+                    v-if="!restrictFolderNavigation"
                     v-for="(folder, i) in folders"
                     :key="folder.path"
-                    v-if="!restrictFolderNavigation"
+                    class="pointer-events-auto"
+                    :draggable="true"
+                    @dragover.prevent
+                    @drop="handleFolderDrop(folder)"
+                    @dragstart="draggingFolder = folder.path"
+                    @dragend="draggingFolder = null"
                 >
                     <td />
                     <td @click="selectFolder(folder.path)">
@@ -81,7 +88,13 @@
             </template>
 
             <template #cell-basename="{ row: asset, checkboxId }">
-                <div class="w-fit-content group flex items-center">
+                <div
+                    class="w-fit-content group flex items-center"
+                    :draggable="true"
+                    @dragover.prevent
+                    @dragstart="draggingAsset = asset.id"
+                    @dragend="draggingAsset = null"
+                >
                     <asset-thumbnail
                         :asset="asset"
                         :square="true"
@@ -151,6 +164,12 @@ export default {
         columns: Array,
     },
 
+    computed: {
+        assets() {
+            return this.$refs.dataListTable.rows;
+        },
+    },
+
     methods: {
         sorted(column, direction) {
             this.$emit('sorted', column, direction);

From dd03e60f27934003b5f3e2f6fddbfda7f94b72e2 Mon Sep 17 00:00:00 2001
From: Duncan McClean <duncan@duncanmcclean.com>
Date: Fri, 23 May 2025 14:37:14 +0100
Subject: [PATCH 21/23] Prevent moving assets & folders without permission

---
 .../js/components/assets/Browser/AssetBrowserMixin.js     | 8 ++++++++
 resources/js/components/assets/Browser/Grid.vue           | 4 ++--
 resources/js/components/assets/Browser/Table.vue          | 4 ++--
 3 files changed, 12 insertions(+), 4 deletions(-)

diff --git a/resources/js/components/assets/Browser/AssetBrowserMixin.js b/resources/js/components/assets/Browser/AssetBrowserMixin.js
index 2da47719697..3a346809118 100644
--- a/resources/js/components/assets/Browser/AssetBrowserMixin.js
+++ b/resources/js/components/assets/Browser/AssetBrowserMixin.js
@@ -58,6 +58,14 @@ export default {
             this.newFolderName = null;
         },
 
+        canMoveAsset(asset) {
+            return asset.actions.some((action) => action.handle === 'move_asset');
+        },
+
+        canMoveFolder(folder) {
+            return folder.actions.some((action) => action.handle === 'move_asset_folder');
+        },
+
         handleFolderDrop(destinationFolder) {
             if (this.draggingAsset) {
                 let asset = this.assets.find((asset) => asset.id === this.draggingAsset);
diff --git a/resources/js/components/assets/Browser/Grid.vue b/resources/js/components/assets/Browser/Grid.vue
index bf0b5890954..17954c3a3ca 100644
--- a/resources/js/components/assets/Browser/Grid.vue
+++ b/resources/js/components/assets/Browser/Grid.vue
@@ -13,7 +13,7 @@
                     v-for="folder in folders"
                     :key="folder.path"
                     class="group/folder relative"
-                    :draggable="true"
+                    :draggable="canMoveFolder(folder)"
                     @dragover.prevent
                     @drop="handleFolderDrop(folder)"
                     @dragstart="draggingFolder = folder.path"
@@ -75,7 +75,7 @@
                             <div class="asset-tile group relative" :class="{ 'bg-checkerboard': asset.can_be_transparent }">
                                 <button
                                     class="size-full"
-                                    :draggable="true"
+                                    :draggable="canMoveAsset(asset)"
                                     @dragover.prevent
                                     @dragstart="draggingAsset = asset.id"
                                     @dragend="draggingAsset = null"
diff --git a/resources/js/components/assets/Browser/Table.vue b/resources/js/components/assets/Browser/Table.vue
index ae119741cfe..36836ba0f12 100644
--- a/resources/js/components/assets/Browser/Table.vue
+++ b/resources/js/components/assets/Browser/Table.vue
@@ -26,7 +26,7 @@
                     v-for="(folder, i) in folders"
                     :key="folder.path"
                     class="pointer-events-auto"
-                    :draggable="true"
+                    :draggable="canMoveFolder(folder)"
                     @dragover.prevent
                     @drop="handleFolderDrop(folder)"
                     @dragstart="draggingFolder = folder.path"
@@ -90,7 +90,7 @@
             <template #cell-basename="{ row: asset, checkboxId }">
                 <div
                     class="w-fit-content group flex items-center"
-                    :draggable="true"
+                    :draggable="canMoveAsset(asset)"
                     @dragover.prevent
                     @dragstart="draggingAsset = asset.id"
                     @dragend="draggingAsset = null"

From 0489cb951958a9a35503cdd8f05febaa90de5bdf Mon Sep 17 00:00:00 2001
From: Duncan McClean <duncan@duncanmcclean.com>
Date: Wed, 28 May 2025 12:49:39 +0100
Subject: [PATCH 22/23] Add previous/next buttons

---
 .../js/components/assets/Editor/Editor.vue    | 22 +++++++++++++++----
 1 file changed, 18 insertions(+), 4 deletions(-)

diff --git a/resources/js/components/assets/Editor/Editor.vue b/resources/js/components/assets/Editor/Editor.vue
index 343fa0bb14c..10236d683cb 100644
--- a/resources/js/components/assets/Editor/Editor.vue
+++ b/resources/js/components/assets/Editor/Editor.vue
@@ -257,6 +257,12 @@
                         </div>
                     </div>
                     <div class="flex items-center space-x-3 rtl:space-x-reverse">
+                        <button type="button" class="btn" @click="navigateToPreviousAsset">
+                            {{ __('<') }}
+                        </button>
+                        <button type="button" class="btn" @click="navigateToNextAsset">
+                            {{ __('>') }}
+                        </button>
                         <button type="button" class="btn" @click="close">
                             {{ __('Cancel') }}
                         </button>
@@ -458,16 +464,24 @@ export default {
 
         keydown(event) {
             if ((event.metaKey || event.ctrlKey) && event.key === 'ArrowLeft') {
-                this.save();
-                this.$emit('previous');
+                this.navigateToPreviousAsset();
             }
 
             if ((event.metaKey || event.ctrlKey) && event.key === 'ArrowRight') {
-                this.save();
-                this.$emit('next');
+                this.navigateToNextAsset();
             }
         },
 
+        navigateToPreviousAsset() {
+            this.save();
+            this.$emit('previous');
+        },
+
+        navigateToNextAsset() {
+            this.save();
+            this.$emit('next');
+        },
+
         openFocalPointEditor() {
             this.showFocalPointEditor = true;
         },

From 49cbe0aca89c57b41c339d833ba8b61bae78d558 Mon Sep 17 00:00:00 2001
From: Duncan McClean <duncan@duncanmcclean.com>
Date: Wed, 28 May 2025 12:52:39 +0100
Subject: [PATCH 23/23] Only save when navigating between prev/next assets when
 there's dirty state

---
 resources/js/components/assets/Editor/Editor.vue | 10 ++++++++--
 1 file changed, 8 insertions(+), 2 deletions(-)

diff --git a/resources/js/components/assets/Editor/Editor.vue b/resources/js/components/assets/Editor/Editor.vue
index 10236d683cb..d662b3d94ef 100644
--- a/resources/js/components/assets/Editor/Editor.vue
+++ b/resources/js/components/assets/Editor/Editor.vue
@@ -473,12 +473,18 @@ export default {
         },
 
         navigateToPreviousAsset() {
-            this.save();
+            if (this.$dirty.has(this.publishContainer)) {
+                this.save();
+            }
+
             this.$emit('previous');
         },
 
         navigateToNextAsset() {
-            this.save();
+            if (this.$dirty.has(this.publishContainer)) {
+                this.save();
+            }
+            
             this.$emit('next');
         },