skins: Updated Windows 95 skin

Prozilla · Prozilla · commit a885234459cc · 2026-04-06T19:15:08.000+02:00
diff --git a/demo/src/Main.tsx b/demo/src/Main.tsx
@@ -1,39 +1,34 @@
-import { ReactElement, useEffect, useState } from "react";
+import { ReactElement } from "react";
 import { defaultSkin } from "./config/skin.config";
 import { NAME, TAG_LINE } from "./config/branding.config";
 import { appsConfig } from "./config/apps.config";
-import { getViewportParams, ProzillaOS, Router } from "prozilla-os";
+import { getViewportParams, ProzillaOS, Router, useLazyRef } from "prozilla-os";
 import { macOsSkin, minimalSkin, pixelSkin, windows95Skin } from "@prozilla-os/skins";
 
 export function Main(): ReactElement {
-	const [skin, setSkin] = useState(defaultSkin);
-
-	useEffect(() => {
+	const skinRef = useLazyRef(() => {
 		const params = getViewportParams();
 
-		if (params.skin == null)
-			return;
-
-		switch (params.skin) {
-			case "mac":
-				setSkin(macOsSkin);
-				break;
-			case "minimal":
-				setSkin(minimalSkin);
-				break;
-			case "pixel":
-				setSkin(pixelSkin);
-				break;
-			case "win95":
-				setSkin(windows95Skin);
-				break;
+		if (params.skin != null) {
+			switch (params.skin) {
+				case "mac":
+					return macOsSkin;
+				case "minimal":
+					return minimalSkin;
+				case "pixel":
+					return pixelSkin;
+				case "win95":
+					return windows95Skin;
+			}
 		}
-	}, []);
+
+		return defaultSkin;
+	});
 
 	return <ProzillaOS
 		systemName={NAME}
 		tagLine={TAG_LINE}
-		skin={skin}
+		skin={skinRef.current}
 		config={{
 			apps: appsConfig,
 		}}
diff --git a/packages/apps/terminal/src/components/InputLine.tsx b/packages/apps/terminal/src/components/InputLine.tsx
@@ -1,4 +1,4 @@
-import { ChangeEvent, CSSProperties, KeyboardEvent, MutableRefObject, useState } from "react";
+import { ChangeEvent, CSSProperties, KeyboardEvent, RefObject, useState } from "react";
 import styles from "./Terminal.module.css";
 import { Ansi } from "./Ansi";
 
@@ -9,7 +9,7 @@ interface InputLineProps {
 	onChange: (event: ChangeEvent<HTMLInputElement>) => void;
 	onKeyUp?: (event: KeyboardEvent<HTMLInputElement>) => void;
 	onKeyDown?: (event: KeyboardEvent<HTMLInputElement>) => void;
-	inputRef: MutableRefObject<HTMLInputElement>;
+	inputRef: RefObject<HTMLInputElement>;
 }
 
 export function InputLine({ value, prefix, onChange, onKeyUp, onKeyDown, inputRef }: InputLineProps) {
diff --git a/packages/apps/terminal/src/components/Terminal.tsx b/packages/apps/terminal/src/components/Terminal.tsx
@@ -1,4 +1,4 @@
-import { ChangeEventHandler, KeyboardEventHandler, MouseEventHandler, MutableRefObject, useEffect, useRef, useState } from "react";
+import { ChangeEventHandler, KeyboardEventHandler, MouseEventHandler, useEffect, useRef, useState } from "react";
 import styles from "./Terminal.module.css";
 import { OutputLine } from "./OutputLine";
 import { InputLine } from "./InputLine";
@@ -396,7 +396,7 @@ export function Terminal({ app, path: startPath, input, setTitle, close: exit, a
 					prefix={prefix}
 					onKeyDown={onKeyDown}
 					onChange={onChange}
-					inputRef={inputRef as unknown as MutableRefObject<HTMLInputElement>}
+					inputRef={inputRef}
 				/>
 				: <OutputLine text={streamOutput ?? ""}/>
 			}
diff --git a/packages/core/src/components/actions/Actions.tsx b/packages/core/src/components/actions/Actions.tsx
@@ -3,6 +3,7 @@ import { useShortcuts } from "../../hooks/_utils/keyboard";
 import styles from "./Actions.module.css";
 import { useScreenBounds } from "../../hooks/_utils/screen";
 import { ActionsManager } from "../../features/actions/actionsManager";
+import { useClassNames } from "../../hooks";
 
 export interface ActionProps {
 	/** ID of the action. */
@@ -115,7 +116,7 @@ export function Actions({ children, mode, className, onAnyTrigger, triggerParams
 	if (!initiated)
 		classNames.push(styles.Uninitiated);
 
-	return <div ref={ref as Ref<HTMLDivElement>} className={classNames.join(" ")}>
+	return <div ref={ref as Ref<HTMLDivElement>} className={useClassNames(classNames, "Actions", undefined, mode)}>
 		{iterateOverChildren(children)}
 	</div>;
 }
diff --git a/packages/core/src/components/actions/actions/ClickAction.tsx b/packages/core/src/components/actions/actions/ClickAction.tsx
@@ -5,6 +5,7 @@ import { IconProp } from "@fortawesome/fontawesome-svg-core";
 import { ActionProps } from "../Actions";
 import { formatShortcut } from "../../../features";
 import { ImagePreview } from "../../_utils/directory-list/ImagePreview";
+import { useClassNames } from "../../../hooks";
 
 export interface ClickActionProps extends ActionProps {
 	icon?: string | object;
@@ -15,8 +16,8 @@ export const ClickAction = memo(({ actionId, label, shortcut, disabled, onTrigge
 	if (disabled)
 		classNames.push(styles.Disabled);
 
-	return (<button key={actionId} className={classNames.join(" ")} tabIndex={0} disabled={disabled} onClick={onTrigger as unknown as MouseEventHandler}>
-		<span className={styles.Label}>
+	return <button key={actionId} className={useClassNames(classNames, "Actions", "Click")} tabIndex={0} disabled={disabled} onClick={onTrigger as unknown as MouseEventHandler}>
+		<span className={useClassNames([styles.Label], "Actions", "Label")}>
 			{icon && <div className={styles.Icon}>
 				{typeof icon == "string"
 					? <ImagePreview source={icon} className={styles.ImageIcon}/>
@@ -26,5 +27,5 @@ export const ClickAction = memo(({ actionId, label, shortcut, disabled, onTrigge
 			<p>{label}</p>
 		</span>
 		{shortcut && <p className={styles.Shortcut}>{formatShortcut(shortcut)}</p>}
-	</button>);
+	</button>;
 });
diff --git a/packages/core/src/components/actions/actions/Divider.tsx b/packages/core/src/components/actions/actions/Divider.tsx
@@ -1,5 +1,6 @@
+import { useClassNames } from "../../../hooks";
 import styles from "../Actions.module.css";
 
 export function Divider() {
-	return <div className={styles.Divider}/>;
+	return <div className={useClassNames([styles.Divider], "Actions", "Divider")}/>;
 }
diff --git a/packages/core/src/components/actions/actions/DropdownAction.tsx b/packages/core/src/components/actions/actions/DropdownAction.tsx
@@ -4,6 +4,7 @@ import { faCaretRight, IconDefinition } from "@fortawesome/free-solid-svg-icons"
 import { ReactElement, useState } from "react";
 import { ActionProps } from "../Actions";
 import { OutsideClickListener } from "../../../hooks/_utils/outsideClick";
+import { useClassNames } from "../../../hooks";
 
 export interface DropdownActionProps extends ActionProps {
 	showOnHover?: boolean;
@@ -22,7 +23,7 @@ export function DropdownAction({ label, icon, children, showOnHover = true }: Dr
 	}}>
 		<div
 			key={label}
-			className={classNames.join(" ")}
+			className={useClassNames(classNames, "Actions", "Dropdown")}
 			tabIndex={0}
 			onMouseEnter={() => {
 				if (showOnHover)
@@ -37,12 +38,12 @@ export function DropdownAction({ label, icon, children, showOnHover = true }: Dr
 					setShowContent(!showContent);
 			}}
 		>
-			<span className={styles.Label}>
+			<span className={useClassNames([styles.Label], "Actions", "Label")}>
 				{icon && <div className={styles.Icon}><FontAwesomeIcon icon={icon as IconDefinition}/></div>}
 				<p>{label}</p>
 			</span>
 			<div className={styles.DropdownArrow}><FontAwesomeIcon icon={faCaretRight}/></div>
-			<div className={styles.DropdownContent}>
+			<div className={useClassNames([styles.DropdownContent], "Actions", "Content")}>
 				{children}
 			</div>
 		</div>
diff --git a/packages/core/src/components/actions/actions/RadioAction.tsx b/packages/core/src/components/actions/actions/RadioAction.tsx
@@ -5,6 +5,7 @@ import { faCircleDot } from "@fortawesome/free-solid-svg-icons";
 import { ReactElement, useState } from "react";
 import { faCircle } from "@fortawesome/free-regular-svg-icons";
 import { ActionProps } from "../Actions";
+import { useClassNames } from "../../../hooks";
 
 export interface RadioActionProps extends ActionProps {
 	options: {
@@ -17,13 +18,13 @@ export interface RadioActionProps extends ActionProps {
 export function RadioAction({ actionId, options, initialIndex, onTrigger }: RadioActionProps): ReactElement {
 	const [activeIndex, setActiveIndex] = useState(initialIndex ?? 0);
 
-	return (<div key={actionId}>
+	return <div key={actionId} className={useClassNames([], "Actions", "Radio")}>
 		{options.map(({ label, shortcut }, index) =>
 			<button key={label} className={styles.Button} tabIndex={0} onClick={(event) => {
 				setActiveIndex(index);
 				onTrigger?.(event as unknown as Event, index);
 			}}>
-				<span className={styles.Label}>
+				<span className={useClassNames([styles.Label], "Actions", "Label")}>
 					<div className={styles.Icon}>
 						{activeIndex === index
 							? <FontAwesomeIcon icon={faCircleDot}/>
@@ -35,5 +36,5 @@ export function RadioAction({ actionId, options, initialIndex, onTrigger }: Radi
 				{shortcut && <p className={styles.Shortcut}>{formatShortcut(shortcut)}</p>}
 			</button>
 		)}
-	</div>);
+	</div>;
 }
diff --git a/packages/core/src/components/actions/actions/TextDisplay.tsx b/packages/core/src/components/actions/actions/TextDisplay.tsx
@@ -1,12 +1,13 @@
 import { ReactNode } from "react";
 import styles from "../Actions.module.css";
+import { useClassNames } from "../../../hooks";
 
 export interface TextDisplayProps {
 	children: ReactNode;
 }
 
 export function TextDisplay({ children }: TextDisplayProps) {
-	return <p className={styles.TextDisplay}>
+	return <p className={useClassNames([styles.TextDisplay], "Actions", "Text")}>
 		{children}
 	</p>;
 }
diff --git a/packages/core/src/components/actions/actions/ToggleAction.tsx b/packages/core/src/components/actions/actions/ToggleAction.tsx
@@ -5,6 +5,7 @@ import { ReactElement, useState } from "react";
 import { faSquare } from "@fortawesome/free-regular-svg-icons";
 import { faSquareCheck } from "@fortawesome/free-solid-svg-icons";
 import { ActionProps } from "../Actions";
+import { useClassNames } from "../../../hooks";
 
 export interface ToggleActionProps extends ActionProps {
 	initialValue: boolean;
@@ -13,11 +14,11 @@ export interface ToggleActionProps extends ActionProps {
 export function ToggleAction({ actionId, label, shortcut, initialValue, onTrigger }: ToggleActionProps): ReactElement {
 	const [active, setActive] = useState(initialValue ?? false);
 
-	return (<button key={actionId} className={styles.Button} tabIndex={0} onClick={(event) => {
+	return <button key={actionId} className={useClassNames([styles.Button], "Actions", "Toggle", active ? "Active" : undefined)} tabIndex={0} onClick={(event) => {
 		onTrigger?.(event as unknown as Event, !active);
 		setActive(!active);
 	}}>
-		<span className={styles.Label}>
+		<span className={useClassNames([styles.Label], "Actions", "Label")}>
 			<div className={styles.Icon}>
 				{active 
 					? <FontAwesomeIcon icon={faSquareCheck}/>
@@ -27,5 +28,5 @@ export function ToggleAction({ actionId, label, shortcut, initialValue, onTrigge
 			<p>{label}</p>
 		</span>
 		{shortcut && <p className={styles.Shortcut}>{formatShortcut(shortcut)}</p>}
-	</button>);
+	</button>;
 }
diff --git a/packages/core/src/components/taskbar/Taskbar.tsx b/packages/core/src/components/taskbar/Taskbar.tsx
@@ -123,9 +123,14 @@ export const Taskbar = memo(() => {
 		updateShowSearch(true);
 	};
 
+	const modifiers: string[] = [];
+	if (showHome) {
+		modifiers.push("HomeActive");
+	}
+
 	return <div
 		style={{ "--taskbar-height": `${taskbarConfig.height}px`, zIndex } as CSSProperties}
-		className={useClassNames([styles.Taskbar], "Taskbar")}
+		className={useClassNames([styles.Taskbar], "Taskbar", undefined, modifiers)}
 		data-allow-context-menu={true}
 		onContextMenu={(event) => {
 			if ((event.target as HTMLElement).getAttribute("data-allow-context-menu"))
diff --git a/packages/core/src/hooks/_utils/classNames.ts b/packages/core/src/hooks/_utils/classNames.ts
@@ -16,16 +16,18 @@ export function useStaticClassName(block?: string, element?: string, modifier?:
 		if (block == null)
 			return null;
 
-		let className = "";
+		let className = `${NAME + BLOCK_PREFIX + block}`;
+		if (element != null)
+			className += ELEMENT_PREFIX + element;
 
-		if (modifier == null || typeof modifier == "string") {
-			className = NAME + BLOCK_PREFIX + block;
+		if (typeof modifier == "string") {
+			className += ` ${NAME + BLOCK_PREFIX + block}`;
 
 			if (element != null)
 				className += ELEMENT_PREFIX + element;
 			if (modifier != null)
 				className += MODIFIER_PREFIX + modifier;
-		} else {
+		} else if (modifier != null) {
 			modifier?.forEach((mod) => {
 				className += ` ${NAME + BLOCK_PREFIX + block}`;
 
@@ -34,11 +36,9 @@ export function useStaticClassName(block?: string, element?: string, modifier?:
 				if (mod != null)
 					className += MODIFIER_PREFIX + mod;
 			});
-
-			className = className.trim();
 		}
 
-		return className;
+		return className.trim();
 	}, [block, element, modifier]);
 }
 
diff --git a/packages/skins/src/styles/skins/windows95.css b/packages/skins/src/styles/skins/windows95.css

Original file line number	Diff line number	Diff line change
`@@ -1,5 +1,6 @@`
	`1`	`+import { useClassNames } from "../../../hooks";`
`1`	`2`	`import styles from "../Actions.module.css";`
`2`	`3`
`3`	`4`	`export function Divider() {`
`4`		`- return <div className={styles.Divider}/>;`
	`5`	`+ return <div className={useClassNames([styles.Divider], "Actions", "Divider")}/>;`
`5`	`6`	`}`
Original file line number	Diff line number	Diff line change
`@@ -1,12 +1,13 @@`
`1`	`1`	`import { ReactNode } from "react";`
`2`	`2`	`import styles from "../Actions.module.css";`
	`3`	`+import { useClassNames } from "../../../hooks";`
`3`	`4`
`4`	`5`	`export interface TextDisplayProps {`
`5`	`6`	`children: ReactNode;`
`6`	`7`	`}`
`7`	`8`
`8`	`9`	`export function TextDisplay({ children }: TextDisplayProps) {`
`9`		`- return <p className={styles.TextDisplay}>`
	`10`	`+ return <p className={useClassNames([styles.TextDisplay], "Actions", "Text")}>`
`10`	`11`	`{children}`
`11`	`12`	`</p>;`
`12`	`13`	`}`