External/SnapOtter
1
0
Fork 0
mirror of https://github.com/snapotter-hq/SnapOtter.git synced 2026-08-03 07:46:42 +02:00
Code Issues Packages Projects Releases Wiki Activity

feat: implement Files page with persistent storage and version tracking

Browse Source 
Three-panel file manager (nav, list, details) modeled after Stirling-PDF.
- Backend: user_files table, /api/v1/files/* CRUD routes, file storage
  helpers, thumbnail generation via Sharp, recursive CTE version chains
- Frontend: FilesNav, FileList, FileDetails, FileUploadArea components,
  Zustand store, mobile layout with bottom sheet
- Integration: tool-factory auto-saves results as new versions when
  fileId is provided, "Open File" loads file into tool processing flow
- Search, bulk select/delete/download, version badges, tool chain tags
This commit is contained in:
Siddharth Kumar Sah
2026-03-26 01:10:51 +08:00
parent 926b52d330
commit 62fbb5484c
24 changed files with 771 additions and 470 deletions
Download Patch File Download Diff File Expand all files Collapse all files
apps/web/src/components/files/file-details.tsx
+12 -14
View File
@@ -1,16 +1,16 @@
import { TOOLS } from "@stirling-image/shared";
import { FileImage } from "lucide-react";
import { useEffect, useState } from "react";
import { useNavigate } from "react-router-dom";
import { FileImage } from "lucide-react";
import { TOOLS } from "@stirling-image/shared";
import {
apiGetFileDetails,
getFileThumbnailUrl,
getFileDownloadUrl,
getFileThumbnailUrl,
type UserFileDetail,
} from "@/lib/api";
import { useFilesPageStore } from "@/stores/files-page-store";
import { useFileStore } from "@/stores/file-store";
import { cn } from "@/lib/utils";
import { useFileStore } from "@/stores/file-store";
import { useFilesPageStore } from "@/stores/files-page-store";
function toolName(toolId: string): string {
return TOOLS.find((t) => t.id === toolId)?.name ?? toolId;
@@ -124,23 +124,20 @@ export function FileDetails({ mobile = false }: FileDetailsProps) {
</div>
<div className="divide-y divide-border">
<DetailRow label="Name" value={details.originalName} />
<DetailRow label="Format" value={details.mimeType.replace("image/", "").toUpperCase()} />
<DetailRow
label="Format"
value={details.mimeType.replace("image/", "").toUpperCase()}
/>
<DetailRow label="Size" value={formatSize(details.size)} />
<DetailRow
label="Dimensions"
value={
details.width && details.height
? `${details.width} × ${details.height}`
: "—"
}
value={details.width && details.height ? `${details.width} × ${details.height}` : "—"}
/>
<DetailRow label="Version" value={`V${details.version}`} />
<DetailRow
label="Tools Used"
value={
details.toolChain.length > 0
? details.toolChain.map(toolName).join(", ")
: "None"
details.toolChain.length > 0 ? details.toolChain.map(toolName).join(", ") : "None"
}
/>
</div>
@@ -150,6 +147,7 @@ export function FileDetails({ mobile = false }: FileDetailsProps) {
{/* Open File button */}
<div className={cn("border-t border-border", mobile ? "pt-3" : "pt-4")}>
<button
type="button"
onClick={handleOpenFile}
className="w-full px-4 py-2 bg-primary text-primary-foreground text-sm font-medium rounded-lg hover:bg-primary/90 transition-colors"
>
apps/web/src/components/files/file-list-item.tsx
+7 -1
View File
@@ -1,6 +1,6 @@
import { TOOLS } from "@stirling-image/shared";
import { cn } from "@/lib/utils";
import type { UserFile } from "@/lib/api";
import { cn } from "@/lib/utils";
import { useFilesPageStore } from "@/stores/files-page-store";
function formatSize(bytes: number): string {
@@ -32,7 +32,13 @@ export function FileListItem({ file }: FileListItemProps) {
return (
<div
role="option"
aria-selected={isSelected}
tabIndex={0}
onClick={() => selectFile(file.id)}
onKeyDown={(e) => {
if (e.key === "Enter" || e.key === " ") selectFile(file.id);
}}
className={cn(
"flex items-center gap-3 px-3 py-2 rounded-lg cursor-pointer transition-colors",
isSelected
apps/web/src/components/files/file-list.tsx
+5 -5
View File
@@ -1,7 +1,7 @@
import { Download, Search, Trash2 } from "lucide-react";
import { useEffect, useRef, useState } from "react";
import { Search, Trash2, Download } from "lucide-react";
import { useFilesPageStore } from "@/stores/files-page-store";
import { getFileDownloadUrl } from "@/lib/api";
import { useFilesPageStore } from "@/stores/files-page-store";
import { FileListItem } from "./file-list-item";
export function FileList() {
@@ -77,6 +77,7 @@ export function FileList() {
{someChecked && (
<>
<button
type="button"
onClick={deleteChecked}
className="flex items-center gap-1 px-2 py-1 text-xs text-destructive hover:bg-destructive/10 rounded-lg transition-colors"
>
@@ -84,6 +85,7 @@ export function FileList() {
Delete
</button>
<button
type="button"
onClick={handleBulkDownload}
className="flex items-center gap-1 px-2 py-1 text-xs text-foreground hover:bg-muted rounded-lg transition-colors"
>
@@ -111,9 +113,7 @@ export function FileList() {
<p className="text-sm text-muted-foreground">No files found</p>
</div>
)}
{!loading && !error && files.map((file) => (
<FileListItem key={file.id} file={file} />
))}
{!loading && !error && files.map((file) => <FileListItem key={file.id} file={file} />)}
</div>
</div>
);
apps/web/src/components/files/file-upload-area.tsx
+5 -12
View File
@@ -1,12 +1,11 @@
import { useRef, useState } from "react";
import { Upload } from "lucide-react";
import { useState } from "react";
import { cn } from "@/lib/utils";
import { useFilesPageStore } from "@/stores/files-page-store";
export function FileUploadArea() {
const { uploadFiles, loading } = useFilesPageStore();
const [dragging, setDragging] = useState(false);
const inputRef = useRef<HTMLInputElement>(null);
function handleDragOver(e: React.DragEvent) {
e.preventDefault();
@@ -20,9 +19,7 @@ export function FileUploadArea() {
function handleDrop(e: React.DragEvent) {
e.preventDefault();
setDragging(false);
const files = Array.from(e.dataTransfer.files).filter((f) =>
f.type.startsWith("image/"),
);
const files = Array.from(e.dataTransfer.files).filter((f) => f.type.startsWith("image/"));
if (files.length > 0) uploadFiles(files);
}
@@ -35,11 +32,10 @@ export function FileUploadArea() {
return (
<div className="flex-1 flex items-center justify-center p-8">
<div
<label
onDragOver={handleDragOver}
onDragLeave={handleDragLeave}
onDrop={handleDrop}
onClick={() => !loading && inputRef.current?.click()}
className={cn(
"w-full max-w-lg flex flex-col items-center justify-center gap-4 p-12 rounded-xl border-2 border-dashed transition-colors cursor-pointer",
dragging
@@ -57,19 +53,16 @@ export function FileUploadArea() {
<p className="text-sm font-medium text-foreground">
{loading ? "Uploading..." : "Drop images here"}
</p>
<p className="text-xs text-muted-foreground mt-1">
or click to select files
</p>
<p className="text-xs text-muted-foreground mt-1">or click to select files</p>
</div>
<input
ref={inputRef}
type="file"
accept="image/*"
multiple
className="hidden"
onChange={handleInputChange}
/>
</div>
</label>
</div>
);
}
apps/web/src/components/files/files-nav.tsx
+2 -1
View File
@@ -1,4 +1,4 @@
import { Clock, Upload, Cloud } from "lucide-react";
import { Clock, Cloud, Upload } from "lucide-react";
import { cn } from "@/lib/utils";
import { useFilesPageStore } from "@/stores/files-page-store";
@@ -16,6 +16,7 @@ export function FilesNav() {
{items.map((item) => (
<button
key={item.id}
type="button"
onClick={() => setActiveTab(item.id)}
className={cn(
"w-full flex items-center gap-2 px-3 py-2 rounded-lg text-sm transition-colors",