feat: version 2.6.0 -- barra de progreso rediseñada + icono de compartido

Porcentaje de avance dentro de la barra (antes aparte), fondo gris
visible en vez de casi invisible sobre el tema oscuro. Nuevo icono en
el listado de Proyectos que muestra con quien esta compartido cada
proyecto y su permiso, solo si aplica.

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>

frontend/src/components/SharedWithIcon.jsx

@@ -0,0 +1,50 @@
+import { useState } from 'react';
+import { Users } from 'lucide-react';
+import { Flyout } from './Flyout.jsx';
+import { Badge } from './Badge.jsx';
+import { useUi } from '../context/ui-context.jsx';
+import { getProject } from '../services/projects.js';
+
+// Icono que solo aparece si el proyecto esta compartido (shared_count > 0, ver
+// projects/repository.js#findAll) -- al abrir, carga los miembros (menos el dueno) una sola vez
+// por click y muestra su permiso (Lectura/Escritura).
+export function SharedWithIcon({ projectId, count }) {
+  const { t } = useUi();
+  const [members, setMembers] = useState(null);
+  const [loading, setLoading] = useState(false);
+
+  if (!count) return null;
+
+  async function loadMembers() {
+    if (members) return;
+    setLoading(true);
+    try {
+      const project = await getProject(projectId);
+      setMembers(project.members.filter((m) => m.role_in_project !== 'owner'));
+    } finally {
+      setLoading(false);
+    }
+  }
+
+  return (
+    <Flyout trigger={({ onClick }) => (
+      <button
+        className="icon-btn" title={t('project_shared_with')}
+        onClick={(e) => { e.stopPropagation(); loadMembers(); onClick(); }}
+      >
+        <Users size={16} />
+      </button>
+    )}>
+      <div style={{ padding: '4px 8px 8px', fontWeight: 700, fontSize: '.78rem' }}>{t('project_shared_with')}</div>
+      {loading && <div style={{ padding: '6px 10px', fontSize: '.78rem' }} className="text-muted">{t('common_loading')}</div>}
+      {!loading && members?.map((m) => (
+        <div key={m.user_id} style={{ display: 'flex', alignItems: 'center', gap: 8, padding: '6px 10px' }}>
+          <span style={{ flex: 1, fontSize: '.78rem' }}>{m.name}</span>
+          <Badge color={m.role_in_project === 'write' ? 'success' : 'muted'}>
+            {t(m.role_in_project === 'write' ? 'project_role_write' : 'project_role_read')}
+          </Badge>
+        </div>
+      ))}
+    </Flyout>
+  );
+}

frontend/src/components/StatusBadge.jsx

@@ -16,11 +16,9 @@ export function DueBadge({ status }) {
 
 export function ProgressBar({ value }) {
   return (
-    <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
-      <div className="progress-bar" style={{ flex: 1 }}>
-        <div className="progress-bar-fill" style={{ width: `${value}%` }} />
-      </div>
-      <span style={{ fontSize: '.72rem', width: 36, textAlign: 'right' }}>{Math.round(value)}%</span>
+    <div className="progress-bar">
+      <div className="progress-bar-fill" style={{ width: `${value}%` }} />
+      <span className="progress-bar-label">{Math.round(value)}%</span>
     </div>
   );
 }