Skip to content

Commit 95f6f63

Browse files
schaconschacon
authored
Merge pull request #7675 from gitbutlerapp/sc-branch-56
Empty states
2 parents 3afeb0e + 85e8976 commit 95f6f63

File tree

2 files changed

+194
-48
lines changed

2 files changed

+194
-48
lines changed

‎apps/web/src/routes/(app)/+page.svelte

+119-3
Original file line numberDiff line numberDiff line change
@@ -4,14 +4,17 @@
44
import { isFound } from '@gitbutler/shared/network/loadable';
55
import { getRecentlyPushedProjects } from '@gitbutler/shared/organizations/projectsPreview.svelte';
66
import { WebRoutesService } from '@gitbutler/shared/routing/webRoutes.svelte';
7+
import Button from '@gitbutler/ui/Button.svelte';
78
import { goto } from '$app/navigation';
89
910
const routes = getContext(WebRoutesService);
1011
const recentProjects = getRecentlyPushedProjects();
12+
let hasRecentProjects = $state(false);
1113
1214
$effect(() => {
1315
if (recentProjects.current.length >= 1) {
1416
const project = recentProjects.current[0];
17+
hasRecentProjects = true;
1518
if (isFound(project)) {
1619
goto(
1720
routes.projectReviewUrl({
@@ -24,6 +27,119 @@
2427
});
2528
</script>
2629

27-
<DashboardLayout>
28-
<p>You have no recent projects!</p>
29-
</DashboardLayout>
30+
{#if hasRecentProjects}
31+
<DashboardLayout>
32+
<p>You have no recent projects!</p>
33+
</DashboardLayout>
34+
{:else}
35+
<div class="empty-state-container">
36+
<div class="empty-state">
37+
<div class="empty-state-icon">
38+
<svg
39+
width="64"
40+
height="64"
41+
viewBox="0 0 24 24"
42+
fill="none"
43+
xmlns="http://www.w3.org/2000/svg"
44+
>
45+
<path
46+
d="M12 4L3 8L12 12L21 8L12 4Z"
47+
stroke="currentColor"
48+
stroke-width="2"
49+
stroke-linecap="round"
50+
stroke-linejoin="round"
51+
/>
52+
<path
53+
d="M3 16L12 20L21 16"
54+
stroke="currentColor"
55+
stroke-width="2"
56+
stroke-linecap="round"
57+
stroke-linejoin="round"
58+
/>
59+
<path
60+
d="M3 12L12 16L21 12"
61+
stroke="currentColor"
62+
stroke-width="2"
63+
stroke-linecap="round"
64+
stroke-linejoin="round"
65+
/>
66+
</svg>
67+
</div>
68+
<h1>No Recent Projects</h1>
69+
<p class="description">Get started by creating your first review in GitButler.</p>
70+
<div class="actions">
71+
<a
72+
href="https://docs.gitbutler.com/review/overview"
73+
target="_blank"
74+
rel="noopener noreferrer"
75+
>
76+
<Button style="pop" icon="open-link">Learn How to Create Reviews</Button>
77+
</a>
78+
<a
79+
href="https://docs.gitbutler.com/features/virtual-branches"
80+
target="_blank"
81+
rel="noopener noreferrer"
82+
>
83+
<Button kind="outline" icon="open-link">Explore Virtual Branches</Button>
84+
</a>
85+
</div>
86+
</div>
87+
</div>
88+
{/if}
89+
90+
<style lang="postcss">
91+
.empty-state-container {
92+
display: flex;
93+
justify-content: center;
94+
align-items: center;
95+
margin: auto;
96+
}
97+
98+
.empty-state {
99+
max-width: 600px;
100+
text-align: center;
101+
padding: 40px;
102+
background-color: white;
103+
border-radius: 12px;
104+
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
105+
}
106+
107+
.empty-state-icon {
108+
display: flex;
109+
justify-content: center;
110+
margin-bottom: 24px;
111+
color: #2563eb;
112+
}
113+
114+
h1 {
115+
font-size: 24px;
116+
font-weight: 600;
117+
margin: 0 0 12px 0;
118+
color: #1a202c;
119+
}
120+
121+
.description {
122+
font-size: 16px;
123+
color: #718096;
124+
margin: 0 0 32px 0;
125+
}
126+
127+
.actions {
128+
display: flex;
129+
gap: 16px;
130+
justify-content: center;
131+
flex-wrap: wrap;
132+
}
133+
134+
@media (max-width: 640px) {
135+
.empty-state {
136+
padding: 32px 20px;
137+
margin: 0 20px;
138+
}
139+
140+
.actions {
141+
flex-direction: column;
142+
gap: 12px;
143+
}
144+
}
145+
</style>

‎apps/web/src/routes/(app)/[ownerSlug]/[projectSlug]/reviews/+page.svelte

+75-45
Original file line numberDiff line numberDiff line change
@@ -65,52 +65,59 @@
6565
{@render filters()}
6666
</div>
6767

68-
<Table
69-
headColumns={[
70-
{
71-
key: 'status',
72-
value: 'Status'
73-
},
74-
{
75-
key: 'title',
76-
value: 'Name'
77-
},
78-
{
79-
key: 'number',
80-
value: 'UUID'
81-
},
82-
{
83-
key: 'number',
84-
value: 'Commits'
85-
},
86-
{
87-
key: 'date',
88-
value: 'Update'
89-
},
90-
{
91-
key: 'avatars',
92-
value: 'Authors'
93-
},
94-
{
95-
key: 'number',
96-
value: 'Ver.',
97-
tooltip: 'Commit version'
98-
}
99-
]}
100-
>
101-
{#snippet body()}
102-
{#each brancheses as branches, i}
103-
{#each branches as branch, j}
104-
<BranchIndexCard
105-
linkParams={data}
106-
uuid={branch.uuid}
107-
roundedTop={j === 0 && i !== 0}
108-
roundedBottom={j === branches.length - 1}
109-
/>
68+
{#if brancheses.length === 0}
69+
<div class="empty-state">
70+
<h3>No branches found</h3>
71+
<p>There are no branches matching your current filter.</p>
72+
</div>
73+
{:else}
74+
<Table
75+
headColumns={[
76+
{
77+
key: 'status',
78+
value: 'Status'
79+
},
80+
{
81+
key: 'title',
82+
value: 'Name'
83+
},
84+
{
85+
key: 'number',
86+
value: 'UUID'
87+
},
88+
{
89+
key: 'number',
90+
value: 'Commits'
91+
},
92+
{
93+
key: 'date',
94+
value: 'Update'
95+
},
96+
{
97+
key: 'avatars',
98+
value: 'Authors'
99+
},
100+
{
101+
key: 'number',
102+
value: 'Ver.',
103+
tooltip: 'Commit version'
104+
}
105+
]}
106+
>
107+
{#snippet body()}
108+
{#each brancheses as branches, i}
109+
{#each branches as branch, j}
110+
<BranchIndexCard
111+
linkParams={data}
112+
uuid={branch.uuid}
113+
roundedTop={j === 0 && i !== 0}
114+
roundedBottom={j === branches.length - 1}
115+
/>
116+
{/each}
110117
{/each}
111-
{/each}
112-
{/snippet}
113-
</Table>
118+
{/snippet}
119+
</Table>
120+
{/if}
114121
{/snippet}
115122
</Loading>
116123
</DashboardLayout>
@@ -129,4 +136,27 @@
129136
align-items: center;
130137
gap: 6px;
131138
}
139+
140+
.empty-state {
141+
display: flex;
142+
flex-direction: column;
143+
align-items: center;
144+
justify-content: center;
145+
text-align: center;
146+
padding: 64px 0;
147+
background-color: #fff;
148+
border-radius: 12px;
149+
border: 1px solid #ddd;
150+
}
151+
152+
.empty-state h3 {
153+
margin: 16px 0 8px;
154+
font-size: 18px;
155+
font-weight: 600;
156+
}
157+
158+
.empty-state p {
159+
margin: 0 0 24px;
160+
color: var(--color-text-secondary);
161+
}
132162
</style>

0 commit comments

Comments
 (0)