[5.x] Improve addons listing (#10812)

Co-authored-by: Jack McDade <[email protected]>

Author: duncanmcclean

resources/js/components/AddonDetails.vue

@@ -2,48 +2,48 @@
     <div>
         <div class="flex items-center mb-6">
             <h1 class="flex-1" v-text="addon.name" />
-            <a :href="addon.url" target="_blank" class="btn rtl:ml-4 ltr:mr-4" v-text="__('View on Marketplace')" />
-            <button v-if="addon.installed" class="btn" @click="showComposerInstructions" v-text="__('Uninstall')" />
-            <button v-else class="btn btn-primary" @click="showComposerInstructions" v-text="__('Install')" />
+            <a :href="addon.url" target="_blank" class="btn">
+                <svg-icon name="light/external-link" class="w-3 h-3 rtl:ml-2 ltr:mr-2 shrink-0" />
+                {{ __('View on Marketplace') }}
+            </a>
         </div>
-        <confirmation-modal
-            v-if="modalOpen"
-            :cancellable="false"
-            :button-text="__('OK')"
-            @confirm="modalOpen = false"
-        >
-            <div class="prose">
-                <template v-if="addon.installed">
-                    <p v-text="`${__('messages.addon_uninstall_command')}:`" />
-                    <code-block copyable :text="`composer remove ${package}`" />
-                </template>
-                <template v-else>
-                    <p v-text="`${__('messages.addon_install_command')}:`" />
-                    <code-block copyable :text="installCommand" />
-                </template>
-                <p v-html="link"></p>
+        <div class="flex flex-col-reverse xl:grid xl:grid-cols-3 space-y-6 xl:space-y-0 gap-6">
+            <div class="lg:col-span-2">
+                <div class="card prose max-w-full p-6" v-html="description" />
             </div>
-        </confirmation-modal>
-        <div>
-            <div class="card mb-6 flex items-center">
-                <div class="flex-1 text-lg">
-                    <div class="little-heading p-0 mb-2 text-gray-700" v-text="__('Price')" />
-                    <div class="font-bold" v-text="priceRange" />
+            <div class="xl:col-span-1 flex flex-col space-y-6">
+                <div class="card flex flex-col space-y-6 p-6">
+                    <div class="flex-1 text-lg">
+                        <div class="little-heading p-0 mb-2 text-gray-700" v-text="__('Seller')" />
+                        <a :href="addon.seller.website" target="_blank" class="relative flex items-center">
+                            <img :src="addon.seller.avatar" :alt="addon.seller.name" class="rounded-full w-6 rtl:ml-2 ltr:mr-2">
+                            <span class="font-bold">{{ addon.seller.name }}</span>
+                        </a>
+                    </div>
+                    <div class="flex-1 text-lg">
+                        <div class="little-heading p-0 mb-2 text-gray-700" v-text="__('Price')" />
+                        <div class="font-bold" v-text="priceRange" />
+                    </div>
+                    <div class="flex-1 text-lg" v-if="downloads">
+                        <div class="little-heading p-0 mb-2 text-gray-700" v-text="__('Downloads')" />
+                        <div class="font-bold">{{ downloads }}</div>
+                    </div>
                 </div>
-                <div class="flex-1 text-lg">
-                    <div class="little-heading p-0 mb-2 text-gray-700" v-text="__('Seller')" />
-                    <a :href="addon.seller.website" class="relative flex items-center">
-                        <img :src="addon.seller.avatar" :alt="addon.seller.name" class="rounded-full w-6 rtl:ml-2 ltr:mr-2">
-                        <span class="font-bold">{{ addon.seller.name }}</span>
-                    </a>
-                </div>
-                <div class="flex-1 text-lg" v-if="downloads">
-                    <div class="little-heading p-0 mb-2 text-gray-700" v-text="__('Downloads')" />
-                    <div class="font-bold">{{ downloads }}</div>
+                <div class="card p-6">
+                    <div class="prose">
+                        <template v-if="addon.installed">
+                            <p class="leading-snug" v-text="`${__('messages.addon_uninstall_command')}:`" />
+                            <code-block class="text-xs" copyable :text="`composer remove ${package}`" />
+                        </template>
+                        <template v-else>
+                            <p v-text="`${__('messages.addon_install_command')}:`" />
+                            <code-block copyable :text="installCommand" />
+                        </template>
+                        <p v-html="link"></p>
+                    </div>
                 </div>
+                <addon-editions v-if="addon.editions.length" :addon="addon" />
             </div>
-            <addon-editions v-if="addon.editions.length" :addon="addon" />
-            <div class="card content p-8" v-html="description" />
         </div>
     </div>
 </template>
@@ -121,10 +121,6 @@ import AddonEditions from './addons/Editions.vue';
                     this.downloads = response.data.package.downloads.total;
                 });
             },
-
-            showComposerInstructions() {
-                this.modalOpen = true;
-            },
         }
     }
 </script>

resources/views/addons/index.blade.php

@@ -2,6 +2,7 @@
 
 @extends('statamic::layout')
 @section('title', __('Addons'))
+@section('wrapper_class', 'max-w-3xl')
 
 @section('content')
 

src/Marketplace/AddonsQuery.php

@@ -41,7 +41,9 @@ public function get()
         $params = [
             'page' => $this->page,
             'search' => $this->search,
-            'filter' => ['statamic' => '3,4'],
+            'filter' => ['statamic' => '3,4,5'],
+            'sort' => 'most-popular',
+            'perPage' => 12,
         ];
 
         if ($this->installed) {