sendnrw/pocket-id
2
0
Fork 0
mirror of https://github.com/pocket-id/pocket-id.git synced 2026-10-14 05:39:05 +02:00
Code Issues Packages Projects Releases Wiki Activity

refactor: update forms and other areas to use new shadcn components (#1115)

Browse Source 
Co-authored-by: Elias Schneider <login@eliasschneider.com>
Co-authored-by: ItalyPaleAle <43508+ItalyPaleAle@users.noreply.github.com>
Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>
This commit is contained in:
Kyle Mendell
2026-01-02 17:45:08 +01:00
committed by GitHub
co-authored by Elias Schneider ItalyPaleAle Copilot
parent 894eaf3cff
commit 386add08c4
60 changed files with 1427 additions and 783 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/lib/components/form/checkbox-with-label.svelte
+5 -9
View File
@@ -1,6 +1,6 @@
<script lang="ts">
import { Checkbox } from '$lib/components/ui/checkbox';
import { Label } from '$lib/components/ui/label';
import * as Field from '$lib/components/ui/field';
let {
id,
@@ -26,14 +26,10 @@
onCheckedChange={(v) => onCheckedChange && onCheckedChange(v == true)}
bind:checked
/>
<div class="grid gap-1.5 leading-none">
<Label for={id} class="mb-0 text-sm leading-none font-medium">
{label}
</Label>
<Field.Field class="gap-0">
<Field.Label for={id}>{label}</Field.Label>
{#if description}
<p class="text-muted-foreground text-[0.8rem]">
{description}
</p>
<Field.Description>{description}</Field.Description>
{/if}
</div>
</Field.Field>
</div>
frontend/src/lib/components/form/form-input.svelte
+25 -27
View File
@@ -1,7 +1,7 @@
<script lang="ts">
import DatePicker from '$lib/components/form/date-picker.svelte';
import * as Field from '$lib/components/ui/field';
import { Input, type FormInputEvent } from '$lib/components/ui/input';
import { Label } from '$lib/components/ui/label';
import { m } from '$lib/paraglide/messages';
import type { FormInput } from '$lib/utils/form-util';
import { LucideExternalLink } from '@lucide/svelte';
@@ -46,12 +46,12 @@
const id = label?.toLowerCase().replace(/ /g, '-');
</script>
<div {...restProps}>
<Field.Field data-disabled={disabled} {...restProps}>
{#if label}
<Label required={input?.required} class="mb-0" for={labelFor ?? id}>{label}</Label>
<Field.Label required={input?.required} class="mb-0" for={labelFor ?? id}>{label}</Field.Label>
{/if}
{#if description}
<p class="text-muted-foreground mt-1 text-xs">
<Field.Description>
<FormattedMessage m={description} />
{#if docsLink}
<a
@@ -63,28 +63,26 @@
<LucideExternalLink class="inline size-3 align-text-top" />
</a>
{/if}
</p>
</Field.Description>
{/if}
<div class={label || description ? 'mt-2' : ''}>
{#if children}
{@render children()}
{:else if input}
{#if type === 'date'}
<DatePicker {id} bind:value={input.value as Date} />
{:else}
<Input
aria-invalid={!!input.error}
{id}
{placeholder}
{type}
bind:value={input.value}
{disabled}
oninput={(e) => onInput?.(e)}
/>
{/if}
{#if children}
{@render children()}
{:else if input}
{#if type === 'date'}
<DatePicker {id} bind:value={input.value as Date} />
{:else}
<Input
aria-invalid={!!input.error}
{id}
{placeholder}
{type}
bind:value={input.value}
{disabled}
oninput={(e) => onInput?.(e)}
/>
{/if}
{#if input?.error}
<p class="text-destructive mt-1 text-start text-xs">{input.error}</p>
{/if}
</div>
</div>
{/if}
{#if input?.error}
<Field.Error>{input.error}</Field.Error>
{/if}
</Field.Field>
frontend/src/lib/components/form/profile-picture-settings.svelte
+3 -2
View File
@@ -5,7 +5,8 @@
import { m } from '$lib/paraglide/messages';
import appConfigStore from '$lib/stores/application-configuration-store';
import { cachedProfilePicture } from '$lib/utils/cached-image-util';
import { LucideLoader, LucideRefreshCw, LucideUpload } from '@lucide/svelte';
import { LucideRefreshCw, LucideUpload } from '@lucide/svelte';
import { Spinner } from '$lib/components/ui/spinner';
import { onMount } from 'svelte';
import { openConfirmDialog } from '../confirm-dialog';
@@ -88,7 +89,7 @@
</Avatar.Root>
<div class="absolute inset-0 flex items-center justify-center">
{#if isLoading}
<LucideLoader class="size-5 animate-spin" />
<Spinner class="size-5" />
{:else}
<LucideUpload class="size-5 opacity-0 transition-opacity group-hover:opacity-100" />
{/if}
frontend/src/lib/components/form/searchable-multi-select.svelte
+4 -3
View File
@@ -3,9 +3,10 @@
import { Button } from '$lib/components/ui/button';
import * as Command from '$lib/components/ui/command';
import * as Popover from '$lib/components/ui/popover';
import { cn } from '$lib/utils/style';
import { Spinner } from '$lib/components/ui/spinner';
import { m } from '$lib/paraglide/messages';
import { LoaderCircle, LucideCheck, LucideChevronDown } from '@lucide/svelte';
import { cn } from '$lib/utils/style';
import { LucideCheck, LucideChevronDown } from '@lucide/svelte';
import type { FormEventHandler } from 'svelte/elements';
type Item = {
@@ -108,7 +109,7 @@
<Command.Empty>
{#if isLoading}
<div class="flex w-full items-center justify-center py-2">
<LoaderCircle class="size-4 animate-spin" />
<Spinner />
</div>
{:else}
{m.no_items_found()}
frontend/src/lib/components/form/searchable-select.svelte
+3 -2
View File
@@ -2,9 +2,10 @@
import { Button } from '$lib/components/ui/button';
import * as Command from '$lib/components/ui/command';
import * as Popover from '$lib/components/ui/popover';
import { Spinner } from '$lib/components/ui/spinner';
import { m } from '$lib/paraglide/messages';
import { cn } from '$lib/utils/style';
import { LoaderCircle, LucideCheck, LucideChevronDown } from '@lucide/svelte';
import { LucideCheck, LucideChevronDown } from '@lucide/svelte';
import { tick } from 'svelte';
import type { FormEventHandler, HTMLAttributes } from 'svelte/elements';
@@ -90,7 +91,7 @@
<Command.Empty>
{#if isLoading}
<div class="flex w-full justify-center">
<LoaderCircle class="size-4 animate-spin" />
<Spinner />
</div>
{:else}
{m.no_items_found()}