feat(repo): add tree view context menu actions

Author: brymut

options/locale/locale_en-US.ini

@@ -1317,6 +1317,7 @@ ambiguous_character = `%[1]c [U+%04[1]X] can be confused with %[2]c [U+%04[2]X]`
 escape_control_characters = Escape
 unescape_control_characters = Unescape
 file_copy_permalink = Copy Permalink
+center_content = Center content
 view_git_blame = View Git Blame
 video_not_supported_in_browser = Your browser does not support the HTML5 'video' tag.
 audio_not_supported_in_browser = Your browser does not support the HTML5 'audio' tag.
@@ -1354,6 +1355,7 @@ editor.this_file_locked = File is locked
 editor.must_be_on_a_branch = You must be on a branch to make or propose changes to this file.
 editor.fork_before_edit = You must fork this repository to make or propose changes to this file.
 editor.delete_this_file = Delete File
+editor.delete_this_directory = Delete Directory
 editor.must_have_write_access = You must have write access to make or propose changes to this file.
 editor.file_delete_success = File "%s" has been deleted.
 editor.name_your_file = Name your file…

templates/repo/view_content.tmpl

@@ -84,6 +84,30 @@
 					</a>
 				</div>
 			</button>
+			<button class="ui dropdown basic compact jump button icon repo-file-actions-dropdown" data-tooltip-content="{{ctx.Locale.Tr "more_operations"}}">
+				{{svg "octicon-kebab-horizontal"}}
+				<div class="menu">
+					<a class="item" data-clipboard-text="{{.TreePath}}">
+						{{svg "octicon-copy" 16 "tw-mr-2"}}{{ctx.Locale.Tr "copy_path"}}
+					</a>
+					<a class="item" data-clipboard-text="{{AppUrl}}{{StringUtils.TrimPrefix .Repository.Link "/"}}/src/commit/{{.CommitID}}/{{PathEscapeSegments .TreePath}}">
+						{{svg "octicon-link" 16 "tw-mr-2"}}{{ctx.Locale.Tr "repo.file_copy_permalink"}}
+					</a>
+					{{if and (.Permission.CanWrite ctx.Consts.RepoUnitTypeCode) (not .Repository.IsArchived)}}
+						<div class="divider"></div>
+						<a class="item" href="{{.RepoLink}}/_delete/{{.BranchName | PathEscapeSegments}}/{{.TreePath | PathEscapeSegments}}">
+							{{svg "octicon-trash" 16 "tw-mr-2"}}{{ctx.Locale.Tr "repo.editor.delete_this_directory"}}
+						</a>
+					{{end}}
+					<div class="divider"></div>
+					<div class="item">
+						<div class="ui checkbox" id="center-content-toggle">
+							<input type="checkbox" id="center-content-checkbox">
+							<label for="center-content-checkbox">{{ctx.Locale.Tr "repo.center_content"}}</label>
+						</div>
+					</div>
+				</div>
+			</button>
 		{{end}}
 		<!-- Only show clone panel in repository home page -->
 		{{if $isTreePathRoot}}

web_src/css/index.css

@@ -63,6 +63,7 @@
 @import "./repo/issue-list.css";
 @import "./repo/list-header.css";
 @import "./repo/file-view.css";
+@import "./repo/file-actions.css";
 @import "./repo/wiki.css";
 @import "./repo/header.css";
 @import "./repo/home.css";

web_src/css/repo/file-actions.css

@@ -0,0 +1,19 @@
+/* Repository file actions dropdown and centered content */
+.repo-file-actions-dropdown .menu {
+  min-width: 200px;
+}
+
+.repo-file-actions-dropdown .menu .item {
+  cursor: pointer;
+}
+
+.repo-file-actions-dropdown .menu .divider {
+  margin: 0.5rem 0;
+}
+
+/* Center content option */
+.repo-content-centered {
+  max-width: 980px;
+  margin-left: auto !important;
+  margin-right: auto !important;
+}

web_src/js/features/repo-file-actions.ts

@@ -0,0 +1,28 @@
+// Handle repository file/directory actions dropdown
+export function initRepoFileActions() {
+  const centerContentCheckbox = document.querySelector<HTMLInputElement>('#center-content-checkbox');
+  if (!centerContentCheckbox) return;
+
+  // Load saved preference
+  const isCentered = localStorage.getItem('repo-content-centered') === 'true';
+  centerContentCheckbox.checked = isCentered;
+  applyCenterContent(isCentered);
+
+  // Handle checkbox change
+  centerContentCheckbox.addEventListener('change', () => {
+    const centered = centerContentCheckbox.checked;
+    localStorage.setItem('repo-content-centered', String(centered));
+    applyCenterContent(centered);
+  });
+}
+
+function applyCenterContent(centered: boolean) {
+  const container = document.querySelector('.ui.container');
+  if (!container) return;
+
+  if (centered) {
+    container.classList.add('repo-content-centered');
+  } else {
+    container.classList.remove('repo-content-centered');
+  }
+}

web_src/js/index-domready.ts

@@ -65,6 +65,7 @@ import {initGlobalButtonClickOnEnter, initGlobalButtons, initGlobalDeleteButton}
 import {initGlobalComboMarkdownEditor, initGlobalEnterQuickSubmit, initGlobalFormDirtyLeaveConfirm} from './features/common-form.ts';
 import {callInitFunctions} from './modules/init.ts';
 import {initRepoViewFileTree} from './features/repo-view-file-tree.ts';
+import {initRepoFileActions} from './features/repo-file-actions.ts';
 
 const initStartTime = performance.now();
 const initPerformanceTracer = callInitFunctions([
@@ -138,6 +139,7 @@ const initPerformanceTracer = callInitFunctions([
   initRepoReleaseNew,
   initRepoTopicBar,
   initRepoViewFileTree,
+  initRepoFileActions,
   initRepoWikiForm,
   initRepository,
   initRepositoryActionView,