GSOC-E2E: Add collections lifecycle test

[Geethegreat]

Issue:

Fixes #

Adds a test that covers the full collections management lifecycle for an authenticated user.

Demo:

e2e-collections-1.mp4

Changes:

• Save a sketch from the editor
• Navigate to the collections page and confirm no collections exist
• Create a new collection
• Confirm redirect to the new collection page with "No sketches in collection" message
• Add both saved sketches to the collection via File → Add to Collection
• Verify both sketches appear in the collection table
• Navigate to the collections list and confirm the sketch count shows 2
• Rename the collection via the dropdown
• Verify the new collection name appears in the table
• Remove the sketch from the collection
• Verify the sketch count drops to 0
• Delete the collection
• Confirm the collection no longer appears in the table

I have verified that this pull request:

• has no linting errors (npm run lint)
• has no test errors (npm run test)
• has no typecheck errors (npm run typecheck)
• is from a uniquely-named feature branch and is up to date with the develop branch.
• is descriptively named and links to an issue number, i.e. Fixes #123
• meets the standards outlined in the accessibility guidelines

[clairep94]

can we update to page.getByRole('menuitem', { name: ${testUser.username}` }).click();

or at least have the other selector methods be consistent throughout this file

[clairep94]

Let's unify how we do selectors on this test, you have a mixture of methods here:

page.locator('.editor-holder');
page.locator('button.editable-input__label')
page.getByRole('menuitem', { name: testUser.username })
page.locator('input#name')
page.getByRole('button', { name: 'Add to collection', exact: true })

etcetc

[clairep94]

I personally prefer page.getByRole for readability

I think some folks also prefer it as it tests accessibility
https://www.reddit.com/r/Playwright/comments/1m91faa/locator_or_getbyrole/