From 081a54361b384b5b927280dfefd284edc83046cc Mon Sep 17 00:00:00 2001
From: Ruben Fiszel <ruben@rubenfiszel.com>
Date: Tue, 30 May 2023 00:34:14 +0200
Subject: [PATCH] give public app badges

---
 .../src/lib/components/HighlightCode.svelte   | 11 ++++-
 .../components/apps/editor/AppPreview.svelte  |  4 +-
 .../lib/components/common/table/AppRow.svelte | 44 ++++++++++++++++++-
 .../(root)/(logged)/run/[...run]/+page.svelte |  2 +-
 4 files changed, 54 insertions(+), 7 deletions(-)

diff --git a/frontend/src/lib/components/HighlightCode.svelte b/frontend/src/lib/components/HighlightCode.svelte
index dd0b6ea8b8..3b62d3f22b 100644
--- a/frontend/src/lib/components/HighlightCode.svelte
+++ b/frontend/src/lib/components/HighlightCode.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-	import Highlight from 'svelte-highlight'
+	import Highlight, { LineNumbers } from 'svelte-highlight'
 	import python from 'svelte-highlight/languages/python'
 	import typescript from 'svelte-highlight/languages/typescript'
 	import go from 'svelte-highlight/languages/go'
@@ -7,6 +7,7 @@
 
 	export let code: string = ''
 	export let language: 'python3' | 'deno' | 'go' | 'bash' | undefined
+	export let lines = false
 
 	function getLang(lang: string | undefined) {
 		switch (lang) {
@@ -27,7 +28,13 @@
 </script>
 
 {#if code?.length < 5000}
-	<Highlight class="nowrap {$$props.class}" language={lang} {code} />
+	{#if !lines}
+		<Highlight class="nowrap {$$props.class}" language={lang} {code} />
+	{:else}
+		<Highlight class="nowrap {$$props.class}" language={lang} {code} let:highlighted>
+			<LineNumbers {highlighted} />
+		</Highlight>
+	{/if}
 {:else}
 	<pre class="overflow-auto max-h-screen {$$props.class}"
 		><code class="language-{language}">{code}</code></pre
diff --git a/frontend/src/lib/components/apps/editor/AppPreview.svelte b/frontend/src/lib/components/apps/editor/AppPreview.svelte
index a81e1b549a..a73d3c2dac 100644
--- a/frontend/src/lib/components/apps/editor/AppPreview.svelte
+++ b/frontend/src/lib/components/apps/editor/AppPreview.svelte
@@ -63,7 +63,7 @@
 	resizeWindow()
 
 	const parentWidth = writable(0)
-
+	const state = writable({})
 	setContext<AppViewerContext>('AppViewerContext', {
 		worldStore: buildWorld(ncontext),
 		initialized: writable({ initialized: false, initializedComponents: [] }),
@@ -86,7 +86,7 @@
 		focusedGrid: writable(undefined),
 		stateId: writable(0),
 		parentWidth,
-		state: writable({}),
+		state: state,
 		componentControl: writable({}),
 		hoverStore: writable(undefined),
 		allIdsInPath
diff --git a/frontend/src/lib/components/common/table/AppRow.svelte b/frontend/src/lib/components/common/table/AppRow.svelte
index bc76525b1d..d9fa35a142 100644
--- a/frontend/src/lib/components/common/table/AppRow.svelte
+++ b/frontend/src/lib/components/common/table/AppRow.svelte
@@ -8,6 +8,7 @@
 	import {
 		faCodeFork,
 		faEdit,
+		faExternalLink,
 		faEye,
 		faFileExport,
 		faPen,
@@ -18,6 +19,10 @@
 	import Button from '../button/Button.svelte'
 	import Row from './Row.svelte'
 	import DraftBadge from '$lib/components/DraftBadge.svelte'
+	import Badge from '../badge/Badge.svelte'
+	import { Eye } from 'lucide-svelte'
+	import { goto } from '$app/navigation'
+	import { page } from '$app/stores'
 
 	export let app: ListableApp & { has_draft?: boolean; draft_only?: boolean; canWrite: boolean }
 	export let marked: string | undefined
@@ -26,7 +31,16 @@
 	export let moveDrawer: MoveDrawer
 	export let deleteConfirmedCallback: (() => void) | undefined
 
-	let { summary, path, extra_perms, canWrite, workspace_id, has_draft, draft_only } = app
+	let {
+		summary,
+		path,
+		extra_perms,
+		canWrite,
+		workspace_id,
+		has_draft,
+		draft_only,
+		execution_mode
+	} = app
 
 	const dispatch = createEventDispatcher()
 </script>
@@ -44,7 +58,14 @@
 >
 	<svelte:fragment slot="badges">
 		<DraftBadge {has_draft} {draft_only} />
-
+		{#if execution_mode == 'anonymous'}
+			<Badge small>
+				<div class="flex gap-1 items-center">
+					<Eye size={14} />
+					Public
+				</div></Badge
+			>
+		{/if}
 		<SharedBadge {canWrite} extraPerms={extra_perms} />
 	</svelte:fragment>
 	<svelte:fragment slot="actions">
@@ -143,6 +164,25 @@
 							shareModal.openDrawer && shareModal.openDrawer(path, 'app')
 						}
 					},
+					...(execution_mode == 'anonymous'
+						? [
+								{
+									displayName: 'Go to public page',
+									icon: faExternalLink,
+									action: async () => {
+										let secretUrl = await AppService.getPublicSecretOfApp({
+											workspace: $workspaceStore ?? '',
+											path
+										})
+										let url =
+											$page.url.protocol +
+											'//' +
+											`${$page.url.hostname}/public/${$workspaceStore}/${secretUrl}`
+										goto(url)
+									}
+								}
+						  ]
+						: []),
 					{
 						displayName: 'Delete',
 						icon: faTrashAlt,
diff --git a/frontend/src/routes/(root)/(logged)/run/[...run]/+page.svelte b/frontend/src/routes/(root)/(logged)/run/[...run]/+page.svelte
index 76df1edd1e..f3f0d92191 100644
--- a/frontend/src/routes/(root)/(logged)/run/[...run]/+page.svelte
+++ b/frontend/src/routes/(root)/(logged)/run/[...run]/+page.svelte
@@ -338,7 +338,7 @@
 							</div>
 						{:else if viewTab == 'code'}
 							{#if job && 'raw_code' in job && job.raw_code}
-								<HighlightCode language={job.language} code={job.raw_code} />
+								<HighlightCode lines language={job.language} code={job.raw_code} />
 							{:else if job}
 								No code is available
 							{:else}