feat: update Docker-image

Signed-off-by: Arthur Broudoux <[email protected]>

.dockerignore

@@ -13,6 +13,5 @@ README.md
 .vscode
 .idea
 node_modules
-build
 package
 **/.env

Dockerfile

@@ -1,4 +1,4 @@
-FROM node:22-alpine
+FROM node:22-alpine as builder
 
 RUN npm install -g pnpm
 
@@ -10,6 +10,21 @@ RUN pnpm install --frozen-lockfile
 
 COPY . .
 
+ARG DATABASE_URL
+ENV DATABASE_URL=$DATABASE_URL
+
+RUN pnpm run build
+
+FROM node:22-alpine
+
+WORKDIR /app
+
+COPY --from=builder /app/build ./build
+
+COPY package.json pnpm-lock.yaml ./
+
+RUN npm install --only=production --legacy-peer-deps
+
 EXPOSE 5173
 
-CMD ["sh", "-c", "pnpm run generate && pnpm run migrate && pnpm run dev"]
+CMD ["node", "build/index.js"]

components.json

@@ -11,4 +11,4 @@
 		"utils": "$lib/utils"
 	},
 	"typescript": true
-}
+}

docker-compose.build.yaml

@@ -5,14 +5,16 @@ services:
     build:
       context: .
       dockerfile: Dockerfile
+      args:
+        DATABASE_URL: "postgresql://postgres:mysecretpassword@db:5432/better-db"
     ports:
       - "5173:5173"
     depends_on:
       - db
     environment:
       DATABASE_URL: "postgresql://postgres:mysecretpassword@db:5432/better-db"
     command: >
-      sh -c "pnpm install && pnpm run generate && pnpm run migrate && pnpm run dev"
+      sh -c "npm install && npm run generate && npm run migrate && node build/index.js"
 
   db:
     container_name: better-db

package.json

@@ -39,6 +39,8 @@
 		"eslint-config-prettier": "^9.1.0",
 		"eslint-plugin-svelte": "^2.44.0",
 		"globals": "^15.9.0",
+		"lucide-svelte": "^0.441.0",
+		"paneforge": "^0.0.6",
 		"pg": "^8.13.0",
 		"postcss": "^8.4.47",
 		"prettier": "^3.3.3",
@@ -58,7 +60,6 @@
 		"drizzle-orm": "^0.33.0",
 		"embla-carousel-svelte": "^8.3.0",
 		"lucia": "^3.2.0",
-		"lucide-svelte": "^0.441.0",
 		"mode-watcher": "^0.4.1",
 		"postgres": "^3.4.4",
 		"svelte-sonner": "^0.3.28",

src/components/habits/ProgressBar.svelte

@@ -1,7 +1,8 @@
 <script lang="ts">
-	import { Progress } from "$lib/components/ui/progress";
 	import { toast } from "svelte-sonner";
 
+	import { Progress } from "$lib/components/ui/progress";
+
 	import { habitsData } from "$stores/habit.store";
 	import type { Habit } from "$utils/types/entities";
 

src/components/habits/SectionHabits.svelte

@@ -10,7 +10,7 @@
 	$: habits = $habitsData as Habit[];
 </script>
 
-<section class="flex flex-col gap-4 w-full h-full">
+<section class="flex flex-col gap-8 w-full h-full">
 	{#if habits.length > 0}
 		<div class="w-full flex flex-row justify-between items-center">
 			<h2 class="text-3xl font-semibold">Habits</h2>

src/lib/components/ui/resizable/index.ts

@@ -0,0 +1,13 @@
+import { Pane } from "paneforge";
+import Handle from "./resizable-handle.svelte";
+import PaneGroup from "./resizable-pane-group.svelte";
+
+export {
+	PaneGroup,
+	Pane,
+	Handle,
+	//
+	PaneGroup as ResizablePaneGroup,
+	Pane as ResizablePane,
+	Handle as ResizableHandle,
+};

src/lib/components/ui/resizable/resizable-handle.svelte

@@ -0,0 +1,28 @@
+<script lang="ts">
+	import GripVertical from "lucide-svelte/icons/grip-vertical";
+	import * as ResizablePrimitive from "paneforge";
+	import { cn } from "$lib/utils.js";
+
+	type $$Props = ResizablePrimitive.PaneResizerProps & {
+		withHandle?: boolean;
+	};
+
+	export let withHandle: $$Props["withHandle"] = false;
+	export let el: $$Props["el"] = undefined;
+	let className: $$Props["class"] = undefined;
+	export { className as class };
+</script>
+
+<ResizablePrimitive.PaneResizer
+	bind:el
+	class={cn(
+		"bg-border focus-visible:ring-ring relative flex w-px items-center justify-center after:absolute after:inset-y-0 after:left-1/2 after:w-1 after:-translate-x-1/2 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-offset-1 data-[direction=vertical]:h-px data-[direction=vertical]:w-full data-[direction=vertical]:after:left-0 data-[direction=vertical]:after:h-1 data-[direction=vertical]:after:w-full data-[direction=vertical]:after:-translate-y-1/2 data-[direction=vertical]:after:translate-x-0 [&[data-direction=vertical]>div]:rotate-90",
+		className
+	)}
+>
+	{#if withHandle}
+		<div class="bg-border z-10 flex h-4 w-3 items-center justify-center rounded-sm border">
+			<GripVertical class="h-2.5 w-2.5" />
+		</div>
+	{/if}
+</ResizablePrimitive.PaneResizer>

src/lib/components/ui/resizable/resizable-pane-group.svelte

@@ -0,0 +1,22 @@
+<script lang="ts">
+	import * as ResizablePrimitive from "paneforge";
+	import { cn } from "$lib/utils.js";
+
+	type $$Props = ResizablePrimitive.PaneGroupProps;
+
+	let className: $$Props["class"] = undefined;
+	export let direction: $$Props["direction"];
+	export let paneGroup: $$Props["paneGroup"] = undefined;
+	export let el: $$Props["el"] = undefined;
+	export { className as class };
+</script>
+
+<ResizablePrimitive.PaneGroup
+	bind:el
+	bind:paneGroup
+	{direction}
+	class={cn("flex h-full w-full data-[direction=vertical]:flex-col", className)}
+	{...$$restProps}
+>
+	<slot />
+</ResizablePrimitive.PaneGroup>