From 92e12e6efd4256dd75677f357c0a57d6c1007dab Mon Sep 17 00:00:00 2001 From: Rich Harris Date: Wed, 9 Oct 2024 21:54:47 -0400 Subject: [PATCH 01/10] remove zen mode icon --- .../src/routes/(authed)/playground/[id]/+page.svelte | 4 +--- .../routes/(authed)/playground/[id]/AppControls.svelte | 10 ---------- 2 files changed, 1 insertion(+), 13 deletions(-) diff --git a/apps/svelte.dev/src/routes/(authed)/playground/[id]/+page.svelte b/apps/svelte.dev/src/routes/(authed)/playground/[id]/+page.svelte index 2028702f46..998490d776 100644 --- a/apps/svelte.dev/src/routes/(authed)/playground/[id]/+page.svelte +++ b/apps/svelte.dev/src/routes/(authed)/playground/[id]/+page.svelte @@ -14,7 +14,6 @@ let repl = $state() as Repl; let name = $state(data.gist.name); - let zen_mode = $state(false); let modified_count = $state(0); let version = data.version; let setting_hash: any = null; @@ -130,7 +129,7 @@ }} /> -
+
diff --git a/apps/svelte.dev/src/routes/(authed)/playground/[id]/AppControls.svelte b/apps/svelte.dev/src/routes/(authed)/playground/[id]/AppControls.svelte index 376717dbcf..18f4ea4e8b 100644 --- a/apps/svelte.dev/src/routes/(authed)/playground/[id]/AppControls.svelte +++ b/apps/svelte.dev/src/routes/(authed)/playground/[id]/AppControls.svelte @@ -17,7 +17,6 @@ repl: Repl; gist: Gist; name: string; - zen_mode: boolean; modified_count: number; forked: (value: { gist: Gist }) => void; saved: () => void; @@ -25,7 +24,6 @@ let { name = $bindable(), - zen_mode = $bindable(), modified_count = $bindable(), user, repl, @@ -242,14 +240,6 @@ export default app;` />
- - From b63d7e16157ad39526c2284e0e9be809af17ea6c Mon Sep 17 00:00:00 2001 From: Rich Harris Date: Wed, 9 Oct 2024 21:58:04 -0400 Subject: [PATCH 02/10] move download button, tweak stuff --- .../routes/(authed)/playground/[id]/AppControls.svelte | 9 +++++---- packages/site-kit/src/lib/styles/base.css | 2 +- 2 files changed, 6 insertions(+), 5 deletions(-) diff --git a/apps/svelte.dev/src/routes/(authed)/playground/[id]/AppControls.svelte b/apps/svelte.dev/src/routes/(authed)/playground/[id]/AppControls.svelte index 18f4ea4e8b..49b6d85c50 100644 --- a/apps/svelte.dev/src/routes/(authed)/playground/[id]/AppControls.svelte +++ b/apps/svelte.dev/src/routes/(authed)/playground/[id]/AppControls.svelte @@ -240,10 +240,6 @@ export default app;` />
- - + + {#if user} {:else} @@ -333,6 +333,7 @@ export default app;` justify-content: center; width: 3.2rem; height: 3.2rem; + user-select: none; } .icon { diff --git a/packages/site-kit/src/lib/styles/base.css b/packages/site-kit/src/lib/styles/base.css index d66c8f0eda..c8ec8c3324 100644 --- a/packages/site-kit/src/lib/styles/base.css +++ b/packages/site-kit/src/lib/styles/base.css @@ -172,7 +172,7 @@ button[disabled] { } &:disabled { - border-color: transparent; + border-color: var(--sk-back-5); border-width: 1px; } } From 05727963a7c9ca7fbce4287d6c1c349ddd812ce1 Mon Sep 17 00:00:00 2001 From: Rich Harris Date: Wed, 9 Oct 2024 22:58:14 -0400 Subject: [PATCH 03/10] various --- .../src/lib/icons/download-dark.svg | 1 + .../src/lib/icons/download-light.svg | 1 + apps/svelte.dev/src/lib/icons/user-dark.svg | 1 + apps/svelte.dev/src/lib/icons/user-light.svg | 1 + .../playground/[id]/AppControls.svelte | 84 +++++++++++++++---- packages/site-kit/src/lib/styles/base.css | 3 +- packages/site-kit/src/lib/styles/tokens.css | 12 +-- 7 files changed, 79 insertions(+), 24 deletions(-) create mode 100644 apps/svelte.dev/src/lib/icons/download-dark.svg create mode 100644 apps/svelte.dev/src/lib/icons/download-light.svg create mode 100644 apps/svelte.dev/src/lib/icons/user-dark.svg create mode 100644 apps/svelte.dev/src/lib/icons/user-light.svg diff --git a/apps/svelte.dev/src/lib/icons/download-dark.svg b/apps/svelte.dev/src/lib/icons/download-dark.svg new file mode 100644 index 0000000000..b769ca5914 --- /dev/null +++ b/apps/svelte.dev/src/lib/icons/download-dark.svg @@ -0,0 +1 @@ + diff --git a/apps/svelte.dev/src/lib/icons/download-light.svg b/apps/svelte.dev/src/lib/icons/download-light.svg new file mode 100644 index 0000000000..a1f28e2b87 --- /dev/null +++ b/apps/svelte.dev/src/lib/icons/download-light.svg @@ -0,0 +1 @@ + diff --git a/apps/svelte.dev/src/lib/icons/user-dark.svg b/apps/svelte.dev/src/lib/icons/user-dark.svg new file mode 100644 index 0000000000..91402ad157 --- /dev/null +++ b/apps/svelte.dev/src/lib/icons/user-dark.svg @@ -0,0 +1 @@ + diff --git a/apps/svelte.dev/src/lib/icons/user-light.svg b/apps/svelte.dev/src/lib/icons/user-light.svg new file mode 100644 index 0000000000..05e1cd22cf --- /dev/null +++ b/apps/svelte.dev/src/lib/icons/user-light.svg @@ -0,0 +1 @@ + diff --git a/apps/svelte.dev/src/routes/(authed)/playground/[id]/AppControls.svelte b/apps/svelte.dev/src/routes/(authed)/playground/[id]/AppControls.svelte index 49b6d85c50..4b3bae56a0 100644 --- a/apps/svelte.dev/src/routes/(authed)/playground/[id]/AppControls.svelte +++ b/apps/svelte.dev/src/routes/(authed)/playground/[id]/AppControls.svelte @@ -240,7 +240,12 @@ export default app;` />
- - - + {#if user} {:else} - {/if}
@@ -342,18 +350,62 @@ export default app;` font-size: var(--sk-font-size-ui-small); color: var(--sk-text-3); line-height: 1; + background: 50% 50% no-repeat; + background-size: 1.8rem; + z-index: 999; + + &[aria-label]:hover::before { + content: ''; + width: 1rem; + height: 1rem; + position: absolute; + background: var(--sk-text-3); + top: calc(100% + 0.5rem); + rotate: 45deg; + } + + &[aria-label]:hover::after { + content: attr(aria-label); + position: absolute; + top: calc(100% + 1rem); + background: var(--sk-text-3); + color: var(--sk-back-4); + padding: 0.5em 0.5em; + border-radius: var(--sk-border-radius); + } + + &.login { + width: auto; + background-image: url($lib/icons/user-light.svg); + background-position: 0.4rem 50%; + padding: 0 0.4rem 0 2.8rem; + + :root.dark & { + background-image: url($lib/icons/user-dark.svg); + } + } + + &.download { + background-image: url($lib/icons/download-light.svg); + + :root.dark & { + background-image: url($lib/icons/download-dark.svg); + } + } } .icon:hover, .icon:focus-visible { opacity: 1; } + + /* TODO use lucide-svelte, so we don't need all this customisation? */ .icon:disabled { - opacity: 0.3; - } + color: #ccc; - .icon[title^='fullscreen'] { - display: none; + :root.dark & { + color: #555; + } } input { diff --git a/packages/site-kit/src/lib/styles/base.css b/packages/site-kit/src/lib/styles/base.css index c8ec8c3324..2ed0220d21 100644 --- a/packages/site-kit/src/lib/styles/base.css +++ b/packages/site-kit/src/lib/styles/base.css @@ -152,8 +152,7 @@ button { } button[disabled] { - opacity: 0.55; - pointer-events: none; + color: var(--sk-text-4); } .raised { diff --git a/packages/site-kit/src/lib/styles/tokens.css b/packages/site-kit/src/lib/styles/tokens.css index 8abaf52436..1753501a96 100644 --- a/packages/site-kit/src/lib/styles/tokens.css +++ b/packages/site-kit/src/lib/styles/tokens.css @@ -45,16 +45,16 @@ --sk-theme-2: hsl(var(--sk-theme-2-hsl)); --sk-back-1: hsl(0, 0%, 100%); - --sk-back-2: hsla(0, 0%, 100%, 1); - --sk-back-3: hsla(0, 0%, 99%, 1); + --sk-back-2: hsl(0, 0%, 100%); + --sk-back-3: hsl(0, 0%, 99%); --sk-back-4: hsl(0, 0%, 95%); --sk-back-5: hsl(0, 0%, 92%); --sk-back-6: hsl(0, 0%, 86%); - --sk-text-1: hsla(0, 0%, 0%, 0.95); - --sk-text-2: hsla(0, 0%, 0%, 0.88); - --sk-text-3: hsla(0, 0%, 0%, 0.73); - --sk-text-4: hsla(0, 0%, 0%, 0.55); + --sk-text-1: hsl(0 0 5); + --sk-text-2: hsl(0 0 12); + --sk-text-3: hsl(0 0 27); + --sk-text-4: hsl(0 0 45); --sk-scrollbar: rgba(0, 0, 0, 0.3); --sk-shadow: 0px 0px 14px rgba(0, 0, 0, 0.1); From 5b5f23fc57d696f63e76c82b7f6cf5c86915bccb Mon Sep 17 00:00:00 2001 From: Rich Harris Date: Wed, 9 Oct 2024 23:18:39 -0400 Subject: [PATCH 04/10] tweaks --- .../(authed)/playground/[id]/UserMenu.svelte | 54 +++++++------------ 1 file changed, 20 insertions(+), 34 deletions(-) diff --git a/apps/svelte.dev/src/routes/(authed)/playground/[id]/UserMenu.svelte b/apps/svelte.dev/src/routes/(authed)/playground/[id]/UserMenu.svelte index 87b10cc8ff..916db6ae34 100644 --- a/apps/svelte.dev/src/routes/(authed)/playground/[id]/UserMenu.svelte +++ b/apps/svelte.dev/src/routes/(authed)/playground/[id]/UserMenu.svelte @@ -1,16 +1,15 @@ -
(showMenu = false)} > {#if showMenu}
Your saved apps - +
{/if}
@@ -41,14 +40,13 @@ .user { position: relative; display: inline-block; - padding: 0em 0 0 0.3rem; + padding: 0em 0 0 0.4rem; z-index: 99; } .trigger { display: flex; align-items: center; - gap: 0.75rem; outline-offset: 2px; transform: translateY(0.1rem); --opacity: 0.7; @@ -61,23 +59,27 @@ } .name { - line-height: 1; display: none; font-family: var(--sk-font-ui); - font-size: 1.6rem; + font-size: var(--sk-font-size-ui-small); } - .name, - .trigger :global(.icon) { + .name { display: none; opacity: var(--opacity); + + @media (min-width: 600px) { + display: inline-block; + margin-right: 0.3rem; + } } img { - width: 2.1rem; - height: 2.1rem; + width: 2.3rem; + height: 2.3rem; + margin: 0 0.2rem 0 0.3rem; border: 1px solid rgba(255, 255, 255, 0.3); - border-radius: 0.2rem; + border-radius: var(--sk-border-radius); transform: translateY(-0.1rem); } @@ -116,20 +118,4 @@ opacity: 1; color: inherit; } - - @media (min-width: 600px) { - .user { - padding: 0em 0 0 1.6rem; - } - - img { - width: 2.4rem; - height: 2.4rem; - } - - .name, - .trigger :global(.icon) { - display: inline-block; - } - } From aaf40f8634ea9f69b1c5db45fe6f9d1af61e6bec Mon Sep 17 00:00:00 2001 From: Rich Harris Date: Wed, 9 Oct 2024 23:20:19 -0400 Subject: [PATCH 05/10] tweak --- .../src/routes/(authed)/playground/[id]/UserMenu.svelte | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/apps/svelte.dev/src/routes/(authed)/playground/[id]/UserMenu.svelte b/apps/svelte.dev/src/routes/(authed)/playground/[id]/UserMenu.svelte index 916db6ae34..0b8ae154b5 100644 --- a/apps/svelte.dev/src/routes/(authed)/playground/[id]/UserMenu.svelte +++ b/apps/svelte.dev/src/routes/(authed)/playground/[id]/UserMenu.svelte @@ -25,7 +25,7 @@ > {name} {name} avatar - + {#if showMenu} From 457a2f237b4df431884c050bbd5c0fb207ce25da Mon Sep 17 00:00:00 2001 From: Rich Harris Date: Wed, 9 Oct 2024 23:53:00 -0400 Subject: [PATCH 06/10] share some code --- .../(authed)/playground/[id]/UserMenu.svelte | 86 +++---------------- .../src/lib/components/Dropdown.svelte | 78 +++++++++++++++++ .../src/lib/components/LinksDropdown.svelte | 50 ++--------- packages/site-kit/src/lib/components/index.ts | 1 + packages/site-kit/src/lib/nav/Nav.svelte | 44 ++++++---- 5 files changed, 123 insertions(+), 136 deletions(-) create mode 100644 packages/site-kit/src/lib/components/Dropdown.svelte diff --git a/apps/svelte.dev/src/routes/(authed)/playground/[id]/UserMenu.svelte b/apps/svelte.dev/src/routes/(authed)/playground/[id]/UserMenu.svelte index 0b8ae154b5..98e53d1dbc 100644 --- a/apps/svelte.dev/src/routes/(authed)/playground/[id]/UserMenu.svelte +++ b/apps/svelte.dev/src/routes/(authed)/playground/[id]/UserMenu.svelte @@ -1,6 +1,5 @@ -
(showMenu = false)} - use:click_outside={() => (showMenu = false)} -> - +
- {#if showMenu} -
- Your saved apps - -
- {/if} -
+ {#snippet dropdown()} + Your saved apps + + {/snippet} + diff --git a/packages/site-kit/src/lib/components/Dropdown.svelte b/packages/site-kit/src/lib/components/Dropdown.svelte new file mode 100644 index 0000000000..d0f7674bb0 --- /dev/null +++ b/packages/site-kit/src/lib/components/Dropdown.svelte @@ -0,0 +1,78 @@ + + +
+ {@render children()} + + +
+ + diff --git a/packages/site-kit/src/lib/components/LinksDropdown.svelte b/packages/site-kit/src/lib/components/LinksDropdown.svelte index 9d1e5bc3a5..0fe4290a52 100644 --- a/packages/site-kit/src/lib/components/LinksDropdown.svelte +++ b/packages/site-kit/src/lib/components/LinksDropdown.svelte @@ -1,11 +1,12 @@ -
+ - -
- - + {/snippet} + diff --git a/packages/site-kit/src/lib/components/index.ts b/packages/site-kit/src/lib/components/index.ts index a02bd7901a..c1476449f3 100644 --- a/packages/site-kit/src/lib/components/index.ts +++ b/packages/site-kit/src/lib/components/index.ts @@ -1,4 +1,5 @@ export { default as Banners, defineBanner, fetchBanner } from './Banners.svelte'; +export { default as Dropdown } from './Dropdown.svelte'; export { default as Icon } from './Icon.svelte'; export { default as Icons } from './Icons.svelte'; export { default as Section } from './Section.svelte'; diff --git a/packages/site-kit/src/lib/nav/Nav.svelte b/packages/site-kit/src/lib/nav/Nav.svelte index a001b5e437..4135fd12e4 100644 --- a/packages/site-kit/src/lib/nav/Nav.svelte +++ b/packages/site-kit/src/lib/nav/Nav.svelte @@ -176,30 +176,36 @@ Top navigation bar for the application. It provides a slot for the left side, th position: relative; display: flex; width: 100%; - } - .menu :global(a) { - color: var(--sk-text-2); - line-height: 1; - font-size: var(--sk-font-size-ui-medium); - padding: 0.1rem 0.5rem 0 0.5rem; - white-space: nowrap; - height: 100%; - display: flex; - align-items: center; - text-decoration: none; - outline-offset: -2px; + :global { + a { + color: var(--sk-text-2); + line-height: 1; + font-size: var(--sk-font-size-ui-medium); + + white-space: nowrap; + height: 100%; + display: flex; + align-items: center; + text-decoration: none; + outline-offset: -2px; + + &:hover { + box-shadow: inset 0 -1px 0 0 var(--sk-back-5); + } + + &[aria-current='page'] { + color: var(--sk-theme-1); + box-shadow: inset 0 -1px 0 0 currentColor; + } + } - &:hover { - box-shadow: inset 0 -1px 0 0 var(--sk-back-5); + & > a { + padding: 0.1rem 0.5rem 0 0.5rem; + } } } - .menu :global(a[aria-current='page']) { - color: var(--sk-theme-1); - box-shadow: inset 0 -1px 0 0 currentColor; - } - .home-link { --padding-right: 1rem; width: 16rem; From ed650baa16fcba90b092789aea12a26ee9bc642b Mon Sep 17 00:00:00 2001 From: Rich Harris Date: Thu, 10 Oct 2024 08:03:46 -0400 Subject: [PATCH 07/10] tweak badge --- .../playground/[id]/AppControls.svelte | 31 +++++-------------- 1 file changed, 7 insertions(+), 24 deletions(-) diff --git a/apps/svelte.dev/src/routes/(authed)/playground/[id]/AppControls.svelte b/apps/svelte.dev/src/routes/(authed)/playground/[id]/AppControls.svelte index 4b3bae56a0..95742bf274 100644 --- a/apps/svelte.dev/src/routes/(authed)/playground/[id]/AppControls.svelte +++ b/apps/svelte.dev/src/routes/(authed)/playground/[id]/AppControls.svelte @@ -264,7 +264,7 @@ export default app;` {:else} {#if modified_count} -
{modified_count}
+ {/if} {/if} @@ -421,30 +421,13 @@ export default app;` font-size: var(--sk-font-size-ui-medium); } - button span { - display: none; - } - .badge { - background: #ff3e00; - border-radius: 100%; - font-size: 10px; - padding: 0; - width: 15px; - height: 15px; - line-height: 15px; position: absolute; - top: 10px; - right: 0px; - } - - @media (min-width: 600px) { - .icon[title^='fullscreen'] { - display: inline; - } - - button span { - display: inline-block; - } + background: var(--sk-theme-1); + border-radius: 50%; + width: 1rem; + height: 1rem; + top: -0.2rem; + right: -0.2rem; } From a688c5ed4d67f0f3c885fdb41f986686dd3163c2 Mon Sep 17 00:00:00 2001 From: Rich Harris Date: Thu, 10 Oct 2024 08:06:57 -0400 Subject: [PATCH 08/10] better tooltip --- .../src/routes/(authed)/playground/[id]/AppControls.svelte | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) diff --git a/apps/svelte.dev/src/routes/(authed)/playground/[id]/AppControls.svelte b/apps/svelte.dev/src/routes/(authed)/playground/[id]/AppControls.svelte index 95742bf274..561efbf0d5 100644 --- a/apps/svelte.dev/src/routes/(authed)/playground/[id]/AppControls.svelte +++ b/apps/svelte.dev/src/routes/(authed)/playground/[id]/AppControls.svelte @@ -10,6 +10,7 @@ import { get_app_context } from '../../app-context'; import type { Gist, User } from '$lib/db/types'; import type { File } from '@sveltejs/repl'; + import { browser } from '$app/environment'; interface Props { examples: Array<{ title: string; examples: any[] }>; @@ -257,7 +258,9 @@ export default app;` class="raised icon" disabled={saving || !user} onclick={save} - aria-label={user ? 'save' : 'log in to save'} + aria-label={user + ? `save (${browser && navigator.platform === 'MacIntel' ? '⌘' : 'Ctrl'}+S)` + : 'log in to save'} > {#if justSaved} From 59a95a377ee03943de2ef77af43a1354e78de1e1 Mon Sep 17 00:00:00 2001 From: Rich Harris Date: Thu, 10 Oct 2024 08:25:52 -0400 Subject: [PATCH 09/10] show modified icon when editing title as well --- .../(authed)/playground/[id]/+page.svelte | 14 +++--- .../playground/[id]/AppControls.svelte | 43 ++++++++++++++----- 2 files changed, 39 insertions(+), 18 deletions(-) diff --git a/apps/svelte.dev/src/routes/(authed)/playground/[id]/+page.svelte b/apps/svelte.dev/src/routes/(authed)/playground/[id]/+page.svelte index 998490d776..9285c051ce 100644 --- a/apps/svelte.dev/src/routes/(authed)/playground/[id]/+page.svelte +++ b/apps/svelte.dev/src/routes/(authed)/playground/[id]/+page.svelte @@ -14,7 +14,7 @@ let repl = $state() as Repl; let name = $state(data.gist.name); - let modified_count = $state(0); + let modified = $state(false); let version = data.version; let setting_hash: any = null; @@ -90,12 +90,12 @@ } function handle_change({ files }: { files: File[] }) { - const old_count = modified_count; - modified_count = files.filter((c) => c.modified).length; + const was_modified = modified; + modified = files.some((c) => c.modified); if ( - old_count === 0 && - modified_count > 0 && + !was_modified && + modified && name === data.gist.name && data.examples.some((section) => section.examples.some((example) => example.slug === data.gist.id) @@ -138,7 +138,7 @@ saved={handle_save} {repl} bind:name - bind:modified_count + bind:modified /> {#if browser} @@ -156,7 +156,7 @@ remove={handle_change} blur={() => { // Only change hash on editor blur to not pollute everyone's browser history - if (modified_count !== 0) { + if (modified) { const json = JSON.stringify({ files: repl.toJSON().files }); change_hash(json); } diff --git a/apps/svelte.dev/src/routes/(authed)/playground/[id]/AppControls.svelte b/apps/svelte.dev/src/routes/(authed)/playground/[id]/AppControls.svelte index 561efbf0d5..04e54fa6b2 100644 --- a/apps/svelte.dev/src/routes/(authed)/playground/[id]/AppControls.svelte +++ b/apps/svelte.dev/src/routes/(authed)/playground/[id]/AppControls.svelte @@ -18,14 +18,14 @@ repl: Repl; gist: Gist; name: string; - modified_count: number; + modified: boolean; forked: (value: { gist: Gist }) => void; saved: () => void; } let { name = $bindable(), - modified_count = $bindable(), + modified = $bindable(), user, repl, gist, @@ -40,6 +40,7 @@ let downloading = $state(false); let justSaved = $state(false); let justForked = $state(false); + let select: HTMLSelectElement; function wait(ms: number) { return new Promise((f) => setTimeout(f, ms)); @@ -83,7 +84,7 @@ const gist = await r.json(); forked({ gist }); - modified_count = 0; + modified = false; repl.markSaved(); if (intentWasSave) { @@ -145,7 +146,7 @@ throw new Error(`Received an HTTP ${r.status} response: ${error}`); } - modified_count = 0; + modified = false; repl.markSaved(); saved(); justSaved = true; @@ -208,6 +209,14 @@ export default app;` downloading = false; } + + // TODO modifying an app should reset the ` { - goto(`/playground/${(e.target as HTMLSelectElement).value}`); + onchange={(e) => { + const slug = e.currentTarget.value; + + if (location.pathname === `/playground/${slug}`) { + // TODO reset + } + + goto(`/playground/${slug}`); }} > @@ -236,6 +252,7 @@ export default app;` (modified = true)} onfocus={(e) => e.currentTarget.select()} use:enter={(e) => (e.currentTarget as HTMLInputElement).blur()} /> @@ -266,7 +283,7 @@ export default app;` {:else} - {#if modified_count} + {#if modified} {/if} {/if} @@ -320,11 +337,15 @@ export default app;` .examples-select { position: relative; - } - .examples-select:has(select:focus-visible) .raised.icon { - outline: 2px solid hsla(var(--sk-theme-1-hsl), 0.6); - border-radius: var(--sk-border-radius); + &:has(select:focus-visible) .raised.icon { + outline: 2px solid hsla(var(--sk-theme-1-hsl), 0.6); + border-radius: var(--sk-border-radius); + } + + span { + pointer-events: none; + } } select { From e3728ed00e6f9272446acfc773cfc1063344ffe1 Mon Sep 17 00:00:00 2001 From: Rich Harris Date: Thu, 10 Oct 2024 08:43:38 -0400 Subject: [PATCH 10/10] fix reselecting existing example --- .../src/routes/(authed)/playground/[id]/+page.svelte | 2 +- .../(authed)/playground/[id]/AppControls.svelte | 12 +++--------- 2 files changed, 4 insertions(+), 10 deletions(-) diff --git a/apps/svelte.dev/src/routes/(authed)/playground/[id]/+page.svelte b/apps/svelte.dev/src/routes/(authed)/playground/[id]/+page.svelte index 9285c051ce..f976ff6677 100644 --- a/apps/svelte.dev/src/routes/(authed)/playground/[id]/+page.svelte +++ b/apps/svelte.dev/src/routes/(authed)/playground/[id]/+page.svelte @@ -50,7 +50,7 @@ if (!hash) { repl?.set({ - files: data.gist.components + files: structuredClone(data.gist.components) }); return; diff --git a/apps/svelte.dev/src/routes/(authed)/playground/[id]/AppControls.svelte b/apps/svelte.dev/src/routes/(authed)/playground/[id]/AppControls.svelte index 04e54fa6b2..dd3989b660 100644 --- a/apps/svelte.dev/src/routes/(authed)/playground/[id]/AppControls.svelte +++ b/apps/svelte.dev/src/routes/(authed)/playground/[id]/AppControls.svelte @@ -210,8 +210,8 @@ export default app;` downloading = false; } - // TODO modifying an app should reset the ``, so that + // the example can be reselected $effect(() => { if (modified) { select.value = ''; @@ -229,13 +229,7 @@ export default app;` title="examples" value={gist.id} onchange={(e) => { - const slug = e.currentTarget.value; - - if (location.pathname === `/playground/${slug}`) { - // TODO reset - } - - goto(`/playground/${slug}`); + goto(`/playground/${e.currentTarget.value}`); }} >