From cb43a4f09103027b4180fd526648cf53819fa329 Mon Sep 17 00:00:00 2001
From: Duncan McClean <duncan@duncanmcclean.com>
Date: Mon, 30 Oct 2023 22:45:19 +0000
Subject: [PATCH 01/13] =?UTF-8?q?Working=20tree=20view=20inside=20entries?=
 =?UTF-8?q?=20fieldtype=20=F0=9F=8C=B2?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../inputs/relationship/RelationshipInput.vue |   1 +
 .../inputs/relationship/Selector.vue          | 151 +++++++++++++++++-
 resources/js/components/structures/Branch.vue |   4 +-
 .../js/components/structures/PageTree.vue     |   4 +
 4 files changed, 155 insertions(+), 5 deletions(-)

diff --git a/resources/js/components/inputs/relationship/RelationshipInput.vue b/resources/js/components/inputs/relationship/RelationshipInput.vue
index 265402c9e7..fee526352a 100644
--- a/resources/js/components/inputs/relationship/RelationshipInput.vue
+++ b/resources/js/components/inputs/relationship/RelationshipInput.vue
@@ -76,6 +76,7 @@
                     :search="search"
                     :exclusions="exclusions"
                     :type="config.type"
+                    :config="config"
                     @selected="selectionsUpdated"
                     @closed="close"
                 />
diff --git a/resources/js/components/inputs/relationship/Selector.vue b/resources/js/components/inputs/relationship/Selector.vue
index a5200ee27a..aaf5619a41 100644
--- a/resources/js/components/inputs/relationship/Selector.vue
+++ b/resources/js/components/inputs/relationship/Selector.vue
@@ -7,7 +7,7 @@
         </div>
 
         <data-list
-            v-if="!initializing"
+            v-if="!initializing && view === 'list'"
             ref="dataList"
             :rows="items"
             :columns="columns"
@@ -20,8 +20,16 @@
         >
             <div slot-scope="{}" class="flex flex-col h-full">
                 <div class="bg-white bg-gray-200">
-                    <div class="p-2">
+                    <div class="p-2 flex items-center justify-between">
                         <data-list-search class="h-8 min-w-[240px] w-full" ref="search" v-model="searchQuery" :placeholder="searchPlaceholder" />
+                        <div class="btn-group ml-4" v-if="type === 'entries'">
+                            <button class="btn flex items-center px-4" @click="view = 'tree'" :class="{'active': view === 'tree'}" v-tooltip="__('Tree')">
+                                <svg-icon name="light/structures" class="h-4 w-4"/>
+                            </button>
+                            <button class="btn flex items-center px-4" @click="view = 'list'" :class="{'active': view === 'list'}" v-tooltip="__('List')">
+                                <svg-icon name="assets-mode-table" class="h-4 w-4" />
+                            </button>
+                        </div>
                     </div>
                     <div>
                         <data-list-filters
@@ -97,12 +105,90 @@
 
             </div>
         </data-list>
+
+        <template v-if="!initializing && view === 'tree'">
+            <div class="flex flex-col h-full">
+                <div class="bg-white bg-gray-200">
+                    <div class="p-2 flex items-center justify-end">
+                        <div class="btn-group ml-4">
+                            <button class="btn flex items-center px-4" @click="view = 'tree'" :class="{'active': view === 'tree'}" v-tooltip="__('Tree')">
+                                <svg-icon name="light/structures" class="h-4 w-4"/>
+                            </button>
+                            <button class="btn flex items-center px-4" @click="view = 'list'" :class="{'active': view === 'list'}" v-tooltip="__('List')">
+                                <svg-icon name="assets-mode-table" class="h-4 w-4" />
+                            </button>
+                        </div>
+                    </div>
+                </div>
+
+                <div class="flex-1 flex flex-col min-h-0">
+                    <div class="flex flex-col h-full justify-start">
+                        <div class="flex-1 overflow-scroll bg-gray-200 p-4">
+                            <page-tree
+                                ref="tree"
+                                :has-collection="true"
+                                :collections="['pages']"
+                                pages-url="https://sandbox.test/cp/collections/pages/tree"
+                                submit-url="https://sandbox.test/cp/collections/pages/tree"
+                                :show-slugs="true"
+                                :site="site"
+                                :preferences-prefix="`collections.pages`"
+                            >
+                                <template #branch-drag="{ branch, index }">
+                                    <input
+                                        type="checkbox"
+                                        class="mx-2"
+                                        :value="branch.id"
+                                        :checked="isSelected(branch.id)"
+                                        :disabled="reachedSelectionLimit && !singleSelect && !isSelected(branch.id)"
+                                        :id="`checkbox-${branch.id}`"
+                                        @click="checkboxClicked(branch, index, $event)"
+                                    />
+                                </template>
+
+                                <template #branch-icon="{ branch }">
+                                    <svg-icon v-if="isRedirectBranch(branch)"
+                                        class="inline-block w-4 h-4 text-gray-500"
+                                        name="light/external-link"
+                                        v-tooltip="__('Redirect')" />
+                                </template>
+                            </page-tree>
+                        </div>
+
+                        <div class="p-4 border-t flex items-center justify-between bg-gray-200">
+                            <div class="text-sm text-gray-700"
+                                v-text="hasMaxSelections
+                                    ? __n(':count/:max selected', selections, { max: maxSelections })
+                                    : __n(':count item selected|:count items selected', selections)" />
+
+                            <div>
+                                <button
+                                    type="button"
+                                    class="btn"
+                                    @click="close">
+                                    {{ __('Cancel') }}
+                                </button>
+
+                                <button
+                                    v-if="! hasMaxSelections || maxSelections > 1"
+                                    type="button"
+                                    class="btn-primary ml-2"
+                                    @click="select">
+                                    {{ __('Select') }}
+                                </button>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </template>
     </div>
 
 </template>
 
 <script>
 import HasFilters from '../../data-list/HasFilters';
+import PageTree from '../../structures/PageTree.vue';
 
 export default {
 
@@ -110,6 +196,10 @@ export default {
         HasFilters,
     ],
 
+    components: {
+        PageTree,
+    },
+
     props: {
         filtersUrl: String,
         selectionsUrl: String,
@@ -127,7 +217,8 @@ export default {
         initialColumns: {
             type: Array,
             default: () => []
-        }
+        },
+        config: Object,
     },
 
     data() {
@@ -144,6 +235,8 @@ export default {
             selections: _.clone(this.initialSelections),
             columns: this.initialColumns,
             visibleColumns: this.initialColumns.filter(column => column.visible),
+            view: 'list',
+            lastItemClicked: null
         }
     },
 
@@ -163,7 +256,15 @@ export default {
 
         hasMaxSelections() {
             return (this.maxSelections === Infinity) ? false : Boolean(this.maxSelections);
-        }
+        },
+
+        reachedSelectionLimit() {
+            return this.selections.length === this.maxSelections;
+        },
+
+        singleSelect() {
+            return this.maxSelections === 1;
+        },
 
     },
 
