Rebuilt the "Home Machine" dialog with Svelte.

src/svelte-components/src/components/AdminNetworkView.svelte

@@ -1,7 +1,6 @@
 <script lang="ts">
   import WifiConnectionDialog from "../dialogs/WifiConnectionDialog.svelte";
   import ChangeHostnameDialog from "../dialogs/ChangeHostnameDialog.svelte";
-  import Paper from "@smui/paper";
   import Button, { Label } from "@smui/button";
   import List, { Item, Graphic, Text, Meta } from "@smui/list";
   import Card from "@smui/card";

src/svelte-components/src/components/DialogHost.svelte

@@ -0,0 +1,6 @@
+<script lang="ts">
+  import HomeMachineDialog from "../dialogs/HomeMachineDialog.svelte";
+  import { HomeMachine } from "../lib/DialogProps";
+</script>
+
+<HomeMachineDialog {...$HomeMachine} />

src/svelte-components/src/dialogs/HomeMachineDialog.svelte

@@ -0,0 +1,27 @@
+<script lang="ts">
+  import Dialog, { Title, Content, Actions, InitialFocus } from "@smui/dialog";
+  import Button, { Label } from "@smui/button";
+
+  export let open;
+  export let home: () => any;
+</script>
+
+<Dialog
+  bind:open
+  aria-labelledby="simple-title"
+  aria-describedby="simple-content"
+>
+  <Title id="simple-title">Home Machine</Title>
+
+  <Content id="simple-content">Home the machine?</Content>
+
+  <Actions>
+    <Button>
+      <Label>Cancel</Label>
+    </Button>
+
+    <Button defaultAction use={[InitialFocus]} on:click={home}>
+      <Label>OK</Label>
+    </Button>
+  </Actions>
+</Dialog>

src/svelte-components/src/dialogs/WifiConnectionDialog.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-  import Dialog, { Title, Content, Actions } from "@smui/dialog";
+  import Dialog, { Title, Content, Actions, InitialFocus } from "@smui/dialog";
   import Button, { Label } from "@smui/button";
   import TextField from "@smui/textfield";
   import Icon from "@smui/textfield/icon";
@@ -22,7 +22,9 @@
 
   $: {
     connectOrDisconnect = network?.active ? "Disconnect" : "Connect";
-    connectToOrDisconnectFrom = network?.active ? "Disconnect from" : "Connect to";
+    connectToOrDisconnectFrom = network?.active
+      ? "Disconnect from"
+      : "Connect to";
   }
 
   $: if (open) {
@@ -92,6 +94,7 @@
 
     <Button
       defaultAction
+      use={[InitialFocus]}
       on:click={onConfirm}
       disabled={needPassword && (password.length < 8 || password.length > 128)}
     >

src/svelte-components/src/lib/DialogProps.ts

@@ -0,0 +1,16 @@
+import { writable } from "svelte/store";
+
+type HomeMachine = {
+    open: boolean,
+    home: () => any
+}
+
+export type DialogPropsTypes = {
+    HomeMachine: HomeMachine
+}
+
+export const HomeMachine = writable<HomeMachine>();
+
+export default {
+    HomeMachine
+};

src/svelte-components/src/main.ts

@@ -2,14 +2,34 @@ import 'polyfill-object.fromentries';
 import AdminNetworkView from './components/AdminNetworkView.svelte';
 import { init as initNetworkInfo } from './lib/NetworkInfo';
 
-export function create(component: string, target: HTMLElement, props: Record<string, any>) {
+import DialogHost from "./components/DialogHost.svelte";
+import DialogProps from "./lib/DialogProps";
+import type { DialogPropsTypes } from "./lib/DialogProps";
+
+export function createComponent(component: string, target: HTMLElement, props: Record<string, any>) {
   switch (component) {
     case "AdminNetworkView":
       return new AdminNetworkView({ target, props });
 
+    case "DialogHost":
+      return new DialogHost({ target, props });
+
     default:
       throw new Error("Unknown component");
   }
 }
 
-export { initNetworkInfo };
+export function showDialog<T extends keyof typeof DialogProps>(dialog: T, props: DialogPropsTypes[T]) {
+  switch (dialog) {
+    case "HomeMachine":
+      DialogProps.HomeMachine.set({ ...props, open: true });
+      break;
+
+    default:
+      throw new Error(`Unknown dialog '${dialog}`);
+  }
+}
+
+export {
+  initNetworkInfo
+};

src/svelte-components/src/theme/_smui-theme.scss

@@ -1,9 +1,9 @@
-@use 'sass:color';
+@use "sass:color";
 
-@use '@material/theme/color-palette';
+@use "@material/theme/color-palette";
 
 // Svelte Colors!
-@use '@material/theme/index' as theme with (
+@use "@material/theme/index" as theme with (
   $primary: #0078e7,
   $secondary: #676778,
   $surface: #fff,
@@ -13,10 +13,19 @@
 );
 
 @use "@material/elevation/mdc-elevation";
-
 @use "@material/list";
+
 @include list.deprecated-core-styles;
 
 :root {
   --mdc-theme-text-primary-on-background: #777;
-}
+
+  .mdc-dialog .mdc-dialog__content {
+    color: #777;
+  }
+
+  .mdc-dialog .mdc-dialog__title {
+    color: #777;
+    font-weight: bold;
+  }
+}