Optimize the dashboard (#32990)

before:

![image](https://github.com/user-attachments/assets/d0b432e4-a521-4540-a489-d18b9c265674)

after:

![image](https://github.com/user-attachments/assets/dbb8b387-d150-41e2-b12b-f9d8450e36d7)
-----

![image](https://github.com/user-attachments/assets/40dcd71e-344b-4043-9811-77227c71aed9)
-----

Optimize the dashboard by adding welcoming messages or quick action
entry points (such as adding a new repository or organization) to ensure
that new users are not greeted by a blank page upon logging in.

---------

Co-authored-by: wxiaoguang <[email protected]>

Author: kerwin612

options/locale/locale_en-US.ini

@@ -385,6 +385,13 @@ show_only_public = Showing only public
 
 issues.in_your_repos = In your repositories
 
+guide_title = No Activity
+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
+empty_org = There are no organizations yet.
+empty_repo = There are no repositories yet.
+
 [explore]
 repos = Repositories
 users = Users

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,10 @@
+<div class="tw-text-center tw-p-8">
+	{{svg "octicon-package" 24 "tw-text-placeholder-text"}}
+	<h3 class="tw-my-4">{{ctx.Locale.Tr "home.guide_title"}}</h3>
+	<p class="tw-text-placeholder-text">{{ctx.Locale.Tr "home.guide_desc"}}</p>
+	<div>
+		<a href="{{AppSubUrl}}/explore/repos">{{ctx.Locale.Tr "home.explore_repos"}}</a>
+		<span>·</span>
+		<a href="{{AppSubUrl}}/explore/users">{{ctx.Locale.Tr "home.explore_users"}}</a>
+	</div>
+</div>

templates/user/dashboard/repolist.tmpl

@@ -5,6 +5,10 @@ const data = {
 	isMirrorsEnabled: {{.MirrorsEnabled}},
 	isStarsEnabled: {{not .IsDisableStars}},
 
+	canCreateMigrations: {{not .DisableMigrations}},
+
+	textNoOrg: {{ctx.Locale.Tr "home.empty_org"}},
+	textNoRepo: {{ctx.Locale.Tr "home.empty_repo"}},
 	textRepository: {{ctx.Locale.Tr "repository"}},
 	textOrganization: {{ctx.Locale.Tr "organization"}},
 	textMyRepos: {{ctx.Locale.Tr "home.my_repos"}},

web_src/js/components/DashboardRepoList.vue

@@ -113,7 +113,7 @@ export default defineComponent({
     this.changeReposFilter(this.reposFilter);
     fomanticQuery(el.querySelector('.ui.dropdown')).dropdown();
     nextTick(() => {
-      this.$refs.search.focus();
+      this.$refs.search?.focus();
     });
 
     this.textArchivedFilterTitles = {
@@ -243,7 +243,7 @@ export default defineComponent({
         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);
@@ -336,7 +336,6 @@ export default defineComponent({
     },
   },
 });
-
 </script>
 <template>
   <div>
@@ -354,7 +353,15 @@ export default defineComponent({
           <svg-icon name="octicon-plus"/>
         </a>
       </h4>
-      <div class="ui attached segment repos-search">
+      <div v-if="!reposTotalCount" class="ui attached segment">
+        <div v-if="!isLoading" class="empty-repo-or-org">
+          <svg-icon name="octicon-git-branch" :size="24"/>
+          <p>{{ textNoRepo }}</p>
+        </div>
+        <!-- using the loading indicator here will cause more (unnecessary) page flickers, so at the moment, not use the loading indicator -->
+        <!-- <div v-else class="is-loading loading-icon-2px tw-min-h-16"/> -->
+      </div>
+      <div v-else 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>
@@ -438,7 +445,7 @@ export default defineComponent({
               class="item navigation tw-py-1" :class="{'disabled': page === 1}"
               @click="changePage(page - 1)" :title="textPreviousPage"
             >
-              <svg-icon name="octicon-chevron-left" :size="16" clsas-name="tw-mr-1"/>
+              <svg-icon name="octicon-chevron-left" :size="16" clsas="tw-mr-1"/>
             </a>
             <a class="active item tw-py-1">{{ page }}</a>
             <a
@@ -467,7 +474,13 @@ export default defineComponent({
           <svg-icon name="octicon-plus"/>
         </a>
       </h4>
-      <div v-if="organizations.length" class="ui attached table segment tw-rounded-b">
+      <div v-if="!organizations.length" class="ui attached segment">
+        <div class="empty-repo-or-org">
+          <svg-icon name="octicon-organization" :size="24"/>
+          <p>{{ textNoOrg }}</p>
+        </div>
+      </div>
+      <div v-else 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">
             <a class="repo-list-link muted" :href="subUrl + '/' + encodeURIComponent(org.name)">
@@ -546,4 +559,14 @@ ul li:not(:last-child) {
 .repo-owner-name-list li.active {
   background: var(--color-hover);
 }
+
+.empty-repo-or-org {
+  margin-top: 1em;
+  text-align: center;
+  color: var(--color-placeholder-text);
+}
+
+.empty-repo-or-org p {
+  margin: 1em auto;
+}
 </style>