refactor: remove display settings page and related files

This commit is contained in:
Bart van der Braak 2024-02-20 20:47:54 +01:00
parent bdaeb428db
commit d7c4f5dd0a
4 changed files with 0 additions and 141 deletions

View file

@ -19,10 +19,6 @@
title: "Notifications",
href: "/settings/notifications",
},
{
title: "Display",
href: "/settings/display",
},
];
</script>

View file

@ -1,25 +0,0 @@
import type { PageServerLoad } from "./$types";
import { superValidate } from "sveltekit-superforms";
import { zod } from "sveltekit-superforms/adapters";
import { displayFormSchema } from "./display-form.svelte";
import { fail, type Actions } from "@sveltejs/kit";
export const load: PageServerLoad = async () => {
return {
form: await superValidate(zod(displayFormSchema)),
};
};
export const actions: Actions = {
default: async (event) => {
const form = await superValidate(event, zod(displayFormSchema));
if (!form.valid) {
return fail(400, {
form,
});
}
return {
form,
};
},
};

View file

@ -1,17 +0,0 @@
<script lang="ts">
import type { PageData } from "./$types";
import DisplayForm from "./display-form.svelte";
import { Separator } from "$lib/components/ui/separator";
export let data: PageData;
</script>
<div class="space-y-6">
<div>
<h3 class="text-lg font-medium">Display</h3>
<p class="text-sm text-muted-foreground">
Turn items on or off to control what's displayed in the app.
</p>
</div>
<Separator />
<DisplayForm data={data.form} />
</div>

View file

@ -1,95 +0,0 @@
<script lang="ts" context="module">
import { z } from "zod";
const items = [
{
id: "recents",
label: "Recents",
},
{
id: "home",
label: "Home",
},
{
id: "applications",
label: "Applications",
},
{
id: "desktop",
label: "Desktop",
},
{
id: "downloads",
label: "Downloads",
},
{
id: "documents",
label: "Documents",
},
] as const;
export const displayFormSchema = z.object({
items: z.array(z.string()).refine((value) => value.some((item) => item), {
message: "You have to select at least one item.",
}),
});
export type DisplayFormSchema = typeof displayFormSchema;
</script>
<script lang="ts">
import * as Form from "$lib/components/ui/form";
import * as Checkbox from "$lib/components/ui/checkbox";
import { type SuperValidated, type Infer, superForm } from "sveltekit-superforms";
import SuperDebug from "sveltekit-superforms";
import { zodClient } from "sveltekit-superforms/adapters";
import { browser, dev } from "$app/environment";
import { PUBLIC_DEBUG_FORMS } from "$env/static/public";
export let data: SuperValidated<Infer<DisplayFormSchema>>;
const form = superForm(data, {
validators: zodClient(displayFormSchema),
});
const { form: formData, enhance } = form;
</script>
<form method="POST" class="space-y-8" use:enhance>
<Form.Fieldset {form} name="items" class="space-y-0">
<div class="mb-4">
<Form.Legend class="text-base">Sidebar</Form.Legend>
<Form.Description>
Select the items you want to display in the sidebar.
</Form.Description>
</div>
<div class="space-y-2">
{#each items as item}
{@const checked = $formData.items.includes(item.id)}
<div class="flex flex-row items-center space-x-3">
<Form.Control let:attrs>
{@const { name, ...rest } = attrs}
<Checkbox.Root
{...rest}
{checked}
onCheckedChange={(v) => {
if (v) {
$formData.items = [...$formData.items, item.id];
} else {
$formData.items = $formData.items.filter((i) => i !== item.id);
}
}}
/>
<Form.Label class="font-normal">
{item.label}
</Form.Label>
<input type="checkbox" {name} hidden value={item.id} {checked} />
</Form.Control>
</div>
{/each}
<Form.FieldErrors />
</div>
</Form.Fieldset>
<Form.Button>Update display</Form.Button>
</form>
{#if dev && PUBLIC_DEBUG_FORMS == 'true' && browser}
<SuperDebug data={$formData} />
{/if}