JavaScript-optional public web frontend for Bluesky anartia.kelinci.net
sveltekit atcute bluesky typescript svelte
7
fork

Configure Feed

Select the types of activity you want to include in your feed.

feat: allow hiding replies to a reply

Mary 6f922203 296ea065

+107 -6
+9
src/lib/components/central-icons/circle-minus-outlined.svelte
··· 1 + <svg class="sv-icon" fill="none" viewBox="0 0 24 24"> 2 + <path 3 + stroke="currentColor" 4 + stroke-linecap="round" 5 + stroke-linejoin="round" 6 + stroke-width="2" 7 + d="M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0ZM16 12H8" 8 + /> 9 + </svg>
+9
src/lib/components/central-icons/circle-plus-outlined.svelte
··· 1 + <svg class="sv-icon" fill="none" viewBox="0 0 24 24"> 2 + <path 3 + stroke="currentColor" 4 + stroke-linecap="round" 5 + stroke-linejoin="round" 6 + stroke-width="2" 7 + d="M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0ZM16 12H8M12 16V8" 8 + /> 9 + </svg>
+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
··· 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>