From 9c30ea5f517c77f50911425d52a8d9169657ea27 Mon Sep 17 00:00:00 2001
From: Artur Pata <artur.pata@gmail.com>
Date: Wed, 6 May 2026 20:06:05 +0300
Subject: [PATCH 1/2] Generalize segment modal form elements

---
 .../js/dashboard/segments/segment-modals.tsx  | 101 +++++++++++-------
 1 file changed, 62 insertions(+), 39 deletions(-)

diff --git a/assets/js/dashboard/segments/segment-modals.tsx b/assets/js/dashboard/segments/segment-modals.tsx
index 424e7e4145b2..fc5a22281e77 100644
--- a/assets/js/dashboard/segments/segment-modals.tsx
+++ b/assets/js/dashboard/segments/segment-modals.tsx
@@ -29,6 +29,24 @@ import { Button, buttonClassName } from '../components/button'
 
 const inModalSectionLabelClassName = 'text-sm font-semibold dark:text-gray-100'
 
+const nameInputProps = { id: 'name', label: 'Segment name' }
+
+const segmentTypeSelectorProps = {
+  idPrefix: 'segment-type',
+  options: [
+    {
+      type: SegmentType.personal,
+      name: SEGMENT_TYPE_LABELS[SegmentType.personal],
+      description: 'Visible only to you'
+    },
+    {
+      type: SegmentType.site,
+      name: SEGMENT_TYPE_LABELS[SegmentType.site],
+      description: 'Visible to others on the site'
+    }
+  ]
+}
+
 interface ApiRequestProps {
   status: MutationStatus
   error?: unknown
@@ -79,18 +97,23 @@ export const CreateSegmentModal = ({
 
   return (
     <ModalLayout title="Create segment" onClose={onClose}>
-      <SegmentNameInput
+      <LabeledTextInput
+        {...nameInputProps}
         value={name}
         onChange={setName}
-        namePlaceholder={namePlaceholder}
+        placeholder={namePlaceholder}
       />
-      <SegmentTypeSelector value={type} onChange={onSegmentTypeChange} />
-      {disabled && <SegmentTypeDisabledMessage message={disabledMessage} />}
+      <TypeSelector<SegmentType>
+        {...segmentTypeSelectorProps}
+        value={type}
+        onChange={onSegmentTypeChange}
+      />
+      {disabled && <TypeDisabledMessage message={disabledMessage} />}
       <ModalFooter>
         <Button theme="secondary" size="sm" onClick={onClose}>
           Cancel
         </Button>
-        <SaveSegmentButton
+        <SaveButton
           disabled={status === 'pending' || disabled}
           onSave={() => {
             const trimmedName = name.trim()
@@ -254,55 +277,50 @@ const RelatedSharedLinks = ({ sharedLinks }: { sharedLinks: string[] }) => {
   )
 }
 
-const SegmentNameInput = ({
-  namePlaceholder,
+export const LabeledTextInput = ({
+  label,
+  id,
   value,
-  onChange
+  onChange,
+  placeholder
 }: {
-  namePlaceholder: string
+  label: string
+  id: string
   value: string
   onChange: (value: string) => void
+  placeholder: string
 }) => {
   return (
     <div className="flex flex-col">
       <label
-        htmlFor="name"
+        htmlFor={id}
         className="block mb-1.5 text-sm font-medium dark:text-gray-100 text-gray-700 dark:text-gray-300"
       >
-        Segment name
+        {label}
       </label>
       <input
         autoComplete="off"
         value={value}
         onChange={(e) => onChange(e.target.value)}
-        placeholder={namePlaceholder}
-        id="name"
+        placeholder={placeholder}
+        id={id}
         className="block px-3.5 py-2.5 w-full text-sm dark:text-gray-300 rounded-md border border-gray-300 dark:border-gray-750 dark:bg-gray-750 focus:outline-none focus:ring-3 focus:ring-indigo-500/20 dark:focus:ring-indigo-500/25 focus:border-indigo-500"
       />
     </div>
   )
 }
 
-const SegmentTypeSelector = ({
+export const TypeSelector = <T extends string>({
   value,
-  onChange
+  onChange,
+  options,
+  idPrefix
 }: {
-  value: SegmentType
-  onChange: (value: SegmentType) => void
+  value: T
+  onChange: (value: T) => void
+  options: { type: T; name: string; description: string }[]
+  idPrefix: string
 }) => {
-  const options = [
-    {
-      type: SegmentType.personal,
-      name: SEGMENT_TYPE_LABELS[SegmentType.personal],
-      description: 'Visible only to you'
-    },
-    {
-      type: SegmentType.site,
-      name: SEGMENT_TYPE_LABELS[SegmentType.site],
-      description: 'Visible to others on the site'
-    }
-  ]
-
   return (
     <div className="flex flex-col gap-y-2">
       {options.map(({ type, name, description }) => (
@@ -310,14 +328,14 @@ const SegmentTypeSelector = ({
           <div className="flex">
             <input
               checked={value === type}
-              id={`segment-type-${type}`}
+              id={`${idPrefix}-${type}`}
               type="radio"
               value=""
               onChange={() => onChange(type)}
               className="mt-px size-4.5 cursor-pointer text-indigo-600 dark:bg-transparent border-gray-400 dark:border-gray-600 checked:border-indigo-600 dark:checked:border-white"
             />
             <label
-              htmlFor={`segment-type-${type}`}
+              htmlFor={`${idPrefix}-${type}`}
               className="block ml-3 text-sm font-medium dark:text-gray-100 flex flex-col flex-inline"
             >
               <div>{name}</div>
@@ -389,7 +407,7 @@ const useSegmentTypeDisabledState = ({
   }
 }
 
-const SaveSegmentButton = ({
+export const SaveButton = ({
   disabled,
   onSave
 }: {
@@ -407,7 +425,7 @@ const SaveSegmentButton = ({
   )
 }
 
-const SegmentTypeDisabledMessage = ({
+export const TypeDisabledMessage = ({
   message
 }: {
   message: ReactNode | null
@@ -449,18 +467,23 @@ export const UpdateSegmentModal = ({
 
   return (
     <ModalLayout title="Update segment" onClose={onClose}>
-      <SegmentNameInput
+      <LabeledTextInput
+        {...nameInputProps}
         value={name}
         onChange={setName}
-        namePlaceholder={namePlaceholder}
+        placeholder={namePlaceholder}
+      />
+      <TypeSelector<SegmentType>
+        {...segmentTypeSelectorProps}
+        value={type}
+        onChange={onSegmentTypeChange}
       />
-      <SegmentTypeSelector value={type} onChange={onSegmentTypeChange} />
-      {disabled && <SegmentTypeDisabledMessage message={disabledMessage} />}
+      {disabled && <TypeDisabledMessage message={disabledMessage} />}
       <ModalFooter>
         <Button theme="secondary" size="sm" onClick={onClose}>
           Cancel
         </Button>
-        <SaveSegmentButton
+        <SaveButton
           disabled={status === 'pending' || disabled}
           onSave={() => {
             const trimmedName = name.trim()

From 57b3b889fd5b442e4cb3394b74f46f91da4fad77 Mon Sep 17 00:00:00 2001
From: Artur Pata <artur.pata@gmail.com>
Date: Thu, 7 May 2026 13:40:52 +0300
Subject: [PATCH 2/2] Move generic components to appropriate files

---
 .../js/dashboard/components/form-elements.tsx | 117 +++++++++++++
 .../js/dashboard/components/modal-layout.tsx  |  19 ++
 .../js/dashboard/components/placeholder.tsx   |  20 +++
 .../js/dashboard/segments/segment-modals.tsx  | 165 ++----------------
 4 files changed, 168 insertions(+), 153 deletions(-)
 create mode 100644 assets/js/dashboard/components/form-elements.tsx
 create mode 100644 assets/js/dashboard/components/placeholder.tsx

diff --git a/assets/js/dashboard/components/form-elements.tsx b/assets/js/dashboard/components/form-elements.tsx
new file mode 100644
index 000000000000..99dd69528fe3
--- /dev/null
+++ b/assets/js/dashboard/components/form-elements.tsx
@@ -0,0 +1,117 @@
+import React, { ReactNode } from 'react'
+import { ExclamationTriangleIcon } from '@heroicons/react/24/outline'
+
+export const LabeledTextInput = ({
+  label,
+  id,
+  value,
+  onChange,
+  placeholder
+}: {
+  label: string
+  id: string
+  value: string
+  onChange: (value: string) => void
+  placeholder: string
+}) => {
+  return (
+    <div className="flex flex-col">
+      <label
+        htmlFor={id}
+        className="block mb-1.5 text-sm font-medium dark:text-gray-100 text-gray-700 dark:text-gray-300"
+      >
+        {label}
+      </label>
+      <input
+        autoComplete="off"
+        value={value}
+        onChange={(e) => onChange(e.target.value)}
+        placeholder={placeholder}
+        id={id}
+        className="block px-3.5 py-2.5 w-full text-sm dark:text-gray-300 rounded-md border border-gray-300 dark:border-gray-750 dark:bg-gray-750 focus:outline-none focus:ring-3 focus:ring-indigo-500/20 dark:focus:ring-indigo-500/25 focus:border-indigo-500"
+      />
+    </div>
+  )
+}
+
+export const TypeSelector = <T extends string>({
+  value,
+  onChange,
+  options,
+  idPrefix
+}: {
+  value: T
+  onChange: (value: T) => void
+  options: { type: T; name: string; description: string }[]
+  idPrefix: string
+}) => {
+  return (
+    <div className="flex flex-col gap-y-2">
+      {options.map(({ type, name, description }) => (
+        <div key={type}>
+          <div className="flex">
+            <input
+              checked={value === type}
+              id={`${idPrefix}-${type}`}
+              type="radio"
+              value=""
+              onChange={() => onChange(type)}
+              className="mt-px size-4.5 cursor-pointer text-indigo-600 dark:bg-transparent border-gray-400 dark:border-gray-600 checked:border-indigo-600 dark:checked:border-white"
+            />
+            <label
+              htmlFor={`${idPrefix}-${type}`}
+              className="block ml-3 text-sm font-medium dark:text-gray-100 flex flex-col flex-inline"
+            >
+              <div>{name}</div>
+              <div className="text-gray-500 dark:text-gray-400 text-sm font-normal">
+                {description}
+              </div>
+            </label>
+          </div>
+        </div>
+      ))}
+    </div>
+  )
+}
+
+export const TypeDisabledMessage = ({
+  message
+}: {
+  message: ReactNode | null
+}) => {
+  if (!message) return null
+
+  return (
+    <div className="mt-2 flex gap-x-2 text-sm">
+      <ExclamationTriangleIcon className="mt-1 block w-4 h-4 shrink-0" />
+      <div>{message}</div>
+    </div>
+  )
+}
+
+/** Keep this component styled the same as checkboxes in PlausibleWeb.Live.Installation.Instructions */
+export const Checkbox = ({
+  id,
+  checked,
+  onChange,
+  children
+}: React.DetailedHTMLProps<
+  React.InputHTMLAttributes<HTMLInputElement>,
+  HTMLInputElement
+>) => {
+  return (
+    <label
+      className="text-sm block font-medium dark:text-gray-100 font-normal gap-x-2 flex flex-inline items-center justify-start"
+      htmlFor={id}
+    >
+      <input
+        className="block size-5 rounded-sm dark:bg-gray-600 border-gray-300 dark:border-gray-600 text-indigo-600"
+        id={id}
+        type="checkbox"
+        checked={checked}
+        onChange={onChange}
+      />
+      {children}
+    </label>
+  )
+}
diff --git a/assets/js/dashboard/components/modal-layout.tsx b/assets/js/dashboard/components/modal-layout.tsx
index 107d4ae04a71..8a321b2265f6 100644
--- a/assets/js/dashboard/components/modal-layout.tsx
+++ b/assets/js/dashboard/components/modal-layout.tsx
@@ -1,6 +1,7 @@
 import React, { ReactNode } from 'react'
 import { XMarkIcon } from '@heroicons/react/20/solid'
 import ModalWithRouting from '../stats/modals/modal'
+import { Button } from './button'
 
 export function ModalLayout({
   title,
@@ -44,3 +45,21 @@ export function ModalLayout({
 export function ModalFooter({ children }: { children: ReactNode }) {
   return <div className="flex gap-x-3 items-center justify-end">{children}</div>
 }
+
+export function SaveButton({
+  disabled,
+  onSave
+}: {
+  disabled: boolean
+  onSave: () => void
+}) {
+  return (
+    <Button
+      size="sm"
+      disabled={disabled}
+      onClick={disabled ? () => {} : onSave}
+    >
+      Save
+    </Button>
+  )
+}
diff --git a/assets/js/dashboard/components/placeholder.tsx b/assets/js/dashboard/components/placeholder.tsx
new file mode 100644
index 000000000000..89a409d15c6b
--- /dev/null
+++ b/assets/js/dashboard/components/placeholder.tsx
@@ -0,0 +1,20 @@
+import classNames from 'classnames'
+import React, { ReactNode } from 'react'
+
+export const Placeholder = ({
+  children,
+  placeholder
+}: {
+  children: ReactNode | false
+  placeholder: ReactNode
+}) => (
+  <span
+    className={classNames(
+      'rounded',
+      children === false &&
+        'bg-gray-100 dark:bg-gray-700 text-gray-100 dark:text-gray-700'
+    )}
+  >
+    {children === false ? placeholder : children}
+  </span>
+)
diff --git a/assets/js/dashboard/segments/segment-modals.tsx b/assets/js/dashboard/segments/segment-modals.tsx
index fc5a22281e77..14caccd83b03 100644
--- a/assets/js/dashboard/segments/segment-modals.tsx
+++ b/assets/js/dashboard/segments/segment-modals.tsx
@@ -1,5 +1,9 @@
 import React, { ReactNode, useCallback, useState } from 'react'
-import { ModalLayout, ModalFooter } from '../components/modal-layout'
+import {
+  ModalLayout,
+  ModalFooter,
+  SaveButton
+} from '../components/modal-layout'
 import {
   canRemoveFilter,
   getSearchToRemoveSegmentFilter,
@@ -18,7 +22,6 @@ import { rootRoute } from '../router'
 import { FilterPillsList } from '../nav-menu/filter-pills-list'
 import classNames from 'classnames'
 import { SegmentAuthorship } from './segment-authorship'
-import { ExclamationTriangleIcon } from '@heroicons/react/24/outline'
 import { MutationStatus, useQuery } from '@tanstack/react-query'
 import { ApiError, get } from '../api'
 import { ErrorPanel } from '../components/error-panel'
@@ -26,6 +29,13 @@ import { useSegmentsContext } from '../filtering/segments-context'
 import { Role, UserContextValue, useUserContext } from '../user-context'
 import { useSiteContext } from '../site-context'
 import { Button, buttonClassName } from '../components/button'
+import {
+  Checkbox,
+  LabeledTextInput,
+  TypeDisabledMessage,
+  TypeSelector
+} from '../components/form-elements'
+import { Placeholder } from '../components/placeholder'
 
 const inModalSectionLabelClassName = 'text-sm font-semibold dark:text-gray-100'
 
@@ -277,79 +287,6 @@ const RelatedSharedLinks = ({ sharedLinks }: { sharedLinks: string[] }) => {
   )
 }
 
-export const LabeledTextInput = ({
-  label,
-  id,
-  value,
-  onChange,
-  placeholder
-}: {
-  label: string
-  id: string
-  value: string
-  onChange: (value: string) => void
-  placeholder: string
-}) => {
-  return (
-    <div className="flex flex-col">
-      <label
-        htmlFor={id}
-        className="block mb-1.5 text-sm font-medium dark:text-gray-100 text-gray-700 dark:text-gray-300"
-      >
-        {label}
-      </label>
-      <input
-        autoComplete="off"
-        value={value}
-        onChange={(e) => onChange(e.target.value)}
-        placeholder={placeholder}
-        id={id}
-        className="block px-3.5 py-2.5 w-full text-sm dark:text-gray-300 rounded-md border border-gray-300 dark:border-gray-750 dark:bg-gray-750 focus:outline-none focus:ring-3 focus:ring-indigo-500/20 dark:focus:ring-indigo-500/25 focus:border-indigo-500"
-      />
-    </div>
-  )
-}
-
-export const TypeSelector = <T extends string>({
-  value,
-  onChange,
-  options,
-  idPrefix
-}: {
-  value: T
-  onChange: (value: T) => void
-  options: { type: T; name: string; description: string }[]
-  idPrefix: string
-}) => {
-  return (
-    <div className="flex flex-col gap-y-2">
-      {options.map(({ type, name, description }) => (
-        <div key={type}>
-          <div className="flex">
-            <input
-              checked={value === type}
-              id={`${idPrefix}-${type}`}
-              type="radio"
-              value=""
-              onChange={() => onChange(type)}
-              className="mt-px size-4.5 cursor-pointer text-indigo-600 dark:bg-transparent border-gray-400 dark:border-gray-600 checked:border-indigo-600 dark:checked:border-white"
-            />
-            <label
-              htmlFor={`${idPrefix}-${type}`}
-              className="block ml-3 text-sm font-medium dark:text-gray-100 flex flex-col flex-inline"
-            >
-              <div>{name}</div>
-              <div className="text-gray-500 dark:text-gray-400 text-sm font-normal">
-                {description}
-              </div>
-            </label>
-          </div>
-        </div>
-      ))}
-    </div>
-  )
-}
-
 const useSegmentTypeDisabledState = ({
   siteSegmentsAvailable,
   user,
@@ -407,39 +344,6 @@ const useSegmentTypeDisabledState = ({
   }
 }
 
-export const SaveButton = ({
-  disabled,
-  onSave
-}: {
-  disabled: boolean
-  onSave: () => void
-}) => {
-  return (
-    <Button
-      size="sm"
-      disabled={disabled}
-      onClick={disabled ? () => {} : onSave}
-    >
-      Save
-    </Button>
-  )
-}
-
-export const TypeDisabledMessage = ({
-  message
-}: {
-  message: ReactNode | null
-}) => {
-  if (!message) return null
-
-  return (
-    <div className="mt-2 flex gap-x-2 text-sm">
-      <ExclamationTriangleIcon className="mt-1 block w-4 h-4 shrink-0" />
-      <div>{message}</div>
-    </div>
-  )
-}
-
 export const UpdateSegmentModal = ({
   onClose,
   onSave,
@@ -533,51 +437,6 @@ const FiltersInSegment = ({
   )
 }
 
-/** Keep this component styled the same as checkboxes in PlausibleWeb.Live.Installation.Instructions */
-const Checkbox = ({
-  id,
-  checked,
-  onChange,
-  children
-}: React.DetailedHTMLProps<
-  React.InputHTMLAttributes<HTMLInputElement>,
-  HTMLInputElement
->) => {
-  return (
-    <label
-      className="text-sm block font-medium dark:text-gray-100 font-normal gap-x-2 flex flex-inline items-center justify-start"
-      htmlFor={id}
-    >
-      <input
-        className="block size-5 rounded-sm dark:bg-gray-600 border-gray-300 dark:border-gray-600 text-indigo-600"
-        id={id}
-        type="checkbox"
-        checked={checked}
-        onChange={onChange}
-      />
-      {children}
-    </label>
-  )
-}
-
-const Placeholder = ({
-  children,
-  placeholder
-}: {
-  children: ReactNode | false
-  placeholder: ReactNode
-}) => (
-  <span
-    className={classNames(
-      'rounded',
-      children === false &&
-        'bg-gray-100 dark:bg-gray-700 text-gray-100 dark:text-gray-700'
-    )}
-  >
-    {children === false ? placeholder : children}
-  </span>
-)
-
 const hasSiteSegmentPermission = (user: UserContextValue) => {
   return [Role.admin, Role.owner, Role.editor, 'super_admin'].includes(
     user.role