Optimize the dashboard

options/locale/locale_en-US.ini

@@ -163,6 +163,11 @@ filter.private = Private
 no_results_found = No results found.
 internal_error_skipped = Internal error occurred but is skipped: %s
 
+[guide]
+desc = You are currently not following any repositories or users, so there is no content to display; you can explore repositories or users of interest from the links below.
+explore_repos = Explore repositories
+explore_users = Explore users
+
 [search]
 search = Search...
 type_tooltip = Search type
@@ -1010,6 +1015,7 @@ visibility.private = Private
 visibility.private_tooltip = Visible only to members of organizations you have joined
 
 [repo]
+empty = There are no repositories yet.
 new_repo_helper = A repository contains all project files, including revision history. Already hosting one elsewhere? <a href="%s">Migrate repository.</a>
 owner = Owner
 owner_helper = Some organizations may not show up in the dropdown due to a maximum repository count limit.
@@ -2738,6 +2744,7 @@ contributors.what = contributions
 recent_commits.what = recent commits
 
 [org]
+empty = There are no organizations yet.
 org_name_holder = Organization Name
 org_full_name_holder = Organization Full Name
 org_name_helper = Organization names should be short and memorable.

templates/user/dashboard/dashboard.tmpl

@@ -5,7 +5,11 @@
 		<div class="flex-container-main">
 			{{template "base/alert" .}}
 			{{template "user/heatmap" .}}
-			{{template "user/dashboard/feeds" .}}
+			{{if .Feeds}}
+				{{template "user/dashboard/feeds" .}}
+			{{else}}
+				{{template "user/dashboard/guide" .}}
+			{{end}}
 		</div>
 		{{template "user/dashboard/repolist" .}}
 	</div>

templates/user/dashboard/guide.tmpl

@@ -0,0 +1,13 @@
+<div class="ui center tw-px-8 tw-py-8">
+	{{svg "octicon-no-entry" 48}}
+	<h3>{{ctx.Locale.Tr "guide.desc"}}</h3>
+	<div>
+		<a href="/explore/repos">
+			{{ctx.Locale.Tr "guide.explore_repos"}}
+		</a>
+		<span>·</span>
+		<a href="/explore/users">
+			{{ctx.Locale.Tr "guide.explore_users"}}
+		</a>
+	</div>
+</div>

templates/user/dashboard/repolist.tmpl

@@ -5,10 +5,15 @@ const data = {
 	isMirrorsEnabled: {{.MirrorsEnabled}},
 	isStarsEnabled: {{not .IsDisableStars}},
 
+	canCreateMigrations: {{not .DisableMigrations}},
+
+	textNoOrg: {{ctx.Locale.Tr "org.empty"}},
+	textNoRepo: {{ctx.Locale.Tr "repo.empty"}},
 	textRepository: {{ctx.Locale.Tr "repository"}},
 	textOrganization: {{ctx.Locale.Tr "organization"}},
 	textMyRepos: {{ctx.Locale.Tr "home.my_repos"}},
 	textNewRepo: {{ctx.Locale.Tr "new_repo"}},
+	textNewMigrate: {{ctx.Locale.Tr "new_migrate"}},
 	textSearchRepos: {{ctx.Locale.Tr "search.repo_kind"}},
 	textFilter: {{ctx.Locale.Tr "home.filter"}},
 	textShowArchived: {{ctx.Locale.Tr "home.show_archived"}},
@@ -56,4 +61,4 @@ data.organizationId = {{.ContextUser.ID}};
 window.config.pageData.dashboardRepoList = data;
 </script>
 
-<div id="dashboard-repo-list" class="flex-container-sidebar"></div>
+<div id="dashboard-repo-list" class="flex-container-sidebar is-loading"></div>

web_src/css/dashboard.css

@@ -70,3 +70,7 @@
 .dashboard .secondary-nav .ui.dropdown {
   max-width: 100%;
 }
+
+.dashboard #dashboard-repo-list.is-loading {
+  aspect-ratio: 5.415; /* the size is about 790 x 145 */
+}

web_src/js/components/DashboardRepoList.vue

