Claude-Conversation-Exporter-TS/browse.html

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>Browse Claude Conversations</title>
  <style>
    * {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
    }
    
    body {
      font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
      background: #f5f5f5;
      color: #333;
      line-height: 1.6;
    }
    
    .header {
      background: white;
      border-bottom: 1px solid #e0e0e0;
      padding: 20px;
      position: sticky;
      top: 0;
      z-index: 100;
      box-shadow: 0 2px 4px rgba(0,0,0,0.05);
    }
    
    .header h1 {
      color: #5436DA;
      margin-bottom: 15px;
    }
    
    .controls {
      display: flex;
      gap: 15px;
      align-items: center;
      flex-wrap: wrap;
    }
    
    .search-box {
      flex: 1;
      min-width: 300px;
      position: relative;
    }
    
    .search-box input {
      width: 100%;
      padding: 10px 40px 10px 15px;
      border: 1px solid #ddd;
      border-radius: 25px;
      font-size: 14px;
      transition: border-color 0.2s;
    }
    
    .search-box input:focus {
      outline: none;
      border-color: #5436DA;
      box-shadow: 0 0 0 3px rgba(84, 54, 218, 0.1);
    }
    
    .search-box .clear-btn {
      position: absolute;
      right: 10px;
      top: 50%;
      transform: translateY(-50%);
      background: none;
      border: none;
      color: #999;
      cursor: pointer;
      padding: 5px;
      display: none;
    }
    
    .search-box.has-text .clear-btn {
      display: block;
    }
    
    .filter-group {
      display: flex;
      gap: 10px;
      align-items: center;
    }
    
    .filter-group label {
      font-size: 14px;
      color: #666;
    }
    
    .filter-group select {
      padding: 8px 12px;
      border: 1px solid #ddd;
      border-radius: 5px;
      font-size: 14px;
      background: white;
      cursor: pointer;
    }
    
    .stats {
      font-size: 14px;
      color: #666;
    }
    
    .export-all-btn {
      padding: 10px 20px;
      background: #5436DA;
      color: white;
      border: none;
      border-radius: 5px;
      font-size: 14px;
      cursor: pointer;
      transition: background 0.2s;
    }
    
    .export-all-btn:hover {
      background: #4329B8;
    }
    
    .export-all-btn:disabled {
      background: #ccc;
      cursor: not-allowed;
    }
    
    .container {
      max-width: 1400px;
      margin: 20px auto;
      padding: 0 20px;
    }
    
    .conversations-table {
      background: white;
      border-radius: 8px;
      overflow: hidden;
      box-shadow: 0 2px 8px rgba(0,0,0,0.05);
    }
    
    table {
      width: 100%;
      border-collapse: collapse;
    }
    
    thead {
      background: #f8f9fa;
      border-bottom: 2px solid #e0e0e0;
    }
    
    th {
      padding: 15px;
      text-align: left;
      font-weight: 600;
      color: #666;
      font-size: 13px;
      text-transform: uppercase;
      letter-spacing: 0.5px;
      cursor: pointer;
      user-select: none;
      position: relative;
    }
    
    th.sortable:hover {
      background: #f0f0f0;
    }
    
    th.sorted-asc::after,
    th.sorted-desc::after {
      content: '';
      position: absolute;
      right: 10px;
      top: 50%;
      transform: translateY(-50%);
      width: 0;
      height: 0;
      border-left: 5px solid transparent;
      border-right: 5px solid transparent;
    }
    
    th.sorted-asc::after {
      border-bottom: 5px solid #5436DA;
    }
    
    th.sorted-desc::after {
      border-top: 5px solid #5436DA;
    }
    
    tbody tr {
      border-bottom: 1px solid #f0f0f0;
      transition: background 0.1s;
    }
    
    tbody tr:hover {
      background: #f8f9fa;
    }
    
    td {
      padding: 15px;
      font-size: 14px;
    }
    
    .conversation-name {
      font-weight: 500;
      color: #333;
      max-width: 400px;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
    
    .conversation-name a {
      color: inherit;
      text-decoration: none;
    }
    
    .conversation-name a:hover {
      color: #5436DA;
      text-decoration: underline;
    }
    
    .date {
      color: #666;
      white-space: nowrap;
    }
    
    .model-badge {
      display: inline-block;
      padding: 3px 8px;
      border-radius: 12px;
      font-size: 12px;
      font-weight: 500;
      background: #e8f4fd;
      color: #0066cc;
      white-space: nowrap;
    }
    
    .model-badge.sonnet {
      background: #fff3e0;
      color: #e65100;
    }
    
    .model-badge.haiku {
      background: #e8f5e9;
      color: #2e7d32;
    }
    
    .model-badge.opus {
      background: #f3e5f5;
      color: #7b1fa2;
    }
    
    .actions {
      display: flex;
      gap: 8px;
    }
    
    .btn-small {
      padding: 6px 12px;
      border: none;
      border-radius: 4px;
      font-size: 12px;
      cursor: pointer;
      transition: all 0.2s;
      font-weight: 500;
    }
    
    .btn-export {
      background: #5436DA;
      color: white;
    }
    
    .btn-export:hover {
      background: #4329B8;
    }
    
    .btn-view {
      background: #e0e0e0;
      color: #333;
    }
    
    .btn-view:hover {
      background: #d0d0d0;
    }
    
    .btn-small:disabled {
      background: #ccc;
      color: #999;
      cursor: not-allowed;
    }
    
    .loading {
      text-align: center;
      padding: 40px;
      color: #666;
    }
    
    .error {
      text-align: center;
      padding: 40px;
      color: #d32f2f;
    }
    
    .no-results {
      text-align: center;
      padding: 40px;
      color: #666;
    }
    
    .spinner {
      display: inline-block;
      width: 30px;
      height: 30px;
      border: 3px solid #f3f3f3;
      border-top: 3px solid #5436DA;
      border-radius: 50%;
      animation: spin 1s linear infinite;
      margin-bottom: 10px;
    }
    
    @keyframes spin {
      0% { transform: rotate(0deg); }
      100% { transform: rotate(360deg); }
    }
    
    .export-options {
      position: fixed;
      bottom: 20px;
      right: 20px;
      background: white;
      padding: 15px;
      border-radius: 8px;
      box-shadow: 0 4px 12px rgba(0,0,0,0.15);
      display: none;
      z-index: 1000;
    }
    
    .export-options.show {
      display: block;
    }
    
    .export-options h3 {
      margin-bottom: 10px;
      font-size: 14px;
    }
    
    .export-options label {
      display: block;
      margin: 8px 0;
      font-size: 13px;
    }
    
    .toast {
      position: fixed;
      bottom: 20px;
      left: 50%;
      transform: translateX(-50%);
      background: #333;
      color: white;
      padding: 12px 24px;
      border-radius: 25px;
      font-size: 14px;
      z-index: 2000;
      display: none;
    }
    
    .toast.show {
      display: block;
      animation: slideUp 0.3s ease;
    }
    
    @keyframes slideUp {
      from {
        transform: translateX(-50%) translateY(100px);
        opacity: 0;
      }
      to {
        transform: translateX(-50%) translateY(0);
        opacity: 1;
      }
    }
  </style>
</head>
<body>
  <div class="header">
    <h1>Browse Claude Conversations</h1>
    <div class="controls">
      <div class="search-box" id="searchBox">
        <input type="text" id="searchInput" placeholder="Search conversations by name...">
        <button class="clear-btn" id="clearSearch">✕</button>
      </div>
      
      <div class="filter-group">
        <label>Model:</label>
        <select id="modelFilter">
          <option value="">All Models</option>
        </select>
      </div>
      
      <div class="filter-group">
        <label>Sort by:</label>
        <select id="sortBy">
          <option value="updated_desc">Recently Updated</option>
          <option value="updated_asc">Oldest Updated</option>
          <option value="created_desc">Recently Created</option>
          <option value="created_asc">Oldest Created</option>
          <option value="name_asc">Name (A-Z)</option>
          <option value="name_desc">Name (Z-A)</option>
        </select>
      </div>
      
      <div class="stats" id="stats">
        Loading...
      </div>
      
      <div class="export-settings">
        <label>
          Format:
          <select id="exportFormat">
            <option value="json">JSON</option>
            <option value="markdown">Markdown</option>
            <option value="text">Plain Text</option>
          </select>
        </label>
        <label>
          <input type="checkbox" id="includeMetadata" checked>
          Metadata
        </label>
      </div>
      
      <button class="export-all-btn" id="exportAllBtn" disabled>
        Export All
      </button>
    </div>
  </div>
  
  <div class="container">
    <div class="conversations-table">
      <div id="tableContent">
        <div class="loading">
          <div class="spinner"></div>
          <div>Loading conversations...</div>
        </div>
      </div>
    </div>
  </div>
  
  <!-- Export options moved to header for better visibility -->
  <style>
    .export-settings {
      display: inline-flex;
      gap: 15px;
      align-items: center;
      padding: 8px 15px;
      background: #f0f0f0;
      border-radius: 5px;
    }
    .export-settings label {
      display: flex;
      align-items: center;
      gap: 5px;
      font-size: 13px;
      color: #555;
    }
    .export-settings select {
      padding: 4px 8px;
      border: 1px solid #ccc;
      border-radius: 3px;
      font-size: 13px;
    }
  </style>
  
  <div class="toast" id="toast"></div>
  
  <!-- Progress modal for bulk export -->
  <div id="progressModal" style="display: none; position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0,0,0,0.5); z-index: 3000;">
    <div style="position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); background: white; padding: 30px; border-radius: 8px; min-width: 400px;">
      <h3 style="margin-top: 0;">Exporting Conversations</h3>
      <div style="margin: 20px 0;">
        <div id="progressText">Preparing export...</div>
        <div style="background: #e0e0e0; height: 20px; border-radius: 10px; margin-top: 10px; overflow: hidden;">
          <div id="progressBar" style="background: #5436DA; height: 100%; width: 0%; transition: width 0.3s;"></div>
        </div>
        <div id="progressStats" style="margin-top: 10px; font-size: 14px; color: #666;"></div>
      </div>
      <button id="cancelExport" style="padding: 8px 16px; background: #dc3545; color: white; border: none; border-radius: 4px; cursor: pointer;">Cancel</button>
    </div>
  </div>
  
  <!-- Include JSZip locally -->
  <script src="jszip.min.js"></script>
  <script src="utils.js"></script>
  <script src="browse.js"></script>
</body>
</html>