v1.2.0: Added source previews, username creation for creator, tweaked…

… "Manager Request" modal

package.json

@@ -1,6 +1,6 @@
 {
 	"name": "colorish",
-	"version": "1.1.0",
+	"version": "1.2.0",
 	"private": true,
 	"synopsis": "The official manager for Project Colorway-compatible apps.",
 	"description": "The official manager for Project Colorway-compatible apps. Change, create and manage, all from one place.",

src/electron.cjs

@@ -146,6 +146,7 @@ wsManager.on("connection", function connection(wss) {
                     return;
                 case "complication:manager-role:request":
                     if (!ws.isManager.get()) mainWindow.webContents.send("complication:manager-role:request", data.boundKey);
+                    mainWindow.focus();
                     return;
             }
         }
@@ -154,9 +155,9 @@ wsManager.on("connection", function connection(wss) {
     mainWindow.webContents.send("client-connected");
     ws.dispatch("manager-connection-established", { MID });
 });
-const serveURL = serve({ directory: "." });
 const port = process.env.PORT || 5173;
 const dev = !app.isPackaged;
+const serveURL = serve({ directory: dev ? path.join("..", "build") : "." });
 let mainWindow;
 function createWindow() {
     let windowState = windowStateManager({ defaultWidth: 800, defaultHeight: 600 });
@@ -184,7 +185,7 @@ function createWindow() {
         width: windowState.width,
         height: windowState.height,
         title: "Colorish",
-        icon: "../colorish.png"
+        icon: "../colorish_256x256.png"
     });
     windowState.manage(mainWindow);
     mainWindow.once("ready-to-show", () => {
@@ -209,7 +210,7 @@ function createMainWindow() {
     mainWindow.once("close", () => {
         mainWindow = null;
     });
-    if (dev)
+    if(dev)
         loadVite(port);
     else
         serveURL(mainWindow);
@@ -263,4 +264,8 @@ ipcMain.on("complication:manager-role:manager-updated", (_, boundKey) => {
 ipcMain.on("complication:ui-summon:summon", (_, boundKey) => {
     const wsClient = wsClients.filter(ws => (typeof ws.boundKey.get() == "string" ? ws.boundKey.get() : JSON.stringify(ws.boundKey.get())) == JSON.stringify(boundKey))[0]
     wsClient.dispatch("complication:ui-summon:summon");
-});
+});
+
+ipcMain.on("getFocus", () => {
+    mainWindow.focus();
+})

src/lib/app.scss

@@ -71,14 +71,14 @@
 	flex-direction: column;
 	gap: 4px;
 	padding: 16px;
-	& .modal-header {
-		color: #fff;
-		margin: 0;
-		font-weight: normal;
-		font-size: 1.25em;
-		margin-bottom: 8px;
-		// font-family: "NDOT";
-	}
+}
+.modal-header {
+	color: #fff;
+	margin: 0;
+	font-weight: normal;
+	font-size: 1.25em;
+	margin-bottom: 8px;
+	// font-family: "NDOT";
 }
 .sect-header {
 	color: #fff;

src/lib/components/ClientManagerRequestModal.svelte

@@ -18,7 +18,8 @@
 				/>
 				<span
 					>{getClientDisplayName(Object.values(boundKey)[0])} has requested
-					manager access</span
+					manager access. This will allow this app to change colorways
+					to all connected clients.</span
 				>
 			</div>
 			<div class="modal-footer">
@@ -35,6 +36,22 @@
 						);
 					}}>Accept</button
 				>
+				<button
+					class="button surface"
+					on:click={() => {
+						open = false;
+						window.electron.send(
+							"complication:manager-role:manager-updated",
+							boundKey
+						);
+						setTimeout(() => {
+							window.electron.send("sendToWsClient", {
+								boundKey: boundKey,
+								type: "complication:manager-role:revoked",
+							});
+						}, 300000);
+					}}>Accept for 5mins</button
+				>
 			</div>
 		</dialog>
 	</div>
@@ -44,4 +61,7 @@
 	.modal-content {
 		min-width: 400px;
 	}
+	.modal {
+		max-width: 500px;
+	}
 </style>

src/lib/components/SourcePreviewModal.svelte

@@ -0,0 +1,142 @@
+<script lang="ts">
+	import { colorToHex } from "$lib/utils/utils";
+	import { onMount } from "svelte";
+	import ModalHeaderClose from "./ModalHeaderClose.svelte";
+
+	export let source: { name: string; url?: string; colorways?: Colorway[] };
+
+	let colorways: Colorway[] = [];
+
+	onMount(async () => {
+		if (source.url) {
+			const response = await fetch(source.url);
+
+			const data = await response.json();
+
+			colorways = data.colorways || [];
+		} else {
+			colorways = source.colorways || [];
+		}
+	});
+
+	export let open: boolean;
+</script>
+
+<!-- svelte-ignore a11y-click-events-have-key-events -->
+{#if open}
+	<div class="backdrop" on:click|self={() => (open = false)}>
+		<dialog open class="modal">
+			<div class="modal-content">
+				<ModalHeaderClose
+					modal_title={`Preview for ${source.name}`}
+					modal_open={{ set: (value) => (open = value) }}
+				/>
+				<div class="selector">
+					{#each colorways
+						.map( (color) => (color.colors ? color : { ...color, colors: ["accent", "primary", "secondary", "tertiary"] }) )
+						.map((color) => {
+							const colors = {};
+							color.colors?.map((colorStr) => (colors[colorStr] = colorToHex(color[colorStr])));
+							return { ...color, colorObj: colors };
+						}) as color}
+						<!-- svelte-ignore a11y-click-events-have-key-events -->
+						<div class="colorway" id={"colorway-" + color.name}>
+							<div class="colorwayColors">
+								{#if !color.isGradient}
+									{#each Object.values(color.colorObj) as colorStr}
+										<div
+											class="color"
+											style={`background-color: #${colorToHex(
+												colorStr
+											)}`}
+										/>
+									{/each}
+								{:else}
+									<div
+										class="color"
+										style={`background: linear-gradient(${color.linearGradient})`}
+									/>
+								{/if}
+							</div>
+							<span class="label">{color.name}</span>
+						</div>
+					{/each}
+				</div>
+			</div>
+		</dialog>
+	</div>
+{/if}
+
+<style lang="scss">
+	.modal-content {
+		min-width: 400px;
+	}
+	.modal {
+		max-width: 500px;
+	}
+	.selector {
+		padding: 0;
+		overflow: hidden auto;
+		display: flex;
+		flex-direction: column;
+		gap: 8px;
+		width: 100%;
+		height: calc(100% - 8px);
+		scrollbar-width: none !important;
+		&::-webkit-scrollbar {
+			width: 0;
+		}
+		& > .colorway {
+			display: flex;
+			flex-direction: row;
+			justify-content: start;
+			padding: 0 8px;
+			gap: 5px;
+			border-radius: 6px;
+			background-color: #101010;
+			box-sizing: border-box;
+			min-height: 44px;
+			align-items: center;
+			border: 1px solid transparent;
+			transition: 0.2s ease;
+			cursor: pointer;
+			color: #dfdfdf;
+			&:hover {
+				background-color: #2a2a2a;
+			}
+			&[aria-checked="true"] {
+				background-color: #2a2a2a;
+				border-color: #a6a6a6;
+			}
+			& .label {
+				margin-right: auto;
+				margin-left: 0.5rem;
+			}
+			& > .colorwayColors {
+				display: flex;
+				flex-flow: wrap;
+				flex-direction: row;
+				overflow: hidden;
+				border-radius: 50%;
+				width: 30px;
+				height: 30px;
+				box-shadow: 0 0 0 1.5px #a6a6a6;
+				box-sizing: border-box;
+				& > .color {
+					width: 50%;
+					height: 50%;
+				}
+				&:not(:has(> .color:nth-child(2))) > .color {
+					width: 100%;
+					height: 100%;
+				}
+				&:not(:has(> .color:nth-child(3))) > .color {
+					height: 100%;
+				}
+				&:not(:has(> .color:nth-child(4))) > .color:nth-child(3) {
+					width: 100%;
+				}
+			}
+		}
+	}
+</style>

src/lib/components/TabBar.svelte

@@ -1,15 +1,23 @@
 <script lang="ts">
 	import { page } from "$app/stores";
 
-	export let items: { title: string; href: string; activeref?: string }[] =
-		[];
+	export let items: {
+		title: string;
+		href: string;
+		activeref?: string;
+		onClick?: () => void;
+	}[] = [];
+
+	let v = () => {};
 </script>
 
 {#if items.length > 1}
 	<nav>
 		{#each items as item}
+			{@const onClick = item.onClick || v}
 			<a
 				href={item.href}
+				on:click={onClick}
 				class={$page.url.pathname.startsWith(
 					item.activeref || item.href
 				)

src/lib/store.ts

@@ -14,4 +14,6 @@ export const boundClients = writable({} as {
         offline?: { name: string, colorways: Colorway[] }[];
         isManager?: boolean
     };
-});
+});
+
+export const currentapp = writable("this");

src/routes/+layout.svelte

@@ -186,6 +186,13 @@
 <div style="display: flex; flex-direction: row; width: 100%; height: 100%;">
 	<nav class="global_nav">
 		<a href="/" class={$page.url.pathname == "/" ? "active" : ""}></a>
+		<a
+			href="/creator"
+			class={$page.url.pathname == "/creator" ||
+			$page.url.pathname == "/signin"
+				? "active"
+				: ""}>&#xF64D;</a
+		>
 		<a
 			href="/settings/main"
 			class={$page.url.pathname.startsWith("/settings") ? "active" : ""}

src/routes/+layout.ts

@@ -1 +1 @@
-export const ssr = false;
+export const ssr = false;