auramaxx 1.0.0-alpha.4

package/src/components/vault/CredentialList.tsx

@@ -0,0 +1,165 @@
+'use client';
+
+import React, { useMemo } from 'react';
+import { Search, Plus, KeyRound } from 'lucide-react';
+import { Button, TextInput } from '@/components/design-system';
+import { CredentialRow } from './CredentialRow';
+import type { CredentialMeta } from './types';
+
+interface CredentialListProps {
+  credentials: CredentialMeta[];
+  selectedId: string | null;
+  searchQuery: string;
+  onSearchChange: (query: string) => void;
+  onSelect: (id: string) => void;
+  onAdd: () => void;
+  canAdd?: boolean;
+  onOpenGenerator?: () => void;
+  canGenerate?: boolean;
+  onClearFilters?: () => void;
+  hasActiveFilters?: boolean;
+  searchInputRef?: React.Ref<HTMLInputElement>;
+  className?: string;
+  leadingAction?: React.ReactNode;
+}
+
+const normalize = (value: string) => value.trim().toLowerCase();
+const ts = (credential: CredentialMeta) => {
+  const updated = Date.parse(credential.updatedAt);
+  if (Number.isFinite(updated)) return updated;
+  const created = Date.parse(credential.createdAt);
+  if (Number.isFinite(created)) return created;
+  return 0;
+};
+
+const utcDayBucket = (timeMs: number) => {
+  if (!Number.isFinite(timeMs) || timeMs <= 0) return 0;
+  return Math.floor(timeMs / 86_400_000);
+};
+
+const searchRank = (credential: CredentialMeta, query: string) => {
+  const q = normalize(query);
+  if (!q) return 0;
+  const name = normalize(credential.name);
+  const username = normalize(String(credential.meta.username || ''));
+  const url = normalize(String(credential.meta.url || ''));
+  if (name === q) return 3;
+  if (name.startsWith(q) || username.startsWith(q) || url.startsWith(q)) return 2;
+  if (name.includes(q) || username.includes(q) || url.includes(q)) return 1;
+  return 0;
+};
+
+export const CredentialList: React.FC<CredentialListProps> = ({
+  credentials,
+  selectedId,
+  searchQuery,
+  onSearchChange,
+  onSelect,
+  onAdd,
+  canAdd = true,
+  onOpenGenerator,
+  canGenerate = true,
+  onClearFilters,
+  hasActiveFilters = false,
+  searchInputRef,
+  className = 'w-[300px] h-full flex flex-col border-r border-[var(--color-border,#d4d4d8)]',
+  leadingAction,
+}) => {
+  const sorted = useMemo(() => {
+    return [...credentials].sort((a, b) => {
+      const aTs = ts(a);
+      const bTs = ts(b);
+      const aBucket = utcDayBucket(aTs);
+      const bBucket = utcDayBucket(bTs);
+      if (bBucket !== aBucket) return bBucket - aBucket;
+
+      const aFav = a.meta.favorite ? 1 : 0;
+      const bFav = b.meta.favorite ? 1 : 0;
+      if (bFav !== aFav) return bFav - aFav;
+
+      const aRank = searchRank(a, searchQuery);
+      const bRank = searchRank(b, searchQuery);
+      if (bRank !== aRank) return bRank - aRank;
+
+      const aName = normalize(a.name);
+      const bName = normalize(b.name);
+      const lexical = aName.localeCompare(bName);
+      if (lexical !== 0) return lexical;
+
+      return a.id.localeCompare(b.id);
+    });
+  }, [credentials, searchQuery]);
+
+  return (
+    <div className={className}>
+      {/* Pinned header */}
+      <div className="flex items-center gap-2 p-3 border-b border-[var(--color-border,#d4d4d8)]">
+        {leadingAction}
+        <div className="flex-1">
+          <TextInput
+            compact
+            leftElement={<Search size={12} />}
+            placeholder="Search..."
+            value={searchQuery}
+            onChange={(e) => onSearchChange(e.target.value)}
+            inputRef={searchInputRef}
+          />
+        </div>
+        {onOpenGenerator && (
+          <Button
+            variant="secondary"
+            size="sm"
+            onClick={onOpenGenerator}
+            icon={<KeyRound size={10} />}
+            disabled={!canGenerate}
+            title="Generate password"
+            aria-label="Generate password"
+          >
+            GEN
+          </Button>
+        )}
+        <Button
+          size="sm"
+          onClick={onAdd}
+          icon={<Plus size={10} />}
+          disabled={!canAdd}
+          title={canAdd ? 'Create credential' : 'Switch to Active to create credentials'}
+        >
+          ADD
+        </Button>
+      </div>
+
+      {/* Scrollable list */}
+      <div className="flex-1 overflow-y-auto">
+        {sorted.length === 0 ? (
+          <div className="flex items-center justify-center h-full px-4">
+            <div className="text-center">
+              <span className="font-mono text-[10px] text-[var(--color-text-muted,#6b7280)] tracking-widest uppercase block">
+                {hasActiveFilters ? 'No credentials match' : 'No credentials found'}
+              </span>
+              {hasActiveFilters && onClearFilters && (
+                <Button
+                  variant="secondary"
+                  size="sm"
+                  onClick={onClearFilters}
+                  className="mt-3"
+                >
+                  CLEAR FILTERS
+                </Button>
+              )}
+            </div>
+          </div>
+        ) : (
+          sorted.map((credential) => (
+            <CredentialRow
+              key={credential.id}
+              credential={credential}
+              selected={credential.id === selectedId}
+              onClick={() => onSelect(credential.id)}
+            />
+          ))
+        )}
+      </div>
+    </div>
+  );
+};

