feat(drive-web): item share expiry config ui

2026-02-02 07:31:18 +00:00 · 2025-12-28 22:14:10 +00:00
parent 19a870a4e7
commit b60d18d365
10 changed files with 1099 additions and 35 deletions
--- a/apps/drive-web/package.json
+++ b/apps/drive-web/package.json
@@ -19,7 +19,9 @@
 		"@radix-ui/react-dialog": "^1.1.15",
 		"@radix-ui/react-dropdown-menu": "^2.1.16",
 		"@radix-ui/react-label": "^2.1.7",
+		"@radix-ui/react-popover": "^1.1.15",
 		"@radix-ui/react-progress": "^1.1.7",
+		"@radix-ui/react-select": "^2.2.6",
 		"@radix-ui/react-separator": "^1.1.8",
 		"@radix-ui/react-slot": "^1.2.4",
 		"@radix-ui/react-tooltip": "^1.2.8",
@@ -34,6 +36,7 @@
 		"clsx": "^2.1.1",
 		"convex": "^1.27.0",
 		"convex-helpers": "^0.1.104",
+		"date-fns": "^4.1.0",
 		"jotai": "^2.14.0",
 		"jotai-effect": "^2.1.3",
 		"jotai-scope": "^0.9.5",
@@ -43,6 +46,7 @@
 		"nanoid": "^5.1.6",
 		"next-themes": "^0.4.6",
 		"react": "^19",
+		"react-day-picker": "^9.13.0",
 		"react-dom": "^19",
 		"sonner": "^2.0.7",
 		"tailwind-merge": "^3.3.1",
