create-m5kdev 0.39.0 → 0.40.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "create-m5kdev",
-  "version": "0.39.0",
+  "version": "0.40.0",
   "license": "GPL-3.0-only",
   "engines": {
     "node": ">=24"

package/templates/minimal-app/apps/e2e/tests/files.spec.ts.tpl

@@ -32,4 +32,8 @@ test("upload a file and see it inventoried", async ({ page, request }) => {
   await expect(page.getByTestId("file-row").first()).toContainText("hello.png", {
     timeout: 15_000,
   });
+  await expect(page.getByTestId("file-download")).toHaveAttribute(
+    "href",
+    /\/files\/[0-9a-f-]{36}$/i
+  );
 });

package/templates/minimal-app/apps/webapp/src/modules/files/FilesRoute.tsx.tpl

@@ -79,6 +79,30 @@ export function FilesRoute() {
                   </Chip>
                 ) : null}
               </Card.Header>
+              <Card.Content className="flex flex-wrap items-center gap-3">
+                <img
+                  src={row.downloadUrl}
+                  alt={row.originalName}
+                  className="h-16 w-16 rounded-md object-cover"
+                  data-testid="file-preview"
+                />
+                <a
+                  href={row.downloadUrl}
+                  data-testid="file-download"
+                  className="text-sm font-medium underline"
+                >
+                  {t("files.row.open")}
+                </a>
+                <Button
+                  size="sm"
+                  variant="ghost"
+                  data-testid="file-delete"
+                  isDisabled={files.isDeleting}
+                  onPress={() => files.remove(row.id)}
+                >
+                  {t("files.row.delete")}
+                </Button>
+              </Card.Content>
             </Card>
           ))}
         </div>

package/templates/minimal-app/apps/webapp/src/modules/files/hooks/useFilesRoute.ts.tpl

@@ -1,4 +1,6 @@
-import { useFileUpload } from "@m5kdev/frontend/modules/file/hooks/useUpload";
+import { useAppConfig } from "@m5kdev/frontend/modules/app/hooks/useAppConfig";
+import { fileCookieDownloadUrl } from "@m5kdev/frontend/modules/file/hooks/useS3DownloadUrl";
+import { useS3Upload } from "@m5kdev/frontend/modules/file/hooks/useS3Upload";
 import type { AppRouter } from "{{PACKAGE_SCOPE}}/server/types";
 import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
 import type { inferRouterOutputs } from "@trpc/server";
@@ -9,25 +11,32 @@ import { useTRPC } from "@/utils/trpc";
 type FileListOutput = inferRouterOutputs<AppRouter>["file"]["list"];
 type FileRow = FileListOutput["rows"][number];
 
+interface FilesRouteRow extends FileRow {
+  readonly downloadUrl: string;
+}
+
 interface FilesRouteState {
-  readonly rows: FileRow[];
+  readonly rows: FilesRouteRow[];
   readonly isLoading: boolean;
   readonly isFetching: boolean;
   readonly isUploading: boolean;
+  readonly isDeleting: boolean;
   readonly upload: (file: File) => void;
+  readonly remove: (fileId: string) => void;
 }
 
 export function useFilesRoute(): FilesRouteState {
   const { t } = useTranslation("{{APP_SLUG}}");
+  const { serverUrl } = useAppConfig();
   const trpc = useTRPC();
   const queryClient = useQueryClient();
-  const fileUpload = useFileUpload();
+  const fileUpload = useS3Upload({ scope: "organization" });
 
   const listQuery = useQuery(trpc.file.list.queryOptions({}));
 
   const uploadMutation = useMutation({
     mutationFn: async (file: File) => {
-      await fileUpload.upload("image", file);
+      await fileUpload.upload(file);
     },
     onSuccess: async () => {
       toast.success(t("files.toast.uploaded"));
@@ -38,13 +47,32 @@ export function useFilesRoute(): FilesRouteState {
     },
   });
 
+  const deleteMutation = useMutation(
+    trpc.file.delete.mutationOptions({
+      onSuccess: async () => {
+        toast.success(t("files.toast.deleted"));
+        await queryClient.invalidateQueries(trpc.file.list.queryFilter());
+      },
+      onError: (error) => {
+        toast.error(error instanceof Error ? error.message : t("files.toast.deleteFailed"));
+      },
+    })
+  );
+
   return {
-    rows: listQuery.data?.rows ?? [],
+    rows: (listQuery.data?.rows ?? []).map((row) => ({
+      ...row,
+      downloadUrl: fileCookieDownloadUrl(serverUrl, row.id),
+    })),
     isLoading: listQuery.isLoading,
     isFetching: listQuery.isFetching,
     isUploading: uploadMutation.isPending,
+    isDeleting: deleteMutation.isPending,
     upload: (file: File) => {
       void uploadMutation.mutateAsync(file).catch(() => undefined);
     },
+    remove: (fileId: string) => {
+      void deleteMutation.mutateAsync({ fileId }).catch(() => undefined);
+    },
   };
 }

package/templates/minimal-app/apps/webapp/translations/en/{{APP_SLUG}}.json.tpl

@@ -168,7 +168,7 @@
     "hero": {
       "eyebrow": "Files",
       "title": "Upload an image and see it inventoried.",
-      "body": "Local uploads land on disk and in the files table. Organization-scoped rows stamp the active member.",
+      "body": "The browser PUTs to S3 after initiate, then finalize inventories the File. Open uses /files/:id.",
       "upload": "Upload image",
       "syncing": "Refreshing",
       "synced": "Live against the files table"
@@ -178,11 +178,15 @@
       "body": "Upload an image to see it listed here."
     },
     "row": {
-      "organization": "Organization"
+      "organization": "Organization",
+      "open": "Open",
+      "delete": "Delete"
     },
     "toast": {
       "uploaded": "File uploaded.",
-      "failed": "Upload failed."
+      "failed": "Upload failed.",
+      "deleted": "File deleted.",
+      "deleteFailed": "Delete failed."
     }
   },
   "notifications": {

package/templates/minimal-app/pnpm-workspace.yaml.tpl

@@ -7,18 +7,18 @@ catalogs:
     "@heroui/react": 3.0.3
     "@heroui/styles": 3.0.3
     "@libsql/client": 0.17.4
-    "@m5kdev/backend": 0.39.0
-    "@m5kdev/commons": 0.39.0
-    "@m5kdev/config": 0.39.0
-    "@m5kdev/email": 0.39.0
-    "@m5kdev/expo": 0.39.0
-    "@m5kdev/frontend": 0.39.0
-    "@m5kdev/module-clay": 0.39.0
-    "@m5kdev/module-docx": 0.39.0
-    "@m5kdev/module-pdf": 0.39.0
-    "@m5kdev/module-social": 0.39.0
-    "@m5kdev/module-video": 0.39.0
-    "@m5kdev/web-ui": 0.39.0
+    "@m5kdev/backend": 0.40.0
+    "@m5kdev/commons": 0.40.0
+    "@m5kdev/config": 0.40.0
+    "@m5kdev/email": 0.40.0
+    "@m5kdev/expo": 0.40.0
+    "@m5kdev/frontend": 0.40.0
+    "@m5kdev/module-clay": 0.40.0
+    "@m5kdev/module-docx": 0.40.0
+    "@m5kdev/module-pdf": 0.40.0
+    "@m5kdev/module-social": 0.40.0
+    "@m5kdev/module-video": 0.40.0
+    "@m5kdev/web-ui": 0.40.0
     "@mastra/core": 1.51.0
     "@openrouter/ai-sdk-provider": 3.0.0
     "@opentelemetry/api": 1.9.0