@@ -311,6 +412,48 @@ export default {
             return this.visibleColumns.find(c => c.field === column);
         },
 
+        isRedirectBranch(branch) {
+            return branch.redirect != null;
+        },
+
+        isSelected(id) {
+            return this.selections.includes(id);
+        },
+
+        toggleSelection(id) {
+            const i = this.selections.indexOf(id);
+
+            if (i > -1) {
+                this.selections.splice(i, 1);
+
+                return;
+            }
+
+            if (this.singleSelect) {
+                this.selections.pop();
+            }
+
+            if (! this.reachedSelectionLimit) {
+                this.selections.push(id);
+            }
+        },
+
+        checkboxClicked(row, index, $event) {
+            // this.$refs.table.focus();
+            if ($event.shiftKey && this.lastItemClicked !== null) {
+                this.selectRange(
+                    Math.min(this.lastItemClicked, index),
+                    Math.max(this.lastItemClicked, index)
+                );
+            } else {
+                this.toggleSelection(row.id, index)
+            }
+
+            if ($event.target.checked) {
+                this.lastItemClicked = index
+            }
+        }
+
     }
 
 }
diff --git a/resources/js/components/structures/Branch.vue b/resources/js/components/structures/Branch.vue
index 67d3d53c88..e9c3080fbc 100644
--- a/resources/js/components/structures/Branch.vue
+++ b/resources/js/components/structures/Branch.vue
@@ -1,7 +1,9 @@
 <template>
 
     <div class="flex">
-        <div class="page-move w-6" />
+        <slot name="branch-drag" :branch="page">
+            <div class="page-move w-6" />
+        </slot>
         <div class="flex items-center flex-1 p-2 ml-2 text-xs leading-normal">
             <div class="flex items-center flex-1">
                 <div class="little-dot mr-2" :class="getStatusClass()" v-tooltip="getStatusTooltip()" />
diff --git a/resources/js/components/structures/PageTree.vue b/resources/js/components/structures/PageTree.vue
index 4c12a786a5..cb2482bcd0 100644
--- a/resources/js/components/structures/PageTree.vue
+++ b/resources/js/components/structures/PageTree.vue
@@ -48,6 +48,10 @@
                     @removed="pageRemoved"
                     @children-orphaned="childrenOrphaned"
                 >
+                    <template #branch-drag="props">
+                        <slot name="branch-drag" v-bind="{ ...props, vm }" />
+                    </template>
+
                     <template #branch-icon="props">
                         <slot name="branch-icon" v-bind="{ ...props, vm }" />
                     </template>

From 9fddeb16b7fcdf015d7a123282aa8f37e02c9f80 Mon Sep 17 00:00:00 2001
From: Duncan McClean <duncan@duncanmcclean.com>
Date: Tue, 31 Oct 2023 11:58:49 +0000
Subject: [PATCH 02/13] Only show tree view for structured collections

---
 .../js/components/inputs/relationship/Selector.vue   | 12 ++++++++++--
 src/Fieldtypes/Entries.php                           |  4 ++++
 2 files changed, 14 insertions(+), 2 deletions(-)

diff --git a/resources/js/components/inputs/relationship/Selector.vue b/resources/js/components/inputs/relationship/Selector.vue
index aaf5619a41..f3230846b1 100644
--- a/resources/js/components/inputs/relationship/Selector.vue
+++ b/resources/js/components/inputs/relationship/Selector.vue
@@ -22,7 +22,7 @@
                 <div class="bg-white bg-gray-200">
                     <div class="p-2 flex items-center justify-between">
                         <data-list-search class="h-8 min-w-[240px] w-full" ref="search" v-model="searchQuery" :placeholder="searchPlaceholder" />
-                        <div class="btn-group ml-4" v-if="type === 'entries'">
+                        <div class="btn-group ml-4" v-if="canUseStructureTree">
                             <button class="btn flex items-center px-4" @click="view = 'tree'" :class="{'active': view === 'tree'}" v-tooltip="__('Tree')">
                                 <svg-icon name="light/structures" class="h-4 w-4"/>
                             </button>
@@ -106,7 +106,7 @@
             </div>
         </data-list>
 
-        <template v-if="!initializing && view === 'tree'">
+        <template v-if="!initializing && canUseStructureTree && view === 'tree'">
             <div class="flex flex-col h-full">
                 <div class="bg-white bg-gray-200">
                     <div class="p-2 flex items-center justify-end">
@@ -266,6 +266,14 @@ export default {
             return this.maxSelections === 1;
         },
 
+        canUseStructureTree() {
+            if (this.type !== 'entries') return false;
+
+            if (this.config.collections.length !== 1) return false;
+
+            return this.meta.structuredCollections.includes(this.config.collections[0]);
+        },
+
     },
 
     mounted() {
diff --git a/src/Fieldtypes/Entries.php b/src/Fieldtypes/Entries.php
index 7c08fa44da..50c83567c7 100644
--- a/src/Fieldtypes/Entries.php
+++ b/src/Fieldtypes/Entries.php
@@ -142,6 +142,10 @@ public function getResourceCollection($request, $items)
             ->columnPreferenceKey("collections.{$this->getFirstCollectionFromRequest($request)->handle()}.columns")
             ->additional(['meta' => [
                 'activeFilterBadges' => $this->activeFilterBadges,
+                'structuredCollections' => Collection::all()
+                    ->filter->hasStructure()
+                    ->pluck('handle')
+                    ->toArray(),
             ]]);
     }
 

From ffa01a7bbc6c74d6ec113108f0407717845ca2df Mon Sep 17 00:00:00 2001
From: Duncan McClean <duncan@duncanmcclean.com>
Date: Tue, 31 Oct 2023 12:42:40 +0000
Subject: [PATCH 03/13] Pass structuredCollections from fieldtype meta & set
 initial view

---
 .../relationship/RelationshipFieldtype.vue    |  1 +
 .../inputs/relationship/RelationshipInput.vue |  4 ++-
 .../inputs/relationship/Selector.vue          | 35 +++++++++++++++++--
 src/Fieldtypes/Entries.php                    | 14 +++++---
 4 files changed, 46 insertions(+), 8 deletions(-)

