Fix issue "checkbox are not aligned with text when multi-selecting"

[SimeonAT]

Pull request fixes the issue where the checkboxes are not aligned with the title of a list of genres or songs when the multi-select UI is enabled. This issue is discussed in Music Assistant Project Board (view).

On Desktop:

On Mobile:

[Copilot]

Pull request overview

This PR aims to fix multi-select list-view alignment issues by changing how the checkbox and item title are rendered so the checkbox aligns with the item’s title text.

Changes:

• Added a new ListviewItemTitle.vue component to encapsulate title rendering (folder name, version/year, explicit icon tooltip).
• Updated ListviewItem.vue to render a checkbox + label in the #prepend slot when multi-select is enabled.
• Refactored/removes inline title logic from ListviewItem.vue to use the new component.

Reviewed changes

Copilot reviewed 2 out of 2 changed files in this pull request and generated 5 comments.

File	Description
src/components/ListviewItemTitle.vue	New extracted title component (folder/title text + explicit tooltip).
src/components/ListviewItem.vue	Moves checkbox rendering to #prepend and replaces inline title with the new component.

Comments suppressed due to low confidence (2)

src/components/ListviewItemTitle.vue:65

• compProps is declared with withDefaults(defineProps(...)) but never used; the template accesses displayName/item/showCheckboxes directly. Consider either using compProps consistently (to apply defaults) or removing it to avoid dead code and confusion.

const compProps = withDefaults(defineProps<Props>(), {
  displayName: "",
  showCheckboxes: false,
});

src/components/ListviewItem.vue:228

• Component naming is inconsistent here: ListviewitemTitle uses a lower-case i in item, while the file is ListviewItemTitle.vue and other component imports in this file use PascalCase. Rename the import/local component name (and the template tag) to ListviewItemTitle for consistency and readability.

import ListviewitemTitle from "./ListviewItemTitle.vue";
import { Checkbox } from "@/components/ui/checkbox";

---

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

You can also share your feedback on Copilot code review. Take the survey.

[SimeonAT]

Regarding Co-Pilot's comments that were suppressed due to low confidence:

compProps is declared with withDefaults(defineProps(...)) but never used; the template accesses displayName/item/showCheckboxes directly. Consider either using compProps consistently (to apply defaults) or removing it to avoid dead code and confusion.

const compProps = withDefaults(defineProps<Props>(), {
  displayName: "",
  showCheckboxes: false,
});

I added default values for isPlaying as well in commit SimeonAT@b0a894b.

Following the convention in ListviewItem.vue, I did not add a default value for the item prop in compProps.

Component naming is inconsistent here: ListviewitemTitle uses a lower-case i in item, while the file is ListviewItemTitle.vue and other component imports in this file use PascalCase. Rename the import/local component name (and the template tag) to ListviewItemTitle for consistency and readability.

import ListviewitemTitle from "./ListviewItemTitle.vue";
import { Checkbox } from "@/components/ui/checkbox";

I don't believe it is necessary to change the name of the component. The ListviewItemTitle is a subcomponent of ListviewItem, which uses a lowercase "v" for "view" and capital "I" for "Item".

[stvncode]

Also, you don't have to do many commits for a small feature like this. Just do one please, it's not easy for us to have that many commits (you did 33 commits btw for a pr that even with review should have 4-5 commits max)

[Copilot]

Pull request overview

Copilot reviewed 2 out of 2 changed files in this pull request and generated 4 comments.

---

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

You can also share your feedback on Copilot code review. Take the survey.

[Copilot]

TooltipProvider is instantiated per list item/title. Since the default layout already wraps the app in a TooltipProvider (via SidebarProvider), this is redundant and can add unnecessary overhead in long lists. Consider removing the per-item TooltipProvider here and relying on the top-level provider.

[stvncode]

Just need to change that and we are good to go 😃

[MarvinSchenkel]

Hey @SimeonAT , thanks for your efforts!

Just had a quick look and this experience is not nice. We should maintain the same space as the icon, now the text jumps back and forth. Also, the font seems to change when we start multi selecting, this should remain the same. Here is a video:

Screen.Recording.2026-03-11.at.09.37.10.mov