axiodb 22.2.2 → 22.4.2

package/electron/src/components/ui/Button.jsx

@@ -0,0 +1,58 @@
+/**
+ * The one button. Variants exist so "primary action" is a decision made once here, not
+ * re-picked per page - the old code had blue, indigo and green all playing that role.
+ *
+ * @param {'primary'|'secondary'|'ghost'|'danger'|'dangerGhost'} [variant]
+ * @param {'sm'|'md'|'lg'} [size]
+ * @param {boolean} [loading] - shows a spinner and blocks interaction
+ * @param {React.ReactNode} [icon] - leading icon, hidden from assistive tech
+ */
+const VARIANTS = {
+  primary:
+    'bg-brand-600 text-white shadow-sm hover:bg-brand-700 active:bg-brand-800 disabled:bg-ink-300',
+  secondary:
+    'bg-white text-ink-700 border border-ink-300 shadow-sm hover:bg-ink-50 hover:border-ink-400 active:bg-ink-100 disabled:text-ink-400',
+  ghost:
+    'text-ink-600 hover:bg-ink-100 hover:text-ink-900 active:bg-ink-200 disabled:text-ink-400',
+  danger:
+    'bg-danger-600 text-white shadow-sm hover:bg-danger-700 active:bg-danger-700 disabled:bg-ink-300',
+  dangerGhost:
+    'text-danger-600 border border-danger-200 hover:bg-danger-50 hover:border-danger-500 active:bg-danger-100 disabled:text-ink-400'
+}
+
+const SIZES = {
+  sm: 'h-8 px-3 text-xs gap-1.5 rounded-lg',
+  md: 'h-10 px-4 text-sm gap-2 rounded-lg',
+  lg: 'h-11 px-5 text-sm gap-2 rounded-xl'
+}
+
+const Button = ({
+  variant = 'primary',
+  size = 'md',
+  loading = false,
+  icon = null,
+  className = '',
+  children,
+  disabled,
+  ...rest
+}) => (
+  <button
+    disabled={disabled || loading}
+    className={`inline-flex items-center justify-center font-medium transition-all duration-150 disabled:cursor-not-allowed disabled:shadow-none active:scale-[0.98] ${VARIANTS[variant]} ${SIZES[size]} ${className}`}
+    {...rest}
+  >
+    {loading
+      ? (
+        <svg className='h-4 w-4 shrink-0 animate-spin' viewBox='0 0 24 24' fill='none' aria-hidden='true'>
+          <circle className='opacity-25' cx='12' cy='12' r='10' stroke='currentColor' strokeWidth='4' />
+          <path className='opacity-75' fill='currentColor' d='M4 12a8 8 0 018-8v4a4 4 0 00-4 4H4z' />
+        </svg>
+        )
+      : icon
+        ? <span className='shrink-0' aria-hidden='true'>{icon}</span>
+        : null}
+    {children}
+  </button>
+)
+
+export default Button

package/electron/src/components/ui/Card.jsx

@@ -0,0 +1,29 @@
+/**
+ * Surface primitive. `interactive` adds the lift-on-hover treatment - only use it when the
+ * whole card is genuinely clickable, otherwise it promises an affordance that isn't there.
+ */
+const Card = ({ interactive = false, className = '', children, ...rest }) => (
+  <div
+    className={`rounded-card border border-ink-200 bg-white shadow-card ${
+      interactive
+        ? 'cursor-pointer transition-all duration-200 hover:-translate-y-0.5 hover:border-ink-300 hover:shadow-float'
+        : ''
+    } ${className}`}
+    {...rest}
+  >
+    {children}
+  </div>
+)
+
+/** Optional header strip: title on the left, actions on the right. */
+export const CardHeader = ({ title, subtitle, action, className = '' }) => (
+  <div className={`flex items-start justify-between gap-4 border-b border-ink-200 px-5 py-4 ${className}`}>
+    <div className='min-w-0'>
+      <h3 className='truncate text-sm font-semibold text-ink-900'>{title}</h3>
+      {subtitle && <p className='mt-0.5 truncate text-xs text-ink-500'>{subtitle}</p>}
+    </div>
+    {action}
+  </div>
+)
+
+export default Card

