@libredb/studio 0.9.7

package/src/components/SaveQueryModal.tsx

@@ -0,0 +1,104 @@
+"use client";
+
+import React, { useState } from 'react';
+import { 
+  Dialog, DialogContent, DialogHeader, 
+  DialogTitle, DialogFooter, DialogDescription 
+} from './ui/dialog';
+import { Button } from './ui/button';
+import { Input } from './ui/input';
+import { Label } from './ui/label';
+import { Textarea } from './ui/textarea';
+import { Bookmark, Tag } from 'lucide-react';
+
+interface SaveQueryModalProps {
+  isOpen: boolean;
+  onClose: () => void;
+  onSave: (name: string, description: string, tags: string[]) => void;
+  defaultQuery: string;
+}
+
+export function SaveQueryModal({ isOpen, onClose, onSave, defaultQuery }: SaveQueryModalProps) {
+  const [name, setName] = useState('');
+  const [description, setDescription] = useState('');
+  const [tagsInput, setTagsInput] = useState('');
+
+  const handleSave = () => {
+    if (!name) return;
+    const tags = tagsInput.split(',').map(t => t.trim()).filter(t => t);
+    onSave(name, description, tags);
+    setName('');
+    setDescription('');
+    setTagsInput('');
+    onClose();
+  };
+
+  return (
+    <Dialog open={isOpen} onOpenChange={onClose}>
+      <DialogContent className="bg-[#0d0d0d] border-white/10 text-zinc-300 sm:max-w-[425px]">
+        <DialogHeader>
+          <DialogTitle className="text-white flex items-center gap-2">
+            <Bookmark className="w-5 h-5 text-blue-500" /> Save Query
+          </DialogTitle>
+          <DialogDescription className="text-zinc-500">
+            Give your query a name and description to find it easily later.
+          </DialogDescription>
+        </DialogHeader>
+        
+        <div className="grid gap-4 py-4">
+          <div className="grid gap-2">
+            <Label htmlFor="name" className="text-xs font-bold uppercase tracking-widest text-zinc-500">Name</Label>
+            <Input
+              id="name"
+              value={name}
+              onChange={(e) => setName(e.target.value)}
+              placeholder="e.g. Monthly Active Users"
+              className="bg-white/5 border-white/10 focus:ring-blue-500/20"
+            />
+          </div>
+          <div className="grid gap-2">
+            <Label htmlFor="description" className="text-xs font-bold uppercase tracking-widest text-zinc-500">Description</Label>
+            <Textarea
+              id="description"
+              value={description}
+              onChange={(e) => setDescription(e.target.value)}
+              placeholder="What does this query do?"
+              className="bg-white/5 border-white/10 focus:ring-blue-500/20 min-h-[80px]"
+            />
+          </div>
+          <div className="grid gap-2">
+            <Label htmlFor="tags" className="text-xs font-bold uppercase tracking-widest text-zinc-500 flex items-center gap-2">
+              <Tag className="w-3 h-3" /> Tags (comma separated)
+            </Label>
+            <Input
+              id="tags"
+              value={tagsInput}
+              onChange={(e) => setTagsInput(e.target.value)}
+              placeholder="reports, analytics, users"
+              className="bg-white/5 border-white/10 focus:ring-blue-500/20"
+            />
+          </div>
+          <div className="mt-2">
+            <Label className="text-xs font-bold uppercase tracking-widest text-zinc-500 mb-2 block">Preview</Label>
+            <div className="bg-[#050505] p-3 rounded-md border border-white/5 max-h-[100px] overflow-y-auto">
+              <pre className="text-[10px] font-mono text-zinc-500 italic whitespace-pre-wrap break-words">
+                {defaultQuery}
+              </pre>
+            </div>
+          </div>
+        </div>
+
+        <DialogFooter>
+          <Button variant="ghost" onClick={onClose} className="text-zinc-400">Cancel</Button>
+          <Button 
+            onClick={handleSave} 
+            disabled={!name}
+            className="bg-blue-600 hover:bg-blue-500 text-white font-bold"
+          >
+            Save Query
+          </Button>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  );
+}

package/src/components/SavedQueries.tsx

