From f1489716d9bd0394ec364342400b10b4147db961 Mon Sep 17 00:00:00 2001
From: Daniel Schmidt <info@daniel-schmidt.me>
Date: Tue, 24 Sep 2024 17:24:26 +0200
Subject: [PATCH] feat: first version of session grid

---
 frontend/src/js/app.ts                        |   2 +
 frontend/src/js/core/api.ts                   |   1 +
 frontend/src/js/core/session-grid.ts          | 164 +++++++
 frontend/src/js/types/session-grid.ts         |  57 +++
 frontend/src/js/ui/components/box.ts          |   3 +-
 .../ui/components/layout/center-container.ts  |   8 +-
 frontend/src/js/ui/components/layout/grid.ts  |   2 +
 .../src/js/ui/components/modals/prompt.ts     |   5 +-
 .../session-grid/create-edit-grid-button.ts   | 296 +++++++++++++
 .../session-grid/grid-basic-button.ts         |  68 +++
 .../ui/components/session-grid/grid-button.ts |  25 ++
 .../ui/components/session-grid/grid-edit.ts   |  35 ++
 .../session-grid/grid-generator-button.ts     |  92 ++++
 .../session-grid/grid-template-button.ts      | 121 +++++
 .../js/ui/components/view-layout/side-nav.ts  |   5 +
 frontend/src/js/ui/shoelace/button.ts         |   8 +-
 frontend/src/js/ui/shoelace/color-picker.ts   |  29 ++
 frontend/src/js/ui/shoelace/divider-vert.ts   |   6 +-
 frontend/src/js/ui/shoelace/input.ts          |   2 +
 frontend/src/js/ui/shoelace/modal.ts          |   3 +-
 frontend/src/js/ui/shoelace/select.ts         |   7 +-
 frontend/src/js/ui/shoelace/util.ts           |  21 +
 frontend/src/js/ui/views/session-grid.ts      | 414 ++++++++++++++++++
 rpc/misc.go                                   |  21 +
 server/server.go                              |   1 +
 25 files changed, 1386 insertions(+), 10 deletions(-)
 create mode 100644 frontend/src/js/core/session-grid.ts
 create mode 100644 frontend/src/js/types/session-grid.ts
 create mode 100644 frontend/src/js/ui/components/modals/session-grid/create-edit-grid-button.ts
 create mode 100644 frontend/src/js/ui/components/session-grid/grid-basic-button.ts
 create mode 100644 frontend/src/js/ui/components/session-grid/grid-button.ts
 create mode 100644 frontend/src/js/ui/components/session-grid/grid-edit.ts
 create mode 100644 frontend/src/js/ui/components/session-grid/grid-generator-button.ts
 create mode 100644 frontend/src/js/ui/components/session-grid/grid-template-button.ts
 create mode 100644 frontend/src/js/ui/shoelace/color-picker.ts
 create mode 100644 frontend/src/js/ui/shoelace/util.ts
 create mode 100644 frontend/src/js/ui/views/session-grid.ts
 create mode 100644 rpc/misc.go

diff --git a/frontend/src/js/app.ts b/frontend/src/js/app.ts
index 00e4373..637e54b 100644
--- a/frontend/src/js/app.ts
+++ b/frontend/src/js/app.ts
@@ -22,6 +22,7 @@ import GeneratorCreate from 'js/ui/views/generator/create';
 import GeneratorEdit from 'js/ui/views/generator/edit';
 import GeneratorSingle from 'js/ui/views/generator/single';
 import Home from 'js/ui/views/home';
+import SessionGrid from 'js/ui/views/session-grid';
 import Settings from 'js/ui/views/settings';
 import TemplateAll from 'js/ui/views/template/all';
 import TemplateCreate from 'js/ui/views/template/create';
