[6.x] Wire up more Inertia pages

resources/js/bootstrap/components.js

@@ -1,4 +1,3 @@
-import AssetManager from '../components/assets/AssetManager.vue';
 import Browser from '../components/assets/Browser/Browser.vue';
 import UpdatesBadge from '../components/UpdatesBadge.vue';
 import FullscreenHeader from '../components/publish/FullscreenHeader.vue';
@@ -7,9 +6,6 @@ import EntryPublishForm from '../components/entries/PublishForm.vue';
 import TermPublishForm from '../components/terms/PublishForm.vue';
 import UserPublishForm from '../components/users/PublishForm.vue';
 import EntryListing from '../components/entries/Listing.vue';
-import TaxonomyListing from '../components/taxonomies/Listing.vue';
-import TermListing from '../components/terms/Listing.vue';
-import AddonListing from '../components/addons/Listing.vue';
 import CollectionWidget from '../components/entries/CollectionWidget.vue';
 import FormWidget from '../components/forms/FormWidget.vue';
 import FileIcon from '../components/FileIcon.vue';
@@ -47,21 +43,19 @@ import UserGroupListing from '../components/user-groups/Listing.vue';
 import UserGroupPublishForm from '../components/user-groups/PublishForm.vue';
 import CollectionScaffolder from '../components/collections/Scaffolder.vue';
 import CollectionBlueprintListing from '../components/collections/BlueprintListing.vue';
-import NavigationListing from '../components/navigation/Listing.vue';
 import PreferencesEditForm from '../components/preferences/EditForm.vue';
-import NavigationView from '../components/navigation/View.vue';
 import TaxonomyBlueprintListing from '../components/taxonomies/BlueprintListing.vue';
-import Updater from '../components/updater/Updater.vue';
 import ItemActions from '../components/actions/ItemActions.vue';
 import BulkActions from '../components/actions/BulkActions.vue';
 
 import { defineAsyncComponent } from 'vue';
+import { Link } from '@inertiajs/vue3';
 
 export default function registerGlobalComponents(app) {
     // Core
-    app.component('asset-manager', AssetManager);
     app.component('asset-browser', Browser);
     app.component('updates-badge', UpdatesBadge);
+    app.component('inertia-link', Link);
 
     // Publish
     app.component('publish-field-meta', FieldMeta);
@@ -73,9 +67,6 @@ export default function registerGlobalComponents(app) {
 
     // Resource Type Lists
     app.component('entry-list', EntryListing);
-    app.component('taxonomy-list', TaxonomyListing);
-    app.component('term-list', TermListing);
-    app.component('addon-list', AddonListing);
 
     // Widgets
     app.component('collection-widget', CollectionWidget);
@@ -124,12 +115,9 @@ export default function registerGlobalComponents(app) {
     app.component('UserGroupPublishForm', UserGroupPublishForm);
     app.component('CollectionScaffolder', CollectionScaffolder);
     app.component('CollectionBlueprintListing', CollectionBlueprintListing);
-    app.component('NavigationListing', NavigationListing);
     app.component('PreferencesEditForm', PreferencesEditForm);
-    app.component('NavigationView', NavigationView);
     app.component('TaxonomyBlueprintListing', TaxonomyBlueprintListing);
     app.component('NavBuilder', defineAsyncComponent(() => import('../components/nav/Builder.vue')));
-    app.component('Updater', Updater);
     app.component('ItemActions', ItemActions);
     app.component('BulkActions', BulkActions);
 }

resources/js/components/addons/Listing.vue → resources/js/pages/addons/Index.vue

@@ -1,17 +1,17 @@
 <script setup>
 import { ref, onMounted } from 'vue';
-import {
-    Badge,
-    DropdownItem,
-    Listing
-} from '@ui';
+import Head from '@/pages/layout/Head.vue';
+import { Header, Button, DocsCallout, CommandPaletteItem, Listing, Badge, DropdownItem } from '@ui';
 
-const props = defineProps(['initialRows', 'initialColumns']);
-const rows = ref(props.initialRows);
-const columns = ref(props.initialColumns);
+const props = defineProps({
+    addons: Array,
+    columns: Array,
+});
+
+const rows = ref(props.addons);
 
 onMounted(() => {
-    props.initialRows.forEach(addon => {
+    props.addons.forEach(addon => {
         Statamic.$commandPalette.add({
             category: Statamic.$commandPalette.category.Actions,
             text: [__('Browse the Marketplace'), addon.name],
@@ -24,13 +24,35 @@ onMounted(() => {
 </script>
 
 <template>
+    <Head :title="__('Addons')" />
+
+    <Header :title="__('Addons')" icon="addons">
+        <CommandPaletteItem
+            category="Actions"
+            :text="__('Browse the Marketplace')"
+            icon="external-link"
+            url="https://statamic.com/addons"
+            open-new-tab
+            prioritize
+            v-slot="{ text, url, icon }"
+        >
+            <Button
+                variant="primary"
+                :text="text"
+                :href="url"
+                :icon="icon"
+                target="_blank"
+            />
+        </CommandPaletteItem>
+    </Header>
+
     <Listing
         :items="rows"
         :columns="columns"
         :allow-search="false"
         :allow-customizing-columns="false"
     >
-        <template #cell-name="{ row: addon, index }">
+        <template #cell-name="{ row: addon }">
             <a v-if="addon.marketplace_url" :href="addon.marketplace_url" target="_blank">{{ __(addon.name) }}</a>
             <span v-else>
                 {{ __(addon.name) }}
@@ -46,4 +68,6 @@ onMounted(() => {
             <DropdownItem v-if="addon.settings_url" :text="__('Settings')" icon="cog" :href="addon.settings_url" />
         </template>
     </Listing>
+
+    <DocsCallout :topic="__('Addons')" url="addons" />
 </template>