package/src/components/vault/CredentialRow.tsx

@@ -0,0 +1,97 @@
+'use client';
+
+import React from 'react';
+import { Key, CreditCard, FileText, Star, RefreshCw, Terminal, ShieldCheck } from 'lucide-react';
+import type { CredentialMeta } from './types';
+
+interface CredentialRowProps {
+  credential: CredentialMeta;
+  selected: boolean;
+  onClick: () => void;
+}
+
+const typeIcons: Record<string, React.FC<{ size: number; className?: string }>> = {
+  login: Key,
+  card: CreditCard,
+  note: FileText,
+  apikey: Key,
+  oauth2: RefreshCw,
+  ssh: Terminal,
+  gpg: ShieldCheck,
+};
+
+function getSubtitle(credential: CredentialMeta): string {
+  switch (credential.type) {
+    case 'login':
+      return credential.meta.username || credential.meta.url || '';
+    case 'card':
+      return credential.meta.last4 ? `\u2022\u2022\u2022\u2022 ${credential.meta.last4}` : '';
+    case 'note':
+      return 'Secure Note';
+    case 'apikey':
+      return (credential.meta.key as string) || 'API Key';
+    case 'oauth2':
+      return (credential.meta.scopes as string) || 'OAuth2';
+    case 'ssh':
+      return (credential.meta.fingerprint as string) || (credential.meta.key_type as string) || 'SSH Key';
+    case 'gpg':
+      return (credential.meta.key_id as string) || (credential.meta.uid_email as string) || 'GPG Key';
+    default:
+      return '';
+  }
+}
+
+function getOAuth2ExpiryBadge(credential: CredentialMeta): { label: string; color: string } | null {
+  if (credential.type !== 'oauth2') return null;
+  const expiresAt = credential.meta.expires_at as number | null | undefined;
+  if (!expiresAt) return { label: 'No token', color: '#6b7280' };
+  const now = Math.floor(Date.now() / 1000);
+  if (now >= expiresAt) return { label: 'Expired', color: '#ef4444' };
+  const remaining = expiresAt - now;
+  if (remaining < 300) return { label: '<5m', color: '#f59e0b' };
+  if (remaining < 3600) return { label: `${Math.floor(remaining / 60)}m`, color: '#22c55e' };
+  return { label: `${Math.floor(remaining / 3600)}h`, color: '#22c55e' };
+}
+
+export const CredentialRow: React.FC<CredentialRowProps> = ({ credential, selected, onClick }) => {
+  const Icon = typeIcons[credential.type] || FileText;
+  const subtitle = getSubtitle(credential);
+  const isFavorite = credential.meta.favorite;
+
+  return (
+    <div
+      onClick={onClick}
+      className="flex items-center gap-2.5 px-3 py-2.5 cursor-pointer border-b border-[var(--color-border-muted,#e4e4e7)] transition-colors hover:bg-[var(--color-background-alt,#f4f4f5)]"
+      style={{
+        borderLeft: selected ? '2px solid var(--color-accent, #ccff00)' : '2px solid transparent',
+        background: selected ? 'var(--color-background-alt, #f4f4f5)' : undefined,
+      }}
+    >
+      <Icon size={14} className="text-[var(--color-text-muted,#6b7280)] flex-shrink-0" />
+      <div className="flex-1 min-w-0">
+        <div className="font-mono text-[11px] font-bold text-[var(--color-text,#0a0a0a)] truncate">
+          {credential.name}
+        </div>
+        {subtitle && (
+          <div className="font-mono text-[9px] text-[var(--color-text-muted,#6b7280)] truncate">
+            {subtitle}
+          </div>
+        )}
+      </div>
+      {(() => {
+        const badge = getOAuth2ExpiryBadge(credential);
+        return badge ? (
+          <span
+            className="flex-shrink-0 font-mono text-[8px] font-bold px-1.5 py-0.5 rounded-sm"
+            style={{ color: badge.color, background: `${badge.color}15` }}
+          >
+            {badge.label}
+          </span>
+        ) : null;
+      })()}
+      {isFavorite && (
+        <Star size={10} className="flex-shrink-0" style={{ fill: '#facc15', color: '#facc15' }} />
+      )}
+    </div>
+  );
+};

