clean up

Author: wxiaoguang

templates/repo/view.tmpl

@@ -16,8 +16,10 @@
 
 		{{template "repo/code/recently_pushed_new_branches" .}}
 
-		<div class="repo-view-container {{Iif .UserSettingCodeViewShowFileTree "repo-view-with-sidebar" "repo-view-content-only"}}">
-			<div class="repo-view-file-tree-sidebar not-mobile {{if not .UserSettingCodeViewShowFileTree}}tw-hidden{{end}}" {{if .IsSigned}} data-is-signed {{end}}>{{template "repo/view_file_tree_sidebar" .}}</div>
+		<div class="repo-view-container">
+			<div class="repo-view-file-tree-container not-mobile {{if not .UserSettingCodeViewShowFileTree}}tw-hidden{{end}}" {{if .IsSigned}}data-user-is-signed-in{{end}}>
+				{{template "repo/view_file_tree" .}}
+			</div>
 			<div class="repo-view-content">
 				{{template "repo/view_content" .}}
 			</div>

templates/repo/view_content.tmpl

@@ -4,7 +4,9 @@
 <div class="repo-button-row">
 	<div class="repo-button-row-left">
 	{{if not $isTreePathRoot}}
-		<button class="show-tree-sidebar-button ui compact basic button icon not-mobile {{if .UserSettingCodeViewShowFileTree}}tw-hidden{{end}}" title="{{ctx.Locale.Tr "repo.diff.show_file_tree"}}">
+		<button class="repo-view-file-tree-toggle-show ui compact basic button icon not-mobile {{if .UserSettingCodeViewShowFileTree}}tw-hidden{{end}}"
+			data-global-click="onRepoViewFileTreeToggle" data-toggle-action="show"
+			data-tooltip-content="{{ctx.Locale.Tr "repo.diff.show_file_tree"}}">
 			{{svg "octicon-sidebar-collapse"}}
 		</button>
 	{{end}}

templates/repo/view_file_tree.tmpl

@@ -0,0 +1,15 @@
+<div class="flex-text-block tw-mb-2">
+	<button class="ui compact tiny icon button"
+		data-global-click="onRepoViewFileTreeToggle" data-toggle-action="hide"
+		data-tooltip-content="{{ctx.Locale.Tr "repo.diff.hide_file_tree"}}">
+		{{svg "octicon-sidebar-expand"}}
+	</button>
+	<b>Files</b>
+</div>
+
+{{/* TODO: Dynamically move components such as refSelector and createPR here */}}
+<div id="view-file-tree" class="tw-overflow-auto tw-h-full is-loading"
+	data-repo-link="{{.RepoLink}}"
+	data-tree-path="{{$.TreePath}}"
+	data-current-ref-name-sub-url="{{.RefTypeNameSubURL}}"
+></div>

templates/repo/view_file_tree_sidebar.tmpl

@@ -51,37 +51,17 @@
 
 .repo-view-container {
   display: flex;
-  flex-wrap: wrap;
   gap: var(--page-spacing);
 }
 
-.repo-view-content {
-  flex: 1;
-}
-
-.repo-view-with-sidebar .repo-view-file-tree-sidebar {
+.repo-view-container .repo-view-file-tree-container {
   flex: 0 1 15%;
-  display: flex;
-  flex-direction: column;
-  gap: 8px;
+  min-width: 0;
   max-height: 100vh;
-  overflow: hidden;
-  position: sticky;
-  top: 14px;
-  z-index: 8;
 }
 
-.repo-view-container .repo-button-row {
-  margin-top: 0 !important;
-}
-
-@media (max-width: 767.98px) {
-  .repo-view-with-sidebar {
-    flex: 1 1 0;
-  }
-  .repo-view-content {
-    flex: 1 1 0;
-  }
+.repo-view-content {
+  flex: 1;
 }
 
 .language-stats {

web_src/css/repo/home.css

@@ -0,0 +1,37 @@
+import {createApp} from 'vue';
+import {toggleElem} from '../utils/dom.ts';
+import {POST} from '../modules/fetch.ts';
+import ViewFileTree from '../components/ViewFileTree.vue';
+import {registerGlobalEventFunc} from '../modules/observer.ts';
+
+const {appSubUrl} = window.config;
+
+async function toggleSidebar(btn: HTMLElement) {
+  const elToggleShow = document.querySelector('.repo-view-file-tree-toggle-show');
+  const elFileTreeContainer = document.querySelector('.repo-view-file-tree-container');
+  const shouldShow = btn.getAttribute('data-toggle-action') === 'show';
+  toggleElem(elFileTreeContainer, shouldShow);
+  toggleElem(elToggleShow, !shouldShow);
+
+  // FIXME: need to remove "full height" style from parent element
+
+  if (!elFileTreeContainer.hasAttribute('data-user-is-signed-in')) return;
+  await POST(`${appSubUrl}/user/settings/update_preferences`, {
+    data: {codeViewShowFileTree: shouldShow},
+  });
+}
+
+export async function initRepoViewFileTree() {
+  const sidebar = document.querySelector<HTMLElement>('.repo-view-file-tree-container');
+  const repoViewContent = document.querySelector('.repo-view-content');
+  if (!sidebar || !repoViewContent) return;
+
+  registerGlobalEventFunc('click', 'onRepoViewFileTreeToggle', toggleSidebar);
+
+  const fileTree = sidebar.querySelector('#view-file-tree');
+  createApp(ViewFileTree, {
+    repoLink: fileTree.getAttribute('data-repo-link'),
+    treePath: fileTree.getAttribute('data-tree-path'),
+    currentRefNameSubURL: fileTree.getAttribute('data-current-ref-name-sub-url'),
+  }).mount(fileTree);
+}

web_src/js/features/repo-view-file-tree-sidebar.ts

@@ -24,7 +24,6 @@ import {initUserAuthOauth2, initUserCheckAppUrl} from './features/user-auth.ts';
 import {initRepoPullRequestAllowMaintainerEdit, initRepoPullRequestReview, initRepoIssueSidebarDependency, initRepoIssueFilterItemLabel} from './features/repo-issue.ts';
 import {initRepoEllipsisButton, initCommitStatuses} from './features/repo-commit.ts';
 import {initRepoTopicBar} from './features/repo-home.ts';
-import {initViewFileTreeSidebar} from './features/repo-view-file-tree-sidebar.ts';
 import {initAdminCommon} from './features/admin/common.ts';
 import {initRepoCodeView} from './features/repo-code.ts';
 import {initSshKeyFormParser} from './features/sshkey-helper.ts';
@@ -65,6 +64,7 @@ import {initFootLanguageMenu, initGlobalDropdown, initGlobalInput, initGlobalTab
 import {initGlobalButtonClickOnEnter, initGlobalButtons, initGlobalDeleteButton} from './features/common-button.ts';
 import {initGlobalComboMarkdownEditor, initGlobalEnterQuickSubmit, initGlobalFormDirtyLeaveConfirm} from './features/common-form.ts';
 import {callInitFunctions} from './modules/init.ts';
+import {initRepoViewFileTree} from './features/repo-view-file-tree.ts';
 
 initGiteaFomantic();
 initSubmitEventPolyfill();
@@ -140,7 +140,7 @@ onDomReady(() => {
     initRepoRelease,
     initRepoReleaseNew,
     initRepoTopicBar,
-    initViewFileTreeSidebar,
+    initRepoViewFileTree,
     initRepoWikiForm,
     initRepository,
     initRepositoryActionView,