decePubClient/Pages/Settings.razor

@page "/settings"
@inherits LocalizableComponentBase
<Title>@Localizer["Settings"]</Title>

<section class="block relative w-full h-full neo-inset neo-xs rounded-xl">

	<div class="flex flex-col gap-4 p-4 md:p-5 w-full h-full absolute overflow-y-auto">

		<DCollapse Icon="DCollapseIcon.Arrow" IsOpen="true">
			<Header>
				<p class="inline-flex items-center gap-2">
					<i class="ion-md-cog text-xl"></i> <span>@Localizer["General"]</span>
				</p>
			</Header>
			<ChildContent>
				@* Every theme setting; NavMenu's toggle and slider are shortcuts to the dark and hue ones. *@
				<div class="flex flex-col gap-4 w-full p-3 md:p-4">
					<DToggle LabelText="@Localizer["Follow the system's light or dark setting"]" Value="CascadingState.PublicCacheData.PageSettings.PreferSystemTheming"
							 ValueChanged="v => Update(s => s.PreferSystemTheming = v)" ValueExpression="() => CascadingState.PublicCacheData.PageSettings.PreferSystemTheming" />
					<DToggle LabelText="@Localizer["Dark mode"]" Value="IsDark"
							 ValueChanged="v => Update(s => s.SetDarkMode(v))" ValueExpression="() => IsDark" />
					<DToggle LabelText="@Localizer["Grey"]" Value="IsGray"
							 ValueChanged="v => Update(s => s.SetGray(v, IsDark))" ValueExpression="() => IsGray" />
					<label class="flex flex-col gap-2 max-w-md">
						<span class="text-sm">@Localizer["Language"]</span>
						@* Language names stay in their own language. Changing it reloads the app with the new culture. *@
						<DSelect TValue="string" class="w-full" Value="CascadingState.PublicCacheData.PageSettings.CurrentLanguageCode"
								 ValueChanged="ChangeLanguage" ValueExpression="() => CascadingState.PublicCacheData.PageSettings.CurrentLanguageCode">
							<option value="en">English</option>
							<option value="it">Italiano</option>
						</DSelect>
					</label>
					<label class="flex flex-col gap-2 max-w-md">
						<span class="text-sm">@Localizer["Light theme colour"]</span>
						<DRange TValue="short" class="neo-hue-track w-full" Size="DSize.Xs" Min="0" Max="359" Step="1"
								Value="CascadingState.PublicCacheData.PageSettings.LightThemeIndexColour" ValueChanged="v => Update(s => s.SetHue(false, v))"
								ValueExpression="() => CascadingState.PublicCacheData.PageSettings.LightThemeIndexColour" />
					</label>
					<label class="flex flex-col gap-2 max-w-md">
						<span class="text-sm">@Localizer["Dark theme colour"]</span>
						<DRange TValue="short" class="neo-hue-track w-full" Size="DSize.Xs" Min="0" Max="359" Step="1"
								Value="CascadingState.PublicCacheData.PageSettings.DarkThemeIndexColour" ValueChanged="v => Update(s => s.SetHue(true, v))"
								ValueExpression="() => CascadingState.PublicCacheData.PageSettings.DarkThemeIndexColour" />
					</label>
				</div>
			</ChildContent>
		</DCollapse>

		<DCollapse Icon="DCollapseIcon.Arrow">
			<Header>
				<p class="inline-flex items-center gap-2">
					<i class="ion-md-funnel text-xl"></i> <span>@Localizer["Filters"]</span>
				</p>
			</Header>
			<ChildContent>
				<div class="flex flex-wrap items-center gap-3 w-full p-3 md:p-4">
					<p class="flex-1 min-w-48 text-sm">@Localizer["Words, phrases and posts this persona would rather not see, and where."]</p>
					<a class="btn btn-sm" href="filters"><i class="ion-md-funnel"></i><span>@Localizer["Manage filters"]</span></a>
				</div>
			</ChildContent>
		</DCollapse>

		<DCollapse Icon="DCollapseIcon.Arrow">
			<Header>
				<p class="inline-flex items-center gap-2" data-settings-account>
					<i class="ion-md-key text-xl"></i> <span>@Localizer["Login"]</span>
				</p>
			</Header>
			<ChildContent>
				<div class="block w-full p-3 md:p-4">
					@if (CascadingState.IsSignedIn)
					{
						<AccountEditor />
					}
					else
					{
						<a class="link" href="login">@Localizer["Sign in to PrivaPub"]</a>
					}
				</div>
			</ChildContent>
		</DCollapse>

		<DCollapse Icon="DCollapseIcon.Arrow">
			<Header>
				<p class="inline-flex items-center gap-2">
					<i class="ion-md-people text-xl"></i> <span>@Localizer["Personas"]</span>
				</p>
			</Header>
			<ChildContent>
				<div class="block w-full p-3 md:p-4">
					@if (CascadingState.IsSignedIn)
					{
						<PersonasEditor />
					}
					else
					{
						<a class="link" href="login">@Localizer["Sign in to PrivaPub"]</a>
					}
				</div>
			</ChildContent>
		</DCollapse>

		<DCollapse Icon="DCollapseIcon.Arrow">
			<Header>
				<p class="inline-flex items-center gap-2">
					<i class="ion-md-person text-xl"></i> <span>@Localizer["Profile"]</span>
				</p>
			</Header>
			<ChildContent>
				<div class="block w-full p-3 md:p-4">
					@if (CascadingState.IsSignedIn)
					{
						<ProfileEditor />
					}
					else
					{
						<a class="link" href="login">@Localizer["Sign in to PrivaPub"]</a>
					}
				</div>
			</ChildContent>
		</DCollapse>

		<DCollapse Icon="DCollapseIcon.Arrow">
			<Header>
				<p class="inline-flex items-center gap-2">
					<i class="ion-md-archive text-xl"></i> <span>@Localizer["Data import/export"]</span>
				</p>
			</Header>
			<ChildContent>
				<div class="block w-full p-3 md:p-4">
					@if (CascadingState.IsSignedIn)
					{
						<DataTransfer />
					}
					else
					{
						<a class="link" href="login">@Localizer["Sign in to PrivaPub"]</a>
					}
				</div>
			</ChildContent>
		</DCollapse>

		<DCollapse Icon="DCollapseIcon.Arrow">
			<Header>
				<p class="inline-flex items-center gap-2">
					<i class="ion-md-eye-off text-xl"></i> <span>@Localizer["Mutes/Blocks"]</span>
				</p>
			</Header>
			<ChildContent>
				<div class="block w-full p-3 md:p-4">
					@if (CascadingState.IsSignedIn)
					{
						<MutesAndBlocks />
					}
					else
					{
						<a class="link" href="login">@Localizer["Sign in to PrivaPub"]</a>
					}
				</div>
			</ChildContent>
		</DCollapse>

	</div>

</section>

@code {

	bool IsDark => CascadingState.Status.IsDarkTheme();
	bool IsGray => CascadingState.PublicCacheData.PageSettings.IsGray();

	Task Update(Action<PageSettings> change) => CascadingState.UpdatePageSettings(change).AsTask();

	async Task ChangeLanguage(string languageCode)
	{
		await Update(settings => settings.CurrentLanguageCode = languageCode);
		Navigation.NavigateTo(Navigation.Uri, forceLoad: true);
	}
}