forked from
nonbinary.computer/weaver
atproto blogging
some stylistic fixes
+53
-10
+20
-2
crates/weaver-app/assets/styling/record-view.css
+20
-2
crates/weaver-app/assets/styling/record-view.css
···
128
128
padding-top: 0.5rem;
129
129
}
130
130
131
+
.path-prefix {
132
+
color: var(--color-muted);
133
+
opacity: 0.7;
134
+
}
135
+
136
+
.path-final {
137
+
color: var(--color-text);
138
+
font-weight: 500;
139
+
}
140
+
141
+
.array-len {
142
+
font-family: var(--font-mono);
143
+
color: var(--color-subtle);
144
+
font-size: 0.9rem;
145
+
font-weight: 400;
146
+
padding-left: 0.125rem;
147
+
padding-top: 0.5rem;
148
+
}
149
+
131
150
.field-value {
132
151
font-family: var(--font-mono);
133
152
color: var(--color-text);
134
-
font-size: 1rem;
153
+
font-size: 0.9rem;
135
154
padding-top: 0.2rem;
136
155
padding-bottom: 0.1rem;
137
156
word-break: break-word;
···
198
217
max-width: 600px;
199
218
max-height: 400px;
200
219
margin-top: 0.5rem;
201
-
border: 1px solid var(--color-border);
202
220
margin-bottom: 0.5rem;
203
221
}
204
222
+33
-8
crates/weaver-app/src/views/record.rs
+33
-8
crates/weaver-app/src/views/record.rs
···
45
45
class: "record-view-container",
46
46
div {
47
47
class: "record-header",
48
-
h1 { "Record Inspector" }
48
+
h1 { "Record" }
49
49
div {
50
50
class: "record-metadata",
51
51
div { class: "metadata-row",
···
95
95
rsx! {
96
96
div {
97
97
class: "record-view-container",
98
-
h1 { "Record Inspector" }
98
+
h1 { "Record" }
99
99
p { "URI: {uri}" }
100
100
p { "Loading..." }
101
101
}
···
136
136
}
137
137
138
138
#[component]
139
+
fn PathLabel(path: String) -> Element {
140
+
if path.is_empty() {
141
+
return rsx! {};
142
+
}
143
+
144
+
// Find the last separator
145
+
let last_sep = path.rfind(|c| c == '.');
146
+
147
+
if let Some(idx) = last_sep {
148
+
let prefix = &path[..idx + 1];
149
+
let final_segment = &path[idx + 1..];
150
+
rsx! {
151
+
span { class: "field-label",
152
+
span { class: "path-prefix", "{prefix}" }
153
+
span { class: "path-final", "{final_segment}" }
154
+
}
155
+
}
156
+
} else {
157
+
rsx! {
158
+
span { class: "field-label","{path}" }
159
+
}
160
+
}
161
+
}
162
+
163
+
#[component]
139
164
fn DataView(data: Data<'static>, path: String, did: String) -> Element {
140
165
match &data {
141
166
Data::Null => rsx! {
142
167
div { class: "record-field",
143
-
span { class: "field-label", "{path}" }
168
+
PathLabel { path: path.clone() }
144
169
span { class: "field-value muted", "null" }
145
170
}
146
171
},
147
172
Data::Boolean(b) => rsx! {
148
173
div { class: "record-field",
149
-
span { class: "field-label", "{path}" }
174
+
PathLabel { path: path.clone() }
150
175
span { class: "field-value", "{b}" }
151
176
}
152
177
},
153
178
Data::Integer(i) => rsx! {
154
179
div { class: "record-field",
155
-
span { class: "field-label", "{path}" }
180
+
PathLabel { path: path.clone() }
156
181
span { class: "field-value", "{i}" }
157
182
}
158
183
},
···
176
201
177
202
rsx! {
178
203
div { class: "record-field",
179
-
span { class: "field-label", "{path}" }
204
+
PathLabel { path: path.clone() }
180
205
span { class: "field-value",
181
206
182
207
HighlightedString { string_type: s.clone() }
···
196
221
};
197
222
rsx! {
198
223
div { class: "record-field",
199
-
span { class: "field-label", "{path}" }
224
+
PathLabel { path: path.clone() }
200
225
pre { class: "field-value bytes", "{hex_string} [{byte_size}]" }
201
226
}
202
227
}
···
209
234
},
210
235
Data::Array(arr) => rsx! {
211
236
div { class: "record-section",
212
-
div { class: "section-label", "{path}" span { class: "field-label", "[{arr.len()}] " } }
237
+
div { class: "section-label", "{path}" span { class: "array-len", "[{arr.len()}] " } }
213
238
214
239
div { class: "section-content",
215
240
for (idx, item) in arr.iter().enumerate() {