Refactor project templates (#26448)

This PR refactors a bunch of projects-related code, mostly the
templates.
The following things were done:
  - rename boards to columns in frontend code
  - use the new `ctx.Locale.Tr` method
  - cleanup template, remove useless newlines, classes, comments
  - merge org-/user and repo level project template together
    - move "new column" button into project toolbar
- move issue card (shared by projects and pinned issues) to shared
template, remove useless duplicated styles
- add search function to projects (to make the layout more similar to
milestones list where it is inherited from :laughing:)
  - maybe more changes I forgot I've done :laughing: 

Closes #24893

After:
![Bildschirmfoto vom 2023-08-10
23-02-00](https://github.com/go-gitea/gitea/assets/47871822/cab61456-1d23-4373-8163-e567f1b3b5f9)
![Bildschirmfoto vom 2023-08-10
23-02-26](https://github.com/go-gitea/gitea/assets/47871822/94b55d60-5572-48eb-8111-538a52d8bcc6)
![Bildschirmfoto vom 2023-08-10
23-02-46](https://github.com/go-gitea/gitea/assets/47871822/a0358f4b-4e05-4194-a7bc-6e0ecba5a9b6)

---------

Co-authored-by: silverwind <me@silverwind.io>

5 files changed, 44 insertions, 66 deletions

diff --git a/web_src/css/features/projects.css b/web_src/css/features/projects.css
index bd48429fa6..f85430a2a8 100644
--- a/web_src/css/features/projects.css
+++ b/web_src/css/features/projects.css
@@ -6,11 +6,7 @@
   margin: 0 0.5em;
 }
 
-.board.sortable .board-card {
-  cursor: move;
-}
-
-.board-column {
+.project-column {
   background-color: var(--color-project-board-bg) !important;
   border: 1px solid var(--color-secondary) !important;
   margin: 0 0.5rem !important;
@@ -25,33 +21,34 @@
   flex-direction: column;
 }
 
-.board-column-header {
+.project-column-header {
   display: flex;
+  align-items: center;
   justify-content: space-between;
 }
 
-.board-column-header.dark-label {
+.project-column-header.dark-label {
   color: var(--color-project-board-dark-label) !important;
 }
 
-.board-column-header.dark-label .board-label {
+.project-column-header.dark-label .project-column-title {
   color: var(--color-project-board-dark-label) !important;
 }
 
-.board-column-header.light-label {
+.project-column-header.light-label {
   color: var(--color-project-board-light-label) !important;
 }
 
-.board-column-header.light-label .board-label {
+.project-column-header.light-label .project-column-title {
   color: var(--color-project-board-light-label) !important;
 }
 
-.board-label {
+.project-column-title {
   background: none !important;
   line-height: 1.25 !important;
 }
 
-.board-column > .cards {
+.project-column > .cards {
   flex: 1;
   display: flex;
   align-content: baseline;
@@ -59,60 +56,37 @@
   padding: 0 !important;
   flex-wrap: nowrap !important;
   flex-direction: column;
+  overflow-x: auto;
+  gap: .25rem;
 }
 
-.project-board-title {
-  word-break: break-word;
-}
-
-.board-column > .divider {
+.project-column > .divider {
   margin: 5px 0;
 }
 
-.board-column:first-child {
+.project-column:first-child {
   margin-left: auto !important;
 }
 
-.board-column:last-child {
+.project-column:last-child {
   margin-right: auto !important;
 }
 
-.board-column .ui.cards > .card > .content {
-  border: none;
-}
-
-.board-card {
-  margin: 4px 2px !important;
-  border-radius: 5px !important;
-  width: calc(100% - 4px) !important;
-  padding: 0.5rem !important;
-  min-height: auto !important;
-}
-
-.board-card .meta * {
-  margin-right: 0 !important;
-}
-
-.board-card .header {
-  margin-top: 0 !important;
-  font-size: 16px !important;
-}
-
-.board-card .card-attachment-images {
+.card-attachment-images {
   display: inline-block;
   white-space: nowrap;
   overflow: hidden;
   text-align: center;
 }
 
-.board-card .card-attachment-images img {
+.card-attachment-images img {
   display: inline-block;
   max-height: 50px;
   border-radius: var(--border-radius);
   margin-right: 2px;
 }
 
-.board-card .card-attachment-images img:only-child {
+.card-attachment-images img:only-child {
   max-height: 90px;
   margin: auto;
 }
@@ -139,12 +113,12 @@
   top: 10px;
 }
 
-.edit-project-board .color.picker.column,
-.new-board-modal .color.picker.column {
+.edit-project-column-modal .color.picker.column,
+.new-project-column-modal .color.picker.column {
   display: flex;
 }
 
-.edit-project-board .color.picker.column .minicolors,
-.new-board-modal .color.picker.column .minicolors {
+.edit-project-column-modal .color.picker.column .minicolors,
+.new-project-column-modal .color.picker.column .minicolors {
   flex: 1;
 }
diff --git a/web_src/css/helpers.css b/web_src/css/helpers.css
index 8a6c2c6539..35b5d3c97e 100644
--- a/web_src/css/helpers.css
+++ b/web_src/css/helpers.css
@@ -60,6 +60,7 @@ Gitea's private styles use `g-` prefix.
 .gt-content-center { align-content: center !important; }
 .gt-cursor-default { cursor: default !important; }
 .gt-cursor-pointer { cursor: pointer !important; }
+.gt-cursor-grab { cursor: grab !important; }
 .gt-invisible { visibility: hidden !important; }
 .gt-items-start { align-items: flex-start !important; }
 .gt-pointer-events-none { pointer-events: none !important; }
diff --git a/web_src/css/index.css b/web_src/css/index.css
index 55ea67453b..d399f073d5 100644
--- a/web_src/css/index.css
+++ b/web_src/css/index.css
@@ -45,6 +45,7 @@
 
 @import "./repo.css";
 @import "./repo/release-tag.css";
+@import "./repo/issue-card.css";
 @import "./repo/issue-label.css";
 @import "./repo/issue-list.css";
 @import "./repo/list-header.css";
diff --git a/web_src/css/repo.css b/web_src/css/repo.css
index 2b3f4e1efb..34fa2a0052 100644
--- a/web_src/css/repo.css
+++ b/web_src/css/repo.css
@@ -3302,25 +3302,6 @@ tbody.commit-list {
   }
 }
 
-.pinned-issue-card {
-  border-radius: var(--border-radius);
-  padding: 8px 10px;
-  border: 1px solid var(--color-secondary);
-  background: var(--color-card);
-}
-
-.pinned-issue-icon,
-.pinned-issue-unpin {
-  margin-top: 1px;
-  flex-shrink: 0;
-}
-
-.pinned-issue-title {
-  flex: 1;
-  font-size: 18px;
-  margin-left: 4px;
-}
-
 #cherry-pick-modal .scrolling.menu {
   max-height: 200px;
 }
diff --git a/web_src/css/repo/issue-card.css b/web_src/css/repo/issue-card.css
new file mode 100644
index 0000000000..31d3a2375b
--- /dev/null
+++ b/web_src/css/repo/issue-card.css
@@ -0,0 +1,21 @@
+.issue-card {
+  display: flex;
+  flex-direction: column;
+  align-items: start;
+  border-radius: var(--border-radius);
+  padding: 8px 10px;
+  border: 1px solid var(--color-secondary);
+  background: var(--color-card);
+}
+
+.issue-card-icon,
+.issue-card-unpin {
+  margin-top: 1px;
+  flex-shrink: 0;
+}
+
+.issue-card-title {
+  flex: 1;
+  font-size: 18px;
+  margin-left: 4px;
+}