add initial workspace selection screen

Author: Qix-

minimap-app/.taurignore

@@ -0,0 +1 @@
+/www-src/

minimap-app/tauri.conf.json

@@ -2,7 +2,7 @@
 	"$schema": "node_modules/@tauri-apps/cli/schema.json",
 	"build": {
 		"beforeBuildCommand": "npm run build",
-		"beforeDevCommand": "npm run dev",
+		"beforeDevCommand": "npm run tauri:icon && npm run build && npm run dev",
 		"devPath": "http://localhost:3891",
 		"distDir": "build"
 	},

minimap-app/www-src/js/component/Button.mjs

@@ -4,8 +4,6 @@ import sig from 'minimap/js/util/sig.mjs';
 import css from 'minimap/js/util/css.mjs';
 import disable from 'minimap/js/util/disable.mjs';
 
-import Link from 'minimap/js/component/Link.mjs';
-
 import * as C from './Button.css';
 
 export default ({
@@ -24,17 +22,3 @@ export default ({
 		{children}
 	</button>
 );
-
-export const LinkButton = ({
-	disabled = false,
-	className,
-	children,
-	...props
-}) => (
-	<Link
-		className={css(C.root, C.link, className, sig(disabled) && C.disabled)}
-		{...props}
-	>
-		{children}
-	</Link>
-);

minimap-app/www-src/js/global.css

@@ -61,7 +61,7 @@ body {
 	scrollbar-color: var(--mm-scrollbar, var(--mm-border)) transparent;
 	scrollbar-width: thin;
 	font-family: 'Inter', sans-serif;
-	font-size: 0.9rem;
+	font-size: 1rem;
 	font-weight: 500;
 }
 

minimap-app/www-src/js/index.mjs

@@ -3,25 +3,34 @@ import S from 's-js';
 
 import I from 'minimap/js/util/i18n.mjs';
 import systemTheme from 'minimap/js/util/s-theme.mjs';
-import { signal as configSignal } from 'minimap/js/util/tauri-config-signal.mjs';
+import * as configSignal from 'minimap/js/util/tauri-config-signal.mjs';
 
 import Root from 'minimap/js/module/Root.mjs';
 import ErrorView from 'minimap/js/module/ErrorView.mjs';
+import WorkspaceSelect from 'minimap/js/module/WorkspaceSelect.mjs';
 
 import './reset.css';
 import './global.css';
 import './theme.css';
 
-const XFormString = {
-	stringify: v => v ?? '',
-	parse: v => v ?? ''
-};
-
 S.root(() => {
 	const Minimap = {
 		errorMessage: S.value(),
-		theme: configSignal('theme', 'system'),
-		langOverride: configSignal('lang')
+		theme: configSignal.value('theme', 'system'),
+		langOverride: configSignal.value('lang'),
+		savedWorkspaces: configSignal.array('workspaces', [
+			{
+				type: 'git',
+				remote:
+					'file:///C:/Users/Anonymous/AppData/Roaming/minimap/test-repo'
+			},
+			{ type: 'mem', author: 'Max Mustermann', email: 'max@example.com' },
+			{
+				type: 'git',
+				remote:
+					'file:///C:/Users/Anonymous/AppData/Roaming/minimap/test-repo'
+			}
+		])
 	};
 
 	if (typeof window !== 'undefined') window.Minimap = Minimap;
@@ -42,10 +51,9 @@ S.root(() => {
 
 	// Calculate the current main view
 	const currentView = S(() => {
-		if (Minimap.errorMessage()) return <ErrorView {...{ Minimap }} />;
+		if (Minimap.errorMessage()) return <ErrorView {...Minimap} />;
 
-		// TODO Add your default view here.
-		return () => <div>Hello, world!</div>;
+		return () => <WorkspaceSelect {...Minimap} />;
 	});
 
 	// Attach!

minimap-app/www-src/js/module/WorkspaceSelect.css

@@ -0,0 +1,56 @@
+.root {
+	border: 1px solid var(--mm-border);
+	box-sizing: border-box;
+	display: flex;
+	flex-direction: column;
+	gap: 1rem;
+}
+
+.root > h1 {
+	text-transform: uppercase;
+	font-size: 1.5rem;
+	font-weight: 700;
+	padding: 1rem;
+	box-sizing: border-box;
+	background: var(--mm-text);
+	color: var(--mm-bg);
+}
+
+.workspaceList {
+	display: flex;
+	flex-direction: column;
+	padding: 0.5rem;
+}
+
+.workspace {
+	display: flex;
+	flex-direction: column;
+	padding: 1rem 0.5rem;
+	box-sizing: border-box;
+	border: none;
+	background: transparent;
+	cursor: pointer;
+	color: var(--mm-text);
+}
+
+.workspace:not(:last-child) {
+	border-bottom: 1px solid var(--mm-border);
+}
+
+.workspace:hover {
+	background: var(--mm-invert-bg, var(--mm-accent));
+	color: var(--mm-invert, var(--mm-text));
+}
+
+.workspaceType {
+	font-size: 1.25rem;
+	font-weight: 700;
+	margin-bottom: 0.5rem;
+}
+
+.property > strong {
+	display: inline-block;
+	width: 9ch;
+	font-weight: 900;
+	text-align: left;
+}

minimap-app/www-src/js/module/WorkspaceSelect.mjs

@@ -0,0 +1,41 @@
+import * as Surplus from 'surplus';
+
+import I from 'minimap/js/util/i18n.mjs';
+
+import * as C from './WorkspaceSelect.css';
+
+const TYPE_TAGS = {
+	git: ({ remote }) => [
+		<div className={C.workspaceType}>{I`Git Repository`}</div>,
+		<div className={C.property}>
+			<strong>{I`Remote:`}</strong> {remote}
+		</div>
+	],
+	mem: ({ author, email }) => [
+		<div className={C.workspaceType}>{I`In-Memory`}</div>,
+		<div className={C.property}>
+			<strong>{I`Author:`}</strong> {author}
+		</div>,
+		<div className={C.property}>
+			<strong>{I`E-Mail:`}</strong> {email}
+		</div>
+	]
+};
+
+export default ({ savedWorkspaces }) => {
+	return (
+		<div className={C.root}>
+			<h1>{I`Select a workspace`}</h1>
+			<div className={C.workspaceList}>
+				{savedWorkspaces.map(workspace => {
+					const TypeTag = TYPE_TAGS[workspace.type];
+					return (
+						<button className={C.workspace}>
+							<TypeTag {...workspace} />
+						</button>
+					);
+				})}
+			</div>
+		</div>
+	);
+};

minimap-app/www-src/js/util/tauri-config-signal.mjs

@@ -1,4 +1,5 @@
 import S from 's-js';
+import Sarray from 's-array';
 import { invoke } from '@tauri-apps/api/tauri';
 
 const currentConfig = S.value();
@@ -11,8 +12,8 @@ export async function save() {
 	await invoke('config_store', { config: S.sample(currentConfig) });
 }
 
-export function signal(name, init) {
-	const v = S.value(S.sample(currentConfig)[name] ?? init);
+function setup(name, init, fn) {
+	const v = fn(S.sample(currentConfig)[name] ?? init);
 	S.on(
 		currentConfig,
 		() => {
@@ -30,4 +31,16 @@ export function signal(name, init) {
 	return v;
 }
 
+export function value(name, init) {
+	return setup(name, init, S.value);
+}
+
+export function data(name, init) {
+	return setup(name, init, S.data);
+}
+
+export function array(name, init) {
+	return setup(name, init, Sarray);
+}
+
 await refresh();