@libredb/studio 0.9.7

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

@@ -0,0 +1,284 @@
+'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

@@ -0,0 +1,92 @@
+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

@@ -0,0 +1,84 @@
+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

@@ -0,0 +1,61 @@
+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>
+  );
+}