118 lines
2.9 KiB
Svelte
118 lines
2.9 KiB
Svelte
<svelte:options runes={true} />
|
|
|
|
<script lang="ts">
|
|
import Select from '../ui/Select.svelte'
|
|
import Switch from '../ui/switch/Switch.svelte'
|
|
import SettingsRow from '../ui/SettingsRow.svelte'
|
|
import type { ElementType } from '../ui/SettingsNav.svelte'
|
|
|
|
interface Props {
|
|
showGranblueId: boolean
|
|
collectionPrivacy: number
|
|
showCrewGamertag: boolean
|
|
isInCrew: boolean
|
|
crewGamertag?: string
|
|
element: ElementType
|
|
onShowGranblueIdChange: (value: boolean) => void
|
|
onCollectionPrivacyChange: (value: number) => void
|
|
onShowCrewGamertagChange: (value: boolean) => void
|
|
}
|
|
|
|
let {
|
|
showGranblueId,
|
|
collectionPrivacy,
|
|
showCrewGamertag,
|
|
isInCrew,
|
|
crewGamertag,
|
|
element,
|
|
onShowGranblueIdChange,
|
|
onCollectionPrivacyChange,
|
|
onShowCrewGamertagChange
|
|
}: Props = $props()
|
|
|
|
// Collection privacy options (1-based to avoid JavaScript falsy 0 issues)
|
|
const collectionPrivacyOptions = [
|
|
{ value: 1, label: 'Everyone', description: 'Anyone can view your collection' },
|
|
{ value: 2, label: 'Crew only', description: 'Only crew members can view' },
|
|
{ value: 3, label: 'Private', description: 'Only you can view your collection' }
|
|
]
|
|
|
|
$effect(() => {
|
|
console.log('[PrivacySettings] collectionPrivacy prop:', collectionPrivacy, typeof collectionPrivacy)
|
|
})
|
|
</script>
|
|
|
|
<div class="section">
|
|
<div class="form-fields">
|
|
<!-- Show Granblue ID on profile -->
|
|
<SettingsRow
|
|
title="Show Granblue ID on profile"
|
|
subtitle="Display your in-game ID on your public profile"
|
|
>
|
|
{#snippet control()}
|
|
<Switch
|
|
checked={showGranblueId}
|
|
name="show-granblue-id"
|
|
{element}
|
|
onCheckedChange={onShowGranblueIdChange}
|
|
/>
|
|
{/snippet}
|
|
</SettingsRow>
|
|
|
|
<!-- Show Crew Gamertag (only if in a crew with a gamertag) -->
|
|
{#if isInCrew && crewGamertag}
|
|
<SettingsRow
|
|
title="Show crew tag on profile"
|
|
subtitle={`Display "${crewGamertag}" next to your name`}
|
|
>
|
|
{#snippet control()}
|
|
<Switch
|
|
checked={showCrewGamertag}
|
|
name="show-crew-gamertag"
|
|
{element}
|
|
onCheckedChange={onShowCrewGamertagChange}
|
|
/>
|
|
{/snippet}
|
|
</SettingsRow>
|
|
|
|
<hr class="separator" />
|
|
{/if}
|
|
|
|
<!-- Collection Privacy -->
|
|
<SettingsRow
|
|
title="Collection visibility"
|
|
subtitle="Control who can view your character, weapon, and summon collection"
|
|
>
|
|
{#snippet control()}
|
|
<Select
|
|
value={collectionPrivacy}
|
|
onValueChange={onCollectionPrivacyChange}
|
|
options={collectionPrivacyOptions}
|
|
placeholder="Who can see your collection"
|
|
contained
|
|
/>
|
|
{/snippet}
|
|
</SettingsRow>
|
|
</div>
|
|
</div>
|
|
|
|
<style lang="scss">
|
|
@use '$src/themes/spacing' as spacing;
|
|
|
|
.section {
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
|
|
.form-fields {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: spacing.$unit-3x;
|
|
}
|
|
|
|
.separator {
|
|
border: none;
|
|
border-top: 1px solid var(--border-color, rgba(0, 0, 0, 0.08));
|
|
margin: 0;
|
|
}
|
|
</style>
|