From 0532e403bf9b6247c6c35fe42cca6d0cdffe18f9 Mon Sep 17 00:00:00 2001 From: Sidharth Vinod Date: Thu, 13 Mar 2025 13:01:47 -0700 Subject: [PATCH] feat: Add history section --- components.json | 30 ++--- package.json | 1 + src/lib/components/Card/Tabs.svelte | 4 +- src/lib/components/History/History.svelte | 126 +++++++++++---------- src/lib/components/History/history.ts | 10 +- src/lib/components/Navbar.svelte | 14 ++- src/lib/components/ui/sonner/index.ts | 1 + src/lib/components/ui/sonner/sonner.svelte | 20 ++++ src/lib/util/notify.ts | 4 +- src/lib/util/panZoom.ts | 3 + src/routes/+layout.svelte | 4 + src/routes/edit/+page.svelte | 58 ++++++++-- yarn.lock | 5 + 13 files changed, 182 insertions(+), 98 deletions(-) create mode 100644 src/lib/components/ui/sonner/index.ts create mode 100644 src/lib/components/ui/sonner/sonner.svelte diff --git a/components.json b/components.json index 4398a0f7..b4b4758a 100644 --- a/components.json +++ b/components.json @@ -1,17 +1,17 @@ { - "$schema": "https://next.shadcn-svelte.com/schema.json", - "style": "new-york", - "tailwind": { - "config": "tailwind.config.js", - "css": "src/app.postcss", - "baseColor": "slate" - }, - "aliases": { - "components": "$lib/components", - "utils": "$lib/utils", - "ui": "$lib/components/ui", - "hooks": "$lib/hooks" - }, - "typescript": true, - "registry": "https://next.shadcn-svelte.com/registry" + "$schema": "https://next.shadcn-svelte.com/schema.json", + "style": "new-york", + "tailwind": { + "config": "tailwind.config.js", + "css": "src/app.postcss", + "baseColor": "slate" + }, + "aliases": { + "components": "$lib/components", + "utils": "$lib/utils", + "ui": "$lib/components/ui", + "hooks": "$lib/hooks" + }, + "typescript": true, + "registry": "https://next.shadcn-svelte.com/registry" } diff --git a/package.json b/package.json index e2f3d211..fac19765 100644 --- a/package.json +++ b/package.json @@ -69,6 +69,7 @@ "prettier-plugin-tailwindcss": "^0.6.0", "svelte": "^5.0.0", "svelte-preprocess": "^6.0.0", + "svelte-sonner": "^0.3.28", "tailwind-merge": "^3.0.2", "tailwind-variants": "^0.3.1", "tailwindcss": "^3.4.1", diff --git a/src/lib/components/Card/Tabs.svelte b/src/lib/components/Card/Tabs.svelte index 92772be5..d945499e 100644 --- a/src/lib/components/Card/Tabs.svelte +++ b/src/lib/components/Card/Tabs.svelte @@ -33,7 +33,9 @@ + onclick={uploadHistory} + title="Upload history"> {#if $historyStore.length > 0} - + size="icon" + variant="ghost" + onclick={downloadHistory} + title="Download history"> {/if} - | - + size="icon" + variant="ghost" + onclick={() => saveHistory()} + title="Save current state"> {#if $historyModeStore !== 'loader'} - + size="icon" + variant="ghost" + class="hover:text-destructive" + onclick={() => clearHistory()} + title="Delete all saved states"> {/if} {/snippet} -
    +
      {#if $historyStore.length > 0} - {#each $historyStore as { id, state, time, name, url, type }} -
    • -
      -
      -
      - {#if url} - {name} - {:else} - {name} - {/if} - {relativeTime(time)} -
      + {#each $historyStore as { id, state, time, name, url, type } (id)} +
    • +
      +
      + {#if url} + {name} + {:else} + {name} + {/if} + + {new Date(time).toLocaleString()} +
      -
      - + +
      + + {dayjs(time).fromNow()} + + {#if type !== 'loader'} - + {/if}
      +
      • {/each} {:else} diff --git a/src/lib/components/History/history.ts b/src/lib/components/History/history.ts index 97cf5ea4..8965def3 100644 --- a/src/lib/components/History/history.ts +++ b/src/lib/components/History/history.ts @@ -1,10 +1,10 @@ -import { derived, writable, get } from 'svelte/store'; -import type { Readable, Writable } from 'svelte/store'; -import { persist, localStorage } from '$lib/util/persist'; -import { generateSlug } from 'random-word-slugs'; import type { HistoryEntry, HistoryType, Optional } from '$lib/types'; -import { v4 as uuidV4 } from 'uuid'; +import { localStorage, persist } from '$lib/util/persist'; import { logEvent } from '$lib/util/stats'; +import { generateSlug } from 'random-word-slugs'; +import type { Readable, Writable } from 'svelte/store'; +import { derived, get, writable } from 'svelte/store'; +import { v4 as uuidV4 } from 'uuid'; const MAX_AUTO_HISTORY_LENGTH = 30; diff --git a/src/lib/components/Navbar.svelte b/src/lib/components/Navbar.svelte index e4add60c..d0f81e17 100644 --- a/src/lib/components/Navbar.svelte +++ b/src/lib/components/Navbar.svelte @@ -15,13 +15,19 @@ import { stateStore } from '$lib/util/state'; import { MCBaseURL } from '$lib/util/util'; import { toggleMode } from 'mode-watcher'; - import type { ComponentProps } from 'svelte'; + import type { ComponentProps, Snippet } from 'svelte'; import GithubIcon from '~icons/fa-brands/github'; import CloseIcon from '~icons/fa/close'; import MoonIcon from '~icons/fa6-solid/moon'; import SunIcon from '~icons/fa6-solid/sun'; import DropdownNavMenu from './DropdownNavMenu.svelte'; + interface Props { + children: Snippet; + } + + let { children }: Props = $props(); + const { isEnabledMermaidChartLinks } = env; let isMenuOpen = $state(false); @@ -185,11 +191,7 @@ class="absolute rotate-90 scale-0 transition-all duration-200 dark:rotate-0 dark:scale-100" /> Toggle theme - - {#if isEnabledMermaidChartLinks} - - {/if} + {@render children()} diff --git a/src/lib/components/ui/sonner/index.ts b/src/lib/components/ui/sonner/index.ts new file mode 100644 index 00000000..1ad9f4a2 --- /dev/null +++ b/src/lib/components/ui/sonner/index.ts @@ -0,0 +1 @@ +export { default as Toaster } from "./sonner.svelte"; diff --git a/src/lib/components/ui/sonner/sonner.svelte b/src/lib/components/ui/sonner/sonner.svelte new file mode 100644 index 00000000..8050e049 --- /dev/null +++ b/src/lib/components/ui/sonner/sonner.svelte @@ -0,0 +1,20 @@ + + + diff --git a/src/lib/util/notify.ts b/src/lib/util/notify.ts index 3c9e6ded..5c1c7023 100644 --- a/src/lib/util/notify.ts +++ b/src/lib/util/notify.ts @@ -1,5 +1,7 @@ +import { toast } from 'svelte-sonner'; + export const notify = (message: string): void => { - alert(message); + toast(message); }; export const prompt = (message: string): boolean => { diff --git a/src/lib/util/panZoom.ts b/src/lib/util/panZoom.ts index eca92c18..c73a0911 100644 --- a/src/lib/util/panZoom.ts +++ b/src/lib/util/panZoom.ts @@ -86,6 +86,9 @@ export class PanZoomState { public resize() { this.pzoom?.resize(); + if (!this.isDirty) { + this.reset(); + } } public zoomIn() { diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte index ace4e9df..64aa29bb 100644 --- a/src/routes/+layout.svelte +++ b/src/routes/+layout.svelte @@ -1,10 +1,12 @@ + +
      {@render children?.()}
      diff --git a/src/routes/edit/+page.svelte b/src/routes/edit/+page.svelte index 7ab14479..74d654f2 100644 --- a/src/routes/edit/+page.svelte +++ b/src/routes/edit/+page.svelte @@ -1,9 +1,12 @@
      - + + + + + + {#if env.isEnabledMermaidChartLinks} + + {/if} +