@@ -69,6 +70,7 @@ store.actions.loadAll().then(() => {
 		'/generator/create/:id': GeneratorCreate,
 		'/generator/:id': GeneratorSingle,
 		'/generator/:id/edit': GeneratorEdit,
+		'/session-grid': SessionGrid,
 		'/data-source': DataSourceAll,
 		'/data-source/:id': DataSourceSingle,
 		'/workshop': WorkshopAll,
diff --git a/frontend/src/js/core/api.ts b/frontend/src/js/core/api.ts
index 47982f8..90bed63 100644
--- a/frontend/src/js/core/api.ts
+++ b/frontend/src/js/core/api.ts
@@ -102,3 +102,4 @@ export const GET_DEFAULT_DIRECTORIES = 'getDefaultDirectories';
 // Misc function
 export const FETCH_IMAGE = 'fetchImage';
 export const PREVIEW_CACHE = 'previewCache';
+export const GET_LOCAL_URL = 'getLocalURL';
diff --git a/frontend/src/js/core/session-grid.ts b/frontend/src/js/core/session-grid.ts
new file mode 100644
index 0000000..75d0b5c
--- /dev/null
+++ b/frontend/src/js/core/session-grid.ts
@@ -0,0 +1,164 @@
+import { buildId } from 'js/types/basic-info';
+import Entry from 'js/types/entry';
+import Generator, { sanitizeConfig } from 'js/types/generator';
+import {
+	GridElement,
+	GridGeneratorElement,
+	GridLinearExecution,
+	GridTemplateElement,
+	isGridGeneratorElement,
+	isGridLinearExecution,
+	isGridTemplateElement,
+} from 'js/types/session-grid';
+import Template from 'js/types/template';
+import * as API from 'js/core/api';
+import { settings } from 'js/core/store';
+import { render } from 'js/core/templating';
+
+const TEMPLATE_ENTRIES_CACHE_TIMEOUT = 10000;
+
+/**
+ * Gets the name of a grid element. If the element has a name, it will be returned immediately. Otherwise, the name will be fetched from the API.
+ * @param element The grid element to get the name of
+ * @returns A promise that resolves to the name of the grid element
+ */
+export function getGridElementName(element: GridElement): Promise<string> {
+	return new Promise((resolve, reject) => {
+		if (element.name) {
+			resolve(element.name);
+			return;
+		}
+
+		if (isGridTemplateElement(element)) {
+			API.exec<Template>(API.GET_TEMPLATE, element.templateId)
+				.then((res) => {
+					resolve(res.name);
+				})
+				.catch(reject);
+		} else if (isGridGeneratorElement(element)) {
+			API.exec<Generator>(API.GET_GENERATOR, element.generatorId)
+				.then((res) => {
+					resolve(res.name);
+				})
+				.catch(reject);
+		}
+	});
+}
+
+/**
+ * Cache for the entries of a grid template element
+ */
+const entriesCache: { [key: string]: { timestamp: number; entries: Entry[] } } = {};
+
+/**
+ * Get the choices for a grid template element.
+ * @param element The grid template element to get the choices for
+ * @param search An optional search string to filter the choices by
+ * @returns A promise that resolves to the choices for the grid template element
+ */
+export async function getGridTemplateChoices(
+	element: GridTemplateElement,
+	search?: string,
+): Promise<{ id: string; name: string; source?: string }[]> {
+	if (element.templateId.length === 0) {
+		return [];
+	}
+
+	if (entriesCache[element.templateId] && Date.now() - entriesCache[element.templateId].timestamp < TEMPLATE_ENTRIES_CACHE_TIMEOUT) {
+		return Promise.resolve(
+			entriesCache[element.templateId].entries
+				.map((entry) => ({
+					name: entry.name,
+					id: entry.id,
+					source: entry.source,
+				}))
+				.filter((e) => !search || e.name.toLowerCase().includes(search.toLowerCase())),
+		);
+	}
+
+	return API.exec<Entry[]>(API.GET_ENTRIES_WITH_SOURCES, element.templateId).then((res) => {
+		entriesCache[element.templateId] = {
+			timestamp: Date.now(),
+			entries: res,
+		};
+		return res
+			.map((entry) => ({
+				name: entry.name,
+				id: entry.id,
+				source: entry.source,
+			}))
+			.filter((e) => !search || e.name.toLowerCase().includes(search.toLowerCase()));
+	});
+}
+
+/**
+ * Get the choices for a grid generator element.
+ * @param element The grid generator element to get the choices for
+ * @returns A promise that resolves to the choices for the grid generator element
+ */
+export async function getGridGeneratorConfigChoices(element: GridGeneratorElement): Promise<string[]> {
+	if (element.generatorId.length === 0) {
+		return [];
+	}
+
+	return API.exec<string>(API.GET_KEY, `${element.generatorId}_saved_configs`).then((configs) => Object.keys(JSON.parse(configs)));
+}
+
+/**
+ * Execute a grid element
+ * @param element The grid element to execute
+ */
+export async function executeElement(element: GridElement | GridLinearExecution) {
+	if (isGridTemplateElement(element)) {
+		if (!element.entryId) {
+			const choices = await getGridTemplateChoices(element);
+			if (choices.length === 0) {
+				return;
+			}
+
+			const choice = Math.floor(Math.random() * choices.length);
+			element.entryId = choices[choice].id;
+			element.dataSourceId = choices[choice].source;
+		}
+
+		const template = await API.exec<Template>(API.GET_TEMPLATE, element.templateId);
+		const entry = await API.exec<Entry>(API.GET_ENTRY, element.dataSourceId ?? buildId('template', template), element.entryId);
+		const res = await render(template.printTemplate, {
+			it: entry.data,
+			config: {},
+			sources: template.dataSources,
+			images: template.images,
+			settings: settings.value,
+		});
+		await API.exec(API.PRINT, res);
+	}
+
+	if (isGridGeneratorElement(element)) {
+		const config = {};
+		if (element.configName && element.configName.length > 0) {
+			const savedConfigs = await API.exec<string>(API.GET_KEY, `${element.generatorId}_saved_configs`);
+			if (savedConfigs) {
+				const configs = JSON.parse(savedConfigs);
+				if (configs[element.configName]) {
+					Object.assign(config, configs[element.configName]);
+				}
+			}
+		}
+
+		const generator = await API.exec<Generator>(API.GET_GENERATOR, element.generatorId);
+		const finalConfig = sanitizeConfig(generator, config);
+		const res = await render(generator.printTemplate, {
+			config: finalConfig,
+			sources: generator.dataSources,
+			images: generator.images,
+			settings: settings.value,
+			aiEnabled: element.aiEnabled,
+			aiToken: finalConfig.seed,
+		});
+		await API.exec(API.PRINT, res);
+	}
+
+	if (isGridLinearExecution(element)) {
+		throw new Error('Not implemented');
+	}
+}
diff --git a/frontend/src/js/types/session-grid.ts b/frontend/src/js/types/session-grid.ts
new file mode 100644
index 0000000..b5261d3
--- /dev/null
+++ b/frontend/src/js/types/session-grid.ts
@@ -0,0 +1,57 @@
+type TemplateElementBase = {
+	color?: string;
+	name?: string;
+};
+
+type GridTemplateElement = TemplateElementBase & {
+	templateId: string;
+	dataSourceId?: string;
+	entryId?: string;
+};
+
+type GridGeneratorElement = TemplateElementBase & {
+	generatorId: string;
+	configName?: string;
+	aiEnabled?: boolean;
+};
+
+type GridElement = GridTemplateElement | GridGeneratorElement;
+
+type GridLinearExecution = {
+	repeat?: number;
+	elements: GridElement[];
+};
+
+type SessionGrid = {
+	name: string;
+	elements: (GridElement | GridLinearExecution)[];
+};
+
+/**
+ * Check if an element is a grid template element
+ * @param element The element to check
+ * @returns True if the element is a grid template element
+ */
+export function isGridTemplateElement(element: any): element is GridTemplateElement {
+	return (element as GridTemplateElement).templateId !== undefined;
+}
+
+/**
+ * Check if an element is a grid generator element
+ * @param element The element to check
+ * @returns True if the element is a grid generator element
+ */
+export function isGridGeneratorElement(element: any): element is GridGeneratorElement {
+	return (element as GridGeneratorElement).generatorId !== undefined;
+}
+
+/**
+ * Check if an element is a grid linear execution
+ * @param element The element to check
+ * @returns True if the element is a grid linear execution
+ */
+export function isGridLinearExecution(element: any): element is GridLinearExecution {
+	return (element as GridLinearExecution).elements !== undefined;
+}
+
+export { GridElement, GridTemplateElement, GridGeneratorElement, GridLinearExecution, SessionGrid };
diff --git a/frontend/src/js/ui/components/box.ts b/frontend/src/js/ui/components/box.ts
index 20e9cde..a2ea1c2 100644
--- a/frontend/src/js/ui/components/box.ts
+++ b/frontend/src/js/ui/components/box.ts
@@ -8,6 +8,7 @@ type BoxProps = {
 	maxHeight?: number;
 	minHeight?: number;
 	height?: number;
+	style?: any;
 };
 
 /**
@@ -15,7 +16,7 @@ type BoxProps = {
  */
 export default (): m.Component<BoxProps> => ({
 	view({ attrs, children }) {
-		let style: any = {};
+		let style: any = { ...attrs.style };
 
 		if (attrs.maxWidth !== undefined && attrs.maxWidth > 0) {
 			style['max-width'] = `${attrs.maxWidth}px`;
diff --git a/frontend/src/js/ui/components/layout/center-container.ts b/frontend/src/js/ui/components/layout/center-container.ts
index bdda653..3509a97 100644
--- a/frontend/src/js/ui/components/layout/center-container.ts
+++ b/frontend/src/js/ui/components/layout/center-container.ts
@@ -9,6 +9,10 @@ const containerClass = css`
 	width: 100%;
 `;
 
-export default (): m.Component => ({
-	view: ({ children }) => m(Flex, { justify: 'center' }, m(`div.${containerClass}`, children)),
+type CenterContainerProps = {
+	key?: string;
+};
+
+export default (): m.Component<CenterContainerProps> => ({
+	view: ({ attrs, children }) => m(Flex, { key: attrs.key, justify: 'center' }, m(`div.${containerClass}`, { key: attrs.key }, children)),
 });
diff --git a/frontend/src/js/ui/components/layout/grid.ts b/frontend/src/js/ui/components/layout/grid.ts
index 71098f5..8564b66 100644
--- a/frontend/src/js/ui/components/layout/grid.ts
+++ b/frontend/src/js/ui/components/layout/grid.ts
@@ -1,6 +1,7 @@
 import m from 'mithril';
 
 type GridProps = {
+	key?: string;
 	className?: string;
 	minWidth?: string;
 	maxWidth?: string;
@@ -24,6 +25,7 @@ export default (): m.Component<GridProps> => ({
 		return m(
 			`div${attrs.className ?? ''}${attrs.gap ? `.gap-${attrs.gap}` : '.gap-3'}`,
 			{
+				key: attrs.key,
 				style,
 			},
 			children,
diff --git a/frontend/src/js/ui/components/modals/prompt.ts b/frontend/src/js/ui/components/modals/prompt.ts
index 5976034..9ba7b6a 100644
--- a/frontend/src/js/ui/components/modals/prompt.ts
+++ b/frontend/src/js/ui/components/modals/prompt.ts
@@ -12,18 +12,19 @@ type PromptProps = {
 	title: string;
 	label: string;
 	description: string;
+	value?: string;
 	buttonText?: string;
 	onSuccess: (answer: string) => void;
 };
 
 const promptModal = (props: PromptProps) => (): m.Component => {
-	let state = '';
+	let state = props.value ?? '';
 
 	return {
 		view: () =>
 			m(
 				Modal,
-				{ title: props.title, onClose: () => popPortal() },
+				{ title: props.title, className: '.pt0', onClose: () => popPortal() },
 				m('div', [
 					m(
 						HorizontalProperty,
diff --git a/frontend/src/js/ui/components/modals/session-grid/create-edit-grid-button.ts b/frontend/src/js/ui/components/modals/session-grid/create-edit-grid-button.ts
new file mode 100644
index 0000000..8b1784c
--- /dev/null
+++ b/frontend/src/js/ui/components/modals/session-grid/create-edit-grid-button.ts
@@ -0,0 +1,296 @@
+import m from 'mithril';
+
+import { GridElement, GridGeneratorElement, GridTemplateElement, isGridGeneratorElement, isGridTemplateElement } from 'js/types/session-grid';
+import { buildId } from 'src/js/types/basic-info';
+import { is, safeCall, safePromise } from 'js/core/safe';
+import { getGridGeneratorConfigChoices, getGridTemplateChoices } from 'js/core/session-grid';
+import { generators, templates } from 'js/core/store';
+
+import Button from 'js/ui/shoelace/button';
+import Checkbox from 'js/ui/shoelace/checkbox';
+import ColorPicker from 'js/ui/shoelace/color-picker';
+import Input from 'js/ui/shoelace/input';
+import Modal from 'js/ui/shoelace/modal';
+import Select from 'js/ui/shoelace/select';
+
+import HorizontalProperty from 'js/ui/components/horizontal-property';
+import Grid from 'js/ui/components/layout/grid';
+import GridButton from 'js/ui/components/session-grid/grid-button';
+
+import { popPortal, pushPortal } from 'js/ui/portal';
+
+type CreateEditGridButtonProps = {
+	element?: GridElement;
+	onSuccess: (element: GridElement) => void;
+};
+
+type CreateEditGridButtonState = {
+	isNew: boolean;
+	type?: 'template' | 'generator';
+	element?: GridElement;
+	choiceSearch: string;
+	choicesTemplate: {
+		id: string;
+		name: string;
+		source?: string;
+	}[];
+	choicesGenerator: string[];
+};
+
+const createEditGridButton = (props: CreateEditGridButtonProps) => (): m.Component => {
+	let state: CreateEditGridButtonState = {
+		isNew: !props.element,
+		type: (() => {
+			if (!props.element) {
+				return undefined;
+			}
+
+			if (isGridTemplateElement(props.element)) {
+				return 'template';
+			}
+			if (isGridGeneratorElement(props.element)) {
+				return 'generator';
+			}
+
+			return undefined;
+		})(),
+		element: props.element,
+		choiceSearch: '',
+		choicesTemplate: [],
+		choicesGenerator: [],
+	};
+
+	const fetchChoices = async () => {
+		if (isGridTemplateElement(state.element)) {
+			state.choicesTemplate = await getGridTemplateChoices(state.element, state.choiceSearch);
+		}
+
+		if (isGridGeneratorElement(state.element)) {
+			const res = await safePromise(getGridGeneratorConfigChoices(state.element));
+			if (!res.hasError) {
+				state.choicesGenerator = res.value;
+			} else {
+				state.choicesGenerator = [];
+			}
+		}
+	};
+
+	const typeSelector = () =>
+		m(Select, {
+			keys: ['template', 'generator'],
+			names: ['Template', 'Generator'],
+			selected: state.type,
+			onInput: (e) => {
+				state.type = e.target.value as 'template' | 'generator';
+				switch (state.type) {
+					case 'template':
+						state.element = {
+							templateId: '',
+						};
+						break;
+					case 'generator':
+						state.element = {
+							generatorId: '',
+						};
+						break;
+				}
+			},
+		});
+
+	const editor = () => {
+		const base: any = [
+			m(
+				HorizontalProperty,
+				{
+					label: 'Button Name',
+					description: 'Leave empty to use the template/generator name',
+					bottomBorder: true,
+					centered: true,
+				},
+				m(Input, { value: state.element?.name, placeholder: '', onChange: (val: string) => (state.element!.name = val) }),
+			),
+			m(
+				HorizontalProperty,
+				{
+					label: 'Button Color',
+					description: 'Leave empty to use the default',
+					bottomBorder: true,
+					centered: true,
+				},
+				m(ColorPicker, {
+					value: state.element?.color,
+					onChange: (val: string) => (state.element!.color = val),
+				}),
+			),
+		];
+
+		switch (state.type) {
+			case 'template':
+				if (!isGridTemplateElement(state.element)) {
+					break;
+				}
+				base.push(
+					...[
+						m(
+							HorizontalProperty,
+							{
+								label: 'Template',
+								description: 'Select a template to use for this button',
+								bottomBorder: true,
+								centered: true,
+							},
+							m(Select, {
+								keys: templates.value.map((t) => buildId('template', t)),
+								names: templates.value.map((t) => t.name),
+								selected: state.element.templateId,
+								onInput: (e) => {
+									if (!isGridTemplateElement(state.element)) {
+										return;
+									}
+									state.element!.templateId = e.target.value;
+									state.element!.entryId = undefined;
+									fetchChoices();
+								},
+							}),
+						),
+						m(
+							HorizontalProperty,
+							{
+								label: 'Entry',
+								description: 'Pick an entry to use for this button. Can be left empty.',
+								bottomBorder: true,
+								centered: true,
+							},
+							m(Select, {
+								keys: state.choicesTemplate.map((t) => t.id),
+								names: state.choicesTemplate.map((t) => t.name),
+								selected: state.element.entryId,
+								clearable: true,
+								onInput: (e) => {
+									if (!isGridTemplateElement(state.element)) {
+										return;
+									}
+									state.element!.entryId = e.target.value;
+									state.element!.dataSourceId = state.choicesTemplate.find((t) => t.id === e.target.value)?.source;
+								},
+							}),
+						),
+					],
+				);
+				break;
+			case 'generator':
+				if (!isGridGeneratorElement(state.element)) {
+					break;
+				}
+				base.push(
+					...[
+						m(
+							HorizontalProperty,
+							{
+								label: 'Generator',
+								description: 'Select a generator to use for this button',
+								bottomBorder: true,
+								centered: true,
+							},
+							m(Select, {
+								keys: generators.value.map((g) => buildId('generator', g)),
+								names: generators.value.map((g) => g.name),
+								selected: state.element.generatorId,
+								onInput: (e) => {
+									if (!isGridGeneratorElement(state.element)) {
+										return;
+									}
+									state.element!.generatorId = e.target.value;
+									state.element!.configName = undefined;
+									fetchChoices();
+								},
+							}),
+						),
+						state.choicesGenerator.length > 0
+							? m(
+									HorizontalProperty,
+									{
+										label: 'Config',
+										description: 'Pick an config to use for this button. Can be left empty.',
+										bottomBorder: true,
+										centered: true,
+									},
+									m(Select, {
+										keys: state.choicesGenerator,
+										selected: state.element.configName,
+										clearable: true,
+										onInput: (e) => {
+											if (!isGridGeneratorElement(state.element)) {
+												return;
+											}
+											state.element!.configName = e.target.value;
+										},
+									}),
+							  )
+							: null,
+						m(
+							HorizontalProperty,
+							{
+								label: 'AI Enabled',
+								description: 'Whether to enable AI for this button',
+								bottomBorder: true,
+								centered: true,
+							},
+							m(Checkbox, {
+								checked: state.element.aiEnabled,
+								onChange: (val: boolean) => {
+									if (!isGridGeneratorElement(state.element)) {
+										return;
+									}
+									state.element!.aiEnabled = val;
+								},
+							}),
+						),
+					],
+				);
+				break;
+		}
+
+		return m('div', [
+			...base,
+			m(
+				Button,
+				{
+					intend: 'success',
+					className: '.mt2',
+					disabled: !(state.element as GridTemplateElement)?.templateId && !(state.element as GridGeneratorElement)?.generatorId,
+					onClick: () => {
+						if (state.element) {
+							props.onSuccess(state.element);
+						}
+						popPortal();
+					},
+				},
+				'Submit',
+			),
+		]);
+	};
+
+	return {
+		view: () =>
+			m(
+				Modal,
+				{
+					width: !state.type ? '500px' : '800px',
+					title: props.element ? 'Edit Button' : 'Create Button',
+					onClose: () => popPortal(),
+					className: !state.type ? '' : '.pt0',
+				},
+				m(
+					'div',
+					!state.type
+						? typeSelector()
+						: m(Grid, { columns: '570px 230px' }, [editor(), m('div.pt2', state.element ? m(GridButton, { element: state.element }) : null)]),
+				),
+			),
+	};
+};
+
+export function createEditGridButtonModal(props: CreateEditGridButtonProps) {
+	pushPortal(createEditGridButton(props));
+}
diff --git a/frontend/src/js/ui/components/session-grid/grid-basic-button.ts b/frontend/src/js/ui/components/session-grid/grid-basic-button.ts
new file mode 100644
index 0000000..d236ae1
--- /dev/null
+++ b/frontend/src/js/ui/components/session-grid/grid-basic-button.ts
@@ -0,0 +1,68 @@
+import m from 'mithril';
+import { cloneDeep, isEqual } from 'lodash-es';
+
+import { GridElement } from 'js/types/session-grid';
+import { executeElement, getGridElementName } from 'js/core/session-grid';
+
+import Icon from 'js/ui/components/atomic/icon';
+
+type GridBasicButtonProps = {
+	key?: string;
+	element: GridElement;
+};
+
+type GridBasicButtonState = {
+	lastState?: GridElement;
+	name: string;
+};
+
+export default (): m.Component<GridBasicButtonProps> => {
+	let state: GridBasicButtonState = {
+		name: '',
+	};
+
+	const fetchName = (element: GridElement) => {
+		getGridElementName(element).then((res) => {
+			state.name = res;
+			m.redraw();
+		});
+	};
+
+	return {
+		oninit: ({ attrs }) => {
+			fetchName(attrs.element);
+			state.lastState = cloneDeep(attrs.element);
+		},
+		onupdate({ attrs }) {
+			if (!isEqual(attrs.element, state.lastState)) {
+				fetchName(attrs.element);
+				state.lastState = cloneDeep(attrs.element);
+			}
+		},
+		view: ({ attrs }) =>
+			m('div.flex.items-center.justify-center', { key: attrs.key, style: { aspectRatio: '1 / 1', padding: 0 } }, [
+				m(
+					'div.bg-primary.flex.flex-column.br3.pointer.grow',
+					{
+						key: attrs.key,
+						style: { height: '90%', width: '95%' },
+						onclick: () => {
+							executeElement(attrs.element);
+						},
+					},
+					[
+						m(
+							'div.f8.tc.pa2.white.b.ttu.truncate.w-100.mw-100.flex-grow-0.flex-shrink-0.br3.br--top',
+							{ key: attrs.key, style: { backgroundColor: attrs.element.color } },
+							state.name,
+						), //
+						m(
+							'div.flex-grow-1.br3.br--bottom.flex.justify-center.items-center',
+							{ key: attrs.key, style: { backgroundColor: attrs.element.color } },
+							[m(Icon, { key: attrs.key, icon: 'play', size: 3, className: '.white.mb3' })],
+						),
+					],
+				),
+			]),
+	};
+};
diff --git a/frontend/src/js/ui/components/session-grid/grid-button.ts b/frontend/src/js/ui/components/session-grid/grid-button.ts
new file mode 100644
index 0000000..1b9c7d5
--- /dev/null
+++ b/frontend/src/js/ui/components/session-grid/grid-button.ts
@@ -0,0 +1,25 @@
+import m from 'mithril';
+
+import { GridElement, isGridGeneratorElement, isGridTemplateElement } from 'js/types/session-grid';
+
+import GridGeneratorButton from 'js/ui/components/session-grid/grid-generator-button';
+import GridTemplateButton from 'js/ui/components/session-grid/grid-template-button';
+
+type GridBasicButtonProps = {
+	key?: string;
+	element: GridElement;
+};
+
+export default (): m.Component<GridBasicButtonProps> => ({
+	view: ({ attrs }) => {
+		if (isGridTemplateElement(attrs.element)) {
+			return m(GridTemplateButton, { key: attrs.key, element: attrs.element });
+		}
+
+		if (isGridGeneratorElement(attrs.element)) {
+			return m(GridGeneratorButton, { key: attrs.key, element: attrs.element });
+		}
+
+		return m('div', { key: attrs.key }, 'Unknown element type');
+	},
+});
diff --git a/frontend/src/js/ui/components/session-grid/grid-edit.ts b/frontend/src/js/ui/components/session-grid/grid-edit.ts
new file mode 100644
index 0000000..04bcee9
--- /dev/null
+++ b/frontend/src/js/ui/components/session-grid/grid-edit.ts
@@ -0,0 +1,35 @@
+import m from 'mithril';
+
+import { GridElement } from 'js/types/session-grid';
+
+import Icon from 'js/ui/components/atomic/icon';
+import Flex from 'js/ui/components/layout/flex';
+import GridButton from 'js/ui/components/session-grid/grid-button';
+
+type GridBasicButtonProps = {
+	key?: string;
+	element: GridElement;
+	inEdit?: boolean;
+	onEdit?: () => void;
+	onDelete?: () => void;
+	onMoveLeft?: () => void;
+	onMoveRight?: () => void;
+};
+
+export default (): m.Component<GridBasicButtonProps> => ({
+	view: ({ attrs }) => {
+		if (attrs.inEdit) {
+			return m(Flex, { direction: 'column' }, [
+				m(GridButton, { element: attrs.element, key: attrs.key }), //
+				m(Flex, { gap: 3, className: '.ml3' }, [
+					m(Icon, { icon: 'arrow-round-back', className: '.col-dark', onClick: attrs.onMoveLeft }), //
+					m(Icon, { icon: 'arrow-round-forward', className: '.col-dark', onClick: attrs.onMoveRight }),
+					m(Icon, { icon: 'create', className: '.col-dark', onClick: attrs.onEdit }),
+					m(Icon, { icon: 'trash', className: '.col-error', onClick: attrs.onDelete }),
+				]),
+			]);
+		}
+
+		return m(GridButton, { element: attrs.element, key: attrs.key });
+	},
+});
diff --git a/frontend/src/js/ui/components/session-grid/grid-generator-button.ts b/frontend/src/js/ui/components/session-grid/grid-generator-button.ts
new file mode 100644
index 0000000..92ea672
--- /dev/null
+++ b/frontend/src/js/ui/components/session-grid/grid-generator-button.ts
@@ -0,0 +1,92 @@
+import m from 'mithril';
+import { cloneDeep, isEqual } from 'lodash-es';
+
+import { GridGeneratorElement } from 'js/types/session-grid';
+import { executeElement, getGridElementName, getGridGeneratorConfigChoices } from 'js/core/session-grid';
+
+import IconButton from 'js/ui/shoelace/icon-button';
+import Select from 'js/ui/shoelace/select';
+
+import GridBasicButton from 'js/ui/components/session-grid/grid-basic-button';
+
+type GridGeneratorButtonProps = {
+	key?: string;
+	element: GridGeneratorElement;
+};
+
+type GridGeneratorButtonState = {
+	lastState?: GridGeneratorElement;
+	name: string;
+	selected: string;
+	choices: string[];
+};
+
+export default (): m.Component<GridGeneratorButtonProps> => {
+	let state: GridGeneratorButtonState = {
+		name: '',
+		selected: '',
+		choices: [],
+	};
+
+	const fetchChoices = (element: GridGeneratorElement) => {
+		getGridGeneratorConfigChoices(element)
+			.then((res) => {
+				state.choices = res;
+			})
+			.catch(() => {
+				state.choices = [];
+			});
+	};
+
+	const fetchAll = (element: GridGeneratorElement) => {
+		getGridElementName(element).then((res) => {
+			state.name = res;
+		});
+		fetchChoices(element);
+	};
+
+	const execute = (base: GridGeneratorElement) => {
+		executeElement({
+			...base,
+			configName: state.selected,
+		});
+	};
+
+	return {
+		oninit: ({ attrs }) => {
+			fetchAll(attrs.element);
+			state.lastState = cloneDeep(attrs.element);
+		},
+		onupdate({ attrs }) {
+			if (!isEqual(state.lastState, attrs.element)) {
+				fetchAll(attrs.element);
+				state.lastState = cloneDeep(attrs.element);
+			}
+		},
+		view: ({ attrs }) => {
+			if (state.choices.length === 0 || (attrs.element.configName?.length ?? 0) > 0) {
+				return m(GridBasicButton, { element: attrs.element });
+			}
+
+			return m('div.flex.items-center.justify-center', { key: attrs.key, style: { aspectRatio: '1 / 1', padding: 0 } }, [
+				m('div.bg-black-05.flex.flex-column.br3', { key: attrs.key, style: { height: '90%', width: '95%' } }, [
+					m(
+						'div.f8.tc.pa2.bg-primary.white.b.ttu.truncate.w-100.mw-100.flex-grow-0.flex-shrink-0.br3.br--top',
+						{ key: attrs.key, style: { backgroundColor: attrs.element.color } },
+						state.name,
+					), //
+					m('div.ba.b--black-05.flex-grow-1.br3.br--bottom.pa2.flex.flex-column.gap-2.justify-between', [
+						m(Select, {
+							key: attrs.key,
+							keys: state.choices,
+							selected: state.selected,
+							clearable: true,
+							onInput: (e) => (state.selected = e.target.value),
+						}), //
+						m(IconButton, { key: attrs.key, icon: 'print', intend: 'primary', onClick: () => execute(attrs.element) }, 'Print'),
+					]),
+				]),
+			]);
+		},
+	};
+};
diff --git a/frontend/src/js/ui/components/session-grid/grid-template-button.ts b/frontend/src/js/ui/components/session-grid/grid-template-button.ts
new file mode 100644
index 0000000..d5e8363
--- /dev/null
+++ b/frontend/src/js/ui/components/session-grid/grid-template-button.ts
@@ -0,0 +1,121 @@
+import m from 'mithril';
+import { cloneDeep, debounce, isEqual } from 'lodash-es';
+
+import { GridTemplateElement } from 'js/types/session-grid';
+import { executeElement, getGridElementName, getGridTemplateChoices } from 'js/core/session-grid';
+
+import IconButton from 'js/ui/shoelace/icon-button';
+import Input from 'js/ui/shoelace/input';
+import Select from 'js/ui/shoelace/select';
+
+import GridBasicButton from 'js/ui/components/session-grid/grid-basic-button';
+
+type GridTemplateButtonProps = {
+	key?: string;
+	element: GridTemplateElement;
+};
+
+type GridTemplateButtonState = {
+	lastState?: GridTemplateElement;
+	name: string;
+	search: string;
+	selected: string;
+	choices: {
+		id: string;
+		name: string;
+		source?: string;
+	}[];
+};
+
+export default (): m.Component<GridTemplateButtonProps> => {
+	let state: GridTemplateButtonState = {
+		name: '',
+		search: '',
+		selected: '',
+		choices: [],
+	};
+
+	const fetchChoices = debounce((element: GridTemplateElement) => {
+		getGridTemplateChoices(element, state.search).then((res) => {
+			state.choices = res;
+
+			if (state.choices.length === 1) {
+				state.selected = state.choices[0].id;
+			} else {
+				const selected = state.choices.find((choice) => choice.name.toLowerCase() === state.search.toLowerCase());
+				if (selected) {
+					state.selected = selected.id;
+				}
+			}
+
+			m.redraw();
+		});
+	}, 250);
+
+	const fetchAll = (element: GridTemplateElement) => {
+		getGridElementName(element).then((res) => {
+			state.name = res;
+			m.redraw();
+		});
+		fetchChoices(element);
+	};
+
+	const execute = (base: GridTemplateElement) => {
+		if (state.selected.length === 0) {
+			return;
+		}
+		executeElement({
+			...base,
+			entryId: state.selected,
+			dataSourceId: state.choices.find((c) => c.id === state.selected)?.source,
+		});
+	};
+
+	return {
+		oninit: ({ attrs }) => {
+			fetchAll(attrs.element);
+			state.lastState = cloneDeep(attrs.element);
+		},
+		onupdate({ attrs }) {
+			if (!isEqual(state.lastState, attrs.element)) {
+				fetchAll(attrs.element);
+				state.lastState = cloneDeep(attrs.element);
+			}
+		},
+		view: ({ attrs }) => {
+			if (attrs.element.entryId) {
+				return m(GridBasicButton, { element: attrs.element });
+			}
+
+			return m('div.flex.items-center.justify-center', { key: attrs.key, style: { aspectRatio: '1 / 1', padding: 0 } }, [
+				m('div.bg-black-05.flex.flex-column.br3', { key: attrs.key, style: { height: '90%', width: '95%' } }, [
+					m(
+						'div.f8.tc.pa2.bg-primary.white.b.ttu.truncate.w-100.mw-100.flex-grow-0.flex-shrink-0.br3.br--top',
+						{ key: attrs.key, style: { backgroundColor: attrs.element.color } },
+						state.name,
+					), //
+					m('div.ba.b--black-05.flex-grow-1.br3.br--bottom.pa2.flex.flex-column.gap-2.justify-between', [
+						m(Input, {
+							key: attrs.key,
+							placeholder: 'Search entry...',
+							value: state.search,
+							onChange: (val) => {
+								state.search = val;
+								fetchChoices(attrs.element);
+							},
+							onEnter: () => execute(attrs.element),
+						}), //
+						m(Select, {
+							key: attrs.key,
+							keys: state.choices.map((c) => c.id),
+							names: state.choices.map((c) => c.name),
+							selected: state.selected,
+							onInput: (e) => (state.selected = e.target.value),
+						}), //
+						m(IconButton, { key: attrs.key, icon: 'print', intend: 'primary', onClick: () => execute(attrs.element) }, 'Print'),
+					]),
+				]),
+			]);
+		},
+	};
+};
diff --git a/frontend/src/js/ui/components/view-layout/side-nav.ts b/frontend/src/js/ui/components/view-layout/side-nav.ts
index 8aa8b64..44ae798 100644
--- a/frontend/src/js/ui/components/view-layout/side-nav.ts
+++ b/frontend/src/js/ui/components/view-layout/side-nav.ts
@@ -28,6 +28,11 @@ const pages = {
 		icon: 'analytics',
 		url: 'data-source',
 	},
+	'session-grid': {
+		name: 'Session Grid',
+		icon: 'apps',
+		url: 'session-grid',
+	},
 	workshop: {
 		name: 'Workshop',
 		icon: 'cart',
diff --git a/frontend/src/js/ui/shoelace/button.ts b/frontend/src/js/ui/shoelace/button.ts
index 76c3090..1d17196 100644
--- a/frontend/src/js/ui/shoelace/button.ts
+++ b/frontend/src/js/ui/shoelace/button.ts
@@ -1,13 +1,14 @@
 import m from 'mithril';
 
 // @ts-ignore
-import { shell } from 'src/js/electron';
+import { inElectron, shell } from 'src/js/electron';
 
 import { intendToShoelace, sizeToShoelace } from 'js/ui/shoelace/shoelace';
 
 import Flex from 'js/ui/components/layout/flex';
 
 export type ButtonProps = {
+	key?: string;
 	onClick?: () => void;
 	intend?: 'primary' | 'success' | 'error' | 'warning' | 'link';
 	size?: 'sm' | 'lg';
@@ -24,8 +25,10 @@ export default (): m.Component<ButtonProps> => {
 
 		if (url.startsWith('/')) {
 			m.route.set(url);
-		} else {
+		} else if (inElectron) {
 			shell.openExternal(url);
+		} else {
+			window.open(url, '_blank');
 		}
 	};
 
@@ -42,6 +45,7 @@ export default (): m.Component<ButtonProps> => {
 			return m(
 				'sl-button' + (attrs.className ?? ''),
 				{
+					key: attrs.key,
 					variant: intend,
 					size: size,
 					loading: !!attrs.loading,
diff --git a/frontend/src/js/ui/shoelace/color-picker.ts b/frontend/src/js/ui/shoelace/color-picker.ts
new file mode 100644
index 0000000..cd4ba2d
--- /dev/null
+++ b/frontend/src/js/ui/shoelace/color-picker.ts
@@ -0,0 +1,29 @@
+import m from 'mithril';
+
+import { buildProps } from './util';
+
+export type ColorPickerProps = {
+	className?: string;
+	value?: string;
+	default?: string;
+	onChange?: (color: string) => void;
+	swatchColors?: string[];
+};
+
+export default (): m.Component<ColorPickerProps> => ({
+	view: ({ attrs, children }) =>
+		m(
+			`sl-color-picker${attrs.className ?? ''}${buildProps({
+				defaultValue: attrs.default,
+				value: attrs.value,
+				swatches: attrs.swatchColors ? attrs.swatchColors.join(';') : undefined,
+			})}`,
+			{
+				'onsl-change': (e: any) => {
+					console.log(e);
+					attrs.onChange?.(e.target.value);
+				},
+			},
+			children,
+		),
+});
diff --git a/frontend/src/js/ui/shoelace/divider-vert.ts b/frontend/src/js/ui/shoelace/divider-vert.ts
index 6cea056..ffc83d4 100644
--- a/frontend/src/js/ui/shoelace/divider-vert.ts
+++ b/frontend/src/js/ui/shoelace/divider-vert.ts
@@ -8,10 +8,14 @@ const noSpace = css`
 
 type DividerProps = {
 	noSpacing?: boolean;
+	className?: string;
 };
 
 export default (): m.Component<DividerProps> => ({
 	view({ attrs }) {
-		return m('div.flex.items-center', m(`sl-divider[vertical].${attrs.noSpacing ? noSpace : ''}`, { style: { minHeight: '15px' } }));
+		return m(
+			`div.flex.items-center${attrs.className ?? ''}`,
+			m(`sl-divider[vertical].${attrs.noSpacing ? noSpace : ''}`, { style: { minHeight: '15px' } }),
+		);
 	},
 });
diff --git a/frontend/src/js/ui/shoelace/input.ts b/frontend/src/js/ui/shoelace/input.ts
index 84117ab..88420a9 100644
--- a/frontend/src/js/ui/shoelace/input.ts
+++ b/frontend/src/js/ui/shoelace/input.ts
@@ -3,6 +3,7 @@ import m from 'mithril';
 import { css } from 'goober';
 
 type InputProps = {
+	key?: string;
 	className?: string;
 	label?: string;
 	value?: string;
@@ -62,6 +63,7 @@ export default (): m.Component<InputProps> => ({
 		return m(
 			`sl-input${attrs.className ?? ''}[size=small][label=${attrs.label ?? ''}]${attrs.minimal ? '.' + minimalStyle : ''}`,
 			{
+				key: attrs.key,
 				value: attrs.value ?? '',
 				placeholder: attrs.placeholder,
 				type: attrs.type ?? 'text',
diff --git a/frontend/src/js/ui/shoelace/modal.ts b/frontend/src/js/ui/shoelace/modal.ts
index a35cf60..0e9165d 100644
--- a/frontend/src/js/ui/shoelace/modal.ts
+++ b/frontend/src/js/ui/shoelace/modal.ts
@@ -14,6 +14,7 @@ export type ModalProps = {
 	loading?: boolean;
 	loadingMessage?: string;
 	noPadding?: boolean;
+	className?: string;
 };
 
 export default (): m.Component<ModalProps> => ({
@@ -32,7 +33,7 @@ export default (): m.Component<ModalProps> => ({
 					m(Flex, { items: 'center', gap: 2 }, [attrs.icon ? m(Icon, { icon: attrs.icon }) : null, attrs.title]),
 					!attrs.loading ? m(Icon, { icon: 'close', onClick: attrs.onClose }) : null,
 				]),
-				m(`div${attrs.noPadding ? '' : '.pa3'}.relative.flex-grow-1`, [
+				m(`div${attrs.noPadding ? '' : '.pa3'}${attrs.className ?? ''}.relative.flex-grow-1`, [
 					attrs.loading
 						? m(Flex, { className: '.bg-white-80.absolute.left-0.top-0.w-100.h-100.z-5', justify: 'center', items: 'center', direction: 'column' }, [
 								m(Loader),
diff --git a/frontend/src/js/ui/shoelace/select.ts b/frontend/src/js/ui/shoelace/select.ts
index fe9f185..365811d 100644
--- a/frontend/src/js/ui/shoelace/select.ts
+++ b/frontend/src/js/ui/shoelace/select.ts
@@ -1,5 +1,7 @@
 import m from 'mithril';
 
+import { buildProps } from './util';
+
 export type OnInputEvent = {
 	target: {
 		value: string;
@@ -8,6 +10,7 @@ export type OnInputEvent = {
 };
 
 type SelectProps = {
+	key?: string;
 	className?: string;
 	keys: string[];
 	names?: string[];
@@ -16,13 +19,15 @@ type SelectProps = {
 	noDefault?: boolean;
 	width?: number;
 	onInput: (e: OnInputEvent) => void;
+	clearable?: boolean;
 };
 
 export default (): m.Component<SelectProps> => ({
 	view({ attrs }) {
 		return m(
-			`sl-select[size=small]${attrs.className ?? ''}`,
+			`sl-select[size=small]${attrs.className ?? ''}${buildProps({ clearable: attrs.clearable })}`,
 			{
+				key: attrs.key,
 				value: attrs.selected?.replaceAll(' ', '%_%') ?? '',
 				defaultValue: attrs.default,
 				'onsl-change': (e: any) => {
diff --git a/frontend/src/js/ui/shoelace/util.ts b/frontend/src/js/ui/shoelace/util.ts
new file mode 100644
index 0000000..4bb5183
--- /dev/null
+++ b/frontend/src/js/ui/shoelace/util.ts
@@ -0,0 +1,21 @@
+export function buildProps(props: Record<string, any>): string {
+	return Object.keys(props).reduce((acc, key) => {
+		const val = props[key];
+
+		if (val === null || val === undefined) {
+			return acc;
+		}
+
+		switch (typeof val) {
+			case 'boolean':
+				if (val) {
+					return `${acc}[${key}]`;
+				} else {
+					return acc;
+				}
+				break;
+		}
+
+		return `${acc}[${key}=${props[key]}]`;
+	}, '');
+}
diff --git a/frontend/src/js/ui/views/session-grid.ts b/frontend/src/js/ui/views/session-grid.ts
new file mode 100644
index 0000000..ff105f2
--- /dev/null
+++ b/frontend/src/js/ui/views/session-grid.ts
@@ -0,0 +1,414 @@
+import m from 'mithril';
+
+// @ts-ignore
+import { inElectron, shell } from 'src/js/electron';
+
+import { isGridLinearExecution, SessionGrid } from 'js/types/session-grid';
+import * as API from 'js/core/api';
+
+import DividerVert from 'js/ui/shoelace/divider-vert';
+import IconButton from 'js/ui/shoelace/icon-button';
+import Select from 'js/ui/shoelace/select';
+
+import Icon from 'js/ui/components/atomic/icon';
+import InfoIcon from 'js/ui/components/atomic/info-icon';
+import Title from 'js/ui/components/atomic/title';
+import Tooltip from 'js/ui/components/atomic/tooltip';
+import CenterContainer from 'js/ui/components/layout/center-container';
+import Flex from 'js/ui/components/layout/flex';
+import Grid from 'js/ui/components/layout/grid';
+import { openPromptModal } from 'js/ui/components/modals/prompt';
+import { createEditGridButtonModal } from 'js/ui/components/modals/session-grid/create-edit-grid-button';
+import GridEdit from 'js/ui/components/session-grid/grid-edit';
+import Base from 'js/ui/components/view-layout/base';
+
+import { dialogWarning, error } from 'js/ui/toast';
+
+const infoText = `
+  The session grid is a tool to help you organize your sessions.
+  Put the Templates and Generators you need in the grid for quick access.
+`;
+
+type SessionGridProps = {
+	gridName?: string;
+};
+
+type SessionGridState = {
+	selectedGrid: string;
+	playMode: boolean;
+	minimalMode: boolean;
+	grids: Record<string, SessionGrid[]>;
+	width: number;
+};
+
+export default (): m.Component<SessionGridProps> => {
+	const state: SessionGridState = {
+		selectedGrid: '',
+		playMode: false,
+		minimalMode: false,
+		grids: {},
+		width: 0,
+	};
+
+	const getSelectedGrid = () => state.grids[state.selectedGrid];
+
+	const gridsExist = () => Object.keys(state.grids).length > 0;
+
+	const fetchGrids = async () =>
+		API.exec<string>(API.GET_KEY, 'session_grids')
+			.then((res) => {
+				state.grids = JSON.parse(res);
+			})
+			.catch((err) => {
+				console.log(err);
+			});
+
+	const saveGrids = async () => API.exec<string>(API.SET_KEY, 'session_grids', JSON.stringify(state.grids)).catch(error);
+
+	const createNew = () => {
+		openPromptModal({
+			title: 'Create New Session',
+			label: 'Grid Name',
+			description: 'Name of the new session grid',
+			onSuccess: (name: string) => {
+				if (state.grids[name]) {
+					error('Grid already exists');
+					return;
+				}
+
+				if (!name) {
+					error('Name cannot be empty');
+					return;
+				}
+
+				if (name.trim().length < 2) {
+					error('Name must be at least 2 characters');
+					return;
+				}
+
+				state.grids[name] = [{ name: name, elements: [] }];
+				saveGrids();
+			},
+		});
+	};
+
+	const createNewSection = () => {
+		if (state.selectedGrid === '') {
+			error('Select a grid first');
+			return;
+		}
+
+		openPromptModal({
+			title: 'Create New Section',
+			label: 'Section Name',
+			description: 'Name of the new section',
+			onSuccess: (name: string) => {
+				if (!name) {
+					error('Name cannot be empty');
+					return;
+				}
+
+				if (name.trim().length < 2) {
+					error('Name must be at least 2 characters');
+					return;
+				}
+
+				getSelectedGrid()?.push({ name: name, elements: [] });
+				saveGrids();
+			},
+		});
+	};
+
+	const header = () => {
+		if (state.selectedGrid.length === 0 || !state.grids[state.selectedGrid]) {
+			return '';
+		}
+
+		return m(Flex, { justify: 'between', items: 'center', className: '.pa2.bg-white.mb3.ba.b--black-10' }, [
+			m('div', [m('div.ttu.text-muted.f8.fw5.mb2', 'selected grid'), m('div.f6', state.selectedGrid)]), //
+			m(Flex, { gap: 2 }, [
+				m(
+					IconButton,
+					{
+						icon: 'play',
+						intend: 'success',
+						size: 'sm',
+						onClick: () => (state.playMode = true),
+					},
+					'Play-Mode',
+				), //
+				m(
+					Tooltip,
+					{ content: 'Open as window' },
+					m(IconButton, {
+						icon: 'exit',
+						intend: 'primary',
+						size: 'sm',
+						onClick: () => window.open(`${location.href}?gridName=${state.selectedGrid}`, '_blank'),
+					}),
+				),
+				m(
+					Tooltip,
+					{ content: 'Open link in browser' },
+					m(IconButton, {
+						icon: 'link',
+						intend: 'primary',
+						size: 'sm',
+						onClick: () => {
+							API.exec<string>(API.GET_LOCAL_URL, `/${location.hash}?gridName=${state.selectedGrid}`).then((url) => {
+								console.log(url);
+								if (inElectron) {
+									shell.openExternal(url);
+								} else {
+									window.open(url, '_blank');
+								}
+							});
+						},
+					}),
+				),
+				m(DividerVert, { noSpacing: true }),
+				m(IconButton, {
+					icon: 'create',
+					intend: 'primary',
+					size: 'sm',
+					onClick: () => {
+						openPromptModal({
+							title: 'Edit Grid Name',
+							label: 'Grid Name',
+							description: 'Name of the grid',
+							value: state.selectedGrid,
+							onSuccess: (name: string) => {
+								if (state.grids[name]) {
+									error('Grid already exists');
+									return;
+								}
+
+								if (!name) {
+									error('Name cannot be empty');
+									return;
+								}
+
+								if (name.trim().length < 2) {
+									error('Name must be at least 2 characters');
+									return;
+								}
+
+								state.grids[name] = state.grids[state.selectedGrid];
+								delete state.grids[state.selectedGrid];
+								state.selectedGrid = name;
+								saveGrids();
+							},
+						});
+					},
+				}),
+				m(IconButton, {
+					icon: 'trash',
+					intend: 'error',
+					size: 'sm',
+					onClick: () => {
+						dialogWarning('Are you sure you want to delete this grid?').then(() => {
+							delete state.grids[state.selectedGrid];
+							state.selectedGrid = '';
+						});
+					},
+				}),
+			]),
+		]);
+	};
+
+	const content = (small?: boolean) => {
+		if (state.selectedGrid.length === 0 || !state.grids[state.selectedGrid]) {
+			return '';
+		}
+
+		return [
+			state.minimalMode || state.playMode ? null : header(),
+
+			// Sections
+			...getSelectedGrid()?.map((section, i) => [
+				m(Flex, { className: '.f7.b.pb2.bb.b--black-10.mb2.text-muted', justify: 'between', items: 'center' }, [
+					section.name,
+					state.playMode
+						? null
+						: m(Flex, { gap: 2 }, [
+								m(Icon, {
+									icon: 'create',
+									onClick: () => {
+										openPromptModal({
+											title: 'Edit Section Name',
+											label: 'Section Name',
+											description: 'Name of the section',
+											value: section.name,
+											onSuccess: (name: string) => {
+												if (!name) {
+													error('Name cannot be empty');
+													return;
+												}
+
+												if (name.trim().length < 2) {
+													error('Name must be at least 2 characters');
+													return;
+												}
+
+												section.name = name;
+												saveGrids();
+												m.redraw();
+											},
+										});
+									},
+								}), //
+								m(Icon, {
+									icon: 'trash',
+									className: '.col-error',
+									onClick: () => {
+										dialogWarning('Are you sure you want to delete this section?').then(() => {
+											getSelectedGrid()?.splice(i, 1);
+											saveGrids();
+										});
+									},
+								}),
+						  ]),
+				]),
+				m(
+					Grid,
+					{
+						columns: small ? 'minmax(0, 1fr) minmax(0, 1fr)' : 'minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr)',
+						gap: -1,
+						className: '.mb4',
+					},
+					[
+						...section.elements.map((element, i) => {
+							if (isGridLinearExecution(element)) {
+								return;
+							}
+							return m(GridEdit, {
+								inEdit: !(state.minimalMode || state.playMode),
+								element: element,
+								onDelete: () => {
+									section.elements = section.elements.filter((el) => el !== element);
+									saveGrids();
+								},
+								onEdit: () => {
+									createEditGridButtonModal({
+										element: element,
+										onSuccess: (newElement) => {
+											section.elements = section.elements.map((el) => (el === element ? newElement : el));
+											saveGrids();
+										},
+									});
+								},
+								onMoveLeft: () => {
+									if (i === 0 || i >= section.elements.length) {
+										return;
+									}
+									const temp = section.elements[i - 1];
+									section.elements[i - 1] = section.elements[i];
+									section.elements[i] = temp;
+									saveGrids();
+								},
+								onMoveRight: () => {
+									if (i === section.elements.length - 1 || i >= section.elements.length) {
+										return;
+									}
+									const temp = section.elements[i + 1];
+									section.elements[i + 1] = section.elements[i];
+									section.elements[i] = temp;
+									saveGrids();
+								},
+							});
+						}),
+
+						m(
+							'div.flex.items-center.justify-center.o-50',
+							{
+								onclick: () => {
+									createEditGridButtonModal({
+										onSuccess: (element) => {
+											section.elements.push(element);
+											saveGrids();
+										},
+									});
+								},
+								style: { aspectRatio: '1 / 1', padding: 0 },
+							},
+							[
+								m(
+									'div.bg-black-05.br3.flex.items-center.justify-center.pointer.grow',
+									{ style: { height: '90%', width: '90%' } },
+									m(Icon, { icon: 'add-circle-outline', size: 3, className: '.o-30' }),
+								), //
+							],
+						), //
+					],
+				),
+			]),
+
+			// New Section
+			!(state.playMode || state.minimalMode)
+				? m('div.flex.gap-2.items-center.mb6', { onclick: createNewSection }, [
+						m('div.flex-grow-1.bb.b--black-10'),
+						m(Icon, { icon: 'add-circle-outline', size: 6, className: '.o-30.pointer.grow' }),
+						m('div.flex-grow-1.bb.b--black-10'),
+				  ])
+				: null,
+		];
+	};
+
+	return {
+		oninit({ attrs }) {
+			fetchGrids();
+
+			if (attrs.gridName) {
+				window.addEventListener('resize', () => {
+					m.redraw();
+				});
+			}
+		},
+		onupdate() {
+			state.width = window.innerWidth;
+		},
+		view({ attrs }) {
+			if (attrs.gridName) {
+				state.selectedGrid = decodeURI(attrs.gridName);
+				state.minimalMode = true;
+
+				document.title = `${state.selectedGrid} - Session Grid`;
+			}
+
+			if (state.minimalMode) {
+				return m(CenterContainer, m('div.pa3', [content(!!state.width && state.width < 700)]));
+			}
+
+			return m(
+				Base,
+				{
+					title: m(Title, ['Session Grid', m(InfoIcon, { className: '.ml2', size: 7 }, infoText)]),
+					active: 'session-grid',
+					classNameContainer: '.pa3',
+					rightElement: m(Flex, { justify: 'center', items: 'center' }, [
+						gridsExist()
+							? [
+									m(Select, {
+										keys: Object.keys(state.grids),
+										selected: state.selectedGrid,
+										onInput: (sel) => {
+											state.selectedGrid = sel.target.value;
+										},
+									}),
+									m(DividerVert, { noSpacing: true, className: '.ml3.mr2' }),
+							  ]
+							: null,
+						m(IconButton, { icon: 'add-circle-outline', intend: 'link', onClick: () => createNew() }, 'Create'),
+						state.playMode
+							? [
+									m(DividerVert, { noSpacing: true, className: '.mr3' }),
+									m(IconButton, { icon: 'close', onClick: () => (state.playMode = false) }, 'End Play-Mode'),
+							  ]
+							: null,
+					]),
+				},
+				m(CenterContainer, [content()]),
+			);
+		},
+	};
+};
diff --git a/rpc/misc.go b/rpc/misc.go
new file mode 100644
index 0000000..2e45df5
--- /dev/null
+++ b/rpc/misc.go
@@ -0,0 +1,21 @@
+package rpc
+
+import (
+	"fmt"
+	"net"
+
+	"github.com/BigJk/snd/rpc/bind"
+	"github.com/labstack/echo/v4"
+)
+
+func RegisterMisc(route *echo.Group) {
+	bind.MustBind(route, "/getLocalURL", func(path string) (string, error) {
+		conn, err := net.Dial("udp", "8.8.8.8:80")
+		if err != nil {
+			return fmt.Sprintf("http://127.0.0.1:7123%s", path), nil
+		}
+		defer conn.Close()
+		localAddr := conn.LocalAddr().(*net.UDPAddr)
+		return fmt.Sprintf("http://%s:7123%s", localAddr.IP.String(), path), nil
+	})
+}
diff --git a/server/server.go b/server/server.go
index e983f49..9a188c0 100644
--- a/server/server.go
+++ b/server/server.go
@@ -175,6 +175,7 @@ func (s *Server) Start(bindAddr string) error {
 	rpc.RegisterCloud(api, s.db)
 	rpc.RegisterAI(api, s.db)
 	rpc.RegisterFileBrowser(api)
+	rpc.RegisterMisc(api)
 
 	// Expose function list
 	api.GET("/functions", func(c echo.Context) error {