package/electron/src/components/ui/ErrorBoundary.jsx

@@ -0,0 +1,108 @@
+import React from "react";
+
+class ErrorBoundary extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = { hasError: false, error: null, errorInfo: null };
+  }
+
+  static getDerivedStateFromError(error) {
+    return { hasError: true, error };
+  }
+
+  componentDidCatch(error, errorInfo) {
+    console.error("ErrorBoundary caught an unhandled error:", error, errorInfo);
+    this.setState({ errorInfo });
+  }
+
+  handleReset = () => {
+    this.setState({ hasError: false, error: null, errorInfo: null });
+    if (typeof this.props.onReset === "function") {
+      this.props.onReset();
+    } else {
+      window.location.reload();
+    }
+  };
+
+  handleDisconnect = () => {
+    try {
+      localStorage.removeItem("axiodb_session");
+      if (window.electronAPI?.clearCookies) {
+        window.electronAPI.clearCookies();
+      }
+    } catch {
+      // ignore
+    }
+    window.location.hash = "#/";
+    window.location.reload();
+  };
+
+  render() {
+    if (this.state.hasError) {
+      const errorMsg = this.state.error?.message || "An unexpected rendering error occurred.";
+      const errorStack = this.state.error?.stack || this.state.errorInfo?.componentStack || "";
+
+      return (
+        <div className="min-h-screen w-full bg-slate-50 flex flex-col items-center justify-center p-6 text-slate-800 font-sans select-none">
+          <div className="max-w-lg w-full bg-white border border-slate-200 rounded-2xl p-6 shadow-md text-center">
+            {/* Warning Icon */}
+            <div className="w-14 h-14 rounded-2xl bg-amber-50 text-amber-600 border border-amber-200 flex items-center justify-center mx-auto mb-4 shadow-xs">
+              <svg className="w-7 h-7" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                <path
+                  strokeLinecap="round"
+                  strokeLinejoin="round"
+                  strokeWidth={2}
+                  d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z"
+                />
+              </svg>
+            </div>
+
+            <h2 className="text-lg font-bold text-slate-900 mb-1">Application Error</h2>
+            <p className="text-xs text-slate-500 mb-4 leading-relaxed">
+              AxioDB Control encountered a problem while rendering this view. Your databases and server data remain safe.
+            </p>
+
+            {/* Error message card */}
+            <div className="bg-red-50 border border-red-200 rounded-lg p-3 text-left mb-4">
+              <p className="text-xs font-mono text-red-800 font-semibold break-words">{errorMsg}</p>
+            </div>
+
+            {/* Action buttons */}
+            <div className="flex items-center justify-center gap-2.5 mb-4">
+              <button
+                type="button"
+                onClick={this.handleReset}
+                className="px-4 py-2 rounded-lg bg-emerald-600 hover:bg-emerald-700 active:scale-[0.98] text-white text-xs font-bold transition-all shadow-xs"
+              >
+                Reload View
+              </button>
+              <button
+                type="button"
+                onClick={this.handleDisconnect}
+                className="px-4 py-2 rounded-lg bg-slate-100 hover:bg-slate-200 border border-slate-200 text-slate-700 text-xs font-semibold transition-all"
+              >
+                Return to Connection Hub
+              </button>
+            </div>
+
+            {/* Collapsible Details */}
+            {errorStack && (
+              <details className="text-left group">
+                <summary className="text-[11px] font-mono text-slate-400 hover:text-slate-600 cursor-pointer select-none">
+                  Show stack trace
+                </summary>
+                <pre className="mt-2 p-2.5 rounded bg-slate-900 text-slate-200 text-[10px] font-mono overflow-auto max-h-40 leading-tight">
+                  {errorStack}
+                </pre>
+              </details>
+            )}
+          </div>
+        </div>
+      );
+    }
+
+    return this.props.children;
+  }
+}
+
+export default ErrorBoundary;

