Inter-interface Navigation by thehabes · Pull Request #390 · CenterForDigitalHumanities/TPEN-interfaces

thehabes · 2026-01-22T21:08:43Z

Closes #389.

Ignores #391, #392 , and #393

Changes and scope notes below.

Login and Logout

Confirmed to be achievable on any interface requiring authentication.

Home

Confirmed achievable on every interface

Transcription Workflow

Project management /project/manage/, line identification /annotator, and line-by-line transcription /transcribe should all link to each other.
/project/manage can go to /transcribe and /annotator via the project details component card.
/annotator can go to /transcribe via a link in the OSD tools area
/annotator can go to /manage/project via 'Go To Project Management' at the bottom right of the interface.
/transcribe can go to /manage/project via the via the middle contact.png icon in the tpen-project-header component.

This is already implemented and does not check permissions but it should to determine whether or not to show this icon.

/transcribe can go to /annotator via the via the middle parse-lines.svg icon in the tpen-project-header component.

I added this in to the tpen-project-header implementation. It does not check permissions but it should to determine whether or not to show this icon.

Project Management Workflow

/project can go to /manage/project via #goManage (cog button in top right)
/project/leave can go to /project via #noLeaveBtn. It goes to project details instead of project management.
/components/update-metadata/index.html has some complications and is being separated into its own task
/project/manage/layers has some complications and is being separated into its own task.
/role/manage can go to /manage/project via 'Go To Project Management' at the bottom left of the interface.
/project/options can go to /manage/project via 'Go To Project Management' at the bottom left of the interface.
/manage/quicktype can go to /manage/project via 'Go To Project Management' at the top left of the interface.

Note that /components/quicktype-manager/index.js does not check permission in the module but it should. However, permissions are checked on /interfaces/quicktype/index.html to determine whether or not to show the project management button.

About Us & Contact Us

About Us now has a link to its kin in three.t-pen.org. It also links to the TPEN3 tutorials.
Contact Us says "page not found" because we do not have one yet. There does appear to be a kin in three.t-pen.org either. This is being separated into its own task.

Shower Thoughts

These are for later.

github-actions · 2026-01-22T21:09:22Z

🚀 Deployed on https://6977961b76ad0906b61463f3--tpen-interfaces-preview.netlify.app

thehabes · 2026-01-23T02:03:29Z

Future Improvement Suggestion

Consider creating a reusable navigation button component

The "Go to Project Management" button is now implemented across multiple interfaces with similar CSS and JavaScript patterns:

components/annotorious-annotator/line-parser.js
components/manage-role/index.js
interfaces/project/options.html
interfaces/quicktype/index.html

A shared <tpen-nav-button> or similar component could:

Reduce CSS duplication (~20 lines per instance)
Ensure consistent styling and behavior across interfaces
Centralize permission checking logic
Make it easier to add similar navigation buttons in the future

This isn't blocking for this PR, but worth discussing with the team for a future refactor. We might have something in /components/gui we can use. It is a little messy switching between using it in /components and using it on /interfaces it would be nice to use a consistent mechanic here.

thehabes · 2026-01-23T02:33:29Z

📋 Technical Debt Note: CheckPermissions Dual Implementation

During review, I noticed the codebase has two CheckPermissions implementations with identical method names but different return types:

File	Type	Returns
`/components/check-permissions/checkPermissions.js`	Synchronous	`boolean`
`/utilities/checkPermissions.js`	Asynchronous	`Promise<boolean>`

Current State

Sync version: 28 calls across 16 component files (used without await)
Async version: 39 calls across 15+ interface/utility files (used with await)

All current usages are correct - the issue is naming confusion since both export CheckPermissions.

Why This Matters

Copilot review flagged the sync version as needing await, then later correctly identified it as synchronous
Easy to use the wrong version or wrong calling pattern when writing new code
await on a sync return works (returns the value), but .then() on a boolean fails

Recommended Future Action

Consider renaming exports for clarity in a future PR:

CheckPermissionsSync (component version)
CheckPermissionsAsync (utilities version)

This would prevent future confusion without changing functionality.

This note is for team awareness - no action needed for this PR.

thehabes · 2026-01-23T02:37:57Z

I triggered the preview deploy action and I think https://6972de70dccab7f7f1d1d861--tpen-interfaces-preview.netlify.app/ includes all the code changes from review.

cubap · 2026-01-23T15:18:19Z

