fix(frontend): Fix toast when adding a user + set default vscoode the… (#2080)

* fix(frontend): Fix toast when adding a user + set default vscoode theme variable + fix DisplayResult componnet

* fix(frontend): handle both encoding

* fix(frontend): add all editorHoverWidget classes

frontend/src/lib/components/AddUser.svelte

@@ -113,11 +113,12 @@
 			color="blue"
 			size="sm"
 			on:click={() => {
-				addUser()
-				// @ts-ignore
-				email = undefined
-				// @ts-ignore
-				username = undefined
+				addUser().then(() => {
+					// @ts-ignore
+					email = undefined
+					// @ts-ignore
+					username = undefined
+				})
 			}}
 			disabled={email === undefined || username === undefined}
 		>

frontend/src/lib/components/DisplayResult.svelte

@@ -113,6 +113,14 @@
 
 	let jsonViewer: Drawer
 	$: jsonStr = JSON.stringify(result, null, 4)
+
+	function contentOrRootString(obj: string | { filename: string; content: string }) {
+		if (typeof obj === 'string') {
+			return obj
+		} else {
+			return obj.content
+		}
+	}
 </script>
 
 <div class="inline-highlight">
@@ -190,15 +198,19 @@
 				{/if}
 			</div>
 		{:else if !forceJson && resultKind == 'png'}
-			<div class="h-full"
-				><img alt="png rendered" class="w-auto h-full" src="data:image/png;base64,{result.png}" />
+			<div class="h-full">
+				<img
+					alt="png rendered"
+					class="w-auto h-full"
+					src="data:image/png;base64,{contentOrRootString(result.png)}"
+				/>
 			</div>
 		{:else if !forceJson && resultKind == 'jpeg'}
-			<div class="h-full"
-				><img
+			<div class="h-full">
+				<img
 					alt="jpeg rendered"
 					class="w-auto h-full"
-					src="data:image/jpeg;base64,{result.jpeg}"
+					src="data:image/jpeg;base64,{contentOrRootString(result.jpeg)}"
 				/>
 			</div>
 		{:else if !forceJson && resultKind == 'svg'}
@@ -207,14 +219,18 @@
 			</div>
 			<div class="h-full overflow-auto">{@html result.svg} </div>
 		{:else if !forceJson && resultKind == 'gif'}
-			<div class="h-full"
-				><img alt="gif rendered" class="w-auto h-full" src="data:image/gif;base64,{result.gif}" />
+			<div class="h-full">
+				<img
+					alt="gif rendered"
+					class="w-auto h-full"
+					src="data:image/gif;base64,{contentOrRootString(result.gif)}"
+				/>
 			</div>
 		{:else if !forceJson && resultKind == 'file'}
 			<div
 				><a
 					download={result.filename ?? 'windmill.file'}
-					href="data:application/octet-stream;base64,{result.file}">Download</a
+					href="data:application/octet-stream;base64,{contentOrRootString(result.file)}">Download</a
 				>
 			</div>
 		{:else if !forceJson && resultKind == 'error' && result?.error}<div

frontend/tailwind.config.cjs

@@ -495,6 +495,11 @@ const config = {
 					'--color-border': lightThemeRgb.border,
 					'--color-border-hover': lightThemeRgb.borderHover,
 
+					'--vscode-editorSuggestWidget-background': '#f3f3f3',
+					'--vscode-editorHoverWidget-foreground': '#616161',
+					'--vscode-editorHoverWidget-border': '#c8c8c8',
+					'--vscode-editorHoverWidget-statusBarBackground': '#e7e7e7',
+
 					[`@media (min-width: ${theme('screens.qhd')})`]: {
 						fontSize: theme('fontSize.lg')
 					},
@@ -526,7 +531,12 @@ const config = {
 						'--color-text-disabled-inverse': lightThemeRgb.textDisabled,
 
 						'--color-border': darkThemeRgb.border,
-						'--color-border-hover': darkThemeRgb.borderHover
+						'--color-border-hover': darkThemeRgb.borderHover,
+
+						'--vscode-editorSuggestWidget-background': '#252526',
+						'--vscode-editorHoverWidget-foreground': '#cccccc',
+						'--vscode-editorHoverWidget-border': '#454545',
+						'--vscode-editorHoverWidget-statusBarBackground': '#2c2c2d'
 					}
 				},
 				h1: {