sendnrw/pocket-id
2
0
Fork 0
mirror of https://github.com/pocket-id/pocket-id.git synced 2026-03-31 03:36:36 +00: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 10:45:08 -06:00
committed by GitHub
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

108
frontend/src/lib/components/passkey-row.svelte
View File

@@ -1,5 +1,6 @@
<script lang="ts">
import { Button } from '$lib/components/ui/button';
import * as Item from '$lib/components/ui/item/index.js';
import * as Tooltip from '$lib/components/ui/tooltip/index.js';
import { m } from '$lib/paraglide/messages';
import { LucideCalendar, LucidePencil, LucideTrash, type Icon as IconType } from '@lucide/svelte';
@@ -19,61 +20,54 @@
} = $props();
</script>
<div class="bg-card hover:bg-muted/50 group rounded-lg p-3 transition-colors">
<div class="flex items-center justify-between">
<div class="flex items-start gap-3">
<div class="bg-primary/10 text-primary mt-1 rounded-lg p-2">
{#if icon}{@const Icon = icon}
<Icon class="size-5" />
{/if}
</div>
<div>
<div class="flex items-center gap-2">
<p class="font-medium">{label}</p>
</div>
{#if description}
<div class="text-muted-foreground mt-1 flex items-center text-xs">
<LucideCalendar class="mr-1 size-3" />
{description}
</div>
{/if}
</div>
</div>
<Item.Root variant="transparent" class="hover:bg-muted transition-colors py-3 px-0 sm:px-4">
<Item.Media class="bg-primary/10 text-primary rounded-lg p-2">
{#if icon}{@const Icon = icon}
<Icon class="size-5" />
{/if}
</Item.Media>
<Item.Content class="gap-0.5">
<Item.Title>{label}</Item.Title>
{#if description}
<Item.Description class="flex items-center">
<LucideCalendar class="mr-1 size-3" />
{description}
</Item.Description>
{/if}
</Item.Content>
<Item.Actions>
<Tooltip.Provider>
<Tooltip.Root>
<Tooltip.Trigger>
<Button
onclick={onRename}
size="icon"
variant="ghost"
class="size-8"
aria-label={m.rename()}
>
<LucidePencil class="size-4" />
</Button>
</Tooltip.Trigger>
<Tooltip.Content>{m.rename()}</Tooltip.Content>
</Tooltip.Root>
</Tooltip.Provider>
<div class="flex items-center gap-2">
<Tooltip.Provider>
<Tooltip.Root>
<Tooltip.Trigger>
<Button
onclick={onRename}
size="icon"
variant="ghost"
class="size-8"
aria-label={m.rename()}
>
<LucidePencil class="size-4" />
</Button>
</Tooltip.Trigger>
<Tooltip.Content>{m.rename()}</Tooltip.Content>
</Tooltip.Root></Tooltip.Provider
>
<Tooltip.Provider>
<Tooltip.Root>
<Tooltip.Trigger>
<Button
onclick={onDelete}
size="icon"
variant="ghost"
class="hover:bg-destructive/10 hover:text-destructive size-8"
aria-label={m.delete()}
>
<LucideTrash class="size-4" />
</Button>
</Tooltip.Trigger>
<Tooltip.Content>{m.delete()}</Tooltip.Content>
</Tooltip.Root></Tooltip.Provider
>
</div>
</div>
</div>
<Tooltip.Provider>
<Tooltip.Root>
<Tooltip.Trigger>
<Button
onclick={onDelete}
size="icon"
variant="ghost"
class="hover:bg-destructive/10 hover:text-destructive size-8"
aria-label={m.delete()}
>
<LucideTrash class="size-4" />
</Button>
</Tooltip.Trigger>
<Tooltip.Content>{m.delete()}</Tooltip.Content>
</Tooltip.Root>
</Tooltip.Provider>
</Item.Actions>
</Item.Root>