@libredb/studio 0.9.7 → 0.9.12

package/src/components/admin/tabs/SecurityTab.tsx

@@ -1,284 +0,0 @@
-'use client';
-
-import { useState, useEffect } from 'react';
-import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs';
-import { Badge } from '@/components/ui/badge';
-import { Button } from '@/components/ui/button';
-import { Separator } from '@/components/ui/separator';
-import { Slider } from '@/components/ui/slider';
-import {
-  EyeOff,
-  Lock,
-  Activity,
-  KeyRound,
-  Save,
-  RotateCcw,
-} from 'lucide-react';
-import { MaskingSettings } from '@/components/MaskingSettings';
-import {
-  DEFAULT_THRESHOLDS,
-  type ThresholdConfig,
-} from '@/lib/monitoring-thresholds';
-import { storage } from '@/lib/storage';
-import { toast } from 'sonner';
-
-export function SecurityTab() {
-  return (
-    <div className="space-y-6">
-      <Tabs defaultValue="masking">
-        <TabsList className="bg-transparent border-b border-white/5 rounded-none p-0 h-10 w-full justify-start">
-          <TabsTrigger
-            value="masking"
-            className="gap-2 rounded-none border-b-2 border-transparent data-[state=active]:border-blue-400 data-[state=active]:bg-transparent data-[state=active]:text-blue-400 text-zinc-500 text-xs px-4"
-          >
-            <EyeOff className="h-3.5 w-3.5" />
-            Data Masking
-          </TabsTrigger>
-          <TabsTrigger
-            value="access"
-            className="gap-2 rounded-none border-b-2 border-transparent data-[state=active]:border-blue-400 data-[state=active]:bg-transparent data-[state=active]:text-blue-400 text-zinc-500 text-xs px-4"
-          >
-            <Lock className="h-3.5 w-3.5" />
-            Access
-          </TabsTrigger>
-          <TabsTrigger
-            value="thresholds"
-            className="gap-2 rounded-none border-b-2 border-transparent data-[state=active]:border-blue-400 data-[state=active]:bg-transparent data-[state=active]:text-blue-400 text-zinc-500 text-xs px-4"
-          >
-            <Activity className="h-3.5 w-3.5" />
-            Thresholds
-          </TabsTrigger>
-        </TabsList>
-
-        <TabsContent value="masking" className="mt-4">
-          <MaskingSettings />
-        </TabsContent>
-
-        <TabsContent value="access" className="mt-4">
-          <AccessSummary />
-        </TabsContent>
-
-        <TabsContent value="thresholds" className="mt-4">
-          <ThresholdSettings />
-        </TabsContent>
-      </Tabs>
-    </div>
-  );
-}
-
-function AccessSummary() {
-  return (
-    <div className="grid gap-6 md:grid-cols-2">
-      <div className="rounded-xl border border-white/5 bg-zinc-900/50 p-5 space-y-3">
-        <h3 className="text-sm font-bold text-zinc-300 flex items-center gap-2">
-          <Lock className="h-4 w-4 text-blue-400" />
-          Security & Access
-        </h3>
-        <div className="space-y-3 text-sm">
-          <div className="flex items-center justify-between">
-            <span className="text-zinc-500">Authentication</span>
-            <span className="text-zinc-300">Environment Variable (RBAC)</span>
-          </div>
-          <Separator className="bg-white/5" />
-          <div className="flex items-center justify-between">
-            <span className="text-zinc-500">API Security</span>
-            <div className="flex items-center gap-1.5">
-              <KeyRound className="h-3 w-3 text-zinc-500" />
-              <span className="text-zinc-300">JWT / HTTP-only Cookie</span>
-            </div>
-          </div>
-          <Separator className="bg-white/5" />
-          <div className="flex items-center justify-between">
-            <span className="text-zinc-500">Admin Access</span>
-            <Badge className="bg-emerald-500/10 text-emerald-400 border border-emerald-500/20 text-[10px]">
-              ENABLED
-            </Badge>
-          </div>
-          <div className="flex items-center justify-between">
-            <span className="text-zinc-500">User Access</span>
-            <Badge className="bg-emerald-500/10 text-emerald-400 border border-emerald-500/20 text-[10px]">
-              ENABLED
-            </Badge>
-          </div>
-        </div>
-      </div>
-
-      <div className="rounded-xl border border-white/5 bg-zinc-900/50 p-5 space-y-3">
-        <h3 className="text-sm font-bold text-zinc-300">Connection Security</h3>
-        <div className="space-y-3 text-sm">
-          <div className="flex items-center justify-between">
-            <span className="text-zinc-500">SSL/TLS</span>
-            <Badge variant="secondary" className="text-[10px]">
-              Supported
-            </Badge>
-          </div>
-          <Separator className="bg-white/5" />
-          <div className="flex items-center justify-between">
-            <span className="text-zinc-500">SSH Tunnel</span>
-            <Badge variant="secondary" className="text-[10px]">
-              Supported
-            </Badge>
-          </div>
-          <Separator className="bg-white/5" />
-          <div className="flex items-center justify-between">
-            <span className="text-zinc-500">Data Masking</span>
-            <Badge variant="secondary" className="text-[10px]">
-              Configurable
-            </Badge>
-          </div>
-        </div>
-      </div>
-    </div>
-  );
-}
-
-function ThresholdSettings() {
-  const [thresholds, setThresholds] = useState<ThresholdConfig[]>(DEFAULT_THRESHOLDS);
-  const [hasChanges, setHasChanges] = useState(false);
-
-  useEffect(() => {
-    setThresholds(storage.getThresholdConfig());
-  }, []);
-
-  const updateThreshold = (
-    index: number,
-    field: 'warning' | 'critical',
-    value: number
-  ) => {
-    setThresholds((prev) => {
-      const updated = [...prev];
-      updated[index] = { ...updated[index], [field]: value };
-      return updated;
-    });
-    setHasChanges(true);
-  };
-
-  const handleSave = () => {
-    storage.saveThresholdConfig(thresholds);
-    setHasChanges(false);
-    toast.success('Threshold configuration saved');
-  };
-
-  const handleReset = () => {
-    setThresholds(DEFAULT_THRESHOLDS);
-    storage.saveThresholdConfig(DEFAULT_THRESHOLDS);
-    setHasChanges(false);
-    toast.success('Thresholds reset to defaults');
-  };
-
-  const getSliderColors = (threshold: ThresholdConfig) => {
-    if (threshold.direction === 'above') {
-      return { warn: 'text-amber-400', crit: 'text-red-400' };
-    }
-    return { warn: 'text-amber-400', crit: 'text-red-400' };
-  };
-
-  return (
-    <div className="space-y-6">
-      <div className="rounded-xl border border-white/5 bg-zinc-900/50 p-5">
-        <h3 className="text-sm font-bold text-zinc-300 mb-4 flex items-center gap-2">
-          <Activity className="h-4 w-4 text-blue-400" />
-          Monitoring Thresholds
-        </h3>
-        <p className="text-[11px] text-zinc-500 mb-6">
-          Configure warning and critical thresholds for monitoring alerts. These
-          values are used by the monitoring dashboard to trigger visual alerts.
-        </p>
-
-        <div className="space-y-6">
-          {thresholds.map((threshold, index) => {
-            const colors = getSliderColors(threshold);
-            const isPercent = threshold.metric !== 'deadlocks';
-            const max = isPercent ? 100 : 20;
-
-            return (
-              <div key={threshold.metric} className="space-y-3">
-                <div className="flex items-center justify-between">
-                  <span className="text-sm font-medium text-zinc-300">
-                    {threshold.label}
-                  </span>
-                  <span className="text-[10px] text-zinc-600 uppercase font-bold">
-                    {threshold.direction === 'above'
-                      ? 'Alert when above'
-                      : 'Alert when below'}
-                  </span>
-                </div>
-
-                <div className="grid grid-cols-2 gap-6">
-                  {/* Warning */}
-                  <div className="space-y-2">
-                    <div className="flex items-center justify-between">
-                      <span className={`text-xs font-bold ${colors.warn}`}>
-                        Warning
-                      </span>
-                      <span className="text-xs font-mono text-zinc-400">
-                        {threshold.warning}
-                        {isPercent ? '%' : ''}
-                      </span>
-                    </div>
-                    <Slider
-                      value={[threshold.warning]}
-                      onValueChange={(v) =>
-                        updateThreshold(index, 'warning', v[0])
-                      }
-                      max={max}
-                      step={1}
-                      className="[&_[role=slider]]:bg-amber-500 [&_[role=slider]]:border-amber-500"
-                    />
-                  </div>
-
-                  {/* Critical */}
-                  <div className="space-y-2">
-                    <div className="flex items-center justify-between">
-                      <span className={`text-xs font-bold ${colors.crit}`}>
-                        Critical
-                      </span>
-                      <span className="text-xs font-mono text-zinc-400">
-                        {threshold.critical}
-                        {isPercent ? '%' : ''}
-                      </span>
-                    </div>
-                    <Slider
-                      value={[threshold.critical]}
-                      onValueChange={(v) =>
-                        updateThreshold(index, 'critical', v[0])
-                      }
-                      max={max}
-                      step={1}
-                      className="[&_[role=slider]]:bg-red-500 [&_[role=slider]]:border-red-500"
-                    />
-                  </div>
-                </div>
-
-                {index < thresholds.length - 1 && (
-                  <Separator className="bg-white/5" />
-                )}
-              </div>
-            );
-          })}
-        </div>
-
-        <div className="flex items-center justify-end gap-2 mt-6 pt-4 border-t border-white/5">
-          <Button
-            variant="ghost"
-            size="sm"
-            className="text-zinc-500 hover:text-zinc-300"
-            onClick={handleReset}
-          >
-            <RotateCcw className="w-3.5 h-3.5 mr-1.5" />
-            Reset Defaults
-          </Button>
-          <Button
-            size="sm"
-            className="bg-blue-600 hover:bg-blue-500 text-white"
-            onClick={handleSave}
-            disabled={!hasChanges}
-          >
-            <Save className="w-3.5 h-3.5 mr-1.5" />
-            Save Config
-          </Button>
-        </div>
-      </div>
-    </div>
-  );
-}

