From b9489a795b2c9b540dffe81ceeeef958e03eb7f8 Mon Sep 17 00:00:00 2001
From: Steven RYDELL <srydell@gmx.com>
Date: Thu, 30 Jul 2026 15:31:16 +0200
Subject: [PATCH] feat: show Redis and Valkey icons for Redis/Valkey backend
 variant

---
 src/components/common/BackendIcon.tsx | 20 ++++++++++++++++++++
 src/components/forms/DynamicForm.tsx  |  6 +++---
 src/components/forms/FieldWidget.tsx  |  6 +++---
 3 files changed, 26 insertions(+), 6 deletions(-)

diff --git a/src/components/common/BackendIcon.tsx b/src/components/common/BackendIcon.tsx
index bb72b04..1d19faa 100644
--- a/src/components/common/BackendIcon.tsx
+++ b/src/components/common/BackendIcon.tsx
@@ -99,3 +99,23 @@ export function isBackendIconKnown(backend: string | null | undefined): boolean
   const key = backend.toLowerCase().replace(/[^a-z0-9]/g, '');
   return Boolean(BACKEND_ICONS[key] ?? BACKEND_ICONS[backend.toLowerCase()]);
 }
+
+interface BackendVariantIconProps {
+  variant: { name: string; label: string };
+  className?: string;
+}
+
+export function BackendVariantIcon({ variant, className }: BackendVariantIconProps): React.ReactElement | null {
+  const nameLower = variant.name.toLowerCase();
+  const labelLower = variant.label?.toLowerCase() ?? '';
+  const isRedisValkey = nameLower === 'redis' && labelLower.includes('valkey');
+  if (isRedisValkey) {
+    return (
+      <span className="flex items-center gap-1">
+        <BackendIcon backend="redis" className={className} />
+        <BackendIcon backend="valkey" className={className} />
+      </span>
+    );
+  }
+  return <BackendIcon backend={variant.name} className={className} />;
+}
diff --git a/src/components/forms/DynamicForm.tsx b/src/components/forms/DynamicForm.tsx
index 9def269..2f8bc77 100644
--- a/src/components/forms/DynamicForm.tsx
+++ b/src/components/forms/DynamicForm.tsx
@@ -53,7 +53,7 @@ import { SECRET_MASK } from '@/lib/jmapUtils';
 import { toast } from '@/hooks/use-toast';
 import { logFormChange } from '@/lib/debug';
 import { FieldWidget } from '@/components/forms/FieldWidget';
-import { BackendIcon } from '@/components/common/BackendIcon';
+import { BackendVariantIcon } from '@/components/common/BackendIcon';
 
 import type { Field, Fields, Form, FormField, Schema } from '@/types/schema';
 import type { JmapSetResponse, JmapSetError, JmapMethodCall } from '@/types/jmap';
@@ -781,7 +781,7 @@ export function DynamicForm({ viewName, objectId }: DynamicFormProps) {
                       <Select value={selectedVariant} onValueChange={handleVariantChange} disabled={readOnly}>
                         <SelectTrigger>
                           <div className="flex flex-1 items-center gap-2 overflow-hidden">
-                            <BackendIcon backend={selectedVariant} />
+                            <BackendVariantIcon variant={{ name: selectedVariant, label: selectedVariantLabel ?? selectedVariant }} />
                             <span className="truncate">
                               {selectedVariantLabel || t('form.selectType', 'Select type...')}
                             </span>
@@ -791,7 +791,7 @@ export function DynamicForm({ viewName, objectId }: DynamicFormProps) {
                           {sch.variants.map((v) => (
                             <SelectItem key={v.name} value={v.name}>
                               <span className="flex items-center gap-2">
-                                <BackendIcon backend={v.name} />
+                                <BackendVariantIcon variant={v} />
                                 {v.label}
                               </span>
                             </SelectItem>
diff --git a/src/components/forms/FieldWidget.tsx b/src/components/forms/FieldWidget.tsx
index 1bcab0c..ec12c87 100644
--- a/src/components/forms/FieldWidget.tsx
+++ b/src/components/forms/FieldWidget.tsx
@@ -45,7 +45,7 @@ import { cn } from '@/lib/utils';
 import { useAccountStore } from '@/stores/accountStore';
 import { useEffectiveEdition } from '@/components/forms/FormEditionContext';
 import { useObjectList, useObjectLabel, useNoPermissionMessage, type ObjectOption } from '@/lib/objectOptions';
-import { BackendIcon } from '@/components/common/BackendIcon';
+import { BackendVariantIcon } from '@/components/common/BackendIcon';
 import { SECRET_MASK } from '@/lib/jmapUtils';
 import { Command, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList } from '@/components/ui/command';
 import { jmapGet, getAccountId } from '@/services/jmap/client';
@@ -1478,7 +1478,7 @@ function EmbeddedObjectField({
         <Select value={currentType} onValueChange={handleVariantChange} disabled={readOnly}>
           <SelectTrigger>
             <div className="flex flex-1 items-center gap-2 overflow-hidden">
-              <BackendIcon backend={currentType} />
+              <BackendVariantIcon variant={{ name: currentType, label: selectedVariantLabel ?? currentType }} />
               <span className="truncate">
                 {selectedVariantLabel || t('form.selectType', 'Select type...')}
               </span>
@@ -1488,7 +1488,7 @@ function EmbeddedObjectField({
             {resolvedSchema.variants.map((v) => (
               <SelectItem key={v.name} value={v.name}>
                 <span className="flex items-center gap-2">
-                  <BackendIcon backend={v.name} />
+                  <BackendVariantIcon variant={v} />
                   {v.label}
                 </span>
               </SelectItem>