Skip to content

[US-4.3 / OBT-206] Multi-select platforms with checkboxes #16

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
levigtri wants to merge 4 commits into
base: levigft/obt-205-us-42-the-typescript-types-to-reflect-the-new-platforms
Choose a base branch
from
Open

[US-4.3 / OBT-206] Multi-select platforms with checkboxes #16

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
01d9676
feat(apps): multi-select platforms with checkboxes
levigtri Jul 5, 2026
02be230
chore: remove accidentally-committed PR description docs
levigtri Jul 10, 2026
f958153
chore: remove accidentally-committed decisoes-front.md
levigtri Jul 10, 2026
e60aa9d
chore(ci): empty commit to re-trigger CI checks
levigtri Jul 15, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
48 changes: 48 additions & 0 deletions src/components/common/PlatformMultiSelect.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,48 @@
import { cn } from "@/utils/cn"

const PLATFORM_OPTIONS = [
{ value: "web", label: "Web" },
{ value: "android", label: "Android" },
{ value: "ios", label: "iOS" },
]

interface PlatformMultiSelectProps {
value: string[]
onChange: (platforms: string[]) => void
id?: string
}

export function PlatformMultiSelect({ value, onChange, id }: PlatformMultiSelectProps) {
function toggle(platform: string) {
onChange(
value.includes(platform)
? value.filter((p) => p !== platform)
: [...value, platform],
)
}

return (
<div id={id} className="flex flex-wrap gap-2">
{PLATFORM_OPTIONS.map((opt) => {
const active = value.includes(opt.value)
return (
<button
key={opt.value}
type="button"
role="checkbox"
aria-checked={active}
onClick={() => toggle(opt.value)}
className={cn(
"px-4 py-2 rounded-lg border text-sm font-medium transition-all duration-200 active:scale-[0.98]",
active
? "bg-telha text-white border-telha"
: "bg-surface text-preto border-areia hover:bg-branco",
)}
>
{opt.label}
</button>
)
})}
</div>
)
}
56 changes: 16 additions & 40 deletions src/components/pages/AppDetailPage.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -19,13 +19,6 @@ import { Badge } from "@/components/ui/badge"
import { Input } from "@/components/ui/input"
import { Label } from "@/components/ui/label"
import { Textarea } from "@/components/ui/textarea"
import {
Select,
SelectContent,
SelectItem,
SelectTrigger,
SelectValue,
} from "@/components/ui/select"
import {
Dialog,
DialogContent,
Expand All @@ -38,6 +31,7 @@ import { LoadingSpinner } from "@/components/common/LoadingSpinner"
import { EmptyState } from "@/components/common/EmptyState"
import { InfoTooltip } from "@/components/common/InfoTooltip"
import { ImageUpload } from "@/components/common/ImageUpload"
import { PlatformMultiSelect } from "@/components/common/PlatformMultiSelect"
import { ConfirmDialog } from "@/components/common/ConfirmDialog"
import { Switch } from "@/components/ui/switch"

Expand Down Expand Up @@ -236,24 +230,10 @@ function AppRolesTable({
)
}

function legacyToPlatforms(value: string): string[] {
if (value === "both") return ["web", "android", "ios"]
if (value === "mobile") return ["android", "ios"]
return ["web"]
}

function platformsToLegacy(platforms: string[]): string {
const hasWeb = platforms.includes("web")
const hasMobile = platforms.includes("android") || platforms.includes("ios")
if (hasWeb && hasMobile) return "both"
if (hasMobile) return "mobile"
return "web"
}

interface AppFormState {
name: string
description: string
platform: string
platforms: string[]
icon_url: string
app_url: string
ios_url: string
Expand All @@ -266,7 +246,7 @@ function formFromApp(app: AppResponse): AppFormState {
return {
name: app.name,
description: app.description ?? "",
platform: platformsToLegacy(app.platforms),
platforms: app.platforms,
icon_url: app.icon_url ?? "",
app_url: app.app_url ?? "",
ios_url: app.ios_url ?? "",
Expand All @@ -289,7 +269,7 @@ export default function AppDetailPage() {
const [form, setForm] = useState<AppFormState>({
name: "",
description: "",
platform: "web",
platforms: ["web"],
icon_url: "",
app_url: "",
ios_url: "",
Expand Down Expand Up @@ -342,12 +322,16 @@ export default function AppDetailPage() {

async function handleSave() {
if (!appId || !form.name.trim()) return
if (form.platforms.length === 0) {
toast.error("Select at least one platform")
return
}
setSaving(true)
try {
const { data } = await appsAPI.update(appId, {
name: form.name.trim(),
description: form.description.trim() || null,
platforms: legacyToPlatforms(form.platform),
platforms: form.platforms,
icon_url: form.icon_url.trim() || null,
app_url: form.app_url.trim() || null,
ios_url: form.ios_url.trim() || null,
Expand Down Expand Up @@ -497,23 +481,15 @@ export default function AppDetailPage() {
<div className="space-y-1.5">
<Label htmlFor="edit-platform">
<span className="inline-flex items-center">
Platform
<InfoTooltip content="The platform this app targets: web, mobile, or both." />
Platforms
<InfoTooltip content="The platforms this app targets. Select one or more (Web, Android, iOS)." />
</span>
</Label>
<Select
value={form.platform}
onValueChange={(v) => setForm((f) => ({ ...f, platform: v }))}
>
<SelectTrigger id="edit-platform">
<SelectValue />
</SelectTrigger>
<SelectContent>
<SelectItem value="web">Web</SelectItem>
<SelectItem value="mobile">Mobile</SelectItem>
<SelectItem value="both">Both</SelectItem>
</SelectContent>
</Select>
<PlatformMultiSelect
id="edit-platform"
value={form.platforms}
onChange={(platforms) => setForm((f) => ({ ...f, platforms }))}
/>
</div>
<div className="space-y-1.5">
<Label>App Icon</Label>
Expand Down
58 changes: 17 additions & 41 deletions src/components/pages/AppsPage.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,13 +10,6 @@ import { Input } from "@/components/ui/input"
import { Label } from "@/components/ui/label"
import { Badge } from "@/components/ui/badge"
import { Textarea } from "@/components/ui/textarea"
import {
Select,
SelectContent,
SelectItem,
SelectTrigger,
SelectValue,
} from "@/components/ui/select"
import {
Dialog,
DialogContent,
Expand All @@ -31,27 +24,14 @@ import { InfoTooltip } from "@/components/common/InfoTooltip"
import { FeatureSpotlight } from "@/components/common/FeatureSpotlight"
import { ConfirmDialog } from "@/components/common/ConfirmDialog"
import { ImageUpload } from "@/components/common/ImageUpload"
import { PlatformMultiSelect } from "@/components/common/PlatformMultiSelect"
import { Switch } from "@/components/ui/switch"

function legacyToPlatforms(value: string): string[] {
if (value === "both") return ["web", "android", "ios"]
if (value === "mobile") return ["android", "ios"]
return ["web"]
}

function platformsToLegacy(platforms: string[]): string {
const hasWeb = platforms.includes("web")
const hasMobile = platforms.includes("android") || platforms.includes("ios")
if (hasWeb && hasMobile) return "both"
if (hasMobile) return "mobile"
return "web"
}

interface AppFormState {
app_key: string
name: string
description: string
platform: string
platforms: string[]
icon_url: string
app_url: string
ios_url: string
Expand All @@ -63,7 +43,7 @@ const emptyForm: AppFormState = {
app_key: "",
name: "",
description: "",
platform: "web",
platforms: ["web"],
icon_url: "",
app_url: "",
ios_url: "",
Expand All @@ -76,7 +56,7 @@ function formFromApp(app: AppResponse): AppFormState {
app_key: app.app_key,
name: app.name,
description: app.description ?? "",
platform: platformsToLegacy(app.platforms),
platforms: app.platforms,
icon_url: app.icon_url ?? "",
app_url: app.app_url ?? "",
ios_url: app.ios_url ?? "",
Expand Down Expand Up @@ -125,13 +105,17 @@ export default function AppsPage() {

async function handleSave() {
if (!form.name.trim() || (!editingApp && !form.app_key.trim())) return
if (form.platforms.length === 0) {
toast.error("Select at least one platform")
return
}
setSaving(true)
try {
if (editingApp) {
await appsAPI.update(editingApp.id, {
name: form.name.trim(),
description: form.description.trim() || null,
platforms: legacyToPlatforms(form.platform),
platforms: form.platforms,
icon_url: form.icon_url.trim() || null,
app_url: form.app_url.trim() || null,
ios_url: form.ios_url.trim() || null,
Expand All @@ -144,7 +128,7 @@ export default function AppsPage() {
app_key: form.app_key.trim(),
name: form.name.trim(),
description: form.description.trim() || null,
platforms: legacyToPlatforms(form.platform),
platforms: form.platforms,
icon_url: form.icon_url.trim() || null,
app_url: form.app_url.trim() || null,
ios_url: form.ios_url.trim() || null,
Expand Down Expand Up @@ -391,23 +375,15 @@ function AppFormDialog({
<div className="space-y-1.5">
<Label htmlFor="app-platform">
<span className="inline-flex items-center">
Platform
<InfoTooltip content="The platform this app targets: web, mobile, or both." />
Platforms
<InfoTooltip content="The platforms this app targets. Select one or more (Web, Android, iOS)." />
</span>
</Label>
<Select
value={form.platform}
onValueChange={(v) => setForm((f) => ({ ...f, platform: v }))}
>
<SelectTrigger id="app-platform">
<SelectValue />
</SelectTrigger>
<SelectContent>
<SelectItem value="web">Web</SelectItem>
<SelectItem value="mobile">Mobile</SelectItem>
<SelectItem value="both">Both</SelectItem>
</SelectContent>
</Select>
<PlatformMultiSelect
id="app-platform"
value={form.platforms}
onChange={(platforms) => setForm((f) => ({ ...f, platforms }))}
/>
</div>
<div className="space-y-1.5">
<Label>App Icon</Label>
Expand Down
Loading