Optimize the dashboard

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,14 @@
+<div class="ui center tw-px-8 tw-py-8 guide">
+	{{svg "octicon-package" 24}}
+	<h3>{{ctx.Locale.Tr "home.guide_title"}}</h3>
+	<p>{{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"}},
@@ -56,4 +60,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,15 @@
 .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 */
+}
+
+.dashboard .guide > svg, p {
+  color: var(--color-placeholder-text);
+}
+
+.dashboard .guide h3 {
+  margin: 1rem auto !important;
+}

web_src/js/components/DashboardRepoList.vue

@@ -91,6 +91,12 @@ export default defineComponent({
       }${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 @@ 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 +249,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 +342,6 @@ export default defineComponent({
     },
   },
 });
-
 </script>
 <template>
   <div>
@@ -354,7 +359,12 @@ export default defineComponent({
           <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-git-branch" :size="24" class-name="empty-placeholder-icon"/>
+        <p>{{ textNoRepo }}</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>
@@ -467,6 +477,11 @@ export default defineComponent({
           <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-organization" :size="24" class-name="empty-placeholder-icon"/>
+        <p>{{ textNoOrg }}</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">
@@ -546,4 +561,13 @@ ul li:not(:last-child) {
 .repo-owner-name-list li.active {
   background: var(--color-hover);
 }
+
+.empty-placeholder-icon {
+  color: var(--color-placeholder-text);
+}
+
+.empty-placeholder p {
+  margin: 1em auto !important;
+  color: var(--color-placeholder-text);
+}
 </style>

web_src/js/features/dashboard.ts

@@ -4,6 +4,7 @@ import DashboardRepoList from '../components/DashboardRepoList.vue';
 export function initDashboardRepoList() {
   const el = document.querySelector('#dashboard-repo-list');
   if (el) {
+    el.classList.remove('is-loading');
     createApp(DashboardRepoList).mount(el);
   }
 }

web_src/js/svg.ts

@@ -52,13 +52,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';
@@ -130,13 +132,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,