Show official logos in the media source menu

AGENTS.md

@@ -726,6 +726,7 @@ view turns a forgotten variable into a runtime-only failure.
 ## Icons (@tabler/icons-vue)
 
 - This project uses `@tabler/icons-vue` for all icons. NEVER use `lucide-vue-next`.
+- Brand logos come from `@thesvg/vue`, one import per logo (`import Canva from '@thesvg/vue/canva'`). A one-color logo that must follow the theme goes through `inTextColor()` (`resources/js/lib/brandLogos.ts`).
 - All Tabler icons are prefixed with `Icon`, e.g. `IconCheck`, `IconChevronRight`, `IconMail`.
 - Import icons from `@tabler/icons-vue`: `import { IconCheck, IconX } from '@tabler/icons-vue'`.
 - Browse available icons at https://tabler.io/icons

package.json

@@ -42,6 +42,7 @@
         "@inertiajs/vue3": "^3.8.0",
         "@tabler/icons-vue": "^3.49.0",
         "@tailwindcss/typography": "^0.5.19",
+        "@thesvg/vue": "^3.4.0",
         "@unovis/ts": "^1.7.0",
         "@unovis/vue": "^1.7.0",
         "@vueuse/core": "^12.8.2",

resources/js/components/posts/composer/MediaSourceMenu.vue

@@ -1,13 +1,10 @@
 <script setup lang="ts">
 import { usePage } from '@inertiajs/vue3';
-import {
-    IconBrandGoogleDrive,
-    IconBrandGooglePhotos,
-    IconBrandUnsplash,
-    IconCircleLetterCFilled,
-    IconPhotoPlus,
-    IconUpload,
-} from '@tabler/icons-vue';
+import { IconPhotoPlus, IconUpload } from '@tabler/icons-vue';
+import Canva from '@thesvg/vue/canva';
+import GoogleDrive from '@thesvg/vue/google-drive-2026';
+import GooglePhotos from '@thesvg/vue/google-photos';
+import Unsplash from '@thesvg/vue/unsplash';
 import { getActiveLanguage, trans } from 'laravel-vue-i18n';
 import { computed, onBeforeUnmount, ref, type Component } from 'vue';
 import { toast } from 'vue-sonner';
@@ -32,6 +29,7 @@ import {
     type MediaImportPayload,
     useMediaImport,
 } from '@/composables/useMediaImport';