line-parser.js:374  Uncaught TypeError: CheckPermissions.checkEditAccess(...).then is not a function
    at AnnotoriousAnnotator.render (line-parser.js:374:49)
    at EventDispatcher.<anonymous> (line-parser.js:60:65)
    at EventDispatcher.dispatch (events.js:23:14)
    at Project.js:71:37
    at async Project.fetch (Project.js:55:20)

https://6972de70dccab7f7f1d1d861--tpen-interfaces-preview.netlify.app/annotator?projectID=6967a514f7caf0d95c4252fb&pageID=6967a51bf7caf0d95c4252fd

Clicking the link in the header loads to this error. The same error shows if I click "Parse Lines" from the management interface.

The same project at https://app.t-pen.org/annotator?projectID=6967a514f7caf0d95c4252fb&pageID=6967a51bf7caf0d95c4252fd loads without error.

thehabes · 2026-01-23T15:28:09Z

line-parser.js:374  Uncaught TypeError: CheckPermissions.checkEditAccess(...).then is not a function
    at AnnotoriousAnnotator.render (line-parser.js:374:49)
    at EventDispatcher.<anonymous> (line-parser.js:60:65)
    at EventDispatcher.dispatch (events.js:23:14)
    at Project.js:71:37
    at async Project.fetch (Project.js:55:20)
https://6972de70dccab7f7f1d1d861--tpen-interfaces-preview.netlify.app/annotator?projectID=6967a514f7caf0d95c4252fb&pageID=6967a51bf7caf0d95c4252fd

Clicking the link in the header loads to this error. The same error shows if I click "Parse Lines" from the management interface.

The same project at https://app.t-pen.org/annotator?projectID=6967a514f7caf0d95c4252fb&pageID=6967a51bf7caf0d95c4252fd loads without error.

But not on localhost. The dev preview deploy is not deploying the latest code. It seems to only deploy a snapshot of what the code was when the PR was created.

cubap · 2026-01-23T15:27:23Z

components/projects/project-header.js

-              <a class="nav-icon" href="/index"><img draggable="false" src="../../assets/icons/home.png" alt="Home"></a>
-              <a class="nav-icon" href="/project/manage?projectID=${TPEN.screen.projectInQuery}"><img draggable="false" src="../../assets/icons/contact.png" alt="Manage Project"></a>
-              <a class="nav-icon" href="/profile"><img draggable="false" src="../../assets/icons/profile.png" alt="Profile"></a>
+              <a title="Home" class="nav-icon" href="/index"><img draggable="false" src="../../assets/icons/home.png" alt="Home"></a>


I don't think "Identify Lines" belongs here. This space is for Project Header level actions.

Going home to switch projects or start over

Logging out to 'shut down' work

(peer-level concern) profile controls

Manage this project

Previously, lines were in the Page Tools pane and I don't see a good reason to change that.

cubap · 2026-01-23T15:30:12Z

interfaces/project/options.html

+    <style>
+        #projectManagementBtn {
+            position: absolute;
+            top:  4.85em;
+            display: none;
+            background-color: var(--primary-color);
+            padding: 10px 20px;
+            color: var(--white);
+            border-radius: 5px;
+            cursor: pointer;
+            transition: background-color 0.3s;
+        }
+
+        #projectManagementBtn:hover {
+          background-color: var(--primary-light);
+        }
+
+        #projectManagementBtn span {
+          position: relative;
+          left: -10px;
+          display: inline-block;
+          transform: rotate(180deg);
+        }
+    </style>


I agree with this. Maybe @copilot can ticket it as an issue.

Copilot · 2026-01-23T15:30:56Z

@cubap I've opened a new pull request, #394, to work on those changes. Once the pull request is ready, I'll request review from you.

…t buttons

Copilot

Pull request overview

Copilot reviewed 13 out of 13 changed files in this pull request and generated 1 comment.

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

Copilot · 2026-01-26T16:37:31Z

interfaces/quicktype/index.html

+    <style>
+        #projectManagementBtn {
+            position: absolute;
+            top:  5.1em;
+            display: none;
+            background-color: var(--primary-color);
+            padding: 10px 20px;
+            color: var(--white);
+            border-radius: 5px;
+            cursor: pointer;
+            transition: background-color 0.3s;
+            border: none;
+        }
+
+        #projectManagementBtn:hover,
+        #projectManagementBtn:focus-visible {
+          background-color: var(--primary-light);
+          outline: 2px solid var(--primary-color);
+          outline-offset: 2px;
+        }
+
+        #projectManagementBtn span {
+          position: relative;
+          left: -10px;
+          display: inline-block;
+          transform: rotate(180deg);
+        }
+    </style>


