BlueSky & more on desktop lazurite.stormlightlabs.org/
tauri rust typescript bluesky appview atproto solid
2
fork

Configure Feed

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

refactor: improve compact button label handling and transitions

+31 -16
+1 -1
src/App.tsx
··· 54 54 return ( 55 55 <> 56 56 <main 57 - class="grid h-screen min-h-screen overflow-hidden grid-cols-(--app-rail-cols) transition-[grid-template-columns] duration-300 ease-out max-lg:h-auto max-lg:min-h-screen max-lg:grid-cols-1 max-lg:overflow-visible" 57 + class="grid h-screen min-h-screen overflow-hidden grid-cols-(--app-rail-cols) max-lg:h-auto max-lg:min-h-screen max-lg:grid-cols-1 max-lg:overflow-visible" 58 58 style={{ "--app-rail-cols": shell.railColumns }}> 59 59 <AppRail /> 60 60
+10 -7
src/components/rail/AppRail.tsx
··· 229 229 aria-expanded={open()} 230 230 aria-haspopup="menu" 231 231 onClick={handleToggle} 232 - class="relative flex h-11 shrink-0 items-center gap-2.5 rounded-lg border-0 bg-transparent text-on-surface-variant no-underline transition duration-150 ease-out hover:-translate-y-px hover:bg-surface-bright hover:text-on-surface" 232 + class="relative flex h-11 shrink-0 items-center rounded-lg border-0 bg-transparent text-on-surface-variant no-underline transition-[width,padding,transform,background-color,color] duration-200 ease-out motion-reduce:transition-none hover:-translate-y-px hover:bg-surface-bright hover:text-on-surface" 233 233 classList={{ 234 - "w-[2.75rem] justify-center": compact(), 235 - "w-full justify-start px-3": !compact(), 234 + "w-[2.75rem] justify-center gap-0": compact(), 235 + "w-full justify-start gap-2.5 px-3": !compact(), 236 236 "bg-surface-container text-primary": open(), 237 237 }}> 238 238 <Icon iconClass={iconClassForTheme(props.currentTheme)} class="shrink-0 text-[1.25rem]" /> 239 - <Show when={!compact()}> 240 - <span class="text-sm font-medium leading-none">Theme</span> 241 - </Show> 239 + <span 240 + class="overflow-hidden whitespace-nowrap text-sm font-medium leading-none transition-[max-width,opacity] duration-200 ease-out motion-reduce:transition-none" 241 + classList={{ "max-w-40 opacity-100": !compact(), "max-w-0 opacity-0": compact() }} 242 + aria-hidden={compact() ? "true" : undefined}> 243 + Theme 244 + </span> 242 245 </button> 243 246 244 247 <Show when={open()}> ··· 295 298 296 299 return ( 297 300 <aside 298 - class="flex min-h-screen min-w-0 flex-col gap-6 overflow-visible bg-surface-container-lowest px-6 pb-6 pt-6 transition-[padding,gap] duration-300 ease-out max-lg:grid max-lg:min-h-0 max-lg:grid-cols-[auto_minmax(0,1fr)_auto_auto_auto] max-lg:items-center max-lg:gap-x-4 max-lg:gap-y-3 max-lg:p-4" 301 + class="flex min-h-screen min-w-0 flex-col gap-6 overflow-visible bg-surface-container-lowest px-6 pb-6 pt-6 transition-[padding,gap] duration-220 ease-out motion-reduce:transition-none max-lg:grid max-lg:min-h-0 max-lg:grid-cols-[auto_minmax(0,1fr)_auto_auto_auto] max-lg:items-center max-lg:gap-x-4 max-lg:gap-y-3 max-lg:p-4" 299 302 classList={{ 300 303 "items-center px-4": shell.railCondensed && !shell.narrowViewport, 301 304 "gap-5": shell.railCondensed && !shell.narrowViewport,
+16 -7
src/components/rail/AppRailButton.tsx
··· 27 27 </Show> 28 28 </Presence> 29 29 </div> 30 - <Show when={!props.compact}> 31 - <span class="text-sm font-medium leading-none">{props.label}</span> 32 - </Show> 30 + <span 31 + class="overflow-hidden whitespace-nowrap text-sm font-medium leading-none transition-[max-width,opacity] duration-200 ease-out motion-reduce:transition-none" 32 + classList={{ "max-w-40 opacity-100": !props.compact, "max-w-0 opacity-0": !!props.compact }} 33 + aria-hidden={props.compact ? "true" : undefined}> 34 + {props.label} 35 + </span> 33 36 </> 34 37 ); 35 38 } ··· 39 42 <A 40 43 href={props.href} 41 44 end={props.end} 42 - class={"relative flex h-11 shrink-0 items-center gap-2.5 rounded-lg border-0 bg-transparent text-on-surface-variant no-underline transition duration-150 ease-out hover:-translate-y-px hover:bg-surface-bright hover:text-on-surface"} 45 + class={"relative flex h-11 shrink-0 items-center rounded-lg border-0 bg-transparent text-on-surface-variant no-underline transition-[width,padding,transform,background-color,color] duration-200 ease-out motion-reduce:transition-none hover:-translate-y-px hover:bg-surface-bright hover:text-on-surface"} 43 46 activeClass="bg-surface-container text-primary" 44 47 inactiveClass="" 45 - classList={{ "w-[2.75rem] justify-center": !!props.compact, "px-3": !props.compact }} 48 + classList={{ 49 + "w-[2.75rem] justify-center gap-0": !!props.compact, 50 + "gap-2.5 px-3": !props.compact, 51 + }} 46 52 aria-label={props.label} 47 53 title={props.label}> 48 54 <RailButtonContent {...props} /> ··· 54 60 return ( 55 61 <button 56 62 type="button" 57 - class={"relative flex h-11 shrink-0 items-center gap-2.5 rounded-lg border-0 bg-transparent text-on-surface-variant no-underline transition duration-150 ease-out hover:-translate-y-px hover:bg-surface-bright hover:text-on-surface"} 58 - classList={{ "w-[2.75rem] justify-center": !!props.compact, "px-3": !props.compact }} 63 + class={"relative flex h-11 shrink-0 items-center rounded-lg border-0 bg-transparent text-on-surface-variant no-underline transition-[width,padding,transform,background-color,color] duration-200 ease-out motion-reduce:transition-none hover:-translate-y-px hover:bg-surface-bright hover:text-on-surface"} 64 + classList={{ 65 + "w-[2.75rem] justify-center gap-0": !!props.compact, 66 + "gap-2.5 px-3": !props.compact, 67 + }} 59 68 aria-label={props.label} 60 69 title={props.label} 61 70 onClick={() => props.onClick()}>
+4 -1
src/components/rail/tests/AppRailButton.test.tsx
··· 21 21 it("hides label text when compact", () => { 22 22 renderInRouter(() => <RailButton href="/auth" label="Accounts" icon="profile" compact />); 23 23 24 - expect(screen.queryByText("Accounts")).not.toBeInTheDocument(); 24 + const label = screen.getByText("Accounts"); 25 + expect(label).toHaveClass("max-w-0"); 26 + expect(label).toHaveClass("opacity-0"); 27 + expect(label).toHaveAttribute("aria-hidden", "true"); 25 28 }); 26 29 27 30 it("uses rounded-lg (not rounded-full) for reduced rounding", () => {