@closerclick/closer-click-profile 0.1.1 → 0.2.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@closerclick/closer-click-profile",
-  "version": "0.1.1",
+  "version": "0.2.1",
   "description": "Web Component (custom element) <closer-click-profile> reutilizable por cualquier app del ecosistema Closer Click: tarjeta de perfil + reputación (confianza/afinidad, web-of-trust, reputación de la red). Autohosteado, Shadow DOM, temable por CSS vars.",
   "type": "module",
   "main": "src/index.js",

package/src/index.js

@@ -33,7 +33,9 @@
  *     name      nombre/nick a mostrar
  *     since     timestamp ms del primer contacto ("conocido desde")
  *     online    booleano: muestra el punto de en-línea
- *     mode      'edit' (default) | 'view' (solo lectura, sin editor ni footer)
+ *     mode      'edit' (default, calificar a un peer) | 'view' (solo lectura)
+ *               | 'self' (TU perfil: nombre editable que se guarda en el vault,
+ *                 sin calificación; conserva los paneles de reputación)
  *     modal     booleano: envuelve la tarjeta en backdrop + header/footer
  *     heading   título del header (override)
  *     lang      'es' | 'en' | 'auto' (default 'auto')
@@ -42,6 +44,7 @@
  *   Métodos:    el.reload()
  *   Eventos (bubbles, composed):
  *     'cc-profile-rate'    detail { pubkey, indicators, notes }  (tras guardar)
+ *     'cc-profile-name'    detail { pubkey, name }  (mode="self", tras guardar tu nombre)
  *     'cc-profile-close'
  *     'cc-profile-refresh' detail { pubkey }  (botón ↻ del web-of-trust)
  */
@@ -78,6 +81,11 @@ const I18N = {
     saving: 'Guardando…',
     close: 'Cerrar',
     saveError: 'Error al guardar',
+    headingSelf: 'Mi perfil',
+    editName: 'Tu nombre visible',
+    nickPh: 'Tu nombre',
+    saveName: 'Guardar',
+    nameSaved: '✓ Guardado',
     labels: ['Sin calificar', 'Sospechoso', 'Dudoso', 'Confiable', 'Muy confiable', 'De total confianza'],
   },
   en: {
@@ -111,6 +119,11 @@ const I18N = {
     saving: 'Saving…',
     close: 'Close',
     saveError: 'Save error',
+    headingSelf: 'My profile',
+    editName: 'Your display name',
+    nickPh: 'Your name',
+    saveName: 'Save',
+    nameSaved: '✓ Saved',
     labels: ['Unrated', 'Suspicious', 'Doubtful', 'Trustworthy', 'Very trustworthy', 'Fully trusted'],
   },
 }
@@ -138,6 +151,9 @@ const STYLE = `
     --_muted:     var(--ccp-muted, var(--muted, #8a7a66));
     --_accent:    var(--ccp-accent, var(--accent, #c0392b));
     --_accent-2:  var(--ccp-accent-2, var(--accent-2, #a93226));
+    /* Texto sobre el acento (botón primario). Default blanco; las apps con un
+       acento claro (p. ej. lima) lo ponen oscuro vía --ccp-accent-text. */
+    --_accent-text: var(--ccp-accent-text, #fff);
     --_gold:      var(--ccp-gold, var(--gold, #d4a72c));
     --_derived:   var(--ccp-derived, var(--derived, #a37a45));
     --_online:    var(--ccp-online, var(--online, #5a8a3a));
@@ -211,6 +227,18 @@ const STYLE = `
   }
   .identity-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
   .name { font-family: var(--_font-headline); font-weight: 600; font-size: 17px; color: var(--_text); }
