feat(plugins): enhance plugin logo handling with fallback and improve sidebar layout

src/features/plugins/PluginsPage.tsx

@@ -31,6 +31,17 @@ interface PluginConfigDraft {
   errors: Record<string, string>;
 }
 
+function PluginCardLogo({ src }: { src: string }) {
+  const [failed, setFailed] = useState(false);
+  const showImage = Boolean(src) && !failed;
+
+  return showImage ? (
+    <img src={src} alt="" onError={() => setFailed(true)} />
+  ) : (
+    <IconPlug size={18} />
+  );
+}
+
 const isRecord = (value: unknown): value is Record<string, unknown> =>
   value !== null && typeof value === 'object' && !Array.isArray(value);
 
@@ -701,7 +712,7 @@ export function PluginsPage() {
               <article key={plugin.id} className={styles.pluginRow}>
                 {/* Logo */}
                 <div className={styles.logoBox} aria-hidden="true">
-                  {logo ? <img src={logo} alt="" /> : <IconPlug size={18} />}
+                  <PluginCardLogo src={logo} />
                 </div>
 
                 {/* Info */}

src/features/plugins/pluginResources.ts

@@ -4,6 +4,7 @@ import { normalizeApiBase } from '@/utils/connection';
 export interface PluginResourceEntry {
   pluginID: string;
   pluginTitle: string;
+  pluginLogo: string;
   menuIndex: number;
   menu: PluginMenu;
   label: string;
@@ -31,6 +32,7 @@ export const collectPluginResourceEntries = (
 ): PluginResourceEntry[] =>
   plugins.flatMap((plugin) => {
     const pluginTitle = getPluginTitle(plugin);
+    const pluginLogo = plugin.logo || plugin.metadata?.logo || '';
 
     return plugin.menus
       .map((menu, menuIndex): PluginResourceEntry | null => {
@@ -41,6 +43,7 @@ export const collectPluginResourceEntries = (
         return {
           pluginID: plugin.id,
           pluginTitle,
+          pluginLogo,
           menuIndex,
           menu: { ...menu, path },
           label: menuLabel || pluginTitle,