Mercurial
annotate hg-web/src/components/directory-browser.tsx @ 224:3007ef5fc0ed hg-web
[hg-web] Simplify visuals and preview static files
| author | MrJuneJune <me@mrjunejune.com> |
|---|---|
| date | Sun, 02 Aug 2026 13:51:11 -0700 |
| parents | 0e7b9464248d |
| children | 70de0c80d093 |
| rev | line source |
|---|---|
| 193 | 1 import React, { useState, useEffect, useRef, useCallback } from 'react'; |
| 2 import createMarkdownModule from 'markdown_converter/markdown_to_html_wasm/markdown_to_html_bin.js'; | |
| 3 import hljs from 'third_party/highlight/highlight.min.js'; | |
| 4 | |
| 5 // --- ICONS (served as static files) --- | |
| 6 const ICONS = { | |
| 7 folder: "/icons/folder.png", | |
| 8 file: "/icons/file.svg", | |
| 9 close: "/icons/close.png" | |
| 10 }; | |
| 11 | |
| 12 const API_BASE = '/api/repo'; | |
| 13 | |
| 14 // File extensions that should be displayed as code | |
| 15 const CODE_EXTENSIONS = new Set([ | |
| 16 'js', 'jsx', 'ts', 'tsx', 'py', 'rb', 'java', 'c', 'cpp', 'h', 'hpp', | |
| 17 'cs', 'go', 'rs', 'swift', 'kt', 'scala', 'php', 'pl', 'sh', 'bash', | |
| 18 'zsh', 'fish', 'ps1', 'bat', 'cmd', 'html', 'htm', 'css', 'scss', | |
| 19 'sass', 'less', 'json', 'xml', 'yaml', 'yml', 'toml', 'ini', 'cfg', | |
| 20 'conf', 'md', 'markdown', 'txt', 'log', 'sql', 'graphql', 'vue', | |
| 21 'svelte', 'astro', 'prisma', 'dockerfile', 'makefile', 'cmake', | |
| 22 'gradle', 'pom', 'lock', 'gitignore', 'env', 'example', 'sample' | |
| 23 ]); | |
| 24 | |
|
224
3007ef5fc0ed
[hg-web] Simplify visuals and preview static files
MrJuneJune <me@mrjunejune.com>
parents:
223
diff
changeset
|
25 type StaticPreviewKind = 'image' | 'video' | 'audio' | 'pdf'; |
|
3007ef5fc0ed
[hg-web] Simplify visuals and preview static files
MrJuneJune <me@mrjunejune.com>
parents:
223
diff
changeset
|
26 |
|
3007ef5fc0ed
[hg-web] Simplify visuals and preview static files
MrJuneJune <me@mrjunejune.com>
parents:
223
diff
changeset
|
27 const IMAGE_EXTENSIONS = new Set([ |
|
3007ef5fc0ed
[hg-web] Simplify visuals and preview static files
MrJuneJune <me@mrjunejune.com>
parents:
223
diff
changeset
|
28 'png', 'jpg', 'jpeg', 'gif', 'webp', 'avif', 'bmp', 'ico', 'svg' |
|
3007ef5fc0ed
[hg-web] Simplify visuals and preview static files
MrJuneJune <me@mrjunejune.com>
parents:
223
diff
changeset
|
29 ]); |
|
3007ef5fc0ed
[hg-web] Simplify visuals and preview static files
MrJuneJune <me@mrjunejune.com>
parents:
223
diff
changeset
|
30 const VIDEO_EXTENSIONS = new Set(['mp4', 'm4v', 'webm', 'mov', 'ogv']); |
|
3007ef5fc0ed
[hg-web] Simplify visuals and preview static files
MrJuneJune <me@mrjunejune.com>
parents:
223
diff
changeset
|
31 const AUDIO_EXTENSIONS = new Set(['mp3', 'wav', 'ogg', 'oga', 'flac', 'm4a', 'aac']); |
|
3007ef5fc0ed
[hg-web] Simplify visuals and preview static files
MrJuneJune <me@mrjunejune.com>
parents:
223
diff
changeset
|
32 |
| 193 | 33 // Prefetch cache |
| 34 const prefetchCache = new Map<string, Promise<any>>(); | |
| 35 | |
| 36 function isCodeFile(filename: string): boolean { | |
| 37 const ext = filename.split('.').pop()?.toLowerCase() || ''; | |
| 38 const basename = filename.toLowerCase(); | |
| 39 return CODE_EXTENSIONS.has(ext) || | |
| 40 CODE_EXTENSIONS.has(basename) || | |
| 41 basename === 'dockerfile' || | |
| 42 basename === 'makefile' || | |
| 43 basename.startsWith('.'); | |
| 44 } | |
| 45 | |
| 46 function isMarkdownFile(filename: string): boolean { | |
| 47 const ext = filename.split('.').pop()?.toLowerCase() || ''; | |
| 48 return ext === 'md' || ext === 'markdown'; | |
| 49 } | |
| 50 | |
|
224
3007ef5fc0ed
[hg-web] Simplify visuals and preview static files
MrJuneJune <me@mrjunejune.com>
parents:
223
diff
changeset
|
51 function getStaticPreviewKind(filename: string): StaticPreviewKind | null { |
|
3007ef5fc0ed
[hg-web] Simplify visuals and preview static files
MrJuneJune <me@mrjunejune.com>
parents:
223
diff
changeset
|
52 const ext = filename.split('.').pop()?.toLowerCase() || ''; |
|
3007ef5fc0ed
[hg-web] Simplify visuals and preview static files
MrJuneJune <me@mrjunejune.com>
parents:
223
diff
changeset
|
53 if (IMAGE_EXTENSIONS.has(ext)) return 'image'; |
|
3007ef5fc0ed
[hg-web] Simplify visuals and preview static files
MrJuneJune <me@mrjunejune.com>
parents:
223
diff
changeset
|
54 if (VIDEO_EXTENSIONS.has(ext)) return 'video'; |
|
3007ef5fc0ed
[hg-web] Simplify visuals and preview static files
MrJuneJune <me@mrjunejune.com>
parents:
223
diff
changeset
|
55 if (AUDIO_EXTENSIONS.has(ext)) return 'audio'; |
|
3007ef5fc0ed
[hg-web] Simplify visuals and preview static files
MrJuneJune <me@mrjunejune.com>
parents:
223
diff
changeset
|
56 if (ext === 'pdf') return 'pdf'; |
|
3007ef5fc0ed
[hg-web] Simplify visuals and preview static files
MrJuneJune <me@mrjunejune.com>
parents:
223
diff
changeset
|
57 return null; |
|
3007ef5fc0ed
[hg-web] Simplify visuals and preview static files
MrJuneJune <me@mrjunejune.com>
parents:
223
diff
changeset
|
58 } |
|
3007ef5fc0ed
[hg-web] Simplify visuals and preview static files
MrJuneJune <me@mrjunejune.com>
parents:
223
diff
changeset
|
59 |
| 193 | 60 function prefetchDirectory(path: string): void { |
| 61 const cacheKey = `dir:${path}`; | |
| 62 if (prefetchCache.has(cacheKey)) return; | |
| 63 | |
| 64 const url = path | |
| 65 ? `${API_BASE}/list?path=${encodeURIComponent(path)}` | |
| 66 : `${API_BASE}/list`; | |
| 67 | |
| 68 prefetchCache.set(cacheKey, fetch(url).then(r => r.json()).catch(() => null)); | |
| 69 } | |
| 70 | |
| 71 function prefetchFile(path: string): void { | |
| 72 const cacheKey = `file:${path}`; | |
| 73 if (prefetchCache.has(cacheKey)) return; | |
| 74 | |
| 75 prefetchCache.set(cacheKey, | |
| 76 fetch(`${API_BASE}/file?path=${encodeURIComponent(path)}`) | |
| 77 .then(r => r.ok ? r.text() : null) | |
| 78 .catch(() => null) | |
| 79 ); | |
| 80 } | |
| 81 | |
| 82 async function getCachedFile(path: string): Promise<string | null> { | |
| 83 const cacheKey = `file:${path}`; | |
| 84 if (prefetchCache.has(cacheKey)) { | |
| 85 return prefetchCache.get(cacheKey); | |
| 86 } | |
| 87 prefetchFile(path); | |
| 88 return prefetchCache.get(cacheKey)!; | |
| 89 } | |
| 90 | |
| 91 /** | |
| 92 * Component: Breadcrumb | |
| 93 */ | |
| 94 function Breadcrumb({ currentPath, onNavigate }: { currentPath: string; onNavigate: (path: string) => void }) { | |
| 95 if (!currentPath) { | |
| 96 return ( | |
| 97 <nav className="breadcrumb"> | |
| 98 <span className="nav-item active">root</span> | |
| 99 </nav> | |
| 100 ); | |
| 101 } | |
| 102 | |
| 103 const parts = currentPath.split('/').filter(p => p); | |
| 104 const crumbs = parts.map((part, index) => ({ | |
| 105 name: part, | |
| 106 fullPath: parts.slice(0, index + 1).join('/') | |
| 107 })); | |
| 108 | |
| 109 return ( | |
| 110 <nav className="breadcrumb"> | |
| 111 <a | |
| 112 href="#" | |
| 113 onClick={(e) => { e.preventDefault(); onNavigate(''); }} | |
| 114 title="Go to Root" | |
| 115 > | |
| 116 root | |
| 117 </a> | |
| 118 {crumbs.map((crumb, index) => { | |
| 119 const isLast = index === crumbs.length - 1; | |
| 120 return ( | |
| 121 <React.Fragment key={crumb.fullPath}> | |
| 122 <span className="separator">/</span> | |
| 123 {isLast ? ( | |
| 124 <span className="nav-item active">{crumb.name}</span> | |
| 125 ) : ( | |
| 126 <a | |
| 127 href="#" | |
| 128 onClick={(e) => { e.preventDefault(); onNavigate(crumb.fullPath); }} | |
| 129 > | |
| 130 {crumb.name} | |
| 131 </a> | |
| 132 )} | |
| 133 </React.Fragment> | |
| 134 ); | |
| 135 })} | |
| 136 </nav> | |
| 137 ); | |
| 138 } | |
| 139 | |
| 140 /** | |
| 141 * Component: FileViewer | |
| 142 * Shows file content inline with syntax highlighting | |
| 143 */ | |
| 144 function FileViewer({ filePath, onClose }: { filePath: string; onClose: () => void }) { | |
| 145 const [content, setContent] = useState<string | null>(null); | |
| 146 const [loading, setLoading] = useState(true); | |
| 147 const codeRef = useRef<HTMLElement>(null); | |
| 148 | |
| 149 const filename = filePath.split('/').pop() || filePath; | |
| 150 | |
| 151 useEffect(() => { | |
| 152 setLoading(true); | |
| 153 getCachedFile(filePath).then((text) => { | |
| 154 setContent(text); | |
| 155 setLoading(false); | |
| 156 }); | |
| 157 }, [filePath]); | |
| 158 | |
| 159 useEffect(() => { | |
| 160 if (content && codeRef.current) { | |
| 161 hljs.highlightElement(codeRef.current); | |
| 162 } | |
| 163 }, [content]); | |
| 164 | |
| 165 useEffect(() => { | |
| 166 const handleKeyDown = (e: KeyboardEvent) => { | |
| 167 if (e.key === 'Escape') onClose(); | |
| 168 }; | |
| 169 window.addEventListener('keydown', handleKeyDown); | |
| 170 return () => window.removeEventListener('keydown', handleKeyDown); | |
| 171 }, [onClose]); | |
| 172 | |
| 173 const getLanguage = () => { | |
| 174 const ext = filename.split('.').pop()?.toLowerCase() || ''; | |
| 175 const langMap: Record<string, string> = { | |
| 176 js: 'javascript', jsx: 'javascript', ts: 'typescript', tsx: 'typescript', | |
| 177 py: 'python', rb: 'ruby', rs: 'rust', go: 'go', java: 'java', | |
| 178 c: 'c', cpp: 'cpp', h: 'c', hpp: 'cpp', cs: 'csharp', | |
| 179 sh: 'bash', bash: 'bash', zsh: 'bash', fish: 'bash', | |
| 180 json: 'json', yaml: 'yaml', yml: 'yaml', toml: 'toml', | |
| 181 html: 'html', htm: 'html', css: 'css', scss: 'scss', sass: 'scss', | |
| 182 sql: 'sql', md: 'markdown', markdown: 'markdown', xml: 'xml', | |
| 183 dockerfile: 'dockerfile', makefile: 'makefile' | |
| 184 }; | |
| 185 return langMap[ext] || 'plaintext'; | |
| 186 }; | |
| 187 | |
| 188 const addLineNumbers = (text: string) => { | |
| 189 const lines = text.split('\n'); | |
| 190 return lines.map((_, i) => i + 1).join('\n'); | |
| 191 }; | |
| 192 | |
| 193 return ( | |
| 194 <div className="file-viewer-overlay" onClick={onClose}> | |
| 195 <div className="file-viewer" onClick={(e) => e.stopPropagation()}> | |
| 196 <div className="file-viewer-header"> | |
| 197 <span className="file-viewer-title"> | |
| 198 <img src={ICONS.file} alt="" style={{ width: 16, height: 16 }} /> | |
| 199 {filename} | |
| 200 </span> | |
| 201 <button className="file-viewer-close" onClick={onClose} title="Close (Esc)"> | |
| 202 <img className="icon-invert" src={ICONS.close} alt="Close" /> | |
| 203 </button> | |
| 204 </div> | |
| 205 <div className="file-viewer-content"> | |
| 206 {loading ? ( | |
| 207 <div className="file-viewer-loading">Loading...</div> | |
| 208 ) : content ? ( | |
| 209 <pre style={{ display: 'flex' }}> | |
| 210 <span className="file-viewer-line-numbers">{addLineNumbers(content)}</span> | |
| 211 <code ref={codeRef} className={`language-${getLanguage()}`}>{content}</code> | |
| 212 </pre> | |
| 213 ) : ( | |
| 214 <div className="file-viewer-loading">Unable to load file</div> | |
| 215 )} | |
| 216 </div> | |
| 217 </div> | |
| 218 </div> | |
| 219 ); | |
| 220 } | |
| 221 | |
| 222 /** | |
| 223 * Component: MarkdownViewerModal | |
| 224 */ | |
| 225 function MarkdownViewerModal({ filePath, onClose }: { filePath: string; onClose: () => void }) { | |
| 226 const [content, setContent] = useState<string | null>(null); | |
| 227 const [loading, setLoading] = useState(true); | |
| 228 const contentRef = useRef<HTMLDivElement>(null); | |
| 229 const moduleRef = useRef<any>(null); | |
| 230 const [wasmReady, setWasmReady] = useState(false); | |
| 231 | |
| 232 const filename = filePath.split('/').pop() || filePath; | |
| 233 | |
| 234 useEffect(() => { | |
| 235 createMarkdownModule().then((Module: any) => { | |
| 236 moduleRef.current = Module; | |
| 237 setWasmReady(true); | |
| 238 }); | |
| 239 }, []); | |
| 240 | |
| 241 useEffect(() => { | |
| 242 setLoading(true); | |
| 243 getCachedFile(filePath).then((text) => { | |
| 244 setContent(text); | |
| 245 setLoading(false); | |
| 246 }); | |
| 247 }, [filePath]); | |
| 248 | |
| 249 useEffect(() => { | |
| 250 if (!content || !wasmReady || !contentRef.current || !moduleRef.current) return; | |
| 251 | |
| 252 const Module = moduleRef.current; | |
| 253 const markdownToHtmlPtr = Module.cwrap('markdown_to_html', 'number', ['string']); | |
| 254 const markdownFree = Module.cwrap('markdown_free', null, ['number']); | |
| 255 | |
| 256 const ptr = markdownToHtmlPtr(content); | |
| 257 const html = Module.UTF8ToString(ptr); | |
| 258 markdownFree(ptr); | |
| 259 contentRef.current.innerHTML = html; | |
| 260 }, [content, wasmReady]); | |
| 261 | |
| 262 useEffect(() => { | |
| 263 const handleKeyDown = (e: KeyboardEvent) => { | |
| 264 if (e.key === 'Escape') onClose(); | |
| 265 }; | |
| 266 window.addEventListener('keydown', handleKeyDown); | |
| 267 return () => window.removeEventListener('keydown', handleKeyDown); | |
| 268 }, [onClose]); | |
| 269 | |
| 270 return ( | |
| 271 <div className="file-viewer-overlay" onClick={onClose}> | |
| 272 <div className="file-viewer" onClick={(e) => e.stopPropagation()}> | |
| 273 <div className="file-viewer-header"> | |
| 274 <span className="file-viewer-title"> | |
| 275 <img src={ICONS.file} alt="" style={{ width: 16, height: 16 }} /> | |
| 276 {filename} | |
| 277 </span> | |
| 278 <button className="file-viewer-close" onClick={onClose} title="Close (Esc)"> | |
| 279 <img className="icon-invert" src={ICONS.close} alt="Close" /> | |
| 280 </button> | |
| 281 </div> | |
| 282 <div className="file-viewer-content"> | |
| 283 {loading || !wasmReady ? ( | |
| 284 <div className="file-viewer-loading">Loading...</div> | |
| 285 ) : content ? ( | |
| 286 <div className="readme-content" ref={contentRef} /> | |
| 287 ) : ( | |
| 288 <div className="file-viewer-loading">Unable to load file</div> | |
| 289 )} | |
| 290 </div> | |
| 291 </div> | |
| 292 </div> | |
| 293 ); | |
| 294 } | |
| 295 | |
|
224
3007ef5fc0ed
[hg-web] Simplify visuals and preview static files
MrJuneJune <me@mrjunejune.com>
parents:
223
diff
changeset
|
296 function StaticFileViewer({ filePath, onClose }: { filePath: string; onClose: () => void }) { |
|
3007ef5fc0ed
[hg-web] Simplify visuals and preview static files
MrJuneJune <me@mrjunejune.com>
parents:
223
diff
changeset
|
297 const filename = filePath.split('/').pop() || filePath; |
|
3007ef5fc0ed
[hg-web] Simplify visuals and preview static files
MrJuneJune <me@mrjunejune.com>
parents:
223
diff
changeset
|
298 const previewKind = getStaticPreviewKind(filename); |
|
3007ef5fc0ed
[hg-web] Simplify visuals and preview static files
MrJuneJune <me@mrjunejune.com>
parents:
223
diff
changeset
|
299 const fileUrl = `${API_BASE}/file?path=${encodeURIComponent(filePath)}`; |
|
3007ef5fc0ed
[hg-web] Simplify visuals and preview static files
MrJuneJune <me@mrjunejune.com>
parents:
223
diff
changeset
|
300 const [failed, setFailed] = useState(false); |
|
3007ef5fc0ed
[hg-web] Simplify visuals and preview static files
MrJuneJune <me@mrjunejune.com>
parents:
223
diff
changeset
|
301 |
|
3007ef5fc0ed
[hg-web] Simplify visuals and preview static files
MrJuneJune <me@mrjunejune.com>
parents:
223
diff
changeset
|
302 useEffect(() => { |
|
3007ef5fc0ed
[hg-web] Simplify visuals and preview static files
MrJuneJune <me@mrjunejune.com>
parents:
223
diff
changeset
|
303 const handleKeyDown = (event: KeyboardEvent) => { |
|
3007ef5fc0ed
[hg-web] Simplify visuals and preview static files
MrJuneJune <me@mrjunejune.com>
parents:
223
diff
changeset
|
304 if (event.key === 'Escape') onClose(); |
|
3007ef5fc0ed
[hg-web] Simplify visuals and preview static files
MrJuneJune <me@mrjunejune.com>
parents:
223
diff
changeset
|
305 }; |
|
3007ef5fc0ed
[hg-web] Simplify visuals and preview static files
MrJuneJune <me@mrjunejune.com>
parents:
223
diff
changeset
|
306 window.addEventListener('keydown', handleKeyDown); |
|
3007ef5fc0ed
[hg-web] Simplify visuals and preview static files
MrJuneJune <me@mrjunejune.com>
parents:
223
diff
changeset
|
307 return () => window.removeEventListener('keydown', handleKeyDown); |
|
3007ef5fc0ed
[hg-web] Simplify visuals and preview static files
MrJuneJune <me@mrjunejune.com>
parents:
223
diff
changeset
|
308 }, [onClose]); |
|
3007ef5fc0ed
[hg-web] Simplify visuals and preview static files
MrJuneJune <me@mrjunejune.com>
parents:
223
diff
changeset
|
309 |
|
3007ef5fc0ed
[hg-web] Simplify visuals and preview static files
MrJuneJune <me@mrjunejune.com>
parents:
223
diff
changeset
|
310 return ( |
|
3007ef5fc0ed
[hg-web] Simplify visuals and preview static files
MrJuneJune <me@mrjunejune.com>
parents:
223
diff
changeset
|
311 <div className="file-viewer-overlay" onClick={onClose}> |
|
3007ef5fc0ed
[hg-web] Simplify visuals and preview static files
MrJuneJune <me@mrjunejune.com>
parents:
223
diff
changeset
|
312 <div |
|
3007ef5fc0ed
[hg-web] Simplify visuals and preview static files
MrJuneJune <me@mrjunejune.com>
parents:
223
diff
changeset
|
313 className="file-viewer static-file-viewer" |
|
3007ef5fc0ed
[hg-web] Simplify visuals and preview static files
MrJuneJune <me@mrjunejune.com>
parents:
223
diff
changeset
|
314 role="dialog" |
|
3007ef5fc0ed
[hg-web] Simplify visuals and preview static files
MrJuneJune <me@mrjunejune.com>
parents:
223
diff
changeset
|
315 aria-modal="true" |
|
3007ef5fc0ed
[hg-web] Simplify visuals and preview static files
MrJuneJune <me@mrjunejune.com>
parents:
223
diff
changeset
|
316 aria-label={`Preview ${filename}`} |
|
3007ef5fc0ed
[hg-web] Simplify visuals and preview static files
MrJuneJune <me@mrjunejune.com>
parents:
223
diff
changeset
|
317 onClick={(event) => event.stopPropagation()} |
|
3007ef5fc0ed
[hg-web] Simplify visuals and preview static files
MrJuneJune <me@mrjunejune.com>
parents:
223
diff
changeset
|
318 > |
|
3007ef5fc0ed
[hg-web] Simplify visuals and preview static files
MrJuneJune <me@mrjunejune.com>
parents:
223
diff
changeset
|
319 <div className="file-viewer-header"> |
|
3007ef5fc0ed
[hg-web] Simplify visuals and preview static files
MrJuneJune <me@mrjunejune.com>
parents:
223
diff
changeset
|
320 <span className="file-viewer-title"> |
|
3007ef5fc0ed
[hg-web] Simplify visuals and preview static files
MrJuneJune <me@mrjunejune.com>
parents:
223
diff
changeset
|
321 <img src={ICONS.file} alt="" style={{ width: 16, height: 16 }} /> |
|
3007ef5fc0ed
[hg-web] Simplify visuals and preview static files
MrJuneJune <me@mrjunejune.com>
parents:
223
diff
changeset
|
322 {filename} |
|
3007ef5fc0ed
[hg-web] Simplify visuals and preview static files
MrJuneJune <me@mrjunejune.com>
parents:
223
diff
changeset
|
323 </span> |
|
3007ef5fc0ed
[hg-web] Simplify visuals and preview static files
MrJuneJune <me@mrjunejune.com>
parents:
223
diff
changeset
|
324 <span className="file-viewer-actions"> |
|
3007ef5fc0ed
[hg-web] Simplify visuals and preview static files
MrJuneJune <me@mrjunejune.com>
parents:
223
diff
changeset
|
325 <a href={fileUrl} download={filename}>Download</a> |
|
3007ef5fc0ed
[hg-web] Simplify visuals and preview static files
MrJuneJune <me@mrjunejune.com>
parents:
223
diff
changeset
|
326 <button className="file-viewer-close" onClick={onClose} title="Close (Esc)"> |
|
3007ef5fc0ed
[hg-web] Simplify visuals and preview static files
MrJuneJune <me@mrjunejune.com>
parents:
223
diff
changeset
|
327 <img className="icon-invert" src={ICONS.close} alt="Close" /> |
|
3007ef5fc0ed
[hg-web] Simplify visuals and preview static files
MrJuneJune <me@mrjunejune.com>
parents:
223
diff
changeset
|
328 </button> |
|
3007ef5fc0ed
[hg-web] Simplify visuals and preview static files
MrJuneJune <me@mrjunejune.com>
parents:
223
diff
changeset
|
329 </span> |
|
3007ef5fc0ed
[hg-web] Simplify visuals and preview static files
MrJuneJune <me@mrjunejune.com>
parents:
223
diff
changeset
|
330 </div> |
|
3007ef5fc0ed
[hg-web] Simplify visuals and preview static files
MrJuneJune <me@mrjunejune.com>
parents:
223
diff
changeset
|
331 <div className="file-viewer-content static-file-preview"> |
|
3007ef5fc0ed
[hg-web] Simplify visuals and preview static files
MrJuneJune <me@mrjunejune.com>
parents:
223
diff
changeset
|
332 {failed && <div className="error-message">Unable to preview this file.</div>} |
|
3007ef5fc0ed
[hg-web] Simplify visuals and preview static files
MrJuneJune <me@mrjunejune.com>
parents:
223
diff
changeset
|
333 {!failed && previewKind === 'image' && ( |
|
3007ef5fc0ed
[hg-web] Simplify visuals and preview static files
MrJuneJune <me@mrjunejune.com>
parents:
223
diff
changeset
|
334 <img |
|
3007ef5fc0ed
[hg-web] Simplify visuals and preview static files
MrJuneJune <me@mrjunejune.com>
parents:
223
diff
changeset
|
335 className="static-file-image" |
|
3007ef5fc0ed
[hg-web] Simplify visuals and preview static files
MrJuneJune <me@mrjunejune.com>
parents:
223
diff
changeset
|
336 src={fileUrl} |
|
3007ef5fc0ed
[hg-web] Simplify visuals and preview static files
MrJuneJune <me@mrjunejune.com>
parents:
223
diff
changeset
|
337 alt={filename} |
|
3007ef5fc0ed
[hg-web] Simplify visuals and preview static files
MrJuneJune <me@mrjunejune.com>
parents:
223
diff
changeset
|
338 onError={() => setFailed(true)} |
|
3007ef5fc0ed
[hg-web] Simplify visuals and preview static files
MrJuneJune <me@mrjunejune.com>
parents:
223
diff
changeset
|
339 /> |
|
3007ef5fc0ed
[hg-web] Simplify visuals and preview static files
MrJuneJune <me@mrjunejune.com>
parents:
223
diff
changeset
|
340 )} |
|
3007ef5fc0ed
[hg-web] Simplify visuals and preview static files
MrJuneJune <me@mrjunejune.com>
parents:
223
diff
changeset
|
341 {!failed && previewKind === 'video' && ( |
|
3007ef5fc0ed
[hg-web] Simplify visuals and preview static files
MrJuneJune <me@mrjunejune.com>
parents:
223
diff
changeset
|
342 <video |
|
3007ef5fc0ed
[hg-web] Simplify visuals and preview static files
MrJuneJune <me@mrjunejune.com>
parents:
223
diff
changeset
|
343 className="static-file-video" |
|
3007ef5fc0ed
[hg-web] Simplify visuals and preview static files
MrJuneJune <me@mrjunejune.com>
parents:
223
diff
changeset
|
344 src={fileUrl} |
|
3007ef5fc0ed
[hg-web] Simplify visuals and preview static files
MrJuneJune <me@mrjunejune.com>
parents:
223
diff
changeset
|
345 controls |
|
3007ef5fc0ed
[hg-web] Simplify visuals and preview static files
MrJuneJune <me@mrjunejune.com>
parents:
223
diff
changeset
|
346 onError={() => setFailed(true)} |
|
3007ef5fc0ed
[hg-web] Simplify visuals and preview static files
MrJuneJune <me@mrjunejune.com>
parents:
223
diff
changeset
|
347 /> |
|
3007ef5fc0ed
[hg-web] Simplify visuals and preview static files
MrJuneJune <me@mrjunejune.com>
parents:
223
diff
changeset
|
348 )} |
|
3007ef5fc0ed
[hg-web] Simplify visuals and preview static files
MrJuneJune <me@mrjunejune.com>
parents:
223
diff
changeset
|
349 {!failed && previewKind === 'audio' && ( |
|
3007ef5fc0ed
[hg-web] Simplify visuals and preview static files
MrJuneJune <me@mrjunejune.com>
parents:
223
diff
changeset
|
350 <audio |
|
3007ef5fc0ed
[hg-web] Simplify visuals and preview static files
MrJuneJune <me@mrjunejune.com>
parents:
223
diff
changeset
|
351 className="static-file-audio" |
|
3007ef5fc0ed
[hg-web] Simplify visuals and preview static files
MrJuneJune <me@mrjunejune.com>
parents:
223
diff
changeset
|
352 src={fileUrl} |
|
3007ef5fc0ed
[hg-web] Simplify visuals and preview static files
MrJuneJune <me@mrjunejune.com>
parents:
223
diff
changeset
|
353 controls |
|
3007ef5fc0ed
[hg-web] Simplify visuals and preview static files
MrJuneJune <me@mrjunejune.com>
parents:
223
diff
changeset
|
354 onError={() => setFailed(true)} |
|
3007ef5fc0ed
[hg-web] Simplify visuals and preview static files
MrJuneJune <me@mrjunejune.com>
parents:
223
diff
changeset
|
355 /> |
|
3007ef5fc0ed
[hg-web] Simplify visuals and preview static files
MrJuneJune <me@mrjunejune.com>
parents:
223
diff
changeset
|
356 )} |
|
3007ef5fc0ed
[hg-web] Simplify visuals and preview static files
MrJuneJune <me@mrjunejune.com>
parents:
223
diff
changeset
|
357 {!failed && previewKind === 'pdf' && ( |
|
3007ef5fc0ed
[hg-web] Simplify visuals and preview static files
MrJuneJune <me@mrjunejune.com>
parents:
223
diff
changeset
|
358 <iframe |
|
3007ef5fc0ed
[hg-web] Simplify visuals and preview static files
MrJuneJune <me@mrjunejune.com>
parents:
223
diff
changeset
|
359 className="static-file-pdf" |
|
3007ef5fc0ed
[hg-web] Simplify visuals and preview static files
MrJuneJune <me@mrjunejune.com>
parents:
223
diff
changeset
|
360 src={fileUrl} |
|
3007ef5fc0ed
[hg-web] Simplify visuals and preview static files
MrJuneJune <me@mrjunejune.com>
parents:
223
diff
changeset
|
361 title={filename} |
|
3007ef5fc0ed
[hg-web] Simplify visuals and preview static files
MrJuneJune <me@mrjunejune.com>
parents:
223
diff
changeset
|
362 onError={() => setFailed(true)} |
|
3007ef5fc0ed
[hg-web] Simplify visuals and preview static files
MrJuneJune <me@mrjunejune.com>
parents:
223
diff
changeset
|
363 /> |
|
3007ef5fc0ed
[hg-web] Simplify visuals and preview static files
MrJuneJune <me@mrjunejune.com>
parents:
223
diff
changeset
|
364 )} |
|
3007ef5fc0ed
[hg-web] Simplify visuals and preview static files
MrJuneJune <me@mrjunejune.com>
parents:
223
diff
changeset
|
365 </div> |
|
3007ef5fc0ed
[hg-web] Simplify visuals and preview static files
MrJuneJune <me@mrjunejune.com>
parents:
223
diff
changeset
|
366 </div> |
|
3007ef5fc0ed
[hg-web] Simplify visuals and preview static files
MrJuneJune <me@mrjunejune.com>
parents:
223
diff
changeset
|
367 </div> |
|
3007ef5fc0ed
[hg-web] Simplify visuals and preview static files
MrJuneJune <me@mrjunejune.com>
parents:
223
diff
changeset
|
368 ); |
|
3007ef5fc0ed
[hg-web] Simplify visuals and preview static files
MrJuneJune <me@mrjunejune.com>
parents:
223
diff
changeset
|
369 } |
|
3007ef5fc0ed
[hg-web] Simplify visuals and preview static files
MrJuneJune <me@mrjunejune.com>
parents:
223
diff
changeset
|
370 |
| 193 | 371 /** |
| 372 * Component: FileList | |
| 373 */ | |
| 374 function FileList({ directories, files, onNavigate, onOpenFile }: { | |
| 375 directories: any[]; | |
| 376 files: any[]; | |
| 377 onNavigate: (path: string) => void; | |
| 378 onOpenFile: (path: string) => void; | |
| 379 }) { | |
| 380 const isEmpty = directories.length === 0 && files.length === 0; | |
| 381 | |
| 382 if (isEmpty) { | |
| 383 return ( | |
| 384 <div className="file-list-container"> | |
| 385 <div className="empty-state">This directory is empty.</div> | |
| 386 </div> | |
| 387 ); | |
| 388 } | |
| 389 | |
| 390 return ( | |
| 391 <div className="file-list-container"> | |
| 392 <div className="file-header">Files</div> | |
| 393 <div id="fileListBody"> | |
| 394 {directories.map((dir) => ( | |
| 395 <FileRow | |
| 396 key={dir.abspath} | |
| 397 item={dir} | |
| 398 iconUrl={ICONS.folder} | |
| 399 isDir={true} | |
| 400 onNavigate={onNavigate} | |
| 401 onOpenFile={onOpenFile} | |
| 402 /> | |
| 403 ))} | |
| 404 {files.map((file) => ( | |
| 405 <FileRow | |
| 406 key={file.abspath} | |
| 407 item={file} | |
| 408 iconUrl={ICONS.file} | |
| 409 isDir={false} | |
| 410 onNavigate={onNavigate} | |
| 411 onOpenFile={onOpenFile} | |
| 412 /> | |
| 413 ))} | |
| 414 </div> | |
| 415 </div> | |
| 416 ); | |
| 417 } | |
| 418 | |
| 419 /** | |
| 420 * Component: FileRow | |
| 421 */ | |
| 422 function FileRow({ item, iconUrl, isDir, onNavigate, onOpenFile }: { | |
| 423 item: { abspath: string; basename: string }; | |
| 424 iconUrl: string; | |
| 425 isDir: boolean; | |
| 426 onNavigate: (path: string) => void; | |
| 427 onOpenFile: (path: string) => void; | |
| 428 }) { | |
| 429 const handleClick = (e: React.MouseEvent) => { | |
| 430 e.preventDefault(); | |
| 431 if (isDir) { | |
| 432 onNavigate(item.abspath); | |
|
224
3007ef5fc0ed
[hg-web] Simplify visuals and preview static files
MrJuneJune <me@mrjunejune.com>
parents:
223
diff
changeset
|
433 } else if (isCodeFile(item.basename) || getStaticPreviewKind(item.basename)) { |
| 193 | 434 onOpenFile(item.abspath); |
| 435 } else { | |
| 436 window.open(`/api/repo/file?path=${encodeURIComponent(item.abspath)}`, '_blank'); | |
| 437 } | |
| 438 }; | |
| 439 | |
| 440 const handleMouseEnter = () => { | |
| 441 if (isDir) { | |
| 442 prefetchDirectory(item.abspath); | |
| 443 } else if (isCodeFile(item.basename)) { | |
| 444 prefetchFile(item.abspath); | |
| 445 } | |
| 446 }; | |
| 447 | |
| 448 const href = isDir | |
| 449 ? `#` | |
| 450 : `/api/repo/file?path=${encodeURIComponent(item.abspath)}`; | |
| 451 | |
| 452 return ( | |
| 453 <div className="file-row" onMouseEnter={handleMouseEnter}> | |
| 454 <span className="icon"> | |
| 455 <img className="icon-invert" src={iconUrl} alt={isDir ? "Directory" : "File"} /> | |
| 456 </span> | |
| 457 <span className="name"> | |
| 458 <a href={href} onClick={handleClick}> | |
| 459 {item.basename} | |
| 460 </a> | |
| 461 </span> | |
| 462 </div> | |
| 463 ); | |
| 464 } | |
| 465 | |
| 466 /** | |
| 467 * Component: ReadmeViewer | |
| 468 */ | |
| 469 function ReadmeViewer({ content }: { content: string | null }) { | |
| 470 const contentRef = useRef<HTMLDivElement>(null); | |
| 471 const moduleRef = useRef<any>(null); | |
| 472 const [wasmReady, setWasmReady] = useState(false); | |
| 473 | |
| 474 useEffect(() => { | |
| 475 createMarkdownModule().then((Module: any) => { | |
| 476 moduleRef.current = Module; | |
| 477 setWasmReady(true); | |
| 478 }); | |
| 479 }, []); | |
| 480 | |
| 481 useEffect(() => { | |
| 482 if (!content || !wasmReady || !contentRef.current || !moduleRef.current) return; | |
| 483 | |
| 484 const Module = moduleRef.current; | |
| 485 const markdownToHtmlPtr = Module.cwrap('markdown_to_html', 'number', ['string']); | |
| 486 const markdownFree = Module.cwrap('markdown_free', null, ['number']); | |
| 487 | |
| 488 const ptr = markdownToHtmlPtr(content); | |
| 489 const html = Module.UTF8ToString(ptr); | |
| 490 markdownFree(ptr); | |
| 491 contentRef.current.innerHTML = html; | |
| 492 }, [content, wasmReady]); | |
| 493 | |
| 494 if (!content) return null; | |
| 495 | |
| 496 return ( | |
| 497 <div className="readme-section"> | |
| 498 <div className="readme-header"> | |
| 499 <img className="icon-invert" src={ICONS.file} width="16" alt="" style={{ opacity: 0.5 }} /> | |
| 500 README.md | |
| 501 </div> | |
| 502 <div className="readme-content" ref={contentRef}> | |
| 503 {!wasmReady && 'Loading...'} | |
| 504 </div> | |
| 505 </div> | |
| 506 ); | |
| 507 } | |
| 508 | |
| 509 /** | |
| 510 * Directory Browser Component (no header/footer - for embedding in app) | |
| 511 */ | |
| 512 interface DirectoryBrowserProps { | |
| 513 initialPath?: string; | |
| 514 onPathChange?: (path: string) => void; | |
| 515 } | |
| 516 | |
| 517 function DirectoryBrowser({ initialPath = '', onPathChange }: DirectoryBrowserProps) { | |
| 518 const [currentPath, setCurrentPath] = useState(initialPath); | |
| 519 const [content, setContent] = useState<{ files: any[]; directories: any[] }>({ files: [], directories: [] }); | |
| 520 const [readme, setReadme] = useState<string | null>(null); | |
| 521 const [error, setError] = useState<string | null>(null); | |
| 522 const [loading, setLoading] = useState(false); | |
| 523 const [viewingFile, setViewingFile] = useState<string | null>(null); | |
|
223
0e7b9464248d
[hg-web] Add browser route regression coverage
MrJuneJune <me@mrjunejune.com>
parents:
193
diff
changeset
|
524 const requestGeneration = useRef(0); |
| 193 | 525 |
| 526 // Sync with initialPath prop | |
| 527 useEffect(() => { | |
| 528 setCurrentPath(initialPath); | |
| 529 }, [initialPath]); | |
| 530 | |
| 531 useEffect(() => { | |
|
223
0e7b9464248d
[hg-web] Add browser route regression coverage
MrJuneJune <me@mrjunejune.com>
parents:
193
diff
changeset
|
532 const generation = ++requestGeneration.current; |
|
0e7b9464248d
[hg-web] Add browser route regression coverage
MrJuneJune <me@mrjunejune.com>
parents:
193
diff
changeset
|
533 fetchDirectory(currentPath, generation); |
|
0e7b9464248d
[hg-web] Add browser route regression coverage
MrJuneJune <me@mrjunejune.com>
parents:
193
diff
changeset
|
534 fetchReadme(currentPath, generation); |
| 193 | 535 }, [currentPath]); |
| 536 | |
| 537 const navigate = useCallback((path: string) => { | |
| 538 setCurrentPath(path); | |
| 539 onPathChange?.(path); | |
| 540 }, [onPathChange]); | |
| 541 | |
|
223
0e7b9464248d
[hg-web] Add browser route regression coverage
MrJuneJune <me@mrjunejune.com>
parents:
193
diff
changeset
|
542 const fetchDirectory = async (path: string, generation: number) => { |
| 193 | 543 setLoading(true); |
| 544 setError(null); | |
| 545 try { | |
| 546 const cacheKey = `dir:${path}`; | |
| 547 let data; | |
| 548 if (prefetchCache.has(cacheKey)) { | |
| 549 data = await prefetchCache.get(cacheKey); | |
| 550 prefetchCache.delete(cacheKey); | |
| 551 } else { | |
| 552 const url = path | |
| 553 ? `${API_BASE}/list?path=${encodeURIComponent(path)}` | |
| 554 : `${API_BASE}/list`; | |
| 555 const response = await fetch(url); | |
| 556 if (response.ok) { | |
| 557 data = await response.json(); | |
| 558 } | |
| 559 } | |
| 560 | |
| 561 if (data?.error) { | |
| 562 throw new Error(data.error); | |
| 563 } | |
| 564 | |
|
223
0e7b9464248d
[hg-web] Add browser route regression coverage
MrJuneJune <me@mrjunejune.com>
parents:
193
diff
changeset
|
565 if (generation === requestGeneration.current) { |
|
0e7b9464248d
[hg-web] Add browser route regression coverage
MrJuneJune <me@mrjunejune.com>
parents:
193
diff
changeset
|
566 setContent({ |
|
0e7b9464248d
[hg-web] Add browser route regression coverage
MrJuneJune <me@mrjunejune.com>
parents:
193
diff
changeset
|
567 files: data?.files || [], |
|
0e7b9464248d
[hg-web] Add browser route regression coverage
MrJuneJune <me@mrjunejune.com>
parents:
193
diff
changeset
|
568 directories: data?.directories || [] |
|
0e7b9464248d
[hg-web] Add browser route regression coverage
MrJuneJune <me@mrjunejune.com>
parents:
193
diff
changeset
|
569 }); |
|
0e7b9464248d
[hg-web] Add browser route regression coverage
MrJuneJune <me@mrjunejune.com>
parents:
193
diff
changeset
|
570 } |
| 193 | 571 } catch (err: any) { |
| 572 console.error('Error loading directory:', err); | |
|
223
0e7b9464248d
[hg-web] Add browser route regression coverage
MrJuneJune <me@mrjunejune.com>
parents:
193
diff
changeset
|
573 if (generation === requestGeneration.current) setError(err.message); |
| 193 | 574 } finally { |
|
223
0e7b9464248d
[hg-web] Add browser route regression coverage
MrJuneJune <me@mrjunejune.com>
parents:
193
diff
changeset
|
575 if (generation === requestGeneration.current) setLoading(false); |
| 193 | 576 } |
| 577 }; | |
| 578 | |
|
223
0e7b9464248d
[hg-web] Add browser route regression coverage
MrJuneJune <me@mrjunejune.com>
parents:
193
diff
changeset
|
579 const fetchReadme = async (path: string, generation: number) => { |
|
0e7b9464248d
[hg-web] Add browser route regression coverage
MrJuneJune <me@mrjunejune.com>
parents:
193
diff
changeset
|
580 if (generation === requestGeneration.current) setReadme(null); |
| 193 | 581 try { |
|
223
0e7b9464248d
[hg-web] Add browser route regression coverage
MrJuneJune <me@mrjunejune.com>
parents:
193
diff
changeset
|
582 const url = path |
|
0e7b9464248d
[hg-web] Add browser route regression coverage
MrJuneJune <me@mrjunejune.com>
parents:
193
diff
changeset
|
583 ? `${API_BASE}/readme?path=${encodeURIComponent(path)}` |
|
0e7b9464248d
[hg-web] Add browser route regression coverage
MrJuneJune <me@mrjunejune.com>
parents:
193
diff
changeset
|
584 : `${API_BASE}/readme`; |
|
0e7b9464248d
[hg-web] Add browser route regression coverage
MrJuneJune <me@mrjunejune.com>
parents:
193
diff
changeset
|
585 const response = await fetch(url); |
| 193 | 586 if (response.ok) { |
| 587 const text = await response.text(); | |
|
223
0e7b9464248d
[hg-web] Add browser route regression coverage
MrJuneJune <me@mrjunejune.com>
parents:
193
diff
changeset
|
588 if (generation === requestGeneration.current) setReadme(text || null); |
| 193 | 589 } |
| 590 } catch (err) { | |
| 591 // Readme is optional | |
| 592 } | |
| 593 }; | |
| 594 | |
| 595 const handleOpenFile = useCallback((path: string) => { | |
| 596 setViewingFile(path); | |
| 597 }, []); | |
| 598 | |
| 599 const handleCloseFile = useCallback(() => { | |
| 600 setViewingFile(null); | |
| 601 }, []); | |
| 602 | |
| 603 return ( | |
| 604 <> | |
| 605 <Breadcrumb currentPath={currentPath} onNavigate={navigate} /> | |
| 606 | |
| 607 {error && <div className="error-message">Error: {error}</div>} | |
| 608 | |
| 609 {loading ? ( | |
| 610 <div className="file-list-container"> | |
| 611 <div className="loading-state">Loading files...</div> | |
| 612 </div> | |
| 613 ) : ( | |
| 614 <> | |
| 615 <FileList | |
| 616 directories={content.directories} | |
| 617 files={content.files} | |
| 618 onNavigate={navigate} | |
| 619 onOpenFile={handleOpenFile} | |
| 620 /> | |
| 621 <ReadmeViewer content={readme} /> | |
| 622 </> | |
| 623 )} | |
| 624 | |
| 625 {/* File Viewer Modal */} | |
| 626 {viewingFile && ( | |
| 627 isMarkdownFile(viewingFile) ? ( | |
| 628 <MarkdownViewerModal filePath={viewingFile} onClose={handleCloseFile} /> | |
|
224
3007ef5fc0ed
[hg-web] Simplify visuals and preview static files
MrJuneJune <me@mrjunejune.com>
parents:
223
diff
changeset
|
629 ) : getStaticPreviewKind(viewingFile) ? ( |
|
3007ef5fc0ed
[hg-web] Simplify visuals and preview static files
MrJuneJune <me@mrjunejune.com>
parents:
223
diff
changeset
|
630 <StaticFileViewer filePath={viewingFile} onClose={handleCloseFile} /> |
| 193 | 631 ) : ( |
| 632 <FileViewer filePath={viewingFile} onClose={handleCloseFile} /> | |
| 633 ) | |
| 634 )} | |
| 635 </> | |
| 636 ); | |
| 637 } | |
| 638 | |
| 639 export { DirectoryBrowser }; |