An easy-to-host PDS on the ATProtocol, MacOS. Grandma-approved.
feat(MM-143): add Greet IPC demo to +page.svelte using Svelte 5 runes
authored by
Tangled
6c8c9995
9644d7f2
+69
-3
+69
-3
apps/identity-wallet/src/routes/+page.svelte
+69
-3
apps/identity-wallet/src/routes/+page.svelte
···
1
-
<!-- Static placeholder — IPC demo (greet button) is added in Phase 2 -->
2
-
<h1>Identity Wallet</h1>
3
-
<p>Coming in Phase 2.</p>
1
+
<script lang="ts">
2
+
import { greet } from '$lib/ipc';
3
+
4
+
let name = $state('World');
5
+
let greetMsg = $state('');
6
+
7
+
async function handleGreet() {
8
+
greetMsg = await greet(name);
9
+
}
10
+
</script>
11
+
12
+
<main>
13
+
<h1>Identity Wallet</h1>
14
+
<div class="greet-form">
15
+
<input
16
+
type="text"
17
+
bind:value={name}
18
+
placeholder="Enter a name"
19
+
/>
20
+
<button onclick={handleGreet}>Greet</button>
21
+
</div>
22
+
{#if greetMsg}
23
+
<p class="greeting">{greetMsg}</p>
24
+
{/if}
25
+
</main>
26
+
27
+
<style>
28
+
main {
29
+
display: flex;
30
+
flex-direction: column;
31
+
align-items: center;
32
+
justify-content: center;
33
+
min-height: 100vh;
34
+
padding: 1rem;
35
+
font-family: system-ui, sans-serif;
36
+
box-sizing: border-box;
37
+
}
38
+
39
+
.greet-form {
40
+
display: flex;
41
+
flex-direction: column;
42
+
gap: 0.5rem;
43
+
width: 100%;
44
+
max-width: 280px;
45
+
margin-top: 1rem;
46
+
}
47
+
48
+
input,
49
+
button {
50
+
padding: 0.5rem;
51
+
font-size: 1rem;
52
+
border-radius: 4px;
53
+
border: 1px solid #ccc;
54
+
box-sizing: border-box;
55
+
width: 100%;
56
+
}
57
+
58
+
button {
59
+
cursor: pointer;
60
+
background: #007aff;
61
+
color: white;
62
+
border-color: #007aff;
63
+
}
64
+
65
+
.greeting {
66
+
margin-top: 1rem;
67
+
font-size: 1.25rem;
68
+
}
69
+
</style>