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>

7 files changed, 81 insertions, 103 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;
+}
diff --git a/web_src/js/features/repo-issue-list.js b/web_src/js/features/repo-issue-list.js
index 3dc523e709..64343a8d22 100644
--- a/web_src/js/features/repo-issue-list.js
+++ b/web_src/js/features/repo-issue-list.js
@@ -140,7 +140,7 @@ function initRepoIssueListAuthorDropdown() {
 }
 
 function initPinRemoveButton() {
-  for (const button of document.getElementsByClassName('pinned-issue-unpin')) {
+  for (const button of document.getElementsByClassName('issue-card-unpin')) {
     button.addEventListener('click', async (event) => {
       const el = event.currentTarget;
       const id = Number(el.getAttribute('data-issue-id'));
@@ -157,7 +157,7 @@ function initPinRemoveButton() {
         // Delete the tooltip
         el._tippy.destroy();
         // Remove the Card
-        el.closest(`div.pinned-issue-card[data-issue-id="${id}"]`).remove();
+        el.closest(`div.issue-card[data-issue-id="${id}"]`).remove();
       }
     });
   }
diff --git a/web_src/js/features/repo-projects.js b/web_src/js/features/repo-projects.js
index 1b8807d243..f12d4f234f 100644
--- a/web_src/js/features/repo-projects.js
+++ b/web_src/js/features/repo-projects.js
@@ -7,27 +7,27 @@ const {csrfToken} = window.config;
 
 function updateIssueCount(cards) {
   const parent = cards.parentElement;
-  const cnt = parent.getElementsByClassName('board-card').length;
-  parent.getElementsByClassName('board-card-cnt')[0].textContent = cnt;
+  const cnt = parent.getElementsByClassName('issue-card').length;
+  parent.getElementsByClassName('project-column-issue-count')[0].textContent = cnt;
 }
 
-function createNewBoard(url, boardTitle, projectColorInput) {
+function createNewColumn(url, columnTitle, projectColorInput) {
   $.ajax({
     url,
-    data: JSON.stringify({title: boardTitle.val(), color: projectColorInput.val()}),
+    data: JSON.stringify({title: columnTitle.val(), color: projectColorInput.val()}),
     headers: {
       'X-Csrf-Token': csrfToken,
     },
     contentType: 'application/json',
     method: 'POST',
   }).done(() => {
-    boardTitle.closest('form').removeClass('dirty');
+    columnTitle.closest('form').removeClass('dirty');
     window.location.reload();
   });
 }
 
 function moveIssue({item, from, to, oldIndex}) {
-  const columnCards = to.getElementsByClassName('board-card');
+  const columnCards = to.getElementsByClassName('issue-card');
   updateIssueCount(from);
   updateIssueCount(to);
 
@@ -56,19 +56,19 @@ async function initRepoProjectSortable() {
   const els = document.querySelectorAll('#project-board > .board.sortable');
   if (!els.length) return;
 
-  // the HTML layout is: #project-board > .board > .board-column .board.cards > .board-card.card .content
+  // the HTML layout is: #project-board > .board > .project-column .cards > .issue-card
   const mainBoard = els[0];
-  let boardColumns = mainBoard.getElementsByClassName('board-column');
+  let boardColumns = mainBoard.getElementsByClassName('project-column');
   createSortable(mainBoard, {
-    group: 'board-column',
-    draggable: '.board-column',
+    group: 'project-column',
+    draggable: '.project-column',
     filter: '[data-id="0"]',
     animation: 150,
     ghostClass: 'card-ghost',
     delayOnTouchOnly: true,
     delay: 500,
     onSort: () => {
-      boardColumns = mainBoard.getElementsByClassName('board-column');
+      boardColumns = mainBoard.getElementsByClassName('project-column');
       for (let i = 0; i < boardColumns.length; i++) {
         const column = boardColumns[i];
         if (parseInt($(column).data('sorting')) !== i) {
@@ -87,7 +87,7 @@ async function initRepoProjectSortable() {
   });
 
   for (const boardColumn of boardColumns) {
-    const boardCardList = boardColumn.getElementsByClassName('board')[0];
+    const boardCardList = boardColumn.getElementsByClassName('cards')[0];
     createSortable(boardCardList, {
       group: 'shared',
       animation: 150,
@@ -107,18 +107,18 @@ export function initRepoProject() {
 
   const _promise = initRepoProjectSortable();
 
-  $('.edit-project-board').each(function () {
-    const projectHeader = $(this).closest('.board-column-header');
-    const projectTitleLabel = projectHeader.find('.board-label');
-    const projectTitleInput = $(this).find('.project-board-title');
-    const projectColorInput = $(this).find('#new_board_color');
-    const boardColumn = $(this).closest('.board-column');
+  $('.edit-project-column-modal').each(function () {
+    const projectHeader = $(this).closest('.project-column-header');
+    const projectTitleLabel = projectHeader.find('.project-column-title');
+    const projectTitleInput = $(this).find('.project-column-title-input');
+    const projectColorInput = $(this).find('#new_project_column_color');
+    const boardColumn = $(this).closest('.project-column');
 
     if (boardColumn.css('backgroundColor')) {
       setLabelColor(projectHeader, rgbToHex(boardColumn.css('backgroundColor')));
     }
 
-    $(this).find('.edit-column-button').on('click', function (e) {
+    $(this).find('.edit-project-column-button').on('click', function (e) {
       e.preventDefault();
 
       $.ajax({
@@ -141,9 +141,9 @@ export function initRepoProject() {
     });
   });
 
-  $('.default-project-board-modal').each(function () {
-    const boardColumn = $(this).closest('.board-column');
-    const showButton = $(boardColumn).find('.default-project-board-show');
+  $('.default-project-column-modal').each(function () {
+    const boardColumn = $(this).closest('.project-column');
+    const showButton = $(boardColumn).find('.default-project-column-show');
     const commitButton = $(this).find('.actions > .ok.button');
 
     $(commitButton).on('click', (e) => {
@@ -162,7 +162,7 @@ export function initRepoProject() {
     });
   });
 
-  $('.show-delete-column-modal').each(function () {
+  $('.show-delete-project-column-modal').each(function () {
     const deleteColumnModal = $(`${$(this).attr('data-modal')}`);
     const deleteColumnButton = deleteColumnModal.find('.actions > .ok.button');
     const deleteUrl = $(this).attr('data-url');
@@ -183,28 +183,28 @@ export function initRepoProject() {
     });
   });
 
-  $('#new_board_submit').on('click', (e) => {
+  $('#new_project_column_submit').on('click', (e) => {
     e.preventDefault();
-    const boardTitle = $('#new_board');
-    const projectColorInput = $('#new_board_color_picker');
-    if (!boardTitle.val()) {
+    const columnTitle = $('#new_project_column');
+    const projectColorInput = $('#new_project_column_color_picker');
+    if (!columnTitle.val()) {
       return;
     }
     const url = $(this).data('url');
-    createNewBoard(url, boardTitle, projectColorInput);
+    createNewColumn(url, columnTitle, projectColorInput);
   });
 
-  $('.new-board').on('input keyup', (e) => {
-    const boardTitle = $('#new_board');
-    const projectColorInput = $('#new_board_color_picker');
-    if (!boardTitle.val()) {
-      $('#new_board_submit').addClass('disabled');
+  $('.new-project-column').on('input keyup', (e) => {
+    const columnTitle = $('#new_project_column');
+    const projectColorInput = $('#new_project_column_color_picker');
+    if (!columnTitle.val()) {
+      $('#new_project_column_submit').addClass('disabled');
       return;
     }
-    $('#new_board_submit').removeClass('disabled');
+    $('#new_project_column_submit').removeClass('disabled');
     if (e.key === 'Enter') {
       const url = $(this).data('url');
-      createNewBoard(url, boardTitle, projectColorInput);
+      createNewColumn(url, columnTitle, projectColorInput);
     }
   });
 }