@gallop.software/studio 1.5.10 → 2.0.0

package/src/components/StudioSettings.tsx

@@ -0,0 +1,536 @@
+/** @jsxImportSource @emotion/react */
+'use client'
+
+import { useState, useEffect, useCallback } from 'react'
+import { css } from '@emotion/react'
+import { colors, fontSize, baseReset } from './tokens'
+import { useStudio } from './StudioContext'
+
+// Standard button height for consistency
+const btnHeight = '36px'
+
+const styles = {
+  btn: css`
+    height: ${btnHeight};
+    padding: 0 12px;
+    background: ${colors.surface};
+    border: 1px solid ${colors.border};
+    border-radius: 6px;
+    cursor: pointer;
+    transition: all 0.15s ease;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    
+    &:hover {
+      background-color: ${colors.surfaceHover};
+      border-color: ${colors.borderHover};
+    }
+  `,
+  icon: css`
+    width: 16px;
+    height: 16px;
+    color: ${colors.textSecondary};
+  `,
+  overlay: css`
+    position: fixed;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0;
+    z-index: 10000;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    background-color: rgba(26, 31, 54, 0.4);
+    backdrop-filter: blur(4px);
+  `,
+  panel: css`
+    ${baseReset}
+    position: relative;
+    background-color: ${colors.surface};
+    border-radius: 12px;
+    box-shadow: 0 30px 60px -12px rgba(50, 50, 93, 0.25), 0 18px 36px -18px rgba(0, 0, 0, 0.3);
+    width: 100%;
+    max-width: 512px;
+    padding: 24px;
+  `,
+  header: css`
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    margin-bottom: 24px;
+  `,
+  title: css`
+    font-size: ${fontSize.xl};
+    font-weight: 600;
+    color: ${colors.text};
+    margin: 0;
+    letter-spacing: -0.02em;
+  `,
+  closeBtn: css`
+    padding: 6px;
+    background: ${colors.surface};
+    border: 1px solid ${colors.border};
+    border-radius: 6px;
+    cursor: pointer;
+    transition: all 0.15s ease;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    
+    &:hover {
+      background-color: ${colors.surfaceHover};
+      border-color: ${colors.borderHover};
+    }
+  `,
+  sections: css`
+    display: flex;
+    flex-direction: column;
+    gap: 24px;
+  `,
+  sectionTitle: css`
+    font-size: ${fontSize.base};
+    font-weight: 600;
+    color: ${colors.text};
+    margin: 0 0 12px 0;
+  `,
+  description: css`
+    font-size: ${fontSize.sm};
+    color: ${colors.textSecondary};
+    margin: 0 0 12px 0;
+  `,
+  codeWrapper: css`
+    position: relative;
+  `,
+  code: css`
+    background-color: ${colors.background};
+    border-radius: 8px;
+    padding: 12px;
+    padding-right: 40px;
+    font-family: 'SF Mono', Monaco, Consolas, monospace;
+    font-size: ${fontSize.xs};
+    color: ${colors.textSecondary};
+    border: 1px solid ${colors.border};
+    overflow-x: auto;
+    white-space: nowrap;
+  `,
+  copyBtn: css`
+    position: absolute;
+    top: 8px;
+    right: 8px;
+    padding: 4px;
+    background: ${colors.surface};
+    border: 1px solid ${colors.border};
+    border-radius: 4px;
+    cursor: pointer;
+    transition: all 0.15s ease;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    
+    &:hover {
+      background-color: ${colors.surfaceHover};
+      border-color: ${colors.borderHover};
+    }
+  `,
+  tooltip: css`
+    position: absolute;
+    bottom: 100%;
+    left: 50%;
+    transform: translateX(-50%);
+    background: #1a1f36;
+    color: white;
+    padding: 4px 8px;
+    border-radius: 4px;
+    font-size: 12px;
+    white-space: nowrap;
+    margin-bottom: 6px;
+    pointer-events: none;
+    z-index: 100;
+    
+    &::after {
+      content: '';
+      position: absolute;
+      top: 100%;
+      left: 50%;
+      transform: translateX(-50%);
+      border: 4px solid transparent;
+      border-top-color: #1a1f36;
+    }
+  `,
+  copyIcon: css`
+    width: 14px;
+    height: 14px;
+    color: ${colors.textSecondary};
+  `,
+  codeLine: css`
+    margin: 0 0 4px 0;
+    
+    &:last-child {
+      margin: 0;
+    }
+  `,
+  input: css`
+    width: 100%;
+    padding: 10px 14px;
+    border: 1px solid ${colors.border};
+    border-radius: 6px;
+    font-size: ${fontSize.base};
+    color: ${colors.text};
+    background: ${colors.surface};
+    transition: all 0.15s ease;
+    
+    &:focus {
+      outline: none;
+      border-color: ${colors.primary};
+      box-shadow: 0 0 0 3px ${colors.primaryLight};
+    }
+    
+    &::placeholder {
+      color: ${colors.textMuted};
+    }
+  `,
+  grid: css`
+    display: grid;
+    grid-template-columns: repeat(3, 1fr);
+    gap: 12px;
+  `,
+  label: css`
+    font-size: ${fontSize.xs};
+    font-weight: 500;
+    color: ${colors.textSecondary};
+    display: block;
+    margin-bottom: 6px;
+  `,
+  footer: css`
+    margin-top: 24px;
+    padding-top: 20px;
+    border-top: 1px solid ${colors.border};
+    display: flex;
+    justify-content: flex-end;
+    gap: 12px;
+  `,
+  cancelBtn: css`
+    padding: 10px 18px;
+    font-size: ${fontSize.base};
+    font-weight: 500;
+    color: ${colors.text};
+    background: ${colors.surface};
+    border: 1px solid ${colors.border};
+    border-radius: 6px;
+    cursor: pointer;
+    transition: all 0.15s ease;
+    
+    &:hover {
+      background-color: ${colors.surfaceHover};
+      border-color: ${colors.borderHover};
+    }
+  `,
+  saveBtn: css`
+    padding: 10px 18px;
+    font-size: ${fontSize.base};
+    font-weight: 500;
+    color: white;
+    background-color: ${colors.primary};
+    border: 1px solid ${colors.primary};
+    border-radius: 6px;
+    cursor: pointer;
+    transition: all 0.15s ease;
+    
+    &:hover {
+      background-color: ${colors.primaryHover};
+      border-color: ${colors.primaryHover};
+    }
+    
+    &:disabled {
+      opacity: 0.6;
+      cursor: not-allowed;
+    }
+  `,
+  cdnList: css`
+    display: flex;
+    flex-direction: column;
+    gap: 8px;
+  `,
+  cdnRow: css`
+    display: flex;
+    gap: 8px;
+    align-items: center;
+  `,
+  cdnInput: css`
+    flex: 1;
+    padding: 8px 12px;
+    border: 1px solid ${colors.border};
+    border-radius: 6px;
+    font-size: ${fontSize.sm};
+    color: ${colors.text};
+    background: ${colors.surface};
+    transition: all 0.15s ease;
+    
+    &:focus {
+      outline: none;
+      border-color: ${colors.primary};
+      box-shadow: 0 0 0 3px ${colors.primaryLight};
+    }
+  `,
+  cdnIndex: css`
+    font-size: ${fontSize.xs};
+    color: ${colors.textMuted};
+    width: 24px;
+    text-align: center;
+    flex-shrink: 0;
+  `,
+  cdnDeleteBtn: css`
+    padding: 6px;
+    background: none;
+    border: none;
+    cursor: pointer;
+    color: ${colors.textMuted};
+    transition: color 0.15s;
+    flex-shrink: 0;
+    
+    &:hover {
+      color: ${colors.danger};
+    }
+  `,
+  cdnAddBtn: css`
+    padding: 8px 12px;
+    font-size: ${fontSize.sm};
+    font-weight: 500;
+    color: ${colors.primary};
+    background: ${colors.primaryLight};
+    border: 1px dashed ${colors.primary};
+    border-radius: 6px;
+    cursor: pointer;
+    transition: all 0.15s ease;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    gap: 6px;
+    margin-top: 8px;
+    
+    &:hover {
+      background: ${colors.surface};
+    }
+  `,
+  warning: css`
+    font-size: ${fontSize.xs};
+    color: ${colors.danger};
+    margin-top: 8px;
+    padding: 8px 12px;
+    background: ${colors.dangerLight};
+    border-radius: 6px;
+  `,
+}
+
+export function StudioSettings() {
+  const [isOpen, setIsOpen] = useState(false)
+
+  return (
+    <>
+      <button css={styles.btn} onClick={() => setIsOpen(true)} aria-label="Settings">
+        <svg
+          css={styles.icon}
+          xmlns="http://www.w3.org/2000/svg"
+          viewBox="0 0 24 24"
+          fill="none"
+          stroke="currentColor"
+          strokeWidth={2}
+          strokeLinecap="round"
+          strokeLinejoin="round"
+        >
+          <circle cx="12" cy="12" r="3" />
+          <path d="M19.4 15a1.65 1.65 0 00.33 1.82l.06.06a2 2 0 010 2.83 2 2 0 01-2.83 0l-.06-.06a1.65 1.65 0 00-1.82-.33 1.65 1.65 0 00-1 1.51V21a2 2 0 01-2 2 2 2 0 01-2-2v-.09A1.65 1.65 0 009 19.4a1.65 1.65 0 00-1.82.33l-.06.06a2 2 0 01-2.83 0 2 2 0 010-2.83l.06-.06a1.65 1.65 0 00.33-1.82 1.65 1.65 0 00-1.51-1H3a2 2 0 01-2-2 2 2 0 012-2h.09A1.65 1.65 0 004.6 9a1.65 1.65 0 00-.33-1.82l-.06-.06a2 2 0 010-2.83 2 2 0 012.83 0l.06.06a1.65 1.65 0 001.82.33H9a1.65 1.65 0 001-1.51V3a2 2 0 012-2 2 2 0 012 2v.09a1.65 1.65 0 001 1.51 1.65 1.65 0 001.82-.33l.06-.06a2 2 0 012.83 0 2 2 0 010 2.83l-.06.06a1.65 1.65 0 00-.33 1.82V9a1.65 1.65 0 001.51 1H21a2 2 0 012 2 2 2 0 01-2 2h-.09a1.65 1.65 0 00-1.51 1z" />
+        </svg>
+      </button>
+
+      {isOpen && <SettingsPanel onClose={() => setIsOpen(false)} />}
+    </>
+  )
+}
+
+const envTemplate = `CLOUDFLARE_R2_ACCOUNT_ID=abc123def456ghi789
+CLOUDFLARE_R2_ACCESS_KEY_ID=your_access_key_id_here
+CLOUDFLARE_R2_SECRET_ACCESS_KEY=your_secret_access_key_here
+CLOUDFLARE_R2_BUCKET_NAME=my-images-bucket
+CLOUDFLARE_R2_PUBLIC_URL=https://cdn.yourdomain.com`
+
+function SettingsPanel({ onClose }: { onClose: () => void }) {
+  const { triggerRefresh } = useStudio()
+  const [copied, setCopied] = useState(false)
+  const [cdnUrls, setCdnUrls] = useState<string[]>([])
+  const [loading, setLoading] = useState(true)
+  const [saving, setSaving] = useState(false)
+  const [hasChanges, setHasChanges] = useState(false)
+
+  // Load CDN URLs on mount
+  useEffect(() => {
+    async function loadCdns() {
+      try {
+        const response = await fetch('/api/studio/cdns')
+        const data = await response.json()
+        setCdnUrls(data.cdns || [])
+      } catch (error) {
+        console.error('Failed to load CDN URLs:', error)
+      } finally {
+        setLoading(false)
+      }
+    }
+    loadCdns()
+  }, [])
+
+  const handleCopy = () => {
+    navigator.clipboard.writeText(envTemplate)
+    setCopied(true)
+    setTimeout(() => setCopied(false), 2000)
+  }
+
+  const handleCdnChange = useCallback((index: number, value: string) => {
+    setCdnUrls(prev => {
+      const updated = [...prev]
+      updated[index] = value
+      return updated
+    })
+    setHasChanges(true)
+  }, [])
+
+  const handleAddCdn = useCallback(() => {
+    setCdnUrls(prev => [...prev, ''])
+    setHasChanges(true)
+  }, [])
+
+  const handleDeleteCdn = useCallback((index: number) => {
+    setCdnUrls(prev => prev.filter((_, i) => i !== index))
+    setHasChanges(true)
+  }, [])
+
+  const handleSave = useCallback(async () => {
+    setSaving(true)
+    try {
+      const response = await fetch('/api/studio/cdns', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        // Preserve empty strings as placeholders to maintain indices
+        body: JSON.stringify({ cdns: cdnUrls }),
+      })
+      
+      if (response.ok) {
+        setHasChanges(false)
+        triggerRefresh()
+        onClose()
+      }
+    } catch (error) {
+      console.error('Failed to save CDN URLs:', error)
+    } finally {
+      setSaving(false)
+    }
+  }, [cdnUrls, triggerRefresh, onClose])
+
+  return (
+    <div css={styles.overlay} onClick={onClose}>
+      <div css={styles.panel} onClick={(e) => e.stopPropagation()}>
+        <div css={styles.header}>
+          <h2 css={styles.title}>Settings</h2>
+          <button css={styles.closeBtn} onClick={onClose}>
+            <svg css={styles.icon} fill="none" stroke="currentColor" viewBox="0 0 24 24">
+              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" />
+            </svg>
+          </button>
+        </div>
+
+        <div css={styles.sections}>
+          <section>
+            <h3 css={styles.sectionTitle}>CDN URLs</h3>
+            <p css={styles.description}>Manage CDN base URLs used by your images:</p>
+            {loading ? (
+              <p css={styles.description}>Loading...</p>
+            ) : (
+              <>
+                <div css={styles.cdnList}>
+                  {cdnUrls.map((url, index) => (
+                    <div key={index} css={styles.cdnRow}>
+                      <span css={styles.cdnIndex}>{index}</span>
+                      <input
+                        css={styles.cdnInput}
+                        type="text"
+                        value={url}
+                        onChange={(e) => handleCdnChange(index, e.target.value)}
+                        placeholder="https://cdn.example.com"
+                      />
+                      <button
+                        css={styles.cdnDeleteBtn}
+                        onClick={() => handleDeleteCdn(index)}
+                        title="Delete CDN URL"
+                      >
+                        <svg width="16" height="16" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                          <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16" />
+                        </svg>
+                      </button>
+                    </div>
+                  ))}
+                </div>
+                <button css={styles.cdnAddBtn} onClick={handleAddCdn}>
+                  <svg width="14" height="14" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 4v16m8-8H4" />
+                  </svg>
+                  Add CDN URL
+                </button>
+                {cdnUrls.length > 0 && (
+                  <p css={styles.warning}>
+                    Warning: Changing CDN URLs may break image references. The index numbers correspond to image `c` values.
+                  </p>
+                )}
+              </>
+            )}
+          </section>
+
+          <section>
+            <h3 css={styles.sectionTitle}>Cloudflare R2 Credentials</h3>
+            <p css={styles.description}>Configure in .env.local file:</p>
+            <div css={styles.codeWrapper}>
+              <button css={styles.copyBtn} onClick={handleCopy} title="Copy to clipboard">
+                {copied && <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>
+              <div css={styles.code}>
+                <p css={styles.codeLine}>CLOUDFLARE_R2_ACCOUNT_ID=abc123def456ghi789</p>
+                <p css={styles.codeLine}>CLOUDFLARE_R2_ACCESS_KEY_ID=your_access_key_id_here</p>
+                <p css={styles.codeLine}>CLOUDFLARE_R2_SECRET_ACCESS_KEY=your_secret_access_key_here</p>
+                <p css={styles.codeLine}>CLOUDFLARE_R2_BUCKET_NAME=my-images-bucket</p>
+                <p css={styles.codeLine}>CLOUDFLARE_R2_PUBLIC_URL=https://cdn.yourdomain.com</p>
+              </div>
+            </div>
+          </section>
+
+          <section>
+            <h3 css={styles.sectionTitle}>Thumbnail Sizes</h3>
+            <div css={styles.grid}>
+              <div>
+                <label css={styles.label}>Small</label>
+                <input css={styles.input} type="number" defaultValue={300} />
+              </div>
+              <div>
+                <label css={styles.label}>Medium</label>
+                <input css={styles.input} type="number" defaultValue={700} />
+              </div>
+              <div>
+                <label css={styles.label}>Large</label>
+                <input css={styles.input} type="number" defaultValue={1400} />
+              </div>
+            </div>
+          </section>
+        </div>
+
+        <div css={styles.footer}>
+          <button css={styles.cancelBtn} onClick={onClose}>Cancel</button>
+          <button css={styles.saveBtn} onClick={handleSave} disabled={saving || !hasChanges}>
+            {saving ? 'Saving...' : 'Save Changes'}
+          </button>
+        </div>
+      </div>
+    </div>
+  )
+}