package/src/components/community-section.tsx

@@ -1,92 +0,0 @@
-import { Star, Bug, MessageCircle, Code, Languages, Heart } from 'lucide-react';
-
-const communityUrls = {
-  repo: 'https://github.com/libredb/libredb-studio',
-  issues: 'https://github.com/libredb/libredb-studio/issues',
-  discussions: 'https://github.com/libredb/libredb-studio/discussions',
-  contributing: 'https://github.com/libredb/libredb-studio/blob/main/CONTRIBUTING.md',
-  translate: 'https://github.com/libredb/libredb-studio/tree/main/src/lib',
-  sponsor: 'https://github.com/sponsors/cevheri',
-} as const;
-
-const communityActions = [
-  { label: 'Star & Fork', icon: Star, url: communityUrls.repo, color: 'bg-blue-500/15 text-blue-400' },
-  { label: 'Open an Issue', icon: Bug, url: communityUrls.issues, color: 'bg-red-500/15 text-red-400' },
-  { label: 'Discussions', icon: MessageCircle, url: communityUrls.discussions, color: 'bg-cyan-500/15 text-cyan-400' },
-  { label: 'Contribute', icon: Code, url: communityUrls.contributing, color: 'bg-violet-500/15 text-violet-400' },
-  { label: 'Translate', icon: Languages, url: communityUrls.translate, color: 'bg-emerald-500/15 text-emerald-400' },
-  { label: 'Sponsor', icon: Heart, url: communityUrls.sponsor, color: 'bg-pink-500/15 text-pink-400' },
-] as const;
-
-interface CommunitySectionProps {
-  variant: 'desktop' | 'mobile';
-}
-
-export function CommunitySection({ variant }: CommunitySectionProps) {
-  if (variant === 'desktop') {
-    return <DesktopCommunity />;
-  }
-  return <MobileCommunity />;
-}
-
-function DesktopCommunity() {
-  return (
-    <div className="space-y-4">
-      <div className="h-px bg-white/[0.06]" />
-
-      <div className="flex items-center justify-between">
-        <div className="space-y-1">
-          <h3 className="text-sm font-semibold text-zinc-200">Join the Community</h3>
-          <p className="text-xs text-zinc-500">This project is open source. Your contributions make it better!</p>
-        </div>
-        <span className="shrink-0 text-[10px] font-medium px-2.5 py-1 rounded-full bg-emerald-500/10 text-emerald-400 border border-emerald-500/20">
-          Open Source
-        </span>
-      </div>
-
-      <div className="flex flex-wrap gap-2.5">
-        {communityActions.map((action) => (
-          <a
-            key={action.label}
-            href={action.url}
-            target="_blank"
-            rel="noopener noreferrer"
-            className="flex items-center gap-2.5 min-w-[140px] flex-1 px-3 py-2.5 rounded-xl bg-white/[0.04] border border-white/[0.06] hover:bg-white/[0.08] hover:border-white/[0.12] transition-all duration-200 group"
-          >
-            <div className={`flex h-8 w-8 shrink-0 items-center justify-center rounded-lg ${action.color}`}>
-              <action.icon className="h-4 w-4" />
-            </div>
-            <span className="text-xs font-medium text-zinc-400 group-hover:text-zinc-200 transition-colors duration-200">
-              {action.label}
-            </span>
-          </a>
-        ))}
-      </div>
-    </div>
-  );
-}
-
-function MobileCommunity() {
-  return (
-    <div className="space-y-3">
-      <div className="h-px bg-muted" />
-
-      <p className="text-xs font-semibold text-center text-muted-foreground">Join the Community</p>
-
-      <div className="flex flex-wrap justify-center gap-2">
-        {communityActions.map((action) => (
-          <a
-            key={action.label}
-            href={action.url}
-            target="_blank"
-            rel="noopener noreferrer"
-            className="flex items-center gap-1.5 px-3 py-1.5 rounded-full bg-muted text-muted-foreground hover:bg-muted/80 transition-colors text-xs font-medium"
-          >
-            <action.icon className="h-3 w-3" />
-            <span>{action.label}</span>
-          </a>
-        ))}
-      </div>
-    </div>
-  );
-}