+  /* ----- Editor de tu propio nombre (mode="self") ----- */
+  .nick-edit { display: flex; flex-direction: column; gap: 6px; }
+  .nick-label { font-size: 12px; color: var(--_muted); }
+  .nick-row { display: flex; gap: 8px; align-items: center; }
+  .nick-input {
+    flex: 1; min-width: 0; font: inherit; font-size: 15px; color: var(--_text);
+    background: var(--ccp-input-bg, #fff); border: 1px solid var(--_border); border-radius: 8px;
+    padding: 8px 10px;
+  }
+  .nick-input:focus { outline: none; border-color: var(--_accent); }
+  .nick-save { white-space: nowrap; }
+  .nick-saved { font-size: 12px; color: var(--_online); }
   .pubkey {
     background: var(--_bg-3); padding: 2px 8px; border-radius: 6px;
     font-family: var(--_font-mono); font-size: 11.5px; color: var(--_muted);
@@ -284,7 +312,7 @@ const STYLE = `
   /* ----- Footer ----- */
   .foot { display: flex; gap: 10px; justify-content: flex-end; padding: 14px 24px; background: var(--_bg-2); border-top: 1px solid var(--_border); }
   .btn { font: inherit; font-weight: 600; padding: 9px 16px; border-radius: 10px; border: 1px solid transparent; cursor: pointer; }
-  .btn.primary { background: var(--_accent); color: #fff; }
+  .btn.primary { background: var(--_accent); color: var(--_accent-text); }
   .btn.primary:hover:not(:disabled) { background: var(--_accent-2); }
   .btn.primary:disabled { opacity: 0.6; cursor: default; }
   .btn.secondary { background: transparent; color: var(--_text); border-color: var(--_border); }
@@ -309,6 +337,9 @@ class CloserClickProfile extends HTMLElement {
     this._hoverAfin = 0
     this._saving = false
     this._error = ''
+    this._savingName = false
+    this._nameSaved = false
+    this._nameErr = ''
     this._loadToken = 0
     this._onKeydown = this._onKeydown.bind(this)
   }
@@ -346,7 +377,12 @@ class CloserClickProfile extends HTMLElement {
   }
   get _t() { return I18N[this._lang] }
   get _pubkey() { return this.getAttribute('pubkey') || '' }
-  get _editable() { return (this.getAttribute('mode') || 'edit') !== 'view' }
+  get _mode() { return (this.getAttribute('mode') || 'edit').toLowerCase() }
+  // Editor de calificación (confianza/afinidad/notas): solo en 'edit'.
+  get _editable() { return this._mode === 'edit' }
+  // 'self' = tu propio perfil: nombre editable (se escribe al vault), sin
+  // calificación (no te calificas a ti mismo).
+  get _self() { return this._mode === 'self' }
 
   _resetState() {
     this._my = { confianza: 0, afinidad: 0, notes: '' }
@@ -357,6 +393,8 @@ class CloserClickProfile extends HTMLElement {
     this._hover = 0
     this._hoverAfin = 0
     this._error = ''
+    this._nameSaved = false
+    this._nameErr = ''
   }
 
   /* ---- carga de datos vía provider ---- */
@@ -418,6 +456,32 @@ class CloserClickProfile extends HTMLElement {
     }
   }
 
+  // Guarda tu nombre visible (mode="self") en el vault vía provider.setMyName.
+  async _saveName() {
+    if (this._savingName) return
+    const p = this._provider
+    const input = this.shadowRoot.querySelector('.nick-input')
+    if (!input || !p || typeof p.setMyName !== 'function') return
+    const name = (input.value || '').trim()
+    if (!name) return
+    if (name === (this.getAttribute('name') || '')) { this._nameSaved = true; this._render(); return }
+    this._savingName = true
+    this._nameErr = ''
+    this._render()
+    try {
+      await p.setMyName(name)
+      this._savingName = false
+      this._nameSaved = true
+      this._emit('cc-profile-name', { pubkey: this._pubkey, name })
+      this.setAttribute('name', name) // refleja el nombre nuevo (re-render por attributeChangedCallback)
+      this._render()
+    } catch (e) {
+      this._savingName = false
+      this._nameErr = (e && e.message) || this._t.saveError
+      this._render()
+    }
+  }
+
   _close() { this._emit('cc-profile-close', { pubkey: this._pubkey }) }
   _refresh() { this._emit('cc-profile-refresh', { pubkey: this._pubkey }); this.reload() }
   _emit(type, detail) { this.dispatchEvent(new CustomEvent(type, { detail, bubbles: true, composed: true })) }
@@ -471,7 +535,7 @@ class CloserClickProfile extends HTMLElement {
     const name = this.getAttribute('name') || t.contact
     const since = this.getAttribute('since')
     const online = this.hasAttribute('online') && this.getAttribute('online') !== 'false'
-    const heading = this.getAttribute('heading') || (editable ? t.headingEdit : t.headingView)
+    const heading = this.getAttribute('heading') || (this._self ? t.headingSelf : editable ? t.headingEdit : t.headingView)
 
     const confLabel = t.labels[this._hover || this._my.confianza] || t.labels[0]
 
@@ -483,7 +547,16 @@ class CloserClickProfile extends HTMLElement {
           ${online ? '<span class="online-dot"></span>' : ''}
         </div>
         <div class="identity-text">
-          <div class="name">${this._esc(name)}</div>
+          ${this._self ? `
+          <label class="nick-edit">
+            <span class="nick-label">${this._esc(t.editName)}</span>
+            <div class="nick-row">
+              <input class="nick-input" type="text" maxlength="40" value="${this._esc(name === t.contact ? '' : name)}" placeholder="${this._esc(t.nickPh)}" />
+              <button type="button" class="btn primary nick-save" data-savename ${this._savingName ? 'disabled' : ''}>${this._esc(this._savingName ? t.saving : t.saveName)}</button>
+            </div>
+            ${this._nameSaved ? `<span class="nick-saved">${this._esc(t.nameSaved)}</span>` : ''}
+            ${this._nameErr ? `<span class="error">${this._esc(this._nameErr)}</span>` : ''}
+          </label>` : `<div class="name">${this._esc(name)}</div>`}
           <code class="pubkey">${this._esc(this._shortKey(pk))}</code>
           ${since ? `<div class="since">${this._esc(t.knownSince)} ${this._esc(this._fmtDate(since))}</div>` : ''}
         </div>
@@ -632,6 +705,15 @@ class CloserClickProfile extends HTMLElement {
     const refresh = q('[data-refresh]'); if (refresh) refresh.addEventListener('click', () => this._refresh())
     const reload = q('[data-reload]'); if (reload) reload.addEventListener('click', () => this.reload())
 
+    if (this._self) {
+      const savename = q('[data-savename]'); if (savename) savename.addEventListener('click', () => this._saveName())
+      const nickInput = q('.nick-input')
+      if (nickInput) {
+        nickInput.addEventListener('keydown', (e) => { if (e.key === 'Enter') { e.preventDefault(); this._saveName() } })
+        nickInput.addEventListener('input', () => { this._nameSaved = false; this._nameErr = '' })
+      }
+    }
+
     if (this._editable) {
       qa('[data-star]').forEach(btn => {
         const kind = btn.getAttribute('data-star')
@@ -734,6 +816,16 @@ export function createVaultProfileProvider({ identity, reputation } = {}) {
     async rate(pubkey, indicators, notes) {
       return reputation.rate(pubkey, indicators, { notes })
     },
+
+    // --- Tu propia identidad (para mode="self") ---
+    myPubkey,
+    getMyName() { return (identity && identity.me && identity.me.nickname) || null },
+    async setMyName(name) {
+      if (!identity || typeof identity.setMyNickname !== 'function') {
+        throw new Error('closer-click-profile: identity.setMyNickname no disponible')
+      }
+      return identity.setMyNickname(name)
+    },
   }
 }