Add svelte-sonner for notifications and enhance employee search functionality

- Integrated svelte-sonner for toast notifications in the layout.
- Implemented server-side search for employees with pagination in the API.
- Updated employee loading logic to support search queries and loading more results.
- Enhanced employee detail view with navigation and improved UI interactions.
- Adjusted cookie handling in hooks for PocketBase authentication.
This commit is contained in:
eewing
2026-02-17 09:13:10 -06:00
parent faae3c1a43
commit 09487bbede
14 changed files with 1172 additions and 32 deletions
+46
View File
@@ -0,0 +1,46 @@
<script lang="ts" module>
import { cn, type WithElementRef } from "$lib/utils.js";
import type { HTMLAttributes } from "svelte/elements";
import { type VariantProps, tv } from "tailwind-variants";
export const badgeVariants = tv({
base: "inline-flex items-center rounded-md border px-2.5 py-0.5 text-xs font-medium transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2",
variants: {
variant: {
default:
"border-transparent bg-primary text-primary-foreground shadow-xs hover:bg-primary/80",
secondary:
"border-transparent bg-secondary text-secondary-foreground hover:bg-secondary/80",
destructive:
"border-transparent bg-destructive text-destructive-foreground shadow-xs hover:bg-destructive/80",
outline: "text-foreground border-input",
link: "border-transparent bg-primary/10 text-primary hover:bg-primary/20",
},
},
defaultVariants: {
variant: "default",
},
});
export type BadgeVariant = VariantProps<typeof badgeVariants>["variant"];
export type BadgeProps = WithElementRef<HTMLAttributes<HTMLSpanElement>> & {
variant?: BadgeVariant;
};
</script>
<script lang="ts">
let {
class: className,
variant = "default",
children,
...restProps
}: BadgeProps = $props();
</script>
<span
data-slot="badge"
class={cn(badgeVariants({ variant }), className)}
{...restProps}
>
{@render children?.()}
</span>
+15
View File
@@ -0,0 +1,15 @@
import Root, {
type BadgeProps,
type BadgeVariant,
badgeVariants,
} from "./badge.svelte";
export {
Root,
type BadgeProps as Props,
//
Root as Badge,
badgeVariants,
type BadgeProps,
type BadgeVariant,
};