package/src/components/icons/db-icons.tsx

@@ -1,84 +0,0 @@
-import React from 'react';
-
-interface IconProps extends React.SVGAttributes<SVGSVGElement> {
-  className?: string;
-}
-
-/** PostgreSQL elephant logo (simplified) */
-export const PostgreSQLIcon: React.FC<IconProps> = ({ className, ...props }) => (
-  <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" className={className} {...props}>
-    <path d="M12 2C7.58 2 4 5.58 4 10c0 2.05.78 3.92 2.05 5.33C5.38 16.46 5 18.15 5 20c0 .55.45 1 1 1h1c.55 0 1-.3 1.2-.75l.8-1.75c.9.32 1.95.5 3 .5s2.1-.18 3-.5l.8 1.75c.2.45.65.75 1.2.75h1c.55 0 1-.45 1-1 0-1.85-.38-3.54-1.05-4.67A7.97 7.97 0 0020 10c0-4.42-3.58-8-8-8z" />
-    <circle cx="9.5" cy="9.5" r="1" fill="currentColor" stroke="none" />
-    <path d="M14 13c-1 1-3 1-4 0" />
-    <path d="M15.5 7.5c.5-1 2-1.5 3-.5" />
-    <path d="M8.5 7.5c-.5-1-2-1.5-3-.5" />
-  </svg>
-);
-
-/** MySQL dolphin logo (simplified) */
-export const MySQLIcon: React.FC<IconProps> = ({ className, ...props }) => (
-  <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" className={className} {...props}>
-    <path d="M4.5 16c1-2 3-3 5.5-3s4.5 1 5.5 3" />
-    <path d="M19 8c-1-3-4-5-7-5S5.5 5 5 8c-.3 1.5.5 3 2 4s3.5 1.5 5 1.5 3.5-.5 5-1.5 2.3-2.5 2-4z" />
-    <path d="M16 6c1.5-.5 3.5 0 4 2s-.5 3.5-1.5 4" />
-    <path d="M12 8v3" />
-    <circle cx="9.5" cy="9" r="0.75" fill="currentColor" stroke="none" />
-    <path d="M8 19l-2 3" />
-    <path d="M16 19l2 3" />
-    <path d="M12 19v3" />
-  </svg>
-);
-
-/** SQLite feather/document logo (simplified) */
-export const SQLiteIcon: React.FC<IconProps> = ({ className, ...props }) => (
-  <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" className={className} {...props}>
-    <path d="M14 2H6a2 2 0 00-2 2v16a2 2 0 002 2h12a2 2 0 002-2V8z" />
-    <polyline points="14 2 14 8 20 8" />
-    <path d="M9 13h6" />
-    <path d="M9 17h3" />
-    <circle cx="12" cy="11" r="0" />
-    <path d="M8 10c1-2 3-3 4.5-2.5S14 10 13.5 12 11 15 9.5 14.5 7 12 8 10z" fill="currentColor" opacity="0.15" stroke="none" />
-  </svg>
-);
-
-/** MongoDB leaf logo */
-export const MongoDBIcon: React.FC<IconProps> = ({ className, ...props }) => (
-  <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" className={className} {...props}>
-    <path d="M12 2C12 2 7 7 7 13c0 3.31 2.24 6 5 6s5-2.69 5-6c0-6-5-11-5-11z" />
-    <path d="M12 22v-3" />
-    <path d="M12 2v9" />
-  </svg>
-);
-
-/** Redis diamond/stack logo */
-export const RedisIcon: React.FC<IconProps> = ({ className, ...props }) => (
-  <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" className={className} {...props}>
-    <path d="M12 3L2 9l10 6 10-6-10-6z" />
-    <path d="M2 15l10 6 10-6" />
-    <path d="M2 9v6" />
-    <path d="M22 9v6" />
-    <path d="M12 15v6" />
-    <path d="M2 12l10 6 10-6" />
-  </svg>
-);
-
-/** Oracle arch/pillar logo (simplified) */
-export const OracleIcon: React.FC<IconProps> = ({ className, ...props }) => (
-  <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" className={className} {...props}>
-    <ellipse cx="12" cy="12" rx="9" ry="5" />
-    <path d="M12 7v10" />
-    <path d="M7.5 9v6" />
-    <path d="M16.5 9v6" />
-  </svg>
-);
-
-/** MSSQL stacked cylinder/database logo (simplified) */
-export const MSSQLIcon: React.FC<IconProps> = ({ className, ...props }) => (
-  <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" className={className} {...props}>
-    <ellipse cx="12" cy="5" rx="8" ry="3" />
-    <path d="M4 5v14c0 1.66 3.58 3 8 3s8-1.34 8-3V5" />
-    <path d="M4 12c0 1.66 3.58 3 8 3s8-1.34 8-3" />
-    <path d="M4 8.5c0 1.66 3.58 3 8 3s8-1.34 8-3" />
-    <path d="M4 15.5c0 1.66 3.58 3 8 3s8-1.34 8-3" />
-  </svg>
-);

