@peers-app/peers-ui 0.15.4 → 0.16.0

package/src/screens/data-explorer/data-explorer.tsx

@@ -13,11 +13,19 @@ interface ITableInfo {
   bytes?: number;
 }
 
+interface IDeletedTableInfo {
+  tableName: string;
+  tableId: string;
+  deletedAt: string;
+}
+
 type DataExplorerElectronApi = {
   getCurrentContext: () => Promise<{ contextName: string }>;
   getAllTables: () => Promise<ITableInfo[]>;
   compactDatabase: (beforeTimestamp?: number) => Promise<void>;
   resetChangeTracking: () => Promise<void>;
+  deleteTable: (tableName: string) => Promise<void>;
+  getDeletedTables: () => Promise<IDeletedTableInfo[]>;
 };
 
 type WindowWithDataExplorer = Window & {
@@ -28,11 +36,112 @@ function getDataExplorerApi(): DataExplorerElectronApi | undefined {
   return (window as WindowWithDataExplorer).electronAPI?.dataExplorer;
 }
 
+function formatRelativeTime(isoString: string): string {
+  const date = new Date(isoString);
+  const now = Date.now();
+  const diffMs = now - date.getTime();
+  const diffMin = Math.floor(diffMs / 60_000);
+  if (diffMin < 1) return "just now";
+  if (diffMin < 60) return `${diffMin}m ago`;
+  const diffHrs = Math.floor(diffMin / 60);
+  if (diffHrs < 24) return `${diffHrs}h ago`;
+  const diffDays = Math.floor(diffHrs / 24);
+  if (diffDays < 30) return `${diffDays}d ago`;
+  return date.toLocaleDateString();
+}
+
+function DeleteConfirmModal({
+  tableName,
+  onConfirm,
+  onCancel,
+}: {
+  tableName: string;
+  onConfirm: () => void;
+  onCancel: () => void;
+}) {
+  const [confirmText, setConfirmText] = useState("");
+  const [deleting, setDeleting] = useState(false);
+
+  const handleConfirm = async () => {
+    setDeleting(true);
+    try {
+      await onConfirm();
+    } finally {
+      setDeleting(false);
+    }
+  };
+
+  return (
+    <div
+      className="position-fixed top-0 start-0 w-100 h-100 d-flex align-items-center justify-content-center"
+      style={{ zIndex: 1050, backgroundColor: "rgba(0,0,0,0.5)" }}
+      onClick={onCancel}
+    >
+      <div
+        className="card shadow-lg"
+        style={{ maxWidth: 480, width: "100%" }}
+        onClick={(e) => e.stopPropagation()}
+      >
+        <div className="card-header bg-danger text-white d-flex justify-content-between align-items-center">
+          <strong>Delete Table</strong>
+          <button type="button" className="btn-close btn-close-white" onClick={onCancel} />
+        </div>
+        <div className="card-body">
+          <div className="alert alert-danger mb-3">
+            <i className="bi bi-exclamation-triangle-fill me-2" />
+            This will permanently delete all data for <strong>{tableName}</strong> on this device
+            and all synced devices once synced.
+          </div>
+          <label className="form-label">
+            Type <strong>{tableName}</strong> to confirm:
+          </label>
+          <input
+            type="text"
+            className="form-control"
+            value={confirmText}
+            onChange={(e) => setConfirmText(e.target.value)}
+            placeholder={tableName}
+            // biome-ignore lint/a11y/noAutofocus: confirmation input needs immediate focus
+            autoFocus
+          />
+        </div>
+        <div className="card-footer d-flex justify-content-end gap-2">
+          <button
+            type="button"
+            className="btn btn-secondary"
+            onClick={onCancel}
+            disabled={deleting}
+          >
+            Cancel
+          </button>
+          <button
+            type="button"
+            className="btn btn-danger"
+            disabled={confirmText !== tableName || deleting}
+            onClick={handleConfirm}
+          >
+            {deleting ? (
+              <>
+                <span className="spinner-border spinner-border-sm me-1" />
+                Deleting...
+              </>
+            ) : (
+              "Delete Table"
+            )}
+          </button>
+        </div>
+      </div>
+    </div>
+  );
+}
+
 export function DataExplorerList() {
   const [tables, setTables] = useState<ITableInfo[]>([]);
+  const [deletedTables, setDeletedTables] = useState<IDeletedTableInfo[]>([]);
   const [loading, setLoading] = useState(true);
   const [currentContext, setCurrentContext] = useState<string>("");
   const [compacting, setCompacting] = useState(false);
+  const [deleteTarget, setDeleteTarget] = useState<string | null>(null);
 
   const formatBytes = (bytes: number | undefined) => {
     if (bytes === undefined) return "-";
@@ -48,10 +157,10 @@ export function DataExplorerList() {
     const kb = 1024;
     const mb = kb * 1024;
 
-    if (bytes < 10 * kb) return "text-secondary"; // 0 to 10KB: secondary (gray)
-    if (bytes < 10 * mb) return "text-primary"; // 10KB to 10MB: primary (blue)
-    if (bytes < 100 * mb) return "text-warning"; // 10MB to 100MB: warning (orange)
-    return "text-danger"; // >100MB: danger (red)
+    if (bytes < 10 * kb) return "text-secondary";
+    if (bytes < 10 * mb) return "text-primary";
+    if (bytes < 100 * mb) return "text-warning";
+    return "text-danger";
   };
 
   const loadTables = useCallback(async () => {
@@ -64,22 +173,21 @@ export function DataExplorerList() {
         return;
       }
 
-      // Get current context info
       const contextInfo = await api.getCurrentContext();
       setCurrentContext(contextInfo.contextName);
 
-      // Get all tables from IPC
       const allTablesInfo = await api.getAllTables();
-
-      // Sort by registered status first, then by table name
       allTablesInfo.sort((a: ITableInfo, b: ITableInfo) => {
         if (a.isRegistered !== b.isRegistered) {
           return a.isRegistered ? -1 : 1;
         }
         return a.tableName.localeCompare(b.tableName);
       });
-
       setTables(allTablesInfo);
+
+      const deleted = await api.getDeletedTables();
+      deleted.sort((a, b) => a.tableName.localeCompare(b.tableName));
+      setDeletedTables(deleted);
     } catch (error) {
       console.error("Error loading tables:", error);
     } finally {
@@ -87,6 +195,22 @@ export function DataExplorerList() {
     }
   }, []);
 
+  const handleDeleteTable = async () => {
+    if (!deleteTarget) return;
+    const api = getDataExplorerApi();
+    if (!api) return;
+
+    try {
+      await api.deleteTable(deleteTarget);
+      setDeleteTarget(null);
+      setLoading(true);
+      await loadTables();
+    } catch (error: unknown) {
+      console.error("Error deleting table:", error);
+      alert(`Error deleting table: ${error instanceof Error ? error.message : String(error)}`);
+    }
+  };
+
   const compactDatabase = async (beforeTimestamp?: number) => {
     try {
       setCompacting(true);
@@ -110,7 +234,6 @@ export function DataExplorerList() {
       await api.compactDatabase(beforeTimestamp);
       alert(`Database compacted successfully!${isExtreme ? " (Extreme mode)" : ""}`);
 
-      // Reload tables to show updated sizes
       setLoading(true);
       await loadTables();
     } catch (error: unknown) {
@@ -141,7 +264,6 @@ export function DataExplorerList() {
       await api.resetChangeTracking();
       alert("Change tracking reset successfully!");
 
-      // Reload tables to show updated sizes
       setLoading(true);
       await loadTables();
     } catch (error: unknown) {
@@ -180,8 +302,19 @@ export function DataExplorerList() {
     );
   }
 
+  const registeredTables = tables.filter((t) => t.isRegistered);
+  const unregisteredTables = tables.filter((t) => !t.isRegistered);
+
   return (
     <div className="container-fluid p-4">
+      {deleteTarget && (
+        <DeleteConfirmModal
+          tableName={deleteTarget}
+          onConfirm={handleDeleteTable}
+          onCancel={() => setDeleteTarget(null)}
+        />
+      )}
+
       {/* Navigation Tabs */}
       <ul className="nav nav-tabs mb-4">
         <li className="nav-item">
@@ -303,14 +436,14 @@ export function DataExplorerList() {
       <div className="card mb-4">
         <div className="card-body">
           <h5 className="card-title">
-            Registered Tables ({tables.filter((t) => t.isRegistered).length})
+            Registered Tables ({registeredTables.length})
             <span className="badge bg-success ms-2">Active</span>
           </h5>
           <p className="text-muted small">
             These tables are registered with the TableContainer and actively used by the
             application.
           </p>
-          {tables.filter((t) => t.isRegistered).length === 0 ? (
+          {registeredTables.length === 0 ? (
             <p className="text-muted">No registered tables found</p>
           ) : (
             <div className="table-responsive">
@@ -321,27 +454,36 @@ export function DataExplorerList() {
                     <th>Table ID</th>
                     <th className="text-end">Row Count</th>
                     <th className="text-end">Bytes</th>
+                    <th style={{ width: "1%" }}></th>
                   </tr>
                 </thead>
                 <tbody>
-                  {tables
-                    .filter((t) => t.isRegistered)
-                    .map((table) => (
-                      <tr key={table.tableName}>
-                        <td>
-                          <strong>{table.tableName}</strong>
-                        </td>
-                        <td>
-                          <code className="text-muted small">{table.tableId || "system"}</code>
-                        </td>
-                        <td className="text-end">
-                          {table.rowCount !== undefined ? table.rowCount.toLocaleString() : "-"}
-                        </td>
-                        <td className={`text-end fw-bold ${getBytesColorClass(table.bytes)}`}>
-                          {formatBytes(table.bytes)}
-                        </td>
-                      </tr>
-                    ))}
+                  {registeredTables.map((table) => (
+                    <tr key={table.tableName}>
+                      <td>
+                        <strong>{table.tableName}</strong>
+                      </td>
+                      <td>
+                        <code className="text-muted small">{table.tableId || "system"}</code>
+                      </td>
+                      <td className="text-end">
+                        {table.rowCount !== undefined ? table.rowCount.toLocaleString() : "-"}
+                      </td>
+                      <td className={`text-end fw-bold ${getBytesColorClass(table.bytes)}`}>
+                        {formatBytes(table.bytes)}
+                      </td>
+                      <td>
+                        <button
+                          type="button"
+                          className="btn btn-sm btn-outline-danger border-0"
+                          title={`Delete ${table.tableName}`}
+                          onClick={() => setDeleteTarget(table.tableName)}
+                        >
+                          <i className="bi bi-trash" />
+                        </button>
+                      </td>
+                    </tr>
+                  ))}
                 </tbody>
               </table>
             </div>
@@ -350,11 +492,11 @@ export function DataExplorerList() {
       </div>
 
       {/* Unregistered Tables (Raw SQLite) */}
-      {tables.some((t) => !t.isRegistered) && (
-        <div className="card">
+      {unregisteredTables.length > 0 && (
+        <div className="card mb-4">
           <div className="card-body">
             <h5 className="card-title">
-              Unregistered Tables ({tables.filter((t) => !t.isRegistered).length})
+              Unregistered Tables ({unregisteredTables.length})
               <span className="badge bg-warning text-dark ms-2">Raw SQLite</span>
             </h5>
             <p className="text-muted small">
@@ -370,51 +512,104 @@ export function DataExplorerList() {
                     <th className="text-end">Row Count</th>
                     <th className="text-end">Bytes</th>
                     <th>SQL Definition</th>
+                    <th style={{ width: "1%" }}></th>
+                  </tr>
+                </thead>
+                <tbody>
+                  {unregisteredTables.map((table) => (
+                    <tr key={table.tableName}>
+                      <td>
+                        <strong>{table.tableName}</strong>
+                      </td>
+                      <td>
+                        <span className="badge bg-secondary">{table.type || "table"}</span>
+                      </td>
+                      <td className="text-end">
+                        {table.rowCount !== undefined ? table.rowCount.toLocaleString() : "-"}
+                      </td>
+                      <td className={`text-end fw-bold ${getBytesColorClass(table.bytes)}`}>
+                        {formatBytes(table.bytes)}
+                      </td>
+                      <td>
+                        {table.sql ? (
+                          <details>
+                            <summary
+                              className="cursor-pointer text-primary"
+                              style={{ cursor: "pointer" }}
+                            >
+                              <small>View SQL</small>
+                            </summary>
+                            <pre
+                              className="mt-2 p-2 bg-body-secondary border rounded"
+                              style={{
+                                fontSize: "0.75rem",
+                                maxHeight: "300px",
+                                overflow: "auto",
+                              }}
+                            >
+                              <code className="text-body">{table.sql}</code>
+                            </pre>
+                          </details>
+                        ) : (
+                          <span className="text-muted small">-</span>
+                        )}
+                      </td>
+                      <td>
+                        <button
+                          type="button"
+                          className="btn btn-sm btn-outline-danger border-0"
+                          title={`Delete ${table.tableName}`}
+                          onClick={() => setDeleteTarget(table.tableName)}
+                        >
+                          <i className="bi bi-trash" />
+                        </button>
+                      </td>
+                    </tr>
+                  ))}
+                </tbody>
+              </table>
+            </div>
+          </div>
+        </div>
+      )}
+
+      {/* Deleted Tables */}
+      {deletedTables.length > 0 && (
+        <div className="card mb-4">
+          <div className="card-body">
+            <h5 className="card-title">
+              Deleted Tables ({deletedTables.length})
+              <span className="badge bg-danger ms-2">Deleted</span>
+            </h5>
+            <p className="text-muted small">
+              These tables have been deleted. Their definitions are retained so other devices know
+              to stop syncing data for them.
+            </p>
+            <div className="table-responsive">
+              <table className="table table-hover table-sm">
+                <thead>
+                  <tr>
+                    <th>Table Name</th>
+                    <th>Table ID</th>
+                    <th>Deleted At</th>
                   </tr>
                 </thead>
                 <tbody>
-                  {tables
-                    .filter((t) => !t.isRegistered)
-                    .map((table) => (
-                      <tr key={table.tableName}>
-                        <td>
-                          <strong>{table.tableName}</strong>
-                        </td>
-                        <td>
-                          <span className="badge bg-secondary">{table.type || "table"}</span>
-                        </td>
-                        <td className="text-end">
-                          {table.rowCount !== undefined ? table.rowCount.toLocaleString() : "-"}
-                        </td>
-                        <td className={`text-end fw-bold ${getBytesColorClass(table.bytes)}`}>
-                          {formatBytes(table.bytes)}
-                        </td>
-                        <td>
-                          {table.sql ? (
-                            <details>
-                              <summary
-                                className="cursor-pointer text-primary"
-                                style={{ cursor: "pointer" }}
-                              >
-                                <small>View SQL</small>
-                              </summary>
-                              <pre
-                                className="mt-2 p-2 bg-body-secondary border rounded"
-                                style={{
-                                  fontSize: "0.75rem",
-                                  maxHeight: "300px",
-                                  overflow: "auto",
-                                }}
-                              >
-                                <code className="text-body">{table.sql}</code>
-                              </pre>
-                            </details>
-                          ) : (
-                            <span className="text-muted small">-</span>
-                          )}
-                        </td>
-                      </tr>
-                    ))}
+                  {deletedTables.map((table) => (
+                    <tr key={table.tableId}>
+                      <td>
+                        <strong className="text-muted">{table.tableName}</strong>
+                      </td>
+                      <td>
+                        <code className="text-muted small">{table.tableId}</code>
+                      </td>
+                      <td>
+                        <span title={new Date(table.deletedAt).toLocaleString()}>
+                          {formatRelativeTime(table.deletedAt)}
+                        </span>
+                      </td>
+                    </tr>
+                  ))}
                 </tbody>
               </table>
             </div>

package/docs/conversation-tab.md

@@ -1,201 +0,0 @@
-# Conversation Tab Implementation Plan
-
-## Current State Analysis
-
-### Existing Thread/Conversation System
-The codebase has a robust thread/conversation system with the following components:
-
-#### **Data Model**
-- **IMessage interface** with hierarchical threading via `messageParentId`
-- **Thread Logic**: Parent message + replies with same `messageParentId`
-- **Channel Integration**: Threads exist within channels but are filtered from main channel view
-
-#### **State Management**
-```typescript
-// Existing persistent variables in globals.tsx
-openThreads: persistentVar<(string | IMessage)[]>  // Array of open thread IDs
-threadViewOpen: persistentVar<boolean>              // Controls side panel visibility
-openThread(thread): Function                        // Opens thread in side panel
-```
-
-#### **Existing Components**
-- **ThreadContainer**: Main thread UI with tabbed interface for multiple threads
-- **ThreadMessageList**: Displays messages within specific thread
-- **MessageDisplay**: Individual message rendering with thread context
-- **OpenThreads**: Dropdown for thread switching
-
-#### **Current Limitations**
-- ❌ No URL routing for threads (`/threads/[id]`)
-- ❌ No standalone thread detail views (always side panel)
-- ❌ No deep-linking to specific conversations
-- ❌ No integration with tabs system
-
-## Implementation Plan: Phase 1 - Conversation Tabs
-
-### **Goal**: Integrate existing thread system with tabs architecture
-
-### **Step 1: Thread Routing Integration**
-Add thread detail routes to main Router component:
-
-```typescript
-// In router.tsx
-if (path.match(/^threads\/([a-zA-Z0-9]{25})/)) {
-  const threadId = path.split('/')[1];
-  return <ThreadDetailView threadId={threadId} />;
-}
-```
-
-### **Step 2: Create ThreadDetailView Component**
-New component that renders thread as main content instead of side panel:
-
-```typescript
-// src/screens/threads/thread-details.tsx
-export const ThreadDetails = (props: { threadId: string }) => {
-  const thread = usePromise(async () => {
-    const parentMessage = await Messages().get(props.threadId);
-    if (!parentMessage) return null;
-    updateActiveTabTitle(`Thread: ${parentMessage.message.slice(0, 30)}...`);
-    return parentMessage;
-  }, [props.threadId]);
-
-  // Render thread messages in main content area
-  return <ThreadMessageList threadId={props.threadId} />;
-};
-```
-
-### **Step 3: Thread System App Enhancement**
-Update the threads system app to support individual thread opening:
-
-```typescript
-// src/system-apps/threads.app.ts
-export const threadsApp: IAppNav = {
-  name: 'Threads',
-  iconClassName: 'bi-cpu',
-  navigationPath: 'shell', // Main shell for overview
-  alwaysNewTab: false      // Allow switching to existing thread list
-};
-
-// New system app for individual conversations
-export const conversationApp: IAppNav = {
-  name: 'Conversation',
-  iconClassName: 'bi-chat-dots',
-  navigationPath: 'threads/',  // Will be dynamic per thread
-  alwaysNewTab: true          // Each conversation gets its own tab
-};
-```
-
-### **Step 4: Thread Opening Integration**
-Modify existing `openThread()` function to support both side panel and tab modes:
-
-```typescript
-// Enhanced openThread function
-const openThreadInTab = (threadId: string, messagePreview?: string) => {
-  const threadPath = `threads/${threadId}`;
-  const threadTitle = messagePreview 
-    ? `Thread: ${messagePreview.slice(0, 30)}...`
-    : 'Thread';
-
-  // Open thread in new tab
-  onOpenTab({
-    packageId: 'system-apps',
-    path: threadPath,
-    title: threadTitle,
-    iconClassName: 'bi-chat-dots',
-    closable: true
-  }, true); // Always new tab for threads
-};
-```
-
-### **Step 5: State Migration Strategy**
-**Option A: Merge openThreads into activeTabs**
-- Convert existing `openThreads` entries to tab format
-- Remove separate thread state management
-- Rely on activeTabs for persistence
-
-**Option B: Parallel Systems (Recommended Phase 1)**
-- Keep existing `openThreads` for side panel (backwards compatibility)
-- Add new tab-based thread opening
-- Allow users to choose: quick side panel vs dedicated tab
-
-### **Step 6: Thread List Enhancement**
-Create a thread list view for the main "Threads" app:
-
-```typescript
-// src/screens/threads/thread-list.tsx
-export const ThreadList = () => {
-  // Show user's recent threads/conversations
-  // Each thread gets "Open in Tab" button
-  // Integration with search functionality
-};
-```
-
-## Benefits of Tab-Based Threads
-
-### **User Experience**
-- **Multiple Conversations**: Several AI chats open simultaneously
-- **Context Preservation**: Threads survive app reloads
-- **Deep Linking**: Direct URLs to specific conversations  
-- **Mobile Friendly**: Tabs work better than sliding panels on mobile
-
-### **Technical Benefits**  
-- **Consistent Architecture**: Threads follow same patterns as other detail screens
-- **Dynamic Titles**: Smart titles showing conversation context
-- **Search Integration**: Threads appear in app launcher search
-- **Grid Layout Ready**: Perfect foundation for Phase 2 grid system
-
-## Implementation Phases
-
-### **Phase 1: Basic Thread Tabs** (This Plan)
-- [ ] Add thread routing to Router component
-- [ ] Create ThreadDetails component
-- [ ] Update openThread function for tab support
-- [ ] Add thread list view
-- [ ] Update system apps configuration
-
-### **Phase 2: State Unification**
-- [ ] Migrate openThreads data to activeTabs
-- [ ] Remove duplicate thread state management
-- [ ] Enhance thread persistence and sync
-
-### **Phase 3: Advanced Features**
-- [ ] Thread search and filtering
-- [ ] Conversation previews in app launcher
-- [ ] Thread grouping and organization
-- [ ] Integration with AI assistant selection
-
-### **Phase 4: Grid Layout Integration** (Future)
-- [ ] Split screen: content + conversation
-- [ ] Multiple conversations in grid cells
-- [ ] Flexible conversation positioning
-- [ ] Context-aware conversation suggestions
-
-## Technical Considerations
-
-### **Thread ID Format**
-- Existing thread IDs are message IDs (25-character strings)
-- URL pattern: `/threads/[messageId]`
-- Compatible with existing message lookup
-
-### **Title Generation Strategy**
-```typescript
-const generateThreadTitle = (parentMessage: IMessage): string => {
-  // Use first 30 characters of parent message
-  const preview = parentMessage.message.slice(0, 30);
-  return `Thread: ${preview}${parentMessage.message.length > 30 ? '...' : ''}`;
-};
-```
-
-### **Integration Points**
-- **Router**: Add thread routing patterns  
-- **ThreadMessageList**: Reuse existing component
-- **TabsLayout**: Thread tabs with conversation icons
-- **App Launcher**: Threads searchable and launchable
-
-## Migration Path
-
-1. **Implement parallel systems** (old side panel + new tabs)
-2. **User choice** during transition period
-3. **Gradual migration** of state and preferences  
-4. **Remove legacy** side panel system once tabs proven
-
-This approach ensures no disruption to existing users while providing enhanced capabilities for power users who want multiple conversations open simultaneously.