bartvdbraak/omnidash
1
0
Fork 0
mirror of https://github.com/bartvdbraak/omnidash.git synced 2025-04-27 15:31:21 +00:00
Code Issues Projects Releases Packages Wiki Activity

feat: change settings pages

Browse source
This commit is contained in:
Bart van der Braak 2024-02-02 02:13:59 +01:00
parent 32b6bf7582
commit 7fc6c736ad
8 changed files with 73 additions and 128 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

17
apps/web/src/lib/components/site/nav/user-nav.svelte
View file

@ -33,12 +33,25 @@
</div>
</DropdownMenu.Label>
<DropdownMenu.Separator />
<DropdownMenu.Item>Dashboards</DropdownMenu.Item>
<DropdownMenu.Item>Connectors</DropdownMenu.Item>
<DropdownMenu.Separator />
<DropdownMenu.Label class="text-xs leading-none text-muted-foreground">
Settings
</DropdownMenu.Label>
<DropdownMenu.Group>
<DropdownMenu.Item href="/settings">
Profile
<DropdownMenu.Shortcut>⇧⌘P</DropdownMenu.Shortcut>
</DropdownMenu.Item>
<DropdownMenu.Item>New Dashboard</DropdownMenu.Item>
<DropdownMenu.Item href="/settings/account">
Account
</DropdownMenu.Item>
<DropdownMenu.Item href="/settings/appearance">
Appearance
</DropdownMenu.Item>
<DropdownMenu.Item href="/settings/notifications">
Notifications
</DropdownMenu.Item>
</DropdownMenu.Group>
<DropdownMenu.Separator />
<DropdownMenu.Item href="/logout">

12
apps/web/src/lib/components/site/site-header.svelte
View file

@ -1,12 +0,0 @@
<script lang="ts">
import * as PageHeader from './page-header';
export let title: string, subTitle: string;
</script>
<PageHeader.Root class="pb-8">
<PageHeader.Heading>{title}</PageHeader.Heading>
<PageHeader.Description>
{subTitle}
</PageHeader.Description>
<slot />
</PageHeader.Root>

6
apps/web/src/lib/components/site/site-navbar.svelte
View file

@ -18,11 +18,9 @@
</a>
<MainNav {authenticated} />
<div class="flex flex-1 items-center justify-end space-x-2 sm:space-x-4">
<nav class="flex">
<ModeToggle />
</nav>
<MobileNav {authenticated} />
<ModeToggle />
<UserNav {authenticated} {user} />
<MobileNav {authenticated} />
</div>
</div>
</header>

3
apps/web/src/routes/(auth)/+layout.svelte Normal file
View file

@ -0,0 +1,3 @@
<div class="space-y-6 p-10 pb-16 md:block">
<slot />
</div>

35
apps/web/src/routes/(dashboard)/settings/account/account-form.svelte
View file

@ -1,19 +1,19 @@
<script lang="ts" context="module">
import { z } from 'zod';
const languages = {
en: 'English',
fr: 'French',
de: 'German',
es: 'Spanish',
pt: 'Portuguese',
ru: 'Russian',
ja: 'Japanese',
ko: 'Korean',
zh: 'Chinese'
} as const;
// const languages = {
// en: 'English',
// fr: 'French',
// de: 'German',
// es: 'Spanish',
// pt: 'Portuguese',
// ru: 'Russian',
// ja: 'Japanese',
// ko: 'Korean',
// zh: 'Chinese'
// } as const;
type Language = keyof typeof languages;
// type Language = keyof typeof languages;
export const accountFormSchema = z.object({
name: z
@ -23,7 +23,7 @@
.min(2, 'Name must be at least 2 characters.')
.max(30, 'Name must not be longer than 30 characters'),
// Hack: https://github.com/colinhacks/zod/issues/2280
language: z.enum(Object.keys(languages) as [Language, ...Language[]])
// language: z.enum(Object.keys(languages) as [Language, ...Language[]])
});
export type AccountFormSchema = typeof accountFormSchema;
@ -32,7 +32,8 @@
<script lang="ts">
import * as Form from '$lib/components/ui/form';
import type { SuperValidated } from 'sveltekit-superforms';
import { cn } from '$lib/utils';
// import { cn } from '$lib/utils';
import { dev } from '$app/environment';
export let data: SuperValidated<AccountFormSchema>;
</script>
@ -43,7 +44,7 @@
let:config
schema={accountFormSchema}
form={data}
debug={true}
debug={dev ? true : false}
>
<Form.Item>
<Form.Field name="name" {config}>
@ -55,7 +56,7 @@
<Form.Validation />
</Form.Field>
</Form.Item>
<Form.Item>
<!-- <Form.Item>
<Form.Field {config} name="language" let:attrs>
{@const { value } = attrs.input}
<Form.Label>Language</Form.Label>
@ -75,6 +76,6 @@
<Form.Description>This is the language that will be used in the dashboard.</Form.Description>
<Form.Validation />
</Form.Field>
</Form.Item>
</Form.Item> -->
<Form.Button>Update account</Form.Button>
</Form.Root>

