Add modified date field

src/app.css

@@ -52,7 +52,7 @@ body,
 }
 
 .dataviews-wrapper {
-  height: 100%;
+  min-height: 100%;
 }
 
 .dataviews-view-list__item-wrapper {

src/get-data.js

@@ -1,15 +1,8 @@
 import { Filesystem } from '@capacitor/filesystem';
-import { getSelectedFolderURL } from './index';
 
-export async function getPaths(path = '', selectedFolderURL) {
+export async function getPaths(path = '', directory) {
 	const paths = [];
-	if (!selectedFolderURL) {
-		selectedFolderURL = await getSelectedFolderURL();
-	}
-	const dir = await Filesystem.readdir({
-		path,
-		directory: selectedFolderURL,
-	});
+	const dir = await Filesystem.readdir({ path, directory });
 
 	// Recursively read all files in the iCloud folder
 	for (const file of dir.files) {
@@ -19,9 +12,9 @@ export async function getPaths(path = '', selectedFolderURL) {
 				continue;
 			}
 			// paths.push(nestedPath)
-			paths.push(...(await getPaths(nestedPath, selectedFolderURL)));
+			paths.push(...(await getPaths(nestedPath, directory)));
 		} else if (file.name.endsWith('.html')) {
-			paths.push(nestedPath);
+			paths.push({ ...file, path: nestedPath });
 		}
 	}
 

src/list.jsx

@@ -46,8 +46,8 @@ export default function Frame({ selectedFolderURL, setSelectedFolderURL }) {
 		setCurrentId();
 		getPaths('', selectedFolderURL)
 			.then((_paths) => {
-				const pathObjects = _paths.map((path) => ({
-					path,
+				const pathObjects = _paths.map((file) => ({
+					...file,
 					id: uuidv4(),
 				}));
 				if (!pathObjects.length) {

src/sidebar.jsx

@@ -18,7 +18,7 @@ export default function SiderBar({ items, setItem, currentId, setCurrentId }) {
 		search: '',
 		filters: [],
 		sort: {
-			field: 'path',
+			field: 'mtime',
 			direction: 'desc',
 		},
 		hiddenFields: [],
@@ -31,6 +31,20 @@ export default function SiderBar({ items, setItem, currentId, setCurrentId }) {
 		);
 	}
 
+	if (view.sort) {
+		items = items.sort((a, b) => {
+			const aValue = a[view.sort.field];
+			const bValue = b[view.sort.field];
+			if (aValue < bValue) {
+				return view.sort.direction === 'asc' ? -1 : 1;
+			}
+			if (aValue > bValue) {
+				return view.sort.direction === 'asc' ? 1 : -1;
+			}
+			return 0;
+		});
+	}
+
 	// Temporary hack until we can control selection in data views.
 	useEffect(() => {
 		const button = document.getElementById('view-list-0-' + currentId);
@@ -50,11 +64,34 @@ export default function SiderBar({ items, setItem, currentId, setCurrentId }) {
 				{
 					id: 'path',
 					// To do: remove hidden text from rows.
-					header: ' ',
+					header: 'Text',
 					enableHiding: false,
-					enableSorting: false,
 					render({ item }) {
-						return <Title item={item} />;
+						return (
+							<span className="note-title">
+								<Title item={item} />
+							</span>
+						);
+					},
+				},
+				{
+					id: 'mtime',
+					header: 'Modified',
+					render({ item }) {
+						const time = item.mtime
+							? new Date(item.mtime).toLocaleString(undefined, {
+									year: 'numeric',
+									month: 'long',
+									day: 'numeric',
+									hour: '2-digit',
+									minute: '2-digit',
+								})
+							: 'now';
+						return (
+							<small style={{ opacity: 0.6 }}>
+								<time dateTime={item.mtime}>{time}</time>
+							</small>
+						);
 					},
 				},
 			]}

tests/mock.spec.js

@@ -70,7 +70,7 @@ test.describe('Blocknotes', () => {
 
 		await page.getByRole('button', { name: 'Notes' }).click();
 
-		await expect(page.getByRole('grid').getByRole('row')).toHaveText([
+		await expect(page.getByRole('row').locator('.note-title')).toHaveText([
 			'Untitled',
 		]);
 
@@ -82,7 +82,9 @@ test.describe('Blocknotes', () => {
 			canvas(page).getByRole('document', { name: 'Block: Paragraph' })
 		).toBeFocused();
 
-		await expect(page.getByRole('row')).toHaveText(['aa']);
+		await expect(page.getByRole('row').locator('.note-title')).toHaveText([
+			'aa',
+		]);
 
 		// Nothing should have been saved yet because saving is debounced.
 		expect(await getPaths(page)).toEqual([]);
@@ -123,7 +125,10 @@ test.describe('Blocknotes', () => {
 
 		await page.keyboard.type('b');
 
-		await expect(page.getByRole('row')).toHaveText(['b', 'aaaa']);
+		await expect(page.getByRole('row').locator('.note-title')).toHaveText([
+			'b',
+			'aaaa',
+		]);
 
 		// Immediately switch back to note A.
 		await page.getByRole('button', { name: 'aaaa' }).click();
@@ -216,7 +221,11 @@ test.describe('Blocknotes', () => {
 		await page.keyboard.type('2');
 
 		await notesButton.click();
-		await page.getByRole('row', { name: 'a' }).nth(1).click();
+		await page
+			.getByRole('row')
+			.locator('.note-title:text("a")')
+			.nth(1)
+			.click();
 
 		await expect(
 			canvas(page)