ProzillaOS/packages/apps/settings/components/tabs/AppOption.tsx
2024-06-16 21:46:44 +02:00

83 lines
No EOL
2.9 KiB
TypeScript

import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import { AppsManager } from "../../../../features/apps/appsManager";
import { ImagePreview } from "../../file-explorer/directory-list/ImagePreview";
import styles from "../Settings.module.css";
import { faEllipsisVertical, faThumbTack } from "@fortawesome/free-solid-svg-icons";
import { useWindowsManager } from "../../../../hooks/windows/windowsManagerContext";
import { useContextMenu } from "../../../../hooks/modals/contextMenu";
import { Actions } from "../../../actions/Actions";
import { ClickAction } from "../../../actions/actions/ClickAction";
import { removeFromArray } from "../../../../features/_utils/array.utils";
import { useSettingsManager } from "../../../../hooks/settings/settingsManagerContext";
import { SettingsManager } from "../../../../features/settings/settingsManager";
import { App } from "../../../../features/apps/app";
import { MouseEventHandler } from "react";
interface AppOptionProps {
app: App;
pins: string[];
setPins: Function;
}
export function AppOption({ app, pins, setPins: _setPins }: AppOptionProps) {
const isPinned = pins.includes(app.id);
const settingsManager = useSettingsManager();
const windowsManager = useWindowsManager();
const { onContextMenu } = useContextMenu({ Actions: (props) =>
<Actions {...props}>
<ClickAction label="Launch" icon={AppsManager.getAppIconUrl(app.id)} onTrigger={() => windowsManager?.open(app.id)}/>
<ClickAction label={isPinned ? "Unpin from taskbar" : "Pin to taskbar"} icon={faThumbTack} onTrigger={() => {
const newPins = [...pins];
if (isPinned) {
removeFromArray(app.id, pins);
} else {
newPins.push(app.id);
}
const settings = settingsManager?.getSettings(SettingsManager.VIRTUAL_PATHS.taskbar);
void settings?.set("pins", newPins.join(","));
}}/>
</Actions>
});
return <div className={`${styles.Option} ${styles.OptionHorizontal}`}>
<span className={styles.Label}>
<ImagePreview className={styles.Icon} source={AppsManager.getAppIconUrl(app.id)}/>
{app.name}
</span>
<button className={styles.IconButton} onClick={onContextMenu as unknown as MouseEventHandler}>
<FontAwesomeIcon icon={faEllipsisVertical}/>
</button>
{/* <div className={styles["Button-group"]}>
<Button
className={`${styles.Button} ${utilStyles.TextBold}`}
onClick={() => windowsManager.open(id)}
>
Launch
</Button>
<Button
className={`${styles.Button} ${styles["Button-red"]} ${utilStyles.TextBold}`}
>
Uninstall
</Button>
<Button
className={`${styles.Button} ${utilStyles.TextBold}`}
onClick={() => {
const newPins = [...pins];
if (isPinned) {
removeFromArray(id, pins);
} else {
newPins.push(id);
}
const settings = settingsManager.get(SettingsManager.VIRTUAL_PATHS.taskbar);
settings.set("pins", newPins.join(","));
}}
>
{isPinned ? "Unpin from taskbar" : "Pin to taskbar"}
</Button>
</div> */}
</div>;
}