47
apps/web/src/routes/(dashboard)/settings/appearance/appearance-form.svelte
View file

@ -3,13 +3,9 @@
import { z } from 'zod';
export const appearanceFormSchema = z.object({
theme: z.enum(['light', 'dark'], {
theme: z.enum(['light', 'dark', 'system'], {
required_error: 'Please select a theme.'
}),
font: z.enum(['inter', 'manrope', 'system'], {
invalid_type_error: 'Select a font',
required_error: 'Please select a font.'
})
});
export type AppearanceFormSchema = typeof appearanceFormSchema;
@ -18,6 +14,7 @@
<script lang="ts">
import * as Form from '$lib/components/ui/form';
import Label from '$lib/components/ui/label/label.svelte';
import { dev } from '$app/environment';
export let data: SuperValidated<AppearanceFormSchema>;
</script>
@ -27,28 +24,14 @@
class="space-y-8"
method="POST"
let:config
debug={true}
debug={dev ? true : false}
>
<Form.Item>
<Form.Field {config} name="font">
<Form.Label>Font</Form.Label>
<div class="w-max">
<Form.NativeSelect class="w-[200px]">
<option value="inter">Inter</option>
<option value="manrope">Manrope</option>
<option value="system">System</option>
</Form.NativeSelect>
</div>
<Form.Description>Set the font you want to use in the dashboard.</Form.Description>
<Form.Validation />
</Form.Field>
</Form.Item>
<Form.Item>
<Form.Field {config} name="theme">
<Form.Label>Theme</Form.Label>
<Form.Description>Select the theme for the dashboard.</Form.Description>
<Form.Validation />
<Form.RadioGroup class="grid max-w-md grid-cols-2 gap-8 pt-2" orientation="horizontal">
<Form.RadioGroup class="grid max-w-xl grid-cols-3 gap-8 pt-2" orientation="horizontal">
<Label for="light" class="[&:has([data-state=checked])>div]:border-primary">
<Form.RadioItem id="light" value="light" class="sr-only" />
<div class="items-center rounded-md border-2 border-muted p-1 hover:border-accent">
@ -91,6 +74,28 @@
</div>
<span class="block w-full p-2 text-center font-normal"> Dark </span>
</Label>
<Label for="system" class="[&:has([data-state=checked])>div]:border-primary">
<Form.RadioItem id="system" value="system" class="sr-only" />
<div
class="items-center rounded-md border-2 border-muted bg-popover p-1 hover:bg-accent hover:text-accent-foreground"
>
<div class="space-y-2 rounded-sm bg-slate-500 p-2">
<div class="space-y-2 rounded-md bg-slate-400 p-2 shadow-sm">
<div class="h-2 w-[80px] rounded-lg bg-slate-200" />
<div class="h-2 w-[100px] rounded-lg bg-slate-200" />
</div>
<div class="flex items-center space-x-2 rounded-md bg-slate-400 p-2 shadow-sm">
<div class="h-4 w-4 rounded-full bg-slate-200" />
<div class="h-2 w-[100px] rounded-lg bg-slate-200" />
</div>
<div class="flex items-center space-x-2 rounded-md bg-slate-400 p-2 shadow-sm">
<div class="h-4 w-4 rounded-full bg-slate-200" />
<div class="h-2 w-[100px] rounded-lg bg-slate-200" />
</div>
</div>
</div>
<span class="block w-full p-2 text-center font-normal"> System </span>
</Label>
</Form.RadioGroup>
</Form.Field>
</Form.Item>

77
apps/web/src/routes/(dashboard)/settings/notifications/notifications-form.svelte
View file

@ -1,14 +1,9 @@
<script lang="ts" context="module">
import { z } from 'zod';
export const notificationsFormSchema = z.object({
type: z.enum(['all', 'mentions', 'none'], {
type: z.enum(['all', 'tickets', 'none'], {
required_error: 'You need to select a notification type.'
}),
mobile: z.boolean().default(false).optional(),
communication_emails: z.boolean().default(false).optional(),
social_emails: z.boolean().default(false).optional(),
marketing_emails: z.boolean().default(false).optional(),
security_emails: z.boolean()
})
});
type NotificationFormSchema = typeof notificationsFormSchema;
</script>
@ -18,6 +13,7 @@
import * as Form from '$lib/components/ui/form';
import { Label } from '$lib/components/ui/label';
export let data: SuperValidated<NotificationFormSchema>;
import { dev } from '$app/environment';
</script>
<Form.Root
@ -26,7 +22,7 @@
let:config
method="POST"
class="space-y-8"
debug={true}
debug={dev ? true : false}
>
<Form.Item>
<Form.Field {config} name="type">
@ -34,11 +30,11 @@
<Form.RadioGroup class="flex flex-col space-y-1">
<div class="flex items-center space-x-3">
<Form.RadioItem value="all" id="all" />
<Label for="all" class="font-normal">All new messages</Label>
<Label for="all" class="font-normal">New tickets and SLA breaches</Label>
</div>
<div class="flex items-center space-x-3">
<Form.RadioItem value="mentions" id="mentions" />
<Label for="mentions" class="font-normal">Direct messages and mentions</Label>
<Form.RadioItem value="tickets" id="mentions" />
<Label for="mentions" class="font-normal">New tickets</Label>
</div>
<div class="flex items-center space-x-3">
<Form.RadioItem value="none" id="none" />
@ -47,64 +43,5 @@
</Form.RadioGroup>
</Form.Field>
</Form.Item>
<div>
<h3 class="mb-4 text-lg font-medium">Email Notifications</h3>
<div class="space-y-4">
<Form.Field {config} name="communication_emails">
<Form.Item class="flex flex-row items-center justify-between rounded-lg border p-4">
<div class="space-y-0.5">
<Form.Label class="text-base">Communication emails</Form.Label>
<Form.Description>Receive emails about your account activity.</Form.Description>
</div>
<Form.Switch />
</Form.Item>
</Form.Field>
<Form.Field {config} name="marketing_emails">
<Form.Item class="flex flex-row items-center justify-between rounded-lg border p-4">
<div class="space-y-0.5">
<Form.Label class="text-base">Marketing emails</Form.Label>
<Form.Description>
Receive emails about new products, features, and more.
</Form.Description>
</div>
<Form.Switch />
</Form.Item>
</Form.Field>
<Form.Field {config} name="social_emails">
<Form.Item class="flex flex-row items-center justify-between rounded-lg border p-4">
<div class="space-y-0.5">
<Form.Label class="text-base">Social emails</Form.Label>
<Form.Description>
Receive emails for friend requests, follows, and more.
</Form.Description>
</div>
<Form.Switch />
</Form.Item>
</Form.Field>
<Form.Field {config} name="security_emails">
<Form.Item class="flex flex-row items-center justify-between rounded-lg border p-4">
<div class="space-y-0.5">
<Form.Label class="text-base">Security emails</Form.Label>
<Form.Description>
Receive emails about your account activity and security.
</Form.Description>
</div>
<Form.Switch />
</Form.Item>
</Form.Field>
</div>
</div>
<Form.Field {config} name="mobile">
<Form.Item class="flex flex-row items-start space-x-3 space-y-0">
<Form.Checkbox />
<div class="space-y-1 leading-none">
<Form.Label>Use different settings for my mobile devices</Form.Label>
<Form.Description>
You can manage your mobile notifications in the{' '}<a href="/settings">mobile settings</a
> page.
</Form.Description>
</div>
</Form.Item>
</Form.Field>
<Form.Button>Update notifications</Form.Button>
</Form.Root>

4
apps/web/src/routes/(dashboard)/settings/profile-form.svelte
View file

@ -18,7 +18,7 @@
<script lang="ts">
import * as Form from '$lib/components/ui/form';
import type { SuperValidated } from 'sveltekit-superforms';
import { dev } from '$app/environment';
export let data: SuperValidated<ProfileFormSchema>;
</script>
@ -28,7 +28,7 @@
let:config
method="POST"
class="space-y-8"
debug={true}
debug={dev ? true : false}
>
<Form.Item>
<Form.Field {config} name="username">