feat: add Notes app with markdown editor and preview

.changeset/add-notes-app.md

@@ -0,0 +1,15 @@
+---
+"r2-explorer": minor
+---
+
+Add a Notes app to the dashboard. Notes are markdown files stored directly in your R2 bucket under `.r2-explorer/notes/`, so no extra infrastructure is needed. From the new "Notes" button in the sidebar you can:
+
+- Create, edit and delete markdown notes
+- Toggle between an edit view and a rendered markdown preview
+- Save with the Save button or Ctrl/Cmd+S
+
+The app can be disabled with the new `apps` server setting:
+
+```ts
+export default R2Explorer({ apps: { notes: { enabled: false } } });
+```

packages/dashboard/e2e/notes.spec.ts

@@ -0,0 +1,149 @@
+import { expect, test } from "@playwright/test";
+import { BUCKET, cleanupPrefix, uploadFile } from "./helpers";
+
+const NOTES_PREFIX = ".r2-explorer/notes/";
+
+function encodeKey(key: string): string {
+	return btoa(unescape(encodeURIComponent(key)));
+}
+
+async function getNoteContent(request, name: string): Promise<string> {
+	const resp = await request.get(
+		`http://localhost:8787/api/buckets/${BUCKET}/${encodeKey(`${NOTES_PREFIX}${name}`)}`,
+	);
+	expect(resp.ok()).toBe(true);
+	return await resp.text();
+}
+
+test.describe("Notes app", () => {
+	test.beforeEach(async ({ request }) => {
+		await cleanupPrefix(request, NOTES_PREFIX);
+		await uploadFile(
+			request,
+			`${NOTES_PREFIX}welcome.md`,
+			"# Hello\n\nThis is a **seeded** note.",
+			"text/markdown",
+		);
+	});
+
+	test("sidebar has a Notes button that opens the app", async ({ page }) => {
+		await page.goto(`/${BUCKET}/files`);
+		await page.getByRole("button", { name: "Notes" }).click();
+		await expect(page).toHaveURL(new RegExp(`/${BUCKET}/notes`));
+		await expect(page.getByTestId("new-note-btn")).toBeVisible();
+	});
+
+	test("lists notes and opens one in the editor", async ({ page }) => {
+		await page.goto(`/${BUCKET}/notes`);
+
+		const item = page.getByTestId("note-item").filter({ hasText: "welcome" });
+		await expect(item).toBeVisible();
+		await item.click();
+
+		await expect(page.getByTestId("note-title")).toHaveText("welcome");
+		await expect(page.getByTestId("note-textarea")).toHaveValue(
+			"# Hello\n\nThis is a **seeded** note.",
+		);
+	});
+
+	test("renders markdown preview", async ({ page }) => {
+		await page.goto(`/${BUCKET}/notes/${encodeKey("welcome.md")}`);
+
+		await expect(page.getByTestId("note-textarea")).toBeVisible();
+		await page.getByRole("button", { name: "Preview" }).click();
+
+		const preview = page.getByTestId("note-preview");
+		await expect(preview.locator("h1")).toHaveText("Hello");
+		await expect(preview.locator("strong")).toHaveText("seeded");
+	});
+
+	test("edits and saves a note", async ({ page, request }) => {
+		await page.goto(`/${BUCKET}/notes/${encodeKey("welcome.md")}`);
+
+		const textarea = page.getByTestId("note-textarea");
+		await expect(textarea).toHaveValue(/Hello/);
+		await textarea.fill("# Updated\n\nNew content.");
+		await page.getByTestId("save-note-btn").click();
+
+		await expect(page.locator(".q-notification")).toContainText("Note saved");
+
+		const content = await getNoteContent(request, "welcome.md");
+		expect(content).toBe("# Updated\n\nNew content.");
+	});
+
+	test("creates a new note", async ({ page, request }) => {
+		await page.goto(`/${BUCKET}/notes`);
+
+		await page.getByTestId("new-note-btn").click();
+		await page.getByTestId("new-note-name").fill("my ideas");
+		await page.getByTestId("create-note-btn").click();
+
+		// Should navigate to the new note's editor
+		await expect(page.getByTestId("note-title")).toHaveText("my ideas");
+
+		const textarea = page.getByTestId("note-textarea");
+		await textarea.fill("Remember to water the plants");
+		await page.getByTestId("save-note-btn").click();
+		await expect(page.locator(".q-notification")).toContainText("Note saved");
+
+		const content = await getNoteContent(request, "my ideas.md");
+		expect(content).toBe("Remember to water the plants");
+
+		// It should also show up in the notes list
+		await expect(
+			page.getByTestId("note-item").filter({ hasText: "my ideas" }),
+		).toBeVisible();
+	});
+
+	test("rejects duplicate note names", async ({ page }) => {
+		await page.goto(`/${BUCKET}/notes`);
+
+		await page.getByTestId("new-note-btn").click();
+		await page.getByTestId("new-note-name").fill("welcome");
+		await page.getByTestId("create-note-btn").click();
+
+		await expect(
+			page.locator(".q-field__messages", { hasText: "already exists" }),
+		).toBeVisible();
+	});
+
+	test("mobile: list is full-width and editor takes over with a back button", async ({
+		page,
+	}) => {
+		await page.setViewportSize({ width: 390, height: 844 });
+		await page.goto(`/${BUCKET}/notes`);
+
+		// Editor pane hidden, list takes the full width
+		await expect(page.getByTestId("new-note-btn")).toBeVisible();
+		await expect(page.getByTestId("back-to-notes-btn")).toBeHidden();
+
+		await page.getByTestId("note-item").filter({ hasText: "welcome" }).click();
+
+		// Note open: editor visible, list hidden
+		await expect(page.getByTestId("note-textarea")).toBeVisible();
+		await expect(page.getByTestId("new-note-btn")).toBeHidden();
+
+		// Back button returns to the list
+		await page.getByTestId("back-to-notes-btn").click();
+		await expect(page).toHaveURL(new RegExp(`/${BUCKET}/notes$`));
+		await expect(page.getByTestId("new-note-btn")).toBeVisible();
+	});
+
+	test("deletes a note", async ({ page }) => {
+		await page.goto(`/${BUCKET}/notes/${encodeKey("welcome.md")}`);
+
+		await expect(page.getByTestId("note-textarea")).toBeVisible();
+		await page.getByTestId("delete-note-btn").click();
+
+		// Confirm in the Quasar dialog
+		await page.locator(".q-dialog").getByRole("button", { name: "OK" }).click();
+
+		await expect(page.locator(".q-notification").last()).toContainText(
+			"Note deleted",
+		);
+		await expect(page).toHaveURL(new RegExp(`/${BUCKET}/notes$`));
+		await expect(
+			page.getByTestId("note-item").filter({ hasText: "welcome" }),
+		).toHaveCount(0);
+	});
+});

