Skip to content

Commit 4b9a101

Browse files
cubapgithub-actions[bot]CopilotCopilot
authored
Improve empty account landing page experience (#332)
* Improve empty account landing page experience - Hide "Continue Working" card when user has no recent activity - Replace "No projects found" with welcoming onboarding content - Add helpful links: tutorials, FAQs, and IIIF resources - Provide better first-time user experience Fixes #331 Co-authored-by: Patrick Cuba <cubap@users.noreply.github.com> * Update components/projects/list-navigation.js Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com> * Update components/continue-working/index.js Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com> * Move inline styles to Shadow DOM style element in welcome message (#333) * Initial plan * Move inline styles to Shadow DOM style element for welcome message Co-authored-by: cubap <1119165+cubap@users.noreply.github.com> --------- Co-authored-by: copilot-swe-agent[bot] <198982749+Copilot@users.noreply.github.com> Co-authored-by: cubap <1119165+cubap@users.noreply.github.com> Co-authored-by: Patrick Cuba <cubap@slu.edu> * Update list-navigation.js * Handle empty recent activity via central dispatcher Refactored recent activity notification to use TPEN.eventDispatcher for signaling no recent projects. ProjectsListNavigation now listens for this event and displays the welcome/empty state message accordingly. Improved rendering logic to ensure correct display of welcome message and project list. * forgot to save * Update index.html --------- Co-authored-by: claude[bot] <41898282+claude[bot]@users.noreply.github.com> Co-authored-by: Patrick Cuba <cubap@users.noreply.github.com> Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com> Co-authored-by: Copilot <198982749+Copilot@users.noreply.github.com> Co-authored-by: cubap <1119165+cubap@users.noreply.github.com>
1 parent d496fea commit 4b9a101

3 files changed

Lines changed: 74 additions & 3 deletions

File tree

‎components/continue-working/index.js‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -73,6 +73,12 @@ class ContinueWorking extends HTMLElement {
7373
return project ? { project, label, pageId } : null
7474
})
7575
.filter(Boolean)
76+
77+
// If there are no recent projects, notify parent via custom event
78+
if (recentProjects.length === 0) {
79+
TPEN.eventDispatcher.dispatch('tpen-no-recent-activity')
80+
return
81+
}
7682

7783
const recentProjectsWithPlaceholders = recentProjects.map(a => {
7884
let lastEdited = stringFromDate(a.project._modifiedAt)

‎components/projects/list-navigation.js‎

Lines changed: 59 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -69,6 +69,29 @@ export default class ProjectsListNavigation extends HTMLElement {
6969
background-color: var(--light-gray);
7070
}
7171
}
72+
.welcome-message {
73+
padding: 1em;
74+
line-height: 1.6;
75+
}
76+
.welcome-message p {
77+
margin-bottom: 1em;
78+
}
79+
.welcome-list {
80+
list-style: none;
81+
padding-left: 0;
82+
margin-bottom: 1em;
83+
}
84+
.welcome-list li {
85+
margin-bottom: 0.5em;
86+
background-color: transparent;
87+
}
88+
.welcome-list li:hover {
89+
background-color: transparent;
90+
}
91+
.welcome-list a {
92+
color: var(--tpen-color-primary);
93+
text-decoration: none;
94+
}
7295
`
7396
const projectList = document.createElement('ol')
7497
if (this.classList.contains('unbounded')) {
@@ -100,6 +123,12 @@ export default class ProjectsListNavigation extends HTMLElement {
100123
this.shadowRoot.getElementById('projectsListView').innerHTML = `No projects found`
101124
}
102125
})
126+
127+
// Handle empty recent activity signal from other components via central dispatcher
128+
TPEN.eventDispatcher.on('tpen-no-recent-activity', () => {
129+
// Show the welcome/empty state message
130+
this.projects = []
131+
})
103132
}
104133
async connectedCallback() {
105134
TPEN.attachAuthentication(this)
@@ -112,12 +141,39 @@ export default class ProjectsListNavigation extends HTMLElement {
112141
return this.#projects
113142
}
114143
async render() {
115-
let list = this.shadowRoot.getElementById('projectsListView')
144+
const root = this.shadowRoot
145+
let list = root.getElementById('projectsListView')
116146
if (!this.#projects?.length) {
117-
list.innerHTML = `No projects found`
147+
const welcome = document.createElement('section')
148+
welcome.className = 'welcome-message'
149+
welcome.innerHTML = `
150+
<p><strong>Welcome to TPEN!</strong></p>
151+
<p>Get started by creating your first project or importing a manuscript.</p>
152+
<ul class="welcome-list">
153+
<li aria-label="View Tutorials"><span aria-hidden="true">📚</span> <a href="https://three.t-pen.org/category/tutorials/" target="_blank" rel="noopener noreferrer">View Tutorials</a></li>
154+
<li aria-label="Frequently Asked Questions"><span aria-hidden="true">❓</span> <a href="https://three.t-pen.org/faq/" target="_blank" rel="noopener noreferrer">Frequently Asked Questions</a></li>
155+
<li aria-label="Find IIIF Resources"><span aria-hidden="true">🖼️</span> <a href="https://iiif.io/guides/finding_resources/" target="_blank" rel="noopener noreferrer">Find IIIF Resources</a></li>
156+
</ul>
157+
`
158+
if (list) list.replaceWith(welcome)
159+
else {
160+
const existingWelcome = root.querySelector('section.welcome-message')
161+
if (existingWelcome) existingWelcome.replaceWith(welcome)
162+
else root.appendChild(welcome)
163+
}
118164
return
119165
}
120-
list.innerHTML = ""
166+
// Ensure the list element exists when we have projects
167+
if (!list) {
168+
list = document.createElement('ol')
169+
list.id = 'projectsListView'
170+
if (this.classList.contains('unbounded')) list.classList.add('unbounded')
171+
const existingWelcome = root.querySelector('section.welcome-message')
172+
if (existingWelcome) existingWelcome.replaceWith(list)
173+
else root.appendChild(list)
174+
} else {
175+
list.innerHTML = ""
176+
}
121177
for (const project of this.#projects) {
122178
await(new Project(project._id).fetch())
123179
const isManageProjectPermission = await CheckPermissions.checkEditAccess('PROJECT')

‎index.html‎

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -21,6 +21,15 @@
2121
<script type="module" src="components/gui/site/index.js"></script>
2222
<script type="module" src="components/gui/card/Card.js"></script>
2323
<link href="components/gui/site/index.css" rel="stylesheet" type="text/css" />
24+
<script type="module" defer>
25+
import TPEN from './api/TPEN.js'
26+
27+
const continueWorkingCard = document.querySelector('tpen-card:has(tpen-continue-working)')
28+
29+
TPEN.eventDispatcher.on('tpen-no-recent-activity', () => {
30+
continueWorkingCard?.remove()
31+
})
32+
</script>
2433

2534
</head>
2635

0 commit comments

Comments
 (0)