package/electron/src/components/ui/Feedback.jsx

@@ -0,0 +1,66 @@
+/**
+ * Small shared pieces of feedback: status badges, skeletons, empty states and alerts.
+ * Kept together because they are each a handful of lines and are almost always imported
+ * alongside one another.
+ */
+
+const BADGE_TONES = {
+  neutral: 'bg-ink-100 text-ink-700 ring-ink-200',
+  brand: 'bg-brand-50 text-brand-700 ring-brand-200',
+  danger: 'bg-danger-50 text-danger-700 ring-danger-200',
+  warn: 'bg-warn-50 text-warn-700 ring-warn-200',
+  info: 'bg-info-50 text-info-700 ring-info-200'
+}
+
+/** @param {'neutral'|'brand'|'danger'|'warn'|'info'} [tone] */
+export const Badge = ({ tone = 'neutral', dot = false, className = '', children }) => (
+  <span
+    className={`inline-flex items-center gap-1.5 rounded-full px-2.5 py-1 text-xs font-medium ring-1 ring-inset ${BADGE_TONES[tone]} ${className}`}
+  >
+    {dot && <span className='h-1.5 w-1.5 rounded-full bg-current' aria-hidden='true' />}
+    {children}
+  </span>
+)
+
+/**
+ * Loading placeholder. Give it the dimensions of the content it stands in for - a skeleton
+ * that doesn't match causes a layout jump the moment real data lands.
+ */
+export const Skeleton = ({ className = '' }) => (
+  <div className={`skeleton rounded-md ${className}`} aria-hidden='true' />
+)
+
+/**
+ * Shown when a list has no rows. Always offers the action that would create the first one -
+ * an empty state without a next step is a dead end.
+ */
+export const EmptyState = ({ icon, title, description, action, className = '' }) => (
+  <div className={`flex flex-col items-center justify-center px-6 py-16 text-center ${className}`}>
+    {icon && (
+      <div className='mb-4 flex h-14 w-14 items-center justify-center rounded-2xl bg-ink-100 text-ink-400'>
+        {icon}
+      </div>
+    )}
+    <h3 className='text-base font-semibold text-ink-900'>{title}</h3>
+    {description && <p className='mt-1.5 max-w-sm text-sm text-ink-500'>{description}</p>}
+    {action && <div className='mt-6'>{action}</div>}
+  </div>
+)
+
+const ALERT_TONES = {
+  danger: 'border-danger-200 bg-danger-50 text-danger-700',
+  warn: 'border-warn-200 bg-warn-50 text-warn-700',
+  info: 'border-info-200 bg-info-50 text-info-700',
+  brand: 'border-brand-200 bg-brand-50 text-brand-700'
+}
+
+/** @param {'danger'|'warn'|'info'|'brand'} [tone] */
+export const Alert = ({ tone = 'info', title, className = '', children }) => (
+  <div
+    role={tone === 'danger' ? 'alert' : 'status'}
+    className={`animate-fadeIn rounded-lg border px-4 py-3 text-sm ${ALERT_TONES[tone]} ${className}`}
+  >
+    {title && <p className='font-semibold'>{title}</p>}
+    {children && <div className={title ? 'mt-1' : ''}>{children}</div>}
+  </div>
+)

package/electron/src/components/ui/Field.jsx

