refactor: mono-repo (#478)

common/components/DefaultPageLayout.svelte

@@ -16,7 +16,7 @@
     <Header />
   </AppShellHeader>
 
-  <PageContent class="max-w-(--breakpoint-lg) w-full mx-auto">
+  <PageContent class="mx-auto w-full max-w-(--breakpoint-lg)">
     {@render children?.()}
   </PageContent>
 </AppShell>

common/components/FullPageLayout.svelte

@@ -12,7 +12,7 @@
 </script>
 
 <Scrollable>
-  <section class="flex flex-col h-dvh">
+  <section class="flex h-dvh flex-col">
     <div class="grow">
       <Container {size} center class="p-4 sm:p-8 lg:p-10">
         {@render children?.()}

common/components/Header.svelte

@@ -26,8 +26,8 @@
   let { items = [], onToggleSidebar }: Props = $props();
 </script>
 
-<nav class="w-full flex items-center justify-between md:gap-2 p-2">
-  <div class="flex gap-2 place-items-center">
+<nav class="flex w-full items-center justify-between p-2 md:gap-2">
+  <div class="flex place-items-center gap-2">
     {#if onToggleSidebar}
       <IconButton
         shape="round"

common/components/PageContent.svelte

@@ -10,9 +10,9 @@
   let { children, class: className }: Props = $props();
 </script>
 
-<div  class="flex flex-col h-full mx-auto">
+<div class="mx-auto flex h-full flex-col">
   <div class="grow {className ? className : ''}">
-    <div class="w-full h-full p-4 md:p-6 lg:p-8">
+    <div class="h-full w-full p-4 md:p-6 lg:p-8">
       {@render children?.()}
     </div>
   </div>

common/theme/theme.css

@@ -1,17 +1,9 @@
 @custom-variant dark (&:where(.dark, .dark *):not(.light));
 
-@theme {
-  --font-immich-title: Snowburst One, cursive;
-  --font-immich-mono: Overpass Mono, monospace;
-}
-
 @layer base {
   :root {
     /* light */
     --immich-primary: 66 80 175;
-
-    /* dark */
-    --immich-dark-primary: 172 203 250;
   }
 }
 
@@ -27,7 +19,7 @@
   @apply text-gray-600 dark:text-gray-400;
 }
 
-.border-muted{
+.border-muted {
   @apply border-gray-600 dark:border-gray-400;
 }