From de5984b9d619fecc372d611c41563c4103c5a787 Mon Sep 17 00:00:00 2001
From: Milton Gonzalez <mgonzalez@develop.linkedcorp.net>
Date: Thu, 1 Oct 2026 15:12:00 -0500
Subject: [PATCH] feat: version 2.8.4 -- catalogo de logos de marca oculto tras
 boton +
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

El selector de icono generico de Contraseñas queda igual; el catalogo de marcas (simple-icons)
pasa a estar colapsado por defecto detras de un boton "+", y se abre solo si la entrada ya
tenia un logo de marca asignado.

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
---
 CHANGELOG.md                                  |  6 +++
 VERSION                                       |  2 +-
 backend/package.json                          |  2 +-
 frontend/package.json                         |  2 +-
 frontend/src/i18n/messages.js                 |  2 +
 .../src/pages/Contrasenas/ContrasenasPage.jsx | 40 +++++++++++++------
 frontend/src/styles/app.css                   |  2 +
 7 files changed, 40 insertions(+), 16 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 0994170..97236a3 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,5 +1,11 @@
 # Changelog - project.linkedcorp.net
 
+## [2.8.4] - 2026-10-01
+### Changed
+- El catálogo de logos de marca en "Contraseñas" queda oculto por defecto, con un botón "+" para
+  desplegarlo — el catálogo genérico de arriba (los íconos originales) no cambia. Si una entrada
+  ya tiene un logo de marca asignado, el catálogo se abre solo al editarla.
+
 ## [2.8.3] - 2026-10-01
 ### Fixed
 - El PIN de "Contraseñas" (acceso y cambio de PIN) ya no usa `type="password"` en el campo —
diff --git a/VERSION b/VERSION
index 9f8d8a9..2701a22 100644
--- a/VERSION
+++ b/VERSION
@@ -1 +1 @@
-2.8.3
+2.8.4
diff --git a/backend/package.json b/backend/package.json
index 9067b1b..039e7cd 100644
--- a/backend/package.json
+++ b/backend/package.json
@@ -1,6 +1,6 @@
 {
   "name": "project-linkedcorp-backend",
-  "version": "2.8.3",
+  "version": "2.8.4",
   "private": true,
   "type": "module",
   "main": "src/server.js",
diff --git a/frontend/package.json b/frontend/package.json
index 5109a22..81e8a30 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -1,7 +1,7 @@
 {
   "name": "project-linkedcorp-frontend",
   "private": true,
-  "version": "2.8.3",
+  "version": "2.8.4",
   "type": "module",
   "scripts": {
     "dev": "vite",
diff --git a/frontend/src/i18n/messages.js b/frontend/src/i18n/messages.js
index f40c757..1e0a256 100644
--- a/frontend/src/i18n/messages.js
+++ b/frontend/src/i18n/messages.js
@@ -211,6 +211,7 @@ export const messages = {
     vault_field_notes: 'Notas',
     vault_field_icon: 'Ícono',
     vault_icon_auto: 'Automático (inicial del nombre)',
+    vault_icon_more: 'Más íconos (marcas conocidas)',
     vault_password_unchanged_hint: 'Dejar en blanco para no cambiarla',
     vault_reveal: 'Revelar',
     vault_copy: 'Copiar',
@@ -542,6 +543,7 @@ export const messages = {
     vault_field_notes: 'Notes',
     vault_field_icon: 'Icon',
     vault_icon_auto: 'Automatic (name initial)',
+    vault_icon_more: 'More icons (well-known brands)',
     vault_password_unchanged_hint: 'Leave blank to keep it unchanged',
     vault_reveal: 'Reveal',
     vault_copy: 'Copy',
diff --git a/frontend/src/pages/Contrasenas/ContrasenasPage.jsx b/frontend/src/pages/Contrasenas/ContrasenasPage.jsx
index 0366cdd..7b63f5f 100644
--- a/frontend/src/pages/Contrasenas/ContrasenasPage.jsx
+++ b/frontend/src/pages/Contrasenas/ContrasenasPage.jsx
@@ -81,6 +81,7 @@ export default function ContrasenasPage() {
   const [revealedPassword, setRevealedPassword] = useState(null);
   const [passwordVisible, setPasswordVisible] = useState(false);
   const [creating, setCreating] = useState(false);
+  const [showBrandIcons, setShowBrandIcons] = useState(false);
 
   const [changingPin, setChangingPin] = useState(false);
   const [pinChangeForm, setPinChangeForm] = useState({ current: '', next: '', next2: '' });
@@ -180,6 +181,7 @@ export default function ContrasenasPage() {
     setPasswordVisible(false);
     setEditing(false);
     setCreating(false);
+    setShowBrandIcons(!!BRAND_ICONS[entry.icon_key]);
   }
 
   function openCreate() {
@@ -189,6 +191,7 @@ export default function ContrasenasPage() {
     setPasswordVisible(false);
     setEditing(true);
     setCreating(true);
+    setShowBrandIcons(false);
   }
 
   function closePopup() {
@@ -357,19 +360,30 @@ export default function ContrasenasPage() {
                 </button>
               ))}
             </div>
-            <div className="vault-icon-picker vault-icon-picker-brands">
-              {Object.entries(BRAND_ICONS).map(([key, icon]) => (
-                <button
-                  type="button"
-                  key={key}
-                  className={`vault-icon-option brand ${form.iconKey === key ? 'selected' : ''}`}
-                  title={icon.title}
-                  onClick={() => setForm((f) => ({ ...f, iconKey: key }))}
-                >
-                  <BrandSvg icon={icon} size={16} />
-                </button>
-              ))}
-            </div>
+            {showBrandIcons ? (
+              <div className="vault-icon-picker vault-icon-picker-brands">
+                {Object.entries(BRAND_ICONS).map(([key, icon]) => (
+                  <button
+                    type="button"
+                    key={key}
+                    className={`vault-icon-option brand ${form.iconKey === key ? 'selected' : ''}`}
+                    title={icon.title}
+                    onClick={() => setForm((f) => ({ ...f, iconKey: key }))}
+                  >
+                    <BrandSvg icon={icon} size={16} />
+                  </button>
+                ))}
+              </div>
+            ) : (
+              <button
+                type="button"
+                className="vault-icon-option vault-icon-more"
+                title={t('vault_icon_more')}
+                onClick={() => setShowBrandIcons(true)}
+              >
+                <Plus size={16} />
+              </button>
+            )}
           </Field>
         )}
 
diff --git a/frontend/src/styles/app.css b/frontend/src/styles/app.css
index 4ef70c7..e3634f3 100644
--- a/frontend/src/styles/app.css
+++ b/frontend/src/styles/app.css
@@ -396,6 +396,8 @@ table.list-table { width: 100%; border-collapse: collapse; font-size: .8rem; }
 .vault-icon-option.selected { border-color: rgb(var(--accent)); background: rgb(var(--accent) / .15); color: rgb(var(--accent)); }
 .vault-icon-option.brand, .vault-card-icon.brand { background: #fff; }
 .vault-icon-option.brand.selected { border-color: rgb(var(--accent)); }
+.vault-icon-option.vault-icon-more { border-style: dashed; color: rgb(var(--muted)); }
+.vault-icon-option.vault-icon-more:hover { color: rgb(var(--accent)); }
 
 /* --- Overlay de actualizacion (ver UpdaterPanel.jsx) ---
    Bloquea toda la pantalla (no solo el panel) mientras corre scripts/apply-update.sh, porque el