feat(app): add horizontal lines as spacers

apps/app/src/components/Layout.tsx

@@ -1,4 +1,4 @@
-import { SidebarInset, SidebarTrigger } from '@boring.tools/ui'
+import { Separator, SidebarInset, SidebarTrigger } from '@boring.tools/ui'
 import type { ReactNode } from 'react'
 import { Sidebar } from './Sidebar'
 
@@ -30,6 +30,7 @@ export const Layout = ({ children }: { children: ReactNode | ReactNode[] }) => {
             </Breadcrumb> */}
           </div>
         </header>
+        <Separator />
         <div className="flex flex-1 flex-col gap-4 p-4 pt-0">
           <div className="flex flex-col">
             <main className="flex flex-1 flex-col gap-4 p-4 lg:gap-6 lg:p-6">

apps/app/src/routes/changelog.$id.version.$versionId.tsx

@@ -16,6 +16,7 @@ import {
   SelectItem,
   SelectTrigger,
   SelectValue,
+  Separator,
   cn,
 } from '@boring.tools/ui'
 import { zodResolver } from '@hookform/resolvers/zod'
@@ -90,7 +91,7 @@ const Component = () => {
 
   return (
     <div className="flex flex-col gap-5">
-      <hr />
+      <Separator />
       {!isPending && data && (
         <div>
           <h1 className="text-xl mb-2">Version: {data.version}</h1>

apps/app/src/routes/changelog.$id.versionCreate.lazy.tsx

@@ -17,6 +17,7 @@ import {
   SelectItem,
   SelectTrigger,
   SelectValue,
+  Separator,
   cn,
 } from '@boring.tools/ui'
 import { zodResolver } from '@hookform/resolvers/zod'
@@ -66,7 +67,7 @@ const Component = () => {
 
   return (
     <div className="flex flex-col gap-5">
-      <hr />
+      <Separator />
       <h1 className="text-xl mb-2">New version</h1>
       <Form {...form}>
         <form