package/src/components/libredb-logo.tsx

@@ -1,61 +0,0 @@
-import { useId } from 'react';
-
-interface LibreDBLogoProps {
-  className?: string;
-}
-
-export default function LibreDBLogo({ className }: LibreDBLogoProps) {
-  const svgId = useId().replace(/:/g, '');
-  const logoGradientId = `logo-gradient-${svgId}`;
-  const codeGradientId = `code-gradient-${svgId}`;
-  const glowFilterId = `logo-glow-${svgId}`;
-
-  return (
-    <svg viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg" className={className}>
-      <defs>
-        <linearGradient id={logoGradientId} x1="0%" y1="0%" x2="100%" y2="100%">
-          <stop offset="0%" stopColor="#4F46E5" />
-          <stop offset="100%" stopColor="#9333EA" />
-        </linearGradient>
-        <linearGradient id={codeGradientId} x1="0%" y1="0%" x2="100%" y2="100%">
-          <stop offset="0%" stopColor="#10B981" />
-          <stop offset="100%" stopColor="#3B82F6" />
-        </linearGradient>
-        <filter id={glowFilterId} x="-20%" y="-20%" width="140%" height="140%">
-          <feGaussianBlur stdDeviation="1.4" result="blur" />
-          <feComposite in="SourceGraphic" in2="blur" operator="over" />
-        </filter>
-      </defs>
-      <path
-        d="M20 2L36 11.5V29.5L20 39L4 29.5V11.5L20 2Z"
-        fill={`url(#${logoGradientId})`}
-        fillOpacity="0.05"
-        stroke={`url(#${logoGradientId})`}
-        strokeWidth="1.8"
-        strokeLinejoin="round"
-        opacity="0.88"
-      />
-      <g filter={`url(#${glowFilterId})`}>
-        <path
-          d="M15 15L10 20.5L15 26"
-          stroke={`url(#${codeGradientId})`}
-          strokeWidth="2.5"
-          strokeLinecap="round"
-          strokeLinejoin="round"
-        />
-        <path
-          d="M25 15L30 20.5L25 26"
-          stroke={`url(#${codeGradientId})`}
-          strokeWidth="2.5"
-          strokeLinecap="round"
-          strokeLinejoin="round"
-        />
-      </g>
-      <g opacity="0.7">
-        <rect x="16.25" y="16.8" width="7.5" height="2.1" rx="0.6" fill={`url(#${logoGradientId})`} />
-        <rect x="16.25" y="20" width="7.5" height="2.1" rx="0.6" fill={`url(#${logoGradientId})`} />
-        <rect x="16.25" y="23.2" width="7.5" height="2.1" rx="0.6" fill={`url(#${logoGradientId})`} />
-      </g>
-    </svg>
-  );
-}