Mirroristas/pockethost
2
0
Fork 0
mirror of https://github.com/pockethost/pockethost.git synced 2025-09-13 04:00:11 +00:00
Code Issues Packages Projects Releases Wiki Activity

dashbaord: dev mode pulse

Browse Source
This commit is contained in:
Ben Allfree 2024-12-04 03:27:57 -08:00
parent ea113a9cfe
commit 148e7bb954
2 changed files with 60 additions and 21 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
.changeset/kind-vans-design.md Normal file
View File

@ -0,0 +1,5 @@
---
'@pockethost/dashboard': patch
---
Add dev mode pulse

76
packages/dashboard/src/routes/(app)/instances/[instanceId]/+layout.svelte
View File

@ -51,19 +51,31 @@
</svelte:head> </svelte:head>
{#if isReady} {#if isReady}
<div class="flex flex-row items-center justify-between mb-6 gap-4 pl-4 sm:pl-6 lg:pl-8 pr-2"> <div
class="flex flex-row items-center justify-between mb-6 gap-4 pl-4 sm:pl-6 lg:pl-8 pr-2"
>
<div> <div>
<h2 <div class="flex items-center gap-2">
class="text-4xl md:text-left text-base-content font-bold mb-3 break-words" <h2
> class="text-4xl md:text-left text-base-content font-bold mb-3 break-words"
{$instance.subdomain} >
{$instance.subdomain}
</h2> </h2>
</div>
<span class="text-gray-400"> <span class="text-gray-400">
Version {$instance.version} - <span class="capitalize">{$instance.status}</span> Version {$instance.version} -
<span class="capitalize">{$instance.status}</span>
</span> </span>
{#if $instance.dev}
<a
href={`/instances/${$instance.id}/dev`}
class="text-warning animate-pulse border-warning border-2 p-1 rounded"
>
Dev Mode Active (SLOW)
</a>
{/if}
</div> </div>
<div> <div>
<Toggle <Toggle
checked={!$instance.maintenance} checked={!$instance.maintenance}
@ -71,7 +83,7 @@
/> />
</div> </div>
</div> </div>
{#if $instance.maintenance} {#if $instance.maintenance}
<div class="px-4 mb-8"> <div class="px-4 mb-8">
<AlertBar <AlertBar
@ -89,9 +101,9 @@
<a href={`/instances/${id}`} class={activeClass(id)}>Overview</a> <a href={`/instances/${id}`} class={activeClass(id)}>Overview</a>
</li> </li>
<li> <li>
<a <a href={`/instances/${id}/secrets`} class={activeClass(`secrets`)}
href={`/instances/${id}/secrets`} >Secrets</a
class={activeClass(`secrets`)}>Secrets</a> >
</li> </li>
<li> <li>
<a href={`/instances/${id}/logs`} class={activeClass(`logs`)}>Logs</a> <a href={`/instances/${id}/logs`} class={activeClass(`logs`)}>Logs</a>
@ -116,21 +128,43 @@
<Fa icon={faExternalLinkAlt} class="ml-2 text-xs" /> <Fa icon={faExternalLinkAlt} class="ml-2 text-xs" />
</a> </a>
</li> </li>
</ul> </ul>
<div class="pl-6"> <div class="pl-6">
<Fa icon={faTriangleExclamation} class="text-error inline" /> <Fa icon={faTriangleExclamation} class="text-error inline" />
<span class=" font-bold text-error">Danger Zone</span> <span class=" font-bold text-error">Danger Zone</span>
<Fa icon={faTriangleExclamation} class="text-error inline" /> <Fa icon={faTriangleExclamation} class="text-error inline" />
</div> </div>
<ul class="menu text-base-content"> <ul class="menu text-base-content">
<li><a href={`/instances/${id}/version`} class={activeClass(`version`)}>Change Version</a></li>
<li><a href={`/instances/${id}/domain`} class={activeClass(`domain`)}>Custom Domain</a></li>
<li><a href={`/instances/${id}/admin-sync`} class={activeClass(`admin-sync`)}>Admin Sync</a></li>
<li><a href={`/instances/${id}/dev`} class={activeClass(`dev`)}>Dev Mode</a></li>
<li><a href={`/instances/${id}/rename`} class={activeClass(`rename`)}>Rename</a></li>
<li> <li>
<a href={`/instances/${id}/delete`} class={`text-error ${activeClass(`delete`)}`} <a href={`/instances/${id}/version`} class={activeClass(`version`)}
>Delete</a >Change Version</a
>
</li>
<li>
<a href={`/instances/${id}/domain`} class={activeClass(`domain`)}
>Custom Domain</a
>
</li>
<li>
<a
href={`/instances/${id}/admin-sync`}
class={activeClass(`admin-sync`)}>Admin Sync</a
>
</li>
<li>
<a href={`/instances/${id}/dev`} class={activeClass(`dev`)}
>Dev Mode</a
>
</li>
<li>
<a href={`/instances/${id}/rename`} class={activeClass(`rename`)}
>Rename</a
>
</li>
<li>
<a
href={`/instances/${id}/delete`}
class={`text-error ${activeClass(`delete`)}`}>Delete</a
> >
</li> </li>
</ul> </ul>