JavaScript-optional public web frontend for Bluesky
anartia.kelinci.net
sveltekit
atcute
bluesky
typescript
svelte
feat: allow hiding replies to a reply
+107
-6
+9
src/lib/components/central-icons/circle-minus-outlined.svelte
+9
src/lib/components/central-icons/circle-minus-outlined.svelte
+9
src/lib/components/central-icons/circle-plus-outlined.svelte
+9
src/lib/components/central-icons/circle-plus-outlined.svelte
+9
-1
src/lib/components/timeline/post-metrics.svelte
+9
-1
src/lib/components/timeline/post-metrics.svelte
···
25
25
title={count === 1 ? `${formatLongNumber(count)} ${one}` : `${formatLongNumber(count)} ${many}`}
26
26
class="stat"
27
27
>
28
-
<Icon />
28
+
<div class="icon">
29
+
<Icon />
30
+
</div>
29
31
30
32
<span class="count">
31
33
{formatCompactNumber(count)}
···
46
48
gap: 16px;
47
49
margin-top: 12px;
48
50
color: var(--text-blurb);
51
+
}
52
+
53
+
.icon {
54
+
display: grid;
55
+
place-items: center;
56
+
/* font-size: 16px; */
49
57
}
50
58
51
59
.stat {
+80
-5
src/routes/(app)/[actor=didOrHandle]/[rkey=tid]/components/post-descendant-item.svelte
+80
-5
src/routes/(app)/[actor=didOrHandle]/[rkey=tid]/components/post-descendant-item.svelte
···
15
15
import PostMeta from '$lib/components/timeline/post-meta.svelte';
16
16
import PostMetrics from '$lib/components/timeline/post-metrics.svelte';
17
17
18
+
import CircleMinusOutlined from '$lib/components/central-icons/circle-minus-outlined.svelte';
19
+
import CirclePlusOutlined from '$lib/components/central-icons/circle-plus-outlined.svelte';
20
+
18
21
interface Props {
19
22
post: AppBskyFeedDefs.PostView;
20
23
defaultCollapsed?: boolean;
···
58
61
</div>
59
62
60
63
{#if hasDescendant}
61
-
<div class={['descendant', isNested && 'has-multiple']}>
62
-
{@render children?.()}
63
-
</div>
64
+
<details open class="descendants">
65
+
<summary aria-label="Show/hide replies" class="descendant-summary">
66
+
<div class="descendant-summary-button">
67
+
<div class="descendant-summary-icon is-opened">
68
+
<CircleMinusOutlined />
69
+
</div>
70
+
71
+
<div class="descendant-summary-icon is-closed">
72
+
<CirclePlusOutlined />
73
+
</div>
74
+
</div>
75
+
</summary>
76
+
77
+
<div class={['descendant-items', isNested && 'has-multiple']}>
78
+
{@render children?.()}
79
+
</div>
80
+
</details>
64
81
{/if}
65
82
</details>
66
83
···
110
127
bottom: -10px;
111
128
left: calc(16px + (20px / 2) - 1px);
112
129
border-left: 2px solid var(--divider-md);
130
+
131
+
.post-descendant-item:has(> .descendants:not([open])) & {
132
+
bottom: 16px;
133
+
}
113
134
}
114
135
115
-
.has-multiple {
136
+
.descendants {
137
+
position: relative;
138
+
}
139
+
140
+
.descendant-summary {
141
+
list-style: none;
142
+
}
143
+
144
+
.descendant-summary-button {
145
+
position: absolute;
146
+
top: -32px;
147
+
z-index: 1;
148
+
margin-left: 16px;
149
+
border-radius: 9999px;
150
+
background: var(--bg-primary);
151
+
width: 20px;
152
+
height: 20px;
153
+
color: var(--text-blurb);
154
+
155
+
@media (hover: hover) {
156
+
&:hover {
157
+
background: color-mix(in srgb, var(--bg-primary), var(--tap) 10%);
158
+
}
159
+
}
160
+
}
161
+
162
+
.descendant-summary-icon {
116
163
display: grid;
117
-
grid-template-columns: 20px minmax(0, 1fr);
164
+
place-items: center;
165
+
width: 20px;
166
+
height: 20px;
167
+
/* font-size: 16px; */
168
+
169
+
&.is-opened {
170
+
display: none;
171
+
}
172
+
173
+
&.is-closed {
174
+
display: grid;
175
+
}
176
+
177
+
.descendants[open] > .descendant-summary & {
178
+
&.is-opened {
179
+
display: grid;
180
+
}
181
+
182
+
&.is-closed {
183
+
display: none;
184
+
}
185
+
}
186
+
}
187
+
188
+
.descendant-items {
189
+
&.has-multiple {
190
+
display: grid;
191
+
grid-template-columns: 20px minmax(0, 1fr);
192
+
}
118
193
}
119
194
</style>