[Link Checker GUI] Declutter Invalid Links Table View

[dasgoutam]

Short description

This PR changes the appearance of the Invalid Links Table based on the given design. Some visual changes would be applicable for all views in the Link-checker section. The functionality to "mark link as verified" is copied to the table.

Proposed changes

• SSL/Anker/Code columns are removed. Only "Status" column is used which is renamed as "Fehlermeldung" for just the Invalid links view. All code related to to SSL/Anker/Code is removed.
• A new option "Mark link as valid" is added to the "Options". The functionality was previously present as a bulk edit. So the existing functions are extended to support form submission from the table directly.
• The "Options" column has label + icon instead of just icon
• the "Verwendungen" column is removed and redesigned as a "Verwendungen"-tag which will be displayed below the URL
• A descriptive text above the table (This is just done for the Invalid Links table for this PR)
• The H1 headline is changed to "Verlinkungen" for all views, along with the menu item on the sidebar
• A new button is added above the table to link to the Wiki Page for broken links

Side effects

• Possible conflicts with [Link Checker GUI] Improve Emails and phone number table #4518
• The changes are implemented according to the acceptance criteria for this issue which modify the "Broken Links" view, but the linkcheck table markup is shared across all views (valid, unchecked, verified, etc.). Other PRs that already modify this shared table structure for other Linkcheck GUI issues may conflict with the changes here, since both are editing the same common template.

Faithfulness to issue description and design

There are no intended deviations from the issue and design.

How to test

• Validate the new GUI with the design - Figma
• Check if "Mark as verified" functionality works both in the table, as well as in bulk actions
• Check if texts/translations are as per the design

Resolved issues

Fixes: #4458

---

Pull Request Review Guidelines

[m0ndra]

Things I found while checking just the design:

• the visual line between the table rows is still missing (written below "Minor UI design changes" in user story conditions). You can reuse the visual line we already use in the tables on Events/Locations/Contacts pages.
• I'd love the table rows texts/elements to be aligned on top, so the users can read each row better (also visible the figma file):

• as far as i remember, adding a "td {vertical-align: baseline;}" to the table rows can do that, but of course you can decide how to do it :D
• the newly introduced button "Link Check Help" works, BUT is inconsistent to the other buttons we use within the system (border radius too high). If you look for example on the Pages or Events page, the filter button is the same styling as I used for the new "Link Check Help" button, so you can just reuse it, then it will be consistent:

[dasgoutam]

@m0ndra Thanks for the review😀 All the points should hopefully be fixed now with the latest commit.

the visual line between the table rows is still missing (written below "Minor UI design changes" in user story conditions). You can reuse the visual line we already use in the tables on Events/Locations/Contacts pages

Good catch. I think the visual line was missing only in Firefox, which I missed tested on. But hopefully I found the cause of that and it should work across all browsers now

[m0ndra]

Nice, I checked everything I stated above again, it looks fine now ✨

[MizukiTemma]

Thank you for the PR 😸 It looks good and is almost goot to go.

I have some small suggestions, find them below 💡

[MizukiTemma]

@dasgoutam
Thank you 😺 Looks good 🎉

[dasgoutam]

@dasgoutam Thank you 😺 Looks good 🎉

@MizukiTemma Thanks for the review 😀

[seluianova]

looks good to me, couldn't find any issues 👍

[dasgoutam]

looks good to me, couldn't find any issues 👍

@seluianova Thanks for the review 😀