npm - @64mb/freelens-power - Versions diffs - 1.1.0 → 1.2.1 - Mend

@64mb/freelens-power 1.1.0 → 1.2.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (214) hide show

package/out/renderer/cluster-icons.js ADDED Viewed

@@ -0,0 +1,304 @@
+const require_extensions = require("./_virtual/_global-external_@freelensapp/extensions.js");
+const require__global_external_react = require("./_virtual/_global-external_react.js");
+const require_jsx_runtime = require("./_virtual/_global-external_react/jsx-runtime.js");
+const require_cluster_icon_ipc = require("./src/common/cluster-icon-ipc.js");
+const require_cluster_icons = require("./src/common/cluster-icons.js");
+const require_cluster_icon_colors = require("./cluster-icon-colors.js");
+const require_settings_modal = require("./preferences/settings-modal.js");
+let electron = require("electron");
+//#region src/renderer/cluster-icons.tsx
+var styles = `
+.ClusterManager main.power-icon-studio, .power-icon-studio { display: block; position: relative; z-index: 2; flex: 1; min-width: 0; height: 100%; overflow: auto; padding: 32px; box-sizing: border-box; background: var(--mainBackground); color: var(--textColorPrimary); }
+.power-icon-studio > .power-icon-content { max-width: 1000px; margin: 0 auto; }
+.power-icon-header { display: flex; align-items: center; justify-content: space-between; gap: 24px; margin-bottom: 28px; }
+.power-icon-header h1 { font-size: 24px; font-weight: 600; margin: 0 0 8px; color: var(--textColorAccent); }
+.power-icon-header p { margin: 0; color: var(--textColorSecondary); }
+.power-icon-search { width: 240px; }
+.power-icon-grid { display: grid; grid-template-columns: repeat(5,minmax(0,1fr)); gap: 16px; }
+.power-icon-card { display: flex; flex-direction: column; align-items: center; gap: 12px; position: relative; padding: 20px 14px 16px; min-width: 0; border: 1px solid var(--borderFaintColor); border-radius: 14px; background: var(--contentColor); color: var(--textColorPrimary); font: inherit; cursor: pointer; transition: border-color 150ms ease, background-color 150ms ease, transform 150ms ease; }
+.power-icon-card:hover { border-color: var(--primary); background: color-mix(in srgb,var(--primary) 4%,var(--contentColor)); transform: translateY(-2px); }
+.power-icon-card:focus-visible, .power-icon-glyph:focus-visible, .power-icon-swatch:focus-visible { outline: 2px solid var(--primary); outline-offset: 3px; }
+.power-icon-card > img, .power-icon-card .power-icon-current-avatar { width: 64px; height: 64px; object-fit: contain; border-radius: 16px; }
+.power-icon-card-name { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 500; }
+.power-icon-empty { padding: 64px 24px; text-align: center; border: 1px dashed var(--borderFaintColor); border-radius: 14px; color: var(--textColorSecondary); }
+.power-icon-editor { display: grid; grid-template-columns: 144px minmax(0,1fr); gap: 24px; }
+.power-icon-preview { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 22px; padding: 24px 12px; border: 1px solid var(--borderFaintColor); border-radius: 12px; background: var(--contentColor); }
+.power-icon-preview-main { width: 96px; height: 96px; }
+.power-icon-preview-sizes { display: flex; align-items: center; gap: 14px; }
+.power-icon-preview-caption { font-size: 11px; color: var(--textColorSecondary); }
+.power-icon-fields { display: grid; gap: 16px; }
+.power-icon-field { display: flex; align-items: center; justify-content: space-between; gap: 12px; font-size: 13px; }
+.power-icon-field input[type=text] { width: 100px; padding: 8px 10px; border: 1px solid var(--borderFaintColor); border-radius: 6px; background: var(--contentColor); color: var(--textColorPrimary); font: inherit; }
+.power-icon-field input:focus-visible { outline: 1px solid var(--primary); }
+.power-icon-section-label { color: var(--textColorSecondary); font-size: 12px; margin-bottom: 10px; }
+.power-icon-glyphs { display: grid; grid-template-columns: repeat(5,minmax(0,1fr)); gap: 8px; }
+.power-icon-glyph { display: flex; align-items: center; justify-content: center; min-height: 54px; padding: 6px; border: 1px solid var(--borderFaintColor); border-radius: 8px; background: var(--contentColor); cursor: pointer; transition: border-color 150ms ease, background-color 150ms ease; }
+.power-icon-glyph:hover, .power-icon-glyph[aria-pressed=true] { border-color: var(--primary); background: color-mix(in srgb,var(--primary) 8%,var(--contentColor)); }
+.power-icon-glyph img { width: 38px; height: 38px; }
+.power-icon-swatches { display: flex; align-items: center; gap: 8px; }
+.power-icon-swatch { width: 22px; height: 22px; border: 2px solid transparent; border-radius: 50%; cursor: pointer; }
+.power-icon-swatch[aria-pressed=true] { box-shadow: 0 0 0 2px var(--mainBackground),0 0 0 3px var(--primary); }
+.power-icon-footer { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-top: 12px; border-top: 1px solid var(--borderFaintColor); }
+.power-icon-footer-actions { display: flex; gap: 8px; margin-left: auto; }
+.power-icon-error { color: var(--colorError); font-size: 12px; line-height: 1.5; }
+@media (max-width: 900px) { .power-icon-grid { grid-template-columns: repeat(4,minmax(0,1fr)); } }
+@media (max-width: 700px) { .power-icon-header { align-items: stretch; flex-direction: column; } .power-icon-search { width: 100%; } .power-icon-grid { grid-template-columns: repeat(3,minmax(0,1fr)); } .ClusterManager main.power-icon-studio, .power-icon-studio { padding: 20px; } }
+@media (max-width: 480px) { .power-icon-grid { grid-template-columns: repeat(2,minmax(0,1fr)); } .power-icon-editor { grid-template-columns: 1fr; } .power-icon-preview { flex-direction: row; padding: 16px; } .power-icon-preview-main { width: 72px; height: 72px; } }
+@media (prefers-reduced-motion: reduce) { .power-icon-card { transition: none; transform: none; } }
+`;
+function IconEditor({ entry, onClose, onSaved }) {
+	const [design, setDesign] = require__global_external_react.useState(() => entry.design ?? require_cluster_icons.defaultClusterIconDesign(entry.name));
+	const [busy, setBusy] = require__global_external_react.useState(false);
+	const [error, setError] = require__global_external_react.useState("");
+	const paletteOpen = require__global_external_react.useRef(false);
+	const onPaletteOpenChange = require__global_external_react.useCallback((open) => {
+		paletteOpen.current = open;
+	}, []);
+	const update = (key, value) => setDesign((previous) => ({
+		...previous,
+		[key]: value
+	}));
+	const save = async () => {
+		setBusy(true);
+		setError("");
+		try {
+			onSaved(await electron.ipcRenderer.invoke(require_cluster_icon_ipc.CLUSTER_ICONS_CHANNEL, {
+				operation: "apply",
+				id: entry.id,
+				design
+			}));
+		} catch {
+			setError("Unable to save this cluster icon. Try again.");
+		} finally {
+			setBusy(false);
+		}
+	};
+	let validDesign;
+	try {
+		validDesign = require_cluster_icons.normalizeClusterIconDesign(design);
+	} catch {
+		validDesign = void 0;
+	}
+	const previewDesign = validDesign ?? require_cluster_icons.defaultClusterIconDesign(entry.name);
+	const preview = require_cluster_icons.clusterIconDataUrl(previewDesign);
+	return /* @__PURE__ */ require_jsx_runtime.jsxs(require_settings_modal.SettingsModal, {
+		id: "power-cluster-icon-editor",
+		title: entry.name,
+		onClose: () => {
+			if (!busy && !paletteOpen.current) onClose();
+		},
+		children: [
+			/* @__PURE__ */ require_jsx_runtime.jsx("style", { children: styles }),
+			/* @__PURE__ */ require_jsx_runtime.jsxs("div", {
+				className: "power-icon-editor",
+				children: [/* @__PURE__ */ require_jsx_runtime.jsxs("div", {
+					className: "power-icon-preview",
+					children: [
+						/* @__PURE__ */ require_jsx_runtime.jsx("img", {
+							className: "power-icon-preview-main",
+							src: preview,
+							alt: "Cluster icon preview"
+						}),
+						/* @__PURE__ */ require_jsx_runtime.jsx("div", {
+							className: "power-icon-preview-sizes",
+							children: /* @__PURE__ */ require_jsx_runtime.jsx("img", {
+								src: preview,
+								width: 36,
+								height: 36,
+								alt: ""
+							})
+						}),
+						/* @__PURE__ */ require_jsx_runtime.jsx("span", {
+							className: "power-icon-preview-caption",
+							children: "Sidebar preview"
+						})
+					]
+				}), /* @__PURE__ */ require_jsx_runtime.jsxs("div", {
+					className: "power-icon-fields",
+					children: [
+						/* @__PURE__ */ require_jsx_runtime.jsxs("label", {
+							className: "power-icon-field",
+							htmlFor: "power-icon-label",
+							children: ["Label", /* @__PURE__ */ require_jsx_runtime.jsx("input", {
+								id: "power-icon-label",
+								type: "text",
+								value: design.label,
+								onChange: (event) => update("label", Array.from(event.target.value).slice(0, 3).join("")),
+								disabled: busy,
+								autoFocus: true
+							})]
+						}),
+						[
+							["outlineColor", "Outline"],
+							["labelColor", "Label color"],
+							["iconColor", "Icon color"]
+						].map(([key, label]) => /* @__PURE__ */ require_jsx_runtime.jsxs("div", {
+							className: "power-icon-field",
+							children: [/* @__PURE__ */ require_jsx_runtime.jsx("span", { children: label }), /* @__PURE__ */ require_jsx_runtime.jsx(require_cluster_icon_colors.IconColorPicker, {
+								label,
+								value: design[key],
+								onChange: (color) => update(key, color),
+								disabled: busy,
+								onOpenChange: onPaletteOpenChange
+							})]
+						}, key)),
+						/* @__PURE__ */ require_jsx_runtime.jsxs("div", { children: [/* @__PURE__ */ require_jsx_runtime.jsx("div", {
+							className: "power-icon-section-label",
+							children: "Matching outline & label"
+						}), /* @__PURE__ */ require_jsx_runtime.jsx("div", {
+							className: "power-icon-swatches",
+							children: require_cluster_icon_colors.MATCHING_ICON_COLORS.map(({ name, color }) => /* @__PURE__ */ require_jsx_runtime.jsx("button", {
+								type: "button",
+								className: "power-icon-swatch",
+								style: { background: color },
+								title: `${name} · ${color}`,
+								"aria-label": `Use ${color} for outline and label`,
+								"aria-pressed": design.outlineColor === color && design.labelColor === color,
+								disabled: busy,
+								onClick: () => setDesign((previous) => ({
+									...previous,
+									outlineColor: color,
+									labelColor: color
+								}))
+							}, color))
+						})] })
+					]
+				})]
+			}),
+			/* @__PURE__ */ require_jsx_runtime.jsxs("div", { children: [/* @__PURE__ */ require_jsx_runtime.jsx("div", {
+				className: "power-icon-section-label",
+				children: "Choose an icon"
+			}), /* @__PURE__ */ require_jsx_runtime.jsx("div", {
+				className: "power-icon-glyphs",
+				children: require_cluster_icons.GLYPHS.map((glyph) => /* @__PURE__ */ require_jsx_runtime.jsx("button", {
+					type: "button",
+					className: "power-icon-glyph",
+					title: glyph.label,
+					"aria-label": glyph.label,
+					"aria-pressed": design.glyph === glyph.id,
+					disabled: busy,
+					onClick: () => update("glyph", glyph.id),
+					children: /* @__PURE__ */ require_jsx_runtime.jsx("img", {
+						src: require_cluster_icons.clusterIconDataUrl({
+							...previewDesign,
+							glyph: glyph.id
+						}),
+						alt: ""
+					})
+				}, glyph.id))
+			})] }),
+			!validDesign && /* @__PURE__ */ require_jsx_runtime.jsx("div", {
+				role: "alert",
+				className: "power-icon-error",
+				children: "Use up to three visible characters for the label."
+			}),
+			error && /* @__PURE__ */ require_jsx_runtime.jsx("div", {
+				role: "alert",
+				className: "power-icon-error",
+				children: error
+			}),
+			/* @__PURE__ */ require_jsx_runtime.jsx("div", {
+				className: "power-icon-footer",
+				children: /* @__PURE__ */ require_jsx_runtime.jsxs("div", {
+					className: "power-icon-footer-actions",
+					children: [/* @__PURE__ */ require_jsx_runtime.jsx(require_extensions.Renderer.Component.Button, {
+						label: "Cancel",
+						disabled: busy,
+						onClick: onClose
+					}), /* @__PURE__ */ require_jsx_runtime.jsx(require_extensions.Renderer.Component.Button, {
+						primary: true,
+						label: busy ? "Applying…" : "Apply",
+						disabled: busy || !validDesign,
+						onClick: () => void save()
+					})]
+				})
+			})
+		]
+	});
+}
+function ClusterIconsPage() {
+	const [entries, setEntries] = require__global_external_react.useState([]);
+	const [loading, setLoading] = require__global_external_react.useState(true);
+	const [error, setError] = require__global_external_react.useState("");
+	const [query, setQuery] = require__global_external_react.useState("");
+	const [editing, setEditing] = require__global_external_react.useState();
+	const load = () => {
+		setLoading(true);
+		setError("");
+		return electron.ipcRenderer.invoke(require_cluster_icon_ipc.CLUSTER_ICONS_CHANNEL, { operation: "list" }).then(setEntries).catch(() => setError("Unable to load saved clusters. Try again.")).finally(() => setLoading(false));
+	};
+	require__global_external_react.useEffect(() => {
+		load();
+	}, []);
+	const visible = entries.filter((entry) => entry.name.toLocaleLowerCase().includes(query.trim().toLocaleLowerCase()));
+	return /* @__PURE__ */ require_jsx_runtime.jsxs("main", {
+		className: "power-icon-studio",
+		children: [/* @__PURE__ */ require_jsx_runtime.jsx("style", { children: styles }), /* @__PURE__ */ require_jsx_runtime.jsxs("div", {
+			className: "power-icon-content",
+			children: [
+				/* @__PURE__ */ require_jsx_runtime.jsxs("header", {
+					className: "power-icon-header",
+					children: [/* @__PURE__ */ require_jsx_runtime.jsxs("div", { children: [/* @__PURE__ */ require_jsx_runtime.jsx("h1", { children: "Cluster icons" }), /* @__PURE__ */ require_jsx_runtime.jsx("p", { children: "A shared style. A distinct identity for every cluster." })] }), /* @__PURE__ */ require_jsx_runtime.jsx("div", {
+						className: "power-icon-search",
+						children: /* @__PURE__ */ require_jsx_runtime.jsx(require_extensions.Renderer.Component.Input, {
+							value: query,
+							onChange: setQuery,
+							placeholder: "Find a cluster…",
+							"aria-label": "Find a cluster"
+						})
+					})]
+				}),
+				error ? /* @__PURE__ */ require_jsx_runtime.jsxs("div", {
+					className: "power-icon-empty",
+					role: "alert",
+					children: [
+						error,
+						" ",
+						/* @__PURE__ */ require_jsx_runtime.jsx(require_extensions.Renderer.Component.Button, {
+							label: "Retry",
+							onClick: () => void load()
+						})
+					]
+				}) : loading ? /* @__PURE__ */ require_jsx_runtime.jsx("div", {
+					className: "power-icon-empty",
+					role: "status",
+					children: "Loading clusters…"
+				}) : visible.length === 0 ? /* @__PURE__ */ require_jsx_runtime.jsx("div", {
+					className: "power-icon-empty",
+					children: entries.length ? "No matching clusters" : "Your saved clusters will appear here"
+				}) : /* @__PURE__ */ require_jsx_runtime.jsx("div", {
+					className: "power-icon-grid",
+					children: visible.map((entry) => /* @__PURE__ */ require_jsx_runtime.jsxs("button", {
+						type: "button",
+						className: "power-icon-card",
+						title: `Edit icon for ${entry.name}`,
+						onClick: () => setEditing(entry),
+						children: [/* @__PURE__ */ require_jsx_runtime.jsx(require_extensions.Renderer.Component.Avatar, {
+							title: entry.name,
+							size: 64,
+							src: entry.icon?.startsWith("data:image/") ? entry.icon : void 0,
+							background: entry.icon && !entry.icon.startsWith("data:") ? entry.icon : void 0,
+							colorHash: `${entry.name}-${require_extensions.Renderer.Catalog.catalogEntities.getById(entry.id)?.metadata.source ?? ""}`,
+							className: "power-icon-current-avatar"
+						}), /* @__PURE__ */ require_jsx_runtime.jsx("span", {
+							className: "power-icon-card-name",
+							children: entry.name
+						})]
+					}, entry.id))
+				}),
+				editing && /* @__PURE__ */ require_jsx_runtime.jsx(IconEditor, {
+					entry: editing,
+					onClose: () => setEditing(void 0),
+					onSaved: (next) => {
+						setEntries(next);
+						setEditing(void 0);
+					}
+				}, editing.id)
+			]
+		})]
+	});
+}
+//#endregion
+exports.ClusterIconsPage = ClusterIconsPage;
+//# sourceMappingURL=cluster-icons.js.map

