Remove DiffFileList component

The benefit / functionality provided by DiffFileList is already (better)
integrated in the header of the files.
If you want an overview, you can collapse all files via the same
overflow menu (where the stats were available).
To reduce the maintenance effort, the DiffFileList component is
therefore removed.

4 files changed, 2 insertions, 94 deletions

diff --git a/web_src/css/repo.css b/web_src/css/repo.css
index e9cfc1ddde..e960e9103b 100644
--- a/web_src/css/repo.css
+++ b/web_src/css/repo.css
@@ -1709,26 +1709,6 @@ td .commit-summary {
   max-width: initial; /* remove fomantic over 100% width */
 }
 
-.repository .diff-stats {
-  clear: both;
-  margin-bottom: 5px;
-  max-height: 200px;
-  height: fit-content;
-  overflow: auto;
-  padding-left: 0;
-}
-
-.repository .diff-stats li {
-  list-style: none;
-  padding-bottom: 4px;
-  margin-bottom: 4px;
-  padding-left: 6px;
-}
-
-.repository .diff-stats li + li {
-  border-top: 1px solid var(--color-secondary);
-}
-
 .repository .repo-search-result {
   padding-top: 10px;
   padding-bottom: 10px;
@@ -1839,10 +1819,6 @@ details.repo-search-result summary::marker {
   color: var(--color-success-text);
 }
 
-.repository .ui.attached.isSigned.isVerified.message .pull-right {
-  color: var(--color-text);
-}
-
 .repository .ui.attached.isSigned.isVerified.message .ui.text {
   color: var(--color-success-text);
 }
diff --git a/web_src/js/components/DiffFileList.vue b/web_src/js/components/DiffFileList.vue
deleted file mode 100644
index 916780d913..0000000000
--- a/web_src/js/components/DiffFileList.vue
+++ /dev/null
@@ -1,58 +0,0 @@
-<script>
-import {loadMoreFiles} from '../features/repo-diff.js';
-import {diffTreeStore} from '../modules/stores.js';
-
-export default {
-  data: () => {
-    return {store: diffTreeStore()};
-  },
-  mounted() {
-    document.getElementById('show-file-list-btn').addEventListener('click', this.toggleFileList);
-  },
-  unmounted() {
-    document.getElementById('show-file-list-btn').removeEventListener('click', this.toggleFileList);
-  },
-  methods: {
-    toggleFileList() {
-      this.store.fileListIsVisible = !this.store.fileListIsVisible;
-    },
-    diffTypeToString(pType) {
-      const diffTypes = {
-        1: 'add',
-        2: 'modify',
-        3: 'del',
-        4: 'rename',
-        5: 'copy',
-      };
-      return diffTypes[pType];
-    },
-    diffStatsWidth(adds, dels) {
-      return `${adds / (adds + dels) * 100}%`;
-    },
-    loadMoreData() {
-      loadMoreFiles(this.store.linkLoadMore);
-    },
-  },
-};
-</script>
-<template>
-  <ol class="diff-stats tw-m-0" ref="root" v-if="store.fileListIsVisible">
-    <li v-for="file in store.files" :key="file.NameHash">
-      <div class="tw-font-semibold tw-flex tw-items-center pull-right">
-        <span v-if="file.IsBin" class="tw-ml-0.5 tw-mr-2">{{ store.binaryFileMessage }}</span>
-        {{ file.IsBin ? '' : file.Addition + file.Deletion }}
-        <span v-if="!file.IsBin" class="diff-stats-bar tw-mx-2" :data-tooltip-content="store.statisticsMessage.replace('%d', (file.Addition + file.Deletion)).replace('%d', file.Addition).replace('%d', file.Deletion)">
-          <div class="diff-stats-add-bar" :style="{ 'width': diffStatsWidth(file.Addition, file.Deletion) }"/>
-        </span>
-      </div>
-      <!-- todo finish all file status, now modify, add, delete and rename -->
-      <span :class="['status', diffTypeToString(file.Type)]" :data-tooltip-content="diffTypeToString(file.Type)">&nbsp;</span>
-      <a class="file tw-font-mono" :href="'#diff-' + file.NameHash">{{ file.Name }}</a>
-    </li>
-    <li v-if="store.isIncomplete" class="tw-pt-1">
-      <span class="file tw-flex tw-items-center tw-justify-between">{{ store.tooManyFilesMessage }}
-        <a :class="['ui', 'basic', 'tiny', 'button', store.isLoadingNewData ? 'disabled' : '']" @click.stop="loadMoreData">{{ store.showMoreMessage }}</a>
-      </span>
-    </li>
-  </ol>
-</template>
diff --git a/web_src/js/features/repo-diff-filetree.js b/web_src/js/features/repo-diff-filetree.js
index 52d7cf030d..5a52b9942d 100644
--- a/web_src/js/features/repo-diff-filetree.js
+++ b/web_src/js/features/repo-diff-filetree.js
@@ -1,6 +1,5 @@
 import {createApp} from 'vue';
 import DiffFileTree from '../components/DiffFileTree.vue';
-import DiffFileList from '../components/DiffFileList.vue';
 
 export function initDiffFileTree() {
   const el = document.getElementById('diff-file-tree');
@@ -9,11 +8,3 @@ export function initDiffFileTree() {
   const fileTreeView = createApp(DiffFileTree);
   fileTreeView.mount(el);
 }
-
-export function initDiffFileList() {
-  const fileListElement = document.getElementById('diff-file-list');
-  if (!fileListElement) return;
-
-  const fileListView = createApp(DiffFileList);
-  fileListView.mount(fileListElement);
-}
diff --git a/web_src/js/features/repo-diff.js b/web_src/js/features/repo-diff.js
index 1c06933e89..9b62b9f94f 100644
--- a/web_src/js/features/repo-diff.js
+++ b/web_src/js/features/repo-diff.js
@@ -1,7 +1,7 @@
 import $ from 'jquery';
 import {initCompReactionSelector} from './comp/ReactionSelector.js';
 import {initRepoIssueContentHistory} from './repo-issue-content.js';
-import {initDiffFileTree, initDiffFileList} from './repo-diff-filetree.js';
+import {initDiffFileTree} from './repo-diff-filetree.js';
 import {initDiffCommitSelect} from './repo-diff-commitselect.js';
 import {validateTextareaNonEmpty} from './comp/ComboMarkdownEditor.js';
 import {initViewedCheckboxListenerFor, countAndUpdateViewedFiles, initExpandAndCollapseFilesButton} from './pull-view-file.js';
@@ -221,9 +221,8 @@ function initRepoDiffShowMore() {
 
 export function initRepoDiffView() {
   initRepoDiffConversationForm();
-  if (!$('#diff-file-list').length) return;
+  if (!$('#diff-file-boxes').length) return;
   initDiffFileTree();
-  initDiffFileList();
   initDiffCommitSelect();
   initRepoDiffShowMore();
   initRepoDiffReviewButton();