packages/dashboard/package.json

@@ -17,8 +17,10 @@
 		"@quasar/cli": "^2.4.1",
 		"@quasar/extras": "^1.16.15",
 		"axios": "^1.2.1",
+		"dompurify": "^3.4.12",
 		"fflate": "^0.8.1",
 		"html-to-text": "^9.0.5",
+		"marked": "^18.0.6",
 		"pdfjs-dist": "2.5.207",
 		"pdfvuer": "^2.0.1",
 		"pinia": "^2.0.11",

packages/dashboard/src/components/main/LeftSidebar.vue

@@ -44,6 +44,7 @@
       </q-btn>
 
       <q-btn class="q-mb-sm" @click="gotoFiles" color="blue" icon="folder_copy" label="Files" stack />
+      <q-btn v-if="mainStore.config && mainStore.config.apps?.notes?.enabled !== false" class="q-mb-sm" @click="gotoNotes" color="blue" icon="sticky_note_2" label="Notes" stack />
       <q-btn v-if="mainStore.config && mainStore.config.emailRouting !== false" class="q-mb-sm" @click="gotoEmail" color="blue" icon="email" label="Email" stack />
 
       <q-btn class="q-mb-sm q-mt-auto q-mb-0" @click="infoPopup=true" color="secondary" icon="question_mark"
@@ -108,6 +109,9 @@ export default defineComponent({
 		gotoFiles: function () {
 			if (this.selectedApp !== "files") this.changeApp("files");
 		},
+		gotoNotes: function () {
+			if (this.selectedApp !== "notes") this.changeApp("notes");
+		},
 		changeApp: function (app) {
 			this.$router.push({
 				name: `${app}-home`,