feat(ui): update query presets ux (#13095)

Surfaces query preset controls more prominently. Query presets are central to the function of the list view, if enabled, but the UI is easily overlooked. This also sets the stage for future enhancements, such as pinned presets, etc. Also improves the usability of the search field by extending the hitbox of the input fully to the boundaries of the container. Before: https://github.com/user-attachments/assets/3203561c-68cc-43f4-8ded-c51b7c8e8f0c After: https://github.com/user-attachments/assets/13dce7c9-67d8-471f-a85c-2795938b3e3e --- - To see the specific tasks where the Asana app for GitHub is being used, see below: - https://app.asana.com/0/0/1210743577153864 --------- Co-authored-by: Dan Ribbens <dan.ribbens@gmail.com>
2025-08-12 14:59:06 -04:00
parent 8173180d1d
commit 255bba9606
53 changed files with 516 additions and 445 deletions
--- a/packages/translations/src/clientKeys.ts
+++ b/packages/translations/src/clientKeys.ts
@@ -217,6 +217,7 @@ export const clientTranslationKeys = createClientTranslationKeys([
  'general:deleted',
  'general:deletedAt',
  'general:deletePermanently',
+  'general:deleteLabel',
  'general:deletedSuccessfully',
  'general:deletedCountSuccessfully',
  'general:deleting',
@@ -274,6 +275,7 @@ export const clientTranslationKeys = createClientTranslationKeys([
  'general:movingCount',
  'general:name',
  'general:next',
+  'general:newLabel',
  'general:noDateSelected',
  'general:noFiltersSet',
  'general:noLabel',
--- a/packages/translations/src/languages/ar.ts
+++ b/packages/translations/src/languages/ar.ts
@@ -276,6 +276,7 @@ export const arTranslations: DefaultTranslationsObject = {
    deletedAt: 'تم الحذف في',
    deletedCountSuccessfully: 'تمّ حذف {{count}} {{label}} بنجاح.',
    deletedSuccessfully: 'تمّ الحذف بنجاح.',
+    deleteLabel: 'احذف {{label}}',
    deletePermanently: 'تجاوز السلة واحذف بشكل دائم',
    deleting: 'يتمّ الحذف...',
    depth: 'عمق',
@@ -335,6 +336,7 @@ export const arTranslations: DefaultTranslationsObject = {
    moveUp: 'التّحريك إلى الأعلى',
    moving: 'التحرك',
    movingCount: 'نقل {{count}} {{label}}',
+    newLabel: 'جديد {{label}}',
    newPassword: 'كلمة مرور جديدة',
    next: 'التالي',
    no: 'لا',
--- a/packages/translations/src/languages/az.ts
+++ b/packages/translations/src/languages/az.ts
@@ -288,6 +288,7 @@ export const azTranslations: DefaultTranslationsObject = {
    deletedAt: 'Silinib Tarixi',
    deletedCountSuccessfully: '{{count}} {{label}} uğurla silindi.',
    deletedSuccessfully: 'Uğurla silindi.',
+    deleteLabel: '{{label}} silin',
    deletePermanently: 'Çöplüyü atlayın və daimi olaraq silin',
    deleting: 'Silinir...',
    depth: 'Dərinlik',
@@ -348,6 +349,7 @@ export const azTranslations: DefaultTranslationsObject = {
    moveUp: 'Yuxarı hərəkət et',
    moving: 'Hərəkət edir',
    movingCount: '{{count}} {{label}} köçürülür',
+    newLabel: 'Yeni {{label}}',
    newPassword: 'Yeni şifrə',
    next: 'Növbəti',
    no: 'Xeyr',
--- a/packages/translations/src/languages/bg.ts
+++ b/packages/translations/src/languages/bg.ts
@@ -285,6 +285,7 @@ export const bgTranslations: DefaultTranslationsObject = {
    deletedAt: 'Изтрито на',
    deletedCountSuccessfully: 'Изтрити {{count}} {{label}} успешно.',
    deletedSuccessfully: 'Изтрито успешно.',
+    deleteLabel: 'Изтрий {{label}}',
    deletePermanently: 'Пропуснете кошчето и изтрийте перманентно',
    deleting: 'Изтриване...',
    depth: 'Дълбочина',
@@ -345,6 +346,7 @@ export const bgTranslations: DefaultTranslationsObject = {
    moveUp: 'Нагоре',
    moving: 'Преместване',
    movingCount: 'Преместване на {{count}} {{label}}',
+    newLabel: 'Нов {{label}}',
    newPassword: 'Нова парола',
    next: 'Следващ',
    no: 'Не',
--- a/packages/translations/src/languages/bnBd.ts
+++ b/packages/translations/src/languages/bnBd.ts
@@ -290,6 +290,7 @@ export const bnBdTranslations: DefaultTranslationsObject = {
    deletedAt: 'মুছে ফেলার সময়',
    deletedCountSuccessfully: '{{count}} {{label}} সফলভাবে মুছে ফেলা হয়েছে।',
    deletedSuccessfully: 'সফলভাবে মুছে ফেলা হয়েছে।',
+    deleteLabel: '{{label}} মুছে ফেলুন',
    deletePermanently: 'ট্র্যাশ এড়িয়ে স্থায়ীভাবে মুছুন',
    deleting: 'মুছে ফেলা হচ্ছে...',
    depth: 'গভীরতা',
@@ -350,6 +351,7 @@ export const bnBdTranslations: DefaultTranslationsObject = {
    moveUp: 'উপরে সরান',
    moving: 'স্থানান্তর করা হচ্ছে',
    movingCount: '{{count}} {{label}} স্থানান্তর করা হচ্ছে',
+    newLabel: 'নতুন {{label}}',
    newPassword: 'নতুন পাসওয়ার্ড',
    next: 'পরবর্তী',
    no: 'না',
--- a/packages/translations/src/languages/bnIn.ts
+++ b/packages/translations/src/languages/bnIn.ts
@@ -289,6 +289,7 @@ export const bnInTranslations: DefaultTranslationsObject = {
    deletedAt: 'মুছে ফেলার সময়',
    deletedCountSuccessfully: '{{count}} {{label}} সফলভাবে মুছে ফেলা হয়েছে।',
    deletedSuccessfully: 'সফলভাবে মুছে ফেলা হয়েছে।',
+    deleteLabel: '{{label}} মুছে ফেলুন',
    deletePermanently: 'ট্র্যাশ এড়িয়ে চিরতরে মুছে ফেলুন',
    deleting: 'মুছে ফেলা হচ্ছে...',
    depth: 'গভীরতা',
@@ -349,6 +350,7 @@ export const bnInTranslations: DefaultTranslationsObject = {
    moveUp: 'উপরে সরান',
    moving: 'স্থানান্তর করা হচ্ছে',
    movingCount: '{{count}} {{label}} স্থানান্তর করা হচ্ছে',
+    newLabel: 'নতুন {{label}}',
    newPassword: 'নতুন পাসওয়ার্ড',
    next: 'পরবর্তী',
    no: 'না',
--- a/packages/translations/src/languages/ca.ts
+++ b/packages/translations/src/languages/ca.ts
@@ -287,6 +287,7 @@ export const caTranslations: DefaultTranslationsObject = {
    deletedAt: 'Eliminat en',
    deletedCountSuccessfully: 'Eliminat {{count}} {{label}} correctament.',
    deletedSuccessfully: 'Eliminat correntament.',
+    deleteLabel: 'Esborra {{label}}',
    deletePermanently: 'Omet la paperera i elimina permanentment',
    deleting: 'Eliminant...',
    depth: 'Profunditat',
@@ -347,6 +348,7 @@ export const caTranslations: DefaultTranslationsObject = {
    moveUp: 'Move amunt',
    moving: 'En moviment',
    movingCount: 'Moure {{count}} {{label}}',
+    newLabel: 'Nou {{label}}',
    newPassword: 'Nova contrasenya',
    next: 'Seguent',
    no: 'No',
--- a/packages/translations/src/languages/cs.ts
+++ b/packages/translations/src/languages/cs.ts
@@ -284,6 +284,7 @@ export const csTranslations: DefaultTranslationsObject = {
    deletedAt: 'Smazáno dne',
    deletedCountSuccessfully: 'Úspěšně smazáno {{count}} {{label}}.',
    deletedSuccessfully: 'Úspěšně odstraněno.',
+    deleteLabel: 'Smazat {{label}}',
    deletePermanently: 'Preskočit koš a smazat trvale',
    deleting: 'Odstraňování...',
    depth: 'Hloubka',
@@ -344,6 +345,7 @@ export const csTranslations: DefaultTranslationsObject = {
    moveUp: 'Posunout nahoru',
    moving: 'Přesun',
    movingCount: 'Přesunout {{count}} {{label}}',
+    newLabel: 'Nový {{label}}',
    newPassword: 'Nové heslo',
    next: 'Další',
    no: 'Ne',
--- a/packages/translations/src/languages/da.ts
+++ b/packages/translations/src/languages/da.ts
@@ -284,6 +284,7 @@ export const daTranslations: DefaultTranslationsObject = {
    deletedAt: 'Slettet Ved',
    deletedCountSuccessfully: 'Slettet {{count}} {{label}}.',
    deletedSuccessfully: 'Slettet.',
+    deleteLabel: 'Slet {{label}}',
    deletePermanently: 'Spring affald over og slet permanent',
    deleting: 'Sletter...',
    depth: 'Dybde',
@@ -344,6 +345,7 @@ export const daTranslations: DefaultTranslationsObject = {
    moveUp: 'Ryk op',
    moving: 'Flytter',
    movingCount: 'Flytter {{count}} {{label}}',
+    newLabel: 'Ny {{label}}',
    newPassword: 'Ny adgangskode',
    next: 'Næste',
    no: 'Nej',
--- a/packages/translations/src/languages/de.ts
+++ b/packages/translations/src/languages/de.ts
@@ -295,6 +295,7 @@ export const deTranslations: DefaultTranslationsObject = {
    deletedAt: 'Gelöscht am',
    deletedCountSuccessfully: '{{count}} {{label}} erfolgreich gelöscht.',
    deletedSuccessfully: 'Erfolgreich gelöscht.',
+    deleteLabel: '{{label}} löschen',
    deletePermanently: 'Überspringen Sie den Papierkorb und löschen Sie dauerhaft.',
    deleting: 'Löschen...',
    depth: 'Tiefe',
@@ -355,6 +356,7 @@ export const deTranslations: DefaultTranslationsObject = {
    moveUp: 'Nach oben bewegen',
    moving: 'Umziehen',
    movingCount: 'Verschieben {{count}} {{label}}',
+    newLabel: 'Neu {{label}}',
    newPassword: 'Neues Passwort',
    next: 'Nächste',
    no: 'Nein',
--- a/packages/translations/src/languages/en.ts
+++ b/packages/translations/src/languages/en.ts
@@ -289,6 +289,7 @@ export const enTranslations = {
    deletedAt: 'Deleted At',
    deletedCountSuccessfully: 'Deleted {{count}} {{label}} successfully.',
    deletedSuccessfully: 'Deleted successfully.',
+    deleteLabel: 'Delete {{label}}',
    deletePermanently: 'Skip trash and delete permanently',
    deleting: 'Deleting...',
    depth: 'Depth',
@@ -349,6 +350,7 @@ export const enTranslations = {
    moveUp: 'Move Up',
    moving: 'Moving',
    movingCount: 'Moving {{count}} {{label}}',
+    newLabel: 'New {{label}}',
    newPassword: 'New Password',
    next: 'Next',
    no: 'No',
--- a/packages/translations/src/languages/es.ts
+++ b/packages/translations/src/languages/es.ts
@@ -291,6 +291,7 @@ export const esTranslations: DefaultTranslationsObject = {
    deletedAt: 'Eliminado En',
    deletedCountSuccessfully: 'Se eliminaron {{count}} {{label}} correctamente.',
    deletedSuccessfully: 'Eliminado correctamente.',
+    deleteLabel: 'Eliminar {{label}}',
    deletePermanently: 'Omitir la papelera y eliminar permanentemente',
    deleting: 'Eliminando...',
    depth: 'Profundidad',
@@ -351,6 +352,7 @@ export const esTranslations: DefaultTranslationsObject = {
    moveUp: 'Mover arriba',
    moving: 'Moviendo',
    movingCount: 'Moviendo {{count}} {{label}}',
+    newLabel: 'Nuevo {{label}}',
    newPassword: 'Nueva contraseña',
    next: 'Siguiente',
    no: 'No',
--- a/packages/translations/src/languages/et.ts
+++ b/packages/translations/src/languages/et.ts
@@ -283,6 +283,7 @@ export const etTranslations: DefaultTranslationsObject = {
    deletedAt: 'Kustutatud',
    deletedCountSuccessfully: 'Kustutatud {{count}} {{label}} edukalt.',
    deletedSuccessfully: 'Kustutatud edukalt.',
+    deleteLabel: 'Kustuta {{label}}',
    deletePermanently: 'Jäta prügikasti vahele ja kustuta lõplikult',
    deleting: 'Kustutamine...',
    depth: 'Sügavus',
@@ -342,6 +343,7 @@ export const etTranslations: DefaultTranslationsObject = {
    moveUp: 'Liiguta üles',
    moving: 'Liikumine',
    movingCount: 'Liigutan {{count}} {{label}}',
+    newLabel: 'Uus {{label}}',
    newPassword: 'Uus parool',
    next: 'Järgmine',
    no: 'Ei',
--- a/packages/translations/src/languages/fa.ts
+++ b/packages/translations/src/languages/fa.ts
@@ -282,6 +282,7 @@ export const faTranslations: DefaultTranslationsObject = {
    deletedAt: 'حذف شده در',
    deletedCountSuccessfully: 'تعداد {{count}} {{label}} با موفقیت پاک گردید.',
    deletedSuccessfully: 'با موفقیت حذف شد.',
+    deleteLabel: 'حذف {{label}}',
    deletePermanently: 'پرش از سطل زباله و حذف دائمی',
    deleting: 'در حال حذف...',
    depth: 'عمق',
@@ -342,6 +343,7 @@ export const faTranslations: DefaultTranslationsObject = {
    moveUp: 'حرکت به بالا',
    moving: 'در حال حرکت',
    movingCount: 'انتقال {{count}} {{label}}',
+    newLabel: 'جدید {{label}}',
    newPassword: 'گذرواژه تازه',
    next: 'بعدی',
    no: 'نه',
--- a/packages/translations/src/languages/fr.ts
+++ b/packages/translations/src/languages/fr.ts
@@ -296,6 +296,7 @@ export const frTranslations: DefaultTranslationsObject = {
    deletedAt: 'Supprimé à',
    deletedCountSuccessfully: '{{count}} {{label}} supprimé avec succès.',
    deletedSuccessfully: 'Supprimé(e) avec succès.',
+    deleteLabel: 'Supprimer {{label}}',
    deletePermanently: 'Ignorer la corbeille et supprimer définitivement',
    deleting: 'Suppression en cours...',
    depth: 'Profondeur',
@@ -356,6 +357,7 @@ export const frTranslations: DefaultTranslationsObject = {
    moveUp: 'Déplacer vers le haut',
    moving: 'Déménagement',
    movingCount: 'Déplacement de {{count}} {{label}}',
+    newLabel: 'Nouveau {{label}}',
    newPassword: 'Nouveau mot de passe',
    next: 'Prochain',
    no: 'Non',
--- a/packages/translations/src/languages/he.ts
+++ b/packages/translations/src/languages/he.ts
@@ -276,6 +276,7 @@ export const heTranslations: DefaultTranslationsObject = {
    deletedAt: 'נמחק ב',
    deletedCountSuccessfully: 'נמחקו {{count}} {{label}} בהצלחה.',
    deletedSuccessfully: 'נמחק בהצלחה.',
+    deleteLabel: 'מחק {{label}}',
    deletePermanently: 'דלג על פח האשפה ומחק לצמיתות',
    deleting: 'מוחק...',
    depth: 'עומק',
@@ -335,6 +336,7 @@ export const heTranslations: DefaultTranslationsObject = {
    moveUp: 'הזז למעלה',
    moving: 'מזיז',
    movingCount: 'מזיז {{count}} {{label}}',
+    newLabel: 'חדש {{label}}',
    newPassword: 'סיסמה חדשה',
    next: 'הבא',
    no: 'לא',
--- a/packages/translations/src/languages/hr.ts
+++ b/packages/translations/src/languages/hr.ts
@@ -286,6 +286,7 @@ export const hrTranslations: DefaultTranslationsObject = {
    deletedAt: 'Izbrisano U',
    deletedCountSuccessfully: 'Uspješno izbrisano {{count}} {{label}}.',
    deletedSuccessfully: 'Uspješno izbrisano.',
+    deleteLabel: 'Izbriši {{label}}',
    deletePermanently: 'Preskoči koš i trajno izbriši',
    deleting: 'Brisanje...',
    depth: 'Dubina',
@@ -346,6 +347,7 @@ export const hrTranslations: DefaultTranslationsObject = {
    moveUp: 'Pomakni gore',
    moving: 'Pomicanje',
    movingCount: 'Pomicanje {{count}} {{label}}',
+    newLabel: 'Novi {{label}}',
    newPassword: 'Nova lozinka',
    next: 'Sljedeće',
    no: 'Ne',
--- a/packages/translations/src/languages/hu.ts
+++ b/packages/translations/src/languages/hu.ts
@@ -290,6 +290,7 @@ export const huTranslations: DefaultTranslationsObject = {
    deletedAt: 'Törölve Ekkor',
    deletedCountSuccessfully: '{{count}} {{label}} sikeresen törölve.',
    deletedSuccessfully: 'Sikeresen törölve.',
+    deleteLabel: 'Törölje a {{label}}-t',
    deletePermanently: 'Hagyja ki a kukát és törölje véglegesen',
    deleting: 'Törlés...',
    depth: 'Mélység',
@@ -349,6 +350,7 @@ export const huTranslations: DefaultTranslationsObject = {
    moveUp: 'Mozgatás felfelé',
    moving: 'Költözés',
    movingCount: '{{Count}} {{label}} mozgatása',
+    newLabel: 'Új {{label}}',
    newPassword: 'Új jelszó',
    next: 'Következő',
    no: 'Nem',
--- a/packages/translations/src/languages/hy.ts
+++ b/packages/translations/src/languages/hy.ts
@@ -287,6 +287,7 @@ export const hyTranslations: DefaultTranslationsObject = {
    deletedAt: 'Ջնջված է',
    deletedCountSuccessfully: '{{count}} {{label}} հաջողությամբ ջնջված է։',
    deletedSuccessfully: 'Հաջողությամբ ջնջված է։',
+    deleteLabel: 'Ջնջել {{label}}',
    deletePermanently: 'Բաց թողեք աղբատուփը և հեռացրեք հավերժ:',
    deleting: 'Ջնջվում է...',
    depth: 'Խորություն',
@@ -347,6 +348,7 @@ export const hyTranslations: DefaultTranslationsObject = {
    moveUp: 'Տեղափոխել վերև',
    moving: 'Տեղափոխվում',
    movingCount: 'Տեղափոխվում է {{count}} {{label}}',
+    newLabel: 'Նոր {{label}}',
    newPassword: 'Նոր գաղտնաբառ',
    next: 'Հաջորդ',
    no: 'Ոչ',
--- a/packages/translations/src/languages/id.ts
+++ b/packages/translations/src/languages/id.ts
@@ -290,6 +290,7 @@ export const idTranslations = {
    deletedAt: 'Dihapus Pada',
    deletedCountSuccessfully: 'Berhasil menghapus {{count}} {{label}}.',
    deletedSuccessfully: 'Berhasil dihapus.',
+    deleteLabel: 'Hapus {{label}}',
    deletePermanently: 'Lewati tempat sampah dan hapus secara permanen',
    deleting: 'Menghapus...',
    depth: 'Kedalaman',
@@ -350,6 +351,7 @@ export const idTranslations = {
    moveUp: 'Pindah ke Atas',
    moving: 'Memindahkan',
    movingCount: 'Memindahkan {{count}} {{label}}',
+    newLabel: '',
    newPassword: 'Kata Sandi Baru',
    next: 'Berikutnya',
    no: 'Tidak',
--- a/packages/translations/src/languages/it.ts
+++ b/packages/translations/src/languages/it.ts
@@ -289,6 +289,7 @@ export const itTranslations: DefaultTranslationsObject = {
    deletedAt: 'Cancellato Alle',
    deletedCountSuccessfully: '{{count}} {{label}} eliminato con successo.',
    deletedSuccessfully: 'Eliminato con successo.',
+    deleteLabel: 'Elimina {{label}}',
    deletePermanently: 'Salta il cestino ed elimina definitivamente',
    deleting: 'Sto eliminando...',
    depth: 'Profondità',
@@ -348,6 +349,7 @@ export const itTranslations: DefaultTranslationsObject = {
    moveUp: 'Sposta sopra',
    moving: 'In movimento',
    movingCount: 'Spostando {{count}} {{label}}',
+    newLabel: 'Nuovo {{label}}',
    newPassword: 'Nuova Password',
    next: 'Successivo',
    no: 'No',
--- a/packages/translations/src/languages/ja.ts
+++ b/packages/translations/src/languages/ja.ts
@@ -288,6 +288,7 @@ export const jaTranslations: DefaultTranslationsObject = {
    deletedAt: '削除された時間',
    deletedCountSuccessfully: '{{count}}つの{{label}}を正常に削除しました。',
    deletedSuccessfully: '正常に削除されました。',
+    deleteLabel: '{{label}}を削除します。',
    deletePermanently: 'ゴミ箱をスキップして完全に削除します',
    deleting: '削除しています...',
    depth: '深さ',
@@ -348,6 +349,7 @@ export const jaTranslations: DefaultTranslationsObject = {
    moveUp: '上へ移動',
    moving: '移動中',
    movingCount: '{{count}} {{label}}を移動します',
+    newLabel: '新しい {{label}}',
    newPassword: '新しいパスワード',
    next: '次',
    no: 'いいえ',
--- a/packages/translations/src/languages/ko.ts
+++ b/packages/translations/src/languages/ko.ts
@@ -283,6 +283,7 @@ export const koTranslations: DefaultTranslationsObject = {
    deletedAt: '삭제된 시간',
    deletedCountSuccessfully: '{{count}}개의 {{label}}를 삭제했습니다.',
    deletedSuccessfully: '삭제되었습니다.',
+    deleteLabel: '{{label}} 삭제',
    deletePermanently: '휴지통 건너뛰고 영구적으로 삭제하세요',
    deleting: '삭제 중...',
    depth: '깊이',
@@ -343,6 +344,7 @@ export const koTranslations: DefaultTranslationsObject = {
    moveUp: '위로 이동',
    moving: '이동하는',
    movingCount: '{{count}} {{label}}을(를) 이동시킵니다.',
+    newLabel: '새로운 {{label}}',
    newPassword: '새 비밀번호',
    next: '다음',
    no: '아니요',
--- a/packages/translations/src/languages/lt.ts
+++ b/packages/translations/src/languages/lt.ts
@@ -289,6 +289,7 @@ export const ltTranslations: DefaultTranslationsObject = {
    deletedAt: 'Ištrinta',
    deletedCountSuccessfully: 'Sėkmingai ištrinta {{count}} {{label}}.',
    deletedSuccessfully: 'Sėkmingai ištrinta.',
+    deleteLabel: 'Ištrinti {{label}}',
    deletePermanently: 'Praleiskite šiukšliadėžę ir ištrinkite visam laikui',
    deleting: 'Trinama...',
    depth: 'Gylis',
@@ -349,6 +350,7 @@ export const ltTranslations: DefaultTranslationsObject = {
    moveUp: 'Pakilti',
    moving: 'Keliauja',
    movingCount: 'Perkeliama {{count}} {{label}}',
+    newLabel: 'Naujas {{label}}',
    newPassword: 'Naujas slaptažodis',
    next: 'Toliau',
    no: 'Ne',
--- a/packages/translations/src/languages/lv.ts
+++ b/packages/translations/src/languages/lv.ts
@@ -287,6 +287,7 @@ export const lvTranslations: DefaultTranslationsObject = {
    deletedAt: 'Dzēsts datumā',
    deletedCountSuccessfully: 'Veiksmīgi izdzēsti {{count}} {{label}}.',
    deletedSuccessfully: 'Veiksmīgi izdzēsts.',
+    deleteLabel: 'Dzēst {{label}}',
    deletePermanently: 'Izlaidiet miskasti un dzēsiet neatgriezeniski',
    deleting: 'Dzēš...',
    depth: 'Dziļums',
@@ -347,6 +348,7 @@ export const lvTranslations: DefaultTranslationsObject = {
    moveUp: 'Pārvietot uz augšu',
    moving: 'Pārvietojas',
    movingCount: 'Pārvietojot {{count}} {{label}}',
+    newLabel: 'Jauns {{label}}',
    newPassword: 'Jauna parole',
    next: 'Nākamais',
    no: 'Nē',
--- a/packages/translations/src/languages/my.ts
+++ b/packages/translations/src/languages/my.ts
@@ -288,6 +288,7 @@ export const myTranslations: DefaultTranslationsObject = {
    deletedAt: 'Dihapus Pada',
    deletedCountSuccessfully: '{{count}} {{label}} ကို အောင်မြင်စွာ ဖျက်လိုက်ပါပြီ။',
    deletedSuccessfully: 'အောင်မြင်စွာ ဖျက်လိုက်ပါပြီ။',
+    deleteLabel: 'Padam {{label}}',
    deletePermanently: 'Langkau sampah dan padam secara kekal',
    deleting: 'ဖျက်နေဆဲ ...',
    depth: 'ထိုင်းအောက်မှု',
@@ -348,6 +349,7 @@ export const myTranslations: DefaultTranslationsObject = {
    moveUp: 'Move Up',
    moving: 'ရွှေ့ပြောင်းခြင်း',
    movingCount: 'Memindahkan {{count}} {{label}}',
+    newLabel: 'Baru {{label}}',
    newPassword: 'စကားဝှက် အသစ်',
    next: 'Seterusnya',
    no: 'Tidak',
--- a/packages/translations/src/languages/nb.ts
+++ b/packages/translations/src/languages/nb.ts
@@ -285,6 +285,7 @@ export const nbTranslations: DefaultTranslationsObject = {
    deletedAt: 'Slettet kl.',
    deletedCountSuccessfully: 'Slettet {{count}} {{label}}.',
    deletedSuccessfully: 'Slettet.',
+    deleteLabel: 'Slett {{label}}',
    deletePermanently: 'Hopp over søppel og slett permanent',
    deleting: 'Sletter...',
    depth: 'Dybde',
@@ -345,6 +346,7 @@ export const nbTranslations: DefaultTranslationsObject = {
    moveUp: 'Flytt opp',
    moving: 'Flytting',
    movingCount: 'Flytter {{count}} {{label}}',
+    newLabel: 'Ny {{label}}',
    newPassword: 'Nytt passord',
    next: 'Neste',
    no: 'Nei',
--- a/packages/translations/src/languages/nl.ts
+++ b/packages/translations/src/languages/nl.ts
@@ -293,6 +293,7 @@ export const nlTranslations: DefaultTranslationsObject = {
    deletedAt: 'Verwijderd Op',
    deletedCountSuccessfully: '{{count}} {{label}} succesvol verwijderd.',
    deletedSuccessfully: 'Succesvol verwijderd.',
+    deleteLabel: 'Verwijder {{label}}',
    deletePermanently: 'Overslaan prullenbak en permanent verwijderen',
    deleting: 'Verwijderen...',
    depth: 'Diepte',
@@ -353,6 +354,7 @@ export const nlTranslations: DefaultTranslationsObject = {
    moveUp: 'Verplaats naar boven',
    moving: 'Verhuizen',
    movingCount: 'Verplaatsen {{count}} {{label}}',
+    newLabel: 'Nieuw {{label}}',
    newPassword: 'Nieuw wachtwoord',
    next: 'Volgende',
    no: 'Nee',
--- a/packages/translations/src/languages/pl.ts
+++ b/packages/translations/src/languages/pl.ts
@@ -285,6 +285,7 @@ export const plTranslations: DefaultTranslationsObject = {
    deletedAt: 'Usunięto o',
    deletedCountSuccessfully: 'Pomyślnie usunięto {{count}} {{label}}.',
    deletedSuccessfully: 'Pomyślnie usunięto.',
+    deleteLabel: 'Usuń {{label}}',
    deletePermanently: 'Pomiń kosz i usuń na stałe',
    deleting: 'Usuwanie...',
    depth: 'Głębokość',
@@ -345,6 +346,7 @@ export const plTranslations: DefaultTranslationsObject = {
    moveUp: 'Przesuń wyżej',
    moving: 'Przeprowadzka',
    movingCount: 'Przenoszenie {{count}} {{label}}',
+    newLabel: 'Nowy {{label}}',
    newPassword: 'Nowe hasło',
    next: 'Następny',
    no: 'Nie',
--- a/packages/translations/src/languages/pt.ts
+++ b/packages/translations/src/languages/pt.ts
@@ -287,6 +287,7 @@ export const ptTranslations: DefaultTranslationsObject = {
    deletedAt: 'Excluído Em',
    deletedCountSuccessfully: 'Excluído {{count}} {{label}} com sucesso.',
    deletedSuccessfully: 'Apagado com sucesso.',
+    deleteLabel: 'Apagar {{label}}',
    deletePermanently: 'Pular lixeira e excluir permanentemente',
    deleting: 'Excluindo...',
    depth: 'Profundidade',
@@ -347,6 +348,7 @@ export const ptTranslations: DefaultTranslationsObject = {
    moveUp: 'Mover para Cima',
    moving: 'Mudando',
    movingCount: 'Movendo {{count}} {{label}}',
+    newLabel: 'Novo {{label}}',
    newPassword: 'Nova Senha',
    next: 'Próximo',
    no: 'Não',
--- a/packages/translations/src/languages/ro.ts
+++ b/packages/translations/src/languages/ro.ts
@@ -291,6 +291,7 @@ export const roTranslations: DefaultTranslationsObject = {
    deletedAt: 'Șters la',
    deletedCountSuccessfully: 'Șterse cu succes {{count}} {{label}}.',
    deletedSuccessfully: 'Șters cu succes.',
+    deleteLabel: 'Șterge {{label}}',
    deletePermanently: 'Omite coșul și șterge definitiv',
    deleting: 'Deleting...',
    depth: 'Adâncime',
@@ -351,6 +352,7 @@ export const roTranslations: DefaultTranslationsObject = {
    moveUp: 'Mutați în sus',
    moving: 'În mișcare',
    movingCount: 'Mutarea {{count}} {{eticheta}}',
+    newLabel: 'Nou {{label}}',
    newPassword: 'Parolă nouă',
    next: 'Următorul',
    no: 'Nu',
--- a/packages/translations/src/languages/rs.ts
+++ b/packages/translations/src/languages/rs.ts
@@ -287,6 +287,7 @@ export const rsTranslations: DefaultTranslationsObject = {
    deletedAt: 'Obrisano u',
    deletedCountSuccessfully: 'Успешно избрисано {{count}} {{label}}.',
    deletedSuccessfully: 'Успешно избрисано.',
+    deleteLabel: 'Izbriši {{label}}',
    deletePermanently: 'Preskoči otpad i trajno izbriši',
    deleting: 'Брисање...',
    depth: 'Dubina',
@@ -347,6 +348,7 @@ export const rsTranslations: DefaultTranslationsObject = {
    moveUp: 'Помери горе',
    moving: 'Pomeranje',
    movingCount: 'Pomeranje {{count}} {{label}}',
+    newLabel: 'Novi {{label}}',
    newPassword: 'Нова лозинка',
    next: 'Следећи',
    no: 'Не',
--- a/packages/translations/src/languages/rsLatin.ts
+++ b/packages/translations/src/languages/rsLatin.ts
@@ -287,6 +287,7 @@ export const rsLatinTranslations: DefaultTranslationsObject = {
    deletedAt: 'Obrisano U',
    deletedCountSuccessfully: 'Uspešno izbrisano {{count}} {{label}}.',
    deletedSuccessfully: 'Uspešno izbrisano.',
+    deleteLabel: 'Obriši {{label}}',
    deletePermanently: 'Preskoči kantu za smeće i trajno izbriši',
    deleting: 'Brisanje...',
    depth: 'Dubina',
@@ -347,6 +348,7 @@ export const rsLatinTranslations: DefaultTranslationsObject = {
    moveUp: 'Pomeri gore',
    moving: 'Pomeranje',
    movingCount: 'Pomeranje {{count}} {{label}}',
+    newLabel: 'Novi {{label}}',
    newPassword: 'Nova lozinka',
    next: 'Sledeći',
    no: 'Ne',
--- a/packages/translations/src/languages/ru.ts
+++ b/packages/translations/src/languages/ru.ts
@@ -288,6 +288,7 @@ export const ruTranslations: DefaultTranslationsObject = {
    deletedAt: 'Удалено В',
    deletedCountSuccessfully: 'Удалено {{count}} {{label}} успешно.',
    deletedSuccessfully: 'Удален успешно.',
+    deleteLabel: 'Удалить {{label}}',
    deletePermanently: 'Пропустить корзину и удалить навсегда',
    deleting: 'Удаление...',
    depth: 'Глубина',
@@ -348,6 +349,7 @@ export const ruTranslations: DefaultTranslationsObject = {
    moveUp: 'Сдвинуть вверх',
    moving: 'Переезд',
    movingCount: 'Перемещение {{count}} {{label}}',
+    newLabel: 'Новый {{label}}',
    newPassword: 'Новый пароль',
    next: 'Следующий',
    no: 'Нет',
--- a/packages/translations/src/languages/sk.ts
+++ b/packages/translations/src/languages/sk.ts
@@ -287,6 +287,7 @@ export const skTranslations: DefaultTranslationsObject = {
    deletedAt: 'Vymazané dňa',
    deletedCountSuccessfully: 'Úspešne zmazané {{count}} {{label}}.',
    deletedSuccessfully: 'Úspešne odstránené.',
+    deleteLabel: 'Vymazať {{label}}',
    deletePermanently: 'Preskočiť kôš a odstrániť natrvalo',
    deleting: 'Odstraňovanie...',
    depth: 'Hĺbka',
@@ -346,6 +347,7 @@ export const skTranslations: DefaultTranslationsObject = {
    moveUp: 'Presunúť hore',
    moving: 'Pohybujúci sa',
    movingCount: 'Presunutie {{count}} {{label}}',
+    newLabel: 'Nový {{label}}',
    newPassword: 'Nové heslo',
    next: 'Ďalej',
    no: 'Nie',
--- a/packages/translations/src/languages/sl.ts
+++ b/packages/translations/src/languages/sl.ts
@@ -285,6 +285,7 @@ export const slTranslations: DefaultTranslationsObject = {
    deletedAt: 'Izbrisano ob',
    deletedCountSuccessfully: 'Uspešno izbrisano {{count}} {{label}}.',
    deletedSuccessfully: 'Uspešno izbrisano.',
+    deleteLabel: 'Izbriši {{label}}',
    deletePermanently: 'Preskoči smetnjak in trajno izbriši',
    deleting: 'Brisanje...',
    depth: 'Globina',
@@ -345,6 +346,7 @@ export const slTranslations: DefaultTranslationsObject = {
    moveUp: 'Premakni gor',
    moving: 'Premikanje',
    movingCount: 'Premikanje {{count}} {{label}}',
+    newLabel: 'Nov {{label}}',
    newPassword: 'Novo geslo',
    next: 'Naprej',
    no: 'Ne',
--- a/packages/translations/src/languages/sv.ts
+++ b/packages/translations/src/languages/sv.ts
@@ -286,6 +286,7 @@ export const svTranslations: DefaultTranslationsObject = {
    deletedAt: 'Raderad Vid',
    deletedCountSuccessfully: 'Raderade {{count}} {{label}}',
    deletedSuccessfully: 'Borttaget',
+    deleteLabel: 'Radera {{label}}',
    deletePermanently: 'Hoppa över papperskorgen och radera permanent',
    deleting: 'Tar bort...',
    depth: 'Djup',
@@ -346,6 +347,7 @@ export const svTranslations: DefaultTranslationsObject = {
    moveUp: 'Flytta upp',
    moving: 'Flyttar',
    movingCount: 'Flyttar {{count}} {{label}}',
+    newLabel: 'Ny {{label}}',
    newPassword: 'Nytt lösenord',
    next: 'Nästa',
    no: 'Nej',
--- a/packages/translations/src/languages/th.ts
+++ b/packages/translations/src/languages/th.ts
@@ -279,6 +279,7 @@ export const thTranslations: DefaultTranslationsObject = {
    deletedAt: 'ถูกลบที่',
    deletedCountSuccessfully: 'Deleted {{count}} {{label}} successfully.',
    deletedSuccessfully: 'ลบสำเร็จ',
+    deleteLabel: 'ลบ {{label}}',
    deletePermanently: 'ข้ามถังขยะและลบอย่างถาวร',
    deleting: 'กำลังลบ...',
    depth: 'ความลึก',
@@ -338,6 +339,7 @@ export const thTranslations: DefaultTranslationsObject = {
    moveUp: 'ขยับลง',
    moving: 'การย้ายที่อยู่',
    movingCount: 'ย้าย {{count}} {{label}}',
+    newLabel: 'ใหม่ {{label}}',
    newPassword: 'รหัสผ่านใหม่',
    next: 'ถัดไป',
    no: 'ไม่',
--- a/packages/translations/src/languages/tr.ts
+++ b/packages/translations/src/languages/tr.ts
@@ -289,6 +289,7 @@ export const trTranslations: DefaultTranslationsObject = {
    deletedAt: 'Silindiği Tarih',
    deletedCountSuccessfully: '{{count}} {{label}} başarıyla silindi.',
    deletedSuccessfully: 'Başarıyla silindi.',
+    deleteLabel: "{{label}}'i sil",
    deletePermanently: 'Çöpü atlayın ve kalıcı olarak silin',
    deleting: 'Siliniyor...',
    depth: 'Derinlik',
@@ -349,6 +350,7 @@ export const trTranslations: DefaultTranslationsObject = {
    moveUp: 'Yukarı taşı',
    moving: 'Taşınma',
    movingCount: '{{count}} {{label}} taşıma',
+    newLabel: 'Yeni {{label}}',
    newPassword: 'Yeni parola',
    next: 'Sonraki',
    no: 'Hayır',
--- a/packages/translations/src/languages/uk.ts
+++ b/packages/translations/src/languages/uk.ts
@@ -285,6 +285,7 @@ export const ukTranslations: DefaultTranslationsObject = {
    deletedAt: 'Видалено в',
    deletedCountSuccessfully: 'Успішно видалено {{count}} {{label}}.',
    deletedSuccessfully: 'Успішно видалено.',
+    deleteLabel: 'Видалити {{label}}',
    deletePermanently: 'Пропустити кошик та видалити назавжди',
    deleting: 'Видалення...',
    depth: 'Глибина',
@@ -345,6 +346,7 @@ export const ukTranslations: DefaultTranslationsObject = {
    moveUp: 'Перемістити вище',
    moving: 'Переїзд',
    movingCount: 'Переміщення {{count}} {{label}}',
+    newLabel: 'Новий {{label}}',
    newPassword: 'Новий пароль',
    next: 'Наступний',
    no: 'Ні',
--- a/packages/translations/src/languages/vi.ts
+++ b/packages/translations/src/languages/vi.ts
@@ -285,6 +285,7 @@ export const viTranslations: DefaultTranslationsObject = {
    deletedAt: 'Đã Xóa Lúc',
    deletedCountSuccessfully: 'Đã xóa thành công {{count}} {{label}}.',
    deletedSuccessfully: 'Đã xoá thành công.',
+    deleteLabel: 'Xóa {{label}}',
    deletePermanently: 'Bỏ qua thùng rác và xóa vĩnh viễn',
    deleting: 'Đang xóa...',
    depth: 'Độ sâu',
@@ -345,6 +346,7 @@ export const viTranslations: DefaultTranslationsObject = {
    moveUp: 'Di chuyển lên',
    moving: 'Di chuyển',
    movingCount: 'Di chuyển {{count}} {{label}}',
+    newLabel: 'Mới {{label}}',
    newPassword: 'Mật khảu mới',
    next: 'Tiếp theo',
    no: 'Không',
--- a/packages/translations/src/languages/zh.ts
+++ b/packages/translations/src/languages/zh.ts
@@ -268,6 +268,7 @@ export const zhTranslations: DefaultTranslationsObject = {
    deletedAt: '已删除时间',
    deletedCountSuccessfully: '已成功删除 {{count}} {{label}}。',
    deletedSuccessfully: '已成功删除。',
+    deleteLabel: '删除 {{label}}',
    deletePermanently: '跳过垃圾箱并永久删除',
    deleting: '删除中...',
    depth: '深度',
@@ -327,6 +328,7 @@ export const zhTranslations: DefaultTranslationsObject = {
    moveUp: '向上移动',
    moving: '移动',
    movingCount: '移动 {{count}}个{{label}}',
+    newLabel: '新的 {{label}}',
    newPassword: '新密码',
    next: '下一个',
    no: '否',
--- a/packages/translations/src/languages/zhTw.ts
+++ b/packages/translations/src/languages/zhTw.ts
@@ -269,6 +269,7 @@ export const zhTwTranslations: DefaultTranslationsObject = {
    deletedAt: '刪除時間',
    deletedCountSuccessfully: '已成功刪除 {{count}} 個 {{label}}。',
    deletedSuccessfully: '刪除成功。',
+    deleteLabel: '刪除 {{label}}',
    deletePermanently: '略過垃圾桶並永久刪除',
    deleting: '刪除中…',
    depth: '層級',
@@ -328,6 +329,7 @@ export const zhTwTranslations: DefaultTranslationsObject = {
    moveUp: '上移',
    moving: '移動中',
    movingCount: '正在移動 {{count}} 個 {{label}}',
+    newLabel: '新的 {{label}}',
    newPassword: '新密碼',
    next: '下一頁',
    no: '否',
--- a/packages/ui/src/elements/ListControls/ActiveQueryPreset/index.scss
+++ b/packages/ui/src/elements/ListControls/ActiveQueryPreset/index.scss
@@ -1,33 +0,0 @@
-@import '../../../scss/styles';
-
-@layer payload-default {
-  .active-query-preset {
-    .pill__label {
-      display: flex;
-      gap: calc(var(--base) / 4);
-      display: flex;
-      align-items: center;
-    }
-
-    &__label-text-max-width {
-      max-width: 100px;
-      overflow: hidden;
-    }
-
-    &__label-text {
-      text-overflow: ellipsis;
-      overflow: hidden;
-      white-space: nowrap;
-    }
-
-    &__label-and-clear-wrap {
-      display: flex;
-      align-items: center;
-    }
-
-    &__clear {
-      display: flex;
-      align-items: center;
-    }
-  }
-}
--- a/packages/ui/src/elements/ListControls/index.scss
+++ b/packages/ui/src/elements/ListControls/index.scss
@@ -2,19 +2,48 @@

@layer payload-default {
  .list-controls {
+    display: flex;
+    flex-direction: column;
+    gap: 2px;
+
    &__wrap {
      display: flex;
      align-items: center;
+      justify-content: space-between;
+      gap: base(0.5);
      background-color: var(--theme-elevation-50);
      border-radius: var(--style-radius-m);
-      padding: base(0.6);
-      gap: base(0.6);
+    }
+
+    &__search {
+      display: flex;
+      background-color: var(--theme-elevation-50);
+      border-radius: var(--style-radius-m);
+      gap: base(0.4);
+      flex-grow: 1;
+      position: relative;
+
+      .icon {
+        flex-shrink: 0;
+      }
+    }
+
+    .icon--search {
+      position: absolute;
+      left: 0;
+      top: 50%;
+      transform: translate3d(0, -50%, 0);
+      inset-inline-start: base(0.4);
+      z-index: 1;
+      pointer-events: none;
    }

    .search-filter {
      flex-grow: 1;

      input {
+        height: 46px;
+        padding-left: 36px;
        margin: 0;
      }
    }
@@ -24,14 +53,11 @@
      border-radius: 0;
    }

-    &__modified {
-      color: var(--theme-elevation-500);
-    }
-
-    &__buttons-wrap {
+    &__buttons {
      display: flex;
      align-items: center;
      gap: calc(var(--base) / 4);
+      padding-right: 10px;
    }

    .pill-selector,
@@ -43,34 +69,25 @@

    @include small-break {
      &__wrap {
-        flex-wrap: wrap;
-        background-color: unset;
-        padding: 0;
-        position: relative;
-      }
-
-      .icon--search {
-        position: absolute;
-        top: base(0.4);
-        inset-inline-start: base(0.4);
-        z-index: 1;
+        flex-direction: column;
+        align-items: stretch;
+        background-color: transparent;
+        border-radius: 0;
      }

      .search-filter {
        width: 100%;
+
        input {
-          padding: base(0.4) base(2);
+          height: 40px;
+          padding: 0 base(1.5);
        }
      }

-      &__buttons-wrap {
-        [dir='ltr'] & {
-          margin-right: 0;
-        }
-
-        [dir='rtl'] & {
-          margin-left: 0;
-        }
+      &__buttons {
+        padding-right: 0;
+        margin: 0;
+        width: 100%;

        .pill {
          padding: base(0.2) base(0.2) base(0.2) base(0.4);
@@ -78,11 +95,6 @@
        }
      }

-      &__buttons {
-        margin: 0;
-        width: 100%;
-      }
-
      .pill-selector,
      .where-builder,
      .sort-complex {
--- a/packages/ui/src/elements/ListControls/index.tsx
+++ b/packages/ui/src/elements/ListControls/index.tsx
@@ -7,7 +7,7 @@ import React, { Fragment, useEffect, useRef, useState } from 'react'

 import type { ListControlsProps } from './types.js'

-import { Popup, PopupList } from '../../elements/Popup/index.js'
+import { Popup } from '../../elements/Popup/index.js'
 import { useUseTitleField } from '../../hooks/useUseAsTitle.js'
 import { ChevronIcon } from '../../icons/Chevron/index.js'
 import { Dots } from '../../icons/Dots/index.js'
@@ -18,11 +18,10 @@ import { AnimateHeight } from '../AnimateHeight/index.js'
 import { ColumnSelector } from '../ColumnSelector/index.js'
 import { GroupByBuilder } from '../GroupByBuilder/index.js'
 import { Pill } from '../Pill/index.js'
+import { QueryPresetBar } from '../QueryPresets/QueryPresetBar/index.js'
 import { SearchFilter } from '../SearchFilter/index.js'
 import { WhereBuilder } from '../WhereBuilder/index.js'
-import { ActiveQueryPreset } from './ActiveQueryPreset/index.js'
 import { getTextFieldsToBeSearched } from './getTextFieldsToBeSearched.js'
-import { useQueryPresets } from './useQueryPresets.js'
 import './index.scss'

 const baseClass = 'list-controls'
@@ -41,7 +40,7 @@ export const ListControls: React.FC<ListControlsProps> = (props) => {
    enableColumns = true,
    enableFilters = true,
    enableSort = false,
-    listMenuItems: listMenuItemsFromProps,
+    listMenuItems,
    queryPreset: activePreset,
    queryPresetPermissions,
    renderedFilters,
@@ -50,21 +49,6 @@ export const ListControls: React.FC<ListControlsProps> = (props) => {

  const { handleSearchChange, query } = useListQuery()

-  const {
-    CreateNewPresetDrawer,
-    DeletePresetModal,
-    EditPresetDrawer,
-    hasModifiedPreset,
-    openPresetListDrawer,
-    PresetListDrawer,
-    queryPresetMenuItems,
-    resetPreset,
-  } = useQueryPresets({
-    activePreset,
-    collectionSlug,
-    queryPresetPermissions,
-  })
-
  const titleField = useUseTitleField(collectionConfig)
  const { i18n, t } = useTranslation()

@@ -139,25 +123,17 @@ export const ListControls: React.FC<ListControlsProps> = (props) => {
    }
  }, [t, listSearchableFields, i18n, searchLabel])

-  let listMenuItems: React.ReactNode[] = listMenuItemsFromProps
-
-  if (
-    collectionConfig.enableQueryPresets &&
-    !disableQueryPresets &&
-    queryPresetMenuItems?.length > 0
-  ) {
-    // Cannot push or unshift into `listMenuItemsFromProps` as it will mutate the original array
-    listMenuItems = [
-      ...queryPresetMenuItems,
-      listMenuItemsFromProps?.length > 0 ? <PopupList.Divider key="divider" /> : null,
-      ...(listMenuItemsFromProps || []),
-    ]
-  }
-
  return (
-    <Fragment>
-      <div className={baseClass}>
-        <div className={`${baseClass}__wrap`}>
+    <div className={baseClass}>
+      {collectionConfig?.enableQueryPresets && !disableQueryPresets && (
+        <QueryPresetBar
+          activePreset={activePreset}
+          collectionSlug={collectionSlug}
+          queryPresetPermissions={queryPresetPermissions}
+        />
+      )}
+      <div className={`${baseClass}__wrap`}>
+        <div className={`${baseClass}__search`}>
          <SearchIcon />
          <SearchFilter
            handleChange={handleSearchChange}
@@ -165,136 +141,116 @@ export const ListControls: React.FC<ListControlsProps> = (props) => {
            label={searchLabelTranslated.current}
            searchQueryParam={query?.search}
          />
-          {activePreset && hasModifiedPreset ? (
-            <div className={`${baseClass}__modified`}>Modified</div>
-          ) : null}
-          <div className={`${baseClass}__buttons`}>
-            <div className={`${baseClass}__buttons-wrap`}>
-              {!smallBreak && <React.Fragment>{beforeActions && beforeActions}</React.Fragment>}
-              {enableColumns && (
-                <Pill
-                  aria-controls={`${baseClass}-columns`}
-                  aria-expanded={visibleDrawer === 'columns'}
-                  className={`${baseClass}__toggle-columns`}
-                  icon={<ChevronIcon direction={visibleDrawer === 'columns' ? 'up' : 'down'} />}
-                  id="toggle-columns"
-                  onClick={() =>
-                    setVisibleDrawer(visibleDrawer !== 'columns' ? 'columns' : undefined)
-                  }
-                  pillStyle="light"
-                  size="small"
-                >
-                  {t('general:columns')}
-                </Pill>
-              )}
-              {enableFilters && (
-                <Pill
-                  aria-controls={`${baseClass}-where`}
-                  aria-expanded={visibleDrawer === 'where'}
-                  className={`${baseClass}__toggle-where`}
-                  icon={<ChevronIcon direction={visibleDrawer === 'where' ? 'up' : 'down'} />}
-                  id="toggle-list-filters"
-                  onClick={() => setVisibleDrawer(visibleDrawer !== 'where' ? 'where' : undefined)}
-                  pillStyle="light"
-                  size="small"
-                >
-                  {t('general:filters')}
-                </Pill>
-              )}
-              {enableSort && (
-                <Pill
-                  aria-controls={`${baseClass}-sort`}
-                  aria-expanded={visibleDrawer === 'sort'}
-                  className={`${baseClass}__toggle-sort`}
-                  icon={<ChevronIcon />}
-                  onClick={() => setVisibleDrawer(visibleDrawer !== 'sort' ? 'sort' : undefined)}
-                  pillStyle="light"
-                  size="small"
-                >
-                  {t('general:sort')}
-                </Pill>
-              )}
-              {!disableQueryPresets && (
-                <ActiveQueryPreset
-                  activePreset={activePreset}
-                  openPresetListDrawer={openPresetListDrawer}
-                  resetPreset={resetPreset}
-                />
-              )}
-              {collectionConfig.admin.groupBy && (
-                <Pill
-                  aria-controls={`${baseClass}-group-by`}
-                  aria-expanded={visibleDrawer === 'group-by'}
-                  className={`${baseClass}__toggle-group-by`}
-                  icon={<ChevronIcon direction={visibleDrawer === 'group-by' ? 'up' : 'down'} />}
-                  id="toggle-group-by"
-                  onClick={() =>
-                    setVisibleDrawer(visibleDrawer !== 'group-by' ? 'group-by' : undefined)
-                  }
-                  pillStyle="light"
-                  size="small"
-                >
-                  {t('general:groupByLabel', {
-                    label: '',
-                  })}
-                </Pill>
-              )}
-              {listMenuItems && Array.isArray(listMenuItems) && listMenuItems.length > 0 && (
-                <Popup
-                  button={<Dots ariaLabel={t('general:moreOptions')} />}
-                  className={`${baseClass}__popup`}
-                  horizontalAlign="right"
-                  id="list-menu"
-                  size="medium"
-                  verticalAlign="bottom"
-                >
-                  {listMenuItems.map((item, i) => (
-                    <Fragment key={`list-menu-item-${i}`}>{item}</Fragment>
-                  ))}
-                </Popup>
-              )}
-            </div>
-          </div>
        </div>
-        {enableColumns && (
-          <AnimateHeight
-            className={`${baseClass}__columns`}
-            height={visibleDrawer === 'columns' ? 'auto' : 0}
-            id={`${baseClass}-columns`}
-          >
-            <ColumnSelector collectionSlug={collectionConfig.slug} />
-          </AnimateHeight>
-        )}
-        <AnimateHeight
-          className={`${baseClass}__where`}
-          height={visibleDrawer === 'where' ? 'auto' : 0}
-          id={`${baseClass}-where`}
-        >
-          <WhereBuilder
-            collectionPluralLabel={collectionConfig.labels?.plural}
-            collectionSlug={collectionConfig.slug}
-            fields={collectionConfig.fields}
-            renderedFilters={renderedFilters}
-            resolvedFilterOptions={resolvedFilterOptions}
-          />
-        </AnimateHeight>
-        {collectionConfig.admin.groupBy && (
-          <AnimateHeight
-            className={`${baseClass}__group-by`}
-            height={visibleDrawer === 'group-by' ? 'auto' : 0}
-            id={`${baseClass}-group-by`}
-          >
-            <GroupByBuilder
-              collectionSlug={collectionConfig.slug}
-              fields={collectionConfig.fields}
-            />
-          </AnimateHeight>
-        )}
+        <div className={`${baseClass}__buttons`}>
+          {!smallBreak && <React.Fragment>{beforeActions && beforeActions}</React.Fragment>}
+          {enableColumns && (
+            <Pill
+              aria-controls={`${baseClass}-columns`}
+              aria-expanded={visibleDrawer === 'columns'}
+              className={`${baseClass}__toggle-columns`}
+              icon={<ChevronIcon direction={visibleDrawer === 'columns' ? 'up' : 'down'} />}
+              id="toggle-list-columns"
+              onClick={() => setVisibleDrawer(visibleDrawer !== 'columns' ? 'columns' : undefined)}
+              pillStyle="light"
+              size="small"
+            >
+              {t('general:columns')}
+            </Pill>
+          )}
+          {enableFilters && (
+            <Pill
+              aria-controls={`${baseClass}-where`}
+              aria-expanded={visibleDrawer === 'where'}
+              className={`${baseClass}__toggle-where`}
+              icon={<ChevronIcon direction={visibleDrawer === 'where' ? 'up' : 'down'} />}
+              id="toggle-list-filters"
+              onClick={() => setVisibleDrawer(visibleDrawer !== 'where' ? 'where' : undefined)}
+              pillStyle="light"
+              size="small"
+            >
+              {t('general:filters')}
+            </Pill>
+          )}
+          {enableSort && (
+            <Pill
+              aria-controls={`${baseClass}-sort`}
+              aria-expanded={visibleDrawer === 'sort'}
+              className={`${baseClass}__toggle-sort`}
+              icon={<ChevronIcon />}
+              id="toggle-list-sort"
+              onClick={() => setVisibleDrawer(visibleDrawer !== 'sort' ? 'sort' : undefined)}
+              pillStyle="light"
+              size="small"
+            >
+              {t('general:sort')}
+            </Pill>
+          )}
+          {collectionConfig.admin.groupBy && (
+            <Pill
+              aria-controls={`${baseClass}-group-by`}
+              aria-expanded={visibleDrawer === 'group-by'}
+              className={`${baseClass}__toggle-group-by`}
+              icon={<ChevronIcon direction={visibleDrawer === 'group-by' ? 'up' : 'down'} />}
+              id="toggle-group-by"
+              onClick={() =>
+                setVisibleDrawer(visibleDrawer !== 'group-by' ? 'group-by' : undefined)
+              }
+              pillStyle="light"
+              size="small"
+            >
+              {t('general:groupByLabel', {
+                label: '',
+              })}
+            </Pill>
+          )}
+          {listMenuItems && Array.isArray(listMenuItems) && listMenuItems.length > 0 && (
+            <Popup
+              button={<Dots ariaLabel={t('general:moreOptions')} />}
+              className={`${baseClass}__popup`}
+              horizontalAlign="right"
+              id="list-menu"
+              size="small"
+              verticalAlign="bottom"
+            >
+              {listMenuItems.map((item, i) => (
+                <Fragment key={`list-menu-item-${i}`}>{item}</Fragment>
+              ))}
+            </Popup>
+          )}
+        </div>
      </div>
-      {PresetListDrawer}
-      {EditPresetDrawer}
-      {CreateNewPresetDrawer}
-      {DeletePresetModal}
-    </Fragment>
+      {enableColumns && (
+        <AnimateHeight
+          className={`${baseClass}__columns`}
+          height={visibleDrawer === 'columns' ? 'auto' : 0}
+          id={`${baseClass}-columns`}
+        >
+          <ColumnSelector collectionSlug={collectionConfig.slug} />
+        </AnimateHeight>
+      )}
+      <AnimateHeight
+        className={`${baseClass}__where`}
+        height={visibleDrawer === 'where' ? 'auto' : 0}
+        id={`${baseClass}-where`}
+      >
+        <WhereBuilder
+          collectionPluralLabel={collectionConfig?.labels?.plural}
+          collectionSlug={collectionConfig.slug}
+          fields={collectionConfig?.fields}
+          renderedFilters={renderedFilters}
+          resolvedFilterOptions={resolvedFilterOptions}
+        />
+      </AnimateHeight>
+      {collectionConfig.admin.groupBy && (
+        <AnimateHeight
+          className={`${baseClass}__group-by`}
+          height={visibleDrawer === 'group-by' ? 'auto' : 0}
+          id={`${baseClass}-group-by`}
+        >
+          <GroupByBuilder collectionSlug={collectionConfig.slug} fields={collectionConfig.fields} />
+        </AnimateHeight>
+      )}
+    </div>
  )
 }
--- a/packages/ui/src/elements/Pill/index.scss
+++ b/packages/ui/src/elements/Pill/index.scss
@@ -39,7 +39,7 @@
      outline-offset: var(--accessibility-outline-offset);
    }

-    .icon {
+    &__icon .icon {
      flex-shrink: 0;
      width: var(--pill-icon-size);
      height: var(--pill-icon-size);
--- a/packages/ui/src/elements/QueryPresets/QueryPresetBar/index.scss
+++ b/packages/ui/src/elements/QueryPresets/QueryPresetBar/index.scss
@@ -0,0 +1,41 @@
+@import '../../../scss/styles';
+
+@layer payload-default {
+  .query-preset-bar {
+    display: flex;
+    gap: base(0.5);
+    justify-content: space-between;
+    background-color: var(--theme-elevation-50);
+    border-radius: var(--style-radius-m);
+    padding: base(0.5);
+
+    &__menu {
+      display: flex;
+      align-items: center;
+      gap: 4px;
+      flex-grow: 1;
+    }
+
+    &__create-new-preset {
+      height: 100%;
+      padding: 0 3px;
+      background: transparent;
+      box-shadow: inset 0 0 0 1px var(--theme-elevation-150);
+
+      &:hover {
+        background: transparent;
+      }
+    }
+
+    &__menu-items {
+      overflow: auto;
+      display: flex;
+      gap: base(0.5);
+
+      button {
+        color: var(--theme-elevation-500);
+        margin: 0;
+      }
+    }
+  }
+}
--- a/packages/ui/src/elements/QueryPresets/QueryPresetBar/index.tsx
+++ b/packages/ui/src/elements/QueryPresets/QueryPresetBar/index.tsx
@@ -1,43 +1,35 @@
-import type { CollectionSlug, QueryPreset, SanitizedCollectionPermission } from 'payload'
+import type { QueryPreset, SanitizedCollectionPermission } from 'payload'

 import { useModal } from '@faceless-ui/modal'
 import { getTranslation } from '@payloadcms/translations'
 import { transformColumnsToPreferences, transformColumnsToSearchParams } from 'payload/shared'
-import React, { useCallback, useMemo } from 'react'
+import React, { Fragment, useCallback, useMemo } from 'react'
 import { toast } from 'sonner'

-import { useConfig } from '../../providers/Config/index.js'
-import { useListQuery } from '../../providers/ListQuery/context.js'
-import { useTranslation } from '../../providers/Translation/index.js'
-import { ConfirmationModal } from '../ConfirmationModal/index.js'
-import { useDocumentDrawer } from '../DocumentDrawer/index.js'
-import { useListDrawer } from '../ListDrawer/index.js'
-import { PopupList } from '../Popup/index.js'
-import { PopupListGroupLabel } from '../Popup/PopupGroupLabel/index.js'
-import { Translation } from '../Translation/index.js'
+import { PlusIcon } from '../../../icons/Plus/index.js'
+import { useConfig } from '../../../providers/Config/index.js'
+import { useListQuery } from '../../../providers/ListQuery/context.js'
+import { useTranslation } from '../../../providers/Translation/index.js'
+import { ConfirmationModal } from '../../ConfirmationModal/index.js'
+import { useDocumentDrawer } from '../../DocumentDrawer/index.js'
+import { useListDrawer } from '../../ListDrawer/index.js'
+import { ListSelectionButton } from '../../ListSelection/index.js'
+import { Pill } from '../../Pill/index.js'
+import { Translation } from '../../Translation/index.js'
+import { QueryPresetToggler } from '../QueryPresetToggler/index.js'
+import './index.scss'

 const confirmDeletePresetModalSlug = 'confirm-delete-preset'

 const queryPresetsSlug = 'payload-query-presets'

-export const useQueryPresets = ({
-  activePreset,
-  collectionSlug,
-  queryPresetPermissions,
-}: {
+const baseClass = 'query-preset-bar'
+
+export const QueryPresetBar: React.FC<{
  activePreset: QueryPreset
-  collectionSlug: CollectionSlug
+  collectionSlug?: string
  queryPresetPermissions: SanitizedCollectionPermission
-}): {
-  CreateNewPresetDrawer: React.ReactNode
-  DeletePresetModal: React.ReactNode
-  EditPresetDrawer: React.ReactNode
-  hasModifiedPreset: boolean
-  openPresetListDrawer: () => void
-  PresetListDrawer: React.ReactNode
-  queryPresetMenuItems: React.ReactNode[]
-  resetPreset: () => Promise<void>
-} => {
+}> = ({ activePreset, collectionSlug, queryPresetPermissions }) => {
  const { modified, query, refineListData, setModified: setQueryModified } = useListQuery()

  const { i18n, t } = useTranslation()
@@ -193,80 +185,81 @@ export const useQueryPresets = ({
    setQueryModified,
  ])

-  // Memoize so that components aren't re-rendered on query and column changes
-  const queryPresetMenuItems = useMemo(() => {
-    const hasModifiedPreset = activePreset && modified
+  const hasModifiedPreset = activePreset && modified

-    return [
-      <PopupListGroupLabel
-        key="preset-group-label"
-        label={getTranslation(presetConfig?.labels?.plural, i18n)}
-      />,
-      <PopupList.ButtonGroup key="preset-group-buttons">
-        {hasModifiedPreset && (
-          <PopupList.Button
-            onClick={async () => {
-              await refineListData(
-                {
-                  columns: transformColumnsToSearchParams(activePreset.columns),
-                  where: activePreset.where,
-                },
-                false,
-              )
+  return (
+    <Fragment>
+      <div className={baseClass}>
+        <div className={`${baseClass}__menu`}>
+          <QueryPresetToggler
+            activePreset={activePreset}
+            openPresetListDrawer={openListDrawer}
+            resetPreset={resetQueryPreset}
+          />
+          <Pill
+            aria-label={t('general:newLabel', { label: presetConfig?.labels?.singular })}
+            className={`${baseClass}__create-new-preset`}
+            icon={<PlusIcon />}
+            id="create-new-preset"
+            onClick={() => {
+              openCreateNewDrawer()
            }}
-          >
-            {t('general:reset')}
-          </PopupList.Button>
-        )}
-        {hasModifiedPreset && queryPresetPermissions.update && (
-          <PopupList.Button
-            onClick={async () => {
-              await saveCurrentChanges()
-            }}
-          >
-            {activePreset?.isShared ? t('general:updateForEveryone') : t('general:save')}
-          </PopupList.Button>
-        )}
-        <PopupList.Button
-          onClick={() => {
-            openCreateNewDrawer()
-          }}
-        >
-          {t('general:createNew')}
-        </PopupList.Button>
-        {activePreset && queryPresetPermissions?.delete && (
-          <>
-            <PopupList.Button onClick={() => openModal(confirmDeletePresetModalSlug)}>
-              {t('general:delete')}
-            </PopupList.Button>
-            <PopupList.Button
-              onClick={() => {
-                openDocumentDrawer()
+            size="small"
+          />
+        </div>
+        <div className={`${baseClass}__menu-items`}>
+          {hasModifiedPreset && (
+            <ListSelectionButton
+              id="reset-preset"
+              key="reset"
+              onClick={async () => {
+                await refineListData(
+                  {
+                    columns: transformColumnsToSearchParams(activePreset.columns),
+                    where: activePreset.where,
+                  },
+                  false,
+                )
              }}
+              type="button"
            >
-              {t('general:edit')}
-            </PopupList.Button>
-          </>
-        )}
-      </PopupList.ButtonGroup>,
-    ]
-  }, [
-    activePreset,
-    queryPresetPermissions?.delete,
-    queryPresetPermissions?.update,
-    openCreateNewDrawer,
-    openDocumentDrawer,
-    openModal,
-    saveCurrentChanges,
-    t,
-    refineListData,
-    modified,
-    presetConfig?.labels?.plural,
-    i18n,
-  ])
-
-  return {
-    CreateNewPresetDrawer: (
+              {t('general:reset')}
+            </ListSelectionButton>
+          )}
+          {hasModifiedPreset && queryPresetPermissions.update && (
+            <ListSelectionButton
+              id="save-preset"
+              key="save"
+              onClick={async () => {
+                await saveCurrentChanges()
+              }}
+              type="button"
+            >
+              {activePreset?.isShared ? t('general:updateForEveryone') : t('fields:saveChanges')}
+            </ListSelectionButton>
+          )}
+          {activePreset && queryPresetPermissions?.delete && (
+            <Fragment>
+              <ListSelectionButton
+                id="delete-preset"
+                onClick={() => openModal(confirmDeletePresetModalSlug)}
+                type="button"
+              >
+                {t('general:deleteLabel', { label: presetConfig?.labels?.singular })}
+              </ListSelectionButton>
+              <ListSelectionButton
+                id="edit-preset"
+                onClick={() => {
+                  openDocumentDrawer()
+                }}
+                type="button"
+              >
+                {t('general:editLabel', { label: presetConfig?.labels?.singular })}
+              </ListSelectionButton>
+            </Fragment>
+          )}
+        </div>
+      </div>
      <CreateNewPresetDrawer
        initialData={{
          columns: transformColumnsToPreferences(query.columns),
@@ -279,8 +272,6 @@ export const useQueryPresets = ({
        }}
        redirectAfterCreate={false}
      />
-    ),
-    DeletePresetModal: (
      <ConfirmationModal
        body={
          <Translation
@@ -300,8 +291,6 @@ export const useQueryPresets = ({
        modalSlug={confirmDeletePresetModalSlug}
        onConfirm={handleDeletePreset}
      />
-    ),
-    EditPresetDrawer: (
      <PresetDocumentDrawer
        onDelete={() => {
          // setSelectedPreset(undefined)
@@ -313,10 +302,6 @@ export const useQueryPresets = ({
          await handlePresetChange(doc as QueryPreset)
        }}
      />
-    ),
-    hasModifiedPreset: modified,
-    openPresetListDrawer: openListDrawer,
-    PresetListDrawer: (
      <ListDrawer
        allowCreate={false}
        disableQueryPresets
@@ -325,8 +310,6 @@ export const useQueryPresets = ({
          await handlePresetChange(doc as QueryPreset)
        }}
      />
-    ),
-    queryPresetMenuItems,
-    resetPreset: resetQueryPreset,
-  }
+    </Fragment>
+  )
 }
--- a/packages/ui/src/elements/QueryPresets/QueryPresetToggler/index.scss
+++ b/packages/ui/src/elements/QueryPresets/QueryPresetToggler/index.scss
@@ -0,0 +1,61 @@
+@import '../../../scss/styles';
+
+@layer payload-default {
+  .active-query-preset {
+    &__label {
+      display: flex;
+      align-items: center;
+    }
+
+    &__label-text-max-width {
+      max-width: 100px;
+      overflow: hidden;
+    }
+
+    &__label-text {
+      text-overflow: ellipsis;
+      overflow: hidden;
+      white-space: nowrap;
+    }
+
+    &__label-and-clear-wrap {
+      display: flex;
+      align-items: center;
+    }
+
+    &__shared {
+      margin-right: 2px;
+    }
+
+    &__clear {
+      display: flex;
+      align-items: center;
+      width: var(--pill-icon-size);
+      height: var(--pill-icon-size);
+    }
+
+    &--active {
+      box-shadow: inset 0 0 0 1px var(--theme-elevation-200);
+      background-color: var(--theme-elevation-0);
+      padding-right: 4px;
+
+      &:hover {
+        background-color: var(--theme-elevation-100);
+      }
+    }
+  }
+
+  html[data-theme='dark'] {
+    .active-query-preset {
+      &--active {
+        box-shadow: inset 0 0 0 1px var(--theme-elevation-300);
+        color: var(--theme-elevation-0);
+        background-color: var(--theme-elevation-800);
+
+        &:hover {
+          background-color: var(--theme-elevation-700);
+        }
+      }
+    }
+  }
+}
--- a/packages/ui/src/elements/QueryPresets/QueryPresetToggler/index.tsx
+++ b/packages/ui/src/elements/QueryPresets/QueryPresetToggler/index.tsx
@@ -12,7 +12,7 @@ import './index.scss'

 const baseClass = 'active-query-preset'

-export function ActiveQueryPreset({
+export function QueryPresetToggler({
  activePreset,
  openPresetListDrawer,
  resetPreset,
@@ -35,38 +35,40 @@ export function ActiveQueryPreset({
      onClick={() => {
        openPresetListDrawer()
      }}
-      pillStyle={activePreset ? 'always-white' : 'light'}
+      pillStyle="light"
      size="small"
    >
-      {activePreset?.isShared && <PeopleIcon className={`${baseClass}__shared`} />}
-      <div className={`${baseClass}__label-text-max-width`}>
-        <div className={`${baseClass}__label-text`}>
-          {activePreset?.title ||
-            t('general:selectLabel', {
-              label: getTranslation(presetsConfig.labels.singular, i18n),
-            })}
+      <div className={`${baseClass}__label`}>
+        {activePreset?.isShared && <PeopleIcon className={`${baseClass}__shared`} />}
+        <div className={`${baseClass}__label-text-max-width`}>
+          <div className={`${baseClass}__label-text`}>
+            {activePreset?.title ||
+              t('general:selectLabel', {
+                label: getTranslation(presetsConfig.labels.singular, i18n),
+              })}
+          </div>
        </div>
-      </div>
-      {activePreset ? (
-        <div
-          className={`${baseClass}__clear`}
-          id="clear-preset"
-          onClick={async (e) => {
-            e.stopPropagation()
-            await resetPreset()
-          }}
-          onKeyDown={async (e) => {
-            if (e.key === 'Enter' || e.key === ' ') {
+        {activePreset ? (
+          <div
+            className={`${baseClass}__clear`}
+            id="clear-preset"
+            onClick={async (e) => {
              e.stopPropagation()
              await resetPreset()
-            }
-          }}
-          role="button"
-          tabIndex={0}
-        >
-          <XIcon />
-        </div>
-      ) : null}
+            }}
+            onKeyDown={async (e) => {
+              if (e.key === 'Enter' || e.key === ' ') {
+                e.stopPropagation()
+                await resetPreset()
+              }
+            }}
+            role="button"
+            tabIndex={0}
+          >
+            <XIcon />
+          </div>
+        ) : null}
+      </div>
    </Pill>
  )
 }
--- a/test/query-presets/e2e.spec.ts
+++ b/test/query-presets/e2e.spec.ts
@@ -19,7 +19,6 @@ import {
  // throttleTest,
 } from '../helpers.js'
 import { AdminUrlUtil } from '../helpers/adminUrlUtil.js'
-import { clickListMenuItem, openListMenu } from '../helpers/e2e/toggleListMenu.js'
 import { initPayloadE2ENoConfig } from '../helpers/initPayloadE2ENoConfig.js'
 import { TEST_TIMEOUT_LONG } from '../playwright.config.js'
 import { assertURLParams } from './helpers/assertURLParams.js'
@@ -190,9 +189,8 @@ describe('Query Presets', () => {
  test('should delete a preset, clear selection, and reset changes', async () => {
    await page.goto(pagesUrl.list)
    await selectPreset({ page, presetTitle: seededData.everyone.title })
-    await openListMenu({ page })

-    await clickListMenuItem({ page, menuItemLabel: 'Delete' })
+    await page.locator('#delete-preset').click()

    await page.locator('#confirm-delete-preset #confirm-action').click()

@@ -249,75 +247,29 @@ describe('Query Presets', () => {

  test('should only show "edit" and "delete" controls when there is an active preset', async () => {
    await page.goto(pagesUrl.list)
-    await openListMenu({ page })
-
-    await expect(
-      page.locator('#list-menu .popup__content .popup-button-list__button', {
-        hasText: exactText('Edit'),
-      }),
-    ).toBeHidden()
-
-    await expect(
-      page.locator('#list-menu .popup__content .popup-button-list__button', {
-        hasText: exactText('Delete'),
-      }),
-    ).toBeHidden()
-
+    await expect(page.locator('#edit-preset')).toBeHidden()
+    await expect(page.locator('#delete-preset')).toBeHidden()
    await selectPreset({ page, presetTitle: seededData.everyone.title })
-
-    await openListMenu({ page })
-
-    await expect(
-      page.locator('#list-menu .popup__content .popup-button-list__button', {
-        hasText: exactText('Edit'),
-      }),
-    ).toBeVisible()
-
-    await expect(
-      page.locator('#list-menu .popup__content .popup-button-list__button', {
-        hasText: exactText('Delete'),
-      }),
-    ).toBeVisible()
+    await expect(page.locator('#edit-preset')).toBeVisible()
+    await expect(page.locator('#delete-preset')).toBeVisible()
  })

  test('should only show "reset" and "save" controls when there is an active preset and changes have been made', async () => {
    await page.goto(pagesUrl.list)

-    await openListMenu({ page })
+    await expect(page.locator('#reset-preset')).toBeHidden()

-    await expect(
-      page.locator('#list-menu .popup__content .popup-button-list__button', {
-        hasText: exactText('Reset'),
-      }),
-    ).toBeHidden()
-
-    await expect(
-      page.locator('#list-menu .popup__content .popup-button-list__button', {
-        hasText: exactText('Update for everyone'),
-      }),
-    ).toBeHidden()
-
-    await expect(
-      page.locator('#list-menu .popup__content .popup-button-list__button', {
-        hasText: exactText('Save'),
-      }),
-    ).toBeHidden()
+    await expect(page.locator('#save-preset')).toBeHidden()

    await selectPreset({ page, presetTitle: seededData.onlyMe.title })

    await toggleColumn(page, { columnLabel: 'ID' })

-    await openListMenu({ page })
+    await expect(page.locator('#reset-preset')).toBeVisible()

    await expect(
-      page.locator('#list-menu .popup__content .popup-button-list__button', {
-        hasText: exactText('Reset'),
-      }),
-    ).toBeVisible()
-
-    await expect(
-      page.locator('#list-menu .popup__content .popup-button-list__button', {
-        hasText: exactText('Save'),
+      page.locator('#save-preset', {
+        hasText: exactText('Save changes'),
      }),
    ).toBeVisible()
  })
@@ -329,12 +281,12 @@ describe('Query Presets', () => {

    await toggleColumn(page, { columnLabel: 'ID' })

-    await openListMenu({ page })
-
    // When not shared, the label is "Save"
+    await expect(page.locator('#save-preset')).toBeVisible()
+
    await expect(
-      page.locator('#list-menu .popup__content .popup-button-list__button', {
-        hasText: exactText('Save'),
+      page.locator('#save-preset', {
+        hasText: exactText('Save changes'),
      }),
    ).toBeVisible()

@@ -342,11 +294,9 @@ describe('Query Presets', () => {

    await toggleColumn(page, { columnLabel: 'ID' })

-    await openListMenu({ page })
-
    // When shared, the label is "Update for everyone"
    await expect(
-      page.locator('#list-menu .popup__content .popup-button-list__button', {
+      page.locator('#save-preset', {
        hasText: exactText('Update for everyone'),
      }),
    ).toBeVisible()
@@ -362,27 +312,28 @@ describe('Query Presets', () => {
      hasText: exactText('ID'),
    })

-    await openListMenu({ page })
-    await clickListMenuItem({ page, menuItemLabel: 'Reset' })
+    await page.locator('#reset-preset').click()

    await openListColumns(page, {})
    await expect(column).toHaveClass(/pill-selector__pill--selected/)
  })

-  test('should only enter modified state when changes are made to an active preset', async () => {
+  test.skip('should only enter modified state when changes are made to an active preset', async () => {
    await page.goto(pagesUrl.list)
    await expect(page.locator('.list-controls__modified')).toBeHidden()
    await selectPreset({ page, presetTitle: seededData.everyone.title })
    await expect(page.locator('.list-controls__modified')).toBeHidden()
    await toggleColumn(page, { columnLabel: 'ID' })
    await expect(page.locator('.list-controls__modified')).toBeVisible()
-    await openListMenu({ page })
-    await clickListMenuItem({ page, menuItemLabel: 'Update for everyone' })
+
+    await page.locator('#save-preset').click()
+
    await expect(page.locator('.list-controls__modified')).toBeHidden()
    await toggleColumn(page, { columnLabel: 'ID' })
    await expect(page.locator('.list-controls__modified')).toBeVisible()
-    await openListMenu({ page })
-    await clickListMenuItem({ page, menuItemLabel: 'Reset' })
+
+    await page.locator('#reset-preset').click()
+
    await expect(page.locator('.list-controls__modified')).toBeHidden()
  })

@@ -392,8 +343,7 @@ describe('Query Presets', () => {
    await page.goto(pagesUrl.list)

    await selectPreset({ page, presetTitle: seededData.everyone.title })
-    await openListMenu({ page })
-    await clickListMenuItem({ page, menuItemLabel: 'Edit' })
+    await page.locator('#edit-preset').click()

    const drawer = page.locator('[id^=doc-drawer_payload-query-presets_0_]')
    const titleValue = drawer.locator('input[name="title"]')
@@ -427,8 +377,7 @@ describe('Query Presets', () => {

    const presetTitle = 'New Preset'

-    await openListMenu({ page })
-    await clickListMenuItem({ page, menuItemLabel: 'Create New' })
+    await page.locator('#create-new-preset').click()
    const modal = page.locator('[id^=doc-drawer_payload-query-presets_0_]')
    await expect(modal).toBeVisible()
    await modal.locator('input[name="title"]').fill(presetTitle)
--- a/tools/constants/src/index.js
+++ b/tools/constants/src/index.js
@@ -0,0 +1,14 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.TEMPLATES_DIR = exports.PACKAGES_DIR = exports.ROOT_PACKAGE_JSON = exports.PROJECT_ROOT = void 0;
+var node_url_1 = require("node:url");
+var path_1 = require("path");
+var filename = (0, node_url_1.fileURLToPath)(import.meta.url);
+var dirname = path_1.default.dirname(filename);
+/**
+ * Path to the project root
+ */
+exports.PROJECT_ROOT = path_1.default.resolve(dirname, '../../../');
+exports.ROOT_PACKAGE_JSON = path_1.default.resolve(exports.PROJECT_ROOT, 'package.json');
+exports.PACKAGES_DIR = path_1.default.resolve(exports.PROJECT_ROOT, 'packages');
+exports.TEMPLATES_DIR = path_1.default.resolve(exports.PROJECT_ROOT, 'templates');