forked from github/plane
53367a6bc4
* new toast setup * chore: new toast implementation. * chore: move toast component to ui package. * chore: replace `setToast` with `setPromiseToast` in required places for better UX. * chore: code cleanup. * chore: update theme. * fix: theme switching issue. * chore: remove toast from issue update operations. * chore: add promise toast for add/ remove issue to cycle/ module and remove local spinners. --------- Co-authored-by: rahulramesha <rahulramesham@gmail.com>
64 lines
1.6 KiB
TypeScript
64 lines
1.6 KiB
TypeScript
import React, { FC, useEffect, useState } from "react";
|
|
import { Command } from "cmdk";
|
|
import { useTheme } from "next-themes";
|
|
import { Settings } from "lucide-react";
|
|
import { observer } from "mobx-react-lite";
|
|
// hooks
|
|
import { useUser } from "hooks/store";
|
|
// ui
|
|
import { TOAST_TYPE, setToast } from "@plane/ui";
|
|
// constants
|
|
import { THEME_OPTIONS } from "constants/themes";
|
|
|
|
type Props = {
|
|
closePalette: () => void;
|
|
};
|
|
|
|
export const CommandPaletteThemeActions: FC<Props> = observer((props) => {
|
|
const { closePalette } = props;
|
|
// states
|
|
const [mounted, setMounted] = useState(false);
|
|
// store
|
|
const { updateCurrentUserTheme } = useUser();
|
|
// hooks
|
|
const { setTheme } = useTheme();
|
|
|
|
const updateUserTheme = async (newTheme: string) => {
|
|
setTheme(newTheme);
|
|
|
|
return updateCurrentUserTheme(newTheme).catch(() => {
|
|
setToast({
|
|
type: TOAST_TYPE.ERROR,
|
|
title: "Failed to save user theme settings!",
|
|
});
|
|
});
|
|
};
|
|
|
|
// useEffect only runs on the client, so now we can safely show the UI
|
|
useEffect(() => {
|
|
setMounted(true);
|
|
}, []);
|
|
|
|
if (!mounted) return null;
|
|
|
|
return (
|
|
<>
|
|
{THEME_OPTIONS.filter((t) => t.value !== "custom").map((theme) => (
|
|
<Command.Item
|
|
key={theme.value}
|
|
onSelect={() => {
|
|
updateUserTheme(theme.value);
|
|
closePalette();
|
|
}}
|
|
className="focus:outline-none"
|
|
>
|
|
<div className="flex items-center gap-2 text-custom-text-200">
|
|
<Settings className="h-4 w-4 text-custom-text-200" />
|
|
{theme.label}
|
|
</div>
|
|
</Command.Item>
|
|
))}
|
|
</>
|
|
);
|
|
});
|