refactor(design): one drawn check for every checkable row that cannot be an input (E28 S3e3b)

ui/MenuCheck: a box filled with the accent for a set (a minus for a group
only partly in), a bare tick for one choice, in the row's leading slot.
Replaces seven hand-drawn marks: three box sizes, a tinted box, a cross
for "on" in the table filter, a trailing tick in the language menu.

frontend/src/components/AddToPlaylist.tsx

@@ -2,7 +2,8 @@ import { useLayoutEffect, useState } from "react";
 import { useTranslation } from "react-i18next";
 import { useQuery, useQueryClient } from "@tanstack/react-query";
 import { qk } from "../lib/queryKeys";
-import { Check, ListPlus, Plus, Youtube } from "lucide-react";
+import { ListPlus, Plus, Youtube } from "lucide-react";
+import { MenuCheck } from "./ui/MenuCheck";
 import { api, type Playlist } from "../lib/api";
 import { notifyActionError } from "../lib/actionErrors";
 import { useScrollFade } from "../lib/useScrollFade";
@@ -177,13 +178,7 @@ function MembershipPanel({
                 label={playlistName(pl, t)}
                 className="w-full flex items-center gap-2 text-sm px-1.5 py-1.5 rounded-lg text-fg outline-hidden transition"
               >
-                <span
-                  className={`grid place-items-center w-4 h-4 rounded border ${
-                    pl.has_video ? "bg-accent border-accent text-accent-fg" : "border-border"
-                  }`}
-                >
-                  {pl.has_video && <Check className="w-3 h-3" />}
-                </span>
+                <MenuCheck kind="many" on={!!pl.has_video} />
                 <span className="truncate flex-1 text-left">{playlistName(pl, t)}</span>
                 {(pl.source === "youtube" || pl.yt_playlist_id) && (
                   <Youtube className="w-3 h-3 shrink-0 text-muted" />