Skip to content

Commit

Permalink
feat: optimize action pages
Browse files Browse the repository at this point in the history 
Signed-off-by: Innei <tukon479@gmail.com>
  • Loading branch information
@Innei
Innei committed Dec 12, 2024
1 parent e9f7ff3 commit a10b78a
Show file tree
Hide file tree
Showing 6 changed files with 103 additions and 80 deletions.
34 changes: 22 additions & 12 deletions apps/renderer/src/modules/action/action-card.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,7 +1,8 @@
import { Button } from "@follow/components/ui/button/index.js"
import { Card, CardContent, CardHeader } from "@follow/components/ui/card/index.jsx"
import { Input } from "@follow/components/ui/input/index.js"
import { Switch } from "@follow/components/ui/switch/index.jsx"
import { Tooltip, TooltipContent, TooltipTrigger } from "@follow/components/ui/tooltip/index.js"
import clsx from "clsx"
import { useTranslation } from "react-i18next"

import { actionActions, useActionByIndex } from "~/store/action"
Expand All @@ -10,12 +11,29 @@ import { FeedFilter } from "./feed-filter"
import { TargetActionList } from "./target-action-list"

export const ActionCard = ({ index }: { index: number }) => {
const { t } = useTranslation("common")
return (
<Card>
<Card className="group relative">
<CardHeader>
<Tooltip>
<TooltipTrigger
type="button"
className={clsx(
"center flex size-6 rounded-full bg-background p-1 shadow-sm ring-1 ring-border",
"absolute -right-2 -top-2 z-[1] opacity-100 duration-200 hover:!opacity-100 group-hover:opacity-70 lg:opacity-0",
)}
onClick={() => {
actionActions.removeByIndex(index)
}}
>
<i className="i-mgc-close-cute-re text-lg" />
<span className="sr-only">{t("words.delete")}</span>
</TooltipTrigger>
<TooltipContent>{t("words.delete")}</TooltipContent>
</Tooltip>
<ActionCardToolbar index={index} />
</CardHeader>
<CardContent className="flex flex-wrap justify-between gap-x-10 gap-y-5">
<CardContent className="flex flex-wrap justify-between gap-y-6">
<FeedFilter index={index} />
<TargetActionList index={index} />
</CardContent>
Expand All @@ -31,15 +49,7 @@ const ActionCardToolbar = ({ index }: { index: number }) => {

const onChange = actionActions.updateByIndex.bind(null, index)
return (
<div className="flex w-full items-center gap-2">
<Button
variant="ghost"
onClick={() => {
actionActions.removeByIndex(index)
}}
>
<i className="i-mgc-delete-2-cute-re text-zinc-600" />
</Button>
<div className="flex w-full items-center gap-3">
<p className="shrink-0 font-medium text-zinc-500">{t("actions.action_card.name")}</p>
<Input
value={name}
Expand Down
26 changes: 12 additions & 14 deletions apps/renderer/src/modules/action/action-setting.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -49,27 +49,25 @@ function ActionSettingOperations() {
})

return (
<>
<div className="flex justify-end gap-x-2">
<Button
variant="outline"
className="center w-full gap-1"
onClick={() => {
actionActions.insertNewEmptyAction(t("actions.actionName", { number: actionLength + 1 }))
}}
>
<i className="i-mgc-add-cute-re" />
<i className="i-mgc-add-cute-re mr-1" />
<span>{t("actions.newRule")}</span>
</Button>
<div className="text-right">
<Button
variant="primary"
disabled={!isDirty}
isLoading={mutation.isPending}
onClick={() => mutation.mutate()}
>
{t("actions.save")}
</Button>
</div>
</>
<Button
variant="primary"
disabled={!isDirty}
isLoading={mutation.isPending}
onClick={() => mutation.mutate()}
>
<i className="i-mgc-check-circle-cute-re mr-1" />
{t("actions.save")}
</Button>
</div>
)
}
23 changes: 13 additions & 10 deletions apps/renderer/src/modules/action/feed-filter.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -74,9 +74,9 @@ export const FeedFilter = ({ index }: { index: number }) => {

const onChange = actionActions.updateByIndex.bind(null, index)
return (
<div className="shrink grow space-y-3 overflow-auto">
<div className="w-full shrink space-y-3 overflow-auto">
<p className="font-medium text-zinc-500">{t("actions.action_card.when_feeds_match")}</p>
<div className="flex flex-col gap-2">
<div className="flex flex-col gap-2 pl-4">
<RadioGroup
value={condition.length > 0 ? "filter" : "all"}
onValueChange={(value) => {
Expand All @@ -99,7 +99,7 @@ export const FeedFilter = ({ index }: { index: number }) => {
</div>

{condition.length > 0 && (
<div>
<div className="pl-6">
<Table>
<FieldTableHeader />
<TableBody>
Expand Down Expand Up @@ -131,6 +131,7 @@ export const FeedFilter = ({ index }: { index: number }) => {
>
<span className="sm:hidden">{t("actions.action_card.field")}</span>
<ResponsiveSelect
placeholder="Select Field"
disabled={disabled}
value={condition.field}
onValueChange={(value) => change("field", value as ActionFeedField)}
Expand Down Expand Up @@ -168,6 +169,7 @@ export const FeedFilter = ({ index }: { index: number }) => {
/>
)}
</TableCell>

<ActionTableCell
disabled={disabled}
onAnd={() => {
Expand Down Expand Up @@ -274,6 +276,7 @@ const OperationTableCell = ({
>
<span className="sm:hidden">{t("actions.action_card.operator")}</span>
<ResponsiveSelect
placeholder="Select Field"
disabled={disabled}
value={value}
onValueChange={(value) => onValueChange?.(value as ActionOperation)}
Expand Down Expand Up @@ -302,18 +305,18 @@ const ActionTableCell = ({
const { t } = useTranslation("settings")
return (
<>
<TableCell size="sm" className="max-sm:flex max-sm:space-x-2 max-sm:pr-0">
<Button variant="ghost" className="sm:w-full" disabled={disabled} onClick={onDelete}>
<i className="i-mgc-delete-2-cute-re text-zinc-600" />
</Button>
<Button className="w-full sm:hidden" variant="outline" disabled={disabled} onClick={onAnd}>
<TableCell size="sm" className="max-sm:hidden">
<Button variant="outline" className="w-full" disabled={disabled} onClick={onAnd}>
{t("actions.action_card.and")}
</Button>
</TableCell>
<TableCell size="sm" className="max-sm:hidden">
<Button variant="outline" className="w-full" disabled={disabled} onClick={onAnd}>
<TableCell size="sm" className="w-full max-sm:flex max-sm:space-x-2 max-sm:pr-0 lg:w-8">
<Button className="w-full sm:hidden" variant="outline" disabled={disabled} onClick={onAnd}>
{t("actions.action_card.and")}
</Button>
<Button variant="ghost" disabled={disabled} onClick={onDelete}>
<i className="i-mgc-delete-2-cute-re size-5 text-zinc-600" />
</Button>
</TableCell>
</>
)
Expand Down
87 changes: 46 additions & 41 deletions apps/renderer/src/modules/action/target-action-list.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import { Button } from "@follow/components/ui/button/index.js"
import { ActionButton, Button } from "@follow/components/ui/button/index.js"
import { Divider } from "@follow/components/ui/divider/index.js"
import { Input } from "@follow/components/ui/input/index.js"
import { ResponsiveSelect } from "@follow/components/ui/select/responsive.js"
Expand All @@ -11,7 +11,6 @@ import {
TableRow,
} from "@follow/components/ui/table/index.jsx"
import type { ActionModel, SupportedLanguages } from "@follow/models/types"
import { cn } from "@follow/utils/utils"
import { Fragment, useMemo } from "react"
import { useTranslation } from "react-i18next"

Expand Down Expand Up @@ -64,16 +63,16 @@ const AddTableRow = ({ onClick, disabled }: { onClick?: () => void; disabled?: b
onClick={onClick}
disabled={disabled}
>
<i className="i-mgc-add-cute-re" /> {t("actions.action_card.add")}
{t("actions.action_card.add")}
</Button>
)
}

const DeleteTableCell = ({ disabled, onClick }: { disabled?: boolean; onClick?: () => void }) => (
<TableCell size="sm" className="flex h-10 items-center">
<Button variant="ghost" className="w-full" disabled={disabled} onClick={onClick}>
<ActionButton disabled={disabled} onClick={onClick}>
<i className="i-mgc-delete-2-cute-re text-zinc-600" />
</Button>
</ActionButton>
</TableCell>
)

Expand Down Expand Up @@ -117,14 +116,15 @@ export const TargetActionList = ({ index }: { index: number }) => {
config: () => (
<ResponsiveSelect
disabled={disabled}
size="sm"
value={translation}
onValueChange={(value) => {
onChange((data) => {
data.result.translation = value
})
}}
items={TransitionOptions}
triggerClassName="w-fit max-w-44"
triggerClassName="w-fit max-w-44 text-sm"
/>
),
configInline: true,
Expand Down Expand Up @@ -195,12 +195,12 @@ export const TargetActionList = ({ index }: { index: number }) => {
},
config: () => (
<>
<Table>
<Table className="mt-2">
<TableHeader>
<TableRow>
<TableHead size="sm" />
<TableHead size="sm">{t("actions.action_card.from")}</TableHead>
<TableHead size="sm">{t("actions.action_card.to")}</TableHead>
<TableHead size="sm" className="w-8" />
</TableRow>
</TableHeader>
<TableBody>
Expand All @@ -212,18 +212,6 @@ export const TargetActionList = ({ index }: { index: number }) => {
}
return (
<TableRow key={rewriteIdx}>
<DeleteTableCell
disabled={disabled}
onClick={() => {
onChange((data) => {
if (data.result.rewriteRules?.length === 1) {
delete data.result.rewriteRules
} else {
data.result.rewriteRules?.splice(rewriteIdx, 1)
}
})
}}
/>
<TableCell size="sm">
<Input
disabled={disabled}
Expand All @@ -240,6 +228,18 @@ export const TargetActionList = ({ index }: { index: number }) => {
onChange={(e) => change("to", e.target.value)}
/>
</TableCell>
<DeleteTableCell
disabled={disabled}
onClick={() => {
onChange((data) => {
if (data.result.rewriteRules?.length === 1) {
delete data.result.rewriteRules
} else {
data.result.rewriteRules?.splice(rewriteIdx, 1)
}
})
}}
/>
</TableRow>
)
})}
Expand Down Expand Up @@ -276,6 +276,17 @@ export const TargetActionList = ({ index }: { index: number }) => {
{webhooks?.map((webhook, rewriteIdx) => {
return (
<div key={rewriteIdx} className="flex items-center gap-2">
<Input
disabled={disabled}
value={webhook}
className="h-8"
placeholder="https://"
onChange={(e) => {
onChange((data) => {
data.result.webhooks![rewriteIdx] = e.target.value
})
}}
/>
<DeleteTableCell
disabled={disabled}
onClick={() => {
Expand All @@ -288,17 +299,6 @@ export const TargetActionList = ({ index }: { index: number }) => {
})
}}
/>
<Input
disabled={disabled}
value={webhook}
className="h-8"
placeholder="https://"
onChange={(e) => {
onChange((data) => {
data.result.webhooks![rewriteIdx] = e.target.value
})
}}
/>
</div>
)
})}
Expand Down Expand Up @@ -342,16 +342,16 @@ export const TargetActionList = ({ index }: { index: number }) => {
)

return (
<div className="min-w-[270px] shrink grow space-y-4">
<div className="w-full shrink grow space-y-4">
<p className="font-medium text-zinc-500">{t("actions.action_card.then_do")}</p>
<div className="w-full space-y-4">
<div className="relative w-full space-y-4">
<DropdownMenu>
<DropdownMenuTrigger asChild disabled={disabled}>
<Button variant="outline" className={cn(notEnabledActions.length === 0 && "hidden")}>
{t("actions.action_card.add_action")}
</Button>
<ActionButton className="absolute right-0 top-0 -translate-y-11 text-zinc-500 duration-200 hover:text-foreground">
<i className="i-mgc-add-cute-re" />
</ActionButton>
</DropdownMenuTrigger>
<DropdownMenuContent>
<DropdownMenuContent side="left" align="start">
{notEnabledActions.map((action) => {
return (
<DropdownMenuItem
Expand All @@ -369,23 +369,28 @@ export const TargetActionList = ({ index }: { index: number }) => {
</DropdownMenuContent>
</DropdownMenu>

<section>
<section className="pl-6">
{enabledActions
.filter((action) => action.enabled)
.map((action, index) => {
return (
<Fragment key={action.title}>
<div className="flex w-full items-center justify-between">
<div className="group/action mt-3 flex w-full items-center justify-between">
<span className="w-0 shrink grow truncate">{action.title}</span>
{action.configInline && action.config && action.config()}
<DeleteTableCell

<Button
buttonClassName="absolute opacity-100 group-hover/action:opacity-70 hover:!opacity-100 duration-200 lg:opacity-0 left-0 z-[1] size-5 rounded-full border"
variant={"ghost"}
disabled={disabled}
onClick={() => {
onChange((data) => {
action.onRemove(data)
})
}}
/>
>
<i className="i-mgc-close-cute-re size-3" />
</Button>
</div>
{!action.configInline && action.config && action.config()}
{index !== enabledActions.length - 1 && <Divider className="my-2" />}
Expand Down
4 changes: 3 additions & 1 deletion apps/renderer/src/modules/user/ProfileButton.desktop.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -143,7 +143,7 @@ export const ProfileButton: FC<ProfileButtonProps> = memo((props) => {
</DropdownMenuItem>

<DropdownMenuSeparator />
{/* NOTE: The shortcut needs to be grouped, but there is only one currently, so no separator line has been added. */}

{!zenModeSetting && (
<DropdownMenuItem
className="pl-3"
Expand All @@ -164,6 +164,8 @@ export const ProfileButton: FC<ProfileButtonProps> = memo((props) => {
>
{t("words.actions")}
</DropdownMenuItem>

<DropdownMenuSeparator />
<DropdownMenuItem
className="pl-3"
onClick={() => {
Expand Down
Loading

0 comments on commit a10b78a

Please sign in to comment.