Danny White and Joshen Lim
daa3119b2f
chore(studio): align sidebar hover states ( #45569 )
...
## What kind of change does this PR introduce?
UI polish. Updates sidebar and submenu navigation hover and active
styling.
## What is the current behavior?
Product submenu navigation items either lack a hover fill or use a hover
fill that visually matches the active state. Adjacent hovered and
selected rows can appear to touch.
## What is the new behavior?
Primary sidebar buttons, sidebar sub-buttons, and product submenu pills
now share a muted hover fill while preserving the full accent fill for
active/selected states. Product submenu rows also get a small visual gap
with slightly reduced vertical padding to keep the overall spacing
compact.
| After |
| --- |
| <img width="988" height="408" alt="CleanShot 2026-05-05 at 11 53
05@2x"
src="https://github.com/user-attachments/assets/560ac8a5-1262-41af-a196-618c86580150 "
/> |
<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit
* **Style**
* Refined sidebar hover/active states with subtle accent alpha colors
for a more polished visual experience.
* Updated sidebar menu spacing and rounded corners for improved touch
and visual clarity.
* **UI Improvements**
* Sidebar now only displays when sections exist and uses a streamlined
submenu flow for more consistent, predictable navigation.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
---------
Co-authored-by: Joshen Lim <joshenlimek@gmail.com >
2026-05-05 07:52:11 -06:00
Ivan Vasilov
308cd791a2
chore: Prep work for migrating to Tailwind v4 ( #45285 )
...
This PR preps the monorepo for a migration to Tailwind v4:
- Bump all Tailwind dependencies and libraries to the latest possible
version, while still compatible with Tailwind 3.
- Cleans up obsolete Tailwind 3 specific options and configs.
- Cleans up unused CSS files and fixes the CSS imports.
- Migrates all `important` uses in `@apply` lines to using the `!`
prefix.
- Move `typography.css` to the `config` package and import it from the
apps.
- Migrated all occurrences of `flex-grow`, `flex-shrink`,
`overflow-clip` and `overflow-ellipsis` since they're deprecated and
will be removed in Tailwind 4.
- Make the default theme object typesafe in the `ui` package.
- Migrate all `bg-opacity`, `border-opacity`, `ring-opacity` and
`divider-opacity` to the new format where they're declared as part of
the property color.
- Bump and unify all imports of `postcss` dependency.
2026-04-28 11:33:53 +02:00
Joshen Lim
7f5865872a
Enforce noUnusedLocals and noUnusedParameters in tsconfig.json + fix all related issues ( #45264 )
...
## Context
Enforce `noUnusedLocals` and `noUnusedParameters` in tsconfig.json + fix
all related issues
2026-04-27 17:42:34 +08:00
4a0bb36ca8
style: require sorted imports in studio/components ( #44408 )
...
Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com >
Co-authored-by: Ivan Vasilov <vasilov.ivan@gmail.com >
2026-04-01 10:22:37 +02:00
Francesco Sansalvadore
23c827bdda
feat: nested mobile nav menu ( #43333 )
...
- consolidate `top level menu` and `contextual menu` into nested menu on
mobile
- remove legacy mobile submenu
2026-03-11 13:55:20 +01:00
28e4473953
Update account/me page components ( #41193 )
...
* update account me page
* copy
* Update apps/studio/components/interfaces/Account/Preferences/ProfileInformation.tsx
Co-authored-by: Francesco Sansalvadore <f.sansalvadore@gmail.com >
* Update apps/studio/components/interfaces/Account/Preferences/ProfileInformation.tsx
Co-authored-by: Francesco Sansalvadore <f.sansalvadore@gmail.com >
* Update apps/studio/components/interfaces/Account/Preferences/ProfileInformation.tsx
Co-authored-by: Francesco Sansalvadore <f.sansalvadore@gmail.com >
* fixes
* fix sizes
* Smol fix
---------
Co-authored-by: Francesco Sansalvadore <f.sansalvadore@gmail.com >
Co-authored-by: Joshen Lim <joshenlimek@gmail.com >
2025-12-12 17:32:38 +08:00
Joshen Lim
f6473165bd
Hide mobile nav menu on organizations page ( #39908 )
...
* Hide mobile nav menu on organizations page
* Fix
2025-10-28 10:08:46 +08:00
kemal.earth
0fadb11560
feat(studio): account area ui updates ( #38006 )
...
* feat: quick prototype of account area
Update to the layout of the account area. Small prototype yolo.
* fix: prettier warnings
* feat: fix back button to bottom of sidebar
* feat: handle back button on desktop and mobile
* chore: run prettier
2025-08-21 13:40:02 +01:00
fb24d91305
Feat/ Org layout ( #33150 )
...
* update test
* move back button, fix width issues on sidebar
* update sidebar logic
* Update ProjectLayout.tsx
* lots of updates. layouts now streamlined. localstorage for tabs in use
* moar
* bunch of new tab logic
* fix empty tab issue
* Update tabs.ts
* layouts switched
* new pages now have fixed layouts
* fix tabs
* fix code bg
* add tabs support for multiple project refs
* intialization issue
* update ID handling
* fixed isOpened state for SQL snippets
* remove old assistant because its bugging up panels
* preview style works in sql editor
* fix border
* removes preview tab if there is one
* fix background of loading skeleton
* lots of issues with types/icons/redirect
* new tab cards
* snippets in empty state now work
* moar stuff
* tabs now in feature flags
* Update tabs.ts
* Update tabs.ts
* moar
* add feature previews
* remove code not needed
* Update next-env.d.ts
* Delete FeaturePreviewModal.tsx
* fix typescript errors. remove more explorer stuff
* remove explorer files
* fixed issues with templates and quickstarts tab
* fixed active state when tabs are not opted in
* logic error
* fix open/highlight issue when opted out of tabs
* templates/quickstarts now displayed with new cards
* Update recent-items.tsx
* Update new-tab.tsx
* add icon back in
* add old empty state back in
* recent items updated to respect project ref
* localstorage cleanup on deletion
* moar
* overflow tabs now working
* correct tab names used for new sql templates/quickstarts
* ongoing queries fix
* cleanup
* update images
* Update RouteValidationWrapper.tsx
* Update AppLayout.tsx
* Update NavigationBar.tsx
* add headers back into side panels
* improve writing
* tabs now drag and drop a billion times better
* Update tabs.tsx
* Update tabs.tsx
* init issues on stores, which caused a race condition.
* fix hydration error
* init
* init sidebars
* init
* Update app-default-navigation.tsx
* user dropdown updates
* moar layouts
* init
* moar
* moar
* updat
* reverse top bar
* some banners
* moar
* start adding account page
* change styling of dropdowns
* Update sidebar.tsx
* fix new tab issue in sql
* Update ProjectLayout.tsx
* Update pnpm-lock.yaml
* latest
* Update pnpm-lock.yaml
* moar layouts on account
* getLayout updates
* more fixes
* force a cache build
* moar
* Update app-default-navigation.tsx
* fix AI button animation
* moar layout
* account pages refactored
* Update user-dropdown.tsx
* Update new-tab.tsx
* move EditorMenuListSkeleton
* Fix type issues
* fixes: DESIGN-87
fixes: DESIGN-87
* refactor sort/filter components
* Update rules-set-button-text.tsx
* remove discussions for now
* small styling fixes
* Update FeaturePreviewModal.tsx
* Update FeaturePreviewModal.tsx
* Update RouteValidationWrapper.tsx
* revert
* revert
* revert
* revert
* revert
* more revert
* Update collapse-button.tsx
* Update SQLEditorTreeViewItem.tsx
* revert
* Update SchemaGraph.tsx
* Delete new-upcoming.tsx
* revert
* Update ProjectLayout.tsx
* fix home link
* Update table-editor.spec.ts
* test update
* Update projects.tsx
* remove
* Delete sidebar-open-top-banner.tsx
* add organizations page
* Update table-editor.spec.ts
* Fix the playwright tests.
* layout fixes
* layout fix
* revert sort/filter
* Update LastSignInWrapper.tsx
* revert
* revert
* remove
* update file names
* revert
* revert
* revert
* advisor lint page tabs revert
* revert
* revert
* revert
* revert
* revert
* revert tabs
* remove packages
* add sidebar
* sidebar docs added
* add sidebar
* fixed issues
* fix mobile
* fixes
* add org side bar in
* redirect updated
* fix more layouts
* move settings icon back down
* remove old stuff
* Delete SideBar.tsx
* use ProfileImage component
* spelling
* Update ThemeSettings.tsx
* Update ThemeSettings.tsx
* Update Sidebar.tsx
* layout udpate
* Update Sidebar.tsx
* fixes
* Minor lints
* Update Sidebar.tsx
* create a alt user dropdown for self hosting and local
* add fragment back in
* Adds Theme Selector for local/self hosting
* Update UserDropdown.tsx
* fix theme selector for local self host
* Update index.ts
* Update DefaultLayout.tsx
* now supports feature preview
* remove old files
* rename files
* revert
* Update LayoutHeader.tsx
* clean
* revert
* revert
* Update resource-banner.tsx
* remove redundant side bar stuff
* organizations action bar updated. removed hardcoded value
* fix type errors
* fix tests
* Undo test changes
* Fix account pages for when feature preview is off
* Bug fixes 1
* Missing key in map of EmailTemplates
* Fix missing border in StorageExplorer
* fix missing header in performance advisor
* Final clean up
* Fix DefaultLayout re-rendering issue on auth pages
* A couple of fixes
* Redirect to /organizations if land on /projects with feature preview on
* Route back to /projects if toggling preview off on /organizations
* Add HomePageActions to /org/slug
* make re-routing nicer
* Moar fixes
* Fix logging in redirect to /organizations irregardless of feature preview
* Fix missing withAuth in OrganizationLayout
* Minor clean upo
* Fix branch dropdown not aligned
* Add feature preview for update layout
* update dropdowns to only be chevron triggered in new layout
* Update content-query.ts
* Update entity-types-infinite-query.ts
* add IS_PLATFORM for org dropdown
* Add IS_PLATFORM check for EnableBranchingDropdown in LayoutHeader
* Midway fixing mobile nav
* Mobile nav fixes
* Address feedbacks
---------
Co-authored-by: Joshen Lim <joshenlimek@gmail.com >
Co-authored-by: Alaister Young <a@alaisteryoung.com >
Co-authored-by: Ivan Vasilov <vasilov.ivan@gmail.com >
Co-authored-by: Jordi Enric <jordi.err@gmail.com >
2025-04-08 11:32:29 +08:00
Jonathan Summers-Muir and Ivan Vasilov
a09ffd0104
Feat/get layout - Project pages updated to use getLayout ( #33365 )
...
* Update AppBannerWrapper.tsx
* full width header layout
* layout fixing for sign in pages
* update
* init
* Update app-state.ts
* Update ProjectLayout.tsx
* init project pages
* Update LayoutHeader.tsx
* sign in layout fixed
* Update AppBannerWrapper.tsx
* Update AppBannerWrapper.tsx
* update
* Update DefaultLayout.tsx
* Update WithSidebar.tsx
* Update ProjectLayout.tsx
* Update DefaultLayout.tsx
* layout header updatefix header
* add fragment back in
* Update ProjectLayout.tsx
* Update ProjectLayout.tsx
* Update ProjectLayout.tsx
* Update ProjectLayout.tsx
* Remove ProjectContextFromParams component (duplicate to ProjectContextProvider).
* Fix the loading state of SignInMfa page.
* Update sign-in-fly-tos.tsx
* Update ProjectLayout.tsx
* Update ProjectLayout.tsx
---------
Co-authored-by: Ivan Vasilov <vasilov.ivan@gmail.com >
2025-02-07 15:00:02 +08:00
Jonathan Summers-Muir
3dd5bd8b25
Chore/mobile sheet app state ( #33361 )
...
* init
* Update app-state.ts
* Update ProjectLayout.tsx
2025-02-06 15:10:35 +08:00
Francesco Sansalvadore
0035920bf1
feat: studio mobile nav ( #31080 )
...
* SheetProvider in studio
* mobile global nav
* view sub navigation
* fix ProjectLayout conditional
* Account mobile layout
* width
* hide
* layout
* overflow
* responsive button
* overflow
* fix mobile nav if IS_PLATFORM
* refactor
* hide if no content
* show command menu item on mobile
* ui-patterns sheet provider
* use client
* show if productMenu
* show if productMenu
* drag to close
* drag to close
* 16px input fontsize on inputs to avoid zoom on mobile
* offscreen test element
* offscreen test element
* offscreen test element
* update test
* update test
* update test
* pb
* test?
* test
* test
* test
* spec-click-target
* remove console
* remove unused import
* add dependency to sheet content
* close sheet on router.asPath change
* remove provider and use simple Sheet
* update sidebar mobile
* align labels
* avoid input zoom on mobile
* remove yo
2024-12-16 10:49:17 -04:00
Joshen Lim
858f99af99
Deprecate navigationLayoutV2 ( #30884 )
2024-12-04 19:54:50 +08:00
Ivan Vasilov and Joshen Lim
05a542ccea
chore: Migrate all feather icons to lucide icons ( #29038 )
...
* Add lucide-react to docs (to make the autocomplete work).
* Migrate the docs app icons.
* Migrate the ui-patterns.
* Remove the old icons from ui package.
* Migrate the www app from react-feather icons.
* Migrate all of studio icons.
* Migrate the only component in design-system.
* Fix an old import in ui package. Revert an import in docs app.
* Fix some pages in www.
* Remove unneeded files used in generation of icons.
* Fix a prettier error.
* Fix more issues in www.
* Fix an issue in Log Date picker.
* Replace all string sizes with number sizes because the icons grew in some cases.
* Fix more imports in security page.
* Fix an extra import.
* Remove the size prop from all icons if they're in a button and they match the button size.
* Minor fixes for docs and www.
---------
Co-authored-by: Joshen Lim <joshenlimek@gmail.com >
2024-09-04 19:46:21 +08:00
Alaister Young
9f57fd7ceb
chore: remove console.log ( #28879 )
2024-08-26 20:18:18 +08:00
Joshen Lim
6e44ab8227
Fix active state in withSidebar ( #28838 )
2024-08-23 22:34:58 +08:00
790c7ce369
Vercel marketplace ( #28786 )
...
* Add Vercel Marketplace login flow page
* Add alternative Vercel Marketplace flow with for popup windows
* Automatically redirect user to project after Vercel Marketplace login
* added PartnerIcon
* Update partner-icon.tsx
* refactor partner icon
* hide invoices when on vercel marketplace
* vercel marketplace – payment method / billing address / tax numbers | empty states
* add tooltip to memebers
* always show invoices tab
* Update InvoicesSettings.tsx
* add partner id
* update cta urls
* add vercel managed org banner
* add billing coming soon warning
* remove sign-in-vercel-marketplace routes
* re-enable plan upgrades
* Update api.d.ts
* Fix type checking
* fix vercel links
* improve ts
---------
Co-authored-by: Kamil Ogórek <kamil.ogorek@gmail.com >
Co-authored-by: Alaister Young <a@alaisteryoung.com >
Co-authored-by: Kevin Grüneberg <k.grueneberg1994@gmail.com >
Co-authored-by: Joshen Lim <joshenlimek@gmail.com >
2024-08-23 08:06:15 +00:00
Jonathan Summers-Muir and Francesco Sansalvadore
6d760a1a99
Feat/deep dark ( #27026 )
...
* chore: move to deeper dark
* tidy up boxes on www
* update deep-dark colors
* fix homepage product cards
* toned down pricing page a little
* update
* lots of color changes
* Update grid.scss
* Update EntityListItem.tsx
* Update EntityListItem.tsx
* fix partners page icon
* fix partners page colors
* update theme
* Update global.css
* combined dark theme so classic-dark does not break on other sites
* Update package-lock.json
* updated color tokens pipeline to support combined dark theme
* smol updates
* Update FeaturedThumb.tsx
* Update BlogFilters.tsx
* Update BlogListItem.tsx
* Update BlogListItem.tsx
* Update UserSettingsDropdown.tsx
* Update NavigationBar.tsx
---------
Co-authored-by: Francesco Sansalvadore <f.sansalvadore@gmail.com >
2024-07-30 21:34:28 +08:00
Alaister Young and Kevin Grüneberg
70da0f1d1d
chore: cleanup packages ( #27770 )
...
* chore: cleanup packages
- Avoid circular imports
- Export API-types as types
- pg-format without depending on Node internal Buffer (not browser-compatible)
- Avoid importing from barrel files in ui dir
* chore: avoid barrel file imports in studio (#27771 )
* chore: avoid barrel file imports
- Removes some unused imports
- Avoids barrel file import for faster builds + less memory
* add eslint rule
* type fixes
* delete layouts barrel
* delete components/grid barrel file
* delete components/grid/utils barrel file
* delete components/grid/components/common barrel file
* delete components/grid/components/editor barrel file
* delete components/grid/components/formatter barrel file
* delete components/grid/components/grid barrel file
* delete components/grid/components/header/filter barrel file
* remote components/grid/store barrel file
* remove components/interfaces/Auth/Policies barrel file
* delete components/interfaces/Settings/Logs barrel file
* delete components/ui/CodeEditor barrel file
* delete components/ui/Forms barrel file
* delete components/ui/Shimmers barrel file
* delete data/analytics barrel file
* delete hooks barrel file
* cleanup lib/common/fetch barrel file
* final * barral files cleanup
* global react-data-grid styles
* remove console.log
---------
Co-authored-by: Kevin Grüneberg <k.grueneberg1994@gmail.com >
* fix build
---------
Co-authored-by: Kevin Grüneberg <k.grueneberg1994@gmail.com >
2024-07-04 14:48:10 +08:00
Jonathan Summers-Muir
a4a4a7e26d
Deprecate old Badge component ( #22037 )
...
* Update Badge.tsx
* refactor apps with new props
* Update APIKeys.tsx
* format
* remove old code
2024-03-19 10:33:12 +01:00
Kevin Grüneberg
f9a55935f5
chore: use type imports for types/interfaces ( #21738 )
2024-03-04 20:48:22 +08:00
Kevin Grüneberg
13cfc0abb5
fix: barrel imports ( #21728 )
...
Avoid importing all components via barrel files that lead to bloated bundles/chunks
2024-03-04 18:39:53 +08:00
2901606b08
feat/ add log out button, and user details into user popover ( #21724 )
...
* Update NavigationBar.tsx
* small nits
* only show email if it's different from username
* Update apps/studio/components/layouts/ProjectLayout/NavigationBar/NavigationBar.tsx
Co-authored-by: Jonathan Summers-Muir <MildTomato@users.noreply.github.com >
---------
Co-authored-by: Alaister Young <a@alaisteryoung.com >
Co-authored-by: Alaister Young <alaister@users.noreply.github.com >
2024-03-04 06:43:41 +00:00
754ee55cd0
chore: update themes and add dark-new theme set ( #20865 )
...
* chore: update themes and add dark-new theme set
* chore: update
* add deep dark css theme
* fix issue with wrong class
* chore: add `bg-studio` as a custom remapped color for studio background
* updated surface classes to use a surface-75.
* update backgrounds and borders
* Update CardButton.tsx
* Update NavigationIconButton.tsx
* chore: add theme selection
* Update package.json
* Update index.ts
* Update package.json
* update alias
* Update ThemeSettings.tsx
* chore: split up theme support
* remove old code
* Update index.ts
* add back in
* Update ThemeSettingsOld.tsx
* fix issue with system theme leaking through
* reset themes
* update imports
* packagelock updated
* Update ThemeSettingsWithPreferredTheme.tsx
* Update system.svg
* Update NavigationIconButton.tsx
* Update NavigationBar.tsx
* update
* Update light.css
* updated some colors
* light mode updated
* hacked
* prettier
---------
Co-authored-by: Francesco Sansalvadore <f.sansalvadore@gmail.com >
Co-authored-by: Kevin Grüneberg <k.grueneberg1994@gmail.com >
2024-02-15 16:56:18 +01:00
Joshen Lim
aa76203400
Fix height issue ( #21210 )
...
* Fix height issue
* Add some min-h-screens
* Fix
* Fix
* Revert min-h-screens
2024-02-13 17:36:58 +08:00
497575b647
fix: prevent scroll when banners are visible in AppLayout components ( #21069 )
...
* fix: prevent scroll when banners are visible in AppLayout components
* Lint + use tailwind
* fix
* Deprecate LayoutWrapper
* Fix import
---------
Co-authored-by: Mohammed Yasin Mulla <mohammedyasin@obmondo.com >
Co-authored-by: Joshen Lim <joshenlimek@gmail.com >
2024-02-08 14:13:18 +08:00
Joshen Lim
b4023b6eb2
Chore/banner for ipv4 deprecation notice ( #20334 )
...
* Add LayoutWrapper component to DRY the layout height change when incident banner is toggled
* Add notice banner for pgbouncer and ipv4 deprecation
2024-01-11 16:20:38 +08:00
Kevin Grüneberg
d12332ea5a
chore: xmas cleanup ( #19938 )
2024-01-04 17:27:49 +01:00
Ivan Vasilov
436bdb10ae
chore: Move the studio app to apps/studio ( #18915 )
...
* Move all studio files from /studio to /apps/studio.
* Move studio specific prettier ignores.
* Fix the ui references from studio.
* Fix the css imports.
* Fix all package.json issues.
* Fix the prettier setup for the studio app.
* Add .turbo folder to prettierignore.
* Fix the github workflows.
2023-11-15 12:38:55 +01:00