@@ -0,0 +1,128 @@
+"use client";
+
+import React, { useState, useEffect } from 'react';
+import { storage } from '@/lib/storage';
+import { SavedQuery } from '@/lib/types';
+import { 
+  Bookmark, Search, Trash2, Edit3, 
+  Tag, Calendar
+} from 'lucide-react';
+import { Button } from './ui/button';
+import { Input } from './ui/input';
+import { format } from 'date-fns';
+
+interface SavedQueriesProps {
+  onSelectQuery: (query: string) => void;
+  connectionType?: string;
+  refreshTrigger?: number;
+}
+
+export function SavedQueries({ onSelectQuery, connectionType, refreshTrigger }: SavedQueriesProps) {
+  const [queries, setQueries] = useState<SavedQuery[]>([]);
+  const [search, setSearch] = useState('');
+
+  // Refresh queries when refreshTrigger changes (replaces key-based re-mount)
+  useEffect(() => {
+    setQueries(storage.getSavedQueries());
+  }, [refreshTrigger]);
+
+  const filteredQueries = queries.filter(q => {
+    const matchesSearch = q.name.toLowerCase().includes(search.toLowerCase()) || 
+                         q.query.toLowerCase().includes(search.toLowerCase());
+    const matchesType = !connectionType || q.connectionType === connectionType;
+    return matchesSearch && matchesType;
+  });
+
+  const handleDelete = (id: string, e: React.MouseEvent) => {
+    e.stopPropagation();
+    if (confirm('Are you sure you want to delete this saved query?')) {
+      storage.deleteSavedQuery(id);
+      setQueries(storage.getSavedQueries());
+    }
+  };
+
+  return (
+    <div className="h-full flex flex-col bg-[#0a0a0a]">
+      <div className="p-4 border-b border-white/5 flex flex-col gap-4">
+        <h3 className="text-sm font-bold text-zinc-400 uppercase tracking-widest flex items-center gap-2">
+          <Bookmark className="w-4 h-4" /> Saved Queries
+        </h3>
+        
+        <div className="relative">
+          <Search className="absolute left-2.5 top-1/2 -translate-y-1/2 w-3.5 h-3.5 text-zinc-500" />
+          <Input 
+            placeholder="Search saved queries..." 
+            value={search}
+            onChange={(e) => setSearch(e.target.value)}
+            className="pl-8 h-8 bg-white/5 border-white/10 text-xs focus:ring-blue-500/20"
+          />
+        </div>
+      </div>
+
+      <div className="flex-1 overflow-y-auto custom-scrollbar">
+        {filteredQueries.length === 0 ? (
+          <div className="h-full flex flex-col items-center justify-center opacity-20 p-8 text-center">
+            <Bookmark className="w-12 h-12 mb-4" />
+            <p className="text-sm italic">No saved queries found</p>
+          </div>
+        ) : (
+          <div className="grid grid-cols-1 gap-px bg-white/5">
+            {filteredQueries.map((q) => (
+              <div 
+                key={q.id}
+                className="bg-[#0a0a0a] p-4 hover:bg-white/[0.02] transition-colors group cursor-pointer"
+                onClick={() => onSelectQuery(q.query)}
+              >
+                <div className="flex items-start justify-between mb-2">
+                  <div>
+                    <h4 className="text-xs font-bold text-blue-400 mb-1 group-hover:text-blue-300 transition-colors">
+                      {q.name}
+                    </h4>
+                    {q.description && (
+                      <p className="text-[10px] text-zinc-500 line-clamp-1">{q.description}</p>
+                    )}
+                  </div>
+                  <div className="flex items-center gap-1 opacity-0 group-hover:opacity-100 transition-opacity">
+                    <Button variant="ghost" size="icon" className="h-6 w-6 text-zinc-500 hover:text-white">
+                      <Edit3 className="w-3 h-3" />
+                    </Button>
+                    <Button 
+                      variant="ghost" 
+                      size="icon" 
+                      className="h-6 w-6 text-zinc-500 hover:text-red-400"
+                      onClick={(e) => handleDelete(q.id, e)}
+                    >
+                      <Trash2 className="w-3 h-3" />
+                    </Button>
+                  </div>
+                </div>
+
+                <div className="bg-[#050505] border border-white/5 rounded-md p-2 mb-3">
+                  <pre className="text-[10px] font-mono text-zinc-400 line-clamp-3">
+                    {q.query}
+                  </pre>
+                </div>
+
+                <div className="flex items-center justify-between">
+                  <div className="flex items-center gap-2">
+                    <span className="px-1.5 py-0.5 rounded bg-blue-500/10 border border-blue-500/20 text-[9px] font-bold text-blue-400 uppercase tracking-tighter">
+                      {q.connectionType}
+                    </span>
+                    {q.tags?.map(tag => (
+                      <span key={tag} className="flex items-center gap-1 text-[9px] text-zinc-500">
+                        <Tag className="w-2.5 h-2.5" /> {tag}
+                      </span>
+                    ))}
+                  </div>
+                  <span className="text-[9px] text-zinc-600 flex items-center gap-1 font-mono">
+                    <Calendar className="w-2.5 h-2.5" /> {format(q.updatedAt, 'MMM d, yyyy')}
+                  </span>
+                </div>
+              </div>
+            ))}
+          </div>
+        )}
+      </div>
+    </div>
+  );
+}