@1agh/maude 0.30.0 → 0.31.0

package/apps/studio/client/panels/IdentityBar.jsx

@@ -0,0 +1,294 @@
+// Phase 28 (epic E3) Task 6 — the GitHub identity rail (sidebar FOOTER).
+//
+// Compact: just an avatar (signed in) or a small "Sign in with GitHub" button
+// (signed out), docked at the bottom of the sidebar. Clicking the avatar opens an
+// account menu UPWARD (New project / Pull a copy / Share / Sign out). Sign-in runs
+// GitHub's device flow (code modal). All chrome is the shell maude DS — solid
+// surfaces, the .st-dialog scrim+card treatment, no canvas-side `.panel`. In a
+// plain browser (no Tauri shell) the rail renders nothing.
+
+import { useEffect, useRef, useState } from 'react';
+
+import CreateProject from './CreateProject.jsx';
+import {
+  fetchIdentity,
+  isNativeApp,
+  isSignedIn,
+  onDeviceCode,
+  openVerification,
+  signIn,
+  signOut,
+} from '../github.js';
+
+function Icon({ name, size = 16 }) {
+  const p = {
+    'chevron-up': <polyline points="3.5 10 8 5.5 12.5 10" />,
+    external: (
+      <>
+        <path d="M6 3.5H3.2A.7.7 0 0 0 2.5 4.2v8.6a.7.7 0 0 0 .7.7h8.6a.7.7 0 0 0 .7-.7V10" />
+        <line x1="8" y1="8" x2="13" y2="3" />
+        <polyline points="9.5 3 13 3 13 6.5" />
+      </>
+    ),
+    copy: (
+      <>
+        <rect x="5.5" y="5.5" width="7.5" height="7.5" rx="1.2" />
+        <path d="M3 10.5V3.2A.7.7 0 0 1 3.7 2.5H10" />
+      </>
+    ),
+    plus: (
+      <>
+        <line x1="8" y1="3" x2="8" y2="13" />
+        <line x1="3" y1="8" x2="13" y2="8" />
+      </>
+    ),
+    download: (
+      <>
+        <line x1="8" y1="2.5" x2="8" y2="10" />
+        <polyline points="4.5 7 8 10.5 11.5 7" />
+        <polyline points="3 12.8 3 13.6 13 13.6 13 12.8" />
+      </>
+    ),
+    invite: (
+      <>
+        <circle cx="6" cy="5.5" r="2.5" />
+        <path d="M2 13.5a4 4 0 0 1 8 0" />
+        <line x1="13" y1="5" x2="13" y2="9" />
+        <line x1="11" y1="7" x2="15" y2="7" />
+      </>
+    ),
+    signout: (
+      <>
+        <path d="M6.5 13.5H3.2a.7.7 0 0 1-.7-.7V3.2a.7.7 0 0 1 .7-.7h3.3" />
+        <line x1="13" y1="8" x2="6.5" y2="8" />
+        <polyline points="10 5 13 8 10 11" />
+      </>
+    ),
+  }[name];
+  return (
+    <svg width={size} height={size} viewBox="0 0 16 16" fill="none" stroke="currentColor" strokeWidth="1.4" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">
+      {p}
+    </svg>
+  );
+}
+
+function GitHubMark({ size = 16 }) {
+  return (
+    <svg width={size} height={size} viewBox="0 0 16 16" fill="currentColor" aria-hidden="true">
+      <path d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82a7.6 7.6 0 0 1 2-.27c.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0 0 16 8c0-4.42-3.58-8-8-8z" />
+    </svg>
+  );
+}
+
+function initialsOf(identity) {
+  const src = (identity?.name || identity?.login || '?').trim();
+  const parts = src.split(/[\s_-]+/).filter(Boolean);
+  const ini = parts.length >= 2 ? parts[0][0] + parts[1][0] : src.slice(0, 2);
+  return ini.toUpperCase();
+}
+
+function Avatar({ identity, size = 26 }) {
+  return (
+    <span className="gi-avatar" style={{ width: size, height: size }}>
+      {initialsOf(identity)}
+    </span>
+  );
+}
+
+export default function IdentityBar() {
+  const native = isNativeApp();
+  const [state, setState] = useState('loading'); // loading | out | in
+  const [identity, setIdentity] = useState(null);
+  const [device, setDevice] = useState(null);
+  const [signing, setSigning] = useState(false);
+  const [error, setError] = useState('');
+  const [menuOpen, setMenuOpen] = useState(false);
+  const [view, setView] = useState(null); // null | 'new' | 'get' | 'share'
+  const [copied, setCopied] = useState(false);
+  const unlistenRef = useRef(null);
+  const railRef = useRef(null);
+
+  useEffect(() => {
+    let alive = true;
+    if (!native) return;
+    (async () => {
+      try {
+        const signed = await isSignedIn();
+        if (!alive) return;
+        if (signed) {
+          const r = await fetchIdentity();
+          if (!alive) return;
+          if (r.ok && r.json?.ok) {
+            setIdentity({ login: r.json.login, name: r.json.name, avatar_url: r.json.avatar_url });
+            setState('in');
+          } else setState('out');
+        } else setState('out');
+      } catch {
+        if (alive) setState('out');
+      }
+    })();
+    return () => {
+      alive = false;
+      unlistenRef.current?.then?.((fn) => fn?.());
+    };
+  }, [native]);
+
+  useEffect(() => {
+    if (!menuOpen) return;
+    const onDoc = (e) => {
+      if (railRef.current && !railRef.current.contains(e.target)) setMenuOpen(false);
+    };
+    document.addEventListener('mousedown', onDoc);
+    return () => document.removeEventListener('mousedown', onDoc);
+  }, [menuOpen]);
+
+  async function handleSignIn() {
+    setError('');
+    setSigning(true);
+    setDevice(null);
+    try {
+      unlistenRef.current = onDeviceCode((payload) => setDevice(payload));
+      const login = await signIn();
+      const r = await fetchIdentity();
+      setIdentity(
+        r.ok && r.json?.ok
+          ? { login: r.json.login, name: r.json.name, avatar_url: r.json.avatar_url }
+          : { login, name: null, avatar_url: null }
+      );
+      setState('in');
+    } catch (e) {
+      setError(String(e?.message || e || 'Sign-in didn’t finish. Please try again.'));
+    } finally {
+      setSigning(false);
+      setDevice(null);
+      unlistenRef.current?.then?.((fn) => fn?.());
+      unlistenRef.current = null;
+    }
+  }
+
+  async function handleSignOut() {
+    setMenuOpen(false);
+    try {
+      await signOut();
+    } catch {
+      /* idempotent */
+    }
+    setIdentity(null);
+    setState('out');
+  }
+
+  function copyCode() {
+    if (!device?.user_code) return;
+    navigator.clipboard?.writeText(device.user_code).then(
+      () => {
+        setCopied(true);
+        setTimeout(() => setCopied(false), 1500);
+      },
+      () => {}
+    );
+  }
+
+  if (!native) return null;
+
+  return (
+    <div className="gi-rail" ref={railRef}>
+      {state === 'loading' && <span className="gi-rail-hint">Checking GitHub…</span>}
+
+      {state === 'out' && (
+        <>
+          <button type="button" className="btn btn--primary btn--sm gi-rail-signin" onClick={handleSignIn} disabled={signing}>
+            <GitHubMark size={15} /> {signing ? 'Starting…' : 'Sign in with GitHub'}
+          </button>
+          {error && <span className="gi-rail-err" title={error}>{error}</span>}
+        </>
+      )}
+
+      {state === 'in' && (
+        <>
+          <button
+            type="button"
+            className={'gi-rail-account' + (menuOpen ? ' is-open' : '')}
+            aria-expanded={menuOpen}
+            aria-haspopup="menu"
+            onClick={() => setMenuOpen((v) => !v)}
+            title={`Signed in as @${identity?.login}`}
+          >
+            <Avatar identity={identity} />
+            <span className="gi-rail-login">@{identity?.login}</span>
+            <span className="gi-rail-caret">
+              <Icon name="chevron-up" size={13} />
+            </span>
+          </button>
+          {menuOpen && (
+            <div className="gi-menu" role="menu" aria-label="GitHub account">
+              <div className="gi-menu-hd">
+                <Avatar identity={identity} size={32} />
+                <span className="gi-menu-id">
+                  <span className="gi-menu-name">{identity?.name || identity?.login}</span>
+                  <span className="gi-menu-login">@{identity?.login} · connected</span>
+                </span>
+              </div>
+              <button type="button" className="gi-menu-item" role="menuitem" onClick={() => { setMenuOpen(false); setView('new'); }}>
+                <Icon name="plus" size={15} /> New project
+              </button>
+              <button type="button" className="gi-menu-item" role="menuitem" onClick={() => { setMenuOpen(false); setView('get'); }}>
+                <Icon name="download" size={15} /> Pull a local copy
+              </button>
+              <button type="button" className="gi-menu-item" role="menuitem" onClick={() => { setMenuOpen(false); setView('share'); }}>
+                <Icon name="invite" size={15} /> Share this project
+              </button>
+              <div className="gi-menu-sep" />
+              <button type="button" className="gi-menu-item gi-menu-item--danger" role="menuitem" onClick={handleSignOut}>
+                <Icon name="signout" size={15} /> Sign out
+              </button>
+            </div>
+          )}
+        </>
+      )}
+
+      {device && (
+        <div className="gi-modal" role="dialog" aria-modal="true" aria-label="Sign in with GitHub" onKeyDown={(e) => { if (e.key === 'Escape') setDevice(null); }}>
+          <div className="gi-scrim" aria-hidden="true" onClick={() => setDevice(null)} />
+          <div className="gi-dialog gi-dialog--code">
+            <div className="gi-dc-head">
+              <span className="gi-dc-marks"><GitHubMark size={26} /></span>
+              <h2>Sign in with GitHub</h2>
+              <p>Maude opened GitHub in your browser. Enter this code to connect your account.</p>
+            </div>
+            <ol className="gi-dc-steps">
+              <li>
+                <span className="gi-dc-step-n">1</span>
+                <span className="gi-dc-step-tx">
+                  Go to <span className="gi-dc-url">{(device.verification_uri || 'github.com/login/device').replace(/^https?:\/\//, '')}</span>
+                  <button type="button" className="btn btn--ghost btn--sm gi-dc-open" onClick={() => openVerification().catch(() => {})}>
+                    <Icon name="external" size={14} /> Open it again
+                  </button>
+                </span>
+              </li>
+              <li>
+                <span className="gi-dc-step-n">2</span>
+                <span className="gi-dc-step-tx">Enter this code to connect Maude</span>
+              </li>
+            </ol>
+            <div className="gi-code">
+              <span className="gi-code-val">{device.user_code}</span>
+              <button type="button" className="btn btn--ghost gi-code-copy" onClick={copyCode} aria-label="Copy the code">
+                <Icon name="copy" size={15} /> {copied ? 'Copied' : 'Copy'}
+              </button>
+            </div>
+            <div className="gi-dc-status" aria-live="polite">
+              <span className="gi-pulse" aria-hidden="true" />
+              <span>Waiting for you to authorize in your browser…</span>
+            </div>
+            <div className="gi-dc-foot">
+              <button type="button" className="btn btn--ghost" onClick={() => setDevice(null)}>Cancel</button>
+              <span className="gi-dc-foot-note">Nothing is stored until you authorize.</span>
+            </div>
+          </div>
+        </div>
+      )}
+
+      {view && <CreateProject view={view} identity={identity} onClose={() => setView(null)} />}
+    </div>
+  );
+}