package/out/renderer/cluster-icons.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"cluster-icons.js","names":[],"sources":["../../src/renderer/cluster-icons.tsx"],"sourcesContent":["import { Renderer } from \"@freelensapp/extensions\";\nimport { ipcRenderer } from \"electron\";\nimport { useCallback, useEffect, useRef, useState } from \"react\";\nimport { CLUSTER_ICONS_CHANNEL, type ClusterIconEntry } from \"../common/cluster-icon-ipc\";\nimport {\n type ClusterIconDesign,\n clusterIconDataUrl,\n defaultClusterIconDesign,\n GLYPHS,\n normalizeClusterIconDesign,\n} from \"../common/cluster-icons\";\nimport { IconColorPicker, MATCHING_ICON_COLORS } from \"./cluster-icon-colors\";\nimport { SettingsModal } from \"./preferences/settings-modal\";\n\nconst styles = `\n.ClusterManager main.power-icon-studio, .power-icon-studio { display: block; position: relative; z-index: 2; flex: 1; min-width: 0; height: 100%; overflow: auto; padding: 32px; box-sizing: border-box; background: var(--mainBackground); color: var(--textColorPrimary); }\n.power-icon-studio > .power-icon-content { max-width: 1000px; margin: 0 auto; }\n.power-icon-header { display: flex; align-items: center; justify-content: space-between; gap: 24px; margin-bottom: 28px; }\n.power-icon-header h1 { font-size: 24px; font-weight: 600; margin: 0 0 8px; color: var(--textColorAccent); }\n.power-icon-header p { margin: 0; color: var(--textColorSecondary); }\n.power-icon-search { width: 240px; }\n.power-icon-grid { display: grid; grid-template-columns: repeat(5,minmax(0,1fr)); gap: 16px; }\n.power-icon-card { display: flex; flex-direction: column; align-items: center; gap: 12px; position: relative; padding: 20px 14px 16px; min-width: 0; border: 1px solid var(--borderFaintColor); border-radius: 14px; background: var(--contentColor); color: var(--textColorPrimary); font: inherit; cursor: pointer; transition: border-color 150ms ease, background-color 150ms ease, transform 150ms ease; }\n.power-icon-card:hover { border-color: var(--primary); background: color-mix(in srgb,var(--primary) 4%,var(--contentColor)); transform: translateY(-2px); }\n.power-icon-card:focus-visible, .power-icon-glyph:focus-visible, .power-icon-swatch:focus-visible { outline: 2px solid var(--primary); outline-offset: 3px; }\n.power-icon-card > img, .power-icon-card .power-icon-current-avatar { width: 64px; height: 64px; object-fit: contain; border-radius: 16px; }\n.power-icon-card-name { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 500; }\n.power-icon-empty { padding: 64px 24px; text-align: center; border: 1px dashed var(--borderFaintColor); border-radius: 14px; color: var(--textColorSecondary); }\n.power-icon-editor { display: grid; grid-template-columns: 144px minmax(0,1fr); gap: 24px; }\n.power-icon-preview { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 22px; padding: 24px 12px; border: 1px solid var(--borderFaintColor); border-radius: 12px; background: var(--contentColor); }\n.power-icon-preview-main { width: 96px; height: 96px; }\n.power-icon-preview-sizes { display: flex; align-items: center; gap: 14px; }\n.power-icon-preview-caption { font-size: 11px; color: var(--textColorSecondary); }\n.power-icon-fields { display: grid; gap: 16px; }\n.power-icon-field { display: flex; align-items: center; justify-content: space-between; gap: 12px; font-size: 13px; }\n.power-icon-field input[type=text] { width: 100px; padding: 8px 10px; border: 1px solid var(--borderFaintColor); border-radius: 6px; background: var(--contentColor); color: var(--textColorPrimary); font: inherit; }\n.power-icon-field input:focus-visible { outline: 1px solid var(--primary); }\n.power-icon-section-label { color: var(--textColorSecondary); font-size: 12px; margin-bottom: 10px; }\n.power-icon-glyphs { display: grid; grid-template-columns: repeat(5,minmax(0,1fr)); gap: 8px; }\n.power-icon-glyph { display: flex; align-items: center; justify-content: center; min-height: 54px; padding: 6px; border: 1px solid var(--borderFaintColor); border-radius: 8px; background: var(--contentColor); cursor: pointer; transition: border-color 150ms ease, background-color 150ms ease; }\n.power-icon-glyph:hover, .power-icon-glyph[aria-pressed=true] { border-color: var(--primary); background: color-mix(in srgb,var(--primary) 8%,var(--contentColor)); }\n.power-icon-glyph img { width: 38px; height: 38px; }\n.power-icon-swatches { display: flex; align-items: center; gap: 8px; }\n.power-icon-swatch { width: 22px; height: 22px; border: 2px solid transparent; border-radius: 50%; cursor: pointer; }\n.power-icon-swatch[aria-pressed=true] { box-shadow: 0 0 0 2px var(--mainBackground),0 0 0 3px var(--primary); }\n.power-icon-footer { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-top: 12px; border-top: 1px solid var(--borderFaintColor); }\n.power-icon-footer-actions { display: flex; gap: 8px; margin-left: auto; }\n.power-icon-error { color: var(--colorError); font-size: 12px; line-height: 1.5; }\n@media (max-width: 900px) { .power-icon-grid { grid-template-columns: repeat(4,minmax(0,1fr)); } }\n@media (max-width: 700px) { .power-icon-header { align-items: stretch; flex-direction: column; } .power-icon-search { width: 100%; } .power-icon-grid { grid-template-columns: repeat(3,minmax(0,1fr)); } .ClusterManager main.power-icon-studio, .power-icon-studio { padding: 20px; } }\n@media (max-width: 480px) { .power-icon-grid { grid-template-columns: repeat(2,minmax(0,1fr)); } .power-icon-editor { grid-template-columns: 1fr; } .power-icon-preview { flex-direction: row; padding: 16px; } .power-icon-preview-main { width: 72px; height: 72px; } }\n@media (prefers-reduced-motion: reduce) { .power-icon-card { transition: none; transform: none; } }\n`;\n\nfunction IconEditor({\n entry,\n onClose,\n onSaved,\n}: {\n entry: ClusterIconEntry;\n onClose: () => void;\n onSaved: (entries: ClusterIconEntry[]) => void;\n}) {\n const [design, setDesign] = useState<ClusterIconDesign>(() => entry.design ?? defaultClusterIconDesign(entry.name));\n const [busy, setBusy] = useState(false);\n const [error, setError] = useState(\"\");\n const paletteOpen = useRef(false);\n const onPaletteOpenChange = useCallback((open: boolean) => {\n paletteOpen.current = open;\n }, []);\n const update = (key: keyof ClusterIconDesign, value: string) =>\n setDesign((previous) => ({ ...previous, [key]: value }));\n const save = async () => {\n setBusy(true);\n setError(\"\");\n try {\n const entries = await ipcRenderer.invoke(CLUSTER_ICONS_CHANNEL, {\n operation: \"apply\",\n id: entry.id,\n design,\n });\n onSaved(entries);\n } catch {\n setError(\"Unable to save this cluster icon. Try again.\");\n } finally {\n setBusy(false);\n }\n };\n let validDesign: ClusterIconDesign | undefined;\n try {\n validDesign = normalizeClusterIconDesign(design);\n } catch {\n validDesign = undefined;\n }\n const previewDesign = validDesign ?? defaultClusterIconDesign(entry.name);\n const preview = clusterIconDataUrl(previewDesign);\n return (\n <SettingsModal\n id=\"power-cluster-icon-editor\"\n title={entry.name}\n onClose={() => {\n if (!busy && !paletteOpen.current) onClose();\n }}\n >\n <style>{styles}</style>\n <div className=\"power-icon-editor\">\n <div className=\"power-icon-preview\">\n <img className=\"power-icon-preview-main\" src={preview} alt=\"Cluster icon preview\" />\n <div className=\"power-icon-preview-sizes\">\n <img src={preview} width={36} height={36} alt=\"\" />\n </div>\n <span className=\"power-icon-preview-caption\">Sidebar preview</span>\n </div>\n <div className=\"power-icon-fields\">\n <label className=\"power-icon-field\" htmlFor=\"power-icon-label\">\n Label\n <input\n id=\"power-icon-label\"\n type=\"text\"\n value={design.label}\n onChange={(event) => update(\"label\", Array.from(event.target.value).slice(0, 3).join(\"\"))}\n disabled={busy}\n autoFocus\n />\n </label>\n {(\n [\n [\"outlineColor\", \"Outline\"],\n [\"labelColor\", \"Label color\"],\n [\"iconColor\", \"Icon color\"],\n ] as const\n ).map(([key, label]) => (\n <div className=\"power-icon-field\" key={key}>\n <span>{label}</span>\n <IconColorPicker\n label={label}\n value={design[key]}\n onChange={(color) => update(key, color)}\n disabled={busy}\n onOpenChange={onPaletteOpenChange}\n />\n </div>\n ))}\n <div>\n <div className=\"power-icon-section-label\">Matching outline & label</div>\n <div className=\"power-icon-swatches\">\n {MATCHING_ICON_COLORS.map(({ name, color }) => (\n <button\n key={color}\n type=\"button\"\n className=\"power-icon-swatch\"\n style={{ background: color }}\n title={`${name} · ${color}`}\n aria-label={`Use ${color} for outline and label`}\n aria-pressed={design.outlineColor === color && design.labelColor === color}\n disabled={busy}\n onClick={() => setDesign((previous) => ({ ...previous, outlineColor: color, labelColor: color }))}\n />\n ))}\n </div>\n </div>\n </div>\n </div>\n <div>\n <div className=\"power-icon-section-label\">Choose an icon</div>\n <div className=\"power-icon-glyphs\">\n {GLYPHS.map((glyph) => (\n <button\n type=\"button\"\n key={glyph.id}\n className=\"power-icon-glyph\"\n title={glyph.label}\n aria-label={glyph.label}\n aria-pressed={design.glyph === glyph.id}\n disabled={busy}\n onClick={() => update(\"glyph\", glyph.id)}\n >\n <img src={clusterIconDataUrl({ ...previewDesign, glyph: glyph.id })} alt=\"\" />\n </button>\n ))}\n </div>\n </div>\n {!validDesign && (\n <div role=\"alert\" className=\"power-icon-error\">\n Use up to three visible characters for the label.\n </div>\n )}\n {error && (\n <div role=\"alert\" className=\"power-icon-error\">\n {error}\n </div>\n )}\n <div className=\"power-icon-footer\">\n <div className=\"power-icon-footer-actions\">\n <Renderer.Component.Button label=\"Cancel\" disabled={busy} onClick={onClose} />\n <Renderer.Component.Button\n primary\n label={busy ? \"Applying…\" : \"Apply\"}\n disabled={busy || !validDesign}\n onClick={() => void save()}\n />\n </div>\n </div>\n </SettingsModal>\n );\n}\n\nexport function ClusterIconsPage() {\n const [entries, setEntries] = useState<ClusterIconEntry[]>([]);\n const [loading, setLoading] = useState(true);\n const [error, setError] = useState(\"\");\n const [query, setQuery] = useState(\"\");\n const [editing, setEditing] = useState<ClusterIconEntry>();\n const load = () => {\n setLoading(true);\n setError(\"\");\n return ipcRenderer\n .invoke(CLUSTER_ICONS_CHANNEL, { operation: \"list\" })\n .then(setEntries)\n .catch(() => setError(\"Unable to load saved clusters. Try again.\"))\n .finally(() => setLoading(false));\n };\n useEffect(() => {\n void load();\n }, []);\n const visible = entries.filter((entry) => entry.name.toLocaleLowerCase().includes(query.trim().toLocaleLowerCase()));\n return (\n <main className=\"power-icon-studio\">\n <style>{styles}</style>\n <div className=\"power-icon-content\">\n <header className=\"power-icon-header\">\n <div>\n <h1>Cluster icons</h1>\n <p>A shared style. A distinct identity for every cluster.</p>\n </div>\n <div className=\"power-icon-search\">\n <Renderer.Component.Input\n value={query}\n onChange={setQuery}\n placeholder=\"Find a cluster…\"\n aria-label=\"Find a cluster\"\n />\n </div>\n </header>\n {error ? (\n <div className=\"power-icon-empty\" role=\"alert\">\n {error} <Renderer.Component.Button label=\"Retry\" onClick={() => void load()} />\n </div>\n ) : loading ? (\n <div className=\"power-icon-empty\" role=\"status\">\n Loading clusters…\n </div>\n ) : visible.length === 0 ? (\n <div className=\"power-icon-empty\">\n {entries.length ? \"No matching clusters\" : \"Your saved clusters will appear here\"}\n </div>\n ) : (\n <div className=\"power-icon-grid\">\n {visible.map((entry) => (\n <button\n type=\"button\"\n key={entry.id}\n className=\"power-icon-card\"\n title={`Edit icon for ${entry.name}`}\n onClick={() => setEditing(entry)}\n >\n <Renderer.Component.Avatar\n title={entry.name}\n size={64}\n src={entry.icon?.startsWith(\"data:image/\") ? entry.icon : undefined}\n background={entry.icon && !entry.icon.startsWith(\"data:\") ? entry.icon : undefined}\n colorHash={`${entry.name}-${Renderer.Catalog.catalogEntities.getById(entry.id)?.metadata.source ?? \"\"}`}\n className=\"power-icon-current-avatar\"\n />\n <span className=\"power-icon-card-name\">{entry.name}</span>\n </button>\n ))}\n </div>\n )}\n {editing && (\n <IconEditor\n key={editing.id}\n entry={editing}\n onClose={() => setEditing(undefined)}\n onSaved={(next) => {\n setEntries(next);\n setEditing(undefined);\n }}\n />\n )}\n </div>\n </main>\n );\n}\n"],"mappings":"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"}

