Browse Source

Renaming, UI tweaks

pull/618/head
philon- 1 year ago
parent
commit
193cea3427
  1. 16
      src/components/Dialog/NodeDetailsDialog/NodeDetailsDialog.tsx
  2. 4
      src/components/UI/Avatar.tsx
  3. 4
      src/components/generic/Table/index.tsx
  4. 6
      src/core/hooks/useFavoriteNode.ts
  5. 6
      src/core/hooks/useIgnoreNode.ts

16
src/components/Dialog/NodeDetailsDialog/NodeDetailsDialog.tsx

@ -12,8 +12,8 @@ import { DeviceImage } from "@components/generic/DeviceImage.tsx";
import { TimeAgo } from "@components/generic/TimeAgo.tsx"; import { TimeAgo } from "@components/generic/TimeAgo.tsx";
import { Uptime } from "@components/generic/Uptime.tsx"; import { Uptime } from "@components/generic/Uptime.tsx";
import { toast } from "@core/hooks/useToast.ts"; import { toast } from "@core/hooks/useToast.ts";
import { useUpdateFavorite } from "../../../core/hooks/useUpdateFavorite.ts"; import { useFavoriteNode } from "../../../core/hooks/useFavoriteNode.ts";
import { useUpdateIgnored } from "../../../core/hooks/useUpdateIgnored.ts"; import { useIgnoreNode } from "../../../core/hooks/useIgnoreNode.ts";
import { cn } from "@core/utils/cn.ts"; import { cn } from "@core/utils/cn.ts";
import { import {
@ -64,10 +64,10 @@ export const NodeDetailsDialog = ({
const { setNodeNumToBeRemoved } = useAppStore(); const { setNodeNumToBeRemoved } = useAppStore();
const { setChatType, setActiveChat } = useMessageStore(); const { setChatType, setActiveChat } = useMessageStore();
const { updateFavorite } = useUpdateFavorite(); const { updateFavorite } = useFavoriteNode();
const [isFavoriteState, setIsFavoriteState] = useState<boolean>(false); const [isFavoriteState, setIsFavoriteState] = useState<boolean>(false);
const { updateIgnored } = useUpdateIgnored(); const { updateIgnored } = useIgnoreNode();
const [isIgnoredState, setIsIgnoredState] = useState<boolean>(false); const [isIgnoredState, setIsIgnoredState] = useState<boolean>(false);
useEffect(() => { useEffect(() => {
@ -186,7 +186,9 @@ export const NodeDetailsDialog = ({
</Button> </Button>
<Button className="mr-1" onClick={handleToggleFavorite}> <Button className="mr-1" onClick={handleToggleFavorite}>
<StarIcon <StarIcon
className={isFavoriteState ? " fill-yellow-400" : ""} className={cn(
isFavoriteState ? " fill-yellow-400 stroke-yellow-400" : "",
)}
/> />
</Button> </Button>
<div className="flex flex-1 justify-start"></div> <div className="flex flex-1 justify-start"></div>
@ -198,8 +200,8 @@ export const NodeDetailsDialog = ({
className={cn( className={cn(
"flex justify-end mr-1 text-white", "flex justify-end mr-1 text-white",
isIgnoredState isIgnoredState
? "" ? "bg-red-500 dark:bg-red-500 hover:bg-red-600 hover:dark:bg-red-600 text-white dark:text-white"
: "bg-red-500 dark:bg-red-500 hover:bg-red-600 hover:dark:bg-red-600 text-white dark:text-white", : "",
)} )}
onClick={handleToggleIgnored} onClick={handleToggleIgnored}
> >

4
src/components/UI/Avatar.tsx

@ -112,7 +112,7 @@ export const Avatar = ({
</TooltipTrigger> </TooltipTrigger>
<TooltipContent className="bg-slate-800 dark:bg-slate-600 text-white px-4 py-1 rounded text-xs"> <TooltipContent className="bg-slate-800 dark:bg-slate-600 text-white px-4 py-1 rounded text-xs">
Favorite Favorite
<TooltipArrow className="fill-slate-800" /> <TooltipArrow className="fill-slate-800 dark:fill-slate-600" />
</TooltipContent> </TooltipContent>
</Tooltip> </Tooltip>
</TooltipProvider> </TooltipProvider>
@ -130,7 +130,7 @@ export const Avatar = ({
</TooltipTrigger> </TooltipTrigger>
<TooltipContent className="bg-slate-800 dark:bg-slate-600 text-white px-4 py-1 rounded text-xs"> <TooltipContent className="bg-slate-800 dark:bg-slate-600 text-white px-4 py-1 rounded text-xs">
Node error Node error
<TooltipArrow className="fill-slate-800" /> <TooltipArrow className="fill-slate-800 dark:fill-slate-600" />
</TooltipContent> </TooltipContent>
</Tooltip> </Tooltip>
</TooltipProvider> </TooltipProvider>

4
src/components/generic/Table/index.tsx

@ -7,13 +7,13 @@ interface FavoriteIconProps {
showFavorite: boolean; showFavorite: boolean;
} }
interface WrapperProps { interface AvatarCellProps {
children: React.ReactElement<FavoriteIconProps>; children: React.ReactElement<FavoriteIconProps>;
} }
export interface TableProps { export interface TableProps {
headings: Heading[]; headings: Heading[];
rows: React.ReactElement<WrapperProps>[][]; rows: React.ReactElement<AvatarCellProps>[][];
} }
export interface Heading { export interface Heading {

6
src/core/hooks/useUpdateFavorite.ts → src/core/hooks/useFavoriteNode.ts

@ -2,17 +2,17 @@ import { useCallback } from "react";
import { useDevice } from "@core/stores/deviceStore.ts"; import { useDevice } from "@core/stores/deviceStore.ts";
import { useToast } from "@core/hooks/useToast.ts"; import { useToast } from "@core/hooks/useToast.ts";
interface UpdateFavoriteOptions { interface FavoriteNodeOptions {
nodeNum: number; nodeNum: number;
isFavorite: boolean; isFavorite: boolean;
} }
export function useUpdateFavorite() { export function useFavoriteNode() {
const { updateFavorite, getNode } = useDevice(); const { updateFavorite, getNode } = useDevice();
const { toast } = useToast(); const { toast } = useToast();
const updateFavoriteCB = useCallback( const updateFavoriteCB = useCallback(
({ nodeNum, isFavorite }: UpdateFavoriteOptions) => { ({ nodeNum, isFavorite }: FavoriteNodeOptions) => {
updateFavorite(nodeNum, isFavorite); updateFavorite(nodeNum, isFavorite);
const node = getNode(nodeNum); const node = getNode(nodeNum);

6
src/core/hooks/useUpdateIgnored.ts → src/core/hooks/useIgnoreNode.ts

@ -2,17 +2,17 @@ import { useCallback } from "react";
import { useDevice } from "@core/stores/deviceStore.ts"; import { useDevice } from "@core/stores/deviceStore.ts";
import { useToast } from "@core/hooks/useToast.ts"; import { useToast } from "@core/hooks/useToast.ts";
interface UpdateIgnoredOptions { interface IgnoreNodeOptions {
nodeNum: number; nodeNum: number;
isIgnored: boolean; isIgnored: boolean;
} }
export function useUpdateIgnored() { export function useIgnoreNode() {
const { updateIgnored, getNode } = useDevice(); const { updateIgnored, getNode } = useDevice();
const { toast } = useToast(); const { toast } = useToast();
const updateIgnoredCB = useCallback( const updateIgnoredCB = useCallback(
({ nodeNum, isIgnored }: UpdateIgnoredOptions) => { ({ nodeNum, isIgnored }: IgnoreNodeOptions) => {
updateIgnored(nodeNum, isIgnored); updateIgnored(nodeNum, isIgnored);
const node = getNode(nodeNum); const node = getNode(nodeNum);
Loading…
Cancel
Save