diff --git a/desktop/src/features/channels/ui/ChannelPermissionsSettings.tsx b/desktop/src/features/channels/ui/ChannelPermissionsSettings.tsx index eb7ee4739c8..8914af29331 100644 --- a/desktop/src/features/channels/ui/ChannelPermissionsSettings.tsx +++ b/desktop/src/features/channels/ui/ChannelPermissionsSettings.tsx @@ -1,4 +1,4 @@ -import { ChevronDown } from "lucide-react"; +import { ChevronDown, Globe, Lock } from "lucide-react"; import type { ChannelVisibility } from "@/shared/api/types"; import { Button } from "@/shared/ui/button"; @@ -10,17 +10,25 @@ import { DropdownMenuTrigger, } from "@/shared/ui/dropdown-menu"; import { cn } from "@/shared/lib/cn"; +import { SegmentedControl } from "@/shared/ui/segmented-control"; + +const VISIBILITY_OPTIONS = [ + { value: "private", label: "Private", Icon: Lock }, + { value: "open", label: "Public", Icon: Globe }, +] as const; export function ChannelPermissionsSettings({ disabled, onVisibilityChange, testIdPrefix, visibility, + variant = "dropdown", }: { disabled?: boolean; onVisibilityChange: (visibility: ChannelVisibility) => void; testIdPrefix: string; visibility: ChannelVisibility; + variant?: "dropdown" | "segmented"; }) { const visibilityLabel = visibility === "private" ? "Private" : "Public"; @@ -28,57 +36,76 @@ export function ChannelPermissionsSettings({
- Visibility - - - - - event.preventDefault()} - style={{ - minWidth: "var(--radix-dropdown-menu-trigger-width)", - }} - > - - onVisibilityChange( - nextVisibility === "private" ? "private" : "open", - ) - } - value={visibility} - > - + Visibility + + {variant === "segmented" ? ( + + ) : ( + + + + + event.preventDefault()} + style={{ + minWidth: "var(--radix-dropdown-menu-trigger-width)", + }} + > + + onVisibilityChange( + nextVisibility === "private" ? "private" : "open", + ) + } + value={visibility} > - Private - - - - + + Public + + + Private + + + + + )}
); } diff --git a/desktop/src/features/channels/ui/ChannelTypeSettings.tsx b/desktop/src/features/channels/ui/ChannelTypeSettings.tsx index 82fd1c9f7a1..3f7a2d907ed 100644 --- a/desktop/src/features/channels/ui/ChannelTypeSettings.tsx +++ b/desktop/src/features/channels/ui/ChannelTypeSettings.tsx @@ -1,4 +1,4 @@ -import { ChevronDown } from "lucide-react"; +import { ChevronDown, ClockFading, Hash } from "lucide-react"; import { AnimatePresence, motion, useReducedMotion } from "motion/react"; import { @@ -11,6 +11,7 @@ import { } from "@/features/channels/lib/ephemeralChannel"; import { useIsProjectHomeChannel } from "@/features/projects/lib/projectHomeChannel"; import type { Channel } from "@/shared/api/types"; +import { cn } from "@/shared/lib/cn"; import { Button } from "@/shared/ui/button"; import { DropdownMenu, @@ -19,9 +20,15 @@ import { DropdownMenuRadioItem, DropdownMenuTrigger, } from "@/shared/ui/dropdown-menu"; +import { SegmentedControl } from "@/shared/ui/segmented-control"; import { EditableInfoFieldRow } from "./ChannelManagementSheetRows"; import { ChannelTypePicker } from "./ChannelTypePicker"; +const CHANNEL_TYPE_OPTIONS = [ + { value: "temporary", label: "Temporary", Icon: ClockFading }, + { value: "ongoing", label: "Ongoing", Icon: Hash }, +] as const; + const EPHEMERAL_TIMEOUT_OPTIONS = [ { label: "30 minutes", seconds: 30 * 60 }, { label: "1 hour", seconds: 60 * 60 }, @@ -76,6 +83,7 @@ export function ChannelTypeSettings({ temporary, testIdPrefix, ttlSeconds, + variant = "dropdown", }: { channelId?: string | null; disabled?: boolean; @@ -87,6 +95,7 @@ export function ChannelTypeSettings({ temporary: boolean; testIdPrefix: string; ttlSeconds: number; + variant?: "dropdown" | "segmented"; }) { const projectHome = useIsProjectHomeChannel(channelId); const lifecycle = channelLifecycle({ projectHome, temporary }); @@ -116,18 +125,39 @@ export function ChannelTypeSettings({ className="flex items-center justify-between gap-3 px-3 py-3" data-testid={`${testIdPrefix}-channel-type-row`} > - {label} - onTemporaryChange(next === "temporary")} - onOpenChange={onOpenChange} - open={open} - testId={`${testIdPrefix}-channel-type`} - /> + + {label} + + {variant === "segmented" ? ( + onTemporaryChange(value === "temporary")} + optionTestIdPrefix={`${testIdPrefix}-channel-type-option`} + options={CHANNEL_TYPE_OPTIONS} + testId={`${testIdPrefix}-channel-type`} + value={temporary ? "temporary" : "ongoing"} + /> + ) : ( + + onTemporaryChange(next === "temporary") + } + onOpenChange={onOpenChange} + open={open} + testId={`${testIdPrefix}-channel-type`} + /> + )} {temporary && !projectHome ? ( @@ -144,7 +174,10 @@ export function ChannelTypeSettings({ data-testid={`${testIdPrefix}-ephemeral-settings`} >