package/out/renderer/dashboard.js CHANGED Viewed

@@ -51,14 +51,20 @@ var styles = `
   .freelens-power-dashboard button.power-dashboard-expand[aria-pressed="true"] .Icon { color: var(--primary); }
   .freelens-power-dashboard button.power-dashboard-expand[aria-pressed="true"]:hover { background: color-mix(in srgb, var(--primary) 12%, transparent); }
   .freelens-power-dashboard button.power-dashboard-expand:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
-  .freelens-power-dashboard .power-dashboard-card-s { grid-column: span 1; grid-row: span 1; }
-  .freelens-power-dashboard .power-dashboard-card-m { grid-column: span var(--power-medium-span, 2); grid-row: span 2; }
-  .freelens-power-dashboard .power-dashboard-card-l { grid-column: span var(--power-large-span, 4); grid-row: span 4; }
+  .freelens-power-dashboard .power-dashboard-card-xs { grid-column: span 1; grid-row: span 1; }
+  .freelens-power-dashboard .power-dashboard-card-s { grid-column: span var(--power-small-span, 2); grid-row: span 2; }
+  .freelens-power-dashboard .power-dashboard-card-m { grid-column: span var(--power-medium-span, 4); grid-row: span 2; }
+  .freelens-power-dashboard .power-dashboard-card-l { grid-column: span var(--power-large-span, 4); grid-row: span 3; }
+  .freelens-power-dashboard .power-dashboard-card-xl { grid-column: span var(--power-columns, 4); grid-row: span 3; }
   .freelens-power-dashboard .power-dashboard-card-header {
     display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 6px 12px;
   }
   .freelens-power-dashboard h2 { margin: 0; font-size: 14px; overflow-wrap: anywhere; }
   .freelens-power-dashboard .power-dashboard-card-title { display: flex; align-items: center; gap: 8px; min-width: 0; }
+  .freelens-power-dashboard .power-dashboard-card-title h2 { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+  .freelens-power-dashboard .power-dashboard-card-xs .power-dashboard-card-header { flex-wrap: wrap; row-gap: 4px; }
+  .freelens-power-dashboard .power-dashboard-card-xs .power-dashboard-card-title { flex-basis: 100%; }
+  .freelens-power-dashboard .power-dashboard-card-xs .power-dashboard-card-actions { margin-left: auto; }
   .freelens-power-dashboard .power-dashboard-site-icon { width: 16px; height: 16px; border-radius: 4px; object-fit: contain; flex-shrink: 0; }
   .freelens-power-dashboard .power-dashboard-card-header a {
     flex-shrink: 0; color: var(--textColorPrimary); font-size: 12px; transition: color 160ms ease;
@@ -73,6 +79,7 @@ var styles = `
   @keyframes power-dashboard-loading { 50% { opacity: .45; } }
   @media (prefers-reduced-motion: reduce) { .freelens-power-dashboard .power-dashboard-skeleton span { animation: none; } }
   .freelens-power-dashboard .power-dashboard-hint { margin: 16px 0 0; font-size: 12px; }
