{iterateOverChildren(children)}
diff --git a/src/components/task-bar/AppButton.jsx b/src/components/task-bar/AppButton.jsx
deleted file mode 100644
index 6d1da2b..0000000
--- a/src/components/task-bar/AppButton.jsx
+++ /dev/null
@@ -1,36 +0,0 @@
-import { memo, useEffect, useState } from "react";
-import Application from "../../features/applications/application.js";
-import { useWindows } from "../../hooks/windows/windowsContext.js";
-import { useWindowsManager } from "../../hooks/windows/windowsManagerContext.js";
-import styles from "./TaskBar.module.css";
-import { ReactSVG } from "react-svg";
-
-/**
- * @param {object} props
- * @param {Application} props.app
- */
-export const AppButton = memo(({ app }) => {
- const [active, setActive] = useState(false);
- const windows = useWindows();
- const windowsManager = useWindowsManager();
-
- useEffect(() => {
- setActive(windowsManager.isAppActive(app.id));
- }, [app.id, windows, windowsManager]);
-
- const classNames = [styles["App-icon"]];
- if (active)
- classNames.push(styles.Active);
-
- return (
-
- );
-});
\ No newline at end of file
diff --git a/src/components/task-bar/TaskBar.jsx b/src/components/taskbar/Taskbar.jsx
similarity index 71%
rename from src/components/task-bar/TaskBar.jsx
rename to src/components/taskbar/Taskbar.jsx
index 3d5ae90..7d3a2a3 100644
--- a/src/components/task-bar/TaskBar.jsx
+++ b/src/components/taskbar/Taskbar.jsx
@@ -1,5 +1,5 @@
-import { memo, useRef, useState } from "react";
-import styles from "./TaskBar.module.css";
+import { memo, useEffect, useMemo, useRef, useState } from "react";
+import styles from "./Taskbar.module.css";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import { faCog, faSearch } from "@fortawesome/free-solid-svg-icons";
import AppsManager from "../../features/applications/applications.js";
@@ -12,7 +12,7 @@ import { Volume } from "./indicators/Volume.jsx";
import { SearchMenu } from "./menus/SearchMenu.jsx";
import { Calendar } from "./indicators/Calendar.jsx";
import { useScrollWithShadow } from "../../hooks/utils/scrollWithShadows.js";
-import { AppButton } from "./AppButton.jsx";
+import { AppButton } from "./app-icon/AppIcon.jsx";
import { useContextMenu } from "../../hooks/modals/contextMenu.js";
import { Actions } from "../actions/Actions.jsx";
import { useModals } from "../../hooks/modals/modals.js";
@@ -20,13 +20,17 @@ import { ClickAction } from "../actions/actions/ClickAction.jsx";
import { APPS, APP_NAMES } from "../../constants/applications.js";
import { useWindowsManager } from "../../hooks/windows/windowsManagerContext.js";
import { ModalsView } from "../modals/ModalsView.jsx";
-import { TASK_BAR_HEIGHT } from "../../constants/taskBar.js";
+import { TASKBAR_HEIGHT } from "../../constants/taskBar.js";
+import { useSettingsManager } from "../../hooks/settings/settingsManagerContext.js";
+import { SettingsManager } from "../../features/settings/settingsManager.js";
+import { useWindows } from "../../hooks/windows/windowsContext.js";
export const Taskbar = memo(() => {
+ const ref = useRef(null);
+ const settingsManager = useSettingsManager();
const [showHome, setShowHome] = useState(false);
const [showSearch, setShowSearch] = useState(false);
const [searchQuery, setSearchQuery] = useState("");
- const ref = useRef(null);
const { boxShadow, onUpdate } = useScrollWithShadow({ ref, shadow: {
offset: 20,
blurRadius: 10,
@@ -36,13 +40,49 @@ export const Taskbar = memo(() => {
const inputRef = useRef(null);
const [modalsManager, modals] = useModals();
const windowsManager = useWindowsManager();
+ const windows = useWindows();
const { onContextMenu } = useContextMenu({ modalsManager, Actions: (props) =>
-
+
{
windowsManager.open(APPS.SETTINGS);
}}/>
});
+ const [pins, setPins] = useState([]);
+
+ const apps = useMemo(() => AppsManager.APPLICATIONS.sort((appA, appB) => {
+ const indexA = pins.indexOf(appA.id);
+ const indexB = pins.indexOf(appB.id);
+ if (indexA < 0 && indexB > 0) {
+ return 1;
+ } else if (indexA > 0 && indexB < 0) {
+ return -1;
+ } else if (indexA < 0 && indexB < 0) {
+ return 0;
+ } else {
+ return indexA - indexB;
+ }
+ }).map((app) => {
+ const isActive = windows.map((window) => window.app.id).includes(app.id);
+ const shouldBeShown = (pins.includes(app.id) || isActive);
+ return ();
+ }), [modalsManager, pins, windows]);
+
+ useEffect(() => {
+ (async () => {
+ const settings = settingsManager.get(SettingsManager.VIRTUAL_PATHS.taskbar);
+ settings.get("pins", (pins) => {
+ setPins(pins.split(","));
+ });
+ })();
+ }, [settingsManager]);
const updateShowHome = (value) => {
setShowHome(value);
@@ -82,8 +122,8 @@ export const Taskbar = memo(() => {
return (<>
{
if (event.target.getAttribute("data-allow-context-menu"))
@@ -132,9 +172,7 @@ export const Taskbar = memo(() => {
onResize={onUpdate}
ref={ref}
>
- {AppsManager.APPLICATIONS.map((app) =>
-
- )}
+ {apps}