Highly ambitious ATProtocol AppView service and sdks
update layout containers to all be the same width, nav color white
+39
-42
+10
-10
frontend/src/components/Layout.tsx
+10
-10
frontend/src/components/Layout.tsx
···
7
7
}
8
8
9
9
export function Layout({
10
-
title = "Slice",
10
+
title = "Slices",
11
11
children,
12
12
currentUser,
13
13
}: LayoutProps) {
···
40
40
/>
41
41
</head>
42
42
<body className="bg-gray-100 min-h-screen">
43
-
<nav className="bg-blue-600 text-white p-4">
44
-
<div className="container mx-auto flex justify-between items-center">
45
-
<a href="/" className="text-xl font-bold hover:text-blue-200">
46
-
Slice
43
+
<nav className="bg-white text-gray-800 py-4 border-b border-gray-200">
44
+
<div className="max-w-5xl mx-auto px-4 flex justify-between items-center">
45
+
<a href="/" className="text-xl font-bold hover:text-blue-600">
46
+
Slices
47
47
</a>
48
48
<div className="flex items-center space-x-4">
49
49
{currentUser?.isAuthenticated ? (
50
50
<div className="flex items-center space-x-3">
51
-
<span className="text-sm text-blue-100">
51
+
<span className="text-sm text-gray-600">
52
52
{currentUser.handle || "Authenticated User"}
53
53
</span>
54
54
<a
55
55
href="/settings"
56
-
className="text-sm text-blue-100 hover:text-white"
56
+
className="text-sm text-gray-600 hover:text-gray-800"
57
57
>
58
58
Settings
59
59
</a>
60
60
<form method="post" action="/logout" className="inline">
61
61
<button
62
62
type="submit"
63
-
className="text-sm bg-blue-700 hover:bg-blue-800 px-3 py-1 rounded"
63
+
className="text-sm bg-gray-100 hover:bg-gray-200 text-gray-700 px-3 py-1 rounded"
64
64
>
65
65
Logout
66
66
</button>
···
69
69
) : (
70
70
<a
71
71
href="/login"
72
-
className="text-sm bg-blue-700 hover:bg-blue-800 px-3 py-1 rounded"
72
+
className="text-sm bg-blue-600 hover:bg-blue-700 text-white px-3 py-1 rounded"
73
73
>
74
74
Login
75
75
</a>
···
77
77
</div>
78
78
</div>
79
79
</nav>
80
-
<main className="container mx-auto mt-8 px-4 pb-16 min-h-[calc(100vh-200px)]">{children}</main>
80
+
<main className="max-w-5xl mx-auto mt-8 px-4 pb-16 min-h-[calc(100vh-200px)]">{children}</main>
81
81
</body>
82
82
</html>
83
83
);
+1
-1
frontend/src/pages/IndexPage.tsx
+1
-1
frontend/src/pages/IndexPage.tsx
···
14
14
export function IndexPage({ slices = [], currentUser }: IndexPageProps) {
15
15
return (
16
16
<Layout title="Slices" currentUser={currentUser}>
17
-
<div className="max-w-4xl mx-auto">
17
+
<div>
18
18
<div className="flex justify-between items-center mb-8">
19
19
<h1 className="text-3xl font-bold text-gray-800">Slices</h1>
20
20
<button
+7
-3
frontend/src/pages/SettingsPage.tsx
+7
-3
frontend/src/pages/SettingsPage.tsx
···
11
11
currentUser?: { handle?: string; isAuthenticated: boolean };
12
12
}
13
13
14
-
export function SettingsPage({ profile, error, currentUser }: SettingsPageProps) {
14
+
export function SettingsPage({
15
+
profile,
16
+
error,
17
+
currentUser,
18
+
}: SettingsPageProps) {
15
19
return (
16
20
<Layout title="Settings - Slice" currentUser={currentUser}>
17
-
<div className="max-w-4xl mx-auto">
21
+
<div>
18
22
<div className="mb-8">
19
23
<h1 className="text-3xl font-bold text-gray-900">Settings</h1>
20
24
<p className="mt-2 text-gray-600">
···
26
30
</div>
27
31
</Layout>
28
32
);
29
-
}
33
+
}
+1
-1
frontend/src/pages/SliceCodegenPage.tsx
+1
-1
frontend/src/pages/SliceCodegenPage.tsx
+1
-1
frontend/src/pages/SliceLexiconPage.tsx
+1
-1
frontend/src/pages/SliceLexiconPage.tsx
···
16
16
17
17
return (
18
18
<Layout title={`${sliceName} - Lexicons`} currentUser={currentUser}>
19
-
<div className="max-w-4xl mx-auto">
19
+
<div>
20
20
<div className="flex items-center justify-between mb-8">
21
21
<div className="flex items-center">
22
22
<a href="/" className="text-blue-600 hover:text-blue-800 mr-4">
+1
-1
frontend/src/pages/SlicePage.tsx
+1
-1
frontend/src/pages/SlicePage.tsx
···
30
30
}: SlicePageProps) {
31
31
return (
32
32
<Layout title={sliceName} currentUser={currentUser}>
33
-
<div className="max-w-4xl mx-auto">
33
+
<div>
34
34
<div className="flex items-center justify-between mb-8">
35
35
<div className="flex items-center">
36
36
<a href="/" className="text-blue-600 hover:text-blue-800 mr-4">
+6
-11
frontend/src/pages/SliceRecordsPage.tsx
+6
-11
frontend/src/pages/SliceRecordsPage.tsx
···
35
35
sliceId = "example",
36
36
currentUser,
37
37
}: SliceRecordsPageProps) {
38
-
39
38
return (
40
39
<Layout title={`${sliceName} - Records`} currentUser={currentUser}>
41
-
<div className="max-w-4xl mx-auto">
40
+
<div>
42
41
<div className="flex items-center justify-between mb-8">
43
42
<div className="flex items-center">
44
-
<a
45
-
href="/"
46
-
className="text-blue-600 hover:text-blue-800 mr-4"
47
-
>
43
+
<a href="/" className="text-blue-600 hover:text-blue-800 mr-4">
48
44
← Back to Slices
49
45
</a>
50
-
<h1 className="text-3xl font-bold text-gray-800">
51
-
{sliceName}
52
-
</h1>
46
+
<h1 className="text-3xl font-bold text-gray-800">{sliceName}</h1>
53
47
</div>
54
48
</div>
55
49
···
171
165
Record Data
172
166
</h3>
173
167
<pre className="bg-gray-50 p-3 rounded text-xs overflow-auto max-h-64">
174
-
{record.pretty_value || JSON.stringify(record.value, null, 2)}
168
+
{record.pretty_value ||
169
+
JSON.stringify(record.value, null, 2)}
175
170
</pre>
176
171
</div>
177
172
</div>
···
215
210
</div>
216
211
</Layout>
217
212
);
218
-
}
213
+
}
+11
-13
frontend/src/pages/SliceSettingsPage.tsx
+11
-13
frontend/src/pages/SliceSettingsPage.tsx
···
12
12
sliceId = "example",
13
13
currentUser,
14
14
}: SliceSettingsPageProps) {
15
-
16
15
return (
17
16
<Layout title={`${sliceName} - Settings`} currentUser={currentUser}>
18
-
<div className="max-w-4xl mx-auto">
17
+
<div>
19
18
<div className="flex items-center justify-between mb-8">
20
19
<div className="flex items-center">
21
-
<a
22
-
href="/"
23
-
className="text-blue-600 hover:text-blue-800 mr-4"
24
-
>
20
+
<a href="/" className="text-blue-600 hover:text-blue-800 mr-4">
25
21
← Back to Slices
26
22
</a>
27
-
<h1 className="text-3xl font-bold text-gray-800">
28
-
{sliceName}
29
-
</h1>
23
+
<h1 className="text-3xl font-bold text-gray-800">{sliceName}</h1>
30
24
</div>
31
25
</div>
32
26
···
43
37
<p className="text-gray-600 mb-4">
44
38
Change the display name of your slice.
45
39
</p>
46
-
<form
40
+
<form
47
41
hx-put={`/api/slices/${sliceId}/name`}
48
42
hx-target="#name-form-result"
49
43
hx-swap="innerHTML"
50
44
>
51
45
<div className="flex gap-4 items-end">
52
46
<div className="flex-1">
53
-
<label htmlFor="slice-name" className="block text-sm font-medium text-gray-700 mb-2">
47
+
<label
48
+
htmlFor="slice-name"
49
+
className="block text-sm font-medium text-gray-700 mb-2"
50
+
>
54
51
Slice Name
55
52
</label>
56
53
<input
···
80
77
🚨 Danger Zone
81
78
</h2>
82
79
<p className="text-gray-600 mb-4">
83
-
Permanently delete this slice and all associated data. This action cannot be undone.
80
+
Permanently delete this slice and all associated data. This action
81
+
cannot be undone.
84
82
</p>
85
83
<button
86
84
hx-delete={`/api/slices/${sliceId}`}
···
96
94
</div>
97
95
</Layout>
98
96
);
99
-
}
97
+
}
+1
-1
frontend/src/pages/SliceSyncPage.tsx
+1
-1
frontend/src/pages/SliceSyncPage.tsx
···
16
16
}: SliceSyncPageProps) {
17
17
return (
18
18
<Layout title={`${sliceName} - Sync`} currentUser={currentUser}>
19
-
<div className="max-w-4xl mx-auto">
19
+
<div>
20
20
<div className="flex items-center justify-between mb-8">
21
21
<div className="flex items-center">
22
22
<a href="/" className="text-blue-600 hover:text-blue-800 mr-4">