package/src/components/vault/CredentialShareModal.tsx

@@ -0,0 +1,178 @@
+'use client';
+
+import React, { useEffect, useState } from 'react';
+import { Check, Copy, Link2 } from 'lucide-react';
+import { Button, FilterDropdown, Modal, TextInput } from '@/components/design-system';
+import { api, Api } from '@/lib/api';
+
+interface CredentialShareModalProps {
+  isOpen: boolean;
+  onClose: () => void;
+  credentialId: string;
+  credentialName: string;
+}
+
+type ExpiryPreset = '15m' | '1h' | '24h' | '7d' | '30d';
+type AccessMode = 'anyone' | 'password';
+
+const EXPIRY_OPTIONS: { value: ExpiryPreset; label: string }[] = [
+  { value: '15m', label: '15 Minutes' },
+  { value: '1h', label: '1 Hour' },
+  { value: '24h', label: '24 Hours' },
+  { value: '7d', label: '7 Days' },
+  { value: '30d', label: '30 Days' },
+];
+
+const ACCESS_OPTIONS: { value: AccessMode; label: string }[] = [
+  { value: 'anyone', label: 'Anyone with link' },
+  { value: 'password', label: 'Set password' },
+];
+
+export const CredentialShareModal: React.FC<CredentialShareModalProps> = ({
+  isOpen,
+  onClose,
+  credentialId,
+  credentialName,
+}) => {
+  const [expiresAfter, setExpiresAfter] = useState<ExpiryPreset>('24h');
+  const [accessMode, setAccessMode] = useState<AccessMode>('anyone');
+  const [sharePassword, setSharePassword] = useState('');
+  const [oneTimeOnly, setOneTimeOnly] = useState(false);
+  const [copied, setCopied] = useState(false);
+  const [generating, setGenerating] = useState(false);
+  const [generatedLink, setGeneratedLink] = useState('');
+  const [error, setError] = useState<string | null>(null);
+
+  useEffect(() => {
+    if (!isOpen) return;
+    setError(null);
+    setCopied(false);
+    setGeneratedLink('');
+  }, [isOpen, expiresAfter, accessMode, oneTimeOnly, sharePassword]);
+
+  const handleCopyLink = async () => {
+    setError(null);
+    if (accessMode === 'password' && !sharePassword.trim()) {
+      setError('Password is required when access mode is Set password');
+      return;
+    }
+
+    try {
+      setGenerating(true);
+      const res = await api.post<{
+        success: boolean;
+        share: {
+          token: string;
+          credentialId: string;
+          expiresAt: number;
+          accessMode: AccessMode;
+          oneTimeOnly: boolean;
+        };
+      }>(Api.Wallet, '/credential-shares', {
+        credentialId,
+        expiresAfter,
+        accessMode,
+        oneTimeOnly,
+        ...(accessMode === 'password' ? { password: sharePassword } : {}),
+      });
+
+      const shareUrl = `${window.location.origin}/share/${res.share.token}`;
+      setGeneratedLink(shareUrl);
+      await navigator.clipboard.writeText(shareUrl);
+      setCopied(true);
+      setTimeout(() => setCopied(false), 2000);
+    } catch (err) {
+      setError(err instanceof Error ? err.message : 'Share link generation failed');
+    } finally {
+      setGenerating(false);
+    }
+  };
+
+  const handleClose = () => {
+    setError(null);
+    setCopied(false);
+    setGenerating(false);
+    onClose();
+  };
+
+  return (
+    <Modal
+      isOpen={isOpen}
+      onClose={handleClose}
+      title="Share Credential"
+      subtitle="Share_Link"
+      icon={<Link2 size={16} className="text-[var(--color-text,#0a0a0a)]" />}
+      size="md"
+    >
+      <div className="space-y-4">
+        <div className="font-mono text-[10px] text-[var(--color-text-muted,#6b7280)]">
+          Sharing <span className="text-[var(--color-text,#0a0a0a)] font-bold">{credentialName}</span>
+        </div>
+
+        <FilterDropdown
+          label="Link Expires After"
+          options={EXPIRY_OPTIONS}
+          value={expiresAfter}
+          onChange={(value) => setExpiresAfter(value as ExpiryPreset)}
+          compact
+        />
+
+        <FilterDropdown
+          label="Available To"
+          options={ACCESS_OPTIONS}
+          value={accessMode}
+          onChange={(value) => setAccessMode(value as AccessMode)}
+          compact
+        />
+
+        {accessMode === 'password' && (
+          <TextInput
+            label="Share Password"
+            type="password"
+            value={sharePassword}
+            onChange={(e) => setSharePassword(e.target.value)}
+            placeholder="Enter password"
+            compact
+          />
+        )}
+
+        <label className="flex items-center gap-2 cursor-pointer">
+          <input
+            type="checkbox"
+            checked={oneTimeOnly}
+            onChange={(e) => setOneTimeOnly(e.target.checked)}
+            className="accent-[var(--color-accent,#ccff00)]"
+          />
+          <span className="font-mono text-[10px] text-[var(--color-text,#0a0a0a)]">
+            Can only be viewed one time
+          </span>
+        </label>
+
+        <div className="p-2 border border-[var(--color-border,#d4d4d8)] bg-[var(--color-background-alt,#f4f4f5)]">
+          <div className="font-mono text-[8px] uppercase tracking-widest text-[var(--color-text-faint,#9ca3af)] mb-1">
+            Link Preview
+          </div>
+          <div className="font-mono text-[9px] text-[var(--color-text-muted,#6b7280)] break-all">
+            {generatedLink || 'Link will be generated when you click COPY LINK'}
+          </div>
+        </div>
+
+        {error && (
+          <div className="font-mono text-[9px] text-[var(--color-danger,#ef4444)]">
+            {error}
+          </div>
+        )}
+
+        <div className="flex items-center justify-end gap-2 pt-1">
+          <Button variant="ghost" size="sm" onClick={handleClose}>
+            CLOSE
+          </Button>
+          <Button variant="secondary" size="sm" onClick={handleCopyLink} loading={generating}>
+            {copied ? <Check size={10} /> : <Copy size={10} />}
+            {copied ? 'COPIED' : 'COPY LINK'}
+          </Button>
+        </div>
+      </div>
+    </Modal>
+  );
+};