History

package.json

@@ -37,7 +37,9 @@
     "cookie": "^0.4.1",
     "js-base64": "^3.6.0",
     "mermaid": "^8.9.3",
+    "moment": "^2.29.1",
     "monaco-editor": "^0.23.0",
+    "random-word-slugs": "^0.0.2",
     "svelte-watch-resize": "^1.0.3"
   }
 }

src/global.d.ts

@@ -27,6 +27,6 @@ interface State {
 interface HistoryEntry {
 	state: State;
 	time: number;
-	name: string;
+	name?: string;
 	auto: boolean;
 }

src/lib/components/history/history.ts

@@ -1,5 +1,6 @@
 import { derived, Readable, Writable, writable, get } from 'svelte/store';
 import { persist, localStorage } from '@macfja/svelte-persistent-store';
+import { generateSlug } from 'random-word-slugs';
 
 const MAX_AUTO_HISTORY_LENGTH = 10;
 
@@ -25,6 +26,8 @@ export const historyStore: Readable<HistoryEntry[]> = derived(
 	}
 );
 export const addHistoryEntry = (entry: HistoryEntry): void => {
+	entry.name = generateSlug(2);
+
 	if (!entry.auto) {
 		manualHistoryStore.update((entries) => [entry, ...entries]);
 		return;

src/lib/components/history/index.svelte

@@ -11,6 +11,7 @@
 	} from './history';
 	import { notify, prompt } from '$lib/util/notify';
 	import { onMount } from 'svelte';
+	import moment from 'moment';
 
 	const HISTORY_SAVE_INTERVAL: number = 1000;
 
@@ -35,7 +36,6 @@
 			addHistoryEntry({
 				state: $codeStore,
 				time: Date.now(),
-				name: 'test',
 				auto
 			});
 		} else if (!auto) {
@@ -54,6 +54,11 @@
 		codeStore.set({ ...state, updateEditor: true, updateDiagram: true });
 	};
 
+	const relativeTime = (time: number) => {
+		const t = new Date(time);
+		return `${new Date(t).toLocaleString()} (${moment(t).fromNow()})`;
+	};
+
 	onMount(() => {
 		autoHistoryMode.set(false);
 		setInterval(() => {
@@ -62,7 +67,7 @@
 	});
 </script>
 
-<Card class="h-64">
+<Card class="h-52">
 	<div slot="title" class="flex justify-between">
 		<div class="flex">
 			<Tabs on:select={tabSelectHandler} {tabs} title="History" />
@@ -78,11 +83,23 @@
 	</div>
 	<ul class="p-2 space-y-2 overflow-auto">
 		{#each $historyStore as { state, time, name }}
-			<li class="rounded p-2 shadow block">
-				{new Date(time)}
-				{name}
-				<button on:click={() => restoreHistory(state)}>Restore</button>
-				<button on:click={() => clearHistory(time)}>Delete</button>
+			<li class="rounded p-2 shadow flex-col">
+				<div class="flex">
+					<div class="flex-1">
+						<div class="flex flex-col">
+							<span>{name}</span>
+						</div>
+					</div>
+					<div class="flex gap-2 content-center">
+						<button class="rounded px-2 bg-green-200" on:click={() => restoreHistory(state)}
+							>Restore</button
+						>
+						<button class="rounded px-2 bg-red-200" on:click={() => clearHistory(time)}
+							>Delete</button
+						>
+					</div>
+				</div>
+				<span class="text-gray-400 text-sm">{relativeTime(time)}</span>
 			</li>
 		{/each}
 	</ul>

yarn.lock

@@ -1835,6 +1835,11 @@ moment-mini@^2.22.1:
   resolved "https://registry.yarnpkg.com/moment-mini/-/moment-mini-2.24.0.tgz#fa68d98f7fe93ae65bf1262f6abb5fb6983d8d18"
   integrity sha512-9ARkWHBs+6YJIvrIp0Ik5tyTTtP9PoV0Ssu2Ocq5y9v8+NOOpWiRshAp8c4rZVWTOe+157on/5G+zj5pwIQFEQ==
 
+moment@^2.29.1:
+  version "2.29.1"
+  resolved "https://registry.yarnpkg.com/moment/-/moment-2.29.1.tgz#b2be769fa31940be9eeea6469c075e35006fa3d3"
+  integrity sha512-kHmoybcPV8Sqy59DwNDY3Jefr64lK/by/da0ViFcuA4DH0vQg5Q6Ze5VimxkfQNSC+Mls/Kx53s7TjP1RhFEDQ==
+
 monaco-editor@^0.23.0:
   version "0.23.0"
   resolved "https://registry.yarnpkg.com/monaco-editor/-/monaco-editor-0.23.0.tgz#24844ba5640c7adb3a2a3ff3b520cf2d7170a6f0"
@@ -2324,6 +2329,11 @@ quick-lru@^5.1.1:
   resolved "https://registry.yarnpkg.com/quick-lru/-/quick-lru-5.1.1.tgz#366493e6b3e42a3a6885e2e99d18f80fb7a8c932"
   integrity sha512-WuyALRjWPDGtt/wzJiadO5AXY+8hZ80hVpe6MyivgraREW751X3SbhRvG3eLKOYN+8VEvqLcf3wdnt44Z4S4SA==
 
+random-word-slugs@^0.0.2:
+  version "0.0.2"
+  resolved "https://registry.yarnpkg.com/random-word-slugs/-/random-word-slugs-0.0.2.tgz#d725a85f638da0f4f9872ec6b6d0635f88e0a62c"
+  integrity sha512-vKwx5X94uBZqTZbCyHiYghyU1B7qbodY8dqTbaarQnT/boqD9KreKV0z7iUZqauQFuETTxdHWsm75EUOjUHC5A==
+
 readdirp@~3.5.0:
   version "3.5.0"
   resolved "https://registry.yarnpkg.com/readdirp/-/readdirp-3.5.0.tgz#9ba74c019b15d365278d2e91bb8c48d7b4d42c9e"