Switch path alias from @ to ~, add Prettier with organize-imports

frontend/src/components/layout/footer.tsx

@@ -1,4 +1,4 @@
-import type { Globals, Menu } from '@/lib/types'
+import type { Globals, Menu } from '~/lib/types'
 
 type Props = {
   globals: Globals

frontend/src/components/layout/header.tsx

@@ -1,5 +1,5 @@
 import { Link } from '@tanstack/react-router'
-import type { Globals, Menu } from '@/lib/types'
+import type { Globals, Menu } from '~/lib/types'
 import { ThemeToggle } from './theme-toggle'
 
 type Props = {

frontend/src/components/layout/shell.tsx

@@ -1,7 +1,7 @@
 import { useSuspenseQuery } from '@tanstack/react-query'
-import { globalsQuery, menusQuery } from '@/lib/queries'
-import { Header } from './header'
+import { globalsQuery, menusQuery } from '~/lib/queries'
 import { Footer } from './footer'
+import { Header } from './header'
 
 export function Shell({ children }: { children: React.ReactNode }) {
   const { data: globals } = useSuspenseQuery(globalsQuery)

frontend/src/components/layout/theme-toggle.tsx

@@ -1,6 +1,6 @@
 import { Moon, Sun } from 'lucide-react'
-import { Button } from '@/components/ui/button'
-import { useTheme } from '@/components/theme-provider'
+import { useTheme } from '~/components/theme-provider'
+import { Button } from '~/components/ui/button'
 
 export function ThemeToggle() {
   const { theme, toggle } = useTheme()

frontend/src/components/ui/alert.tsx

@@ -1,6 +1,6 @@
-import * as React from 'react'
 import { cva, type VariantProps } from 'class-variance-authority'
-import { cn } from '@/lib/utils'
+import * as React from 'react'
+import { cn } from '~/lib/utils'
 
 const alertVariants = cva(
   'relative w-full rounded-lg border px-4 py-3 text-sm [&>svg+div]:translate-y-[-3px] [&>svg]:absolute [&>svg]:left-4 [&>svg]:top-4 [&>svg]:text-foreground [&>svg~*]:pl-7',
@@ -32,9 +32,10 @@ export const AlertTitle = React.forwardRef<HTMLHeadingElement, React.HTMLAttribu
 )
 AlertTitle.displayName = 'AlertTitle'
 
-export const AlertDescription = React.forwardRef<HTMLParagraphElement, React.HTMLAttributes<HTMLParagraphElement>>(
-  ({ className, ...props }, ref) => (
-    <div ref={ref} className={cn('text-sm [&_p]:leading-relaxed', className)} {...props} />
-  ),
-)
+export const AlertDescription = React.forwardRef<
+  HTMLParagraphElement,
+  React.HTMLAttributes<HTMLParagraphElement>
+>(({ className, ...props }, ref) => (
+  <div ref={ref} className={cn('text-sm [&_p]:leading-relaxed', className)} {...props} />
+))
 AlertDescription.displayName = 'AlertDescription'

frontend/src/components/ui/button.tsx

@@ -1,7 +1,7 @@
-import * as React from 'react'
 import { Slot } from '@radix-ui/react-slot'
 import { cva, type VariantProps } from 'class-variance-authority'
-import { cn } from '@/lib/utils'
+import * as React from 'react'
+import { cn } from '~/lib/utils'
 
 const buttonVariants = cva(
   '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-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0',
@@ -30,8 +30,7 @@ const buttonVariants = cva(
 )
 
 export interface ButtonProps
-  extends React.ButtonHTMLAttributes<HTMLButtonElement>,
-    VariantProps<typeof buttonVariants> {
+  extends React.ButtonHTMLAttributes<HTMLButtonElement>, VariantProps<typeof buttonVariants> {
   asChild?: boolean
 }
 

frontend/src/components/ui/card.tsx

@@ -1,5 +1,5 @@
 import * as React from 'react'
-import { cn } from '@/lib/utils'
+import { cn } from '~/lib/utils'
 
 export const Card = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
   ({ className, ...props }, ref) => (

frontend/src/components/ui/dropdown-menu.tsx

@@ -1,7 +1,7 @@
-import * as React from 'react'
 import * as DropdownMenuPrimitive from '@radix-ui/react-dropdown-menu'
 import { Check } from 'lucide-react'
-import { cn } from '@/lib/utils'
+import * as React from 'react'
+import { cn } from '~/lib/utils'
 
 export const DropdownMenu = DropdownMenuPrimitive.Root
 export const DropdownMenuTrigger = DropdownMenuPrimitive.Trigger
@@ -86,6 +86,10 @@ export const DropdownMenuSeparator = React.forwardRef<
   React.ElementRef<typeof DropdownMenuPrimitive.Separator>,
   React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Separator>
 >(({ className, ...props }, ref) => (
-  <DropdownMenuPrimitive.Separator ref={ref} className={cn('-mx-1 my-1 h-px bg-muted', className)} {...props} />
+  <DropdownMenuPrimitive.Separator
+    ref={ref}
+    className={cn('-mx-1 my-1 h-px bg-muted', className)}
+    {...props}
+  />
 ))
 DropdownMenuSeparator.displayName = DropdownMenuPrimitive.Separator.displayName

frontend/src/components/ui/input.tsx

@@ -1,5 +1,5 @@
 import * as React from 'react'
-import { cn } from '@/lib/utils'
+import { cn } from '~/lib/utils'
 
 export const Input = React.forwardRef<HTMLInputElement, React.InputHTMLAttributes<HTMLInputElement>>(
   ({ className, type, ...props }, ref) => {

frontend/src/components/ui/separator.tsx

@@ -1,6 +1,6 @@
-import * as React from 'react'
 import * as SeparatorPrimitive from '@radix-ui/react-separator'
-import { cn } from '@/lib/utils'
+import * as React from 'react'
+import { cn } from '~/lib/utils'
 
 export const Separator = React.forwardRef<
   React.ElementRef<typeof SeparatorPrimitive.Root>,

frontend/src/components/ui/skeleton.tsx

@@ -1,4 +1,4 @@
-import { cn } from '@/lib/utils'
+import { cn } from '~/lib/utils'
 
 export function Skeleton({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) {
   return <div className={cn('animate-pulse rounded-md bg-muted', className)} {...props} />