Transparency in project boards stops javascript due to kanban sorting.

[MisterCavespider]

Description

When using a theme that contains semi-transparent backgrounds for UI elements, Gitea will throw a JS error due to the way the cards are sorted (see screenshot 1).
Due to this JS error, most functionality dependent on JS fails, such as edit or delete buttons.

The error (in the source code) leads to the file web_src/js/features/repo-projects.js, lines 59 and 203.

The error occurs because of the following reasons:

1. Each project card may have a colour, or none.
2. If the project card has no colour, the default CSS colour is used.
3. Some themes have semi-transparent UI elements, with background-color: rgba(0, 0, 0, 0.15);, for example.
4. repo_projects.js wants to sort cards by colour.
5. The colour of the cards is extracted from the CSS.
6. The colour is matched to the pattern rgb(x, y, z), which does not take into account that themes may define colours as rgba(x, y, z, a).
7. (The colour is communicated through a PUT request).

Proposed Solutions

1. Change the regex from ^rgb\((\d+),\s*(\d+),\s*(\d+)\)$ to ^rgba?\((\d+),\s*(\d+),\s*(\d+)(.*)?\)$ and ignore the alpha channel from the sorting criteria.
2. Change the regex from ^rgb\((\d+),\s*(\d+),\s*(\d+)\)$ to ^rgba?\((\d+),\s*(\d+),\s*(\d+)(,\s*(\d+(\.\d+)?))?\)$ (alpha channel is a float or NaN on 5th group) and include the alpha channel in the sorting criteria.
3. Rethink on why you're reading colours out of the CSS in the first place, then reformat this sorting procedure.

History

Going back in the git history, this bug was implemented in commit ecfac78 with merge request #16647 on 17/08/2021 in order to get Kanban colour sorting.

Reproduce

1. Get any instance of Gitea running
2. Configure a theme with semi-transparent UI elements, for example 'hotpink' from theme.park:
   1. Add data/gitea/templates/custom/body_outer_pre.tmpl with body:

      {{ if .IsSigned }}
        {{ if and (ne .SignedUser.Theme "gitea") (ne .SignedUser.Theme "arc-green") }}
          <link rel="stylesheet" href="https://theme-park.dev/css/base/gitea/{{.SignedUser.Theme}}.css">
        {{end}}
      {{ else if and (ne DefaultTheme "gitea") (ne DefaultTheme "arc-green") }}
        <link rel="stylesheet" href="https://theme-park.dev/css/base/gitea/{{DefaultTheme}}.css">
      {{end}}
      

   2. Add to data/gitea/conf/app.ini:

      [ui]
      THEMES = gitea,arc-green,plex,aquamarine,dark,dracula,hotline,organizr,space-gray,hotpink,onedark,overseerr,nord
      DEFAULT_THEME = gitea
      

   3. Alternatively, pick any theme and add the CSS rule .ui.segment { background: rgba(0, 0, 0, 0.28) !important; }.
3. Go to any repository, open the Projects tab, and open a project.
4. Make sure at least one board has no colour assigned.
5. Error will pop up on the top of the screen.

Gitea Version

latest, v1.9.6

Can you reproduce the bug on the Gitea demo site?

Yes

Log Gist

No response

Screenshots

Screenshot 1 (JavaScript error)

Screenshot 2 (Semi-transparent UI elements)

Git Version

No response

Operating System

default docker image; Void Linux on Linux m-desktop 6.0.10_1 #1 SMP PREEMPT_DYNAMIC Mon Nov 28 03:42:58 UTC 2022 x86_64 GNU/Linux

How are you running Gitea?

This issue can be replicated on both the default Docker image and when building Gitea from source.

Database

None

[Zettat123]

Fixed in #22092.