@@ -0,0 +1,65 @@
+import { useId } from 'react'
+
+/**
+ * Labelled input. Bundles label, hint and error so a form field can't ship without a label
+ * wired to its control, and so error styling is identical everywhere.
+ */
+export const Input = ({ label, hint, error, mono = false, className = '', ...rest }) => {
+  const id = useId()
+
+  return (
+    <div className={className}>
+      {label && (
+        <label htmlFor={id} className='mb-1.5 block text-sm font-medium text-ink-700'>
+          {label}
+        </label>
+      )}
+      <input
+        id={id}
+        aria-invalid={Boolean(error)}
+        aria-describedby={error || hint ? `${id}-desc` : undefined}
+        className={`w-full rounded-lg border bg-white px-3 py-2 text-sm text-ink-900 shadow-sm transition-all placeholder:text-ink-400 focus:outline-none focus:ring-2 ${
+          error
+            ? 'border-danger-500 focus:border-danger-500 focus:ring-danger-500/30'
+            : 'border-ink-300 focus:border-brand-500 focus:ring-brand-500/25'
+        } ${mono ? 'font-mono' : ''}`}
+        {...rest}
+      />
+      {(error || hint) && (
+        <p id={`${id}-desc`} className={`mt-1.5 text-xs ${error ? 'text-danger-600' : 'text-ink-500'}`}>
+          {error || hint}
+        </p>
+      )}
+    </div>
+  )
+}
+
+/** Same contract as Input, for multi-line values. */
+export const Textarea = ({ label, hint, error, mono = true, className = '', ...rest }) => {
+  const id = useId()
+
+  return (
+    <div className={className}>
+      {label && (
+        <label htmlFor={id} className='mb-1.5 block text-sm font-medium text-ink-700'>
+          {label}
+        </label>
+      )}
+      <textarea
+        id={id}
+        aria-invalid={Boolean(error)}
+        className={`w-full rounded-lg border bg-white px-3 py-2 text-sm text-ink-900 shadow-sm transition-all placeholder:text-ink-400 focus:outline-none focus:ring-2 ${
+          error
+            ? 'border-danger-500 focus:border-danger-500 focus:ring-danger-500/30'
+            : 'border-ink-300 focus:border-brand-500 focus:ring-brand-500/25'
+        } ${mono ? 'font-mono' : ''}`}
+        {...rest}
+      />
+      {(error || hint) && (
+        <p className={`mt-1.5 text-xs ${error ? 'text-danger-600' : 'text-ink-500'}`}>
+          {error || hint}
+        </p>
+      )}
+    </div>
+  )
+}

package/electron/src/components/ui/MetricCard.jsx

@@ -0,0 +1,104 @@
+import { useEffect, useRef, useState } from 'react'
+import Card from './Card'
+import { Skeleton } from './Feedback'
+
+/**
+ * Counts from the previous value to the next one instead of snapping. Uses rAF and eases
+ * out, so the number settles rather than stopping dead.
+ *
+ * Respects prefers-reduced-motion by jumping straight to the target - an animated number is
+ * decoration, and for anyone who has asked for less motion it is also hard to read.
+ */
+function useCountUp (target, duration = 700) {
+  const [display, setDisplay] = useState(target)
+  const fromRef = useRef(target)
+
+  useEffect(() => {
+    const reduced = window.matchMedia('(prefers-reduced-motion: reduce)').matches
+    const from = fromRef.current
+
+    if (reduced || from === target) {
+      fromRef.current = target
+      setDisplay(target)
+      return
+    }
+
+    let frame
+    const start = performance.now()
+
+    const tick = (now) => {
+      const progress = Math.min((now - start) / duration, 1)
+      const eased = 1 - Math.pow(1 - progress, 3)
+      setDisplay(from + (target - from) * eased)
+      if (progress < 1) frame = requestAnimationFrame(tick)
+      else fromRef.current = target
+    }
+
+    frame = requestAnimationFrame(tick)
+    return () => cancelAnimationFrame(frame)
+  }, [target, duration])
+
+  return display
+}
+
+const ACCENTS = {
+  brand: 'bg-brand-50 text-brand-600',
+  indigo: 'bg-indigo-50 text-indigo-600',
+  amber: 'bg-amber-50 text-amber-600',
+  cyan: 'bg-cyan-50 text-cyan-600',
+  pink: 'bg-pink-50 text-pink-600'
+}
+
+/**
+ * A single headline number.
+ *
+ * @param {string} label
+ * @param {number} value
+ * @param {string} [unit] - rendered smaller, after the number
+ * @param {React.ReactNode} [icon]
+ * @param {'brand'|'indigo'|'amber'|'cyan'|'pink'} [accent]
+ * @param {boolean} [loading]
+ * @param {number} [decimals]
+ * @param {React.ReactNode} [footer] - sparkline, progress bar, or a secondary figure
+ */
+const MetricCard = ({
+  label,
+  value = 0,
+  unit,
+  icon,
+  accent = 'brand',
+  loading = false,
+  decimals = 0,
+  footer = null
+}) => {
+  const animated = useCountUp(loading ? 0 : value)
+
+  return (
+    <Card className='p-5'>
+      <div className='flex items-start justify-between gap-3'>
+        <div className='min-w-0'>
+          <p className='text-xs font-medium uppercase tracking-wide text-ink-500'>{label}</p>
+          {loading
+            ? <Skeleton className='mt-2 h-8 w-24' />
+            : (
+              <p className='mt-1.5 flex items-baseline gap-1 text-2xl font-bold tabular-nums text-ink-900'>
+                {animated.toLocaleString(undefined, {
+                  minimumFractionDigits: decimals,
+                  maximumFractionDigits: decimals
+                })}
+                {unit && <span className='text-sm font-medium text-ink-500'>{unit}</span>}
+              </p>
+              )}
+        </div>
+        {icon && (
+          <span className={`flex h-11 w-11 shrink-0 items-center justify-center rounded-xl ${ACCENTS[accent]}`}>
+            {icon}
+          </span>
+        )}
+      </div>
+      {footer && <div className='mt-4'>{loading ? <Skeleton className='h-2 w-full' /> : footer}</div>}
+    </Card>
+  )
+}
+
+export default MetricCard

