feat: implement finalized local snippet card design#416
Conversation
b59aac7 to
6184a0a
Compare
d02849c to
d69c5f6
Compare
77bb4b0 to
0072006
Compare
d69c5f6 to
ee0e4de
Compare
b71c709 to
a2dea3f
Compare
# Conflicts: # src/js/components/ManageMenu/CommunityCloud/CloudSearch.tsx
|
Three behavior-preserving cleanups remain in this PR's exact diff:
|
|
Switched cards to the canonical network and modified helpers, rendered modified dates with time semantics, and removed the unused corner-control API and styles. Lint and build pass. |
|
Three semantic cleanups remain:
|
|
The kebab is now a generic popover with native form-control semantics, modified dates render as |
# Conflicts: # src/js/components/common/KebabMenu.tsx
# Conflicts: # src/js/components/common/KebabMenu.tsx
Squashed commit of the following: commit 804550f Merge: 313be7d e7fab8a Author: Maisy <maisy@codesnippets.pro> Date: Sun Jul 19 17:11:02 2026 +0000 chore: merge snippet card updates commit 313be7d Merge: 80ee496 fba4361 Author: Imants <imants.kokis@gmail.com> Date: Sat Jul 18 02:50:18 2026 +0300 chore: merge snippet card standards commit 80ee496 Merge: 8982bad 9a55afc Author: Imants <imants.kokis@gmail.com> Date: Sat Jul 18 02:21:51 2026 +0300 chore: merge snippet card cleanup commit 8982bad Merge: cbfee34 3fd7adf Author: Imants <imants.kokis@gmail.com> Date: Sat Jul 18 02:10:50 2026 +0300 chore: merge snippet card fixes commit cbfee34 Merge: 04e2225 38aadde Author: Imants <imants.kokis@gmail.com> Date: Fri Jul 17 09:16:10 2026 +0300 Merge branch 'feat/169-snippet-cards' into feat/whats-new-typography commit 04e2225 Author: Imants <imants.kokis@gmail.com> Date: Fri Jul 17 09:11:03 2026 +0300 chore: drop a narrating stylesheet comment commit 5157aca Merge: ccb2cc8 47e9407 Author: Imants <imants.kokis@gmail.com> Date: Fri Jul 17 01:12:28 2026 +0300 fix: merge snippet card fixes commit ccb2cc8 Merge: 941a76b 6dc6d67 Author: Imants <imants.kokis@gmail.com> Date: Thu Jul 16 20:36:03 2026 +0300 Merge branch 'feat/169-snippet-cards' into feat/whats-new-typography commit 941a76b Merge: 9279bcf b03509f Author: Imants <imants.kokis@gmail.com> Date: Thu Jul 16 20:31:00 2026 +0300 Merge branch 'feat/169-snippet-cards' into feat/whats-new-typography commit 9279bcf Merge: 490a8df 7396243 Author: Imants <imants.kokis@gmail.com> Date: Thu Jul 16 20:23:29 2026 +0300 Merge branch 'feat/169-snippet-cards' into feat/whats-new-typography commit 490a8df Merge: 8199c4f 62070bd Author: Imants <imants.kokis@gmail.com> Date: Thu Jul 16 20:18:28 2026 +0300 Merge branch 'feat/169-snippet-cards' into feat/whats-new-typography commit 8199c4f Merge: 80d18d7 4a1e15a Author: Imants <imants.kokis@gmail.com> Date: Thu Jul 16 20:15:12 2026 +0300 Merge branch 'feat/169-snippet-cards' into feat/whats-new-typography commit 80d18d7 Merge: b253519 491d582 Author: Imants <imants.kokis@gmail.com> Date: Thu Jul 16 20:08:25 2026 +0300 Merge branch 'feat/169-snippet-cards' into feat/whats-new-typography commit b253519 Merge: 5ed45f9 28cb8e4 Author: Imants <imants.kokis@gmail.com> Date: Thu Jul 16 19:36:29 2026 +0300 Merge branch 'feat/169-snippet-cards' into feat/whats-new-typography commit 5ed45f9 Merge: b9a2132 f83f71e Author: Imants <imants.kokis@gmail.com> Date: Thu Jul 16 18:56:46 2026 +0300 Merge branch 'feat/169-snippet-cards' into feat/whats-new-typography commit b9a2132 Merge: 0937c43 e2d19fc Author: Imants <imants.kokis@gmail.com> Date: Thu Jul 16 18:36:11 2026 +0300 Merge branch 'feat/169-snippet-cards' into feat/whats-new-typography commit 0937c43 Merge: 9cd436c 918e365 Author: Imants <imants.kokis@gmail.com> Date: Thu Jul 16 18:25:34 2026 +0300 Merge branch 'feat/169-snippet-cards' into feat/whats-new-typography commit 9cd436c Merge: 7684d10 e130f22 Author: Imants <imants.kokis@gmail.com> Date: Thu Jul 16 18:14:53 2026 +0300 Merge branch 'feat/169-snippet-cards' into feat/whats-new-typography commit 7684d10 Merge: a78ded0 075ad0e Author: Imants <imants.kokis@gmail.com> Date: Thu Jul 16 18:04:01 2026 +0300 Merge branch 'feat/169-snippet-cards' into feat/whats-new-typography commit a78ded0 Merge: 2b6c784 f82f286 Author: Imants <imants.kokis@gmail.com> Date: Thu Jul 16 17:57:25 2026 +0300 Merge branch 'feat/169-snippet-cards' into feat/whats-new-typography commit 2b6c784 Merge: c6801dd aee73bd Author: Imants <imants.kokis@gmail.com> Date: Thu Jul 16 17:40:54 2026 +0300 Merge branch 'feat/169-snippet-cards' into feat/whats-new-typography commit c6801dd Merge: 4ef85fd 4dd3f64 Author: Imants <imants.kokis@gmail.com> Date: Thu Jul 16 16:34:54 2026 +0300 Merge branch 'feat/169-snippet-cards' into feat/whats-new-typography commit 4ef85fd Merge: db9ba34 8c04e74 Author: Imants <imants.kokis@gmail.com> Date: Thu Jul 16 16:31:51 2026 +0300 Merge branch 'feat/169-snippet-cards' into feat/whats-new-typography commit db9ba34 Merge: c9e1d14 9eafce5 Author: Imants <imants.kokis@gmail.com> Date: Thu Jul 16 16:09:59 2026 +0300 Merge branch 'feat/169-snippet-cards' into feat/whats-new-typography commit c9e1d14 Merge: faeeb6d 20c1bb8 Author: Imants <imants.kokis@gmail.com> Date: Thu Jul 16 16:05:15 2026 +0300 Merge branch 'feat/169-snippet-cards' into feat/whats-new-typography commit faeeb6d Merge: a11268b 7ddd115 Author: Imants <imants.kokis@gmail.com> Date: Thu Jul 16 16:03:18 2026 +0300 Merge branch 'feat/169-snippet-cards' into feat/whats-new-typography commit a11268b Merge: 30027e5 2df51b5 Author: Imants <imants.kokis@gmail.com> Date: Thu Jul 16 15:51:22 2026 +0300 Merge branch 'feat/169-snippet-cards' into feat/whats-new-typography commit 30027e5 Merge: 4f859a4 a91f825 Author: Imants <imants.kokis@gmail.com> Date: Thu Jul 16 15:42:32 2026 +0300 Merge branch 'feat/169-snippet-cards' into feat/whats-new-typography commit 4f859a4 Merge: 69ce038 388aff5 Author: Imants <imants.kokis@gmail.com> Date: Thu Jul 16 15:31:49 2026 +0300 Merge branch 'feat/169-snippet-cards' into feat/whats-new-typography commit 69ce038 Merge: a457349 674fdd2 Author: Imants <imants.kokis@gmail.com> Date: Thu Jul 16 15:18:31 2026 +0300 Merge branch 'feat/169-snippet-cards' into feat/whats-new-typography commit a457349 Merge: 14d98c0 85b96df Author: Imants <imants.kokis@gmail.com> Date: Thu Jul 16 15:01:40 2026 +0300 Merge branch 'feat/169-snippet-cards' into feat/whats-new-typography commit 14d98c0 Merge: 4156eb1 c6622c9 Author: Imants <imants.kokis@gmail.com> Date: Thu Jul 16 14:24:02 2026 +0300 Merge branch 'feat/169-snippet-cards' into feat/whats-new-typography commit 4156eb1 Merge: fd23f87 af6b0b2 Author: Imants <imants.kokis@gmail.com> Date: Thu Jul 16 13:45:41 2026 +0300 Merge branch 'feat/169-snippet-cards' into feat/whats-new-typography commit fd23f87 Merge: ab1abbd 2c1e031 Author: Imants <imants.kokis@gmail.com> Date: Thu Jul 16 13:32:28 2026 +0300 Merge branch 'feat/169-snippet-cards' into feat/whats-new-typography commit ab1abbd Merge: 098f43b 135ecb3 Author: Imants <imants.kokis@gmail.com> Date: Thu Jul 16 13:05:39 2026 +0300 Merge branch 'feat/169-snippet-cards' into feat/whats-new-typography commit 098f43b Merge: 32209cb 9f7ebb6 Author: Imants <imants.kokis@gmail.com> Date: Thu Jul 16 12:35:01 2026 +0300 Merge branch 'feat/169-snippet-cards' into feat/whats-new-typography commit 32209cb Merge: 78ae295 b61ad1e Author: Imants <imants.kokis@gmail.com> Date: Thu Jul 16 01:02:08 2026 +0300 Merge branch 'feat/169-snippet-cards' into feat/whats-new-typography commit 78ae295 Merge: 24e5dad dbbe6b3 Author: Imants <imants.kokis@gmail.com> Date: Thu Jul 16 00:59:55 2026 +0300 Merge branch 'feat/169-snippet-cards' into feat/whats-new-typography commit 24e5dad Merge: 3ae49eb dd96535 Author: Imants <imants.kokis@gmail.com> Date: Thu Jul 16 00:50:07 2026 +0300 Merge branch 'feat/169-snippet-cards' into feat/whats-new-typography commit 3ae49eb Merge: 0963e4c 5ddaf4b Author: Imants <imants.kokis@gmail.com> Date: Wed Jul 15 23:29:46 2026 +0300 Merge branch 'feat/169-snippet-cards' into feat/whats-new-typography commit 0963e4c Merge: bf2ae92 632171d Author: Imants <imants.kokis@gmail.com> Date: Wed Jul 15 23:25:25 2026 +0300 Merge branch 'feat/169-snippet-cards' into feat/whats-new-typography commit bf2ae92 Merge: 3a479a1 021b8f9 Author: Imants <imants.kokis@gmail.com> Date: Wed Jul 15 23:15:23 2026 +0300 Merge branch 'feat/169-snippet-cards' into feat/whats-new-typography commit 3a479a1 Merge: 1524da6 0952110 Author: Imants <imants.kokis@gmail.com> Date: Wed Jul 15 21:26:12 2026 +0300 Merge branch 'feat/169-snippet-cards' into feat/whats-new-typography commit 1524da6 Merge: df08a10 6a2f8bd Author: Imants <imants.kokis@gmail.com> Date: Wed Jul 15 21:21:18 2026 +0300 Merge branch 'feat/169-snippet-cards' into feat/whats-new-typography commit df08a10 Merge: 8ba2cac 47f7d21 Author: Imants <imants.kokis@gmail.com> Date: Wed Jul 15 21:08:07 2026 +0300 Merge branch 'feat/169-snippet-cards' into feat/whats-new-typography commit 8ba2cac Merge: 50a8398 b4d634f Author: Imants <imants.kokis@gmail.com> Date: Wed Jul 15 20:58:11 2026 +0300 Merge branch 'feat/169-snippet-cards' into feat/whats-new-typography commit 50a8398 Merge: 54d6058 b1482e0 Author: Imants <imants.kokis@gmail.com> Date: Wed Jul 15 20:40:33 2026 +0300 Merge branch 'feat/169-snippet-cards' into feat/whats-new-typography commit 54d6058 Merge: 0d6ad76 d24c23f Author: Imants <imants.kokis@gmail.com> Date: Wed Jul 15 20:20:33 2026 +0300 Merge branch 'feat/169-snippet-cards' into feat/whats-new-typography commit 0d6ad76 Merge: d1c37d7 e2597c5 Author: Imants <imants.kokis@gmail.com> Date: Wed Jul 15 20:07:24 2026 +0300 Merge branch 'feat/169-snippet-cards' into feat/whats-new-typography commit d1c37d7 Merge: 9e54bb2 1587a29 Author: Imants <imants.kokis@gmail.com> Date: Wed Jul 15 19:59:05 2026 +0300 Merge branch 'feat/169-snippet-cards' into feat/whats-new-typography commit 9e54bb2 Merge: 2bf0253 ab1717e Author: Imants <imants.kokis@gmail.com> Date: Wed Jul 15 19:53:35 2026 +0300 Merge branch 'feat/169-snippet-cards' into feat/whats-new-typography commit 2bf0253 Merge: b885327 82f882f Author: Imants <imants.kokis@gmail.com> Date: Wed Jul 15 19:50:31 2026 +0300 Merge branch 'feat/169-snippet-cards' into feat/whats-new-typography commit b885327 Merge: 316d700 c374240 Author: Imants <imants.kokis@gmail.com> Date: Wed Jul 15 19:25:30 2026 +0300 Merge branch 'feat/169-snippet-cards' into feat/whats-new-typography commit 316d700 Merge: 8fd7723 07019f9 Author: Imants <imants.kokis@gmail.com> Date: Wed Jul 15 19:08:48 2026 +0300 Merge branch 'feat/169-snippet-cards' into feat/whats-new-typography commit 8fd7723 Merge: 8d369f8 4b37534 Author: Imants <imants.kokis@gmail.com> Date: Wed Jul 15 18:39:58 2026 +0300 Merge branch 'feat/169-snippet-cards' into feat/whats-new-typography commit 8d369f8 Author: Imants <imants.kokis@gmail.com> Date: Tue Jul 14 20:05:44 2026 +0300 feat: align whats new page typography with admin shell
| {snippet.trashed ? <PermanentDeleteConfirmMessage /> : <TrashActiveConfirmMessage />} | ||
| </ConfirmDialog> | ||
|
|
||
| return { requestDelete, confirmDialog } |
There was a problem hiding this comment.
This is a bad pattern IMO: avoid components returning other components where possible.
| const { closeMenu } = useKebabMenu() | ||
|
|
||
| return ( | ||
| <li role="presentation"> |
| <li> | ||
| <button | ||
| type="button" | ||
| role="menuitem" |
| getSnippetType, | ||
| isNetworkOnlySnippet, | ||
| isSnippetActive | ||
| } from '../../../utils/snippets/snippets' |
There was a problem hiding this comment.
Please avoid breaking imports into multiple lines – they do not need to be human readable.
| <SnippetExtraIcons snippet={snippet} /> | ||
| </div> | ||
|
|
||
| {0 < snippet.tags.length || snippet.modified |
There was a problem hiding this comment.
Avoid nesting ternary statements where possible.
Implements the finalized card design for local snippets on the manage screen, building on the UI foundation branch.
Changes
SnippetCard): 5px corner radius, restyled footer bar split into a status region (inline start) and an actions region (inline end) via a newfooterStatusprop; custom-styled 20×20 bulk-select checkbox with accent border and white check when checked.PriorityColumn; the menu stays open while editing), divider, Restore (trashed view) and Trash/Delete Permanently (destructive, existing confirmation flow).DeleteButtoninto a reusableuseDeleteSnippethook so the kebab menu shares it without duplication..snippet-card-more*expander markup and styles.Verification
npm run build— passesnpm run lint:js— passesnpm run lint:styles— passesnpm run test:php— 116 tests, 258 assertions, 0 failures