@liorandb/studio 0.0.1

package/template/src/components/QueryEditor.tsx

@@ -0,0 +1,189 @@
+'use client';
+
+import React, { useState } from 'react';
+import { Play, Copy } from 'lucide-react';
+import { useAppStore } from '@/store';
+import { LioranDBService } from '@/lib/lioran';
+import { useToast } from './Toast';
+import { formatJSON, copyToClipboard } from '@/lib/utils';
+import { JsonViewer } from './JsonViewer';
+
+interface QueryEditorProps {}
+
+export function QueryEditor({}: QueryEditorProps) {
+  const { currentDatabase, selectedCollection, queryResults, isLoading } = useAppStore();
+  const { addToast } = useToast();
+
+  const [queryMode, setQueryMode] = useState<'find' | 'aggregate'>('find');
+  const [filter, setFilter] = useState('{}');
+  const [resultMode, setResultMode] = useState<'json' | 'count'>('json');
+
+  async function executeQuery() {
+    if (!currentDatabase || !selectedCollection) {
+      addToast('Please select a database and collection', 'warning');
+      return;
+    }
+
+    try {
+      let filterObj: Record<string, any> = {};
+      try {
+        filterObj = JSON.parse(filter);
+      } catch {
+        addToast('Invalid JSON filter', 'error');
+        return;
+      }
+
+      useAppStore.setState({ isLoading: true });
+
+      const startTime = performance.now();
+      const { documents, count } = await LioranDBService.find(
+        currentDatabase,
+        selectedCollection,
+        filterObj,
+        100
+      );
+      const executionTime = Math.round(performance.now() - startTime);
+
+      useAppStore.setState({
+        queryResults: {
+          data: documents,
+          count,
+          executionTime,
+        },
+      });
+
+      addToast(`Query executed in ${executionTime}ms`, 'success');
+    } catch (error) {
+      addToast(`Query error: ${error}`, 'error');
+    } finally {
+      useAppStore.setState({ isLoading: false });
+    }
+  }
+
+  async function copyResults() {
+    if (!queryResults) return;
+    try {
+      await copyToClipboard(formatJSON(queryResults.data));
+      addToast('Results copied to clipboard', 'success');
+    } catch {
+      addToast('Failed to copy', 'error');
+    }
+  }
+
+  return (
+    <div className="flex flex-col h-full gap-4 p-4">
+      {/* Query Editor */}
+      <div className="flex-1 flex flex-col gap-2">
+        <div className="flex items-center justify-between">
+          <h3 className="text-sm font-semibold text-slate-100">Query</h3>
+          <div className="flex gap-2">
+            <button
+              onClick={() => setQueryMode('find')}
+              className={`px-2 py-1 text-xs rounded transition ${
+                queryMode === 'find'
+                  ? 'bg-emerald-600 text-white'
+                  : 'bg-slate-800 text-slate-400 hover:text-slate-200'
+              }`}
+            >
+              Find
+            </button>
+            <button
+              onClick={() => setQueryMode('aggregate')}
+              className={`px-2 py-1 text-xs rounded transition ${
+                queryMode === 'aggregate'
+                  ? 'bg-emerald-600 text-white'
+                  : 'bg-slate-800 text-slate-400 hover:text-slate-200'
+              }`}
+              disabled
+            >
+              Aggregate (Soon)
+            </button>
+          </div>
+        </div>
+
+        <textarea
+          value={filter}
+          onChange={(e) => setFilter(e.target.value)}
+          placeholder='{"field": "value"}'
+          className="flex-1 bg-slate-900 border border-slate-800 rounded font-mono text-sm text-slate-100 p-3 focus:outline-none focus:border-emerald-500 focus:ring-1 focus:ring-emerald-500 resize-none"
+        />
+
+        <button
+          onClick={executeQuery}
+          disabled={isLoading || !currentDatabase || !selectedCollection}
+          className="flex items-center justify-center gap-2 bg-emerald-600 hover:bg-emerald-700 text-white rounded py-2 transition disabled:opacity-50 disabled:cursor-not-allowed font-medium"
+        >
+          <Play size={16} />
+          <span>Execute Query</span>
+        </button>
+      </div>
+
+      {/* Results */}
+      {queryResults && (
+        <div className="flex-1 flex flex-col gap-2 border-t border-slate-800 pt-4">
+          <div className="flex items-center justify-between">
+            <div className="flex items-center gap-3">
+              <h3 className="text-sm font-semibold text-slate-100">Results</h3>
+              <span className="text-xs text-slate-400">
+                {queryResults.count} documents • {queryResults.executionTime}ms
+              </span>
+            </div>
+
+            <div className="flex gap-2">
+              <button
+                onClick={() => setResultMode('json')}
+                className={`px-2 py-1 text-xs rounded transition ${
+                  resultMode === 'json'
+                    ? 'bg-emerald-600 text-white'
+                    : 'bg-slate-800 text-slate-400 hover:text-slate-200'
+                }`}
+              >
+                JSON
+              </button>
+              <button
+                onClick={() => setResultMode('count')}
+                className={`px-2 py-1 text-xs rounded transition ${
+                  resultMode === 'count'
+                    ? 'bg-emerald-600 text-white'
+                    : 'bg-slate-800 text-slate-400 hover:text-slate-200'
+                }`}
+              >
+                Count
+              </button>
+              <button
+                onClick={copyResults}
+                className="px-2 py-1 text-xs rounded bg-slate-800 text-slate-400 hover:text-slate-200 transition flex items-center gap-1"
+              >
+                <Copy size={12} />
+                Copy
+              </button>
+            </div>
+          </div>
+
+          <div className="flex-1 overflow-auto bg-slate-900 rounded border border-slate-800 p-3">
+            {resultMode === 'count' ? (
+              <div className="text-center text-slate-300">
+                <div className="text-4xl font-bold text-emerald-400 mb-2">
+                  {queryResults.count}
+                </div>
+                <p className="text-slate-400">documents matched</p>
+              </div>
+            ) : (
+              <div className="font-mono text-xs space-y-2">
+                {queryResults.data.length === 0 ? (
+                  <p className="text-slate-400">No results</p>
+                ) : (
+                  queryResults.data.map((doc, idx) => (
+                    <div key={idx} className="text-cyan-400">
+                      <JsonViewer data={doc} collapsed={true} />
+                    </div>
+                  ))
+                )}
+              </div>
+            )}
+          </div>
+        </div>
+      )}
+    </div>
+  );
+}

