feat(product tours): add device type targeting (#48253)

## Problem

closes #48218 (comment)

sdk pr PostHog/posthog-js#3113

<!-- Who are we building for, what are their needs, why is this important? -->

<!-- Does this fix an issue? Uncomment the line below with the issue ID to automatically close it when merged -->

<!-- Closes #ISSUE_ID -->

## Changes

<!-- If there are frontend changes, please include screenshots. -->

<!-- If a reference design was involved, include a link to the relevant Figma frame! -->

## How did you test this code?

<!-- Briefly describe the steps you took. -->

<!-- Include automated tests if possible, otherwise describe the manual testing routine. -->

<!-- Docs reminder: If this change requires updated docs, please do that! Engineers are the primary people responsible for their documentation. 🙌 -->

👉 _Stay up-to-date with_ [_PostHog coding conventions_](https://posthog.com/docs/contribute/coding-conventions) _for a smoother review._

## Publish to changelog?

<!-- For features only -->

<!-- If publishing, you must provide changelog details in the #changelog Slack channel. You will receive a follow-up PR comment or notification. -->

<!-- If not, write "no" or "do not publish to changelog" to explicitly opt-out of posting to #changelog. Removing this entire section will not prevent posting. -->

Author: adboio

frontend/src/scenes/product-tours/components/AutoShowSection.tsx

@@ -274,8 +274,8 @@ export function AutoShowSection({ id }: { id: string }): JSX.Element | null {
 
     return (
         <div className="space-y-4">
-            <div>
-                <h5 className="font-semibold mb-2">Where to show</h5>
+            <div className="flex flex-col gap-3">
+                <h5 className="font-semibold mb-0">Where to show</h5>
                 <div className="flex gap-2 items-center">
                     <span className="text-sm whitespace-nowrap">URL</span>
                     <LemonSelect
@@ -336,6 +336,33 @@ export function AutoShowSection({ id }: { id: string }): JSX.Element | null {
                 {conditions.urlMatchType === SurveyMatchType.Exact && (
                     <span className="text-xs text-muted">Trailing slashes are stripped when matching exact URLs.</span>
                 )}
+                <div className="flex gap-2 items-center">
+                    <span className="text-sm whitespace-nowrap">Device types</span>
+                    <LemonInputSelect
+                        mode="multiple"
+                        value={conditions.deviceTypes || []}
+                        onChange={(values) => {
+                            onChange({ ...conditions, deviceTypes: values })
+                        }}
+                        options={[
+                            {
+                                key: 'Desktop',
+                                label: 'Desktop',
+                            },
+                            {
+                                key: 'Tablet',
+                                label: 'Tablet',
+                            },
+                            {
+                                key: 'Mobile',
+                                label: 'Mobile',
+                            },
+                        ]}
+                        placeholder="Select devices..."
+                        disablePrompting
+                        size="small"
+                    />
+                </div>
             </div>
 
             <div>

frontend/src/types.ts

@@ -3504,6 +3504,7 @@ export interface ProductTourDisplayConditions {
     } | null
     linkedFlagVariant?: string
     seenTourWaitPeriod?: ProductTourWaitPeriod
+    deviceTypes?: string[]
 }
 
 export interface ProductTourAppearance {