h14h.com / glide
Effortlessly glide through your todos
0
Fork 0

Configure Feed

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

Make horizontal "All clear" layout medium-widget-only

The previous change put the emoji beside the title everywhere, but the
horizontal layout was only wanted on the medium widget — to fix its
cramped vertical spacing. The in-app view and the roomy large widget
read better with the emoji stacked above the title.

Parameterise emptyCard with a `row` flag: the medium widget passes it
(emoji beside title); the large widget stays vertical. Revert the in-app
EmptyState to its vertical layout.

Verified in the simulator: in-app and large render the emoji above
"All clear"; medium renders it beside.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>

Henry Firth (Jun 24, 2026, 3:39 PM -0500) 679e2c9c 17530d7c

+63 -54
+6 -12
src/design/actioning-screen.tsx
··· 272 272 { backgroundColor: palette.surface, borderColor: palette.border, boxShadow: `6px 7px 0 ${shadowColor}` }, 273 273 ]}> 274 274 <Text style={styles.emptyEmoji}>{emoji}</Text> 275 - <View style={styles.emptyText}> 276 - <Text style={[styles.emptyTitle, { color: palette.text }]}>{title}</Text> 277 - {sub ? <Text style={[styles.emptySub, { color: palette.textSecondary }]}>{sub}</Text> : null} 278 - </View> 275 + <Text style={[styles.emptyTitle, { color: palette.text }]}>{title}</Text> 276 + {sub ? <Text style={[styles.emptySub, { color: palette.textSecondary }]}>{sub}</Text> : null} 279 277 </Animated.View> 280 278 ); 281 279 } ··· 393 391 fontWeight: '800', 394 392 }, 395 393 empty: { 396 - flexDirection: 'row', 397 394 borderRadius: 26, 398 395 borderWidth: 3, 399 - paddingVertical: Spacing.four, 396 + paddingVertical: Spacing.five, 400 397 paddingHorizontal: Spacing.four, 401 398 alignItems: 'center', 402 - justifyContent: 'center', 403 - gap: Spacing.three, 404 - }, 405 - emptyText: { 406 - gap: 2, 399 + gap: Spacing.two, 407 400 }, 408 401 emptyEmoji: { 409 - fontSize: 40, 402 + fontSize: 56, 410 403 }, 411 404 emptyTitle: { 412 405 fontFamily: ROUNDED, ··· 417 410 fontFamily: ROUNDED, 418 411 fontSize: 15, 419 412 fontWeight: '600', 413 + textAlign: 'center', 420 414 }, 421 415 actions: { 422 416 flexDirection: 'row',
+57 -42
src/widget/glide-widget.tsx
··· 233 233 ); 234 234 235 235 // Friendly fallback — distinguishes "go plan" from a genuinely-empty all-clear 236 - // state. A compact card with the emoji *beside* the title (a centred row, not a 237 - // vertical stack — stacking made the short medium card feel cramped), mirroring 238 - // the in-app EmptyState so the "All clear" card reads identically in the app and 239 - // the widget. All-clear carries no tagline (it was needless); "nothing ready" 240 - // keeps a functional count beneath its title. 236 + // state. Emoji + title in a card, mirroring the in-app EmptyState. Vertical 237 + // (emoji above title) by default — what the in-app view and the roomy large 238 + // widget use; the short medium widget passes `row` to set the emoji beside the 239 + // title instead, where a vertical stack felt cramped. All-clear carries no 240 + // tagline (it was needless); "nothing ready" keeps a functional count. 241 241 const empty: { emoji: string; title: string; sub: string } = 242 242 unsorted > 0 243 243 ? { emoji: '🗂️', title: 'Nothing ready', sub: `${unsorted} to plan` } 244 244 : { emoji: '🎉', title: 'All clear', sub: '' }; 245 - const emptyCard = (emojiSize: number, titleSize: number) => ( 246 - <Card key="empty" radius={22} pad={16} fill={c.surface} sx={5} sy={6}> 247 - <HStack spacing={10} alignment="center" modifiers={[frame({ maxWidth: Infinity })]}> 248 - {[ 249 - <Spacer key="sl" />, 250 - <Text key="icon" modifiers={[font({ size: emojiSize })]}> 251 - {empty.emoji} 252 - </Text>, 253 - empty.sub ? ( 254 - <VStack key="text" spacing={1} alignment="leading"> 255 - {[ 256 - <Text 257 - key="title" 258 - modifiers={[font({ size: titleSize, weight: 'heavy', design: 'rounded' }), foregroundStyle(c.text)]}> 259 - {empty.title} 260 - </Text>, 261 - <Text 262 - key="sub" 263 - modifiers={[font({ size: 13, weight: 'bold', design: 'rounded' }), foregroundStyle(c.textSecondary)]}> 264 - {empty.sub} 265 - </Text>, 266 - ]} 267 - </VStack> 268 - ) : ( 269 - <Text 270 - key="text" 271 - modifiers={[font({ size: titleSize, weight: 'heavy', design: 'rounded' }), foregroundStyle(c.text)]}> 272 - {empty.title} 273 - </Text> 274 - ), 275 - <Spacer key="sr" />, 276 - ]} 277 - </HStack> 278 - </Card> 279 - ); 245 + const emptyCard = (emojiSize: number, titleSize: number, row: boolean) => { 246 + const icon = ( 247 + <Text key="icon" modifiers={[font({ size: emojiSize })]}> 248 + {empty.emoji} 249 + </Text> 250 + ); 251 + const title = ( 252 + <Text 253 + key="title" 254 + modifiers={[ 255 + font({ size: titleSize, weight: 'heavy', design: 'rounded' }), 256 + foregroundStyle(c.text), 257 + multilineTextAlignment('center'), 258 + ]}> 259 + {empty.title} 260 + </Text> 261 + ); 262 + const sub = empty.sub ? ( 263 + <Text 264 + key="sub" 265 + modifiers={[font({ size: 13, weight: 'bold', design: 'rounded' }), foregroundStyle(c.textSecondary)]}> 266 + {empty.sub} 267 + </Text> 268 + ) : null; 269 + 270 + return ( 271 + <Card key="empty" radius={22} pad={16} fill={c.surface} sx={5} sy={6}> 272 + {row ? ( 273 + <HStack spacing={10} alignment="center" modifiers={[frame({ maxWidth: Infinity })]}> 274 + {[ 275 + <Spacer key="sl" />, 276 + icon, 277 + sub ? ( 278 + <VStack key="text" spacing={1} alignment="leading"> 279 + {[title, sub]} 280 + </VStack> 281 + ) : ( 282 + title 283 + ), 284 + <Spacer key="sr" />, 285 + ]} 286 + </HStack> 287 + ) : ( 288 + <VStack spacing={6} alignment="center" modifiers={[frame({ maxWidth: Infinity })]}> 289 + {[icon, title, sub].filter(Boolean)} 290 + </VStack> 291 + )} 292 + </Card> 293 + ); 294 + }; 280 295 281 296 const root = (children: ReactNode) => ( 282 297 <VStack ··· 308 323 ); 309 324 return current 310 325 ? root([header, heroCard(22, 4, 0.5, true)]) 311 - : root([header, <Spacer key="s1" />, emptyCard(30, 20), <Spacer key="s2" />]); 326 + : root([header, <Spacer key="s1" />, emptyCard(30, 20, true), <Spacer key="s2" />]); 312 327 } 313 328 314 329 if (family === 'systemLarge') { ··· 392 407 ); 393 408 394 409 if (!current) { 395 - return root([header, <Spacer key="s1" />, emptyCard(34, 24), <Spacer key="s2" />, actions]); 410 + return root([header, <Spacer key="s1" />, emptyCard(48, 26, false), <Spacer key="s2" />, actions]); 396 411 } 397 412 398 413 return root([