package/template/src/components/Sidebar.tsx

@@ -0,0 +1,196 @@
+'use client';
+
+import React, { useEffect, useState } from 'react';
+import { ChevronRight, ChevronDown, Plus, Trash2 } from 'lucide-react';
+import { useAppStore } from '@/store';
+import { LioranDBService } from '@/lib/lioran';
+import { Database, Collection } from '@/types';
+import { useToast } from './Toast';
+
+interface SidebarProps {
+  onDatabaseSelect: (dbName: string) => void;
+  onCollectionSelect: (dbName: string, collectionName: string) => void;
+  onCreateDatabase: () => void;
+  onCreateCollection: () => void;
+}
+
+export function Sidebar({
+  onDatabaseSelect,
+  onCollectionSelect,
+  onCreateDatabase,
+  onCreateCollection,
+}: SidebarProps) {
+  const [expandedDbs, setExpandedDbs] = useState<Set<string>>(new Set());
+  const [isLoading, setIsLoading] = useState(false);
+
+  const { databases, currentDatabase, selectedCollection } = useAppStore();
+  const { addToast } = useToast();
+
+  const toggleDatabase = (dbName: string) => {
+    setExpandedDbs((prev) => {
+      const next = new Set(prev);
+      next.has(dbName) ? next.delete(dbName) : next.add(dbName);
+      return next;
+    });
+  };
+
+  const handleDeleteDatabase = async (dbName: string) => {
+    if (!confirm(`Delete database "${dbName}"? This action cannot be undone.`)) return;
+
+    try {
+      setIsLoading(true);
+      await LioranDBService.dropDatabase(dbName);
+      const dbs = await LioranDBService.listDatabases();
+      useAppStore.setState({ databases: dbs });
+      if (currentDatabase === dbName) {
+        useAppStore.setState({ currentDatabase: null, selectedCollection: null });
+      }
+      addToast(`Database "${dbName}" deleted`, 'success');
+    } catch (error) {
+      addToast(`Error deleting database: ${error}`, 'error');
+    } finally {
+      setIsLoading(false);
+    }
+  };
+
+  const handleDeleteCollection = async (dbName: string, collectionName: string) => {
+    if (!confirm(`Delete collection "${collectionName}"? This action cannot be undone.`)) return;
+
+    try {
+      setIsLoading(true);
+      await LioranDBService.dropCollection(dbName, collectionName);
+      const collections = await LioranDBService.listCollections(dbName);
+      useAppStore.setState((state) => ({
+        collections: {
+          ...state.collections,
+          [dbName]: collections,
+        },
+      }));
+      if (selectedCollection === collectionName) {
+        useAppStore.setState({ selectedCollection: null });
+      }
+      addToast(`Collection "${collectionName}" deleted`, 'success');
+    } catch (error) {
+      addToast(`Error deleting collection: ${error}`, 'error');
+    } finally {
+      setIsLoading(false);
+    }
+  };
+
+  return (
+    <div className="w-64 bg-slate-950 border-r border-slate-800 flex flex-col h-full">
+      {/* Header */}
+      <div className="p-4 border-b border-slate-800">
+        <div className="flex items-center justify-between">
+          <h2 className="text-lg font-semibold text-slate-100">Databases</h2>
+          <button
+            onClick={onCreateDatabase}
+            disabled={isLoading}
+            className="p-1.5 hover:bg-slate-800 rounded transition disabled:opacity-50"
+            title="Create database"
+          >
+            <Plus size={18} className="text-emerald-400" />
+          </button>
+        </div>
+      </div>
+
+      {/* Database List */}
+      <div className="flex-1 overflow-y-auto">
+        {databases.length === 0 ? (
+          <div className="p-4 text-slate-400 text-sm text-center">
+            No databases. Create one to get started.
+          </div>
+        ) : (
+          <div className="space-y-1 p-2">
+            {databases.map((db) => (
+              <div key={db.name}>
+                {/* Database Row */}
+                <div
+                  className={`flex items-center gap-2 px-3 py-2 rounded cursor-pointer transition ${
+                    currentDatabase === db.name
+                      ? 'bg-emerald-900/30 text-emerald-400'
+                      : 'text-slate-300 hover:bg-slate-800'
+                  }`}
+                >
+                  <button
+                    onClick={() => toggleDatabase(db.name)}
+                    className="p-0.5 hover:bg-slate-700 rounded transition"
+                  >
+                    {expandedDbs.has(db.name) ? (
+                      <ChevronDown size={16} />
+                    ) : (
+                      <ChevronRight size={16} />
+                    )}
+                  </button>
+
+                  <button
+                    onClick={() => onDatabaseSelect(db.name)}
+                    className="flex-1 text-left truncate font-medium"
+                  >
+                    {db.name}
+                  </button>
+
+                  <button
+                    onClick={() => handleDeleteDatabase(db.name)}
+                    disabled={isLoading}
+                    className="p-0.5 hover:bg-red-900/50 hover:text-red-400 rounded transition disabled:opacity-50"
+                    title="Delete database"
+                  >
+                    <Trash2 size={16} />
+                  </button>
+                </div>
+
+                {/* Collections */}
+                {expandedDbs.has(db.name) && (
+                  <div className="pl-6 space-y-1">
+                    {(useAppStore.getState().collections[db.name] || []).map(
+                      (col: Collection) => (
+                        <div
+                          key={col.name}
+                          className={`flex items-center gap-2 px-3 py-2 rounded cursor-pointer transition ${
+                            selectedCollection === col.name && currentDatabase === db.name
+                              ? 'bg-cyan-900/30 text-cyan-400'
+                              : 'text-slate-400 hover:bg-slate-800'
+                          }`}
+                        >
+                          <span className="w-4" />
+                          <button
+                            onClick={() => onCollectionSelect(db.name, col.name)}
+                            className="flex-1 text-left truncate text-sm"
+                          >
+                            {col.name}
+                          </button>
+                          <button
+                            onClick={() => handleDeleteCollection(db.name, col.name)}
+                            disabled={isLoading}
+                            className="p-0.5 hover:bg-red-900/50 hover:text-red-400 rounded transition disabled:opacity-50"
+                            title="Delete collection"
+                          >
+                            <Trash2 size={14} />
+                          </button>
+                        </div>
+                      )
+                    )}
+
+                    {/* Create Collection Button */}
+                    <button
+                      onClick={() => {
+                        useAppStore.setState({ currentDatabase: db.name });
+                        onCreateCollection();
+                      }}
+                      disabled={isLoading}
+                      className="flex items-center gap-2 px-3 py-2 text-slate-400 hover:text-emerald-400 text-sm transition disabled:opacity-50 w-full rounded hover:bg-slate-800"
+                    >
+                      <Plus size={14} />
+                      <span>New Collection</span>
+                    </button>
+                  </div>
+                )}
+              </div>
+            ))}
+          </div>
+        )}
+      </div>
+    </div>
+  );
+}

