Skip to content

feat: implement finalized local snippet card design#416

Merged
sheabunge merged 81 commits into
feat/168-ui-foundationfrom
feat/169-snippet-cards
Jul 21, 2026
Merged

feat: implement finalized local snippet card design#416
sheabunge merged 81 commits into
feat/168-ui-foundationfrom
feat/169-snippet-cards

Conversation

@imantsk

@imantsk imantsk commented Jul 14, 2026

Copy link
Copy Markdown
Member

Implements the finalized card design for local snippets on the manage screen, building on the UI foundation branch.

Changes

  • Card shell (SnippetCard): 5px corner radius, restyled footer bar split into a status region (inline start) and an actions region (inline end) via a new footerStatus prop; custom-styled 20×20 bulk-select checkbox with accent border and white check when checked.
  • Card header: activation toggle, type badge, and 18px accent title on a single row. Toggle restyled to a 36×19 accent pill (transparent with accent knob when off, accent fill with white knob when on).
  • Meta row: tag links at the inline start, "Modified X ago" at the inline end, followed by a separator and a two-line clamped description.
  • Selection checkbox is hidden until the card is hovered or focused, and stays visible while checked or while any selection is active in the grid (including select-all).
  • Footer actions: Preview (outline) and Edit (filled) buttons plus a kebab menu that replaces the previous "Show more" expander. Menu contents: Clone, Export, divider, inline Priority editor (reuses the existing save-on-blur/submit PriorityColumn; the menu stays open while editing), divider, Restore (trashed view) and Trash/Delete Permanently (destructive, existing confirmation flow).
  • Extracted the delete confirmation flow from DeleteButton into a reusable useDeleteSnippet hook so the kebab menu shares it without duplication.
  • Removed the .snippet-card-more* expander markup and styles.
  • Network-only and shared-network snippets keep their previous capabilities: status label in the footer, no edit/clone/export/delete actions, priority still editable. Trashed snippets show Restore and Delete Permanently, matching the list-view row actions.

Verification

  • npm run build — passes
  • npm run lint:js — passes
  • npm run lint:styles — passes
  • npm run test:php — 116 tests, 258 assertions, 0 failures

@imantsk
imantsk force-pushed the feat/169-snippet-cards branch from b59aac7 to 6184a0a Compare July 14, 2026 17:25
@imantsk
imantsk force-pushed the feat/168-ui-foundation branch from d02849c to d69c5f6 Compare July 15, 2026 14:33
@imantsk
imantsk force-pushed the feat/169-snippet-cards branch from 77bb4b0 to 0072006 Compare July 15, 2026 14:33
@imantsk
imantsk force-pushed the feat/168-ui-foundation branch from d69c5f6 to ee0e4de Compare July 15, 2026 14:52
@imantsk
imantsk force-pushed the feat/169-snippet-cards branch from b71c709 to a2dea3f Compare July 15, 2026 14:52
@code-snippets-bot

code-snippets-bot commented Jul 16, 2026

Copy link
Copy Markdown
Contributor

Three behavior-preserving cleanups remain in this PR's exact diff:

  • Medium — Preserve machine-readable modified dates. src/js/components/ManageMenu/SnippetsTable/ManageSnippetCard.tsx:166-174 replaces DateColumn, which emitted <time dateTime={snippet.modified}>, with a plain <span>. Keep the card-specific “Modified …” copy, but wrap it in <time dateTime={snippet.modified}> or reuse a shared modified-date component.
  • Low — Reuse the canonical capability helpers. ManageSnippetCard.tsx:24-28 duplicates isNetworkOnlySnippet() and canModifySnippet() from src/js/utils/snippets/snippets.ts:105-114. Import the shared helpers so card and table permission logic cannot drift.
  • Low — Remove the newly dead corner-controls path. Moving activation into the card header leaves SnippetCard.cornerControls without callers. Remove the unused prop, conditional markup, has-corner-controls class, and related styling.

@imantsk

imantsk commented Jul 17, 2026

Copy link
Copy Markdown
Member Author

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.

@code-snippets-bot

Copy link
Copy Markdown
Contributor

Three semantic cleanups remain:

  • The priority field is placed inside <ul role="menu"> via a role="presentation" row (KebabMenu.tsx:72-75,228-235, used at ManageSnippetCard.tsx:133-136). This leaves a focusable spinbutton inside a menu without a menu-item role, which does not conform to the ARIA menu pattern. Please either make this a generic popover with native form-control semantics or keep the menu restricted to menu items and move the priority control outside it.
  • SearchResult.tsx:59-66 renders the new cloud modified date as a <span>. Please use <time dateTime={snippet.updated}>, matching the local-card fix.
  • SearchResult.tsx:20-25 concatenates the translated "By " fragment with the author link. Please expose a complete, reorderable translated phrase rather than a standalone translated fragment.

@imantsk

imantsk commented Jul 17, 2026

Copy link
Copy Markdown
Member Author

The kebab is now a generic popover with native form-control semantics, modified dates render as <time> elements, and the author credit is a single translatable phrase.

@code-snippets-bot
code-snippets-bot marked this pull request as ready for review July 18, 2026 10:12
Maisy and others added 3 commits July 19, 2026 17:09
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 }

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This is a bad pattern IMO: avoid components returning other components where possible.

const { closeMenu } = useKebabMenu()

return (
<li role="presentation">

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Why is this removed?

<li>
<button
type="button"
role="menuitem"

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Why is this removed?

getSnippetType,
isNetworkOnlySnippet,
isSnippetActive
} from '../../../utils/snippets/snippets'

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Avoid nesting ternary statements where possible.

@sheabunge
sheabunge merged commit 4c5343c into feat/168-ui-foundation Jul 21, 2026
6 checks passed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

3 participants