swap loop icon for animated arrow-clockwise

Author: charlesvien

packages/ui/src/features/canvas/components/ChannelNav.tsx

@@ -2,7 +2,6 @@ import {
   BellIcon,
   EnvelopeSimple,
   Lightning,
-  RepeatIcon,
   SlidersHorizontal,
 } from "@phosphor-icons/react";
 import {
@@ -31,6 +30,7 @@ import { useFeatureFlag } from "@posthog/ui/features/feature-flags/useFeatureFla
 import { useInboxAllReports } from "@posthog/ui/features/inbox/hooks/useInboxAllReports";
 import { openSettings } from "@posthog/ui/features/settings/hooks/useOpenSettings";
 import { CountBadge } from "@posthog/ui/primitives/CountBadge";
+import { LoopIcon } from "@posthog/ui/primitives/LoopIcon";
 import {
   navigateToActivity,
   navigateToInbox,
@@ -76,7 +76,7 @@ function NavIcon({
             aria-label={label}
             data-selected={isActive || undefined}
             onClick={onClick}
-            className="relative shrink-0 text-muted-foreground data-selected:bg-fill-selected data-selected:text-foreground"
+            className="group relative shrink-0 text-muted-foreground data-selected:bg-fill-selected data-selected:text-foreground"
           >
             {icon}
             {badge}
@@ -237,7 +237,7 @@ export function ChannelNav() {
         {loopsEnabled ? (
           <NavIcon
             icon={
-              <RepeatIcon
+              <LoopIcon
                 size={16}
                 weight={view.type === "loops" ? "fill" : "regular"}
               />

packages/ui/src/features/canvas/components/channelPages.tsx

@@ -2,12 +2,12 @@ import {
   BookOpenTextIcon,
   ChatsCircleIcon,
   ClockCounterClockwiseIcon,
-  type Icon,
+  type IconProps,
   PackageIcon,
-  RepeatIcon,
   ShapesIcon,
 } from "@phosphor-icons/react";
-import type { ReactNode } from "react";
+import { LoopIcon } from "@posthog/ui/primitives/LoopIcon";
+import type { ComponentType, ReactNode } from "react";
 
 /**
  * The pages inside a space, and how each one is named and drawn. One table so
@@ -30,11 +30,11 @@ export type ChannelPageKey =
 
 export const CHANNEL_PAGES: Record<
   ChannelPageKey,
-  { label: string; Icon: Icon }
+  { label: string; Icon: ComponentType<IconProps> }
 > = {
   home: { label: "Feed", Icon: ChatsCircleIcon },
   context: { label: "Context", Icon: BookOpenTextIcon },
-  loops: { label: "Loops", Icon: RepeatIcon },
+  loops: { label: "Loops", Icon: LoopIcon },
   artifacts: { label: "Artifacts", Icon: PackageIcon },
   canvases: { label: "Canvases", Icon: ShapesIcon },
   history: { label: "Recents", Icon: ClockCounterClockwiseIcon },

packages/ui/src/features/command/CommandMenu.tsx

@@ -3,7 +3,6 @@ import {
   CaretRightIcon,
   ChartLine,
   EnvelopeSimple,
-  RepeatIcon,
 } from "@phosphor-icons/react";
 import { workspaceIdSet } from "@posthog/core/command-center/eligibility";
 import { resolveService } from "@posthog/di/container";
@@ -55,6 +54,7 @@ import { useSidebarStore } from "@posthog/ui/features/sidebar/sidebarStore";
 import { useTaskPrStatus } from "@posthog/ui/features/sidebar/useTaskPrStatus";
 import { useTasks } from "@posthog/ui/features/tasks/useTasks";
 import { useWorkspaces } from "@posthog/ui/features/workspace/useWorkspace";
+import { LoopIcon } from "@posthog/ui/primitives/LoopIcon";
 import {
   goBackInHistory,
   goForwardInHistory,
@@ -289,7 +289,7 @@ export function CommandMenu({ open, onOpenChange }: CommandMenuProps) {
               id: "loops",
               label: "Loops",
               keywords: "automations schedules recurring",
-              icon: <RepeatIcon size={12} className="text-gray-11" />,
+              icon: <LoopIcon size={12} className="text-gray-11" />,
               action: "open-loops" as CommandMenuAction,
               onRun: () => {
                 closeSettingsDialog();
@@ -628,7 +628,7 @@ export function CommandMenu({ open, onOpenChange }: CommandMenuProps) {
                       // fill the row (so a trailing shortcut can `ml-auto` to the
                       // end) and let it overflow visibly so the shortcut Kbd
                       // boxes aren't clipped by the wrapper's `truncate`.
-                      className="flex h-auto! min-h-7 w-full items-center gap-2 py-1.5 pr-2 text-left [&>span]:w-full [&>span]:overflow-visible"
+                      className="group flex h-auto! min-h-7 w-full items-center gap-2 py-1.5 pr-2 text-left [&>span]:w-full [&>span]:overflow-visible"
                     >
                       {cmd.icon}
                       <span className="wrap-break-word min-w-0 whitespace-normal">

packages/ui/src/features/loops/components/LoopHeaderTitle.tsx

@@ -1,4 +1,4 @@
-import { RepeatIcon } from "@phosphor-icons/react";
+import { LoopIcon } from "@posthog/ui/primitives/LoopIcon";
 import { Flex, Text } from "@radix-ui/themes";
 
 /**
@@ -10,8 +10,8 @@ import { Flex, Text } from "@radix-ui/themes";
  */
 export function LoopHeaderTitle({ label }: { label: string }) {
   return (
-    <Flex align="center" gap="2" className="w-full min-w-0">
-      <RepeatIcon size={12} className="shrink-0 text-gray-10" />
+    <Flex align="center" gap="2" className="group w-full min-w-0">
+      <LoopIcon size={12} className="shrink-0 text-gray-10" />
       <Text
         className="truncate whitespace-nowrap font-medium text-[13px]"
         title={label}

packages/ui/src/features/loops/components/LoopRow.tsx

@@ -1,9 +1,10 @@
-import { CaretRightIcon, RepeatIcon } from "@phosphor-icons/react";
+import { CaretRightIcon } from "@phosphor-icons/react";
 import type { LoopSchemas } from "@posthog/api-client/loops";
 import { formatRelativeTimeLong } from "@posthog/shared";
 import type { UserBasic } from "@posthog/shared/domain-types";
 import { userDisplayName } from "@posthog/ui/features/canvas/utils/userDisplay";
 import { Badge } from "@posthog/ui/primitives/Badge";
+import { LoopIcon } from "@posthog/ui/primitives/LoopIcon";
 import { Flex, Text } from "@radix-ui/themes";
 import { Link } from "@tanstack/react-router";
 import {
@@ -62,10 +63,10 @@ export function LoopRow({
       to="/code/loops/$loopId"
       params={{ loopId: loop.id }}
       state={{ loopListOrigin: true }}
-      className="flex items-center justify-between gap-3 rounded-(--radius-2) border border-border bg-(--color-panel-solid) px-4 py-3.5 no-underline transition-colors duration-150 hover:border-(--gray-6) hover:bg-(--gray-2)"
+      className="group flex items-center justify-between gap-3 rounded-(--radius-2) border border-border bg-(--color-panel-solid) px-4 py-3.5 no-underline transition-colors duration-150 hover:border-(--gray-6) hover:bg-(--gray-2)"
     >
       <Flex align="center" gap="3" className="min-w-0">
-        <RepeatIcon size={20} className="shrink-0 text-gray-11" />
+        <LoopIcon size={20} className="shrink-0 text-gray-11" />
         <Flex direction="column" gap="1" className="min-w-0">
           <Flex align="center" gap="2" className="min-w-0">
             <Text className="truncate font-medium text-[13px] text-gray-12">

packages/ui/src/features/sidebar/components/CustomizeSidebarDialog.tsx

@@ -5,7 +5,6 @@ import {
   DotsSixVertical,
   EnvelopeSimple,
   Lightning,
-  RepeatIcon,
   SlidersHorizontal,
 } from "@phosphor-icons/react";
 import { LOOPS_FLAG, PROJECT_BLUEBIRD_FLAG } from "@posthog/shared";
@@ -20,6 +19,7 @@ import {
   orderedNavItems,
 } from "@posthog/ui/features/sidebar/constants";
 import { useSidebarStore } from "@posthog/ui/features/sidebar/sidebarStore";
+import { LoopIcon } from "@posthog/ui/primitives/LoopIcon";
 import { track } from "@posthog/ui/shell/analytics";
 import { Button, Checkbox, Flex, Text } from "@radix-ui/themes";
 import { type RefCallback, useRef, useState } from "react";
@@ -32,7 +32,7 @@ const ITEM_ICONS: Record<
   "command-center": Lightning,
   activity: Bell,
   configure: SlidersHorizontal,
-  loops: RepeatIcon,
+  loops: LoopIcon,
 };
 
 function sameOrder(
@@ -195,7 +195,7 @@ function SortableNavItemRow({
           <DotsSixVertical size={14} />
         </button>
         <Text as="label" size="2" className="flex-1">
-          <Flex gap="2" align="center">
+          <Flex gap="2" align="center" className="group">
             <Checkbox
               checked={visible}
               onCheckedChange={(checked) => onVisibleChange(checked === true)}

packages/ui/src/features/sidebar/components/items/LoopsItem.tsx

@@ -1,5 +1,5 @@
-import { RepeatIcon } from "@phosphor-icons/react";
 import { Badge } from "@posthog/quill";
+import { LoopIcon } from "@posthog/ui/primitives/LoopIcon";
 import { SidebarItem } from "../SidebarItem";
 
 interface LoopsItemProps {
@@ -12,7 +12,7 @@ export function LoopsItem({ isActive, onClick, depth = 0 }: LoopsItemProps) {
   return (
     <SidebarItem
       depth={depth}
-      icon={<RepeatIcon size={16} weight={isActive ? "fill" : "regular"} />}
+      icon={<LoopIcon size={16} weight={isActive ? "fill" : "regular"} />}
       label="Loops"
       badge={<Badge variant="info">Alpha</Badge>}
       isActive={isActive}

packages/ui/src/primitives/LoopIcon.tsx

@@ -0,0 +1,14 @@
+import { ArrowClockwiseIcon, type IconProps } from "@phosphor-icons/react";
+import { cn } from "@posthog/quill";
+
+export function LoopIcon({ className, ...props }: IconProps) {
+  return (
+    <ArrowClockwiseIcon
+      {...props}
+      className={cn(
+        "transition-transform duration-800 ease-[cubic-bezier(0.22,1,0.36,1)] motion-safe:group-hover:rotate-360 motion-safe:hover:rotate-360",
+        className,
+      )}
+    />
+  );
+}