Fix dropdown styling for Author form

[FyreByrd]

Fixes #1412

Summary by CodeRabbit

• Bug Fixes

  • Improved author selection state management in forms to properly reset selections after updates.

• Style

  • Enhanced author selection interface with a custom dropdown component for improved usability in forms.

_{✏️ Tip: You can customize this high-level summary in your review settings.}

[coderabbitai]

Walkthrough

This PR replaces the native HTML select element with a custom Dropdown component in the Authors form section. It updates Superform integration to track author selection state and refresh on form updates, improving visibility and styling consistency with other dropdown controls.

Changes

Cohort / File(s)	Summary
Author dropdown UI replacement src/routes/(authenticated)/projects/[id=idNumber]/forms/Authors.svelte	Replaced native select with custom Dropdown component; added local state for dropdown open state and selected author; introduced hidden input for form submission; updated Superform usage with onUpdated handler to reset selection; sorted author list rendering; minor layout class adjustments

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~15 minutes

• Verify Dropdown component integration and behavior correctness
• Validate Superform onUpdated handler properly resets selectedAuthor state
• Confirm author selection flows through hidden input to form submission
• Test sorted author list rendering and empty-group message display

Possibly related PRs

• #1089: Introduces the Dropdown component refactor that this PR directly depends on for the select replacement

Suggested reviewers

• chrisvire

Poem

🐰 A dropdown once hidden from sight,
Now styled with borders so bright!
The authors reveal,
With Dropdown's appeal—
Visibility fixed just right! ✨

Pre-merge checks and finishing touches

✅ Passed checks (5 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The PR title accurately describes the main change: replacing a native select with a styled Dropdown component for the Author form to improve visual clarity.
Linked Issues check	✅ Passed	The changes implement the requirement to make the author dropdown visually clear by replacing the native select with a custom Dropdown component that can be styled to match other dropdowns.
Out of Scope Changes check	✅ Passed	All changes are scoped to the Authors.svelte component and directly address the dropdown styling issue; no unrelated modifications were introduced.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.

✨ Finishing touches

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Post copyable unit tests in a comment
• Commit unit tests in branch fix/author-select-ui

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

[coderabbitai]

Actionable comments posted: 1

Caution

Some comments are outside the diff and can’t be posted inline due to platform limitations.

⚠️ Outside diff range comments (1)

src/routes/(authenticated)/projects/[id=idNumber]/forms/Authors.svelte (1)

108-162: Prevent form submission without author selection.

The hidden input at line 110 will have an undefined value when no author is selected, allowing users to submit an incomplete form. Consider disabling the submit button when selectedAuthor is null to improve UX and prevent invalid submissions.

Apply this diff to disable the submit button when no author is selected:

-          <BlockIfJobsUnavailable className="btn btn-primary">
+          <BlockIfJobsUnavailable className="btn btn-primary {!selectedAuthor ? 'btn-disabled' : ''}">
             {#snippet altContent()}
               {m.authors_submit()}
             {/snippet}
-            <button type="submit" class="btn btn-primary">
+            <button type="submit" class="btn btn-primary" disabled={!selectedAuthor}>
               {m.authors_submit()}
             </button>
           </BlockIfJobsUnavailable>

🧹 Nitpick comments (1)

src/routes/(authenticated)/projects/[id=idNumber]/forms/Authors.svelte (1)

119-127: Use descriptive placeholder text instead of empty space.

Line 122 uses a single space (' ') as the fallback when no author is selected, which provides no guidance to users. Consider using a descriptive placeholder like an i18n message (e.g., m.authors_select() or similar) to improve clarity.

Example improvement:

                 <span class="px-1 w-full text-left">
                   {#if availableAuthors.length}
-                    {selectedAuthor?.Name ?? ' '}
+                    {selectedAuthor?.Name ?? m.authors_selectPlaceholder()}
                   {:else}
                     {m.authors_emptyGroup()}
                   {/if}
                 </span>

📜 Review details

Configuration used: CodeRabbit UI

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between ee9952c and dba6ca4.

📒 Files selected for processing (1)

• src/routes/(authenticated)/projects/[id=idNumber]/forms/Authors.svelte (3 hunks)

⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (2)

• GitHub Check: checks / build-and-test
• GitHub Check: check / build-and-test

🔇 Additional comments (1)

src/routes/(authenticated)/projects/[id=idNumber]/forms/Authors.svelte (1)

48-60: LGTM! Clean state management approach.

The superform integration is well-designed: removing the form binding since you're managing selection state locally, and the onUpdated handler appropriately resets the dropdown after form updates.

[FyreByrd]

Marking as draft for now. I will be working on a more thorough change that fixes the styling of all the <select> elements to be more consistent.