fix: address provider icon review feedback

Author: xxynet

dashboard/src/components/provider/AddNewProvider.vue

@@ -233,10 +233,6 @@ export default {
     object-fit: contain;
 }
 
-:global(.v-theme--PurpleThemeDark .provider-icon--monochrome) {
-    filter: brightness(0) invert(1);
-}
-
 .provider-logo-fallback {
     width: 50px;
     height: 50px;

dashboard/src/components/provider/ProviderChatCompletionPanel.vue

@@ -11,6 +11,7 @@
           :available-source-types="availableSourceTypes"
           :tm="tm"
           :resolve-source-icon="resolveSourceIcon"
+          :is-monochrome-source-icon="isMonochromeSourceIcon"
           :get-source-display-name="getSourceDisplayName"
           @add-provider-source="addProviderSource"
           @select-provider-source="selectProviderSource"
@@ -230,6 +231,7 @@ const {
   advancedSourceConfig,
   manualProviderId,
   resolveSourceIcon,
+  isMonochromeSourceIcon,
   getSourceDisplayName,
   supportsImageInput,
   supportsAudioInput,

dashboard/src/components/provider/ProviderSourcesPanel.vue

@@ -346,10 +346,6 @@ const selectSourceByValue = (value) => {
   background: transparent !important;
 }
 
-:global(.v-theme--PurpleThemeDark .provider-icon--monochrome) {
-  filter: brightness(0) invert(1);
-}
-
 .provider-source-item__content {
   min-width: 0;
   flex: 1;

dashboard/src/components/shared/ItemCard.vue

@@ -176,7 +176,4 @@ export default {
   background-color: #4caf50;
 }
 
-:global(.v-theme--PurpleThemeDark .provider-icon--monochrome) {
-  filter: brightness(0) invert(1);
-}
 </style>

dashboard/src/composables/useProviderSources.ts

@@ -10,6 +10,17 @@ export interface UseProviderSourcesOptions {
   showMessage: (message: string, color?: string) => void
 }
 
+interface ProviderSourceType {
+  value: string
+  label: string
+  icon: string
+  isMonochrome: boolean
+}
+
+interface ProviderIconSource {
+  provider?: string
+}
+
 export function resolveDefaultTab(value?: string) {
   const normalized = (value || '').toLowerCase()
 
@@ -84,7 +95,7 @@ export function useProviderSources(options: UseProviderSourcesOptions) {
       return []
     }
 
-    const types: Array<{ value: string; label: string; icon: string; isMonochrome: boolean }> = []
+    const types: ProviderSourceType[] = []
     for (const [templateName, template] of Object.entries(providerTemplates.value)) {
       if (template.provider_type === selectedProviderType.value) {
         types.push({
@@ -292,13 +303,13 @@ export function useProviderSources(options: UseProviderSourcesOptions) {
     return type.includes(providerType)
   }
 
-  function resolveSourceIcon(source: any) {
+  function resolveSourceIcon(source: ProviderIconSource | null | undefined) {
     if (!source) return ''
-    return getProviderIcon(source.provider) || ''
+    return getProviderIcon(source.provider || '') || ''
   }
 
-  function isMonochromeSourceIcon(source: any) {
-    return Boolean(source && isMonochromeProviderIcon(source.provider))
+  function isMonochromeSourceIcon(source: ProviderIconSource | null | undefined) {
+    return Boolean(source && isMonochromeProviderIcon(source.provider || ''))
   }
 
   function getSourceDisplayName(source: any) {

dashboard/src/scss/_override.scss

@@ -130,3 +130,7 @@ pre, code, .markdown pre, .markdown code, .release-notes pre, .release-notes cod
     color: rgb(var(--v-theme-primary));
   }
 }
+
+.v-theme--PurpleThemeDark .provider-icon--monochrome {
+  filter: brightness(0) invert(1);
+}