Optimize the dashboard

Author: kerwin612

options/locale/locale_en-US.ini

@@ -27,6 +27,9 @@ licenses = Licenses
 return_to_gitea = Return to Gitea
 more_items = More items
 
+guide.welcome = Welcome to the Gitea.
+guide.welcome_desc = Git with a cup of tea! Painless self-hosted all-in-one software development service, including Git hosting, code review, team collaboration, package registry and CI/CD.
+
 username = Username
 email = Email Address
 password = Password
@@ -1010,6 +1013,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 +2742,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,6 +5,7 @@
 		<div class="flex-container-main">
 			{{template "base/alert" .}}
 			{{template "user/heatmap" .}}
+			{{template "user/dashboard/guide" .}}
 			{{template "user/dashboard/feeds" .}}
 		</div>
 		{{template "user/dashboard/repolist" .}}

templates/user/dashboard/guide.tmpl

@@ -0,0 +1,8 @@
+{{if not .Feeds}}
+	<div class="ui center segment tw-py-8">
+		<img width="30" height="30" src="{{AssetUrlPrefix}}/img/logo.svg" alt="{{ctx.Locale.Tr "logo"}}" aria-hidden="true">
+		<h2>{{ctx.Locale.Tr "guide.welcome"}}</h2>
+		<p>{{ctx.Locale.Tr "guide.welcome_desc"}}</p>
+	</div>
+{{end}}
+

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

@@ -113,7 +113,7 @@ const sfc = {
     this.changeReposFilter(this.reposFilter);
     fomanticQuery(el.querySelector('.ui.dropdown')).dropdown();
     nextTick(() => {
-      this.$refs.search.focus();
+      this.$refs.search?.focus();
     });
 
     this.textArchivedFilterTitles = {
@@ -340,6 +340,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,10 +363,25 @@ 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" class="ui attached segment" :class="{'is-loading': isLoading}"/>
+      <div v-if="!isLoading && !repos.length" 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="repos.length" 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>
+          <i class="icon loading-icon-3px"><svg-icon name="octicon-search" :size="16"/></i>
           <div class="ui dropdown icon button" :title="textFilter">
             <svg-icon name="octicon-filter" :size="16"/>
             <div class="menu">
@@ -475,6 +491,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="!isLoading && !organizations.length" 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,