EZPPFarm/EZPPLauncher
EZPPFarm/EZPPLauncher
2
0
Fork 0
Code Issues Pull Requests Projects 1 Releases 14 Activity

chore: format

Browse Source
This commit is contained in:
HorizonCode 2025-07-04 22:24:20 +02:00
parent b0d3651888
commit 5b600017d5
68 changed files with 822 additions and 837 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
.prettierrc
View File

@ -9,7 +9,6 @@
"tabWidth": 2, "tabWidth": 2,
"useTabs": false, "useTabs": false,
"bracketSpacing": true, "bracketSpacing": true,
"svelteBracketNewLine": true,
"plugins": ["prettier-plugin-svelte"], "plugins": ["prettier-plugin-svelte"],
"overrides": [ "overrides": [
{ {

28
components.json
View File

@ -1,16 +1,16 @@
{ {
"$schema": "https://next.shadcn-svelte.com/schema.json", "$schema": "https://next.shadcn-svelte.com/schema.json",
"tailwind": { "tailwind": {
"css": "src\\app.css", "css": "src\\app.css",
"baseColor": "gray" "baseColor": "gray"
}, },
"aliases": { "aliases": {
"components": "$lib/components", "components": "$lib/components",
"utils": "$lib/utils", "utils": "$lib/utils",
"ui": "$lib/components/ui", "ui": "$lib/components/ui",
"hooks": "$lib/hooks", "hooks": "$lib/hooks",
"lib": "$lib" "lib": "$lib"
}, },
"typescript": true, "typescript": true,
"registry": "https://tw3.shadcn-svelte.com/registry/default" "registry": "https://tw3.shadcn-svelte.com/registry/default"
} }

4
postcss.config.js
View File

@ -1,6 +1,6 @@
export default { export default {
plugins: { plugins: {
tailwindcss: {}, tailwindcss: {},
autoprefixer: {} autoprefixer: {},
} },
}; };

4
src-tauri/capabilities/default.json
View File

@ -2,9 +2,7 @@
"$schema": "../gen/schemas/desktop-schema.json", "$schema": "../gen/schemas/desktop-schema.json",
"identifier": "default", "identifier": "default",
"description": "Capability for the main window", "description": "Capability for the main window",
"windows": [ "windows": ["main"],
"main"
],
"permissions": [ "permissions": [
"core:default", "core:default",
"shell:allow-open", "shell:allow-open",

20
src/app.html
View File

@ -1,15 +1,13 @@
<!doctype html> <!doctype html>
<html lang="en" class="dark"> <html lang="en" class="dark">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>EZPPLauncher</title>
%sveltekit.head%
</head>
<head> <body class="bg-theme-950" data-sveltekit-preload-data="hover">
<meta charset="utf-8" /> <div style="display: contents">%sveltekit.body%</div>
<meta name="viewport" content="width=device-width, initial-scale=1" /> </body>
<title>EZPPLauncher</title>
%sveltekit.head%
</head>
<body class="bg-theme-950" data-sveltekit-preload-data="hover">
<div style="display: contents">%sveltekit.body%</div>
</body>
</html> </html>

2
src/lib/api/osudirect.ts
View File

@ -1,4 +1,4 @@
const API_ENDPOINT = "https://osu.direct/api/"; const API_ENDPOINT = 'https://osu.direct/api/';
export const osudirect = { export const osudirect = {
osu: async (mapId: number): Promise<string | undefined> => { osu: async (mapId: number): Promise<string | undefined> => {

16
src/lib/components/ui/alert-dialog/alert-dialog-action.svelte
View File

@ -1,13 +1,13 @@
<script lang="ts"> <script lang="ts">
import { AlertDialog as AlertDialogPrimitive } from "bits-ui"; import { AlertDialog as AlertDialogPrimitive } from 'bits-ui';
import { buttonVariants } from "$lib/components/ui/button/index.js"; import { buttonVariants } from '$lib/components/ui/button/index.js';
import { cn } from "$lib/utils.js"; import { cn } from '$lib/utils.js';
let { let {
ref = $bindable(null), ref = $bindable(null),
class: className, class: className,
...restProps ...restProps
}: AlertDialogPrimitive.ActionProps = $props(); }: AlertDialogPrimitive.ActionProps = $props();
</script> </script>
<AlertDialogPrimitive.Action bind:ref class={cn(buttonVariants(), className)} {...restProps} /> <AlertDialogPrimitive.Action bind:ref class={cn(buttonVariants(), className)} {...restProps} />

22
src/lib/components/ui/alert-dialog/alert-dialog-cancel.svelte
View File

@ -1,17 +1,17 @@
<script lang="ts"> <script lang="ts">
import { AlertDialog as AlertDialogPrimitive } from "bits-ui"; import { AlertDialog as AlertDialogPrimitive } from 'bits-ui';
import { buttonVariants } from "$lib/components/ui/button/index.js"; import { buttonVariants } from '$lib/components/ui/button/index.js';
import { cn } from "$lib/utils.js"; import { cn } from '$lib/utils.js';
let { let {
ref = $bindable(null), ref = $bindable(null),
class: className, class: className,
...restProps ...restProps
}: AlertDialogPrimitive.CancelProps = $props(); }: AlertDialogPrimitive.CancelProps = $props();
</script> </script>
<AlertDialogPrimitive.Cancel <AlertDialogPrimitive.Cancel
bind:ref bind:ref
class={cn(buttonVariants({ variant: "outline" }), "mt-2 sm:mt-0", className)} class={cn(buttonVariants({ variant: 'outline' }), 'mt-2 sm:mt-0', className)}
{...restProps} {...restProps}
/> />

40
src/lib/components/ui/alert-dialog/alert-dialog-content.svelte
View File

@ -1,26 +1,26 @@
<script lang="ts"> <script lang="ts">
import { AlertDialog as AlertDialogPrimitive, type WithoutChild } from "bits-ui"; import { AlertDialog as AlertDialogPrimitive, type WithoutChild } from 'bits-ui';
import AlertDialogOverlay from "./alert-dialog-overlay.svelte"; import AlertDialogOverlay from './alert-dialog-overlay.svelte';
import { cn } from "$lib/utils.js"; import { cn } from '$lib/utils.js';
let { let {
ref = $bindable(null), ref = $bindable(null),
class: className, class: className,
portalProps, portalProps,
...restProps ...restProps
}: WithoutChild<AlertDialogPrimitive.ContentProps> & { }: WithoutChild<AlertDialogPrimitive.ContentProps> & {
portalProps?: AlertDialogPrimitive.PortalProps; portalProps?: AlertDialogPrimitive.PortalProps;
} = $props(); } = $props();
</script> </script>
<AlertDialogPrimitive.Portal {...portalProps}> <AlertDialogPrimitive.Portal {...portalProps}>
<AlertDialogOverlay /> <AlertDialogOverlay />
<AlertDialogPrimitive.Content <AlertDialogPrimitive.Content
bind:ref bind:ref
class={cn( class={cn(
"bg-background data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border p-6 shadow-lg duration-200 sm:rounded-lg", 'bg-background data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border p-6 shadow-lg duration-200 sm:rounded-lg',
className className
)} )}
{...restProps} {...restProps}
/> />
</AlertDialogPrimitive.Portal> </AlertDialogPrimitive.Portal>

20
src/lib/components/ui/alert-dialog/alert-dialog-description.svelte
View File

@ -1,16 +1,16 @@
<script lang="ts"> <script lang="ts">
import { AlertDialog as AlertDialogPrimitive } from "bits-ui"; import { AlertDialog as AlertDialogPrimitive } from 'bits-ui';
import { cn } from "$lib/utils.js"; import { cn } from '$lib/utils.js';
let { let {
ref = $bindable(null), ref = $bindable(null),
class: className, class: className,
...restProps ...restProps
}: AlertDialogPrimitive.DescriptionProps = $props(); }: AlertDialogPrimitive.DescriptionProps = $props();
</script> </script>
<AlertDialogPrimitive.Description <AlertDialogPrimitive.Description
bind:ref bind:ref
class={cn("text-muted-foreground text-sm", className)} class={cn('text-muted-foreground text-sm', className)}
{...restProps} {...restProps}
/> />

26
src/lib/components/ui/alert-dialog/alert-dialog-footer.svelte
View File

@ -1,20 +1,20 @@
<script lang="ts"> <script lang="ts">
import type { WithElementRef } from "bits-ui"; import type { WithElementRef } from 'bits-ui';
import type { HTMLAttributes } from "svelte/elements"; import type { HTMLAttributes } from 'svelte/elements';
import { cn } from "$lib/utils.js"; import { cn } from '$lib/utils.js';
let { let {
ref = $bindable(null), ref = $bindable(null),
class: className, class: className,
children, children,
...restProps ...restProps
}: WithElementRef<HTMLAttributes<HTMLDivElement>> = $props(); }: WithElementRef<HTMLAttributes<HTMLDivElement>> = $props();
</script> </script>
<div <div
bind:this={ref} bind:this={ref}
class={cn("flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2", className)} class={cn('flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2', className)}
{...restProps} {...restProps}
> >
{@render children?.()} {@render children?.()}
</div> </div>

26
src/lib/components/ui/alert-dialog/alert-dialog-header.svelte
View File

@ -1,20 +1,20 @@
<script lang="ts"> <script lang="ts">
import type { WithElementRef } from "bits-ui"; import type { WithElementRef } from 'bits-ui';
import type { HTMLAttributes } from "svelte/elements"; import type { HTMLAttributes } from 'svelte/elements';
import { cn } from "$lib/utils.js"; import { cn } from '$lib/utils.js';
let { let {
ref = $bindable(null), ref = $bindable(null),
class: className, class: className,
children, children,
...restProps ...restProps
}: WithElementRef<HTMLAttributes<HTMLDivElement>> = $props(); }: WithElementRef<HTMLAttributes<HTMLDivElement>> = $props();
</script> </script>
<div <div
bind:this={ref} bind:this={ref}
class={cn("flex flex-col space-y-2 text-center sm:text-left", className)} class={cn('flex flex-col space-y-2 text-center sm:text-left', className)}
{...restProps} {...restProps}
> >
{@render children?.()} {@render children?.()}
</div> </div>

26
src/lib/components/ui/alert-dialog/alert-dialog-overlay.svelte
View File

@ -1,19 +1,19 @@
<script lang="ts"> <script lang="ts">
import { AlertDialog as AlertDialogPrimitive } from "bits-ui"; import { AlertDialog as AlertDialogPrimitive } from 'bits-ui';
import { cn } from "$lib/utils.js"; import { cn } from '$lib/utils.js';
let { let {
ref = $bindable(null), ref = $bindable(null),
class: className, class: className,
...restProps ...restProps
}: AlertDialogPrimitive.OverlayProps = $props(); }: AlertDialogPrimitive.OverlayProps = $props();
</script> </script>
<AlertDialogPrimitive.Overlay <AlertDialogPrimitive.Overlay
bind:ref bind:ref
class={cn( class={cn(
"data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 bg-black/80", 'data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 bg-black/80',
className className
)} )}
{...restProps} {...restProps}
/> />

24
src/lib/components/ui/alert-dialog/alert-dialog-title.svelte
View File

@ -1,18 +1,18 @@
<script lang="ts"> <script lang="ts">
import { AlertDialog as AlertDialogPrimitive } from "bits-ui"; import { AlertDialog as AlertDialogPrimitive } from 'bits-ui';
import { cn } from "$lib/utils.js"; import { cn } from '$lib/utils.js';
let { let {
ref = $bindable(null), ref = $bindable(null),
class: className, class: className,
level = 3, level = 3,
...restProps ...restProps
}: AlertDialogPrimitive.TitleProps = $props(); }: AlertDialogPrimitive.TitleProps = $props();
</script> </script>
<AlertDialogPrimitive.Title <AlertDialogPrimitive.Title
bind:ref bind:ref
class={cn("text-lg font-semibold", className)} class={cn('text-lg font-semibold', className)}
{level} {level}
{...restProps} {...restProps}
/> />

64
src/lib/components/ui/alert-dialog/index.ts
View File

@ -1,39 +1,39 @@
import { AlertDialog as AlertDialogPrimitive } from "bits-ui"; import { AlertDialog as AlertDialogPrimitive } from 'bits-ui';
import Title from "./alert-dialog-title.svelte"; import Title from './alert-dialog-title.svelte';
import Action from "./alert-dialog-action.svelte"; import Action from './alert-dialog-action.svelte';
import Cancel from "./alert-dialog-cancel.svelte"; import Cancel from './alert-dialog-cancel.svelte';
import Footer from "./alert-dialog-footer.svelte"; import Footer from './alert-dialog-footer.svelte';
import Header from "./alert-dialog-header.svelte"; import Header from './alert-dialog-header.svelte';
import Overlay from "./alert-dialog-overlay.svelte"; import Overlay from './alert-dialog-overlay.svelte';
import Content from "./alert-dialog-content.svelte"; import Content from './alert-dialog-content.svelte';
import Description from "./alert-dialog-description.svelte"; import Description from './alert-dialog-description.svelte';
const Root = AlertDialogPrimitive.Root; const Root = AlertDialogPrimitive.Root;
const Trigger = AlertDialogPrimitive.Trigger; const Trigger = AlertDialogPrimitive.Trigger;
const Portal = AlertDialogPrimitive.Portal; const Portal = AlertDialogPrimitive.Portal;
export { export {
Root, Root,
Title, Title,
Action, Action,
Cancel, Cancel,
Portal, Portal,
Footer, Footer,
Header, Header,
Trigger, Trigger,
Overlay, Overlay,
Content, Content,
Description, Description,
// //
Root as AlertDialog, Root as AlertDialog,
Title as AlertDialogTitle, Title as AlertDialogTitle,
Action as AlertDialogAction, Action as AlertDialogAction,
Cancel as AlertDialogCancel, Cancel as AlertDialogCancel,
Portal as AlertDialogPortal, Portal as AlertDialogPortal,
Footer as AlertDialogFooter, Footer as AlertDialogFooter,
Header as AlertDialogHeader, Header as AlertDialogHeader,
Trigger as AlertDialogTrigger, Trigger as AlertDialogTrigger,
Overlay as AlertDialogOverlay, Overlay as AlertDialogOverlay,
Content as AlertDialogContent, Content as AlertDialogContent,
Description as AlertDialogDescription, Description as AlertDialogDescription,
}; };

20
src/lib/components/ui/avatar/avatar-fallback.svelte
View File

@ -1,16 +1,16 @@
<script lang="ts"> <script lang="ts">
import { Avatar as AvatarPrimitive } from "bits-ui"; import { Avatar as AvatarPrimitive } from 'bits-ui';
import { cn } from "$lib/utils.js"; import { cn } from '$lib/utils.js';
let { let {
ref = $bindable(null), ref = $bindable(null),
class: className, class: className,
...restProps ...restProps
}: AvatarPrimitive.FallbackProps = $props(); }: AvatarPrimitive.FallbackProps = $props();
</script> </script>
<AvatarPrimitive.Fallback <AvatarPrimitive.Fallback
bind:ref bind:ref
class={cn("bg-muted flex h-full w-full items-center justify-center rounded-full", className)} class={cn('bg-muted flex h-full w-full items-center justify-center rounded-full', className)}
{...restProps} {...restProps}
/> />

20
src/lib/components/ui/avatar/avatar-image.svelte
View File

@ -1,16 +1,16 @@
<script lang="ts"> <script lang="ts">
import { Avatar as AvatarPrimitive } from "bits-ui"; import { Avatar as AvatarPrimitive } from 'bits-ui';
import { cn } from "$lib/utils.js"; import { cn } from '$lib/utils.js';
let { let {
ref = $bindable(null), ref = $bindable(null),
class: className, class: className,
...restProps ...restProps
}: AvatarPrimitive.ImageProps = $props(); }: AvatarPrimitive.ImageProps = $props();
</script> </script>
<AvatarPrimitive.Image <AvatarPrimitive.Image
bind:ref bind:ref
class={cn("aspect-square h-full w-full", className)} class={cn('aspect-square h-full w-full', className)}
{...restProps} {...restProps}
/> />

20
src/lib/components/ui/avatar/avatar.svelte
View File

@ -1,16 +1,16 @@
<script lang="ts"> <script lang="ts">
import { Avatar as AvatarPrimitive } from "bits-ui"; import { Avatar as AvatarPrimitive } from 'bits-ui';
import { cn } from "$lib/utils.js"; import { cn } from '$lib/utils.js';
let { let {
ref = $bindable(null), ref = $bindable(null),
class: className, class: className,
...restProps ...restProps
}: AvatarPrimitive.RootProps = $props(); }: AvatarPrimitive.RootProps = $props();
</script> </script>
<AvatarPrimitive.Root <AvatarPrimitive.Root
bind:ref bind:ref
class={cn("relative flex size-10 shrink-0 overflow-hidden rounded-full", className)} class={cn('relative flex size-10 shrink-0 overflow-hidden rounded-full', className)}
{...restProps} {...restProps}
/> />

20
src/lib/components/ui/avatar/index.ts
View File

@ -1,13 +1,13 @@
import Root from "./avatar.svelte"; import Root from './avatar.svelte';
import Image from "./avatar-image.svelte"; import Image from './avatar-image.svelte';
import Fallback from "./avatar-fallback.svelte"; import Fallback from './avatar-fallback.svelte';
export { export {
Root, Root,
Image, Image,
Fallback, Fallback,
// //
Root as Avatar, Root as Avatar,
Image as AvatarImage, Image as AvatarImage,
Fallback as AvatarFallback, Fallback as AvatarFallback,
}; };

6
src/lib/components/ui/background/background.svelte
View File

@ -1,10 +1,8 @@
<script lang="ts"> <script lang="ts">
const prop: {beatmapId: number} = $props(); const prop: { beatmapId: number } = $props();
</script> </script>
<div <div class="absolute w-screen h-screen overflow-hidden pointer-events-none rounded">
class="absolute w-screen h-screen overflow-hidden pointer-events-none rounded"
>
<div <div
style="background: url(https://osu.direct/api/media/background/{prop.beatmapId})" style="background: url(https://osu.direct/api/media/background/{prop.beatmapId})"
class="absolute top-0 left-0 w-full h-full !bg-cover -z-10 pointer-events-none blur opacity-10 rounded" class="absolute top-0 left-0 w-full h-full !bg-cover -z-10 pointer-events-none blur opacity-10 rounded"

75
src/lib/components/ui/badge/badge.svelte
View File

@ -1,50 +1,49 @@
<script lang="ts" module> <script lang="ts" module>
import { type VariantProps, tv } from "tailwind-variants"; import { type VariantProps, tv } from 'tailwind-variants';
export const badgeVariants = tv({ export const badgeVariants = tv({
base: "focus:ring-ring inline-flex items-center rounded-full border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-offset-2", base: 'focus:ring-ring inline-flex items-center rounded-full border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-offset-2',
variants: { variants: {
variant: { variant: {
default: default: 'bg-primary text-primary-foreground hover:bg-primary/80 border-transparent',
"bg-primary text-primary-foreground hover:bg-primary/80 border-transparent", secondary:
secondary: 'bg-secondary text-secondary-foreground hover:bg-secondary/80 border-transparent',
"bg-secondary text-secondary-foreground hover:bg-secondary/80 border-transparent", destructive:
destructive: 'bg-destructive text-destructive-foreground hover:bg-destructive/80 border-transparent',
"bg-destructive text-destructive-foreground hover:bg-destructive/80 border-transparent", outline: 'text-foreground',
outline: "text-foreground", },
}, },
}, defaultVariants: {
defaultVariants: { variant: 'default',
variant: "default", },
}, });
});
export type BadgeVariant = VariantProps<typeof badgeVariants>["variant"]; export type BadgeVariant = VariantProps<typeof badgeVariants>['variant'];
</script> </script>
<script lang="ts"> <script lang="ts">
import type { WithElementRef } from "bits-ui"; import type { WithElementRef } from 'bits-ui';
import type { HTMLAnchorAttributes } from "svelte/elements"; import type { HTMLAnchorAttributes } from 'svelte/elements';
import { cn } from "$lib/utils.js"; import { cn } from '$lib/utils.js';
let { let {
ref = $bindable(null), ref = $bindable(null),
href, href,
class: className, class: className,
variant = "default", variant = 'default',
children, children,
...restProps ...restProps
}: WithElementRef<HTMLAnchorAttributes> & { }: WithElementRef<HTMLAnchorAttributes> & {
variant?: BadgeVariant; variant?: BadgeVariant;
} = $props(); } = $props();
</script> </script>
<svelte:element <svelte:element
this={href ? "a" : "span"} this={href ? 'a' : 'span'}
bind:this={ref} bind:this={ref}
{href} {href}
class={cn(badgeVariants({ variant, className }))} class={cn(badgeVariants({ variant, className }))}
{...restProps} {...restProps}
> >
{@render children?.()} {@render children?.()}
</svelte:element> </svelte:element>

4
src/lib/components/ui/badge/index.ts
View File

@ -1,2 +1,2 @@
export { default as Badge } from "./badge.svelte"; export { default as Badge } from './badge.svelte';
export { badgeVariants, type BadgeVariant } from "./badge.svelte"; export { badgeVariants, type BadgeVariant } from './badge.svelte';

116
src/lib/components/ui/button/button.svelte
View File

@ -1,74 +1,68 @@
<script lang="ts" module> <script lang="ts" module>
import type { WithElementRef } from "bits-ui"; import type { WithElementRef } from 'bits-ui';
import type { HTMLAnchorAttributes, HTMLButtonAttributes } from "svelte/elements"; import type { HTMLAnchorAttributes, HTMLButtonAttributes } from 'svelte/elements';
import { type VariantProps, tv } from "tailwind-variants"; import { type VariantProps, tv } from 'tailwind-variants';
export const buttonVariants = tv({ export const buttonVariants = tv({
base: "ring-offset-background focus-visible:ring-ring inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0", base: 'ring-offset-background focus-visible:ring-ring inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0',
variants: { variants: {
variant: { variant: {
default: "bg-primary text-primary-foreground hover:bg-primary/90", default: 'bg-primary text-primary-foreground hover:bg-primary/90',
destructive: "bg-destructive text-destructive-foreground hover:bg-destructive/90", destructive: 'bg-destructive text-destructive-foreground hover:bg-destructive/90',
outline: outline: 'border-input bg-background hover:bg-accent hover:text-accent-foreground border',
"border-input bg-background hover:bg-accent hover:text-accent-foreground border", secondary: 'bg-secondary text-secondary-foreground hover:bg-secondary/80',
secondary: "bg-secondary text-secondary-foreground hover:bg-secondary/80", ghost: 'hover:bg-accent hover:text-accent-foreground',
ghost: "hover:bg-accent hover:text-accent-foreground", link: 'text-primary underline-offset-4 hover:underline',
link: "text-primary underline-offset-4 hover:underline", },
}, size: {
size: { default: 'h-10 px-4 py-2',
default: "h-10 px-4 py-2", sm: 'h-9 rounded-md px-3',
sm: "h-9 rounded-md px-3", lg: 'h-11 rounded-md px-8',
lg: "h-11 rounded-md px-8", icon: 'h-10 w-10',
icon: "h-10 w-10", },
}, },
}, defaultVariants: {
defaultVariants: { variant: 'default',
variant: "default", size: 'default',
size: "default", },
}, });
});
export type ButtonVariant = VariantProps<typeof buttonVariants>["variant"]; export type ButtonVariant = VariantProps<typeof buttonVariants>['variant'];
export type ButtonSize = VariantProps<typeof buttonVariants>["size"]; export type ButtonSize = VariantProps<typeof buttonVariants>['size'];
export type ButtonProps = WithElementRef<HTMLButtonAttributes> & export type ButtonProps = WithElementRef<HTMLButtonAttributes> &
WithElementRef<HTMLAnchorAttributes> & { WithElementRef<HTMLAnchorAttributes> & {
variant?: ButtonVariant; variant?: ButtonVariant;
size?: ButtonSize; size?: ButtonSize;
}; };
</script> </script>
<script lang="ts"> <script lang="ts">
import { cn } from "$lib/utils.js"; import { cn } from '$lib/utils.js';
let { let {
class: className, class: className,
variant = "default", variant = 'default',
size = "default", size = 'default',
ref = $bindable(null), ref = $bindable(null),
href = undefined, href = undefined,
type = "button", type = 'button',
children, children,
...restProps ...restProps
}: ButtonProps = $props(); }: ButtonProps = $props();
</script> </script>
{#if href} {#if href}
<a <a bind:this={ref} class={cn(buttonVariants({ variant, size, className }))} {href} {...restProps}>
bind:this={ref} {@render children?.()}
class={cn(buttonVariants({ variant, size, className }))} </a>
{href}
{...restProps}
>
{@render children?.()}
</a>
{:else} {:else}
<button <button
bind:this={ref} bind:this={ref}
class={cn(buttonVariants({ variant, size, className }))} class={cn(buttonVariants({ variant, size, className }))}
{type} {type}
{...restProps} {...restProps}
> >
{@render children?.()} {@render children?.()}
</button> </button>
{/if} {/if}

26
src/lib/components/ui/button/index.ts
View File

@ -1,17 +1,17 @@
import Root, { import Root, {
type ButtonProps, type ButtonProps,
type ButtonSize, type ButtonSize,
type ButtonVariant, type ButtonVariant,
buttonVariants, buttonVariants,
} from "./button.svelte"; } from './button.svelte';
export { export {
Root, Root,
type ButtonProps as Props, type ButtonProps as Props,
// //
Root as Button, Root as Button,
buttonVariants, buttonVariants,
type ButtonProps, type ButtonProps,
type ButtonSize, type ButtonSize,
type ButtonVariant, type ButtonVariant,
}; };

56
src/lib/components/ui/checkbox/checkbox.svelte
View File

@ -1,35 +1,35 @@
<script lang="ts"> <script lang="ts">
import { Checkbox as CheckboxPrimitive, type WithoutChildrenOrChild } from "bits-ui"; import { Checkbox as CheckboxPrimitive, type WithoutChildrenOrChild } from 'bits-ui';
import Check from "@lucide/svelte/icons/check"; import Check from '@lucide/svelte/icons/check';
import Minus from "@lucide/svelte/icons/minus"; import Minus from '@lucide/svelte/icons/minus';
import { cn } from "$lib/utils.js"; import { cn } from '$lib/utils.js';
let { let {
ref = $bindable(null), ref = $bindable(null),
checked = $bindable(false), checked = $bindable(false),
indeterminate = $bindable(false), indeterminate = $bindable(false),
class: className, class: className,
...restProps ...restProps
}: WithoutChildrenOrChild<CheckboxPrimitive.RootProps> = $props(); }: WithoutChildrenOrChild<CheckboxPrimitive.RootProps> = $props();
</script> </script>
<CheckboxPrimitive.Root <CheckboxPrimitive.Root
bind:ref bind:ref
class={cn( class={cn(
"border-primary ring-offset-background focus-visible:ring-ring data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground peer box-content size-4 shrink-0 rounded-sm border focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 data-[disabled=true]:cursor-not-allowed data-[disabled=true]:opacity-50", 'border-primary ring-offset-background focus-visible:ring-ring data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground peer box-content size-4 shrink-0 rounded-sm border focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 data-[disabled=true]:cursor-not-allowed data-[disabled=true]:opacity-50',
className className
)} )}
bind:checked bind:checked
bind:indeterminate bind:indeterminate
{...restProps} {...restProps}
> >
{#snippet children({ checked, indeterminate })} {#snippet children({ checked, indeterminate })}
<div class="flex size-4 items-center justify-center text-current"> <div class="flex size-4 items-center justify-center text-current">
{#if indeterminate} {#if indeterminate}
<Minus class="size-3.5" /> <Minus class="size-3.5" />
{:else} {:else}
<Check class={cn("size-3.5", !checked && "text-transparent")} /> <Check class={cn('size-3.5', !checked && 'text-transparent')} />
{/if} {/if}
</div> </div>
{/snippet} {/snippet}
</CheckboxPrimitive.Root> </CheckboxPrimitive.Root>

8
src/lib/components/ui/checkbox/index.ts
View File

@ -1,6 +1,6 @@
import Root from "./checkbox.svelte"; import Root from './checkbox.svelte';
export { export {
Root, Root,
// //
Root as Checkbox, Root as Checkbox,
}; };

66
src/lib/components/ui/dropdown-menu/dropdown-menu-checkbox-item.svelte
View File

@ -1,40 +1,40 @@
<script lang="ts"> <script lang="ts">
import { DropdownMenu as DropdownMenuPrimitive, type WithoutChildrenOrChild } from "bits-ui"; import { DropdownMenu as DropdownMenuPrimitive, type WithoutChildrenOrChild } from 'bits-ui';
import Check from "lucide-svelte/icons/check"; import Check from 'lucide-svelte/icons/check';
import Minus from "lucide-svelte/icons/minus"; import Minus from 'lucide-svelte/icons/minus';
import { cn } from "$lib/utils.js"; import { cn } from '$lib/utils.js';
import type { Snippet } from "svelte"; import type { Snippet } from 'svelte';
let { let {
ref = $bindable(null), ref = $bindable(null),
checked = $bindable(false), checked = $bindable(false),
indeterminate = $bindable(false), indeterminate = $bindable(false),
class: className, class: className,
children: childrenProp, children: childrenProp,
...restProps ...restProps
}: WithoutChildrenOrChild<DropdownMenuPrimitive.CheckboxItemProps> & { }: WithoutChildrenOrChild<DropdownMenuPrimitive.CheckboxItemProps> & {
children?: Snippet; children?: Snippet;
} = $props(); } = $props();
</script> </script>
<DropdownMenuPrimitive.CheckboxItem <DropdownMenuPrimitive.CheckboxItem
bind:ref bind:ref
bind:checked bind:checked
bind:indeterminate bind:indeterminate
class={cn( class={cn(
"data-[highlighted]:bg-accent data-[highlighted]:text-accent-foreground relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50", 'data-[highlighted]:bg-accent data-[highlighted]:text-accent-foreground relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50',
className className
)} )}
{...restProps} {...restProps}
> >
{#snippet children({ checked, indeterminate })} {#snippet children({ checked, indeterminate })}
<span class="absolute left-2 flex size-3.5 items-center justify-center"> <span class="absolute left-2 flex size-3.5 items-center justify-center">
{#if indeterminate} {#if indeterminate}
<Minus class="size-4" /> <Minus class="size-4" />
{:else} {:else}
<Check class={cn("size-4", !checked && "text-transparent")} /> <Check class={cn('size-4', !checked && 'text-transparent')} />
{/if} {/if}
</span> </span>
{@render childrenProp?.()} {@render childrenProp?.()}
{/snippet} {/snippet}
</DropdownMenuPrimitive.CheckboxItem> </DropdownMenuPrimitive.CheckboxItem>

40
src/lib/components/ui/dropdown-menu/dropdown-menu-content.svelte
View File

@ -1,26 +1,26 @@
<script lang="ts"> <script lang="ts">
import { cn } from "$lib/utils.js"; import { cn } from '$lib/utils.js';
import { DropdownMenu as DropdownMenuPrimitive } from "bits-ui"; import { DropdownMenu as DropdownMenuPrimitive } from 'bits-ui';
let { let {
ref = $bindable(null), ref = $bindable(null),
sideOffset = 4, sideOffset = 4,
portalProps, portalProps,
class: className, class: className,
...restProps ...restProps
}: DropdownMenuPrimitive.ContentProps & { }: DropdownMenuPrimitive.ContentProps & {
portalProps?: DropdownMenuPrimitive.PortalProps; portalProps?: DropdownMenuPrimitive.PortalProps;
} = $props(); } = $props();
</script> </script>
<DropdownMenuPrimitive.Portal {...portalProps}> <DropdownMenuPrimitive.Portal {...portalProps}>
<DropdownMenuPrimitive.Content <DropdownMenuPrimitive.Content
bind:ref bind:ref
{sideOffset} {sideOffset}
class={cn( class={cn(
"bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 min-w-[8rem] overflow-hidden rounded-md border p-1 shadow-md outline-none", 'bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 min-w-[8rem] overflow-hidden rounded-md border p-1 shadow-md outline-none',
className className
)} )}
{...restProps} {...restProps}
/> />
</DropdownMenuPrimitive.Portal> </DropdownMenuPrimitive.Portal>

26
src/lib/components/ui/dropdown-menu/dropdown-menu-group-heading.svelte
View File

@ -1,19 +1,19 @@
<script lang="ts"> <script lang="ts">
import { DropdownMenu as DropdownMenuPrimitive } from "bits-ui"; import { DropdownMenu as DropdownMenuPrimitive } from 'bits-ui';
import { cn } from "$lib/utils.js"; import { cn } from '$lib/utils.js';
let { let {
ref = $bindable(null), ref = $bindable(null),
class: className, class: className,
inset, inset,
...restProps ...restProps
}: DropdownMenuPrimitive.GroupHeadingProps & { }: DropdownMenuPrimitive.GroupHeadingProps & {
inset?: boolean; inset?: boolean;
} = $props(); } = $props();
</script> </script>
<DropdownMenuPrimitive.GroupHeading <DropdownMenuPrimitive.GroupHeading
bind:ref bind:ref
class={cn("px-2 py-1.5 text-sm font-semibold", inset && "pl-8", className)} class={cn('px-2 py-1.5 text-sm font-semibold', inset && 'pl-8', className)}
{...restProps} {...restProps}
/> />

34
src/lib/components/ui/dropdown-menu/dropdown-menu-item.svelte
View File

@ -1,23 +1,23 @@
<script lang="ts"> <script lang="ts">
import { cn } from "$lib/utils.js"; import { cn } from '$lib/utils.js';
import { DropdownMenu as DropdownMenuPrimitive } from "bits-ui"; import { DropdownMenu as DropdownMenuPrimitive } from 'bits-ui';
let { let {
ref = $bindable(null), ref = $bindable(null),
class: className, class: className,
inset, inset,
...restProps ...restProps
}: DropdownMenuPrimitive.ItemProps & { }: DropdownMenuPrimitive.ItemProps & {
inset?: boolean; inset?: boolean;
} = $props(); } = $props();
</script> </script>
<DropdownMenuPrimitive.Item <DropdownMenuPrimitive.Item
bind:ref bind:ref
class={cn( class={cn(
"data-[highlighted]:bg-accent data-[highlighted]:text-accent-foreground relative flex cursor-default select-none items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-none transition-colors data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0", 'data-[highlighted]:bg-accent data-[highlighted]:text-accent-foreground relative flex cursor-default select-none items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-none transition-colors data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0',
inset && "pl-8", inset && 'pl-8',
className className
)} )}
{...restProps} {...restProps}
/> />

32
src/lib/components/ui/dropdown-menu/dropdown-menu-label.svelte
View File

@ -1,23 +1,23 @@
<script lang="ts"> <script lang="ts">
import { cn } from "$lib/utils.js"; import { cn } from '$lib/utils.js';
import { type WithElementRef } from "bits-ui"; import { type WithElementRef } from 'bits-ui';
import type { HTMLAttributes } from "svelte/elements"; import type { HTMLAttributes } from 'svelte/elements';
let { let {
ref = $bindable(null), ref = $bindable(null),
class: className, class: className,
inset, inset,
children, children,
...restProps ...restProps
}: WithElementRef<HTMLAttributes<HTMLDivElement>> & { }: WithElementRef<HTMLAttributes<HTMLDivElement>> & {
inset?: boolean; inset?: boolean;
} = $props(); } = $props();
</script> </script>
<div <div
bind:this={ref} bind:this={ref}
class={cn("px-2 py-1.5 text-sm font-semibold", inset && "pl-8", className)} class={cn('px-2 py-1.5 text-sm font-semibold', inset && 'pl-8', className)}
{...restProps} {...restProps}
> >
{@render children?.()} {@render children?.()}
</div> </div>

46
src/lib/components/ui/dropdown-menu/dropdown-menu-radio-item.svelte
View File

@ -1,30 +1,30 @@
<script lang="ts"> <script lang="ts">
import { DropdownMenu as DropdownMenuPrimitive, type WithoutChild } from "bits-ui"; import { DropdownMenu as DropdownMenuPrimitive, type WithoutChild } from 'bits-ui';
import Circle from "lucide-svelte/icons/circle"; import Circle from 'lucide-svelte/icons/circle';
import { cn } from "$lib/utils.js"; import { cn } from '$lib/utils.js';
let { let {
ref = $bindable(null), ref = $bindable(null),
class: className, class: className,
children: childrenProp, children: childrenProp,
...restProps ...restProps
}: WithoutChild<DropdownMenuPrimitive.RadioItemProps> = $props(); }: WithoutChild<DropdownMenuPrimitive.RadioItemProps> = $props();
</script> </script>
<DropdownMenuPrimitive.RadioItem <DropdownMenuPrimitive.RadioItem
bind:ref bind:ref
class={cn( class={cn(
"data-[highlighted]:bg-accent data-[highlighted]:text-accent-foreground relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50", 'data-[highlighted]:bg-accent data-[highlighted]:text-accent-foreground relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50',
className className
)} )}
{...restProps} {...restProps}
> >
{#snippet children({ checked })} {#snippet children({ checked })}
<span class="absolute left-2 flex size-3.5 items-center justify-center"> <span class="absolute left-2 flex size-3.5 items-center justify-center">
{#if checked} {#if checked}
<Circle class="size-2 fill-current" /> <Circle class="size-2 fill-current" />
{/if} {/if}
</span> </span>
{@render childrenProp?.({ checked })} {@render childrenProp?.({ checked })}
{/snippet} {/snippet}
</DropdownMenuPrimitive.RadioItem> </DropdownMenuPrimitive.RadioItem>

20
src/lib/components/ui/dropdown-menu/dropdown-menu-separator.svelte
View File

@ -1,16 +1,16 @@
<script lang="ts"> <script lang="ts">
import { DropdownMenu as DropdownMenuPrimitive } from "bits-ui"; import { DropdownMenu as DropdownMenuPrimitive } from 'bits-ui';
import { cn } from "$lib/utils.js"; import { cn } from '$lib/utils.js';
let { let {
ref = $bindable(null), ref = $bindable(null),
class: className, class: className,
...restProps ...restProps
}: DropdownMenuPrimitive.SeparatorProps = $props(); }: DropdownMenuPrimitive.SeparatorProps = $props();
</script> </script>
<DropdownMenuPrimitive.Separator <DropdownMenuPrimitive.Separator
bind:ref bind:ref
class={cn("bg-muted -mx-1 my-1 h-px", className)} class={cn('bg-muted -mx-1 my-1 h-px', className)}
{...restProps} {...restProps}
/> />

26
src/lib/components/ui/dropdown-menu/dropdown-menu-shortcut.svelte
View File

@ -1,20 +1,20 @@
<script lang="ts"> <script lang="ts">
import type { HTMLAttributes } from "svelte/elements"; import type { HTMLAttributes } from 'svelte/elements';
import { type WithElementRef } from "bits-ui"; import { type WithElementRef } from 'bits-ui';
import { cn } from "$lib/utils.js"; import { cn } from '$lib/utils.js';
let { let {
ref = $bindable(null), ref = $bindable(null),
class: className, class: className,
children, children,
...restProps ...restProps
}: WithElementRef<HTMLAttributes<HTMLSpanElement>> = $props(); }: WithElementRef<HTMLAttributes<HTMLSpanElement>> = $props();
</script> </script>
<span <span
bind:this={ref} bind:this={ref}
class={cn("ml-auto text-xs tracking-widest opacity-60", className)} class={cn('ml-auto text-xs tracking-widest opacity-60', className)}
{...restProps} {...restProps}
> >
{@render children?.()} {@render children?.()}
</span> </span>

26
src/lib/components/ui/dropdown-menu/dropdown-menu-sub-content.svelte
View File

@ -1,19 +1,19 @@
<script lang="ts"> <script lang="ts">
import { DropdownMenu as DropdownMenuPrimitive } from "bits-ui"; import { DropdownMenu as DropdownMenuPrimitive } from 'bits-ui';
import { cn } from "$lib/utils.js"; import { cn } from '$lib/utils.js';
let { let {
ref = $bindable(null), ref = $bindable(null),
class: className, class: className,
...restProps ...restProps
}: DropdownMenuPrimitive.SubContentProps = $props(); }: DropdownMenuPrimitive.SubContentProps = $props();
</script> </script>
<DropdownMenuPrimitive.SubContent <DropdownMenuPrimitive.SubContent
bind:ref bind:ref
class={cn( class={cn(
"bg-popover text-popover-foreground z-50 min-w-[8rem] rounded-md border p-1 shadow-lg focus:outline-none", 'bg-popover text-popover-foreground z-50 min-w-[8rem] rounded-md border p-1 shadow-lg focus:outline-none',
className className
)} )}
{...restProps} {...restProps}
/> />

42
src/lib/components/ui/dropdown-menu/dropdown-menu-sub-trigger.svelte
View File

@ -1,28 +1,28 @@
<script lang="ts"> <script lang="ts">
import { DropdownMenu as DropdownMenuPrimitive } from "bits-ui"; import { DropdownMenu as DropdownMenuPrimitive } from 'bits-ui';
import ChevronRight from "lucide-svelte/icons/chevron-right"; import ChevronRight from 'lucide-svelte/icons/chevron-right';
import { cn } from "$lib/utils.js"; import { cn } from '$lib/utils.js';
let { let {
ref = $bindable(null), ref = $bindable(null),
class: className, class: className,
inset, inset,
children, children,
...restProps ...restProps
}: DropdownMenuPrimitive.SubTriggerProps & { }: DropdownMenuPrimitive.SubTriggerProps & {
inset?: boolean; inset?: boolean;
} = $props(); } = $props();
</script> </script>
<DropdownMenuPrimitive.SubTrigger <DropdownMenuPrimitive.SubTrigger
bind:ref bind:ref
class={cn( class={cn(
"data-[highlighted]:bg-accent data-[state=open]:bg-accent flex cursor-default select-none items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-none [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0", 'data-[highlighted]:bg-accent data-[state=open]:bg-accent flex cursor-default select-none items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-none [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0',
inset && "pl-8", inset && 'pl-8',
className className
)} )}
{...restProps} {...restProps}
> >
{@render children?.()} {@render children?.()}
<ChevronRight class="ml-auto" /> <ChevronRight class="ml-auto" />
</DropdownMenuPrimitive.SubTrigger> </DropdownMenuPrimitive.SubTrigger>

82
src/lib/components/ui/dropdown-menu/index.ts
View File

@ -1,14 +1,14 @@
import { DropdownMenu as DropdownMenuPrimitive } from "bits-ui"; import { DropdownMenu as DropdownMenuPrimitive } from 'bits-ui';
import CheckboxItem from "./dropdown-menu-checkbox-item.svelte"; import CheckboxItem from './dropdown-menu-checkbox-item.svelte';
import Content from "./dropdown-menu-content.svelte"; import Content from './dropdown-menu-content.svelte';
import GroupHeading from "./dropdown-menu-group-heading.svelte"; import GroupHeading from './dropdown-menu-group-heading.svelte';
import Item from "./dropdown-menu-item.svelte"; import Item from './dropdown-menu-item.svelte';
import Label from "./dropdown-menu-label.svelte"; import Label from './dropdown-menu-label.svelte';
import RadioItem from "./dropdown-menu-radio-item.svelte"; import RadioItem from './dropdown-menu-radio-item.svelte';
import Separator from "./dropdown-menu-separator.svelte"; import Separator from './dropdown-menu-separator.svelte';
import Shortcut from "./dropdown-menu-shortcut.svelte"; import Shortcut from './dropdown-menu-shortcut.svelte';
import SubContent from "./dropdown-menu-sub-content.svelte"; import SubContent from './dropdown-menu-sub-content.svelte';
import SubTrigger from "./dropdown-menu-sub-trigger.svelte"; import SubTrigger from './dropdown-menu-sub-trigger.svelte';
const Sub = DropdownMenuPrimitive.Sub; const Sub = DropdownMenuPrimitive.Sub;
const Root = DropdownMenuPrimitive.Root; const Root = DropdownMenuPrimitive.Root;
@ -17,34 +17,34 @@ const Group = DropdownMenuPrimitive.Group;
const RadioGroup = DropdownMenuPrimitive.RadioGroup; const RadioGroup = DropdownMenuPrimitive.RadioGroup;
export { export {
CheckboxItem, CheckboxItem,
Content, Content,
Root as DropdownMenu, Root as DropdownMenu,
CheckboxItem as DropdownMenuCheckboxItem, CheckboxItem as DropdownMenuCheckboxItem,
Content as DropdownMenuContent, Content as DropdownMenuContent,
Group as DropdownMenuGroup, Group as DropdownMenuGroup,
GroupHeading as DropdownMenuGroupHeading, GroupHeading as DropdownMenuGroupHeading,
Item as DropdownMenuItem, Item as DropdownMenuItem,
Label as DropdownMenuLabel, Label as DropdownMenuLabel,
RadioGroup as DropdownMenuRadioGroup, RadioGroup as DropdownMenuRadioGroup,
RadioItem as DropdownMenuRadioItem, RadioItem as DropdownMenuRadioItem,
Separator as DropdownMenuSeparator, Separator as DropdownMenuSeparator,
Shortcut as DropdownMenuShortcut, Shortcut as DropdownMenuShortcut,
Sub as DropdownMenuSub, Sub as DropdownMenuSub,
SubContent as DropdownMenuSubContent, SubContent as DropdownMenuSubContent,
SubTrigger as DropdownMenuSubTrigger, SubTrigger as DropdownMenuSubTrigger,
Trigger as DropdownMenuTrigger, Trigger as DropdownMenuTrigger,
Group, Group,
GroupHeading, GroupHeading,
Item, Item,
Label, Label,
RadioGroup, RadioGroup,
RadioItem, RadioItem,
Root, Root,
Separator, Separator,
Shortcut, Shortcut,
Sub, Sub,
SubContent, SubContent,
SubTrigger, SubTrigger,
Trigger, Trigger,
}; };

8
src/lib/components/ui/input/index.ts
View File

@ -1,7 +1,7 @@
import Root from "./input.svelte"; import Root from './input.svelte';
export { export {
Root, Root,
// //
Root as Input, Root as Input,
}; };

32
src/lib/components/ui/input/input.svelte
View File

@ -1,22 +1,22 @@
<script lang="ts"> <script lang="ts">
import type { HTMLInputAttributes } from "svelte/elements"; import type { HTMLInputAttributes } from 'svelte/elements';
import type { WithElementRef } from "bits-ui"; import type { WithElementRef } from 'bits-ui';
import { cn } from "$lib/utils.js"; import { cn } from '$lib/utils.js';
let { let {
ref = $bindable(null), ref = $bindable(null),
value = $bindable(), value = $bindable(),
class: className, class: className,
...restProps ...restProps
}: WithElementRef<HTMLInputAttributes> = $props(); }: WithElementRef<HTMLInputAttributes> = $props();
</script> </script>
<input <input
bind:this={ref} bind:this={ref}
class={cn( class={cn(
"border-input bg-background ring-offset-background placeholder:text-muted-foreground focus-visible:ring-ring flex h-10 w-full rounded-md border px-3 py-2 text-sm file:border-0 file:bg-transparent file:text-sm file:font-medium focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50", 'border-input bg-background ring-offset-background placeholder:text-muted-foreground focus-visible:ring-ring flex h-10 w-full rounded-md border px-3 py-2 text-sm file:border-0 file:bg-transparent file:text-sm file:font-medium focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50',
className className
)} )}
bind:value bind:value
{...restProps} {...restProps}
/> />

8
src/lib/components/ui/label/index.ts
View File

@ -1,7 +1,7 @@
import Root from "./label.svelte"; import Root from './label.svelte';
export { export {
Root, Root,
// //
Root as Label, Root as Label,
}; };

26
src/lib/components/ui/label/label.svelte
View File

@ -1,19 +1,19 @@
<script lang="ts"> <script lang="ts">
import { Label as LabelPrimitive } from "bits-ui"; import { Label as LabelPrimitive } from 'bits-ui';
import { cn } from "$lib/utils.js"; import { cn } from '$lib/utils.js';
let { let {
ref = $bindable(null), ref = $bindable(null),
class: className, class: className,
...restProps ...restProps
}: LabelPrimitive.RootProps = $props(); }: LabelPrimitive.RootProps = $props();
</script> </script>
<LabelPrimitive.Root <LabelPrimitive.Root
bind:ref bind:ref
class={cn( class={cn(
"text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70", 'text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70',
className className
)} )}
{...restProps} {...restProps}
/> />

29
src/lib/components/ui/logo/logo.svelte
View File

@ -1,9 +1,9 @@
<script lang="ts"> <script lang="ts">
import ezppLogo from "../../../../assets/logo.png"; import ezppLogo from '../../../../assets/logo.png';
import { osudirect } from "@/api/osudirect"; import { osudirect } from '@/api/osudirect';
import { gameSounds, playAudio } from "@/utils"; import { gameSounds } from '@/utils';
import { BeatmapDecoder } from "osu-parsers"; import { BeatmapDecoder } from 'osu-parsers';
import { onMount } from "svelte"; import { onMount } from 'svelte';
type logoProps = { type logoProps = {
beatmapId: number; beatmapId: number;
@ -26,14 +26,12 @@
const beatmap = decoder.decodeFromString(beatmapData); const beatmap = decoder.decodeFromString(beatmapData);
console.log(beatmap); console.log(beatmap);
const audio = new Audio( const audio = new Audio(`https://osu.direct/api/media/audio/${beatmapId}`);
`https://osu.direct/api/media/audio/${beatmapId}`
);
audio.volume = 0.3; audio.volume = 0.3;
// Function to play the heartbeat sound // Function to play the heartbeat sound
const playHeartbeat = () => { const playHeartbeat = () => {
gameSounds.play("menuHeartbeat", { gameSounds.play('menuHeartbeat', {
volume: hovered ? 1 : 0.3, volume: hovered ? 1 : 0.3,
}); });
}; };
@ -60,8 +58,7 @@
window.clearInterval(lastTimeout); window.clearInterval(lastTimeout);
lastTimeout = undefined; lastTimeout = undefined;
} }
if (!lastTimeout) if (!lastTimeout) lastTimeout = window.setInterval(playHeartbeat, interval);
lastTimeout = window.setInterval(playHeartbeat, interval);
}, nextBeat); }, nextBeat);
} }
// Continue syncing // Continue syncing
@ -69,9 +66,9 @@
}; };
// Wait for audio to be ready before starting playback and syncing // Wait for audio to be ready before starting playback and syncing
audio.addEventListener("canplay", async () => { audio.addEventListener('canplay', async () => {
audio.addEventListener("play", syncHeartbeat); audio.addEventListener('play', syncHeartbeat);
audio.addEventListener("ended", async () => await audio.play()); audio.addEventListener('ended', async () => await audio.play());
await audio.play(); await audio.play();
syncHeartbeat(); syncHeartbeat();
}); });
@ -96,9 +93,9 @@
onmouseleave={() => (hovered = false)} onmouseleave={() => (hovered = false)}
onclick={() => { onclick={() => {
if (extended) { if (extended) {
gameSounds.play("menuBack"); gameSounds.play('menuBack');
} else { } else {
gameSounds.play("menuHit"); gameSounds.play('menuHit');
} }
onclick(); onclick();
}} }}

2
src/lib/components/ui/osu-cursor/OsuCursor.svelte
View File

@ -3,8 +3,6 @@
import cursor_additive from '$assets/cursor-additive.png'; import cursor_additive from '$assets/cursor-additive.png';
import { animate } from 'animejs'; import { animate } from 'animejs';
import { onMount } from 'svelte'; import { onMount } from 'svelte';
import { currentMonitor } from '@tauri-apps/api/window';
import { estimateRefreshRate } from '@/displayUtils';
import { cursorSmoothness } from '@/userSettings'; import { cursorSmoothness } from '@/userSettings';
let { smoothCursor = true }: { smoothCursor?: boolean } = $props(); let { smoothCursor = true }: { smoothCursor?: boolean } = $props();

8
src/lib/components/ui/progress/index.ts
View File

@ -1,7 +1,7 @@
import Root from "./progress.svelte"; import Root from './progress.svelte';
export { export {
Root, Root,
// //
Root as Progress, Root as Progress,
}; };

12
src/lib/components/ui/progress/progress.svelte
View File

@ -20,7 +20,9 @@
{...restProps} {...restProps}
> >
<div <div
class="bg-primary h-full w-full flex-1 transition-all {indeterminate ? 'animate-slide' : ''} rounded-lg" class="bg-primary h-full w-full flex-1 transition-all {indeterminate
? 'animate-slide'
: ''} rounded-lg"
style={`transform: translateX(-${100 - (100 * ((indeterminate ? max : value) ?? 0)) / (max ?? 1)}%);`} style={`transform: translateX(-${100 - (100 * ((indeterminate ? max : value) ?? 0)) / (max ?? 1)}%);`}
></div> ></div>
</ProgressPrimitive.Root> </ProgressPrimitive.Root>
@ -31,13 +33,13 @@
} }
@keyframes indeterminate { @keyframes indeterminate {
0%, 0%,
2%, 2%,
98%, 98%,
100% { 100% {
transform: translateX(-99%); transform: translateX(-99%);
} }
49%, 49%,
51% { 51% {
transform: translateX(99%); transform: translateX(99%);
} }
} }

54
src/lib/components/ui/select/index.ts
View File

@ -1,34 +1,34 @@
import { Select as SelectPrimitive } from "bits-ui"; import { Select as SelectPrimitive } from 'bits-ui';
import GroupHeading from "./select-group-heading.svelte"; import GroupHeading from './select-group-heading.svelte';
import Item from "./select-item.svelte"; import Item from './select-item.svelte';
import Content from "./select-content.svelte"; import Content from './select-content.svelte';
import Trigger from "./select-trigger.svelte"; import Trigger from './select-trigger.svelte';
import Separator from "./select-separator.svelte"; import Separator from './select-separator.svelte';
import ScrollDownButton from "./select-scroll-down-button.svelte"; import ScrollDownButton from './select-scroll-down-button.svelte';
import ScrollUpButton from "./select-scroll-up-button.svelte"; import ScrollUpButton from './select-scroll-up-button.svelte';
const Root = SelectPrimitive.Root; const Root = SelectPrimitive.Root;
const Group = SelectPrimitive.Group; const Group = SelectPrimitive.Group;
export { export {
Root, Root,
Group, Group,
GroupHeading, GroupHeading,
Item, Item,
Content, Content,
Trigger, Trigger,
Separator, Separator,
ScrollDownButton, ScrollDownButton,
ScrollUpButton, ScrollUpButton,
// //
Root as Select, Root as Select,
Group as SelectGroup, Group as SelectGroup,
GroupHeading as SelectGroupHeading, GroupHeading as SelectGroupHeading,
Item as SelectItem, Item as SelectItem,
Content as SelectContent, Content as SelectContent,
Trigger as SelectTrigger, Trigger as SelectTrigger,
Separator as SelectSeparator, Separator as SelectSeparator,
ScrollDownButton as SelectScrollDownButton, ScrollDownButton as SelectScrollDownButton,
ScrollUpButton as SelectScrollUpButton, ScrollUpButton as SelectScrollUpButton,
}; };

66
src/lib/components/ui/select/select-content.svelte
View File

@ -1,39 +1,39 @@
<script lang="ts"> <script lang="ts">
import { Select as SelectPrimitive, type WithoutChild } from "bits-ui"; import { Select as SelectPrimitive, type WithoutChild } from 'bits-ui';
import SelectScrollUpButton from "./select-scroll-up-button.svelte"; import SelectScrollUpButton from './select-scroll-up-button.svelte';
import SelectScrollDownButton from "./select-scroll-down-button.svelte"; import SelectScrollDownButton from './select-scroll-down-button.svelte';
import { cn } from "$lib/utils.js"; import { cn } from '$lib/utils.js';
let { let {
ref = $bindable(null), ref = $bindable(null),
class: className, class: className,
sideOffset = 4, sideOffset = 4,
portalProps, portalProps,
children, children,
...restProps ...restProps
}: WithoutChild<SelectPrimitive.ContentProps> & { }: WithoutChild<SelectPrimitive.ContentProps> & {
portalProps?: SelectPrimitive.PortalProps; portalProps?: SelectPrimitive.PortalProps;
} = $props(); } = $props();
</script> </script>
<SelectPrimitive.Portal {...portalProps}> <SelectPrimitive.Portal {...portalProps}>
<SelectPrimitive.Content <SelectPrimitive.Content
bind:ref bind:ref
{sideOffset} {sideOffset}
class={cn( class={cn(
"data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 bg-popover text-popover-foreground relative z-50 max-h-96 min-w-[8rem] overflow-hidden rounded-md border shadow-md data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1", 'data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 bg-popover text-popover-foreground relative z-50 max-h-96 min-w-[8rem] overflow-hidden rounded-md border shadow-md data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1',
className className
)} )}
{...restProps} {...restProps}
> >
<SelectScrollUpButton /> <SelectScrollUpButton />
<SelectPrimitive.Viewport <SelectPrimitive.Viewport
class={cn( class={cn(
"h-[var(--bits-select-anchor-height)] w-full min-w-[var(--bits-select-anchor-width)] p-1" 'h-[var(--bits-select-anchor-height)] w-full min-w-[var(--bits-select-anchor-width)] p-1'
)} )}
> >
{@render children?.()} {@render children?.()}
</SelectPrimitive.Viewport> </SelectPrimitive.Viewport>
<SelectScrollDownButton /> <SelectScrollDownButton />
</SelectPrimitive.Content> </SelectPrimitive.Content>
</SelectPrimitive.Portal> </SelectPrimitive.Portal>

20
src/lib/components/ui/select/select-group-heading.svelte
View File

@ -1,16 +1,16 @@
<script lang="ts"> <script lang="ts">
import { Select as SelectPrimitive } from "bits-ui"; import { Select as SelectPrimitive } from 'bits-ui';
import { cn } from "$lib/utils.js"; import { cn } from '$lib/utils.js';
let { let {
ref = $bindable(null), ref = $bindable(null),
class: className, class: className,
...restProps ...restProps
}: SelectPrimitive.GroupHeadingProps = $props(); }: SelectPrimitive.GroupHeadingProps = $props();
</script> </script>
<SelectPrimitive.GroupHeading <SelectPrimitive.GroupHeading
bind:ref bind:ref
class={cn("py-1.5 pl-8 pr-2 text-sm font-semibold", className)} class={cn('py-1.5 pl-8 pr-2 text-sm font-semibold', className)}
{...restProps} {...restProps}
/> />

60
src/lib/components/ui/select/select-item.svelte
View File

@ -1,37 +1,37 @@
<script lang="ts"> <script lang="ts">
import Check from "@lucide/svelte/icons/check"; import Check from '@lucide/svelte/icons/check';
import { Select as SelectPrimitive, type WithoutChild } from "bits-ui"; import { Select as SelectPrimitive, type WithoutChild } from 'bits-ui';
import { cn } from "$lib/utils.js"; import { cn } from '$lib/utils.js';
let { let {
ref = $bindable(null), ref = $bindable(null),
class: className, class: className,
value, value,
label, label,
children: childrenProp, children: childrenProp,
...restProps ...restProps
}: WithoutChild<SelectPrimitive.ItemProps> = $props(); }: WithoutChild<SelectPrimitive.ItemProps> = $props();
</script> </script>
<SelectPrimitive.Item <SelectPrimitive.Item
bind:ref bind:ref
{value} {value}
class={cn( class={cn(
"data-[highlighted]:bg-primary-800/30 data-[highlighted]:text-accent-foreground relative flex w-full cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50", 'data-[highlighted]:bg-primary-800/30 data-[highlighted]:text-accent-foreground relative flex w-full cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50',
className className
)} )}
{...restProps} {...restProps}
> >
{#snippet children({ selected, highlighted })} {#snippet children({ selected, highlighted })}
<span class="absolute left-2 flex size-3.5 items-center justify-center"> <span class="absolute left-2 flex size-3.5 items-center justify-center">
{#if selected} {#if selected}
<Check class="size-4" /> <Check class="size-4" />
{/if} {/if}
</span> </span>
{#if childrenProp} {#if childrenProp}
{@render childrenProp({ selected, highlighted })} {@render childrenProp({ selected, highlighted })}
{:else} {:else}
{label || value} {label || value}
{/if} {/if}
{/snippet} {/snippet}
</SelectPrimitive.Item> </SelectPrimitive.Item>

24
src/lib/components/ui/select/select-scroll-down-button.svelte
View File

@ -1,19 +1,19 @@
<script lang="ts"> <script lang="ts">
import ChevronDown from "@lucide/svelte/icons/chevron-down"; import ChevronDown from '@lucide/svelte/icons/chevron-down';
import { Select as SelectPrimitive, type WithoutChildrenOrChild } from "bits-ui"; import { Select as SelectPrimitive, type WithoutChildrenOrChild } from 'bits-ui';
import { cn } from "$lib/utils.js"; import { cn } from '$lib/utils.js';
let { let {
ref = $bindable(null), ref = $bindable(null),
class: className, class: className,
...restProps ...restProps
}: WithoutChildrenOrChild<SelectPrimitive.ScrollDownButtonProps> = $props(); }: WithoutChildrenOrChild<SelectPrimitive.ScrollDownButtonProps> = $props();
</script> </script>
<SelectPrimitive.ScrollDownButton <SelectPrimitive.ScrollDownButton
bind:ref bind:ref
class={cn("flex cursor-default items-center justify-center py-1", className)} class={cn('flex cursor-default items-center justify-center py-1', className)}
{...restProps} {...restProps}
> >
<ChevronDown class="size-4" /> <ChevronDown class="size-4" />
</SelectPrimitive.ScrollDownButton> </SelectPrimitive.ScrollDownButton>

24
src/lib/components/ui/select/select-scroll-up-button.svelte
View File

@ -1,19 +1,19 @@
<script lang="ts"> <script lang="ts">
import ChevronUp from "@lucide/svelte/icons/chevron-up"; import ChevronUp from '@lucide/svelte/icons/chevron-up';
import { Select as SelectPrimitive, type WithoutChildrenOrChild } from "bits-ui"; import { Select as SelectPrimitive, type WithoutChildrenOrChild } from 'bits-ui';
import { cn } from "$lib/utils.js"; import { cn } from '$lib/utils.js';
let { let {
ref = $bindable(null), ref = $bindable(null),
class: className, class: className,
...restProps ...restProps
}: WithoutChildrenOrChild<SelectPrimitive.ScrollUpButtonProps> = $props(); }: WithoutChildrenOrChild<SelectPrimitive.ScrollUpButtonProps> = $props();
</script> </script>
<SelectPrimitive.ScrollUpButton <SelectPrimitive.ScrollUpButton
bind:ref bind:ref
class={cn("flex cursor-default items-center justify-center py-1", className)} class={cn('flex cursor-default items-center justify-center py-1', className)}
{...restProps} {...restProps}
> >
<ChevronUp class="size-4" /> <ChevronUp class="size-4" />
</SelectPrimitive.ScrollUpButton> </SelectPrimitive.ScrollUpButton>

18
src/lib/components/ui/select/select-separator.svelte
View File

@ -1,13 +1,13 @@
<script lang="ts"> <script lang="ts">
import type { Separator as SeparatorPrimitive } from "bits-ui"; import type { Separator as SeparatorPrimitive } from 'bits-ui';
import { Separator } from "$lib/components/ui/separator/index.js"; import { Separator } from '$lib/components/ui/separator/index.js';
import { cn } from "$lib/utils.js"; import { cn } from '$lib/utils.js';
let { let {
ref = $bindable(null), ref = $bindable(null),
class: className, class: className,
...restProps ...restProps
}: SeparatorPrimitive.RootProps = $props(); }: SeparatorPrimitive.RootProps = $props();
</script> </script>
<Separator bind:ref class={cn("bg-muted -mx-1 my-1 h-px", className)} {...restProps} /> <Separator bind:ref class={cn('bg-muted -mx-1 my-1 h-px', className)} {...restProps} />

34
src/lib/components/ui/select/select-trigger.svelte
View File

@ -1,24 +1,24 @@
<script lang="ts"> <script lang="ts">
import { Select as SelectPrimitive, type WithoutChild } from "bits-ui"; import { Select as SelectPrimitive, type WithoutChild } from 'bits-ui';
import ChevronDown from "@lucide/svelte/icons/chevron-down"; import ChevronDown from '@lucide/svelte/icons/chevron-down';
import { cn } from "$lib/utils.js"; import { cn } from '$lib/utils.js';
let { let {
ref = $bindable(null), ref = $bindable(null),
class: className, class: className,
children, children,
...restProps ...restProps
}: WithoutChild<SelectPrimitive.TriggerProps> = $props(); }: WithoutChild<SelectPrimitive.TriggerProps> = $props();
</script> </script>
<SelectPrimitive.Trigger <SelectPrimitive.Trigger
bind:ref bind:ref
class={cn( class={cn(
"border-input bg-background ring-offset-background data-[placeholder]:text-muted-foreground focus:ring-ring flex h-10 w-full items-center justify-between rounded-md border px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 [&>span]:line-clamp-1", 'border-input bg-background ring-offset-background data-[placeholder]:text-muted-foreground focus:ring-ring flex h-10 w-full items-center justify-between rounded-md border px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 [&>span]:line-clamp-1',
className className
)} )}
{...restProps} {...restProps}
> >
{@render children?.()} {@render children?.()}
<ChevronDown class="size-4 opacity-50" /> <ChevronDown class="size-4 opacity-50" />
</SelectPrimitive.Trigger> </SelectPrimitive.Trigger>

8
src/lib/components/ui/separator/index.ts
View File

@ -1,7 +1,7 @@
import Root from "./separator.svelte"; import Root from './separator.svelte';
export { export {
Root, Root,
// //
Root as Separator, Root as Separator,
}; };

32
src/lib/components/ui/separator/separator.svelte
View File

@ -1,22 +1,22 @@
<script lang="ts"> <script lang="ts">
import { Separator as SeparatorPrimitive } from "bits-ui"; import { Separator as SeparatorPrimitive } from 'bits-ui';
import { cn } from "$lib/utils.js"; import { cn } from '$lib/utils.js';
let { let {
ref = $bindable(null), ref = $bindable(null),
class: className, class: className,
orientation = "horizontal", orientation = 'horizontal',
...restProps ...restProps
}: SeparatorPrimitive.RootProps = $props(); }: SeparatorPrimitive.RootProps = $props();
</script> </script>
<SeparatorPrimitive.Root <SeparatorPrimitive.Root
bind:ref bind:ref
class={cn( class={cn(
"bg-border shrink-0", 'bg-border shrink-0',
orientation === "horizontal" ? "h-[1px] w-full" : "min-h-full w-[1px]", orientation === 'horizontal' ? 'h-[1px] w-full' : 'min-h-full w-[1px]',
className className
)} )}
{orientation} {orientation}
{...restProps} {...restProps}
/> />

2
src/lib/components/ui/sonner/index.ts
View File

@ -1 +1 @@
export { default as Toaster } from "./sonner.svelte"; export { default as Toaster } from './sonner.svelte';

1
src/lib/config.ts
View File

@ -45,6 +45,7 @@ export class Config {
) as Record<string, unknown>; ) as Record<string, unknown>;
this.config = decryptedJSON; this.config = decryptedJSON;
} catch (err) { } catch (err) {
console.log(err);
this.config = {}; this.config = {};
await this.save(); await this.save();
} }

2
src/lib/displayUtils.ts
View File

@ -1,6 +1,6 @@
export function estimateRefreshRate(): Promise<number> { export function estimateRefreshRate(): Promise<number> {
return new Promise((resolve) => { return new Promise((resolve) => {
let last = performance.now(); const last = performance.now();
let frames = 0; let frames = 0;
function loop() { function loop() {

2
src/lib/global.ts
View File

@ -22,7 +22,7 @@ export const skins = writable<number | undefined>(undefined);
export const osuStream = writable<string | undefined>(undefined); export const osuStream = writable<string | undefined>(undefined);
export const osuBuild = writable<string | undefined>(undefined); export const osuBuild = writable<string | undefined>(undefined);
export const currentSkin = writable<string>(""); export const currentSkin = writable<string>('');
let updateValues = true; let updateValues = true;
launching.subscribe((val) => (updateValues = !val)); launching.subscribe((val) => (updateValues = !val));

3
src/lib/osuUtil.ts
View File

@ -70,7 +70,8 @@ export const getSkin = async (folder: string) => {
}; };
export const runUpdater = async (folder: string) => await invoke('run_osu_updater', { folder }); export const runUpdater = async (folder: string) => await invoke('run_osu_updater', { folder });
export const runOsu = async (folder: string, patch: boolean) => await invoke('run_osu', { folder, patch }); export const runOsu = async (folder: string, patch: boolean) =>
await invoke('run_osu', { folder, patch });
export const getEZPPLauncherUpdateFiles = async (folder: string) => { export const getEZPPLauncherUpdateFiles = async (folder: string) => {
const result = await invoke('get_ezpp_launcher_update_files', { folder, updateUrl }); const result = await invoke('get_ezpp_launcher_update_files', { folder, updateUrl });

2
src/lib/userAuthentication.ts
View File

@ -2,5 +2,5 @@ import { writable } from 'svelte/store';
import { Config } from './config'; import { Config } from './config';
import type { EZPPUser } from './types'; import type { EZPPUser } from './types';
export const userAuth = writable<Config>(new Config("user_auth", true)); export const userAuth = writable<Config>(new Config('user_auth', true));
export const currentUser = writable<EZPPUser | undefined>(undefined); export const currentUser = writable<EZPPUser | undefined>(undefined);

10
src/pages/Launch.svelte
View File

@ -144,7 +144,7 @@
} }
}; };
const launch = async (offline: boolean) => { const launch = async () => {
const osuRunning = await isOsuRunning(); const osuRunning = await isOsuRunning();
if (osuRunning) { if (osuRunning) {
toast.error('Hold on a second!', { toast.error('Hold on a second!', {
@ -428,7 +428,7 @@
</div> </div>
</Select.Trigger> </Select.Trigger>
<Select.Content class="bg-theme-950 border border-theme-900 rounded-lg"> <Select.Content class="bg-theme-950 border border-theme-900 rounded-lg">
{#each validModeTypeCombinationsSorted as gamemode} {#each validModeTypeCombinationsSorted as gamemode (gamemode)}
{@const gamemod = getModeAndTypeFromGamemode(gamemode)} {@const gamemod = getModeAndTypeFromGamemode(gamemode)}
<Select.Item value={gamemode.toFixed()}> <Select.Item value={gamemode.toFixed()}>
<div class="flex flex-row gap-2 items-center"> <div class="flex flex-row gap-2 items-center">
@ -726,11 +726,11 @@
</div> </div>
<Button <Button
size="lg" size="lg"
disabled={$launching || $osuInstallationPath === ''} disabled={$launching || $osuInstallationPath === '' || $serverConnectionFails > 1}
onclick={() => launch($serverConnectionFails > 1)} onclick={launch}
> >
<Play /> <Play />
Launch {$serverConnectionFails > 1 ? 'offline' : ''} {$serverConnectionFails > 1 ? 'No connection' : 'Launch'}
</Button> </Button>
</div> </div>
<div <div

12
svelte.config.js
View File

@ -1,8 +1,8 @@
// Tauri doesn't have a Node.js server to do proper SSR // Tauri doesn't have a Node.js server to do proper SSR
// so we will use adapter-static to prerender the app (SSG) // so we will use adapter-static to prerender the app (SSG)
// See: https://v2.tauri.app/start/frontend/sveltekit/ for more info // See: https://v2.tauri.app/start/frontend/sveltekit/ for more info
import adapter from "@sveltejs/adapter-static"; import adapter from '@sveltejs/adapter-static';
import { vitePreprocess } from "@sveltejs/vite-plugin-svelte"; import { vitePreprocess } from '@sveltejs/vite-plugin-svelte';
/** @type {import('@sveltejs/kit').Config} */ /** @type {import('@sveltejs/kit').Config} */
const config = { const config = {
@ -10,10 +10,10 @@ const config = {
kit: { kit: {
adapter: adapter(), adapter: adapter(),
alias: { alias: {
'@/*': "./src/lib/*", '@/*': './src/lib/*',
"$lib/*": "./src/lib/*", '$lib/*': './src/lib/*',
"$assets/*": "./src/assets/*" '$assets/*': './src/assets/*',
} },
}, },
}; };

4
tsconfig.json
View File

@ -9,8 +9,8 @@
"skipLibCheck": true, "skipLibCheck": true,
"sourceMap": true, "sourceMap": true,
"strict": true, "strict": true,
"moduleResolution": "bundler", "moduleResolution": "bundler"
}, }
// Path aliases are handled by https://kit.svelte.dev/docs/configuration#alias // Path aliases are handled by https://kit.svelte.dev/docs/configuration#alias
// except $lib which is handled by https://kit.svelte.dev/docs/configuration#files // except $lib which is handled by https://kit.svelte.dev/docs/configuration#files
// //

8
vite.config.js
View File

@ -1,5 +1,5 @@
import { defineConfig } from "vite"; import { defineConfig } from 'vite';
import { sveltekit } from "@sveltejs/kit/vite"; import { sveltekit } from '@sveltejs/kit/vite';
import devtoolsJson from 'vite-plugin-devtools-json'; import devtoolsJson from 'vite-plugin-devtools-json';
// @ts-expect-error process is a nodejs global // @ts-expect-error process is a nodejs global
@ -20,14 +20,14 @@ export default defineConfig(async () => ({
host: host || false, host: host || false,
hmr: host hmr: host
? { ? {
protocol: "ws", protocol: 'ws',
host, host,
port: 1421, port: 1421,
} }
: undefined, : undefined,
watch: { watch: {
// 3. tell vite to ignore watching `src-tauri` // 3. tell vite to ignore watching `src-tauri`
ignored: ["**/src-tauri/**"], ignored: ['**/src-tauri/**'],
}, },
}, },
})); }));