--- a/apps/drive-web/src/components/date-input.tsx
+++ b/apps/drive-web/src/components/date-input.tsx
@@ -0,0 +1,204 @@
+import { CalendarIcon } from "lucide-react"
+import * as React from "react"
+import { Button } from "@/components/ui/button"
+import { Calendar } from "@/components/ui/calendar"
+import { Input } from "@/components/ui/input"
+import {
+	Popover,
+	PopoverContent,
+	PopoverTrigger,
+} from "@/components/ui/popover"
+import { formatDate, isValidDate } from "@/lib/date"
+import { cn } from "@/lib/utils"
+
+export type DateInputHandle = {
+	readonly date: Date | undefined
+}
+
+type DateInputProps = {
+	ref?: React.Ref<DateInputHandle>
+	value?: Date
+	defaultValue?: Date
+	onDateChange?: (date: Date | undefined) => void
+	placeholder?: string
+	inputId?: string
+	disabled?: boolean
+	startMonth?: Date
+	endMonth?: Date
+	className?: string
+	inputClassName?: string
+	buttonClassName?: string
+}
+
+export function DateInput(props: DateInputProps) {
+	const {
+		ref: imperativeRef,
+		value,
+		defaultValue,
+		onDateChange,
+		placeholder = "June 01, 2025",
+		inputId,
+		disabled = false,
+		startMonth: startMonthProp,
+		endMonth: endMonthProp,
+		className,
+		inputClassName,
+		buttonClassName,
+	} = props
+	const isControlled = Object.hasOwn(props, "value")
+	const [open, setOpen] = React.useState(false)
+	const [internalDate, setInternalDate] = React.useState<Date | undefined>(
+		isControlled ? value : defaultValue,
+	)
+	const selectedDate = isControlled ? value : internalDate
+	const [month, setMonth] = React.useState<Date | undefined>(selectedDate)
+	const [inputValue, setInputValue] = React.useState(formatDate(selectedDate))
+	const baseYear = (selectedDate ?? new Date()).getFullYear()
+	const startMonth =
+		startMonthProp ?? new Date(baseYear - 100, 0, 1)
+	const endMonth =
+		endMonthProp ?? new Date(baseYear + 100, 11, 1)
+
+	React.useEffect(() => {
+		setInputValue(formatDate(selectedDate))
+		setMonth(selectedDate)
+	}, [selectedDate])
+
+	React.useImperativeHandle(
+		imperativeRef,
+		() => ({
+			get date() {
+				return selectedDate
+			},
+		}),
+		[selectedDate],
+	)
+
+	const commitDate = React.useCallback(
+		(nextDate: Date | undefined) => {
+			if (!isControlled) {
+				setInternalDate(nextDate)
+			}
+
+			onDateChange?.(nextDate)
+		},
+		[isControlled, onDateChange],
+	)
+
+	return (
+		<div
+			className={cn("relative flex gap-2", className)}
+			data-slot="date-input"
+		>
+			<Input
+				id={inputId}
+				value={inputValue}
+				placeholder={placeholder}
+				disabled={disabled}
+				className={cn("bg-background pr-10", inputClassName)}
+				onChange={(event) => {
+					const nextValue = event.target.value
+					setInputValue(nextValue)
+
+					if (!nextValue.trim()) {
+						commitDate(undefined)
+						setMonth(undefined)
+					}
+				}}
+				onBlur={() => {
+					const nextDate = new Date(inputValue)
+
+					if (isValidDate(nextDate)) {
+						commitDate(nextDate)
+						setMonth(nextDate)
+						setInputValue(formatDate(nextDate))
+					}
+				}}
+				onKeyDown={(event) => {
+					if (event.key === "ArrowDown") {
+						event.preventDefault()
+						if (!disabled) {
+							setOpen(true)
+						}
+					}
+
+					if (event.key === "Enter") {
+						const nextDate = new Date(inputValue)
+
+						if (isValidDate(nextDate)) {
+							commitDate(nextDate)
+							setMonth(nextDate)
+							setInputValue(formatDate(nextDate))
+						}
+					}
+				}}
+			/>
+			<Popover
+				open={open}
+				onOpenChange={(nextOpen) => {
+					if (disabled) {
+						return
+					}
+
+					setOpen(nextOpen)
+				}}
+			>
+				<PopoverTrigger asChild>
+					<Button
+						id={inputId ? `${inputId}-picker` : undefined}
+						type="button"
+						variant="ghost"
+						disabled={disabled}
+						className={cn(
+							"absolute top-1/2 right-2 size-6 -translate-y-1/2",
+							buttonClassName,
+						)}
+					>
+						<CalendarIcon className="size-3.5" />
+						<span className="sr-only">Select date</span>
+					</Button>
+				</PopoverTrigger>
+				<PopoverContent
+					className="w-auto overflow-hidden p-0"
+					align="end"
+					alignOffset={-8}
+					sideOffset={10}
+				>
+					<Calendar
+						mode="single"
+						selected={selectedDate}
+						captionLayout="dropdown"
+						startMonth={startMonth}
+						endMonth={endMonth}
+						month={month}
+						onMonthChange={setMonth}
+						onSelect={(nextDate) => {
+							commitDate(nextDate)
+							setInputValue(formatDate(nextDate))
+							if (nextDate) {
+								setMonth(nextDate)
+							}
+							setOpen(false)
+						}}
+					/>
+					<div className="border-t p-2">
+						<Button
+							type="button"
+							variant="ghost"
+							size="sm"
+							className="w-full justify-center"
+							onClick={() => {
+								const today = new Date()
+								commitDate(today)
+								setInputValue(formatDate(today))
+								setMonth(today)
+							}}
+						>
+							Today
+						</Button>
+					</div>
+				</PopoverContent>
+			</Popover>
+		</div>
+	)
+}
--- a/apps/drive-web/src/components/ui/calendar.tsx
+++ b/apps/drive-web/src/components/ui/calendar.tsx
@@ -0,0 +1,232 @@
+import {
+	ChevronDownIcon,
+	ChevronLeftIcon,
+	ChevronRightIcon,
+} from "lucide-react"
+import * as React from "react"
+import {
+	type DayButton,
+	DayPicker,
+	getDefaultClassNames,
+} from "react-day-picker"
+import { Button, buttonVariants } from "@/components/ui/button"
+import { cn } from "@/lib/utils"
+
+function Calendar({
+	className,
+	classNames,
+	showOutsideDays = true,
+	captionLayout = "label",
+	buttonVariant = "ghost",
+	formatters,
+	components,
+	...props
+}: React.ComponentProps<typeof DayPicker> & {
+	buttonVariant?: React.ComponentProps<typeof Button>["variant"]
+}) {
+	const defaultClassNames = getDefaultClassNames()
+
+	return (
+		<DayPicker
+			showOutsideDays={showOutsideDays}
+			className={cn(
+				"bg-background group/calendar p-3 [--cell-size:--spacing(8)] [[data-slot=card-content]_&]:bg-transparent [[data-slot=popover-content]_&]:bg-transparent",
+				String.raw`rtl:**:[.rdp-button\_next>svg]:rotate-180`,
+				String.raw`rtl:**:[.rdp-button\_previous>svg]:rotate-180`,
+				className,
+			)}
+			captionLayout={captionLayout}
+			formatters={{
+				formatMonthDropdown: (date) =>
+					date.toLocaleString("default", { month: "short" }),
+				...formatters,
+			}}
+			classNames={{
+				root: cn("w-fit", defaultClassNames.root),
+				months: cn(
+					"flex gap-4 flex-col md:flex-row relative",
+					defaultClassNames.months,
+				),
+				month: cn(
+					"flex flex-col w-full gap-4",
+					defaultClassNames.month,
+				),
+				nav: cn(
+					"flex items-center gap-1 w-full absolute top-0 inset-x-0 justify-between",
+					defaultClassNames.nav,
+				),
+				button_previous: cn(
+					buttonVariants({ variant: buttonVariant }),
+					"size-(--cell-size) aria-disabled:opacity-50 p-0 select-none",
+					defaultClassNames.button_previous,
+				),
+				button_next: cn(
+					buttonVariants({ variant: buttonVariant }),
+					"size-(--cell-size) aria-disabled:opacity-50 p-0 select-none",
+					defaultClassNames.button_next,
+				),
+				month_caption: cn(
+					"flex items-center justify-center h-(--cell-size) w-full px-(--cell-size)",
+					defaultClassNames.month_caption,
+				),
+				dropdowns: cn(
+					"w-full flex items-center text-sm font-medium justify-center h-(--cell-size) gap-1.5",
+					defaultClassNames.dropdowns,
+				),
+				dropdown_root: cn(
+					"relative has-focus:border-ring border border-input shadow-xs has-focus:ring-ring/50 has-focus:ring-[3px] rounded-md",
+					defaultClassNames.dropdown_root,
+				),
+				dropdown: cn(
+					"absolute bg-popover inset-0 opacity-0",
+					defaultClassNames.dropdown,
+				),
+				caption_label: cn(
+					"select-none font-medium",
+					captionLayout === "label"
+						? "text-sm"
+						: "rounded-md pl-2 pr-1 flex items-center gap-1 text-sm h-8 [&>svg]:text-muted-foreground [&>svg]:size-3.5",
+					defaultClassNames.caption_label,
+				),
+				table: "w-full border-collapse",
+				weekdays: cn("flex", defaultClassNames.weekdays),
+				weekday: cn(
+					"text-muted-foreground rounded-md flex-1 font-normal text-[0.8rem] select-none",
+					defaultClassNames.weekday,
+				),
+				week: cn("flex w-full mt-2", defaultClassNames.week),
+				week_number_header: cn(
+					"select-none w-(--cell-size)",
+					defaultClassNames.week_number_header,
+				),
+				week_number: cn(
+					"text-[0.8rem] select-none text-muted-foreground",
+					defaultClassNames.week_number,
+				),
+				day: cn(
+					"relative w-full h-full p-0 text-center [&:last-child[data-selected=true]_button]:rounded-r-md group/day aspect-square select-none",
+					props.showWeekNumber
+						? "[&:nth-child(2)[data-selected=true]_button]:rounded-l-md"
+						: "[&:first-child[data-selected=true]_button]:rounded-l-md",
+					defaultClassNames.day,
+				),
+				range_start: cn(
+					"rounded-l-md bg-accent",
+					defaultClassNames.range_start,
+				),
+				range_middle: cn(
+					"rounded-none",
+					defaultClassNames.range_middle,
+				),
+				range_end: cn(
+					"rounded-r-md bg-accent",
+					defaultClassNames.range_end,
+				),
+				today: cn(
+					"bg-accent text-accent-foreground rounded-md data-[selected=true]:rounded-none",
+					defaultClassNames.today,
+				),
+				outside: cn(
+					"text-muted-foreground aria-selected:text-muted-foreground",
+					defaultClassNames.outside,
+				),
+				disabled: cn(
+					"text-muted-foreground opacity-50",
+					defaultClassNames.disabled,
+				),
+				hidden: cn("invisible", defaultClassNames.hidden),
+				...classNames,
+			}}
+			components={{
+				Root: ({ className, rootRef, ...props }) => {
+					return (
+						<div
+							data-slot="calendar"
+							ref={rootRef}
+							className={cn(className)}
+							{...props}
+						/>
+					)
+				},
+				Chevron: ({ className, orientation, ...props }) => {
+					if (orientation === "left") {
+						return (
+							<ChevronLeftIcon
+								className={cn("size-4", className)}
+								{...props}
+							/>
+						)
+					}
+
+					if (orientation === "right") {
+						return (
+							<ChevronRightIcon
+								className={cn("size-4", className)}
+								{...props}
+							/>
+						)
+					}
+
+					return (
+						<ChevronDownIcon
+							className={cn("size-4", className)}
+							{...props}
+						/>
+					)
+				},
+				DayButton: CalendarDayButton,
+				WeekNumber: ({ children, ...props }) => {
+					return (
+						<td {...props}>
+							<div className="flex size-(--cell-size) items-center justify-center text-center">
+								{children}
+							</div>
+						</td>
+					)
+				},
+				...components,
+			}}
+			{...props}
+		/>
+	)
+}
+
+function CalendarDayButton({
+	className,
+	day,
+	modifiers,
+	...props
+}: React.ComponentProps<typeof DayButton>) {
+	const defaultClassNames = getDefaultClassNames()
+
+	const ref = React.useRef<HTMLButtonElement>(null)
+	React.useEffect(() => {
+		if (modifiers.focused) ref.current?.focus()
+	}, [modifiers.focused])
+
+	return (
+		<Button
+			ref={ref}
+			variant="ghost"
+			size="icon"
+			data-day={day.date.toLocaleDateString()}
+			data-selected-single={
+				modifiers.selected &&
+				!modifiers.range_start &&
+				!modifiers.range_end &&
+				!modifiers.range_middle
+			}
+			data-range-start={modifiers.range_start}
+			data-range-end={modifiers.range_end}
+			data-range-middle={modifiers.range_middle}
+			className={cn(
+				"data-[selected-single=true]:bg-primary data-[selected-single=true]:text-primary-foreground data-[range-middle=true]:bg-accent data-[range-middle=true]:text-accent-foreground data-[range-start=true]:bg-primary data-[range-start=true]:text-primary-foreground data-[range-end=true]:bg-primary data-[range-end=true]:text-primary-foreground group-data-[focused=true]/day:border-ring group-data-[focused=true]/day:ring-ring/50 dark:hover:text-accent-foreground flex aspect-square size-auto w-full min-w-(--cell-size) flex-col gap-1 leading-none font-normal group-data-[focused=true]/day:relative group-data-[focused=true]/day:z-10 group-data-[focused=true]/day:ring-[3px] data-[range-end=true]:rounded-md data-[range-end=true]:rounded-r-md data-[range-middle=true]:rounded-none data-[range-start=true]:rounded-md data-[range-start=true]:rounded-l-md [&>span]:text-xs [&>span]:opacity-70",
+				defaultClassNames.day,
+				className,
+			)}
+			{...props}
+		/>
+	)
+}
+
+export { Calendar, CalendarDayButton }
--- a/apps/drive-web/src/components/ui/kbd.tsx
+++ b/apps/drive-web/src/components/ui/kbd.tsx
@@ -0,0 +1,28 @@
+import { cn } from "@/lib/utils"
+
+function Kbd({ className, ...props }: React.ComponentProps<"kbd">) {
+  return (
+    <kbd
+      data-slot="kbd"
+      className={cn(
+        "bg-muted text-muted-foreground pointer-events-none inline-flex h-5 w-fit min-w-5 items-center justify-center gap-1 rounded-sm px-1 font-sans text-xs font-medium select-none",
+        "[&_svg:not([class*='size-'])]:size-3",
+        "[[data-slot=tooltip-content]_&]:bg-background/20 [[data-slot=tooltip-content]_&]:text-background dark:[[data-slot=tooltip-content]_&]:bg-background/10",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function KbdGroup({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <kbd
+      data-slot="kbd-group"
+      className={cn("inline-flex items-center gap-1", className)}
+      {...props}
+    />
+  )
+}
+
+export { Kbd, KbdGroup }
--- a/apps/drive-web/src/components/ui/popover.tsx
+++ b/apps/drive-web/src/components/ui/popover.tsx
@@ -0,0 +1,40 @@
+import * as PopoverPrimitive from "@radix-ui/react-popover"
+import type * as React from "react"
+
+import { cn } from "@/lib/utils"
+
+function Popover({
+	...props
+}: React.ComponentProps<typeof PopoverPrimitive.Root>) {
+	return <PopoverPrimitive.Root data-slot="popover" {...props} />
+}
+
+function PopoverTrigger({
+	...props
+}: React.ComponentProps<typeof PopoverPrimitive.Trigger>) {
+	return <PopoverPrimitive.Trigger data-slot="popover-trigger" {...props} />
+}
+
+function PopoverContent({
+	className,
+	align = "center",
+	sideOffset = 4,
+	...props
+}: React.ComponentProps<typeof PopoverPrimitive.Content>) {
+	return (
+		<PopoverPrimitive.Portal>
+			<PopoverPrimitive.Content
+				data-slot="popover-content"
+				align={align}
+				sideOffset={sideOffset}
+				className={cn(
+					"bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 w-72 origin-(--radix-popover-content-transform-origin) rounded-md border p-4 shadow-md outline-hidden",
+					className,
+				)}
+				{...props}
+			/>
+		</PopoverPrimitive.Portal>
+	)
+}
+
+export { Popover, PopoverContent, PopoverTrigger }
--- a/apps/drive-web/src/components/ui/select.tsx
+++ b/apps/drive-web/src/components/ui/select.tsx
@@ -0,0 +1,188 @@
+import * as React from "react"
+import * as SelectPrimitive from "@radix-ui/react-select"
+import { CheckIcon, ChevronDownIcon, ChevronUpIcon } from "lucide-react"
+
+import { cn } from "@/lib/utils"
+
+function Select({
+  ...props
+}: React.ComponentProps<typeof SelectPrimitive.Root>) {
+  return <SelectPrimitive.Root data-slot="select" {...props} />
+}
+
+function SelectGroup({
+  ...props
+}: React.ComponentProps<typeof SelectPrimitive.Group>) {
+  return <SelectPrimitive.Group data-slot="select-group" {...props} />
+}
+
+function SelectValue({
+  ...props
+}: React.ComponentProps<typeof SelectPrimitive.Value>) {
+  return <SelectPrimitive.Value data-slot="select-value" {...props} />
+}
+
+function SelectTrigger({
+  className,
+  size = "default",
+  children,
+  ...props
+}: React.ComponentProps<typeof SelectPrimitive.Trigger> & {
+  size?: "sm" | "default"
+}) {
+  return (
+    <SelectPrimitive.Trigger
+      data-slot="select-trigger"
+      data-size={size}
+      className={cn(
+        "border-input data-[placeholder]:text-muted-foreground [&_svg:not([class*='text-'])]:text-muted-foreground focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:bg-input/30 dark:hover:bg-input/50 flex w-fit items-center justify-between gap-2 rounded-md border bg-transparent px-3 py-2 text-sm whitespace-nowrap shadow-xs transition-[color,box-shadow] outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50 data-[size=default]:h-9 data-[size=sm]:h-8 *:data-[slot=select-value]:line-clamp-1 *:data-[slot=select-value]:flex *:data-[slot=select-value]:items-center *:data-[slot=select-value]:gap-2 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        className
+      )}
+      {...props}
+    >
+      {children}
+      <SelectPrimitive.Icon asChild>
+        <ChevronDownIcon className="size-4 opacity-50" />
+      </SelectPrimitive.Icon>
+    </SelectPrimitive.Trigger>
+  )
+}
+
+function SelectContent({
+  className,
+  children,
+  position = "item-aligned",
+  align = "center",
+  ...props
+}: React.ComponentProps<typeof SelectPrimitive.Content>) {
+  return (
+    <SelectPrimitive.Portal>
+      <SelectPrimitive.Content
+        data-slot="select-content"
+        className={cn(
+          "bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 relative z-50 max-h-(--radix-select-content-available-height) min-w-[8rem] origin-(--radix-select-content-transform-origin) overflow-x-hidden overflow-y-auto rounded-md border shadow-md",
+          position === "popper" &&
+            "data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1",
+          className
+        )}
+        position={position}
+        align={align}
+        {...props}
+      >
+        <SelectScrollUpButton />
+        <SelectPrimitive.Viewport
+          className={cn(
+            "p-1",
+            position === "popper" &&
+              "h-[var(--radix-select-trigger-height)] w-full min-w-[var(--radix-select-trigger-width)] scroll-my-1"
+          )}
+        >
+          {children}
+        </SelectPrimitive.Viewport>
+        <SelectScrollDownButton />
+      </SelectPrimitive.Content>
+    </SelectPrimitive.Portal>
+  )
+}
+
+function SelectLabel({
+  className,
+  ...props
+}: React.ComponentProps<typeof SelectPrimitive.Label>) {
+  return (
+    <SelectPrimitive.Label
+      data-slot="select-label"
+      className={cn("text-muted-foreground px-2 py-1.5 text-xs", className)}
+      {...props}
+    />
+  )
+}
+
+function SelectItem({
+  className,
+  children,
+  ...props
+}: React.ComponentProps<typeof SelectPrimitive.Item>) {
+  return (
+    <SelectPrimitive.Item
+      data-slot="select-item"
+      className={cn(
+        "focus:bg-accent focus:text-accent-foreground [&_svg:not([class*='text-'])]:text-muted-foreground relative flex w-full cursor-default items-center gap-2 rounded-sm py-1.5 pr-8 pl-2 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 *:[span]:last:flex *:[span]:last:items-center *:[span]:last:gap-2",
+        className
+      )}
+      {...props}
+    >
+      <span
+        data-slot="select-item-indicator"
+        className="absolute right-2 flex size-3.5 items-center justify-center"
+      >
+        <SelectPrimitive.ItemIndicator>
+          <CheckIcon className="size-4" />
+        </SelectPrimitive.ItemIndicator>
+      </span>
+      <SelectPrimitive.ItemText>{children}</SelectPrimitive.ItemText>
+    </SelectPrimitive.Item>
+  )
+}
+
+function SelectSeparator({
+  className,
+  ...props
+}: React.ComponentProps<typeof SelectPrimitive.Separator>) {
+  return (
+    <SelectPrimitive.Separator
+      data-slot="select-separator"
+      className={cn("bg-border pointer-events-none -mx-1 my-1 h-px", className)}
+      {...props}
+    />
+  )
+}
+
+function SelectScrollUpButton({
+  className,
+  ...props
+}: React.ComponentProps<typeof SelectPrimitive.ScrollUpButton>) {
+  return (
+    <SelectPrimitive.ScrollUpButton
+      data-slot="select-scroll-up-button"
+      className={cn(
+        "flex cursor-default items-center justify-center py-1",
+        className
+      )}
+      {...props}
+    >
+      <ChevronUpIcon className="size-4" />
+    </SelectPrimitive.ScrollUpButton>
+  )
+}
+
+function SelectScrollDownButton({
+  className,
+  ...props
+}: React.ComponentProps<typeof SelectPrimitive.ScrollDownButton>) {
+  return (
+    <SelectPrimitive.ScrollDownButton
+      data-slot="select-scroll-down-button"
+      className={cn(
+        "flex cursor-default items-center justify-center py-1",
+        className
+      )}
+      {...props}
+    >
+      <ChevronDownIcon className="size-4" />
+    </SelectPrimitive.ScrollDownButton>
+  )
+}
+
+export {
+  Select,
+  SelectContent,
+  SelectGroup,
+  SelectItem,
+  SelectLabel,
+  SelectScrollDownButton,
+  SelectScrollUpButton,
+  SelectSeparator,
+  SelectTrigger,
+  SelectValue,
+}
--- a/apps/drive-web/src/lib/date.ts
+++ b/apps/drive-web/src/lib/date.ts
@@ -0,0 +1,19 @@
+export function formatDate(date: Date | undefined) {
+	if (!date) {
+		return ""
+	}
+
+	return date.toLocaleDateString("en-US", {
+		day: "2-digit",
+		month: "long",
+		year: "numeric",
+	})
+}
+
+export function isValidDate(date: Date | undefined) {
+	if (!date) {
+		return false
+	}
+
+	return !Number.isNaN(date.getTime())
+}
--- a/apps/drive-web/src/sharing/api.ts
+++ b/apps/drive-web/src/sharing/api.ts
@@ -14,7 +14,7 @@ export const fileSharesQueryAtom = atomFamily((fileId: string) =>
 				? () =>
 						fetchApi(
 							"GET",
-							`/accounts/${account.id}/files/${fileId}/shares`,
+							`/accounts/${account.id}/files/${fileId}/shares?includesExpired=true`,
 							{ returns: Share.array() },
 						).then(([_, result]) => result)
 				: skipToken,
@@ -31,7 +31,7 @@ export const directorySharesQueryAtom = atomFamily((directoryId: string) =>
 				? () =>
 						fetchApi(
 							"GET",
-							`/accounts/${account.id}/directories/${directoryId}/shares`,
+							`/accounts/${account.id}/directories/${directoryId}/shares?includesExpired=true`,
 							{ returns: Share.array() },
 						).then(([_, result]) => result)
 				: skipToken,
@@ -73,3 +73,24 @@ export const deleteShareMutationAtom = atom((get) =>
 		},
 	}),
 )
+
+export const updateShareMutationAtom = atom((get) =>
+	mutationOptions({
+		mutationFn: async ({
+			shareId,
+			expiresAt,
+		}: {
+			shareId: string
+			expiresAt?: Date | null
+		}) => {
+			const account = get(currentAccountAtom)
+			if (!account) throw new Error("No account selected")
+
+			await fetchApi(
+				"PATCH",
+				`/accounts/${account.id}/shares/${shareId}`,
+				{ body: JSON.stringify({ expiresAt }), returns: Share },
+			)
+		},
+	}),
+)
--- a/apps/drive-web/src/sharing/item-share-dialog.tsx
+++ b/apps/drive-web/src/sharing/item-share-dialog.tsx
@@ -1,5 +1,11 @@
 import { useMutation, useQuery } from "@tanstack/react-query"
-import { useAtomValue, useStore } from "jotai"
+import {
+	atom,
+	type PrimitiveAtom,
+	useAtomValue,
+	useSetAtom,
+	useStore,
+} from "jotai"
 import {
 	CheckIcon,
 	CopyIcon,
@@ -7,7 +13,8 @@ import {
 	LinkIcon,
 	LockKeyholeIcon,
 } from "lucide-react"
-import { createContext, useContext, useRef } from "react"
+import type React from "react"
+import { createContext, useContext, useMemo, useRef, useState } from "react"
 import {
 	CrossfadeIcon,
 	type CrossfadeIconHandle,
@@ -28,19 +35,38 @@ import {
 	DropdownMenuItem,
 	DropdownMenuTrigger,
 } from "@/components/ui/dropdown-menu"
+import { Input } from "@/components/ui/input"
 import { copyToClipboardMutation } from "@/lib/clipboard"
 import {
 	createShareMutationAtom,
 	deleteShareMutationAtom,
 	directorySharesQueryAtom,
 	fileSharesQueryAtom,
+	updateShareMutationAtom,
 } from "@/sharing/api"
 import type { DirectoryItem } from "@/vfs/vfs"
+import { DateInput, type DateInputHandle } from "../components/date-input"
+import { Checkbox } from "../components/ui/checkbox"
+import { Kbd } from "../components/ui/kbd"
+import { Label } from "../components/ui/label"
+import {
+	Popover,
+	PopoverContent,
+	PopoverTrigger,
+} from "../components/ui/popover"
+import {
+	Select,
+	SelectContent,
+	SelectItem,
+	SelectTrigger,
+	SelectValue,
+} from "../components/ui/select"
 import {
 	Tooltip,
 	TooltipContent,
 	TooltipTrigger,
 } from "../components/ui/tooltip"
+import { cn } from "../lib/utils"
 import type { Share } from "./share"

 type ItemShareDialogProps = {
@@ -73,7 +99,7 @@ export function ItemShareDialog({ item, open, onClose }: ItemShareDialogProps) {

 	return (
 		<Dialog open={open} onOpenChange={onClose}>
-			<DialogContent>
+			<DialogContent className="select-none">
 				<DialogHeader>
 					<DialogTitle>Share {item?.name}</DialogTitle>
 					<DialogDescription>{description}</DialogDescription>
@@ -177,6 +203,14 @@ function ShareLinkListItem({ share }: { share: Share }) {
 		}
 	}

+	const formattedExpirationDate = share.expiresAt
+		? share.expiresAt.toLocaleDateString("en-US", {
+				month: "long",
+				day: "numeric",
+				year: "numeric",
+			})
+		: ""
+
 	return (
 		<li key={share.id} className="group flex items-center gap-3">
 			{/** biome-ignore lint/a11y/noStaticElementInteractions: this is strictly for convenience. the normal copy link button is still accessible. */}
@@ -199,8 +233,8 @@ function ShareLinkListItem({ share }: { share: Share }) {
 			>
 				<p>Share link</p>
 				<p className="text-muted-foreground">
-					{share.expiresAt
-						? `Expires at ${share.expiresAt}`
+					{formattedExpirationDate
+						? `Expires at ${formattedExpirationDate}`
 						: "Never expires"}
 				</p>
 			</div>
@@ -225,27 +259,284 @@ function ShareLinkListItem({ share }: { share: Share }) {
 					</TooltipTrigger>
 					<TooltipContent>Copy share link</TooltipContent>
 				</Tooltip>
-				<DropdownMenu>
-					<DropdownMenuTrigger asChild>
-						<Button
-							variant="outline"
-							size="sm"
-							className="share-options-trigger aria-expanded:bg-accent!"
-						>
-							<EllipsisIcon />
-							<span className="sr-only">Share link options</span>
-						</Button>
-					</DropdownMenuTrigger>
-					<ShareLinkOptionsMenu share={share} />
-				</DropdownMenu>
+				<ShareLinkOptionsMenuButton share={share} />
 			</ButtonGroup>
 		</li>
 	)
 }

-function ShareLinkOptionsMenu({ share }: { share: Share }) {
+const ACTIVE_POPOVER_KIND = {
+	rename: "rename",
+	setExpiration: "setExpiration",
+} as const
+type ActivePopoverKind =
+	(typeof ACTIVE_POPOVER_KIND)[keyof typeof ACTIVE_POPOVER_KIND]
+
+function ShareLinkOptionsMenuButton({ share }: { share: Share }) {
+	const activePopoverAtom = useMemo(
+		() => atom<ActivePopoverKind | null>(null),
+		[],
+	)
+
+	const activePopoverKind = useAtomValue(activePopoverAtom)
+
+	const button = (
+		<Button
+			variant="outline"
+			size="sm"
+			className={cn("share-options-trigger aria-expanded:bg-accent!", {
+				"bg-accent!": activePopoverKind !== null,
+			})}
+		>
+			<EllipsisIcon />
+			<span className="sr-only">Share link options</span>
+		</Button>
+	)
+
+	switch (activePopoverKind) {
+		case "rename":
+			return (
+				<RenameShareLinkPopover
+					share={share}
+					activePopoverAtom={activePopoverAtom}
+				>
+					{button}
+				</RenameShareLinkPopover>
+			)
+
+		case "setExpiration":
+			return (
+				<ConfigureShareLinkExpirationPopover
+					share={share}
+					activePopoverAtom={activePopoverAtom}
+				>
+					{button}
+				</ConfigureShareLinkExpirationPopover>
+			)
+
+		default:
+			return (
+				<ShareLinkOptionsMenu
+					share={share}
+					activePopoverAtom={activePopoverAtom}
+				>
+					{button}
+				</ShareLinkOptionsMenu>
+			)
+	}
+}
+
+function RenameShareLinkPopover({
+	share,
+	children,
+	activePopoverAtom,
+}: React.PropsWithChildren<{
+	share: Share
+	activePopoverAtom: PrimitiveAtom<ActivePopoverKind | null>
+}>) {
+	const setActivePopover = useSetAtom(activePopoverAtom)
+	const inputId = `rename-share-link-${share.id}`
+
+	return (
+		<Popover
+			modal
+			defaultOpen
+			onOpenChange={(nextOpen) => {
+				if (!nextOpen) {
+					setActivePopover(null)
+				}
+			}}
+		>
+			<PopoverTrigger asChild>{children}</PopoverTrigger>
+			<PopoverContent align="end">
+				<header className="mb-3">
+					<h1 className="leading-none font-medium mb-2">
+						Set a label for this link
+					</h1>
+					<p className="text-muted-foreground text-sm">
+						Only you can see the label.
+					</p>
+				</header>
+				<Input
+					id={inputId}
+					name={inputId}
+					placeholder="e.g. Product roadmap share"
+				/>
+				<div className="flex justify-end mt-4 gap-2">
+					<Button
+						variant="outline"
+						size="sm"
+						onClick={() => {
+							setActivePopover(null)
+						}}
+					>
+						Cancel
+					</Button>
+					<Button variant="default" size="sm">
+						Save{" "}
+						<Kbd className="border border-primary-foreground/20 bg-transparent text-primary-foreground">
+							⏎
+						</Kbd>
+					</Button>
+				</div>
+			</PopoverContent>
+		</Popover>
+	)
+}
+
+function ConfigureShareLinkExpirationPopover({
+	share,
+	children,
+	activePopoverAtom,
+}: React.PropsWithChildren<{
+	share: Share
+	activePopoverAtom: PrimitiveAtom<ActivePopoverKind | null>
+}>) {
+	const EXPIRATION_TYPE = {
+		date: "date",
+		never: "never",
+	} as const
+	type ExpirationType = (typeof EXPIRATION_TYPE)[keyof typeof EXPIRATION_TYPE]
+
+	const [expirationType, setExpirationType] = useState<ExpirationType>(
+		share.expiresAt === null ? EXPIRATION_TYPE.never : EXPIRATION_TYPE.date,
+	)
 	const { item } = useContext(ItemShareDialogContext)
 	const store = useStore()
+	const setActivePopover = useSetAtom(activePopoverAtom)
+	const dateInputRef = useRef<DateInputHandle>(null)
+
+	const { mutate: updateShare, isPending: isUpdatingShare } = useMutation({
+		...useAtomValue(updateShareMutationAtom),
+		onSuccess: (_updatedShare, _vars, _, { client }) => {
+			let queryKey: readonly unknown[] | null
+			switch (item.kind) {
+				case "file":
+					queryKey = store.get(fileSharesQueryAtom(item.id)).queryKey
+					break
+				case "directory":
+					queryKey = store.get(
+						directorySharesQueryAtom(item.id),
+					).queryKey
+					break
+				default:
+					queryKey = null
+					break
+			}
+			if (queryKey) {
+				client.invalidateQueries({
+					queryKey,
+				})
+			}
+			setActivePopover(null)
+		},
+	})
+
+	const updateExpirationDate = () => {
+		switch (expirationType) {
+			case EXPIRATION_TYPE.date:
+				if (dateInputRef.current?.date) {
+					updateShare({
+						shareId: share.id,
+						expiresAt: dateInputRef.current.date,
+					})
+				}
+				break
+			case EXPIRATION_TYPE.never:
+				updateShare({
+					shareId: share.id,
+					expiresAt: null,
+				})
+				break
+		}
+	}
+
+	return (
+		<Popover
+			modal
+			defaultOpen
+			onOpenChange={(nextOpen) => {
+				if (!nextOpen) {
+					setActivePopover(null)
+				}
+			}}
+		>
+			<PopoverTrigger asChild>{children}</PopoverTrigger>
+			<PopoverContent align="end">
+				<header className="mb-2">
+					<h1 className="leading-none font-medium mb-2">
+						Configure expiration
+					</h1>
+					<p className="text-muted-foreground text-sm">
+						The share link will be accessible until the selected
+						date.
+					</p>
+				</header>
+				<Select
+					value={expirationType}
+					onValueChange={(value) => {
+						setExpirationType(value as ExpirationType)
+					}}
+				>
+					<SelectTrigger className="w-full">
+						<SelectValue placeholder="Select a fruit" />
+					</SelectTrigger>
+					<SelectContent>
+						<SelectItem value="date">
+							Link expires on a date
+						</SelectItem>
+						<SelectItem value="never">
+							Link never expires
+						</SelectItem>
+					</SelectContent>
+				</Select>
+				{expirationType === EXPIRATION_TYPE.date ? (
+					<DateInput
+						className="mt-2"
+						ref={dateInputRef}
+						defaultValue={share.expiresAt ?? undefined}
+					/>
+				) : null}
+				<div className="flex justify-end mt-4 gap-2">
+					<Button
+						variant="outline"
+						size="sm"
+						disabled={isUpdatingShare}
+						onClick={() => {
+							setActivePopover(null)
+						}}
+					>
+						Cancel
+					</Button>
+					<Button
+						variant="default"
+						size="sm"
+						loading={isUpdatingShare}
+						disabled={isUpdatingShare}
+						onClick={updateExpirationDate}
+					>
+						Save{" "}
+						<Kbd className="border border-primary-foreground/20 bg-transparent text-primary-foreground">
+							⏎
+						</Kbd>
+					</Button>
+				</div>
+			</PopoverContent>
+		</Popover>
+	)
+}
+
+function ShareLinkOptionsMenu({
+	share,
+	children,
+	activePopoverAtom,
+}: React.PropsWithChildren<{
+	share: Share
+	activePopoverAtom: PrimitiveAtom<ActivePopoverKind | null>
+}>) {
+	const { item } = useContext(ItemShareDialogContext)
+	const setActivePopover = useSetAtom(activePopoverAtom)
+	const store = useStore()

 	const { mutate: deleteShare } = useMutation({
 		...useAtomValue(deleteShareMutationAtom),
@@ -293,20 +584,35 @@ function ShareLinkOptionsMenu({ share }: { share: Share }) {
 	})

 	return (
-		<DropdownMenuContent align="end">
-			<DropdownMenuGroup>
-				<DropdownMenuItem>Rename link</DropdownMenuItem>
-				<DropdownMenuItem>Set expiration</DropdownMenuItem>
-				<DropdownMenuItem
-					variant="destructive"
-					onClick={() => {
-						deleteShare({ shareId: share.id })
-					}}
-				>
-					Delete link
-				</DropdownMenuItem>
-			</DropdownMenuGroup>
-		</DropdownMenuContent>
+		<DropdownMenu>
+			<DropdownMenuTrigger asChild>{children}</DropdownMenuTrigger>
+			<DropdownMenuContent align="end">
+				<DropdownMenuGroup>
+					<DropdownMenuItem
+						onClick={() => {
+							setActivePopover(ACTIVE_POPOVER_KIND.rename)
+						}}
+					>
+						Rename link
+					</DropdownMenuItem>
+					<DropdownMenuItem
+						onClick={() => {
+							setActivePopover(ACTIVE_POPOVER_KIND.setExpiration)
+						}}
+					>
+						Configure expiration
+					</DropdownMenuItem>
+					<DropdownMenuItem
+						variant="destructive"
+						onClick={() => {
+							deleteShare({ shareId: share.id })
+						}}
+					>
+						Delete link
+					</DropdownMenuItem>
+				</DropdownMenuGroup>
+			</DropdownMenuContent>
+		</DropdownMenu>
 	)
 }