+import { inTextColor } from '@/lib/brandLogos';
 import { defaultCanvaPreset, openCanva } from '@/lib/mediaSources/canva';
 import {
     type GoogleDrivePick,
@@ -62,10 +60,10 @@ const emit = defineEmits<{
 }>();
 
 const ICONS: Record<SourceKey, Component> = {
-    canva: IconCircleLetterCFilled,
-    google_drive: IconBrandGoogleDrive,
-    google_photos: IconBrandGooglePhotos,
-    unsplash: IconBrandUnsplash,
+    canva: Canva,
+    google_drive: GoogleDrive,
+    google_photos: GooglePhotos,
+    unsplash: inTextColor(Unsplash),
 };
 
 const page = usePage();
@@ -273,29 +271,30 @@ const pickCanvaPreset = (
                                 :data-testid="`canva-preset-${preset.value}`"
                                 @select="pickCanvaPreset(option, preset.value)"
                             >
-                                <span class="flex flex-col">
-                                    <span class="flex items-center gap-1.5">
-                                        {{
-                                            $t(
-                                                `posts.composer.media_sources.canva_presets.${preset.value}`,
-                                            )
-                                        }}
-                                        <span
-                                            v-if="preset.is_default"
-                                            class="text-xs text-muted-foreground"
-                                            :data-testid="`canva-preset-${preset.value}-default`"
-                                        >
-                                            ({{
-                                                $t(
-                                                    'posts.composer.media_sources.canva_default',
-                                                )
-                                            }})
-                                        </span>
-                                    </span>
+                                <span
+                                    class="flex items-baseline gap-1.5 whitespace-nowrap"
+                                >
+                                    {{
+                                        $t(
+                                            `posts.composer.media_sources.canva_presets.${preset.value}`,
+                                        )
+                                    }}
                                     <span
                                         class="text-xs text-muted-foreground tabular-nums"
                                     >
-                                        {{ preset.width }} × {{ preset.height }}
+                                        ({{ preset.width }}×{{ preset.height }})
+                                        <template v-if="preset.is_default">
+                                            ·
+                                            <span
+                                                :data-testid="`canva-preset-${preset.value}-default`"
+                                            >
+                                                {{
+                                                    $t(
+                                                        'posts.composer.media_sources.canva_default',
+                                                    )
+                                                }}
+                                            </span>
+                                        </template>
                                     </span>
                                 </span>
                             </DropdownMenuItem>

resources/js/lib/brandLogos.ts

@@ -0,0 +1,11 @@
+import { h, type Component, type FunctionalComponent } from 'vue';
+
+/**
+ * A one-color brand logo from @thesvg/vue drawn in the surrounding text
+ * color, so it follows the theme. For logos whose paths carry no fill of
+ * their own (Unsplash): a fill on a path still wins.
+ */
+export const inTextColor =
+    (logo: Component): FunctionalComponent =>
+    (_, { attrs }) =>
+        h(logo, { ...attrs, fill: 'currentColor' });

tests/Browser/ComposerCanvaMenuTest.php

@@ -78,15 +78,25 @@ function openComposerWithOnlyCanva(mixed $test): array
         ->toBe(['canva-preset-square', 'canva-preset-portrait_4_5', 'canva-preset-portrait_3_4', 'canva-preset-landscape', 'canva-preset-story']);
 
     $page->assertSeeIn('@canva-preset-square', 'Square 1:1')
-        ->assertSeeIn('@canva-preset-square', '1200 × 1200')
+        ->assertSeeIn('@canva-preset-square', '(1200×1200)')
         ->assertPresent('@canva-preset-square-default')
-        ->assertSeeIn('@canva-preset-portrait_4_5', '1080 × 1350')
-        ->assertSeeIn('@canva-preset-landscape', '1200 × 627')
-        ->assertSeeIn('@canva-preset-story', '1080 × 1920')
+        ->assertSeeIn('@canva-preset-portrait_4_5', '(1080×1350)')
+        ->assertSeeIn('@canva-preset-landscape', '(1200×627)')
+        ->assertSeeIn('@canva-preset-story', '(1080×1920)')
         ->assertNotPresent('@canva-preset-story-default')
         ->assertNoJavaScriptErrors();
 });
 
+test('the Canva entry shows the official Canva logo', function () {
+    ['page' => $page] = openComposerWithOnlyCanva($this);
+
+    $page->click('@composer-base-media-source-menu');
+    waitForComposerCanvaTestId($page, 'media-source-canva');
+
+    $page->assertPresent('[data-testid="media-source-canva"] svg path[fill="#7D2AE7"]')
+        ->assertNoJavaScriptErrors();
+});
+
 /**
  * Stubs window.open, picks `$preset` from the Canva submenu and returns the
  * nonce the composer put on the popup URL. `$severed` makes the stub

tests/Browser/ComposerMediaSourcesTest.php

@@ -177,6 +177,8 @@ function enableOnlyUnsplashForMediaSources(int $apiStatus = 200): void
     expect($page->script("Array.from(document.querySelectorAll('[data-testid=\"composer-base-media-source-list\"] [data-testid^=\"media-source-\"]')).map((item) => item.dataset.testid)"))
         ->toBe(['media-source-upload', 'media-source-canva', 'media-source-unsplash']);
 
+    $page->assertPresent('[data-testid="media-source-unsplash"] svg[fill="currentColor"]');
+
     $page->click('@media-source-unsplash');
     waitForComposerMediaSourcesTestId($page, 'unsplash-dialog');