diff --git a/resources/js/components/fieldtypes/relationship/RelationshipFieldtype.vue b/resources/js/components/fieldtypes/relationship/RelationshipFieldtype.vue
index cc69fc3cae..10e9d88b12 100644
--- a/resources/js/components/fieldtypes/relationship/RelationshipFieldtype.vue
+++ b/resources/js/components/fieldtypes/relationship/RelationshipFieldtype.vue
@@ -7,6 +7,7 @@
         :mode="config.mode"
         :can-edit="canEdit"
         :config="config"
+        :fieldtype-meta="meta"
         :can-create="canCreate"
         :can-reorder="canReorder"
         :site="site"
diff --git a/resources/js/components/inputs/relationship/RelationshipInput.vue b/resources/js/components/inputs/relationship/RelationshipInput.vue
index fee526352a..2eeef1085e 100644
--- a/resources/js/components/inputs/relationship/RelationshipInput.vue
+++ b/resources/js/components/inputs/relationship/RelationshipInput.vue
@@ -77,6 +77,7 @@
                     :exclusions="exclusions"
                     :type="config.type"
                     :config="config"
+                    :fieldtype-meta="fieldtypeMeta"
                     @selected="selectionsUpdated"
                     @closed="close"
                 />
@@ -101,6 +102,7 @@ export default {
         name: String,
         value: { required: true },
         config: Object,
+        fieldtypeMeta: Object,
         data: Array,
         maxItems: Number,
         itemComponent: {
@@ -129,7 +131,7 @@ export default {
         columns: {
             type: Array,
             default: () => []
-        }
+        },
     },
 
     components: {
diff --git a/resources/js/components/inputs/relationship/Selector.vue b/resources/js/components/inputs/relationship/Selector.vue
index f3230846b1..202860d97e 100644
--- a/resources/js/components/inputs/relationship/Selector.vue
+++ b/resources/js/components/inputs/relationship/Selector.vue
@@ -131,6 +131,7 @@
                                 pages-url="https://sandbox.test/cp/collections/pages/tree"
                                 submit-url="https://sandbox.test/cp/collections/pages/tree"
                                 :show-slugs="true"
+                                :expects-root="true"
                                 :site="site"
                                 :preferences-prefix="`collections.pages`"
                             >
@@ -219,6 +220,7 @@ export default {
             default: () => []
         },
         config: Object,
+        fieldtypeMeta: Object,
     },
 
     data() {
@@ -271,12 +273,26 @@ export default {
 
             if (this.config.collections.length !== 1) return false;
 
-            return this.meta.structuredCollections.includes(this.config.collections[0]);
+            if (! this.fieldtypeMeta?.structuredCollections) {
+                return
+            }
+
+            return this.fieldtypeMeta.structuredCollections.includes(this.collection);
+        },
+
+        collection() {
+            if (this.type !== 'entries') return false;
+
+            if (this.config.collections.length !== 1) return false;
+
+            return this.config.collections[0];
         },
 
     },
 
     mounted() {
+        this.view = this.initialView();
+
         this.getFilters().then(() => {
             this.autoApplyFilters(this.filters);
             this.initialRequest();
@@ -315,6 +331,12 @@ export default {
             }
         },
 
+        view(view) {
+            if (this.type === 'entries') {
+                localStorage.setItem('statamic.collection-view.'+this.collection, view);
+            }
+        },
+
     },
 
     methods: {
@@ -447,7 +469,6 @@ export default {
         },
 
         checkboxClicked(row, index, $event) {
-            // this.$refs.table.focus();
             if ($event.shiftKey && this.lastItemClicked !== null) {
                 this.selectRange(
                     Math.min(this.lastItemClicked, index),
@@ -460,7 +481,15 @@ export default {
             if ($event.target.checked) {
                 this.lastItemClicked = index
             }
-        }
+        },
+
+        initialView() {
+            if (!this.canUseStructureTree) return 'list';
+
+            const fallback = this.canUseStructureTree ? 'tree' : 'list';
+
+            return localStorage.getItem('statamic.collection-view.'+this.collection) || fallback;
+        },
 
     }
 
diff --git a/src/Fieldtypes/Entries.php b/src/Fieldtypes/Entries.php
index 50c83567c7..ca2eb88097 100644
--- a/src/Fieldtypes/Entries.php
+++ b/src/Fieldtypes/Entries.php
@@ -142,10 +142,6 @@ public function getResourceCollection($request, $items)
             ->columnPreferenceKey("collections.{$this->getFirstCollectionFromRequest($request)->handle()}.columns")
             ->additional(['meta' => [
                 'activeFilterBadges' => $this->activeFilterBadges,
-                'structuredCollections' => Collection::all()
-                    ->filter->hasStructure()
-                    ->pluck('handle')
-                    ->toArray(),
             ]]);
     }
 
@@ -397,4 +393,14 @@ public function filter()
     {
         return new EntriesFilter($this);
     }
+
+    public function preload()
+    {
+        return array_merge(parent::preload(), [
+            'structuredCollections' => Collection::all()
+                ->filter->hasStructure()
+                ->pluck('handle')
+                ->toArray(),
+        ]);
+    }
 }

From 66f3ff8478b91db65ea75973b81845187daa55e0 Mon Sep 17 00:00:00 2001
From: Duncan McClean <duncan@duncanmcclean.com>
Date: Tue, 31 Oct 2023 12:51:07 +0000
Subject: [PATCH 04/13] Make the props "real"

---
 .../js/components/inputs/relationship/Selector.vue   | 11 +++++------
 src/Fieldtypes/Entries.php                           | 12 ++++++++----
 2 files changed, 13 insertions(+), 10 deletions(-)

diff --git a/resources/js/components/inputs/relationship/Selector.vue b/resources/js/components/inputs/relationship/Selector.vue
index 202860d97e..714a791e89 100644
--- a/resources/js/components/inputs/relationship/Selector.vue
+++ b/resources/js/components/inputs/relationship/Selector.vue
@@ -127,13 +127,12 @@
                             <page-tree
                                 ref="tree"
                                 :has-collection="true"
-                                :collections="['pages']"
-                                pages-url="https://sandbox.test/cp/collections/pages/tree"
-                                submit-url="https://sandbox.test/cp/collections/pages/tree"
-                                :show-slugs="true"
-                                :expects-root="true"
+                                :collections="[collection]"
+                                :pages-url="fieldtypeMeta.structurePagesUrl"
+                                :show-slugs="fieldtypeMeta.structureShowSlugs"
+                                :expects-root="fieldtypeMeta.structureExpectsRoot"
                                 :site="site"
-                                :preferences-prefix="`collections.pages`"
+                                :preferences-prefix="`collections.${collection}`"
                             >
                                 <template #branch-drag="{ branch, index }">
                                     <input
diff --git a/src/Fieldtypes/Entries.php b/src/Fieldtypes/Entries.php
index ca2eb88097..420611ed4b 100644
--- a/src/Fieldtypes/Entries.php
+++ b/src/Fieldtypes/Entries.php
@@ -396,11 +396,15 @@ public function filter()
 
     public function preload()
     {
+        $collection = count($this->getConfiguredCollections()) === 1
+            ? Collection::findByHandle($this->getConfiguredCollections()[0])
+            : null;
+
         return array_merge(parent::preload(), [
-            'structuredCollections' => Collection::all()
-                ->filter->hasStructure()
-                ->pluck('handle')
-                ->toArray(),
+            'structurePagesUrl' => $collection?->hasStructure() ? cp_route('collections.tree.index', $collection) : null,
+            'structureExpectsRoot' => $collection?->hasStructure() ? $collection->structure()->expectsRoot() : null,
+            'structureShowSlugs' => $collection?->hasStructure() ? $collection->structure()->showSlugs() : null,
+            'structuredCollections' => Collection::all()->filter->hasStructure()->pluck('handle')->toArray(),
         ]);
     }
 }

From 75efa0f1635749172e85c438b143872142468d21 Mon Sep 17 00:00:00 2001
From: Duncan McClean <duncan@duncanmcclean.com>
Date: Tue, 31 Oct 2023 13:05:39 +0000
Subject: [PATCH 05/13] Disable actions/drag & drop/add-edit buttons on tree

---
 .../js/components/inputs/relationship/Selector.vue     |  1 +
 resources/js/components/structures/Branch.vue          |  7 ++++---
 resources/js/components/structures/PageTree.vue        | 10 ++++++++--
 3 files changed, 13 insertions(+), 5 deletions(-)

diff --git a/resources/js/components/inputs/relationship/Selector.vue b/resources/js/components/inputs/relationship/Selector.vue
index 714a791e89..762289980f 100644
--- a/resources/js/components/inputs/relationship/Selector.vue
+++ b/resources/js/components/inputs/relationship/Selector.vue
@@ -133,6 +133,7 @@
                                 :expects-root="fieldtypeMeta.structureExpectsRoot"
                                 :site="site"
                                 :preferences-prefix="`collections.${collection}`"
+                                :editable="false"
                             >
                                 <template #branch-drag="{ branch, index }">
                                     <input
diff --git a/resources/js/components/structures/Branch.vue b/resources/js/components/structures/Branch.vue
index e9c3080fbc..62a75b57b6 100644
--- a/resources/js/components/structures/Branch.vue
+++ b/resources/js/components/structures/Branch.vue
@@ -26,7 +26,7 @@
                     <svg-icon name="micro/chevron-down-xs" class="h-1.5" />
                 </button>
 
-                <div v-if="page.collection" class="ml-4 flex items-center">
+                <div v-if="page.collection && editable" class="ml-4 flex items-center">
                     <svg-icon name="light/content-writing" class="w-4 h-4" />
                     <div class="ml-1">
                         <a :href="page.collection.create_url" v-text="__('Add')" />
@@ -39,7 +39,7 @@
             <div class="pr-2 flex items-center">
                 <slot name="branch-icon" :branch="page" />
 
-                <dropdown-list class="ml-4" v-if="!isRoot">
+                <dropdown-list class="ml-4" v-if="!isRoot && editable">
                     <slot name="branch-options"
                         :branch="page"
                         :depth="depth"
@@ -68,7 +68,8 @@ export default {
         hasCollection: Boolean,
         isOpen: Boolean,
         hasChildren: Boolean,
-        showSlugs: Boolean
+        showSlugs: Boolean,
+        editable: Boolean,
     },
 
     data() {
diff --git a/resources/js/components/structures/PageTree.vue b/resources/js/components/structures/PageTree.vue
index cb2482bcd0..9fc30e7884 100644
--- a/resources/js/components/structures/PageTree.vue
+++ b/resources/js/components/structures/PageTree.vue
@@ -24,7 +24,7 @@
 
         <div v-if="!loading" class="page-tree w-full">
             <draggable-tree
-                draggable
+                :draggable="editable"
                 ref="tree"
                 :data="treeData"
                 :space="1"
@@ -43,6 +43,7 @@
                     :is-open="page.open"
                     :has-children="page.children.length > 0"
                     :show-slugs="showSlugs"
+                    :editable="editable"
                     @edit="$emit('edit-page', page, vm, store, $event)"
                     @toggle-open="store.toggleOpen(page)"
                     @removed="pageRemoved"
@@ -82,7 +83,7 @@ export default {
 
     props: {
         pagesUrl: { type: String, required: true },
-        submitUrl: { type: String, required: true },
+        submitUrl: { type: String },
         submitParameters: { type: Object, default: () => ({}) },
         createUrl: { type: String },
         site: { type: String, required: true },
@@ -92,6 +93,7 @@ export default {
         showSlugs: { type: Boolean, default: false },
         hasCollection: { type: Boolean, required: true },
         preferencesPrefix: { type: String },
+        editable: { type: Boolean, default: true },
     },
 
     data() {
@@ -184,6 +186,10 @@ export default {
         },
 
         save() {
+            if (! this.editable) {
+                return;
+            }
+
             this.saving = true;
 
             const payload = {

From de04980e2b11e0c8e0c7c23533018e5a21d8f02a Mon Sep 17 00:00:00 2001
From: Duncan McClean <duncan@duncanmcclean.com>
Date: Tue, 31 Oct 2023 13:21:17 +0000
Subject: [PATCH 06/13] slightly improve slot name

---
 resources/js/components/inputs/relationship/Selector.vue | 2 +-
 resources/js/components/structures/Branch.vue            | 2 +-
 resources/js/components/structures/PageTree.vue          | 4 ++--
 3 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/resources/js/components/inputs/relationship/Selector.vue b/resources/js/components/inputs/relationship/Selector.vue
index 762289980f..f9939fcd23 100644
--- a/resources/js/components/inputs/relationship/Selector.vue
+++ b/resources/js/components/inputs/relationship/Selector.vue
@@ -135,7 +135,7 @@
                                 :preferences-prefix="`collections.${collection}`"
                                 :editable="false"
                             >
-                                <template #branch-drag="{ branch, index }">
+                                <template #branch-action="{ branch, index }">
                                     <input
                                         type="checkbox"
                                         class="mx-2"
diff --git a/resources/js/components/structures/Branch.vue b/resources/js/components/structures/Branch.vue
index 62a75b57b6..378c701f1e 100644
--- a/resources/js/components/structures/Branch.vue
+++ b/resources/js/components/structures/Branch.vue
@@ -1,7 +1,7 @@
 <template>
 
     <div class="flex">
-        <slot name="branch-drag" :branch="page">
+        <slot name="branch-action" :branch="page">
             <div class="page-move w-6" />
         </slot>
         <div class="flex items-center flex-1 p-2 ml-2 text-xs leading-normal">
diff --git a/resources/js/components/structures/PageTree.vue b/resources/js/components/structures/PageTree.vue
index 9fc30e7884..574f59a03e 100644
--- a/resources/js/components/structures/PageTree.vue
+++ b/resources/js/components/structures/PageTree.vue
@@ -49,8 +49,8 @@
                     @removed="pageRemoved"
                     @children-orphaned="childrenOrphaned"
                 >
-                    <template #branch-drag="props">
-                        <slot name="branch-drag" v-bind="{ ...props, vm }" />
+                    <template #branch-action="props">
+                        <slot name="branch-action" v-bind="{ ...props, vm }" />
                     </template>
 
                     <template #branch-icon="props">

From a7df00fb969ebf37466ab4a21c1d72fc60903d32 Mon Sep 17 00:00:00 2001
From: Jack McDade <jack@jackmcdade.com>
Date: Tue, 31 Oct 2023 10:04:19 -0400
Subject: [PATCH 07/13] Spruce up the UI a bit. Needs the collection name to be
 dynamic.

---
 .../inputs/relationship/Selector.vue          | 25 +++++++++----------
 1 file changed, 12 insertions(+), 13 deletions(-)

diff --git a/resources/js/components/inputs/relationship/Selector.vue b/resources/js/components/inputs/relationship/Selector.vue
index f9939fcd23..2eb844f489 100644
--- a/resources/js/components/inputs/relationship/Selector.vue
+++ b/resources/js/components/inputs/relationship/Selector.vue
@@ -19,8 +19,8 @@
             @selections-updated="selectionsUpdated"
         >
             <div slot-scope="{}" class="flex flex-col h-full">
-                <div class="bg-white bg-gray-200">
-                    <div class="p-2 flex items-center justify-between">
+                <div class="bg-white z-1">
+                    <div class="py-2 px-4 flex items-center justify-between">
                         <data-list-search class="h-8 min-w-[240px] w-full" ref="search" v-model="searchQuery" :placeholder="searchPlaceholder" />
                         <div class="btn-group ml-4" v-if="canUseStructureTree">
                             <button class="btn flex items-center px-4" @click="view = 'tree'" :class="{'active': view === 'tree'}" v-tooltip="__('Tree')">
@@ -108,16 +108,15 @@
 
         <template v-if="!initializing && canUseStructureTree && view === 'tree'">
             <div class="flex flex-col h-full">
-                <div class="bg-white bg-gray-200">
-                    <div class="p-2 flex items-center justify-end">
-                        <div class="btn-group ml-4">
-                            <button class="btn flex items-center px-4" @click="view = 'tree'" :class="{'active': view === 'tree'}" v-tooltip="__('Tree')">
-                                <svg-icon name="light/structures" class="h-4 w-4"/>
-                            </button>
-                            <button class="btn flex items-center px-4" @click="view = 'list'" :class="{'active': view === 'list'}" v-tooltip="__('List')">
-                                <svg-icon name="assets-mode-table" class="h-4 w-4" />
-                            </button>
-                        </div>
+                <div class="bg-white bg-gray-200 shadow px-4 py-2 z-1 h-13 flex items-center justify-end">
+                    <h1 class="flex-1 flex items-center text-xl">Collection Name</h1>
+                    <div class="btn-group ml-4">
+                        <button class="btn flex items-center px-4" @click="view = 'tree'" :class="{'active': view === 'tree'}" v-tooltip="__('Tree')">
+                            <svg-icon name="light/structures" class="h-4 w-4"/>
+                        </button>
+                        <button class="btn flex items-center px-4" @click="view = 'list'" :class="{'active': view === 'list'}" v-tooltip="__('List')">
+                            <svg-icon name="assets-mode-table" class="h-4 w-4" />
+                        </button>
                     </div>
                 </div>
 
@@ -138,7 +137,7 @@
                                 <template #branch-action="{ branch, index }">
                                     <input
                                         type="checkbox"
-                                        class="mx-2"
+                                        class="ml-2"
                                         :value="branch.id"
                                         :checked="isSelected(branch.id)"
                                         :disabled="reachedSelectionLimit && !singleSelect && !isSelected(branch.id)"

From 9ef84f062b8e14fad9d26de16409c7d69b0c147a Mon Sep 17 00:00:00 2001
From: Duncan McClean <duncan@duncanmcclean.com>
Date: Tue, 31 Oct 2023 14:41:18 +0000
Subject: [PATCH 08/13] Wire up collection name

---
 .../inputs/relationship/Selector.vue          | 22 ++++++++-----------
 src/Fieldtypes/Entries.php                    |  8 ++++++-
 2 files changed, 16 insertions(+), 14 deletions(-)

diff --git a/resources/js/components/inputs/relationship/Selector.vue b/resources/js/components/inputs/relationship/Selector.vue
index 2eb844f489..14827477aa 100644
--- a/resources/js/components/inputs/relationship/Selector.vue
+++ b/resources/js/components/inputs/relationship/Selector.vue
@@ -109,7 +109,7 @@
         <template v-if="!initializing && canUseStructureTree && view === 'tree'">
             <div class="flex flex-col h-full">
                 <div class="bg-white bg-gray-200 shadow px-4 py-2 z-1 h-13 flex items-center justify-end">
-                    <h1 class="flex-1 flex items-center text-xl">Collection Name</h1>
+                    <h1 class="flex-1 flex items-center text-xl">{{ collection.title }}</h1>
                     <div class="btn-group ml-4">
                         <button class="btn flex items-center px-4" @click="view = 'tree'" :class="{'active': view === 'tree'}" v-tooltip="__('Tree')">
                             <svg-icon name="light/structures" class="h-4 w-4"/>
@@ -126,12 +126,12 @@
                             <page-tree
                                 ref="tree"
                                 :has-collection="true"
-                                :collections="[collection]"
+                                :collections="[collection.handle]"
                                 :pages-url="fieldtypeMeta.structurePagesUrl"
                                 :show-slugs="fieldtypeMeta.structureShowSlugs"
                                 :expects-root="fieldtypeMeta.structureExpectsRoot"
                                 :site="site"
-                                :preferences-prefix="`collections.${collection}`"
+                                :preferences-prefix="`collections.${collection.handle}`"
                                 :editable="false"
                             >
                                 <template #branch-action="{ branch, index }">
@@ -269,22 +269,18 @@ export default {
 
         canUseStructureTree() {
             if (this.type !== 'entries') return false;
-
             if (this.config.collections.length !== 1) return false;
+            if (! this.fieldtypeMeta?.collections) return;
 
-            if (! this.fieldtypeMeta?.structuredCollections) {
-                return
-            }
-
-            return this.fieldtypeMeta.structuredCollections.includes(this.collection);
+            return this.fieldtypeMeta.collections.filter((collection) => this.config.collections[0] === collection.handle).length > 0;
         },
 
         collection() {
             if (this.type !== 'entries') return false;
-
             if (this.config.collections.length !== 1) return false;
+            if (! this.fieldtypeMeta?.collections) return;
 
-            return this.config.collections[0];
+            return this.fieldtypeMeta.collections.find((collection) => this.config.collections[0] === collection.handle);
         },
 
     },
@@ -332,7 +328,7 @@ export default {
 
         view(view) {
             if (this.type === 'entries') {
-                localStorage.setItem('statamic.collection-view.'+this.collection, view);
+                localStorage.setItem('statamic.collection-view.'+this.collection.handle, view);
             }
         },
 
@@ -487,7 +483,7 @@ export default {
 
             const fallback = this.canUseStructureTree ? 'tree' : 'list';
 
-            return localStorage.getItem('statamic.collection-view.'+this.collection) || fallback;
+            return localStorage.getItem('statamic.collection-view.'+this.collection.handle) || fallback;
         },
 
     }
diff --git a/src/Fieldtypes/Entries.php b/src/Fieldtypes/Entries.php
index 420611ed4b..bc4307d479 100644
--- a/src/Fieldtypes/Entries.php
+++ b/src/Fieldtypes/Entries.php
@@ -404,7 +404,13 @@ public function preload()
             'structurePagesUrl' => $collection?->hasStructure() ? cp_route('collections.tree.index', $collection) : null,
             'structureExpectsRoot' => $collection?->hasStructure() ? $collection->structure()->expectsRoot() : null,
             'structureShowSlugs' => $collection?->hasStructure() ? $collection->structure()->showSlugs() : null,
-            'structuredCollections' => Collection::all()->filter->hasStructure()->pluck('handle')->toArray(),
+            'collections' => Collection::all()
+                ->map(fn ($collection) => [
+                    'handle' => $collection->handle(),
+                    'title' => $collection->title(),
+                    'hasStructure' => $collection->hasStructure(),
+                ])
+                ->toArray(),
         ]);
     }
 }

From bff6dd8a0c514c72fcdcbd34c57946aab28cfcdc Mon Sep 17 00:00:00 2001
From: Duncan McClean <duncan@duncanmcclean.com>
Date: Tue, 31 Oct 2023 14:52:32 +0000
Subject: [PATCH 09/13] Make sure its only visible to structured collections

---
 resources/js/components/inputs/relationship/Selector.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/resources/js/components/inputs/relationship/Selector.vue b/resources/js/components/inputs/relationship/Selector.vue
index 14827477aa..ecc95a476c 100644
--- a/resources/js/components/inputs/relationship/Selector.vue
+++ b/resources/js/components/inputs/relationship/Selector.vue
@@ -272,7 +272,7 @@ export default {
             if (this.config.collections.length !== 1) return false;
             if (! this.fieldtypeMeta?.collections) return;
 
-            return this.fieldtypeMeta.collections.filter((collection) => this.config.collections[0] === collection.handle).length > 0;
+            return this.fieldtypeMeta.collections.filter((collection) => collection.hasStructure && this.config.collections[0] === collection.handle).length > 0;
         },
 
         collection() {

From 23abb4c50ebcf3ead3ee390556c01d55052e0696 Mon Sep 17 00:00:00 2001
From: Jason Varga <jason@pixelfear.com>
Date: Wed, 1 Nov 2023 15:10:14 -0400
Subject: [PATCH 10/13] position checkbox consistently in safari

---
 .../inputs/relationship/Selector.vue          | 20 ++++++++++---------
 1 file changed, 11 insertions(+), 9 deletions(-)

diff --git a/resources/js/components/inputs/relationship/Selector.vue b/resources/js/components/inputs/relationship/Selector.vue
index ecc95a476c..424f9f985f 100644
--- a/resources/js/components/inputs/relationship/Selector.vue
+++ b/resources/js/components/inputs/relationship/Selector.vue
@@ -135,15 +135,17 @@
                                 :editable="false"
                             >
                                 <template #branch-action="{ branch, index }">
-                                    <input
-                                        type="checkbox"
-                                        class="ml-2"
-                                        :value="branch.id"
-                                        :checked="isSelected(branch.id)"
-                                        :disabled="reachedSelectionLimit && !singleSelect && !isSelected(branch.id)"
-                                        :id="`checkbox-${branch.id}`"
-                                        @click="checkboxClicked(branch, index, $event)"
-                                    />
+                                    <div>
+                                        <input
+                                            type="checkbox"
+                                            class="mt-3 ml-3"
+                                            :value="branch.id"
+                                            :checked="isSelected(branch.id)"
+                                            :disabled="reachedSelectionLimit && !singleSelect && !isSelected(branch.id)"
+                                            :id="`checkbox-${branch.id}`"
+                                            @click="checkboxClicked(branch, index, $event)"
+                                        />
+                                    </div>
                                 </template>
 
                                 <template #branch-icon="{ branch }">

From 64f8ff73d905f3dc374de8390f182358bc6212eb Mon Sep 17 00:00:00 2001
From: Jason Varga <jason@pixelfear.com>
Date: Thu, 2 Nov 2023 11:13:28 -0400
Subject: [PATCH 11/13] not used at all

---
 resources/js/components/collections/View.vue             | 1 -
 resources/js/components/inputs/relationship/Selector.vue | 1 -
 resources/js/components/navigation/View.vue              | 1 -
 resources/js/components/structures/Branch.vue            | 1 -
 resources/js/components/structures/PageTree.vue          | 2 --
 5 files changed, 6 deletions(-)

diff --git a/resources/js/components/collections/View.vue b/resources/js/components/collections/View.vue
index ef0d0b9a7f..3e83d1ffea 100644
--- a/resources/js/components/collections/View.vue
+++ b/resources/js/components/collections/View.vue
@@ -103,7 +103,6 @@
         <page-tree
             v-if="canUseStructureTree && view === 'tree'"
             ref="tree"
-            :has-collection="true"
             :collections="[handle]"
             :create-url="createUrl"
             :pages-url="structurePagesUrl"
diff --git a/resources/js/components/inputs/relationship/Selector.vue b/resources/js/components/inputs/relationship/Selector.vue
index 424f9f985f..54fd85256e 100644
--- a/resources/js/components/inputs/relationship/Selector.vue
+++ b/resources/js/components/inputs/relationship/Selector.vue
@@ -125,7 +125,6 @@
                         <div class="flex-1 overflow-scroll bg-gray-200 p-4">
                             <page-tree
                                 ref="tree"
-                                :has-collection="true"
                                 :collections="[collection.handle]"
                                 :pages-url="fieldtypeMeta.structurePagesUrl"
                                 :show-slugs="fieldtypeMeta.structureShowSlugs"
diff --git a/resources/js/components/navigation/View.vue b/resources/js/components/navigation/View.vue
index 4c62b50f87..aa447d24ac 100644
--- a/resources/js/components/navigation/View.vue
+++ b/resources/js/components/navigation/View.vue
@@ -48,7 +48,6 @@
 
         <page-tree
             ref="tree"
-            :has-collection="false"
             :pages-url="pagesUrl"
             :submit-url="submitUrl"
             :submit-parameters="{ data: submissionData }"
diff --git a/resources/js/components/structures/Branch.vue b/resources/js/components/structures/Branch.vue
index 378c701f1e..5f577a71c9 100644
--- a/resources/js/components/structures/Branch.vue
+++ b/resources/js/components/structures/Branch.vue
@@ -65,7 +65,6 @@ export default {
         root: Boolean,
         vm: Object,
         firstPageIsRoot: Boolean,
-        hasCollection: Boolean,
         isOpen: Boolean,
         hasChildren: Boolean,
         showSlugs: Boolean,
diff --git a/resources/js/components/structures/PageTree.vue b/resources/js/components/structures/PageTree.vue
index 574f59a03e..289bb062f9 100644
--- a/resources/js/components/structures/PageTree.vue
+++ b/resources/js/components/structures/PageTree.vue
@@ -39,7 +39,6 @@
                     :depth="vm.level"
                     :vm="vm"
                     :first-page-is-root="expectsRoot"
-                    :has-collection="hasCollection"
                     :is-open="page.open"
                     :has-children="page.children.length > 0"
                     :show-slugs="showSlugs"
@@ -91,7 +90,6 @@ export default {
         maxDepth: { type: Number, default: Infinity, },
         expectsRoot: { type: Boolean, required: true },
         showSlugs: { type: Boolean, default: false },
-        hasCollection: { type: Boolean, required: true },
         preferencesPrefix: { type: String },
         editable: { type: Boolean, default: true },
     },

From 9243975726e049a0f230d946df05deb122eb8d84 Mon Sep 17 00:00:00 2001
From: Jason Varga <jason@pixelfear.com>
Date: Thu, 2 Nov 2023 11:30:33 -0400
Subject: [PATCH 12/13] refactor to avoid collection specific code in the
 relationship components. accept a more generic "tree" object

---
 .../relationship/RelationshipFieldtype.vue    |  2 +-
 .../inputs/relationship/RelationshipInput.vue |  6 +-
 .../inputs/relationship/Selector.vue          | 55 ++++++++-----------
 src/Fieldtypes/Entries.php                    | 22 ++++----
 4 files changed, 36 insertions(+), 49 deletions(-)

diff --git a/resources/js/components/fieldtypes/relationship/RelationshipFieldtype.vue b/resources/js/components/fieldtypes/relationship/RelationshipFieldtype.vue
index 10e9d88b12..63ba451597 100644
--- a/resources/js/components/fieldtypes/relationship/RelationshipFieldtype.vue
+++ b/resources/js/components/fieldtypes/relationship/RelationshipFieldtype.vue
@@ -7,7 +7,6 @@
         :mode="config.mode"
         :can-edit="canEdit"
         :config="config"
-        :fieldtype-meta="meta"
         :can-create="canCreate"
         :can-reorder="canReorder"
         :site="site"
@@ -25,6 +24,7 @@
         :search="canSearch"
         :read-only="isReadOnly"
         :taggable="taggable"
+        :tree="meta.tree"
         @focus="$emit('focus')"
         @blur="$emit('blur')"
         @input="update"
diff --git a/resources/js/components/inputs/relationship/RelationshipInput.vue b/resources/js/components/inputs/relationship/RelationshipInput.vue
index 2eeef1085e..5aac36bb21 100644
--- a/resources/js/components/inputs/relationship/RelationshipInput.vue
+++ b/resources/js/components/inputs/relationship/RelationshipInput.vue
@@ -65,6 +65,7 @@
             <stack name="item-selector" v-if="isSelecting" @closed="isSelecting = false">
                 <item-selector
                     slot-scope="{ close }"
+                    :name="name"
                     :filters-url="filtersUrl"
                     :selections-url="selectionsUrl"
                     :site="site"
@@ -76,8 +77,7 @@
                     :search="search"
                     :exclusions="exclusions"
                     :type="config.type"
-                    :config="config"
-                    :fieldtype-meta="fieldtypeMeta"
+                    :tree="tree"
                     @selected="selectionsUpdated"
                     @closed="close"
                 />
@@ -102,7 +102,6 @@ export default {
         name: String,
         value: { required: true },
         config: Object,
-        fieldtypeMeta: Object,
         data: Array,
         maxItems: Number,
         itemComponent: {
@@ -132,6 +131,7 @@ export default {
             type: Array,
             default: () => []
         },
+        tree: Object,
     },
 
     components: {
diff --git a/resources/js/components/inputs/relationship/Selector.vue b/resources/js/components/inputs/relationship/Selector.vue
index 54fd85256e..8f52572fa2 100644
--- a/resources/js/components/inputs/relationship/Selector.vue
+++ b/resources/js/components/inputs/relationship/Selector.vue
@@ -22,7 +22,7 @@
                 <div class="bg-white z-1">
                     <div class="py-2 px-4 flex items-center justify-between">
                         <data-list-search class="h-8 min-w-[240px] w-full" ref="search" v-model="searchQuery" :placeholder="searchPlaceholder" />
-                        <div class="btn-group ml-4" v-if="canUseStructureTree">
+                        <div class="btn-group ml-4" v-if="canUseTree">
                             <button class="btn flex items-center px-4" @click="view = 'tree'" :class="{'active': view === 'tree'}" v-tooltip="__('Tree')">
                                 <svg-icon name="light/structures" class="h-4 w-4"/>
                             </button>
@@ -106,10 +106,10 @@
             </div>
         </data-list>
 
-        <template v-if="!initializing && canUseStructureTree && view === 'tree'">
+        <template v-if="!initializing && canUseTree && view === 'tree'">
             <div class="flex flex-col h-full">
                 <div class="bg-white bg-gray-200 shadow px-4 py-2 z-1 h-13 flex items-center justify-end">
-                    <h1 class="flex-1 flex items-center text-xl">{{ collection.title }}</h1>
+                    <h1 class="flex-1 flex items-center text-xl">{{ tree.title }}</h1>
                     <div class="btn-group ml-4">
                         <button class="btn flex items-center px-4" @click="view = 'tree'" :class="{'active': view === 'tree'}" v-tooltip="__('Tree')">
                             <svg-icon name="light/structures" class="h-4 w-4"/>
@@ -125,12 +125,11 @@
                         <div class="flex-1 overflow-scroll bg-gray-200 p-4">
                             <page-tree
                                 ref="tree"
-                                :collections="[collection.handle]"
-                                :pages-url="fieldtypeMeta.structurePagesUrl"
-                                :show-slugs="fieldtypeMeta.structureShowSlugs"
-                                :expects-root="fieldtypeMeta.structureExpectsRoot"
+                                :pages-url="tree.url"
+                                :show-slugs="tree.showSlugs"
+                                :expects-root="tree.expectsRoot"
                                 :site="site"
-                                :preferences-prefix="`collections.${collection.handle}`"
+                                :preferences-prefix="`selector-field.${name}`"
                                 :editable="false"
                             >
                                 <template #branch-action="{ branch, index }">
@@ -211,6 +210,7 @@ export default {
         site: String,
         search: Boolean,
         type: String,
+        name: String,
         exclusions: {
             type: Array,
             default: () => []
@@ -219,8 +219,7 @@ export default {
             type: Array,
             default: () => []
         },
-        config: Object,
-        fieldtypeMeta: Object,
+        tree: Object,
     },
 
     data() {
@@ -268,26 +267,26 @@ export default {
             return this.maxSelections === 1;
         },
 
-        canUseStructureTree() {
-            if (this.type !== 'entries') return false;
-            if (this.config.collections.length !== 1) return false;
-            if (! this.fieldtypeMeta?.collections) return;
-
-            return this.fieldtypeMeta.collections.filter((collection) => collection.hasStructure && this.config.collections[0] === collection.handle).length > 0;
+        canUseTree() {
+            return !! this.tree;
         },
 
-        collection() {
-            if (this.type !== 'entries') return false;
-            if (this.config.collections.length !== 1) return false;
-            if (! this.fieldtypeMeta?.collections) return;
+        initialView() {
+            if (!this.canUseTree) return 'list';
+
+            const fallback = this.canUseTree ? 'tree' : 'list';
 
-            return this.fieldtypeMeta.collections.find((collection) => this.config.collections[0] === collection.handle);
+            return localStorage.getItem(this.viewLocalStorageKey) || fallback;
         },
 
+        viewLocalStorageKey() {
+            return `statamic.selector.field.${this.name}`;
+        }
+
     },
 
     mounted() {
-        this.view = this.initialView();
+        this.view = this.initialView;
 
         this.getFilters().then(() => {
             this.autoApplyFilters(this.filters);
@@ -328,9 +327,7 @@ export default {
         },
 
         view(view) {
-            if (this.type === 'entries') {
-                localStorage.setItem('statamic.collection-view.'+this.collection.handle, view);
-            }
+            localStorage.setItem(this.viewLocalStorageKey, view);
         },
 
     },
@@ -479,14 +476,6 @@ export default {
             }
         },
 
-        initialView() {
-            if (!this.canUseStructureTree) return 'list';
-
-            const fallback = this.canUseStructureTree ? 'tree' : 'list';
-
-            return localStorage.getItem('statamic.collection-view.'+this.collection.handle) || fallback;
-        },
-
     }
 
 }
diff --git a/src/Fieldtypes/Entries.php b/src/Fieldtypes/Entries.php
index bc4307d479..8738c3d1f7 100644
--- a/src/Fieldtypes/Entries.php
+++ b/src/Fieldtypes/Entries.php
@@ -400,17 +400,15 @@ public function preload()
             ? Collection::findByHandle($this->getConfiguredCollections()[0])
             : null;
 
-        return array_merge(parent::preload(), [
-            'structurePagesUrl' => $collection?->hasStructure() ? cp_route('collections.tree.index', $collection) : null,
-            'structureExpectsRoot' => $collection?->hasStructure() ? $collection->structure()->expectsRoot() : null,
-            'structureShowSlugs' => $collection?->hasStructure() ? $collection->structure()->showSlugs() : null,
-            'collections' => Collection::all()
-                ->map(fn ($collection) => [
-                    'handle' => $collection->handle(),
-                    'title' => $collection->title(),
-                    'hasStructure' => $collection->hasStructure(),
-                ])
-                ->toArray(),
-        ]);
+        if (! $collection || ! $collection->hasStructure()) {
+            return parent::preload();
+        }
+
+        return array_merge(parent::preload(), ['tree' => [
+            'title' => $collection->title(),
+            'url' => cp_route('collections.tree.index', $collection),
+            'showSlugs' => $collection->structure()->showSlugs(),
+            'expectsRoot' => $collection->structure()->expectsRoot(),
+        ]]);
     }
 }

From a6b0b5e9b6470417c32b60d887c62cc41c78aee2 Mon Sep 17 00:00:00 2001
From: Jason Varga <jason@pixelfear.com>
Date: Thu, 2 Nov 2023 11:32:05 -0400
Subject: [PATCH 13/13] only focus search on list view

---
 resources/js/components/inputs/relationship/Selector.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/resources/js/components/inputs/relationship/Selector.vue b/resources/js/components/inputs/relationship/Selector.vue
index 8f52572fa2..752a826fe6 100644
--- a/resources/js/components/inputs/relationship/Selector.vue
+++ b/resources/js/components/inputs/relationship/Selector.vue
@@ -344,7 +344,7 @@ export default {
 
         initialRequest() {
             return this.request().then(() => {
-                if (this.search) this.$refs.search.focus();
+                if (this.search && this.view === 'list') this.$refs.search.focus();
             });
         },