+  .power-dashboard-right-tooltip { position: fixed !important; left: calc(anchor(right) + 8px) !important; top: anchor(center) !important; right: auto !important; bottom: auto !important; translate: 0 -50%; white-space: nowrap !important; max-width: none !important; }
   .freelens-power-dashboard .power-dashboard-empty {
     padding: 40px 24px; border: 1px solid var(--borderFaintColor); border-radius: 12px;
     background: var(--contentColor); text-align: center;
@@ -83,6 +90,22 @@ var styles = `
     .freelens-power-dashboard .power-dashboard-header { flex-wrap: wrap; }
   }
 `;
+function DashboardActionIcon({ material, tooltip }) {
+	const [anchor] = require__global_external_react.useState(() => `--power-dashboard-action-${crypto.randomUUID()}`);
+	return /* @__PURE__ */ require_jsx_runtime.jsx(require_extensions.Renderer.Component.Icon, {
+		material,
+		size: 18,
+		style: {
+			anchorName: anchor,
+			"--size": "18px"
+		},
+		tooltip: {
+			children: tooltip,
+			className: "power-dashboard-right-tooltip",
+			style: { positionAnchor: anchor }
+		}
+	});
+}
 function WebsiteIcon({ url, favicon }) {
 	const [failed, setFailed] = require__global_external_react.useState(false);
 	if (failed) return /* @__PURE__ */ require_jsx_runtime.jsx("span", {
@@ -234,10 +257,11 @@ var DashboardPage = require__global_external_mobx_react.observer(({ onOpenPrefer
 			frame = 0;
 			const containerStyle = window.getComputedStyle(container);
 			const contentWidth = container.clientWidth - (Number.parseFloat(containerStyle.paddingLeft) || 0) - (Number.parseFloat(containerStyle.paddingRight) || 0);
-			const columns = Math.max(1, Math.min(12, Math.floor((contentWidth + 20) / 260)));
+			const columns = contentWidth >= 1200 ? 6 : contentWidth >= 800 ? 4 : contentWidth >= 520 ? 2 : 1;
 			for (const [property, value] of Object.entries({
 				"--power-columns": columns,
-				"--power-medium-span": Math.min(2, columns),
+				"--power-small-span": Math.min(2, columns),
+				"--power-medium-span": Math.min(4, columns),
 				"--power-large-span": Math.min(4, columns)
 			})) if (container.style.getPropertyValue(property) !== String(value)) container.style.setProperty(property, String(value));
 			const containerBounds = container.getBoundingClientRect();
@@ -382,18 +406,33 @@ var DashboardPage = require__global_external_mobx_react.observer(({ onOpenPrefer
 						}), /* @__PURE__ */ require_jsx_runtime.jsxs("div", {
 							className: "power-dashboard-card-actions",
 							children: [
+								/* @__PURE__ */ require_jsx_runtime.jsx("button", {
+									type: "button",
+									className: "power-dashboard-expand",
+									"aria-label": `Auto-refresh ${card.title} every 10 seconds`,
+									"aria-pressed": card.refreshEvery10Seconds === true,
+									onClick: () => {
+										preferences.upsertCard({
+											...card,
+											refreshEvery10Seconds: !card.refreshEvery10Seconds
+										});
+									},
+									children: /* @__PURE__ */ require_jsx_runtime.jsx(DashboardActionIcon, {
+										material: "autorenew",
+										tooltip: card.refreshEvery10Seconds ? "Disable refresh" : "Enable refresh (10s)"
+									})
+								}),
 								/* @__PURE__ */ require_jsx_runtime.jsx("button", {
 									type: "button",
 									className: "power-dashboard-expand",
 									"aria-label": `${pinnedCards.includes(card.id) ? "Unpin" : "Pin"} ${card.title}`,
 									"aria-pressed": pinnedCards.includes(card.id),
-									title: pinnedCards.includes(card.id) ? "Close pinned window" : "Pin above other windows",
 									onClick: () => {
 										togglePinned(card.id);
 									},
-									children: /* @__PURE__ */ require_jsx_runtime.jsx(require_extensions.Renderer.Component.Icon, {
+									children: /* @__PURE__ */ require_jsx_runtime.jsx(DashboardActionIcon, {
 										material: "push_pin",
-										size: 18
+										tooltip: pinnedCards.includes(card.id) ? "Unpin" : "Pin"
 									})
 								}),
 								/* @__PURE__ */ require_jsx_runtime.jsx("button", {
@@ -401,14 +440,13 @@ var DashboardPage = require__global_external_mobx_react.observer(({ onOpenPrefer
 									className: "power-dashboard-expand",
 									"aria-label": `${expanded === card.id ? "Restore" : "Expand"} ${card.title}`,
 									"aria-pressed": expanded === card.id,
-									title: expanded === card.id ? "Restore" : "Expand",
 									onClick: () => {
 										if (!expanded) gridScrollTop.current = root.current?.scrollTop ?? 0;
 										setExpandedId(expanded === card.id ? null : card.id);
 									},
-									children: /* @__PURE__ */ require_jsx_runtime.jsx(require_extensions.Renderer.Component.Icon, {
+									children: /* @__PURE__ */ require_jsx_runtime.jsx(DashboardActionIcon, {
 										material: expanded === card.id ? "fullscreen_exit" : "fullscreen",
-										size: 18
+										tooltip: expanded === card.id ? "Restore" : "Expand"
 									})
 								}),
 								/* @__PURE__ */ require_jsx_runtime.jsx("a", {
@@ -420,10 +458,9 @@ var DashboardPage = require__global_external_mobx_react.observer(({ onOpenPrefer
 									target: "_blank",
 									rel: "noopener noreferrer",
 									"aria-label": `Open ${card.title} in browser`,
-									children: /* @__PURE__ */ require_jsx_runtime.jsx(require_extensions.Renderer.Component.Icon, {
+									children: /* @__PURE__ */ require_jsx_runtime.jsx(DashboardActionIcon, {
 										material: "open_in_new",
-										size: 18,
-										tooltip: "Open in browser"
+										tooltip: "Open"
 									})
 								})
 							]