@@ -91,6 +91,12 @@ const sfc = {
       }${this.privateFilter === 'private' ? '&is_private=true' : ''}${this.privateFilter === 'public' ? '&is_private=false' : ''
       }`;
     },
+    isRepoEmpty() {
+      return !this.isLoading && !this.reposTotalCount;
+    },
+    isOrgEmpty() {
+      return !this.isLoading && !this.organizations.length;
+    },
     repoTypeCount() {
       return this.counts[`${this.reposFilter}:${this.archivedFilter}:${this.privateFilter}`];
     },
@@ -113,7 +119,7 @@ const sfc = {
     this.changeReposFilter(this.reposFilter);
     fomanticQuery(el.querySelector('.ui.dropdown')).dropdown();
     nextTick(() => {
-      this.$refs.search.focus();
+      this.$refs.search?.focus();
     });
 
     this.textArchivedFilterTitles = {
@@ -243,7 +249,7 @@ const sfc = {
         if (!this.reposTotalCount) {
           const totalCountSearchURL = `${this.subUrl}/repo/search?count_only=1&uid=${this.uid}&team_id=${this.teamId}&q=&page=1&mode=`;
           response = await GET(totalCountSearchURL);
-          this.reposTotalCount = response.headers.get('X-Total-Count') ?? '?';
+          this.reposTotalCount = parseInt(response.headers.get('X-Total-Count') ?? '0');
         }
 
         response = await GET(searchedURL);
@@ -264,7 +270,7 @@ const sfc = {
             locale_latest_commit_status_state: webSearchRepo.locale_latest_commit_status,
           };
         });
-        const count = response.headers.get('X-Total-Count');
+        const count = parseInt(response.headers.get('X-Total-Count'));
         if (searchedQuery === '' && searchedMode === '' && this.archivedFilter === 'both') {
           this.reposTotalCount = count;
         }
@@ -340,6 +346,7 @@ const sfc = {
 export function initDashboardRepoList() {
   const el = document.querySelector('#dashboard-repo-list');
   if (el) {
+    el.classList.remove('is-loading');
     createApp(sfc).mount(el);
   }
 }
@@ -362,7 +369,22 @@ export default sfc; // activate the IDE's Vue plugin
           <svg-icon name="octicon-plus"/>
         </a>
       </h4>
-      <div class="ui attached segment repos-search">
+      <div v-if="isLoading && !reposTotalCount" class="ui attached segment" :class="{'is-loading': isLoading}"/>
+      <div v-if="isRepoEmpty" class="ui attached segment empty-placeholder">
+        <svg-icon name="octicon-no-entry" :size="48" class-name="repo-list-icon"/>
+        <h2>{{ textNoRepo }}</h2>
+        <p>
+          <a :href="subUrl + '/repo/create'">
+            <svg-icon name="octicon-plus" :size="16" class-name="repo-list-icon"/> {{ textNewRepo }}
+          </a>
+        </p>
+        <p v-if="canCreateMigrations">
+          <a :href="subUrl + '/repo/migrate'">
+            <svg-icon name="octicon-repo-push" :size="16" class-name="repo-list-icon"/> {{ textNewMigrate }}
+          </a>
+        </p>
+      </div>
+      <div v-if="reposTotalCount" class="ui attached segment repos-search">
         <div class="ui small fluid action left icon input">
           <input type="search" spellcheck="false" maxlength="255" @input="changeReposFilter(reposFilter)" v-model="searchQuery" ref="search" @keydown="reposFilterKeyControl" :placeholder="textSearchRepos">
           <i class="icon loading-icon-3px" :class="{'is-loading': isLoading}"><svg-icon name="octicon-search" :size="16"/></i>
@@ -475,6 +497,16 @@ export default sfc; // activate the IDE's Vue plugin
           <svg-icon name="octicon-plus"/>
         </a>
       </h4>
+      <div v-if="isLoading" class="ui attached segment" :class="{'is-loading': isLoading}"/>
+      <div v-if="isOrgEmpty" class="ui attached segment empty-placeholder">
+        <svg-icon name="octicon-no-entry" :size="48" class-name="repo-list-icon"/>
+        <h2>{{ textNoOrg }}</h2>
+        <p v-if="canCreateOrganization">
+          <a :href="subUrl + '/org/create'">
+            <svg-icon name="octicon-organization" :size="16" class-name="repo-list-icon"/> {{ textNewOrg }}
+          </a>
+        </p>
+      </div>
       <div v-if="organizations.length" class="ui attached table segment tw-rounded-b">
         <ul class="repo-owner-name-list">
           <li class="tw-flex tw-items-center tw-py-2" v-for="org in organizations" :key="org.name">

web_src/js/svg.ts

@@ -50,13 +50,15 @@ import octiconLock from '../../public/assets/img/svg/octicon-lock.svg';
 import octiconMeter from '../../public/assets/img/svg/octicon-meter.svg';
 import octiconMilestone from '../../public/assets/img/svg/octicon-milestone.svg';
 import octiconMirror from '../../public/assets/img/svg/octicon-mirror.svg';
+import octiconNoEntry from '../../public/assets/img/svg/octicon-no-entry.svg';
 import octiconOrganization from '../../public/assets/img/svg/octicon-organization.svg';
 import octiconPlay from '../../public/assets/img/svg/octicon-play.svg';
 import octiconPlus from '../../public/assets/img/svg/octicon-plus.svg';
 import octiconProject from '../../public/assets/img/svg/octicon-project.svg';
 import octiconQuote from '../../public/assets/img/svg/octicon-quote.svg';
 import octiconRepo from '../../public/assets/img/svg/octicon-repo.svg';
 import octiconRepoForked from '../../public/assets/img/svg/octicon-repo-forked.svg';
+import octiconRepoPush from '../../public/assets/img/svg/octicon-repo-push.svg';
 import octiconRepoTemplate from '../../public/assets/img/svg/octicon-repo-template.svg';
 import octiconRss from '../../public/assets/img/svg/octicon-rss.svg';
 import octiconScreenFull from '../../public/assets/img/svg/octicon-screen-full.svg';
@@ -126,13 +128,15 @@ const svgs = {
   'octicon-meter': octiconMeter,
   'octicon-milestone': octiconMilestone,
   'octicon-mirror': octiconMirror,
+  'octicon-no-entry': octiconNoEntry,
   'octicon-organization': octiconOrganization,
   'octicon-play': octiconPlay,
   'octicon-plus': octiconPlus,
   'octicon-project': octiconProject,
   'octicon-quote': octiconQuote,
   'octicon-repo': octiconRepo,
   'octicon-repo-forked': octiconRepoForked,
+  'octicon-repo-push': octiconRepoPush,
   'octicon-repo-template': octiconRepoTemplate,
   'octicon-rss': octiconRss,
   'octicon-screen-full': octiconScreenFull,