chore(update): machine info screen with dialog

client/app/package.json

@@ -41,10 +41,9 @@
 		"bits-ui": "^0.21.7",
 		"clsx": "^2.1.1",
 		"embla-carousel-autoplay": "^8.0.2",
-		"embla-carousel-svelte": "^8.0.2",
+		"embla-carousel-svelte": "^8.0.4",
 		"lucide-svelte": "^0.377.0",
 		"mode-watcher": "^0.3.0",
-		"svelte-french-toast": "^1.2.0",
 		"svelte-sonner": "^0.3.24",
 		"tailwind-merge": "^2.3.0",
 		"tailwind-variants": "^0.2.1"

client/app/src-tauri/tauri.conf.json

@@ -22,13 +22,14 @@
       },
       "externalBin": [],
       "icon": [
+        "icons/connect_62x62.png",
         "icons/32x32.png",
         "icons/128x128.png",
         "icons/[email protected]",
         "icons/icon.icns",
         "icons/icon.ico"
       ],
-      "identifier": "com.tauri.dev",
+      "identifier": "so.mecha.dev",
       "longDescription": "",
       "macOS": {
         "entitlements": null,

client/app/src/lib/components/ui/carousel/carousel-content.svelte

@@ -26,7 +26,7 @@
 	on:emblaInit={onInit}
 >
 	<div
-		class={cn("flex ", $orientation === "horizontal" ? "-ml-4" : "-mt-4 flex-col", className)}
+		class={cn("flex", $orientation === "horizontal" ? "-ml-4" : "-mt-4 flex-col", className)}
 		data-embla-container=""
 		{...$$restProps}
 	>

client/app/src/lib/components/ui/carousel/carousel-item.svelte

@@ -14,7 +14,7 @@
 	role="group"
 	aria-roledescription="slide"
 	class={cn(
-		"min-w-0 shrink-0 grow-0 basis-full ",
+		"min-w-0 shrink-0 grow-0 basis-full",
 		$orientation === "horizontal" ? "pl-4" : "pt-4",
 		className
 	)}

client/app/src/lib/components/ui/carousel/carousel-next.svelte

@@ -23,7 +23,7 @@
 	{variant}
 	{size}
 	class={cn(
-		"h-8 w-8 touch-manipulation rounded-md bg-[#15171D] border-none",
+		"absolute h-8 w-8 touch-manipulation rounded-full",
 		$orientation === "horizontal"
 			? "-right-12 top-1/2 -translate-y-1/2"
 			: "-bottom-12 left-1/2 -translate-x-1/2 rotate-90",

client/app/src/lib/components/ui/carousel/carousel-previous.svelte

@@ -24,7 +24,7 @@
 	{variant}
 	{size}
 	class={cn(
-		"h-8 w-8 touch-manipulation rounded-md bg-[#15171D] border-none",
+		"absolute h-8 w-8 touch-manipulation rounded-full",
 		$orientation === "horizontal"
 			? "-left-12 top-1/2 -translate-y-1/2"
 			: "-top-12 left-1/2 -translate-x-1/2 rotate-90",

client/app/src/lib/components/ui/carousel/carousel.svelte

@@ -87,7 +87,7 @@
 </script>
 
 <div
-	class={cn("relative ", className)}
+	class={cn("relative", className)}
 	on:mouseenter
 	on:mouseleave
 	role="region"

client/app/src/lib/components/ui/dialog/dialog-content.svelte

@@ -0,0 +1,36 @@
+<script lang="ts">
+	import { Dialog as DialogPrimitive } from "bits-ui";
+	import X from "lucide-svelte/icons/x";
+	import * as Dialog from "./index.js";
+	import { cn, flyAndScale } from "$lib/utils.js";
+
+	type $$Props = DialogPrimitive.ContentProps;
+
+	let className: $$Props["class"] = undefined;
+	export let transition: $$Props["transition"] = flyAndScale;
+	export let transitionConfig: $$Props["transitionConfig"] = {
+		duration: 200,
+	};
+	export { className as class };
+</script>
+
+<Dialog.Portal>
+	<Dialog.Overlay />
+	<DialogPrimitive.Content
+		{transition}
+		{transitionConfig}
+		class={cn(
+			"fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border bg-background p-6 shadow-lg sm:rounded-lg md:w-full",
+			className
+		)}
+		{...$$restProps}
+	>
+		<slot />
+		<DialogPrimitive.Close
+			class="hidden absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-accent data-[state=open]:text-muted-foreground"
+		>
+			<X class="h-4 w-4" />
+			<span class="sr-only">Close</span>
+		</DialogPrimitive.Close>
+	</DialogPrimitive.Content>
+</Dialog.Portal>

client/app/src/lib/components/ui/dialog/dialog-description.svelte

@@ -0,0 +1,16 @@
+<script lang="ts">
+	import { Dialog as DialogPrimitive } from "bits-ui";
+	import { cn } from "$lib/utils.js";
+
+	type $$Props = DialogPrimitive.DescriptionProps;
+
+	let className: $$Props["class"] = undefined;
+	export { className as class };
+</script>
+
+<DialogPrimitive.Description
+	class={cn("text-sm text-muted-foreground", className)}
+	{...$$restProps}
+>
+	<slot />
+</DialogPrimitive.Description>

client/app/src/lib/components/ui/dialog/dialog-footer.svelte

@@ -0,0 +1,16 @@
+<script lang="ts">
+	import type { HTMLAttributes } from "svelte/elements";
+	import { cn } from "$lib/utils.js";
+
+	type $$Props = HTMLAttributes<HTMLDivElement>;
+
+	let className: $$Props["class"] = undefined;
+	export { className as class };
+</script>
+
+<div
+	class={cn("flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2", className)}
+	{...$$restProps}
+>
+	<slot />
+</div>

client/app/src/lib/components/ui/dialog/dialog-header.svelte

@@ -0,0 +1,13 @@
+<script lang="ts">
+	import type { HTMLAttributes } from "svelte/elements";
+	import { cn } from "$lib/utils.js";
+
+	type $$Props = HTMLAttributes<HTMLDivElement>;
+
+	let className: $$Props["class"] = undefined;
+	export { className as class };
+</script>
+
+<div class={cn("flex flex-col space-y-1.5 text-center sm:text-left", className)} {...$$restProps}>
+	<slot />
+</div>

client/app/src/lib/components/ui/dialog/dialog-overlay.svelte

@@ -0,0 +1,21 @@
+<script lang="ts">
+	import { Dialog as DialogPrimitive } from "bits-ui";
+	import { fade } from "svelte/transition";
+	import { cn } from "$lib/utils.js";
+
+	type $$Props = DialogPrimitive.OverlayProps;
+
+	let className: $$Props["class"] = undefined;
+	export let transition: $$Props["transition"] = fade;
+	export let transitionConfig: $$Props["transitionConfig"] = {
+		duration: 150,
+	};
+	export { className as class };
+</script>
+
+<DialogPrimitive.Overlay
+	{transition}
+	{transitionConfig}
+	class={cn("fixed inset-0 z-50 bg-[#05070A]/40 backdrop-blur-sm", className)}
+	{...$$restProps}
+/>

client/app/src/lib/components/ui/dialog/dialog-portal.svelte

@@ -0,0 +1,8 @@
+<script lang="ts">
+	import { Dialog as DialogPrimitive } from "bits-ui";
+	type $$Props = DialogPrimitive.PortalProps;
+</script>
+
+<DialogPrimitive.Portal {...$$restProps}>
+	<slot />
+</DialogPrimitive.Portal>

client/app/src/lib/components/ui/dialog/dialog-title.svelte

@@ -0,0 +1,16 @@
+<script lang="ts">
+	import { Dialog as DialogPrimitive } from "bits-ui";
+	import { cn } from "$lib/utils.js";
+
+	type $$Props = DialogPrimitive.TitleProps;
+
+	let className: $$Props["class"] = undefined;
+	export { className as class };
+</script>
+
+<DialogPrimitive.Title
+	class={cn("text-lg font-semibold leading-none tracking-tight", className)}
+	{...$$restProps}
+>
+	<slot />
+</DialogPrimitive.Title>

client/app/src/lib/components/ui/dialog/index.ts

@@ -0,0 +1,37 @@
+import { Dialog as DialogPrimitive } from "bits-ui";
+
+import Title from "./dialog-title.svelte";
+import Portal from "./dialog-portal.svelte";
+import Footer from "./dialog-footer.svelte";
+import Header from "./dialog-header.svelte";
+import Overlay from "./dialog-overlay.svelte";
+import Content from "./dialog-content.svelte";
+import Description from "./dialog-description.svelte";
+
+const Root = DialogPrimitive.Root;
+const Trigger = DialogPrimitive.Trigger;
+const Close = DialogPrimitive.Close;
+
+export {
+	Root,
+	Title,
+	Portal,
+	Footer,
+	Header,
+	Trigger,
+	Overlay,
+	Content,
+	Description,
+	Close,
+	//
+	Root as Dialog,
+	Title as DialogTitle,
+	Portal as DialogPortal,
+	Footer as DialogFooter,
+	Header as DialogHeader,
+	Trigger as DialogTrigger,
+	Overlay as DialogOverlay,
+	Content as DialogContent,
+	Description as DialogDescription,
+	Close as DialogClose,
+};

client/app/src/lib/components/ui/progress/progress.svelte

@@ -1,21 +1,23 @@
 <script lang="ts">
-	import { Progress as ProgressPrimitive } from "bits-ui";
-	import { cn } from "$lib/utils.js";
+	import { Progress as ProgressPrimitive } from 'bits-ui';
+	import { cn } from '$lib/utils.js';
 
 	type $$Props = ProgressPrimitive.Props;
 
-	let className: $$Props["class"] = undefined;
-	export let max: $$Props["max"] = 100;
-	export let value: $$Props["value"] = undefined;
+	let className: $$Props['class'] = undefined;
+	export let max: $$Props['max'] = 100;
+	export let value: $$Props['value'] = undefined;
 	export { className as class };
 </script>
 
-<ProgressPrimitive.Root
-	class={cn("relative h-1 w-full overflow-hidden rounded-b bg-primary ", className)}
-	{...$$restProps}
->
-	<div
-		class="h-full w-full flex-1 transition-all bg-blue-500"
-		style={`transform: translateX(-${100 - (100 * (value ?? 0)) / (max ?? 1)}%)`}
-	></div>
-</ProgressPrimitive.Root>
+<div class="flex justify-center w-full">
+	<ProgressPrimitive.Root
+		class={cn('relative h-0.5 w-[97%] overflow-hidden border-b-0', className)}
+		{...$$restProps}
+	>
+		<div
+			class="h-full w-full flex-1 transition-all bg-blue-500"
+			style={`transform: translateX(-${100 - (100 * (value ?? 0)) / (max ?? 1)}%)`}
+		></div>
+	</ProgressPrimitive.Root>
+</div>