Misc

src/lib/Util/state.ts

@@ -37,7 +37,9 @@ export const loadState = (data: string): void => {
 };
 
 export const updateCodeStore = (newState: State): void => {
-	codeStore.set(newState);
+	codeStore.update((state) => {
+		return { ...state, ...newState };
+	});
 };
 
 export const updateCode = (code: string, updateEditor: boolean): void => {

src/lib/Util/util.ts

@@ -1,10 +1,17 @@
-import { initURLSubscription, loadState } from './state';
+import { initURLSubscription, loadState, updateCodeStore } from './state';
 
 export const loadStateFromURL = (): void => {
 	loadState(window.location.hash.slice(1));
 };
 
+export const syncDiagram = (): void => {
+	updateCodeStore({
+		updateDiagram: true
+	} as State);
+};
+
 export const initHandler = (): void => {
 	loadStateFromURL();
+	syncDiagram();
 	initURLSubscription();
 };

src/lib/components/actions.svelte

@@ -120,7 +120,7 @@
 	});
 </script>
 
-<Card title="Actions" isOpen={true}>
+<Card title="Actions" isOpen={false}>
 	<div class="flex flex-wrap gap-2 m-2">
 		{#if isClipboardAvailable()}
 			<button class="btn w-full" on:click={onCopyClipboard}> 📋 Copy Image </button>

src/lib/components/card/card.svelte

@@ -16,7 +16,7 @@
 	<div class="bg-indigo-400 border-gray-400 p-2 flex-none" on:click={() => (isOpen = !isOpen)}>
 		<div class="flex justify-between">
 			<Tabs on:select {tabs} bind:isOpen {title} {isCloseable} />
-			<div class="flex gap-x-4 text-white">
+			<div class="flex gap-x-4 items-center text-white">
 				<slot name="actions" />
 			</div>
 		</div>

src/lib/components/card/tabs.svelte

@@ -16,7 +16,7 @@
 </script>
 
 <div class="flex cursor-default">
-	<span class="text-white mr-2" on:click|stopPropagation={() => (isOpen = !isOpen)}>
+	<span class="text-white mr-2 font-semibold" on:click|stopPropagation={() => (isOpen = !isOpen)}>
 		{#if isCloseable}
 			<svg
 				class="inline"
@@ -38,11 +38,11 @@
 		{/if}
 		{title}</span>
 	{#if isOpen && tabs}
-		<ul class="flex list-none flex-wrap flex-row" transition:fade>
+		<ul class="flex flex-wrap flex-row" transition:fade>
 			{#each tabs as tab}
-				<li class="mr-2 last:mr-0 flex-auto text-center">
+				<li class="mr-2 last:mr-0 w-28 flex-auto text-center">
 					<div
-						class="text cursor-pointer font-bold min-w-16 w-auto px-2 py-1 -mb-4 rounded-t  block leading-normal {activeTabID ===
+						class="text cursor-pointer font-semibold min-w-16 w-auto px-2 py-1 -mb-4 rounded-t  block leading-normal {activeTabID ===
 						tab.id
 							? 'text-indigo-500 bg-white border-white'
 							: 'text-white bg-indigo-500 border-indigo-500'}"

src/lib/components/history/history.svelte

@@ -10,7 +10,7 @@
 	} from './history';
 	import { notify, prompt } from '$lib/util/notify';
 	import { onMount } from 'svelte';
-	import moment from 'moment';
+	import moment, { lang } from 'moment';
 
 	const HISTORY_SAVE_INTERVAL: number = 60000;
 
@@ -70,12 +70,8 @@
 
 <Card on:select={tabSelectHandler} bind:isOpen {tabs} title="History">
 	<div slot="actions">
-		<button
-			class="bg-yellow-500 hover:bg-yellow-700 rounded px-1"
-			on:click|stopPropagation={() => saveHistory()}>💾</button>
-		<button
-			class="bg-yellow-500 hover:bg-yellow-700 rounded px-1"
-			on:click|stopPropagation={() => clearHistory()}>❌</button>
+		<button class="btn" on:click|stopPropagation={() => saveHistory()}>💾</button>
+		<button class="btn" on:click|stopPropagation={() => clearHistory()}>❌</button>
 	</div>
 	<ul class="p-2 space-y-2 overflow-auto h-56">
 		{#each $historyStore as { state, time, name }}
@@ -98,3 +94,9 @@
 		{/each}
 	</ul>
 </Card>
+
+<style lang="postcss">
+	.btn {
+		@apply bg-indigo-500 hover:bg-indigo-700 rounded px-1 shadow;
+	}
+</style>

src/lib/components/history/history.ts

@@ -2,7 +2,7 @@ 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;
+const MAX_AUTO_HISTORY_LENGTH = 30;
 
 export const autoHistoryMode: Writable<boolean> = persist(
 	writable(true),

src/routes/edit.svelte

@@ -7,7 +7,7 @@
 	import Card from '$lib/components/card/card.svelte';
 	import History from '$lib/components/history/history.svelte';
 	import { updateCode, updateConfig, codeStore, base64State } from '$lib/util/state';
-	import { initHandler } from '$lib/util/util';
+	import { initHandler, syncDiagram } from '$lib/util/util';
 	import { errorStore } from '$lib/util/error';
 	import { onMount } from 'svelte';
 	import type monaco from 'monaco-editor';
@@ -58,10 +58,6 @@
 		updateConfig(config, false);
 	};
 
-	const syncDiagram = () => {
-		$codeStore.updateDiagram = true;
-	};
-
 	const updateHandler = async (message: CustomEvent<EditorUpdateEvent>) => {
 		try {
 			if (selectedMode === 'code') {
@@ -108,8 +104,9 @@
 			<Card on:select={tabSelectHandler} {tabs} isCloseable={false} title="Mermaid">
 				<div slot="actions">
 					{#if !$codeStore.autoSync}
-						<button class="bg-indigo-500 hover:bg-indigo-700 rounded px-1" on:click={syncDiagram}
-							>🔄</button>
+						<button
+							class="bg-indigo-500 hover:bg-indigo-700 rounded px-1 mx-2"
+							on:click={syncDiagram}>🔄</button>
 					{/if}
 					<label for="autoSync">
 						<input type="checkbox" name="autoSync" bind:checked={$codeStore.autoSync} />