package/electron/src/components/ui/Modal.jsx

@@ -0,0 +1,119 @@
+import { useEffect, useRef } from 'react'
+
+const SIZES = {
+  sm: 'max-w-md',
+  md: 'max-w-lg',
+  lg: 'max-w-2xl',
+  xl: 'max-w-4xl'
+}
+
+const Modal = ({
+  isOpen,
+  onClose,
+  title,
+  subtitle,
+  icon = null,
+  size = 'md',
+  tone = 'default',
+  footer = null,
+  children
+}) => {
+  const panelRef = useRef(null)
+  const returnFocusRef = useRef(null)
+
+  const onCloseRef = useRef(onClose)
+  useEffect(() => {
+    onCloseRef.current = onClose
+  }, [onClose])
+
+  useEffect(() => {
+    if (!isOpen) return
+
+    returnFocusRef.current = document.activeElement
+    const { overflow } = document.body.style
+    document.body.style.overflow = 'hidden'
+
+    const onKeyDown = (event) => {
+      if (event.key === 'Escape') onCloseRef.current?.()
+    }
+    document.addEventListener('keydown', onKeyDown)
+
+    const focusTimer = requestAnimationFrame(() => {
+      const firstFocusable = panelRef.current?.querySelector('input:not([disabled]), textarea:not([disabled]), button:not([disabled]), select:not([disabled]')
+      if (firstFocusable instanceof HTMLElement) firstFocusable.focus()
+      else panelRef.current?.focus()
+    })
+
+    return () => {
+      document.removeEventListener('keydown', onKeyDown)
+      cancelAnimationFrame(focusTimer)
+      document.body.style.overflow = overflow
+      if (returnFocusRef.current instanceof HTMLElement) returnFocusRef.current.focus()
+    }
+  }, [isOpen])
+
+  if (!isOpen) return null
+
+  return (
+    <div
+      className='fixed inset-0 z-50 flex items-center justify-center bg-slate-900/25 p-4 backdrop-blur-xs select-none'
+      onMouseDown={(event) => {
+        if (event.target === event.currentTarget) onCloseRef.current?.()
+      }}
+    >
+      <div
+        ref={panelRef}
+        role='dialog'
+        aria-modal='true'
+        aria-label={title}
+        tabIndex={-1}
+        className={`animate-popIn flex max-h-[92vh] w-full ${SIZES[size]} flex-col overflow-hidden rounded-xl bg-white shadow-xl border border-slate-200 outline-none`}
+      >
+        <div
+          className={`flex items-center justify-between gap-4 px-5 py-3.5 border-b ${
+            tone === 'danger'
+              ? 'bg-red-50/80 border-red-200 text-red-900'
+              : 'bg-slate-50/90 border-slate-200 text-slate-900'
+          }`}
+        >
+          <div className='flex min-w-0 items-center gap-3'>
+            {icon && (
+              <span
+                className={`flex h-8 w-8 shrink-0 items-center justify-center rounded-lg ${
+                  tone === 'danger'
+                    ? 'bg-red-100 text-red-600'
+                    : 'bg-emerald-50 text-emerald-600 border border-emerald-200'
+                }`}
+              >
+                {icon}
+              </span>
+            )}
+            <div className='min-w-0'>
+              <h3 className='truncate text-sm font-bold text-slate-800'>{title}</h3>
+              {subtitle && <p className='truncate font-mono text-xs text-slate-500'>{subtitle}</p>}
+            </div>
+          </div>
+          <button
+            onClick={onClose}
+            aria-label='Close dialog'
+            className='shrink-0 rounded-lg p-1 text-slate-400 transition-colors hover:bg-slate-200/60 hover:text-slate-700'
+          >
+            <svg className='h-4 w-4' fill='none' viewBox='0 0 24 24' stroke='currentColor'>
+              <path strokeLinecap='round' strokeLinejoin='round' strokeWidth='2' d='M6 18L18 6M6 6l12 12' />
+            </svg>
+          </button>
+        </div>
+
+        <div className='flex-1 overflow-y-auto p-5 text-slate-700'>{children}</div>
+
+        {footer && (
+          <div className='flex items-center justify-end gap-2.5 border-t border-slate-200 bg-slate-50/80 px-5 py-3'>
+            {footer}
+          </div>
+        )}
+      </div>
+    </div>
+  )
+}
+
+export default Modal