The #projectManagementBtn styling block is duplicated (with near-identical rules) in multiple places (interfaces/quicktype/index.html, interfaces/project/options.html, interfaces/manage-project/collaborators.html, and components/manage-role/index.js). Consider extracting this into a shared CSS class (e.g. .project-management-btn) in a common stylesheet or component-level style module and using class="project-management-btn" instead, to reduce duplication and keep future visual changes consistent.

cubap

YES! I love it and find no fault. There are good issues to move forward with.

Make sure navigation through workflow interfaces is available

72702c5

thehabes changed the title ~~Interface Inter-navigation~~ Inter-interface Navigation Jan 22, 2026

thehabes linked an issue Jan 22, 2026 that may be closed by this pull request

Inter-interface Navigation #389

Closed

changes from updating claude and reviewing with '/static-review'

adb3bb5

changes from updating claude and reviewing with '/static-review'

59cb489

thehabes requested a review from Copilot January 23, 2026 02:04

Copilot started reviewing on behalf of thehabes January 23, 2026 02:04 View session

This comment was marked as outdated.

Sign in to view

changes in response to copilot review

dc6b640

thehabes requested a review from Copilot January 23, 2026 02:19

Copilot started reviewing on behalf of thehabes January 23, 2026 02:20 View session

This comment was marked as resolved.

Sign in to view

thehabes marked this pull request as ready for review January 23, 2026 02:38

thehabes requested a review from cubap January 23, 2026 02:38

Let's try and make sure the latest code is deployed

abefb59

cubap requested changes Jan 23, 2026

View reviewed changes

Copilot AI mentioned this pull request Jan 23, 2026

Respond to review feedback requesting issue creation for button duplication #394

Closed

thehabes added 6 commits January 23, 2026 11:46

Changes from review and discussion at standup

1e284ee

changes from /static-review

28714e0

changes from /static-review

95cbc6f

changes from /static-review

8f102a6

changes from /static-review

6e56cfa

Button back to project management from manage collaborators

be316f9

thehabes added 5 commits January 23, 2026 16:15

touched up

8780f53

touched up

a3f8c4c

Add focus indicators for keyboard selections to new project managemen…

7fa9ae5

…t buttons

border control

31b43b1

Change this link to use the interface instead of the component

c7ec219

thehabes requested a review from Copilot January 26, 2026 16:30

Copilot started reviewing on behalf of thehabes January 26, 2026 16:31 View session

Copilot AI reviewed Jan 26, 2026

View reviewed changes

thehabes requested a review from cubap January 26, 2026 16:37

thehabes self-assigned this Jan 26, 2026

cubap approved these changes Jan 26, 2026

View reviewed changes

cubap merged commit 1cd43bd into main Jan 26, 2026
9 checks passed

cubap deleted the 389-inter-interface branch January 26, 2026 17:15

Conversation

thehabes commented Jan 22, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Login and Logout

Home

Transcription Workflow

Project Management Workflow

About Us & Contact Us

Shower Thoughts

Uh oh!

github-actions bot commented Jan 22, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

thehabes commented Jan 23, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Future Improvement Suggestion

Uh oh!

This comment was marked as outdated.

Uh oh!

This comment was marked as resolved.

Uh oh!

thehabes commented Jan 23, 2026

📋 Technical Debt Note: CheckPermissions Dual Implementation

Current State

Why This Matters

Recommended Future Action

Uh oh!

thehabes commented Jan 23, 2026

Uh oh!

cubap commented Jan 23, 2026

Uh oh!

thehabes commented Jan 23, 2026

Uh oh!

cubap Jan 23, 2026

Choose a reason for hiding this comment

Uh oh!

cubap Jan 23, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI commented Jan 23, 2026

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Uh oh!

Copilot AI Jan 26, 2026

Choose a reason for hiding this comment

Uh oh!

cubap left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

Comments

thehabes commented Jan 22, 2026 •

edited

Loading

github-actions bot commented Jan 22, 2026 •

edited

Loading

thehabes commented Jan 23, 2026 •

edited

Loading