From c747cf72ab4da2b6e79bcf69792c06b9c4f416d2 Mon Sep 17 00:00:00 2001 From: Arjun Komath Date: Sun, 1 Mar 2026 10:00:03 +1100 Subject: [PATCH 1/2] Fix missing style --- .../activity/activity-detail-panel.tsx | 4 ++-- components/project/activity/activity-feed.tsx | 6 ++--- lib/activity/message.ts | 24 +++++++++++++++---- 3 files changed, 24 insertions(+), 10 deletions(-) diff --git a/components/project/activity/activity-detail-panel.tsx b/components/project/activity/activity-detail-panel.tsx index 4f972ca..42ef1b7 100644 --- a/components/project/activity/activity-detail-panel.tsx +++ b/components/project/activity/activity-detail-panel.tsx @@ -87,9 +87,9 @@ export function ActivityDetailPanel({ <>
-
+
diff --git a/components/project/activity/activity-feed.tsx b/components/project/activity/activity-feed.tsx index 410bd15..116bdde 100644 --- a/components/project/activity/activity-feed.tsx +++ b/components/project/activity/activity-feed.tsx @@ -35,10 +35,8 @@ export function ActivityItem({ className="w-full text-left py-4 px-4 hover:bg-muted/40 rounded-lg transition-colors cursor-pointer" >
-
- +
+
diff --git a/lib/activity/message.ts b/lib/activity/message.ts index 22b92f7..09e3963 100644 --- a/lib/activity/message.ts +++ b/lib/activity/message.ts @@ -5,13 +5,29 @@ import { guessTimezone, toDateStringWithDay } from "../utils/date"; export function getActionIcon(action: string) { switch (action) { case "created": - return { icon: Plus, color: "text-emerald-500", bg: "bg-emerald-500/10" }; + return { + icon: Plus, + iconClassName: "h-4 w-4 text-emerald-500", + containerClassName: "rounded-lg bg-emerald-500/10", + }; case "updated": - return { icon: RefreshCw, color: "text-amber-500", bg: "bg-amber-500/10" }; + return { + icon: RefreshCw, + iconClassName: "h-4 w-4 text-amber-500", + containerClassName: "rounded-lg bg-amber-500/10", + }; case "deleted": - return { icon: Trash2, color: "text-red-500", bg: "bg-red-500/10" }; + return { + icon: Trash2, + iconClassName: "h-4 w-4 text-red-500", + containerClassName: "rounded-lg bg-red-500/10", + }; default: - return { icon: ActivityIcon, color: "text-muted-foreground", bg: "bg-muted" }; + return { + icon: ActivityIcon, + iconClassName: "h-4 w-4 text-muted-foreground", + containerClassName: "rounded-lg bg-muted", + }; } } From 31917e6a72068ec8f72ec311c27bf4495f809ff0 Mon Sep 17 00:00:00 2001 From: Arjun Komath Date: Sun, 1 Mar 2026 10:20:53 +1100 Subject: [PATCH 2/2] Update icons --- components/project/activity/action-icon.tsx | 53 +++++++++++++++++++ .../activity/activity-detail-panel.tsx | 19 ++----- components/project/activity/activity-feed.tsx | 9 +--- lib/activity/message.ts | 30 ----------- 4 files changed, 58 insertions(+), 53 deletions(-) create mode 100644 components/project/activity/action-icon.tsx diff --git a/components/project/activity/action-icon.tsx b/components/project/activity/action-icon.tsx new file mode 100644 index 0000000..34cbfee --- /dev/null +++ b/components/project/activity/action-icon.tsx @@ -0,0 +1,53 @@ +import { ActivityIcon, Plus, RefreshCw, Trash2 } from "lucide-react"; +import { cn } from "@/lib/utils"; + +function CreatedIcon({ className }: { className?: string }) { + return ( +
+ +
+ ); +} + +function UpdatedIcon({ className }: { className?: string }) { + return ( +
+ +
+ ); +} + +function DeletedIcon({ className }: { className?: string }) { + return ( +
+ +
+ ); +} + +function DefaultIcon({ className }: { className?: string }) { + return ( +
+ +
+ ); +} + +export function ActionIcon({ + action, + className, +}: { + action: string; + className?: string; +}) { + switch (action) { + case "created": + return ; + case "updated": + return ; + case "deleted": + return ; + default: + return ; + } +} diff --git a/components/project/activity/activity-detail-panel.tsx b/components/project/activity/activity-detail-panel.tsx index 42ef1b7..2cdaa1c 100644 --- a/components/project/activity/activity-detail-panel.tsx +++ b/components/project/activity/activity-detail-panel.tsx @@ -1,24 +1,18 @@ "use client"; import { useQuery } from "@tanstack/react-query"; -import { - CalendarIcon, - CompassIcon, - RefreshCw, - UserIcon, - X, -} from "lucide-react"; +import { CalendarIcon, CompassIcon, UserIcon, X } from "lucide-react"; import { useParams } from "next/navigation"; import { Panel } from "@/components/core/panel"; import { UserAvatar } from "@/components/core/user-avatar"; import { SpinnerWithSpacing } from "@/components/core/loaders"; import { formatEventTypeLabel, - getActionIcon, getEventDescription, } from "@/lib/activity/message"; import { guessTimezone, toFullDateTimeString } from "@/lib/utils/date"; import { useTRPCClient } from "@/trpc/client"; +import { ActionIcon } from "./action-icon"; function SectionLabel({ icon: Icon, @@ -64,9 +58,6 @@ export function ActivityDetailPanel({ }), }); - const actionConfig = item ? getActionIcon(item.action) : null; - const ActionIcon = actionConfig?.icon ?? RefreshCw; - return (
-
- -
+

{formatEventTypeLabel(item.type, item.action)} diff --git a/components/project/activity/activity-feed.tsx b/components/project/activity/activity-feed.tsx index 116bdde..dc517af 100644 --- a/components/project/activity/activity-feed.tsx +++ b/components/project/activity/activity-feed.tsx @@ -13,10 +13,10 @@ import type { ActivityWithActor } from "@/drizzle/types"; import { formatEventTypeLabel, generateObjectDiffMessage, - getActionIcon, } from "@/lib/activity/message"; import { guessTimezone, toDateTimeString } from "@/lib/utils/date"; import { useTRPCClient } from "@/trpc/client"; +import { ActionIcon } from "./action-icon"; import { ActivityDetailPanel } from "./activity-detail-panel"; const ACTIVITIES_LIMIT = 25; @@ -25,9 +25,6 @@ export function ActivityItem({ item, onSelect, }: { item: ActivityWithActor; onSelect: (id: number) => void }) { - const actionConfig = getActionIcon(item.action); - const ActionIcon = actionConfig.icon; - return (