package/electron/src/components/ui/Page.jsx

@@ -0,0 +1,40 @@
+/**
+ * Standard page container.
+ *
+ * Fluid up to 1920px rather than the old 1280px cap, so a 1080p or 1440p screen is actually
+ * used instead of showing ~320px of empty gutter on each side. The cap only engages on
+ * ultrawide displays, where an unbounded row of cards would stretch past the point of being
+ * scannable.
+ *
+ * Prose is the exception - see `prose` below. Full-width body text is hard to read because
+ * the eye loses its place on the return sweep, so text-heavy pages constrain the measure
+ * even though their page frame is fluid.
+ */
+const Page = ({ className = '', children }) => (
+  <div className={`mx-auto w-full max-w-[120rem] px-4 py-8 sm:px-6 lg:px-8 ${className}`}>
+    {children}
+  </div>
+)
+
+/**
+ * Page title block. Optional actions sit on the right and wrap underneath on small screens.
+ */
+export const PageHeader = ({ title, description, action, children, className = '' }) => (
+  <header className={`mb-8 ${className}`}>
+    {children}
+    <div className='flex flex-col gap-4 sm:flex-row sm:items-end sm:justify-between'>
+      <div className='min-w-0'>
+        <h1 className='text-2xl font-bold tracking-tight text-ink-900 sm:text-3xl'>{title}</h1>
+        {description && <p className='mt-1 text-sm text-ink-500'>{description}</p>}
+      </div>
+      {action}
+    </div>
+  </header>
+)
+
+/** Constrains a column of body text to a readable measure (~75 characters). */
+export const Prose = ({ className = '', children }) => (
+  <div className={`max-w-[70ch] ${className}`}>{children}</div>
+)
+
+export default Page

package/electron/src/config/key.js

@@ -0,0 +1,11 @@
+import { useConnectionStore } from "../store/connectionStore";
+
+export const isDevelopmentMode = import.meta.env.DEV;
+
+// When set to empty string, all relative API paths `/api/...` are resolved
+// against the active connection Base URL in axios request interceptors.
+export const BASE_API_URL = "";
+
+export const getActiveBaseUrl = () => {
+  return useConnectionStore.getState().getBaseUrl();
+};