@gallop.software/studio 1.5.9 → 2.0.0

package/src/components/StudioFileList.tsx

@@ -0,0 +1,743 @@
+/** @jsxImportSource @emotion/react */
+'use client'
+
+import { useState } from 'react'
+import { css, keyframes } from '@emotion/react'
+import { useFileList } from '../hooks/useFileList'
+import { colors, fontSize } from './tokens'
+import type { FileItem } from '../types'
+
+const spin = keyframes`
+  to { transform: rotate(360deg); }
+`
+
+const styles = {
+  loading: css`
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    flex: 1;
+    min-height: 300px;
+  `,
+  spinner: css`
+    width: 32px;
+    height: 32px;
+    border-radius: 50%;
+    border: 3px solid ${colors.border};
+    border-top-color: ${colors.primary};
+    animation: ${spin} 0.8s linear infinite;
+  `,
+  empty: css`
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    flex: 1;
+    min-height: 300px;
+    color: ${colors.textSecondary};
+  `,
+  emptyHint: css`
+    font-size: ${fontSize.sm};
+    color: ${colors.textMuted};
+    margin-top: 4px;
+  `,
+  scanButton: css`
+    margin-top: 16px;
+    padding: 10px 24px;
+    font-size: ${fontSize.base};
+    font-weight: 500;
+    background: ${colors.primary};
+    color: white;
+    border: none;
+    border-radius: 8px;
+    cursor: pointer;
+    transition: background 0.15s ease;
+    
+    &:hover:not(:disabled) {
+      background: ${colors.primaryHover};
+    }
+    
+    &:disabled {
+      opacity: 0.6;
+      cursor: not-allowed;
+    }
+  `,
+  tableWrapper: css`
+    background: ${colors.surface};
+    border-radius: 8px;
+    border: 1px solid ${colors.border};
+    overflow-x: auto;
+  `,
+  table: css`
+    width: 100%;
+    min-width: 600px;
+    border-collapse: collapse;
+    white-space: nowrap;
+  `,
+  th: css`
+    text-align: left;
+    font-size: 11px;
+    color: ${colors.textMuted};
+    text-transform: uppercase;
+    letter-spacing: 0.05em;
+    padding: 12px 16px;
+    font-weight: 600;
+    background: ${colors.background};
+    border-bottom: 1px solid ${colors.border};
+  `,
+  thCheckbox: css`
+    width: 48px;
+  `,
+  thSize: css`
+    width: 96px;
+  `,
+  thDimensions: css`
+    width: 128px;
+  `,
+  thCdn: css`
+    width: 96px;
+  `,
+  tbody: css``,
+  row: css`
+    cursor: pointer;
+    transition: background-color 0.15s ease;
+    user-select: none;
+    
+    &:hover {
+      background-color: ${colors.surfaceHover};
+    }
+    
+    &:not(:last-child) td {
+      border-bottom: 1px solid ${colors.borderLight};
+    }
+  `,
+  rowSelected: css`
+    background-color: ${colors.primaryLight};
+    
+    &:hover {
+      background-color: ${colors.primaryLight};
+    }
+  `,
+  parentRow: css`
+    cursor: pointer;
+    border-bottom: 1px solid ${colors.border};
+    
+    &:hover {
+      background-color: ${colors.surfaceHover};
+    }
+  `,
+  td: css`
+    padding: 12px 16px;
+  `,
+  checkboxCell: css`
+    padding: 12px 16px;
+    cursor: pointer;
+    vertical-align: middle;
+  `,
+  checkbox: css`
+    width: 18px;
+    height: 18px;
+    accent-color: ${colors.primary};
+    cursor: pointer;
+    display: block;
+  `,
+  actionsCell: css`
+    display: flex;
+    align-items: center;
+    justify-content: flex-end;
+    gap: 8px;
+    margin-left: auto;
+    flex-shrink: 0;
+  `,
+  copyBtn: css`
+    position: relative;
+    flex-shrink: 0;
+    height: 32px;
+    width: 32px;
+    font-size: ${fontSize.xs};
+    color: ${colors.textSecondary};
+    background: ${colors.surface};
+    border: 1px solid ${colors.border};
+    padding: 0;
+    cursor: pointer;
+    border-radius: 4px;
+    transition: all 0.15s ease;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    
+    &:hover {
+      background: ${colors.surfaceHover};
+      border-color: ${colors.borderHover};
+      color: ${colors.text};
+    }
+  `,
+  copyIcon: css`
+    width: 16px;
+    height: 16px;
+  `,
+  statusBtn: css`
+    flex-shrink: 0;
+    height: 32px;
+    width: 32px;
+    background: ${colors.surface};
+    border: 1px solid ${colors.border};
+    padding: 0;
+    border-radius: 4px;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+  `,
+  cloudIcon: css`
+    width: 18px;
+    height: 18px;
+    color: #f59e0b;
+    transform: translateY(1px);
+  `,
+  folderStats: css`
+    display: flex;
+    align-items: center;
+    gap: 8px;
+  `,
+  folderStat: css`
+    display: flex;
+    align-items: center;
+    gap: 3px;
+    font-size: ${fontSize.xs};
+  `,
+  folderStatLocal: css`
+    color: ${colors.textMuted};
+  `,
+  folderStatCloud: css`
+    color: #f59e0b;
+  `,
+  folderStatRemote: css`
+    color: #ef4444;
+  `,
+  folderStatIconCloud: css`
+    width: 14px;
+    height: 14px;
+    color: #f59e0b;
+  `,
+  folderStatIconLocal: css`
+    width: 14px;
+    height: 14px;
+    color: ${colors.textSecondary};
+  `,
+  folderStatIconRemote: css`
+    width: 14px;
+    height: 14px;
+    color: #ef4444;
+  `,
+  storedLabel: css`
+    display: flex;
+    align-items: center;
+  `,
+  storedIconCloud: css`
+    width: 16px;
+    height: 16px;
+    color: #f59e0b;
+  `,
+  storedIconRemote: css`
+    width: 16px;
+    height: 16px;
+    color: #ef4444;
+  `,
+  globeIcon: css`
+    width: 16px;
+    height: 16px;
+    color: #ef4444;
+  `,
+  tooltip: css`
+    position: absolute;
+    top: 50%;
+    right: 100%;
+    transform: translateY(-50%);
+    background: #1a1f36;
+    color: white;
+    padding: 4px 8px;
+    border-radius: 4px;
+    font-size: 12px;
+    white-space: nowrap;
+    margin-right: 6px;
+    pointer-events: none;
+    z-index: 100;
+    
+    &::after {
+      content: '';
+      position: absolute;
+      left: 100%;
+      top: 50%;
+      transform: translateY(-50%);
+      border: 4px solid transparent;
+      border-left-color: #1a1f36;
+    }
+  `,
+  nameCell: css`
+    display: flex;
+    align-items: center;
+    gap: 12px;
+    flex: 1;
+  `,
+  thumbnailWrapper: css`
+    width: 48px;
+    height: 36px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    flex-shrink: 0;
+  `,
+  folderIconWrapper: css`
+    width: 48px;
+    height: 36px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    flex-shrink: 0;
+  `,
+  folderIcon: css`
+    width: 24px;
+    height: 24px;
+    color: #f9935e;
+  `,
+  imagesFolderWrapper: css`
+    width: 48px;
+    height: 36px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    flex-shrink: 0;
+    position: relative;
+    align-items: center;
+  `,
+  imagesFolderIcon: css`
+    width: 24px;
+    height: 24px;
+    color: ${colors.imagesFolder};
+  `,
+  lockIcon: css`
+    width: 10px;
+    height: 10px;
+    color: ${colors.imagesFolder};
+    margin-left: -6px;
+    margin-top: 8px;
+  `,
+  parentIcon: css`
+    width: 20px;
+    height: 20px;
+    color: ${colors.textMuted};
+    flex-shrink: 0;
+  `,
+  fileIcon: css`
+    width: 20px;
+    height: 20px;
+    color: ${colors.textMuted};
+    flex-shrink: 0;
+  `,
+  thumbnail: css`
+    max-width: 100%;
+    max-height: 100%;
+    width: auto;
+    height: auto;
+    object-fit: contain;
+    border-radius: 4px;
+    border: 1px solid ${colors.borderLight};
+  `,
+  noThumbnail: css`
+    width: 36px;
+    height: 36px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    background: ${colors.background};
+    border: 1px dashed ${colors.border};
+    border-radius: 4px;
+    flex-shrink: 0;
+    cursor: pointer;
+    transition: all 0.15s ease;
+    
+    &:hover {
+      border-color: ${colors.primary};
+      background: ${colors.surfaceHover};
+    }
+  `,
+  noThumbnailIcon: css`
+    width: 16px;
+    height: 16px;
+    color: ${colors.textMuted};
+  `,
+  name: css`
+    font-size: ${fontSize.base};
+    font-weight: 500;
+    color: ${colors.text};
+    letter-spacing: -0.01em;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    max-width: 300px;
+  `,
+  meta: css`
+    font-size: ${fontSize.sm};
+    color: ${colors.textSecondary};
+  `,
+  cdnBadge: css`
+    display: inline-flex;
+    align-items: center;
+    gap: 4px;
+    font-size: ${fontSize.xs};
+    font-weight: 500;
+    color: ${colors.success};
+  `,
+  cdnBadgeRemote: css`
+    display: inline-flex;
+    align-items: center;
+    font-size: ${fontSize.xs};
+    font-weight: 500;
+    color: #ef4444;
+  `,
+  cdnIcon: css`
+    width: 12px;
+    height: 12px;
+  `,
+  cdnEmpty: css`
+    font-size: ${fontSize.sm};
+    color: ${colors.textMuted};
+  `,
+  openBtn: css`
+    height: 32px;
+    font-size: ${fontSize.sm};
+    font-weight: 500;
+    color: ${colors.primary};
+    background: ${colors.surface};
+    border: 1px solid ${colors.border};
+    padding: 0 14px;
+    cursor: pointer;
+    border-radius: 4px;
+    transition: all 0.15s ease;
+    display: inline-flex;
+    align-items: center;
+    
+    &:hover {
+      background-color: ${colors.primaryLight};
+      border-color: ${colors.primary};
+    }
+  `,
+}
+
+export function StudioFileList() {
+  const {
+    loading,
+    sortedItems,
+    metaEmpty,
+    isAtRoot,
+    isSearching,
+    allItemsSelected,
+    someItemsSelected,
+    selectedItems,
+    navigateUp,
+    handleItemClick,
+    handleOpen,
+    handleGenerateThumbnail,
+    handleSelectAll,
+    triggerScan,
+  } = useFileList()
+
+  if (loading) {
+    return (
+      <div css={styles.loading}>
+        <div css={styles.spinner} />
+      </div>
+    )
+  }
+
+  if (metaEmpty && isAtRoot) {
+    return (
+      <div css={styles.empty}>
+        <p>No files tracked yet</p>
+        <p css={styles.emptyHint}>Click Scan to discover files in your public folder</p>
+        <button 
+          css={styles.scanButton}
+          onClick={triggerScan}
+        >
+          Scan for Files
+        </button>
+      </div>
+    )
+  }
+
+  if (sortedItems.length === 0 && isAtRoot) {
+    return (
+      <div css={styles.empty}>
+        <p>No files in this folder</p>
+        <p css={styles.emptyHint}>Upload images or click Scan in the toolbar</p>
+      </div>
+    )
+  }
+
+  return (
+    <div css={styles.tableWrapper}>
+      <table css={styles.table}>
+        <thead>
+          <tr>
+            <th css={[styles.th, styles.thCheckbox]}>
+              {sortedItems.length > 0 && (
+                <input
+                  type="checkbox"
+                  css={styles.checkbox}
+                  checked={allItemsSelected}
+                  ref={(el) => {
+                    if (el) el.indeterminate = someItemsSelected && !allItemsSelected
+                  }}
+                  onChange={handleSelectAll}
+                />
+              )}
+            </th>
+            <th css={styles.th}>Name</th>
+            <th css={[styles.th, styles.thSize]}>Size</th>
+            <th css={[styles.th, styles.thDimensions]}>Dimensions</th>
+            <th css={[styles.th, styles.thCdn]}>CDN</th>
+          </tr>
+        </thead>
+        <tbody css={styles.tbody}>
+          {/* Parent folder navigation - hide when searching */}
+          {!isAtRoot && !isSearching && (
+            <tr css={styles.parentRow} onClick={navigateUp}>
+              <td css={styles.td}></td>
+              <td css={styles.td}>
+                <div css={styles.nameCell}>
+                  <svg css={styles.parentIcon} fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={1.5} d="M3 10h10a8 8 0 018 8v2M3 10l6 6m-6-6l6-6" />
+                  </svg>
+                  <span css={styles.name}>..</span>
+                </div>
+              </td>
+              <td css={[styles.td, styles.meta]}>--</td>
+              <td css={[styles.td, styles.meta]}>Parent folder</td>
+              <td css={styles.td}>--</td>
+            </tr>
+          )}
+          
+          {sortedItems.map((item) => (
+            <ListRow
+              key={item.path}
+              item={item}
+              isSelected={selectedItems.has(item.path)}
+              onClick={(e) => handleItemClick(item, e)}
+              onOpen={() => handleOpen(item)}
+              onGenerateThumbnail={() => handleGenerateThumbnail(item)}
+            />
+          ))}
+        </tbody>
+      </table>
+    </div>
+  )
+}
+
+interface ListRowProps {
+  item: FileItem
+  isSelected: boolean
+  onClick: (e: React.MouseEvent) => void
+  onOpen: () => void
+  onGenerateThumbnail: () => void
+}
+
+function ListRow({ item, isSelected, onClick, onOpen, onGenerateThumbnail }: ListRowProps) {
+  const [showCopied, setShowCopied] = useState(false)
+  const isFolder = item.type === 'folder'
+  const isImage = !isFolder && item.thumbnail !== undefined
+  const isProtected = item.isProtected || (isFolder && item.name === 'images' && item.path === 'public/images')
+
+  const handleCopyPath = (e: React.MouseEvent) => {
+    e.stopPropagation()
+    const pathToCopy = '/' + item.path.replace(/^public\//, '')
+    navigator.clipboard.writeText(pathToCopy)
+    setShowCopied(true)
+    setTimeout(() => setShowCopied(false), 1500)
+  }
+
+  const handleClick = (e: React.MouseEvent) => {
+    // Protected items cannot be selected, only opened
+    if (isProtected) {
+      e.stopPropagation()
+      onOpen()
+      return
+    }
+    onClick(e)
+  }
+
+  return (
+    <tr 
+      css={[styles.row, isSelected && !isProtected && styles.rowSelected]} 
+      onClick={handleClick}
+    >
+      <td
+        css={[styles.td, styles.checkboxCell]}
+        onClick={(e) => e.stopPropagation()}
+      >
+        {!isProtected && (
+          <input
+            type="checkbox"
+            css={styles.checkbox}
+            checked={isSelected}
+            onChange={() => onClick({} as React.MouseEvent)}
+          />
+        )}
+      </td>
+      <td css={styles.td}>
+        <div css={styles.nameCell}>
+          {isFolder ? (
+            isProtected ? (
+              <div css={styles.imagesFolderWrapper}>
+                <svg css={styles.imagesFolderIcon} fill="currentColor" viewBox="0 0 24 24">
+                  <path d="M10 4H4a2 2 0 00-2 2v12a2 2 0 002 2h16a2 2 0 002-2V8a2 2 0 00-2-2h-8l-2-2z" />
+                </svg>
+                <svg css={styles.lockIcon} fill="currentColor" viewBox="0 0 20 20">
+                  <path fillRule="evenodd" d="M5 9V7a5 5 0 0110 0v2a2 2 0 012 2v5a2 2 0 01-2 2H5a2 2 0 01-2-2v-5a2 2 0 012-2zm8-2v2H7V7a3 3 0 016 0z" clipRule="evenodd" />
+                </svg>
+              </div>
+            ) : (
+              <div css={styles.folderIconWrapper}>
+                <svg css={styles.folderIcon} fill="currentColor" viewBox="0 0 24 24">
+                  <path d="M10 4H4a2 2 0 00-2 2v12a2 2 0 002 2h16a2 2 0 002-2V8a2 2 0 00-2-2h-8l-2-2z" />
+                </svg>
+              </div>
+            )
+          ) : isImage && item.thumbnail ? (
+            <div css={styles.thumbnailWrapper}>
+              <img css={styles.thumbnail} src={item.thumbnail} alt={item.name} loading="lazy" />
+            </div>
+          ) : (
+            <div css={styles.thumbnailWrapper}>
+              <svg css={styles.fileIcon} fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={1.5} d="M7 21h10a2 2 0 002-2V9.414a1 1 0 00-.293-.707l-5.414-5.414A1 1 0 0012.586 3H7a2 2 0 00-2 2v14a2 2 0 002 2z" />
+              </svg>
+            </div>
+          )}
+          <span css={styles.name} title={item.name}>{truncateMiddle(item.name)}</span>
+          <div css={styles.actionsCell}>
+            <button
+              css={styles.copyBtn}
+              onClick={handleCopyPath}
+              title="Copy file path"
+            >
+              {showCopied && <span css={styles.tooltip}>Copied!</span>}
+              <svg css={styles.copyIcon} fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2" />
+              </svg>
+            </button>
+            <button
+              css={styles.openBtn}
+              onClick={(e) => {
+                e.stopPropagation()
+                onOpen()
+              }}
+            >
+              Open
+            </button>
+          </div>
+        </div>
+      </td>
+      <td css={[styles.td, styles.meta]}>
+        {isFolder ? (
+          <div css={styles.folderStats}>
+            {item.localCount !== undefined && item.localCount > 0 && (
+              <span css={[styles.folderStat, styles.folderStatLocal]} title={`${item.localCount} local`}>
+                <svg css={styles.folderStatIconLocal} fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z" />
+                </svg>
+                {item.localCount}
+              </span>
+            )}
+            {item.cloudCount !== undefined && item.cloudCount > 0 && (
+              <span css={[styles.folderStat, styles.folderStatCloud]} title={`${item.cloudCount} in cloud`}>
+                <svg css={styles.folderStatIconCloud} fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M3 15a4 4 0 004 4h9a5 5 0 10-.1-9.999 5.002 5.002 0 10-9.78 2.096A4.001 4.001 0 003 15z" />
+                </svg>
+                {item.cloudCount}
+              </span>
+            )}
+            {item.remoteCount !== undefined && item.remoteCount > 0 && (
+              <span css={[styles.folderStat, styles.folderStatRemote]} title={`${item.remoteCount} remote`}>
+                <svg css={styles.folderStatIconRemote} fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M21 12a9 9 0 01-9 9m9-9a9 9 0 00-9-9m9 9H3m9 9a9 9 0 01-9-9m9 9c1.657 0 3-4.03 3-9s-1.343-9-3-9m0 18c-1.657 0-3-4.03-3-9s1.343-9 3-9m-9 9a9 9 0 019-9" />
+                </svg>
+                {item.remoteCount}
+              </span>
+            )}
+            {!item.localCount && !item.cloudCount && !item.remoteCount && item.fileCount !== undefined && (
+              <span>{item.fileCount} files</span>
+            )}
+            {!item.localCount && !item.cloudCount && !item.remoteCount && item.fileCount === undefined && '--'}
+          </div>
+        ) : item.cdnPushed ? (
+          <span css={styles.storedLabel}>
+            <svg css={item.isRemote ? styles.storedIconRemote : styles.storedIconCloud} fill="none" stroke="currentColor" viewBox="0 0 24 24">
+              {item.isRemote ? (
+                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M21 12a9 9 0 01-9 9m9-9a9 9 0 00-9-9m9 9H3m9 9a9 9 0 01-9-9m9 9c1.657 0 3-4.03 3-9s-1.343-9-3-9m0 18c-1.657 0-3-4.03-3-9s1.343-9 3-9m-9 9a9 9 0 019-9" />
+              ) : (
+                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M3 15a4 4 0 004 4h9a5 5 0 10-.1-9.999 5.002 5.002 0 10-9.78 2.096A4.001 4.001 0 003 15z" />
+              )}
+            </svg>
+          </span>
+        ) : (
+          item.size !== undefined ? formatFileSize(item.size) : '--'
+        )}
+      </td>
+      <td css={[styles.td, styles.meta]}>
+        {isFolder 
+          ? (item.totalSize !== undefined ? formatFileSize(item.totalSize) : '--')
+          : (item.dimensions ? `${item.dimensions.width}x${item.dimensions.height}` : '--')
+        }
+      </td>
+      <td css={styles.td}>
+        {item.cdnPushed ? (
+          item.isRemote ? (
+            <span css={styles.cdnBadgeRemote}>Remote</span>
+          ) : (
+            <span css={styles.cdnBadge}>
+              <svg css={styles.cdnIcon} fill="currentColor" viewBox="0 0 20 20">
+                <path fillRule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clipRule="evenodd" />
+              </svg>
+              Pushed
+            </span>
+          )
+        ) : (
+          <span css={styles.cdnEmpty}>--</span>
+        )}
+      </td>
+    </tr>
+  )
+}
+
+function formatFileSize(bytes: number): string {
+  if (bytes < 1024) return `${bytes} B`
+  if (bytes < 1024 * 1024) return `${(bytes / 1024).toFixed(1)} KB`
+  return `${(bytes / (1024 * 1024)).toFixed(1)} MB`
+}
+
+function getParentPath(path: string): string {
+  const parts = path.split('/')
+  parts.pop() // Remove current folder
+  return parts.join('/') + '/'
+}
+
+function truncateMiddle(str: string, maxLength: number = 32): string {
+  if (str.length <= maxLength) return str
+  
+  // Find the extension
+  const lastDot = str.lastIndexOf('.')
+  const ext = lastDot > 0 ? str.substring(lastDot) : ''
+  const name = lastDot > 0 ? str.substring(0, lastDot) : str
+  
+  // Calculate how much we can show of the name
+  const availableLength = maxLength - ext.length - 3 // 3 for "..."
+  if (availableLength < 6) {
+    // Too short, just truncate from end
+    return str.substring(0, maxLength - 3) + '...'
+  }
+  
+  const startLength = Math.ceil(availableLength / 2)
+  const endLength = Math.floor(availableLength / 2)
+  
+  return name.substring(0, startLength) + '...' + name.substring(name.length - endLength) + ext
+}