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/api/drizzle/0003_add_team_to_users.sql
+1
View File
@@ -0,0 +1 @@
ALTER TABLE `users` ADD `team` text NOT NULL DEFAULT 'Default';
apps/api/drizzle/meta/0000_snapshot.json
+6 -16
View File
@@ -57,12 +57,8 @@
"name": "api_keys_user_id_users_id_fk",
"tableFrom": "api_keys",
"tableTo": "users",
"columnsFrom": [
"user_id"
],
"columnsTo": [
"id"
],
"columnsFrom": ["user_id"],
"columnsTo": ["id"],
"onDelete": "cascade",
"onUpdate": "no action"
}
@@ -191,12 +187,8 @@
"name": "sessions_user_id_users_id_fk",
"tableFrom": "sessions",
"tableTo": "users",
"columnsFrom": [
"user_id"
],
"columnsTo": [
"id"
],
"columnsFrom": ["user_id"],
"columnsTo": ["id"],
"onDelete": "cascade",
"onUpdate": "no action"
}
@@ -294,9 +286,7 @@
"indexes": {
"users_username_unique": {
"name": "users_username_unique",
"columns": [
"username"
],
"columns": ["username"],
"isUnique": true
}
},
@@ -316,4 +306,4 @@
"internal": {
"indexes": {}
}
}
}
apps/api/drizzle/meta/0001_snapshot.json
+6 -16
View File
@@ -57,12 +57,8 @@
"name": "api_keys_user_id_users_id_fk",
"tableFrom": "api_keys",
"tableTo": "users",
"columnsFrom": [
"user_id"
],
"columnsTo": [
"id"
],
"columnsFrom": ["user_id"],
"columnsTo": ["id"],
"onDelete": "cascade",
"onUpdate": "no action"
}
@@ -236,12 +232,8 @@
"name": "sessions_user_id_users_id_fk",
"tableFrom": "sessions",
"tableTo": "users",
"columnsFrom": [
"user_id"
],
"columnsTo": [
"id"
],
"columnsFrom": ["user_id"],
"columnsTo": ["id"],
"onDelete": "cascade",
"onUpdate": "no action"
}
@@ -339,9 +331,7 @@
"indexes": {
"users_username_unique": {
"name": "users_username_unique",
"columns": [
"username"
],
"columns": ["username"],
"isUnique": true
}
},
@@ -361,4 +351,4 @@
"internal": {
"indexes": {}
}
}
}
apps/api/drizzle/meta/0002_snapshot.json
+8 -22
View File
@@ -64,12 +64,8 @@
"name": "api_keys_user_id_users_id_fk",
"tableFrom": "api_keys",
"tableTo": "users",
"columnsFrom": [
"user_id"
],
"columnsTo": [
"id"
],
"columnsFrom": ["user_id"],
"columnsTo": ["id"],
"onDelete": "cascade",
"onUpdate": "no action"
}
@@ -212,12 +208,8 @@
"name": "pipelines_user_id_users_id_fk",
"tableFrom": "pipelines",
"tableTo": "users",
"columnsFrom": [
"user_id"
],
"columnsTo": [
"id"
],
"columnsFrom": ["user_id"],
"columnsTo": ["id"],
"onDelete": "cascade",
"onUpdate": "no action"
}
@@ -264,12 +256,8 @@
"name": "sessions_user_id_users_id_fk",
"tableFrom": "sessions",
"tableTo": "users",
"columnsFrom": [
"user_id"
],
"columnsTo": [
"id"
],
"columnsFrom": ["user_id"],
"columnsTo": ["id"],
"onDelete": "cascade",
"onUpdate": "no action"
}
@@ -367,9 +355,7 @@
"indexes": {
"users_username_unique": {
"name": "users_username_unique",
"columns": [
"username"
],
"columns": ["username"],
"isUnique": true
}
},
@@ -389,4 +375,4 @@
"internal": {
"indexes": {}
}
}
}
apps/api/drizzle/meta/0003_snapshot.json
+386
View File
@@ -0,0 +1,386 @@
{
"version": "6",
"dialect": "sqlite",
"id": "c1a2b3d4-e5f6-7890-abcd-ef1234567890",
"prevId": "b73098db-4ef1-44e2-834f-9114a4da4e77",
"tables": {
"api_keys": {
"name": "api_keys",
"columns": {
"id": {
"name": "id",
"type": "text",
"primaryKey": true,
"notNull": true,
"autoincrement": false
},
"user_id": {
"name": "user_id",
"type": "text",
"primaryKey": false,
"notNull": true,
"autoincrement": false
},
"key_hash": {
"name": "key_hash",
"type": "text",
"primaryKey": false,
"notNull": true,
"autoincrement": false
},
"key_prefix": {
"name": "key_prefix",
"type": "text",
"primaryKey": false,
"notNull": false,
"autoincrement": false
},
"name": {
"name": "name",
"type": "text",
"primaryKey": false,
"notNull": true,
"autoincrement": false,
"default": "'Default API Key'"
},
"created_at": {
"name": "created_at",
"type": "integer",
"primaryKey": false,
"notNull": true,
"autoincrement": false
},
"last_used_at": {
"name": "last_used_at",
"type": "integer",
"primaryKey": false,
"notNull": false,
"autoincrement": false
}
},
"indexes": {},
"foreignKeys": {
"api_keys_user_id_users_id_fk": {
"name": "api_keys_user_id_users_id_fk",
"tableFrom": "api_keys",
"tableTo": "users",
"columnsFrom": ["user_id"],
"columnsTo": ["id"],
"onDelete": "cascade",
"onUpdate": "no action"
}
},
"compositePrimaryKeys": {},
"uniqueConstraints": {},
"checkConstraints": {}
},
"jobs": {
"name": "jobs",
"columns": {
"id": {
"name": "id",
"type": "text",
"primaryKey": true,
"notNull": true,
"autoincrement": false
},
"type": {
"name": "type",
"type": "text",
"primaryKey": false,
"notNull": true,
"autoincrement": false
},
"status": {
"name": "status",
"type": "text",
"primaryKey": false,
"notNull": true,
"autoincrement": false,
"default": "'queued'"
},
"progress": {
"name": "progress",
"type": "real",
"primaryKey": false,
"notNull": true,
"autoincrement": false,
"default": 0
},
"input_files": {
"name": "input_files",
"type": "text",
"primaryKey": false,
"notNull": true,
"autoincrement": false
},
"output_path": {
"name": "output_path",
"type": "text",
"primaryKey": false,
"notNull": false,
"autoincrement": false
},
"settings": {
"name": "settings",
"type": "text",
"primaryKey": false,
"notNull": false,
"autoincrement": false
},
"error": {
"name": "error",
"type": "text",
"primaryKey": false,
"notNull": false,
"autoincrement": false
},
"created_at": {
"name": "created_at",
"type": "integer",
"primaryKey": false,
"notNull": true,
"autoincrement": false
},
"completed_at": {
"name": "completed_at",
"type": "integer",
"primaryKey": false,
"notNull": false,
"autoincrement": false
}
},
"indexes": {},
"foreignKeys": {},
"compositePrimaryKeys": {},
"uniqueConstraints": {},
"checkConstraints": {}
},
"pipelines": {
"name": "pipelines",
"columns": {
"id": {
"name": "id",
"type": "text",
"primaryKey": true,
"notNull": true,
"autoincrement": false
},
"user_id": {
"name": "user_id",
"type": "text",
"primaryKey": false,
"notNull": false,
"autoincrement": false
},
"name": {
"name": "name",
"type": "text",
"primaryKey": false,
"notNull": true,
"autoincrement": false
},
"description": {
"name": "description",
"type": "text",
"primaryKey": false,
"notNull": false,
"autoincrement": false
},
"steps": {
"name": "steps",
"type": "text",
"primaryKey": false,
"notNull": true,
"autoincrement": false
},
"created_at": {
"name": "created_at",
"type": "integer",
"primaryKey": false,
"notNull": true,
"autoincrement": false
}
},
"indexes": {},
"foreignKeys": {
"pipelines_user_id_users_id_fk": {
"name": "pipelines_user_id_users_id_fk",
"tableFrom": "pipelines",
"tableTo": "users",
"columnsFrom": ["user_id"],
"columnsTo": ["id"],
"onDelete": "cascade",
"onUpdate": "no action"
}
},
"compositePrimaryKeys": {},
"uniqueConstraints": {},
"checkConstraints": {}
},
"sessions": {
"name": "sessions",
"columns": {
"id": {
"name": "id",
"type": "text",
"primaryKey": true,
"notNull": true,
"autoincrement": false
},
"user_id": {
"name": "user_id",
"type": "text",
"primaryKey": false,
"notNull": true,
"autoincrement": false
},
"expires_at": {
"name": "expires_at",
"type": "integer",
"primaryKey": false,
"notNull": true,
"autoincrement": false
},
"created_at": {
"name": "created_at",
"type": "integer",
"primaryKey": false,
"notNull": true,
"autoincrement": false
}
},
"indexes": {},
"foreignKeys": {
"sessions_user_id_users_id_fk": {
"name": "sessions_user_id_users_id_fk",
"tableFrom": "sessions",
"tableTo": "users",
"columnsFrom": ["user_id"],
"columnsTo": ["id"],
"onDelete": "cascade",
"onUpdate": "no action"
}
},
"compositePrimaryKeys": {},
"uniqueConstraints": {},
"checkConstraints": {}
},
"settings": {
"name": "settings",
"columns": {
"key": {
"name": "key",
"type": "text",
"primaryKey": true,
"notNull": true,
"autoincrement": false
},
"value": {
"name": "value",
"type": "text",
"primaryKey": false,
"notNull": true,
"autoincrement": false
},
"updated_at": {
"name": "updated_at",
"type": "integer",
"primaryKey": false,
"notNull": true,
"autoincrement": false
}
},
"indexes": {},
"foreignKeys": {},
"compositePrimaryKeys": {},
"uniqueConstraints": {},
"checkConstraints": {}
},
"users": {
"name": "users",
"columns": {
"id": {
"name": "id",
"type": "text",
"primaryKey": true,
"notNull": true,
"autoincrement": false
},
"username": {
"name": "username",
"type": "text",
"primaryKey": false,
"notNull": true,
"autoincrement": false
},
"password_hash": {
"name": "password_hash",
"type": "text",
"primaryKey": false,
"notNull": true,
"autoincrement": false
},
"role": {
"name": "role",
"type": "text",
"primaryKey": false,
"notNull": true,
"autoincrement": false,
"default": "'user'"
},
"must_change_password": {
"name": "must_change_password",
"type": "integer",
"primaryKey": false,
"notNull": true,
"autoincrement": false,
"default": true
},
"created_at": {
"name": "created_at",
"type": "integer",
"primaryKey": false,
"notNull": true,
"autoincrement": false
},
"updated_at": {
"name": "updated_at",
"type": "integer",
"primaryKey": false,
"notNull": true,
"autoincrement": false
},
"team": {
"name": "team",
"type": "text",
"primaryKey": false,
"notNull": true,
"autoincrement": false,
"default": "'Default'"
}
},
"indexes": {
"users_username_unique": {
"name": "users_username_unique",
"columns": ["username"],
"isUnique": true
}
},
"foreignKeys": {},
"compositePrimaryKeys": {},
"uniqueConstraints": {},
"checkConstraints": {}
}
},
"views": {},
"enums": {},
"_meta": {
"schemas": {},
"tables": {},
"columns": {}
},
"internal": {
"indexes": {}
}
}
apps/api/drizzle/meta/0004_snapshot.json
+10 -28
View File
@@ -64,12 +64,8 @@
"name": "api_keys_user_id_users_id_fk",
"tableFrom": "api_keys",
"tableTo": "users",
"columnsFrom": [
"user_id"
],
"columnsTo": [
"id"
],
"columnsFrom": ["user_id"],
"columnsTo": ["id"],
"onDelete": "cascade",
"onUpdate": "no action"
}
@@ -212,12 +208,8 @@
"name": "pipelines_user_id_users_id_fk",
"tableFrom": "pipelines",
"tableTo": "users",
"columnsFrom": [
"user_id"
],
"columnsTo": [
"id"
],
"columnsFrom": ["user_id"],
"columnsTo": ["id"],
"onDelete": "cascade",
"onUpdate": "no action"
}
@@ -264,12 +256,8 @@
"name": "sessions_user_id_users_id_fk",
"tableFrom": "sessions",
"tableTo": "users",
"columnsFrom": [
"user_id"
],
"columnsTo": [
"id"
],
"columnsFrom": ["user_id"],
"columnsTo": ["id"],
"onDelete": "cascade",
"onUpdate": "no action"
}
@@ -404,12 +392,8 @@
"name": "user_files_user_id_users_id_fk",
"tableFrom": "user_files",
"tableTo": "users",
"columnsFrom": [
"user_id"
],
"columnsTo": [
"id"
],
"columnsFrom": ["user_id"],
"columnsTo": ["id"],
"onDelete": "cascade",
"onUpdate": "no action"
}
@@ -484,9 +468,7 @@
"indexes": {
"users_username_unique": {
"name": "users_username_unique",
"columns": [
"username"
],
"columns": ["username"],
"isUnique": true
}
},
@@ -506,4 +488,4 @@
"internal": {
"indexes": {}
}
}
}
apps/api/src/db/index.ts
+3 -3
View File
@@ -1,9 +1,9 @@
import { mkdirSync } from "node:fs";
import { dirname } from "node:path";
import Database from "better-sqlite3";
import { drizzle } from "drizzle-orm/better-sqlite3";
import { env } from "../config.js";
import * as schema from "./schema.js";
import { mkdirSync } from "node:fs";
import { dirname } from "node:path";
// Ensure data directory exists
mkdirSync(dirname(env.DB_PATH), { recursive: true });
@@ -17,4 +17,4 @@ sqlite.pragma("synchronous = NORMAL");
sqlite.pragma("foreign_keys = ON");
export const db = drizzle(sqlite, { schema });
export { schema };
export { schema, sqlite };
apps/api/src/index.ts
+18 -12
View File
@@ -1,22 +1,23 @@
import Fastify from "fastify";
import cors from "@fastify/cors";
import rateLimit from "@fastify/rate-limit";
import { env } from "./config.js";
import { APP_VERSION } from "@stirling-image/shared";
import Fastify from "fastify";
import { env } from "./config.js";
import { db, schema } from "./db/index.js";
import { runMigrations } from "./db/migrate.js";
import { ensureDefaultAdmin, authRoutes, authMiddleware } from "./plugins/auth.js";
import { registerUpload } from "./plugins/upload.js";
import { registerStatic } from "./plugins/static.js";
import { startCleanupCron } from "./lib/cleanup.js";
import { fileRoutes } from "./routes/files.js";
import { registerToolRoutes } from "./routes/tools/index.js";
import { authMiddleware, authRoutes, ensureDefaultAdmin } from "./plugins/auth.js";
import { registerStatic } from "./plugins/static.js";
import { registerUpload } from "./plugins/upload.js";
import { apiKeyRoutes } from "./routes/api-keys.js";
import { registerBatchRoutes } from "./routes/batch.js";
import { fileRoutes } from "./routes/files.js";
import { registerPipelineRoutes } from "./routes/pipeline.js";
import { registerProgressRoutes } from "./routes/progress.js";
import { apiKeyRoutes } from "./routes/api-keys.js";
import { settingsRoutes } from "./routes/settings.js";
import { teamsRoutes } from "./routes/teams.js";
import { registerToolRoutes } from "./routes/tools/index.js";
import { userFileRoutes } from "./routes/user-files.js";
import { db, schema } from "./db/index.js";
// Run before anything else
runMigrations();
@@ -34,7 +35,7 @@ const app = Fastify({
await app.register(cors, {
origin: env.CORS_ORIGIN
? env.CORS_ORIGIN.split(",").map((s) => s.trim())
: process.env.NODE_ENV === "production" ? false : true,
: process.env.NODE_ENV !== "production",
});
// Security headers
@@ -91,17 +92,22 @@ await apiKeyRoutes(app);
// Settings routes
await settingsRoutes(app);
// Teams routes
await teamsRoutes(app);
// Health check
app.get("/api/v1/health", async () => {
let dbOk = false;
try {
db.select().from(schema.settings).limit(1).all();
dbOk = true;
} catch { /* db unreachable */ }
} catch {
/* db unreachable */
}
return {
status: dbOk ? "healthy" : "degraded",
version: APP_VERSION,
uptime: process.uptime().toFixed(0) + "s",
uptime: `${process.uptime().toFixed(0)}s`,
storage: { mode: env.STORAGE_MODE, available: "N/A" },
database: dbOk ? "ok" : "error",
queue: { active: 0, pending: 0 },
apps/api/src/lib/file-storage.ts
+2 -2
View File
@@ -1,6 +1,6 @@
import { mkdir, writeFile, unlink } from "node:fs/promises";
import { join, extname } from "node:path";
import { randomUUID } from "node:crypto";
import { mkdir, unlink, writeFile } from "node:fs/promises";
import { extname, join } from "node:path";
import { env } from "../config.js";
let storageReady = false;
apps/api/src/routes/tool-factory.ts
+9 -18
View File
@@ -1,15 +1,15 @@
import { randomUUID } from "node:crypto";
import { writeFile } from "node:fs/promises";
import { join } from "node:path";
import type { FastifyInstance, FastifyRequest, FastifyReply } from "fastify";
import { z } from "zod";
import { eq } from "drizzle-orm";
import type { FastifyInstance, FastifyReply, FastifyRequest } from "fastify";
import sharp from "sharp";
import { createWorkspace } from "../lib/workspace.js";
import type { z } from "zod";
import { db, schema } from "../db/index.js";
import { autoOrient } from "../lib/auto-orient.js";
import { validateImageBuffer } from "../lib/file-validation.js";
import { sanitizeFilename } from "../lib/filename.js";
import { autoOrient } from "../lib/auto-orient.js";
import { db, schema } from "../db/index.js";
import { createWorkspace } from "../lib/workspace.js";
export interface ToolRouteConfig<T> {
/** Unique tool identifier, used as the URL path segment. */
@@ -54,10 +54,7 @@ export function getToolConfig(toolId: string): ToolRouteConfig<any> | undefined
* - Error handling
* - Response formatting
*/
export function createToolRoute<T>(
app: FastifyInstance,
config: ToolRouteConfig<T>,
): void {
export function createToolRoute<T>(app: FastifyInstance, config: ToolRouteConfig<T>): void {
// Register in the tool registry for batch processing
toolRegistry.set(config.toolId, config);
@@ -101,17 +98,13 @@ export function createToolRoute<T>(
// Require a file
if (!fileBuffer || fileBuffer.length === 0) {
return reply
.status(400)
.send({ error: "No image file provided" });
return reply.status(400).send({ error: "No image file provided" });
}
// Validate the uploaded image
const validation = await validateImageBuffer(fileBuffer);
if (!validation.valid) {
return reply
.status(400)
.send({ error: `Invalid image: ${validation.reason}` });
return reply.status(400).send({ error: `Invalid image: ${validation.reason}` });
}
// Parse and validate settings
@@ -162,9 +155,7 @@ export function createToolRoute<T>(
.get();
if (parent) {
const newVersion = parent.version + 1;
const parentChain: string[] = parent.toolChain
? JSON.parse(parent.toolChain)
: [];
const parentChain: string[] = parent.toolChain ? JSON.parse(parent.toolChain) : [];
const newToolChain = [...parentChain, config.toolId];
const storedName = await saveFile(result.buffer, result.filename);
// Get image dimensions from the processed output
apps/api/src/routes/user-files.ts
+172 -213
View File
@@ -12,14 +12,14 @@
import { randomUUID } from "node:crypto";
import { createReadStream } from "node:fs";
import { extname } from "node:path";
import type { FastifyInstance, FastifyRequest, FastifyReply } from "fastify";
import { eq, desc, like, and, sql } from "drizzle-orm";
import { and, desc, eq, like, sql } from "drizzle-orm";
import type { FastifyInstance, FastifyReply, FastifyRequest } from "fastify";
import sharp from "sharp";
import { db, schema, sqlite } from "../db/index.js";
import { deleteStoredFile, getStoredFilePath, saveFile } from "../lib/file-storage.js";
import { validateImageBuffer } from "../lib/file-validation.js";
import { sanitizeFilename } from "../lib/filename.js";
import { saveFile, deleteStoredFile, getStoredFilePath } from "../lib/file-storage.js";
import { getAuthUser } from "../plugins/auth.js";
import { db, schema } from "../db/index.js";
// ── Helpers ────────────────────────────────────────────────────────
@@ -62,7 +62,7 @@ function serializeFile(row: typeof schema.userFiles.$inferSelect) {
height: row.height,
version: row.version,
parentId: row.parentId,
toolChain: row.toolChain ? JSON.parse(row.toolChain) : null,
toolChain: row.toolChain ? JSON.parse(row.toolChain) : [],
createdAt: row.createdAt.toISOString(),
};
}
@@ -144,76 +144,69 @@ export async function userFileRoutes(app: FastifyInstance): Promise<void> {
* Multipart form with one or more image file parts.
* Validates each (magic bytes + dimensions), stores to disk, creates DB record.
*/
app.post(
"/api/v1/files/upload",
async (request: FastifyRequest, reply: FastifyReply) => {
const user = getAuthUser(request);
const userId = user?.id ?? null;
app.post("/api/v1/files/upload", async (request: FastifyRequest, reply: FastifyReply) => {
const user = getAuthUser(request);
const userId = user?.id ?? null;
const created: ReturnType<typeof serializeFile>[] = [];
const created: ReturnType<typeof serializeFile>[] = [];
const parts = request.parts();
const parts = request.parts();
for await (const part of parts) {
if (part.type !== "file") continue;
for await (const part of parts) {
if (part.type !== "file") continue;
// Consume the stream into a buffer
const chunks: Buffer[] = [];
for await (const chunk of part.file) {
chunks.push(chunk);
}
const buffer = Buffer.concat(chunks);
// Consume the stream into a buffer
const chunks: Buffer[] = [];
for await (const chunk of part.file) {
chunks.push(chunk);
}
const buffer = Buffer.concat(chunks);
if (buffer.length === 0) continue;
if (buffer.length === 0) continue;
// Validate image
const validation = await validateImageBuffer(buffer);
if (!validation.valid) {
return reply.status(400).send({
error: `Invalid file "${part.filename}": ${validation.reason}`,
});
}
const safeName = sanitizeFilename(part.filename ?? "upload");
const mimeType = formatToMime(validation.format);
// Persist to disk
const storedName = await saveFile(buffer, safeName);
// Create DB record
const id = randomUUID();
db.insert(schema.userFiles)
.values({
id,
userId,
originalName: safeName,
storedName,
mimeType,
size: buffer.length,
width: validation.width,
height: validation.height,
version: 1,
parentId: null,
toolChain: null,
})
.run();
const row = db
.select()
.from(schema.userFiles)
.where(eq(schema.userFiles.id, id))
.get();
if (row) created.push(serializeFile(row));
// Validate image
const validation = await validateImageBuffer(buffer);
if (!validation.valid) {
return reply.status(400).send({
error: `Invalid file "${part.filename}": ${validation.reason}`,
});
}
if (created.length === 0) {
return reply.status(400).send({ error: "No valid files uploaded" });
}
const safeName = sanitizeFilename(part.filename ?? "upload");
const mimeType = formatToMime(validation.format);
return reply.status(201).send({ files: created });
},
);
// Persist to disk
const storedName = await saveFile(buffer, safeName);
// Create DB record
const id = randomUUID();
db.insert(schema.userFiles)
.values({
id,
userId,
originalName: safeName,
storedName,
mimeType,
size: buffer.length,
width: validation.width,
height: validation.height,
version: 1,
parentId: null,
toolChain: null,
})
.run();
const row = db.select().from(schema.userFiles).where(eq(schema.userFiles.id, id)).get();
if (row) created.push(serializeFile(row));
}
if (created.length === 0) {
return reply.status(400).send({ error: "No valid files uploaded" });
}
return reply.status(201).send({ files: created });
});
/**
* GET /api/v1/files/:id
@@ -223,17 +216,10 @@ export async function userFileRoutes(app: FastifyInstance): Promise<void> {
*/
app.get(
"/api/v1/files/:id",
async (
request: FastifyRequest<{ Params: { id: string } }>,
reply: FastifyReply,
) => {
async (request: FastifyRequest<{ Params: { id: string } }>, reply: FastifyReply) => {
const { id } = request.params;
const file = db
.select()
.from(schema.userFiles)
.where(eq(schema.userFiles.id, id))
.get();
const file = db.select().from(schema.userFiles).where(eq(schema.userFiles.id, id)).get();
if (!file) {
return reply.status(404).send({ error: "File not found" });
@@ -254,11 +240,11 @@ export async function userFileRoutes(app: FastifyInstance): Promise<void> {
created_at: number;
}
const chainRows = db.all<ChainRow>(
sql`
const chainRows = sqlite
.prepare(`
WITH RECURSIVE
ancestors(id, parent_id) AS (
SELECT id, parent_id FROM user_files WHERE id = ${id}
SELECT id, parent_id FROM user_files WHERE id = ?
UNION ALL
SELECT uf.id, uf.parent_id FROM user_files uf
INNER JOIN ancestors a ON uf.id = a.parent_id
@@ -277,8 +263,8 @@ export async function userFileRoutes(app: FastifyInstance): Promise<void> {
INNER JOIN chain c ON child.parent_id = c.id
)
SELECT * FROM chain ORDER BY version ASC
`,
);
`)
.all(id) as ChainRow[];
const versions = chainRows.map((r) => ({
id: r.id,
@@ -289,7 +275,7 @@ export async function userFileRoutes(app: FastifyInstance): Promise<void> {
height: r.height,
version: r.version,
parentId: r.parent_id,
toolChain: r.tool_chain ? JSON.parse(r.tool_chain) : null,
toolChain: r.tool_chain ? JSON.parse(r.tool_chain) : [],
createdAt: new Date(r.created_at * 1000).toISOString(),
}));
@@ -307,17 +293,10 @@ export async function userFileRoutes(app: FastifyInstance): Promise<void> {
*/
app.get(
"/api/v1/files/:id/download",
async (
request: FastifyRequest<{ Params: { id: string } }>,
reply: FastifyReply,
) => {
async (request: FastifyRequest<{ Params: { id: string } }>, reply: FastifyReply) => {
const { id } = request.params;
const file = db
.select()
.from(schema.userFiles)
.where(eq(schema.userFiles.id, id))
.get();
const file = db.select().from(schema.userFiles).where(eq(schema.userFiles.id, id)).get();
if (!file) {
return reply.status(404).send({ error: "File not found" });
@@ -347,17 +326,10 @@ export async function userFileRoutes(app: FastifyInstance): Promise<void> {
*/
app.get(
"/api/v1/files/:id/thumbnail",
async (
request: FastifyRequest<{ Params: { id: string } }>,
reply: FastifyReply,
) => {
async (request: FastifyRequest<{ Params: { id: string } }>, reply: FastifyReply) => {
const { id } = request.params;
const file = db
.select()
.from(schema.userFiles)
.where(eq(schema.userFiles.id, id))
.get();
const file = db.select().from(schema.userFiles).where(eq(schema.userFiles.id, id)).get();
if (!file) {
return reply.status(404).send({ error: "File not found" });
@@ -387,35 +359,35 @@ export async function userFileRoutes(app: FastifyInstance): Promise<void> {
* Bulk delete. Body: { ids: string[] }
* For each id, deletes the entire version chain (all ancestors and descendants).
*/
app.delete(
"/api/v1/files",
async (request: FastifyRequest, reply: FastifyReply) => {
const body = request.body as { ids?: unknown } | null;
app.delete("/api/v1/files", async (request: FastifyRequest, reply: FastifyReply) => {
const body = request.body as { ids?: unknown } | null;
if (!Array.isArray(body?.ids) || body.ids.length === 0) {
return reply.status(400).send({ error: "ids must be a non-empty array" });
}
if (!Array.isArray(body?.ids) || body.ids.length === 0) {
return reply.status(400).send({ error: "ids must be a non-empty array" });
}
const ids = body.ids.filter((id): id is string => typeof id === "string");
if (ids.length === 0) {
return reply.status(400).send({ error: "ids must contain string values" });
}
const ids = body.ids.filter((id): id is string => typeof id === "string");
if (ids.length === 0) {
return reply.status(400).send({ error: "ids must contain string values" });
}
let deletedCount = 0;
let deletedCount = 0;
interface DeleteChainRow { id: string; stored_name: string }
interface DeleteChainRow {
id: string;
stored_name: string;
}
for (const id of ids) {
// Collect all files in the chain using a recursive CTE
const chainRows = db.all<DeleteChainRow>(
sql`
for (const id of ids) {
// Collect all files in the chain using a recursive CTE
const chainRows = sqlite
.prepare(`
WITH RECURSIVE chain(id, stored_name) AS (
-- Anchor: find the root of this chain
SELECT f.id, f.stored_name
FROM user_files f
WHERE f.id = (
WITH RECURSIVE ancestors(id, parent_id) AS (
SELECT id, parent_id FROM user_files WHERE id = ${id}
SELECT id, parent_id FROM user_files WHERE id = ?
UNION ALL
SELECT uf.id, uf.parent_id FROM user_files uf
INNER JOIN ancestors a ON uf.id = a.parent_id
@@ -423,27 +395,23 @@ export async function userFileRoutes(app: FastifyInstance): Promise<void> {
SELECT id FROM ancestors WHERE parent_id IS NULL LIMIT 1
)
UNION ALL
-- Recurse: all descendants
SELECT child.id, child.stored_name
FROM user_files child
INNER JOIN chain c ON child.parent_id = c.id
)
SELECT id, stored_name FROM chain
`,
);
`)
.all(id) as DeleteChainRow[];
for (const row of chainRows) {
await deleteStoredFile(row.stored_name);
db.delete(schema.userFiles)
.where(eq(schema.userFiles.id, row.id))
.run();
deletedCount++;
}
for (const row of chainRows) {
await deleteStoredFile(row.stored_name);
db.delete(schema.userFiles).where(eq(schema.userFiles.id, row.id)).run();
deletedCount++;
}
}
return reply.send({ deleted: deletedCount });
},
);
return reply.send({ deleted: deletedCount });
});
/**
* POST /api/v1/files/save-result
@@ -454,105 +422,96 @@ export async function userFileRoutes(app: FastifyInstance): Promise<void> {
* parentId — id of the parent user file record
* toolId — the tool that produced this result
*/
app.post(
"/api/v1/files/save-result",
async (request: FastifyRequest, reply: FastifyReply) => {
const user = getAuthUser(request);
const userId = user?.id ?? null;
app.post("/api/v1/files/save-result", async (request: FastifyRequest, reply: FastifyReply) => {
const user = getAuthUser(request);
const userId = user?.id ?? null;
let fileBuffer: Buffer | null = null;
let filename = "result";
let parentId: string | null = null;
let toolId: string | null = null;
let fileBuffer: Buffer | null = null;
let filename = "result";
let parentId: string | null = null;
let toolId: string | null = null;
const parts = request.parts();
for await (const part of parts) {
if (part.type === "file") {
const chunks: Buffer[] = [];
for await (const chunk of part.file) {
chunks.push(chunk);
}
fileBuffer = Buffer.concat(chunks);
filename = sanitizeFilename(part.filename ?? "result");
} else if (part.fieldname === "parentId") {
parentId = (part.value as string).trim() || null;
} else if (part.fieldname === "toolId") {
toolId = (part.value as string).trim() || null;
const parts = request.parts();
for await (const part of parts) {
if (part.type === "file") {
const chunks: Buffer[] = [];
for await (const chunk of part.file) {
chunks.push(chunk);
}
fileBuffer = Buffer.concat(chunks);
filename = sanitizeFilename(part.filename ?? "result");
} else if (part.fieldname === "parentId") {
parentId = (part.value as string).trim() || null;
} else if (part.fieldname === "toolId") {
toolId = (part.value as string).trim() || null;
}
}
if (!fileBuffer || fileBuffer.length === 0) {
return reply.status(400).send({ error: "No file provided" });
}
if (!fileBuffer || fileBuffer.length === 0) {
return reply.status(400).send({ error: "No file provided" });
}
if (!parentId) {
return reply.status(400).send({ error: "parentId is required" });
}
if (!parentId) {
return reply.status(400).send({ error: "parentId is required" });
}
// Validate the image
const validation = await validateImageBuffer(fileBuffer);
if (!validation.valid) {
return reply.status(400).send({
error: `Invalid file: ${validation.reason}`,
});
}
// Validate the image
const validation = await validateImageBuffer(fileBuffer);
if (!validation.valid) {
return reply.status(400).send({
error: `Invalid file: ${validation.reason}`,
});
}
// Look up the parent to compute the next version and carry forward the tool chain
const parent = db
.select()
.from(schema.userFiles)
.where(eq(schema.userFiles.id, parentId))
.get();
// Look up the parent to compute the next version and carry forward the tool chain
const parent = db
.select()
.from(schema.userFiles)
.where(eq(schema.userFiles.id, parentId))
.get();
if (!parent) {
return reply.status(404).send({ error: "Parent file not found" });
}
if (!parent) {
return reply.status(404).send({ error: "Parent file not found" });
}
const nextVersion = parent.version + 1;
const nextVersion = parent.version + 1;
// Build the tool chain: append the new toolId to the parent's chain
const existingChain: string[] = parent.toolChain
? JSON.parse(parent.toolChain)
: [];
const newChain = toolId ? [...existingChain, toolId] : existingChain;
// Build the tool chain: append the new toolId to the parent's chain
const existingChain: string[] = parent.toolChain ? JSON.parse(parent.toolChain) : [];
const newChain = toolId ? [...existingChain, toolId] : existingChain;
// Determine the original filename (preserve parent's name, update extension)
const ext = extname(filename) || extname(parent.originalName);
const baseName = parent.originalName.replace(/\.[^.]+$/, "");
const resultName = `${baseName}${ext}`;
// Determine the original filename (preserve parent's name, update extension)
const ext = extname(filename) || extname(parent.originalName);
const baseName = parent.originalName.replace(/\.[^.]+$/, "");
const resultName = `${baseName}${ext}`;
const mimeType = formatToMime(validation.format) || extToMime(ext);
const mimeType = formatToMime(validation.format) || extToMime(ext);
// Persist to disk
const storedName = await saveFile(fileBuffer, resultName);
// Persist to disk
const storedName = await saveFile(fileBuffer, resultName);
// Create DB record
const id = randomUUID();
db.insert(schema.userFiles)
.values({
id,
userId,
originalName: resultName,
storedName,
mimeType,
size: fileBuffer.length,
width: validation.width,
height: validation.height,
version: nextVersion,
parentId,
toolChain: JSON.stringify(newChain),
})
.run();
// Create DB record
const id = randomUUID();
db.insert(schema.userFiles)
.values({
id,
userId,
originalName: resultName,
storedName,
mimeType,
size: fileBuffer.length,
width: validation.width,
height: validation.height,
version: nextVersion,
parentId,
toolChain: JSON.stringify(newChain),
})
.run();
const row = db
.select()
.from(schema.userFiles)
.where(eq(schema.userFiles.id, id))
.get();
const row = db.select().from(schema.userFiles).where(eq(schema.userFiles.id, id)).get();
return reply.status(201).send({ file: row ? serializeFile(row) : null });
},
);
return reply.status(201).send({ file: row ? serializeFile(row) : null });
});
app.log.info("User file routes registered");
}
apps/web/src/App.tsx
+12 -12
View File
@@ -1,13 +1,13 @@
import { Component, type ErrorInfo, type ReactNode } from "react";
import { BrowserRouter, Routes, Route, Navigate, useLocation } from "react-router-dom";
import { HomePage } from "./pages/home-page";
import { LoginPage } from "./pages/login-page";
import { ToolPage } from "./pages/tool-page";
import { BrowserRouter, Navigate, Route, Routes, useLocation } from "react-router-dom";
import { KeyboardShortcutProvider } from "./components/common/keyboard-shortcut-provider";
import { useAuth } from "./hooks/use-auth";
import { AutomatePage } from "./pages/automate-page";
import { FilesPage } from "./pages/files-page";
import { FullscreenGridPage } from "./pages/fullscreen-grid-page";
import { KeyboardShortcutProvider } from "./components/common/keyboard-shortcut-provider";
import { useAuth } from "./hooks/use-auth";
import { HomePage } from "./pages/home-page";
import { LoginPage } from "./pages/login-page";
import { ToolPage } from "./pages/tool-page";
class ErrorBoundary extends Component<
{ children: ReactNode },
@@ -86,12 +86,12 @@ export function App() {
<KeyboardShortcutProvider>
<AuthGuard>
<Routes>
<Route path="/login" element={<LoginPage />} />
<Route path="/automate" element={<AutomatePage />} />
<Route path="/files" element={<FilesPage />} />
<Route path="/fullscreen" element={<FullscreenGridPage />} />
<Route path="/:toolId" element={<ToolPage />} />
<Route path="/" element={<HomePage />} />
<Route path="/login" element={<LoginPage />} />
<Route path="/automate" element={<AutomatePage />} />
<Route path="/files" element={<FilesPage />} />
<Route path="/fullscreen" element={<FullscreenGridPage />} />
<Route path="/:toolId" element={<ToolPage />} />
<Route path="/" element={<HomePage />} />
</Routes>
</AuthGuard>
</KeyboardShortcutProvider>
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",
apps/web/src/components/layout/app-layout.tsx
+14 -29
View File
@@ -1,21 +1,14 @@
import { FolderOpen, LayoutGrid, Menu, Settings as SettingsIcon, Workflow, X } from "lucide-react";
import { useState } from "react";
import { Link } from "react-router-dom";
import {
LayoutGrid,
Workflow,
FolderOpen,
Settings as SettingsIcon,
Menu,
X,
} from "lucide-react";
import { Sidebar } from "./sidebar";
import { ToolPanel } from "./tool-panel";
import { Footer } from "./footer";
import { Dropzone } from "../common/dropzone";
import { SettingsDialog } from "../settings/settings-dialog";
import { HelpDialog } from "../help/help-dialog";
import { useMobile } from "@/hooks/use-mobile";
import { cn } from "@/lib/utils";
import { Dropzone } from "../common/dropzone";
import { HelpDialog } from "../help/help-dialog";
import { SettingsDialog } from "../settings/settings-dialog";
import { Footer } from "./footer";
import { Sidebar } from "./sidebar";
import { ToolPanel } from "./tool-panel";
interface AppLayoutProps {
children?: React.ReactNode;
@@ -33,7 +26,10 @@ export function AppLayout({ children, showToolPanel = true, onFiles }: AppLayout
<div className="flex h-screen bg-background text-foreground overflow-hidden">
{/* Desktop sidebar */}
{!isMobile && (
<Sidebar onSettingsClick={() => setSettingsOpen(true)} onHelpClick={() => setHelpOpen(true)} />
<Sidebar
onSettingsClick={() => setSettingsOpen(true)}
onHelpClick={() => setHelpOpen(true)}
/>
)}
{/* Mobile sidebar overlay */}
@@ -89,12 +85,7 @@ export function AppLayout({ children, showToolPanel = true, onFiles }: AppLayout
{showToolPanel && !isMobile && <ToolPanel />}
<main
className={cn(
"flex-1 flex flex-col overflow-hidden",
isMobile && "pt-12 pb-16"
)}
>
<main className={cn("flex-1 flex flex-col overflow-hidden", isMobile && "pt-12 pb-16")}>
<div className="flex-1 overflow-y-auto p-6 flex items-center justify-center">
{children || <Dropzone onFiles={onFiles} accept="image/*" />}
</div>
@@ -124,16 +115,10 @@ export function AppLayout({ children, showToolPanel = true, onFiles }: AppLayout
)}
{/* Settings dialog */}
<SettingsDialog
open={settingsOpen}
onClose={() => setSettingsOpen(false)}
/>
<SettingsDialog open={settingsOpen} onClose={() => setSettingsOpen(false)} />
{/* Help dialog */}
<HelpDialog
open={helpOpen}
onClose={() => setHelpOpen(false)}
/>
<HelpDialog open={helpOpen} onClose={() => setHelpOpen(false)} />
</div>
);
}
apps/web/src/components/layout/sidebar.tsx
+6 -17
View File
@@ -1,14 +1,7 @@
import type { LucideIcon } from "lucide-react";
import { FolderOpen, Grid3x3, HelpCircle, LayoutGrid, Settings, Workflow } from "lucide-react";
import { Link, useLocation } from "react-router-dom";
import { cn } from "@/lib/utils";
import {
LayoutGrid,
Workflow,
HelpCircle,
Settings,
Grid3x3,
FolderOpen,
} from "lucide-react";
import type { LucideIcon } from "lucide-react";
interface SidebarItem {
icon: LucideIcon;
@@ -45,7 +38,7 @@ export function Sidebar({ onSettingsClick, onHelpClick, expanded = false }: Side
"flex items-center gap-3 px-4 py-2.5 rounded-lg cursor-pointer transition-colors",
isActive
? "bg-primary text-primary-foreground"
: "text-muted-foreground hover:bg-muted hover:text-foreground"
: "text-muted-foreground hover:bg-muted hover:text-foreground",
)}
>
<item.icon className="h-5 w-5" />
@@ -57,7 +50,7 @@ export function Sidebar({ onSettingsClick, onHelpClick, expanded = false }: Side
"flex flex-col items-center gap-1 p-2 rounded-lg cursor-pointer transition-colors",
isActive
? "bg-primary text-primary-foreground"
: "text-muted-foreground hover:bg-muted hover:text-foreground"
: "text-muted-foreground hover:bg-muted hover:text-foreground",
)}
>
<item.icon className="h-6 w-6" />
@@ -89,9 +82,7 @@ export function Sidebar({ onSettingsClick, onHelpClick, expanded = false }: Side
if (expanded) {
return (
<div className="flex flex-col p-3 gap-1">
{topItems.map((item) =>
renderItem(item, location.pathname === item.href)
)}
{topItems.map((item) => renderItem(item, location.pathname === item.href))}
<div className="border-t border-border my-2" />
{bottomItems.map((item) => renderItem(item, false))}
</div>
@@ -101,9 +92,7 @@ export function Sidebar({ onSettingsClick, onHelpClick, expanded = false }: Side
return (
<aside className="flex flex-col items-center w-16 bg-sidebar border-r border-border py-3 gap-1 shrink-0">
<div className="flex flex-col gap-1 flex-1">
{topItems.map((item) =>
renderItem(item, location.pathname === item.href)
)}
{topItems.map((item) => renderItem(item, location.pathname === item.href))}
</div>
<div className="border-t border-border w-10 my-2" />
<div className="flex flex-col gap-1">
apps/web/src/hooks/use-tool-processor.ts
+39 -15
View File
@@ -1,4 +1,4 @@
import { useCallback, useState, useRef, useEffect } from "react";
import { useCallback, useEffect, useRef, useState } from "react";
import { useFileStore } from "@/stores/file-store";
function getToken(): string {
@@ -29,7 +29,11 @@ const IDLE_PROGRESS: ToolProgress = {
// AI tools that go through Python/bridge.ts and can emit SSE progress.
// smart-crop is category "ai" but uses Sharp (no Python), so it's excluded.
const AI_PYTHON_TOOLS = new Set([
"remove-background", "upscale", "blur-faces", "erase-object", "ocr",
"remove-background",
"upscale",
"blur-faces",
"erase-object",
"ocr",
]);
export function useToolProcessor(toolId: string) {
@@ -89,9 +93,7 @@ export function useToolProcessor(toolId: string) {
// For AI tools, open SSE before uploading
if (isAiTool) {
try {
const es = new EventSource(
`/api/v1/jobs/${clientJobId}/progress`,
);
const es = new EventSource(`/api/v1/jobs/${clientJobId}/progress`);
eventSourceRef.current = es;
es.onmessage = (event) => {
@@ -251,7 +253,8 @@ export function useToolProcessor(toolId: string) {
try {
const data = JSON.parse(event.data);
if (data.type === "batch") {
const pct = data.totalFiles > 0 ? 15 + (data.completedFiles / data.totalFiles) * 85 : 15;
const pct =
data.totalFiles > 0 ? 15 + (data.completedFiles / data.totalFiles) * 85 : 15;
setProgress((prev) => ({
...prev,
phase: "processing",
@@ -261,10 +264,17 @@ export function useToolProcessor(toolId: string) {
: `Processing ${data.completedFiles}/${data.totalFiles}`,
}));
}
} catch { /* ignore malformed SSE */ }
} catch {
/* ignore malformed SSE */
}
};
es.onerror = () => { es.close(); eventSourceRef.current = null; };
} catch { /* SSE failed, proceed without */ }
es.onerror = () => {
es.close();
eventSourceRef.current = null;
};
} catch {
/* SSE failed, proceed without */
}
const formData = new FormData();
for (const file of files) formData.append("file", file);
@@ -280,7 +290,10 @@ export function useToolProcessor(toolId: string) {
});
if (elapsedRef.current) clearInterval(elapsedRef.current);
if (eventSourceRef.current) { eventSourceRef.current.close(); eventSourceRef.current = null; }
if (eventSourceRef.current) {
eventSourceRef.current.close();
eventSourceRef.current = null;
}
if (!response.ok) {
const text = await response.text();
@@ -288,7 +301,9 @@ export function useToolProcessor(toolId: string) {
try {
const body = JSON.parse(text);
errorMsg = body.error || body.details || `Batch processing failed: ${response.status}`;
} catch { errorMsg = `Batch processing failed: ${response.status}`; }
} catch {
errorMsg = `Batch processing failed: ${response.status}`;
}
setError(errorMsg);
setProcessing(false);
setProgress(IDLE_PROGRESS);
@@ -300,10 +315,12 @@ export function useToolProcessor(toolId: string) {
// Extract files from ZIP using fflate
const { unzipSync } = await import("fflate");
const zipBuffer = new Uint8Array(await zipBlob.arrayBuffer() as ArrayBuffer);
const zipBuffer = new Uint8Array((await zipBlob.arrayBuffer()) as ArrayBuffer);
const extracted = unzipSync(zipBuffer);
const fileOrder = (response.headers.get("X-File-Order")?.split(",") ?? []).map(decodeURIComponent);
const fileOrder = (response.headers.get("X-File-Order")?.split(",") ?? []).map(
decodeURIComponent,
);
const entries = useFileStore.getState().entries;
const extractedNames = Object.keys(extracted);
@@ -316,7 +333,11 @@ export function useToolProcessor(toolId: string) {
}
if (zipName && extracted[zipName]) {
const blob = new Blob([extracted[zipName] as BlobPart]);
updateEntry(i, { processedUrl: URL.createObjectURL(blob), processedSize: blob.size, status: "completed" });
updateEntry(i, {
processedUrl: URL.createObjectURL(blob),
processedSize: blob.size,
status: "completed",
});
} else {
updateEntry(i, { status: "failed", error: "File not found in batch results" });
}
@@ -326,7 +347,10 @@ export function useToolProcessor(toolId: string) {
setProgress(IDLE_PROGRESS);
} catch (err) {
if (elapsedRef.current) clearInterval(elapsedRef.current);
if (eventSourceRef.current) { eventSourceRef.current.close(); eventSourceRef.current = null; }
if (eventSourceRef.current) {
eventSourceRef.current.close();
eventSourceRef.current = null;
}
setError(err instanceof Error ? err.message : "Batch processing failed");
setProcessing(false);
setProgress(IDLE_PROGRESS);
apps/web/src/lib/api.ts
+8 -10
View File
@@ -59,14 +59,12 @@ export function clearToken() {
// ── File Upload / Download ──────────────────────────────────────
export async function apiUpload(
files: File[],
): Promise<{
export async function apiUpload(files: File[]): Promise<{
jobId: string;
files: Array<{ name: string; size: number; format: string }>;
}> {
const formData = new FormData();
files.forEach((f) => formData.append("files", f));
for (const f of files) formData.append("files", f);
const res = await fetch("/api/v1/upload", {
method: "POST",
headers: { Authorization: `Bearer ${getToken()}` },
@@ -118,14 +116,17 @@ export async function apiListFiles(params?: {
}
export async function apiGetFileDetails(id: string): Promise<UserFileDetail> {
return apiGet(`/v1/files/${id}`);
const res = await apiGet<{ file: UserFile; versions: UserFileDetail["versions"] }>(
`/v1/files/${id}`,
);
return { ...res.file, versions: res.versions };
}
export async function apiUploadUserFiles(
files: File[],
): Promise<{ files: Array<{ id: string; originalName: string; size: number; version: number }> }> {
const formData = new FormData();
files.forEach((f) => formData.append("files", f));
for (const f of files) formData.append("files", f);
const res = await fetch("/api/v1/files/upload", {
method: "POST",
headers: { Authorization: `Bearer ${getToken()}` },
@@ -156,10 +157,7 @@ export function getFileDownloadUrl(id: string): string {
return `/api/v1/files/${id}/download`;
}
export async function apiDownloadBlob(
jobId: string,
filename: string,
): Promise<Blob> {
export async function apiDownloadBlob(jobId: string, filename: string): Promise<Blob> {
const res = await fetch(getDownloadUrl(jobId, filename), {
headers: { Authorization: `Bearer ${getToken()}` },
});
apps/web/src/pages/files-page.tsx
+32 -12
View File
@@ -1,12 +1,12 @@
import { useState } from "react";
import { X } from "lucide-react";
import { AppLayout } from "@/components/layout/app-layout";
import { FilesNav } from "@/components/files/files-nav";
import { FileList } from "@/components/files/file-list";
import { useState } from "react";
import { FileDetails } from "@/components/files/file-details";
import { FileList } from "@/components/files/file-list";
import { FileUploadArea } from "@/components/files/file-upload-area";
import { useFilesPageStore } from "@/stores/files-page-store";
import { FilesNav } from "@/components/files/files-nav";
import { AppLayout } from "@/components/layout/app-layout";
import { useMobile } from "@/hooks/use-mobile";
import { useFilesPageStore } from "@/stores/files-page-store";
export function FilesPage() {
const { activeTab, setActiveTab, selectedFileId } = useFilesPageStore();
@@ -20,6 +20,7 @@ export function FilesPage() {
{/* Mobile tabs */}
<div className="flex border-b border-border">
<button
type="button"
onClick={() => setActiveTab("recent")}
className={`flex-1 py-2.5 text-sm font-medium text-center transition-colors ${
activeTab === "recent"
@@ -30,6 +31,7 @@ export function FilesPage() {
Recent
</button>
<button
type="button"
onClick={() => setActiveTab("upload")}
className={`flex-1 py-2.5 text-sm font-medium text-center transition-colors ${
activeTab === "upload"
@@ -42,7 +44,17 @@ export function FilesPage() {
</div>
{activeTab === "recent" ? (
<div className="flex-1 overflow-hidden" onClick={() => { if (selectedFileId) setShowDetails(true); }}>
<div
role="listbox"
tabIndex={0}
className="flex-1 overflow-hidden"
onClick={() => {
if (selectedFileId) setShowDetails(true);
}}
onKeyDown={(e) => {
if ((e.key === "Enter" || e.key === " ") && selectedFileId) setShowDetails(true);
}}
>
<FileList />
</div>
) : (
@@ -51,14 +63,22 @@ export function FilesPage() {
{/* Mobile detail bottom sheet */}
{showDetails && selectedFileId && (
<div className="fixed inset-0 z-50 bg-black/50" onClick={() => setShowDetails(false)}>
<div
className="absolute bottom-0 left-0 right-0 bg-background rounded-t-xl p-4 max-h-[70vh] overflow-y-auto"
onClick={(e) => e.stopPropagation()}
>
<div
role="dialog"
aria-modal="true"
aria-label="File Details"
className="fixed inset-0 z-50 bg-black/50"
onClick={(e) => {
if (e.target === e.currentTarget) setShowDetails(false);
}}
onKeyDown={(e) => {
if (e.key === "Escape") setShowDetails(false);
}}
>
<div className="absolute bottom-0 left-0 right-0 bg-background rounded-t-xl p-4 max-h-[70vh] overflow-y-auto">
<div className="flex justify-between items-center mb-3">
<span className="text-sm font-semibold">File Details</span>
<button onClick={() => setShowDetails(false)}>
<button type="button" onClick={() => setShowDetails(false)}>
<X className="h-5 w-5 text-muted-foreground" />
</button>
</div>
apps/web/src/stores/file-store.ts
+2 -4
View File
@@ -87,8 +87,7 @@ function deriveCompat(entries: FileEntry[], selectedIndex: number) {
files: entries.map((e) => e.file),
currentEntry: entry,
hasFiles: entries.length > 0,
allProcessed:
entries.length > 0 && entries.every((e) => e.status === "completed"),
allProcessed: entries.length > 0 && entries.every((e) => e.status === "completed"),
selectedFileName: entry ? entry.file.name : null,
selectedFileSize: entry ? entry.file.size : null,
originalBlobUrl: entry ? entry.blobUrl : null,
@@ -183,8 +182,7 @@ export const useFileStore = create<FileState>((set, get) => ({
set({ entries, ...deriveCompat(entries, idx) });
},
setBatchZip: (blob, filename) =>
set({ batchZipBlob: blob, batchZipFilename: filename }),
setBatchZip: (blob, filename) => set({ batchZipBlob: blob, batchZipFilename: filename }),
setProcessing: (v) => set({ processing: v }),
apps/web/src/stores/files-page-store.ts
+6 -8
View File
@@ -1,10 +1,5 @@
import { create } from "zustand";
import {
apiListFiles,
apiUploadUserFiles,
apiDeleteUserFiles,
type UserFile,
} from "@/lib/api";
import { apiDeleteUserFiles, apiListFiles, apiUploadUserFiles, type UserFile } from "@/lib/api";
interface FilesPageState {
files: UserFile[];
@@ -75,12 +70,15 @@ export const useFilesPageStore = create<FilesPageState>((set, get) => ({
toggleChecked: (id) => {
const { checkedIds } = get();
const next = new Set(checkedIds);
if (next.has(id)) next.delete(id); else next.add(id);
if (next.has(id)) next.delete(id);
else next.add(id);
set({ checkedIds: next });
},
toggleCheckAll: () => {
const { files, checkedIds } = get();
set({ checkedIds: checkedIds.size === files.length ? new Set() : new Set(files.map(f => f.id)) });
set({
checkedIds: checkedIds.size === files.length ? new Set() : new Set(files.map((f) => f.id)),
});
},
setSearchQuery: (q) => set({ searchQuery: q }),
setActiveTab: (tab) => set({ activeTab: tab }),