package/template/src/components/Toast.tsx

@@ -0,0 +1,91 @@
+'use client';
+
+import React, { createContext, useState, useCallback } from 'react';
+
+export interface Toast {
+  id: string;
+  message: string;
+  type: 'success' | 'error' | 'info' | 'warning';
+  duration?: number;
+}
+
+interface ToastContextType {
+  toasts: Toast[];
+  addToast: (message: string, type: Toast['type'], duration?: number) => void;
+  removeToast: (id: string) => void;
+}
+
+export const ToastContext = createContext<ToastContextType | undefined>(undefined);
+
+export function ToastProvider({ children }: { children: React.ReactNode }) {
+  const [toasts, setToasts] = useState<Toast[]>([]);
+
+  const addToast = useCallback(
+    (message: string, type: Toast['type'], duration = 3000) => {
+      const id = Math.random().toString(36).substr(2, 9);
+      setToasts((prev) => [...prev, { id, message, type, duration }]);
+
+      if (duration > 0) {
+        setTimeout(() => removeToast(id), duration);
+      }
+    },
+    []
+  );
+
+  const removeToast = useCallback((id: string) => {
+    setToasts((prev) => prev.filter((toast) => toast.id !== id));
+  }, []);
+
+  return (
+    <ToastContext.Provider value={{ toasts, addToast, removeToast }}>
+      {children}
+      <ToastContainer />
+    </ToastContext.Provider>
+  );
+}
+
+function ToastContainer() {
+  const context = React.useContext(ToastContext);
+  if (!context) return null;
+
+  const { toasts, removeToast } = context;
+
+  return (
+    <div className="fixed bottom-4 right-4 z-50 space-y-2">
+      {toasts.map((toast) => (
+        <Toast key={toast.id} toast={toast} onClose={() => removeToast(toast.id)} />
+      ))}
+    </div>
+  );
+}
+
+function Toast({ toast, onClose }: { toast: Toast; onClose: () => void }) {
+  const bgColor = {
+    success: 'bg-emerald-600',
+    error: 'bg-red-600',
+    info: 'bg-blue-600',
+    warning: 'bg-amber-600',
+  }[toast.type];
+
+  return (
+    <div
+      className={`${bgColor} text-white px-4 py-3 rounded-lg shadow-lg flex items-center gap-3 animate-in fade-in slide-in-from-bottom-4 duration-300`}
+    >
+      <span className="flex-1">{toast.message}</span>
+      <button
+        onClick={onClose}
+        className="text-white hover:opacity-80 transition"
+      >
+        ✕
+      </button>
+    </div>
+  );
+}
+
+export function useToast() {
+  const context = React.useContext(ToastContext);
+  if (!context) {
+    throw new Error('useToast must be used within ToastProvider');
+  }
+  return context;
+}