External/portabase
1
0
Fork 0
mirror of https://github.com/Portabase/portabase.git synced 2026-07-14 11:16:13 +02:00
Code Issues Packages Projects Releases Wiki Activity

Update step-defaults.tsx

Browse Source
This commit is contained in:
Théo LAGACHE
2026-06-25 11:47:31 +02:00
parent 70a551f3e8
commit 45c82f9ef5
1 changed files with 95 additions and 86 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/features/onboarding/steps/step-defaults.tsx
+95 -86
View File
@@ -22,9 +22,12 @@ import { updateStorageSettingsAction } from "@/features/settings/actions/storage
export const StepDefaults = () => { export const StepDefaults = () => {
const { next, updateContext, state } = useOnboarding(); const { next, updateContext, state } = useOnboarding();
const notifiers = (state?.context.flowData.notifiers ?? []) as OnboardingChannel[]; const notifiers = (state?.context.flowData.notifiers ??
const storages = (state?.context.flowData.storages ?? []) as OnboardingChannel[]; []) as OnboardingChannel[];
const existingDefaults = (state?.context.flowData.defaults ?? {}) as OnboardingDefaultsData; const storages = (state?.context.flowData.storages ??
[]) as OnboardingChannel[];
const existingDefaults = (state?.context.flowData.defaults ??
{}) as OnboardingDefaultsData;
const [notifierId, setNotifierId] = useState<string | undefined>( const [notifierId, setNotifierId] = useState<string | undefined>(
existingDefaults.notifierId || undefined, existingDefaults.notifierId || undefined,
@@ -95,94 +98,100 @@ export const StepDefaults = () => {
</p> </p>
</div> </div>
<div className="flex flex-col gap-2"> <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
<Label>Default notifier</Label> <div className="flex flex-col gap-2">
<Select <Label>Default notifier</Label>
value={selectedNotifier ? notifierId : undefined} <Select
onValueChange={selectNotifier} value={selectedNotifier ? notifierId : undefined}
disabled={notifiers.length === 0} onValueChange={selectNotifier}
> disabled={notifiers.length === 0}
<SelectTrigger> >
<SelectValue <SelectTrigger className="w-full">
placeholder={ <SelectValue
notifiers.length === 0 placeholder={
? "No notifier connected" notifiers.length === 0
: "Choose a notifier" ? "No notifier connected"
} : "Choose a notifier"
> }
{selectedNotifier && ( >
<div className="flex items-center gap-2 min-w-0"> {selectedNotifier && (
<div className="text-muted-foreground scale-90 shrink-0"> <div className="flex items-center gap-2 min-w-0">
{getChannelIcon(selectedNotifier.provider)} <div className="text-muted-foreground scale-90 shrink-0">
{getChannelIcon(selectedNotifier.provider)}
</div>
<span className="truncate font-medium">
{selectedNotifier.name}
</span>
</div> </div>
<span className="truncate font-medium"> )}
{selectedNotifier.name} </SelectValue>
</span> </SelectTrigger>
</div> <SelectContent>
)} {notifiers.map((n) => (
</SelectValue> <SelectItem key={n.id} value={n.id}>
</SelectTrigger> <div className="flex items-center gap-2 w-full min-w-0">
<SelectContent> <div className="text-muted-foreground scale-90 shrink-0">
{notifiers.map((n) => ( {getChannelIcon(n.provider)}
<SelectItem key={n.id} value={n.id}> </div>
<div className="flex items-center gap-2 w-full min-w-0"> <span className="font-medium truncate min-w-0">
<div className="text-muted-foreground scale-90 shrink-0"> {n.name}
{getChannelIcon(n.provider)} </span>
<span className="text-xs text-muted-foreground ml-2 capitalize shrink-0">
({n.provider})
</span>
</div> </div>
<span className="font-medium truncate min-w-0">{n.name}</span> </SelectItem>
<span className="text-xs text-muted-foreground ml-2 capitalize shrink-0"> ))}
({n.provider}) </SelectContent>
</span> </Select>
</div> </div>
</SelectItem>
))}
</SelectContent>
</Select>
</div>
<div className="flex flex-col gap-2"> <div className="flex flex-col gap-2">
<Label>Default storage</Label> <Label>Default storage</Label>
<Select <Select
value={selectedStorage ? storageId : undefined} value={selectedStorage ? storageId : undefined}
onValueChange={selectStorage} onValueChange={selectStorage}
disabled={storages.length === 0} disabled={storages.length === 0}
> >
<SelectTrigger> <SelectTrigger className="w-full">
<SelectValue <SelectValue
placeholder={ placeholder={
storages.length === 0 storages.length === 0
? "No storage connected" ? "No storage connected"
: "Choose a storage" : "Choose a storage"
} }
> >
{selectedStorage && ( {selectedStorage && (
<div className="flex items-center gap-2 min-w-0"> <div className="flex items-center gap-2 min-w-0">
<div className="text-muted-foreground scale-90 shrink-0"> <div className="text-muted-foreground scale-90 shrink-0">
{getChannelIcon(selectedStorage.provider)} {getChannelIcon(selectedStorage.provider)}
</div>
<span className="truncate font-medium">
{selectedStorage.name}
</span>
</div> </div>
<span className="truncate font-medium"> )}
{selectedStorage.name} </SelectValue>
</span> </SelectTrigger>
</div> <SelectContent>
)} {storages.map((s) => (
</SelectValue> <SelectItem key={s.id} value={s.id}>
</SelectTrigger> <div className="flex items-center gap-2 w-full min-w-0">
<SelectContent> <div className="text-muted-foreground scale-90 shrink-0">
{storages.map((s) => ( {getChannelIcon(s.provider)}
<SelectItem key={s.id} value={s.id}> </div>
<div className="flex items-center gap-2 w-full min-w-0"> <span className="font-medium truncate min-w-0">
<div className="text-muted-foreground scale-90 shrink-0"> {s.name}
{getChannelIcon(s.provider)} </span>
<span className="text-xs text-muted-foreground ml-2 capitalize shrink-0">
({s.provider})
</span>
</div> </div>
<span className="font-medium truncate min-w-0">{s.name}</span> </SelectItem>
<span className="text-xs text-muted-foreground ml-2 capitalize shrink-0"> ))}
({s.provider}) </SelectContent>
</span> </Select>
</div> </div>
</SelectItem>
))}
</SelectContent>
</Select>
</div> </div>
<Button type="button" onClick={onContinue}> <Button type="button" onClick={onContinue}>