Chore/UI improvements#135
Conversation
There was a problem hiding this comment.
Pull request overview
This PR implements comprehensive UI improvements and refactoring across the application, focusing on navigation, layout consistency, and visual enhancements.
Key Changes:
- Complete navigation system overhaul with new global state management and back button functionality
- Restructured account settings into separate tabs with dedicated pages
- Unified aspect ratio from 9:12 to 3:4 across all image components
- Enhanced social feed UI with new post card design and improved layouts
- Added TOTP and password management features
Reviewed changes
Copilot reviewed 43 out of 48 changed files in this pull request and generated 8 comments.
Show a summary per file
| File | Description |
|---|---|
| src/routes/navbar.svelte | Complete navbar redesign with route matching, animations, and dynamic active states |
| src/lib/globals.svelte.ts | Added global state for navigation, back button, and page title management |
| src/lib/components/NavBack.svelte | Refactored to use global state with improved styling and transitions |
| src/routes/app/account/+page.svelte | Simplified to landing page with links to settings and legal |
| src/routes/app/account/settings/+page.svelte | New tabbed settings interface with separate sections |
| src/routes/app/account/settings/totp.svelte | New TOTP setup and management component |
| src/routes/app/account/settings/password.svelte | New password change component |
| src/routes/app/(social)/+layout.svelte | Moved search functionality to layout with global controls |
| src/lib/components/social/Post.svelte | Redesigned post cards with clipped paths and improved layout |
| src/lib/server/imageProcessing/index.ts | Updated image processing to use 3:4 aspect ratio with cover fit |
| src/routes/app/+layout.svelte | Added max-width container for consistent page width |
| src/lib/i18n/messages/en.json | Updated translation keys for account settings restructuring |
| src/routes/assets/[...path]/+server.ts | Re-enabled publication access control and image blurring |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
| // 'Cache-Control': `public, max-age=${CACHE_MAX_AGE}, immutable`, | ||
| // }, | ||
| headers: { | ||
| 'Cache-Control': `public, max-age=${0}, immutable`, |
There was a problem hiding this comment.
Setting cache max-age to 0 defeats the purpose of having a cache-control header with 'immutable'. Either increase the max-age to allow actual caching of immutable assets, or remove the 'immutable' directive if the content should not be cached.
| variant: { | ||
| default: 'bg-primary text-primary-foreground shadow-xs hover:bg-primary/90', | ||
| default: | ||
| 'bg-primary text-primary-foreground shadow-xs hover:bg-primary/90 disabled:background/50 focus-visible:ring-primary/20 dark:focus-visible:ring-primary/40', |
There was a problem hiding this comment.
The button variant styling includes 'disabled:background/50' which appears to be a typo. It should likely be 'disabled:bg-background/50' to properly apply background opacity when disabled.
| 'bg-primary text-primary-foreground shadow-xs hover:bg-primary/90 disabled:background/50 focus-visible:ring-primary/20 dark:focus-visible:ring-primary/40', | |
| 'bg-primary text-primary-foreground shadow-xs hover:bg-primary/90 disabled:bg-background/50 focus-visible:ring-primary/20 dark:focus-visible:ring-primary/40', |
| > | ||
| <Button | ||
| variant="none" | ||
| class="dark:bg-primary bg-background rounded-full text-foreground dark:text-background p-2! size-10" |
There was a problem hiding this comment.
The class 'p-2!' uses non-standard Tailwind syntax. The exclamation mark for important modifier should be placed before the utility class like '!p-2', not after it.
| <div | ||
| class={cn( | ||
| 'size-10 p-2 rounded-full flex items-center text-primary bg-secondary justify-center', | ||
| selected ? 'invert-100' : '' |
There was a problem hiding this comment.
The class 'invert-100' is not a standard Tailwind utility. For inverting colors, use 'invert' alone or with opacity like 'invert' or create a custom class. The numeric suffix '100' is not valid for the invert utility.
| <Button | ||
| class="w-full backdrop-blur-md h-14 relative rounded-full p-2 bg-secondary/50 flex flex-row items-center justify-center group ltr:pr-14 rtl:pl-14" | ||
| variant="none" | ||
| onclick={() => setTimeout(() => (mixAndMatchOpen = true), 350)} |
There was a problem hiding this comment.
The setTimeout with a hardcoded 350ms delay before opening the modal is fragile and could lead to race conditions or timing issues. Consider using the transition/animation end event or removing the delay if it's not essential for the user experience.
| <Backdrop bind:open={searchOpen}></Backdrop> | ||
| <div class="fixed z-50 top-6 left-4 right-4 items-center gap-2 flex flex-col"> | ||
| <!-- Search bar --> | ||
| <InputGroup.Root class="z-10 bg-input!"> |
There was a problem hiding this comment.
The class 'bg-input!' uses non-standard Tailwind syntax. The exclamation mark should come after 'bg-input' without the hyphen, like 'bg-input!' or use the standard '!bg-input' syntax for important modifiers.
| <InputGroup.Root class="z-10 bg-input!"> | |
| <InputGroup.Root class="z-10 !bg-input"> |
| {#each Globals.navBack.trailing as { href, onclick, icon: Icon } (Icon)} | ||
| <Button | ||
| variant="none" | ||
| class="dark:bg-primary bg-background rounded-full text-foreground dark:text-background p-2! size-10" |
There was a problem hiding this comment.
The class 'p-2!' uses non-standard Tailwind syntax. The exclamation mark for important modifier should be placed before the utility class like '!p-2', not after it.
| class="bg-primary absolute top-2 bottom-2 ease-out right-2 duration-300 text-background shrink-0 rounded-full w-10 h-10 group-focus:w-[calc(100%-1rem)] transition-all p-2" | ||
| > | ||
| <ArrowRight | ||
| class="size-full ease-back-in group-focus:-rotate-180 transition-all duration-300" |
There was a problem hiding this comment.
The class 'ease-back-in' is not a standard Tailwind easing function. Valid easing classes include 'ease-in', 'ease-out', 'ease-in-out', and 'ease-linear'. Either define a custom easing function in your Tailwind config or use a standard easing class.
No description provided.