@@ -13,7 +13,7 @@ import { IssueItem } from './components/IssueItem';
1313import { LoadingState } from './components/LoadingState' ;
1414import { SessionItem } from './components/SessionItem' ;
1515import { SortDropdown } from './components/SortDropdown' ;
16- import { DashboardState , extractMilestoneFromQuery , IssueData , ProjectData , SessionData , vscode } from './types' ;
16+ import { DashboardReady , DashboardState , extractMilestoneFromQuery , GlobalDashboardReady , IssueData , ProjectData , SessionData , vscode } from './types' ;
1717
1818export function main ( ) {
1919 render ( < Dashboard /> , document . getElementById ( 'app' ) ) ;
@@ -113,6 +113,24 @@ function Dashboard() {
113113 } ) ;
114114 } , [ ] ) ;
115115
116+ const handleIssueCountClick = useCallback ( ( ) => {
117+ if ( dashboardState ?. state === 'ready' && ! dashboardState . isGlobal ) {
118+ const readyState = dashboardState as DashboardReady ;
119+ const { owner, name } = readyState . repository || { owner : '' , name : '' } ;
120+
121+ if ( owner && name ) {
122+ const githubQuery = readyState . issueQuery ;
123+
124+ const githubUrl = `https://github.com/${ owner } /${ name } /issues?q=${ encodeURIComponent ( githubQuery ) } ` ;
125+ // Open in external browser
126+ vscode . postMessage ( {
127+ command : 'open-external-url' ,
128+ args : { url : githubUrl }
129+ } ) ;
130+ }
131+ }
132+ } , [ dashboardState ] ) ;
133+
116134 // Sort issues based on selected option
117135 const getSortedIssues = useCallback ( ( issues : readonly IssueData [ ] ) => {
118136 if ( ! issues ) return [ ] ;
@@ -149,12 +167,12 @@ function Dashboard() {
149167 } ) ;
150168 } , [ dashboardState ] ) ;
151169
152- // Derived state from discriminated union
170+ // Derived state from discriminated union with proper type narrowing
153171 const isGlobal = dashboardState ?. isGlobal ;
154- const issueQuery = dashboardState && ! dashboardState . isGlobal ? ( dashboardState . issueQuery || '' ) : '' ;
155- const milestoneIssues = ! dashboardState ? .isGlobal && dashboardState ? .state === 'ready' && ! dashboardState . isGlobal ? dashboardState . milestoneIssues : [ ] ;
172+ const issueQuery = dashboardState && ! dashboardState . isGlobal ? ( dashboardState as DashboardReady ) . issueQuery || '' : '' ;
173+ const milestoneIssues = dashboardState && ! dashboardState . isGlobal && dashboardState . state === 'ready' ? ( dashboardState as DashboardReady ) . milestoneIssues : [ ] ;
156174 const activeSessions = dashboardState ?. state === 'ready' ? dashboardState . activeSessions : [ ] ;
157- const recentProjects = dashboardState ? .isGlobal && dashboardState ? .state === 'ready' && dashboardState . isGlobal ? dashboardState . recentProjects : [ ] ;
175+ const recentProjects = dashboardState && dashboardState . isGlobal && dashboardState . state === 'ready' ? ( dashboardState as GlobalDashboardReady ) . recentProjects : [ ] ;
158176
159177 // For global dashboards, create a mixed array of sessions and projects
160178 const mixedItems = isGlobal ? ( ( ) => {
@@ -244,7 +262,11 @@ function Dashboard() {
244262 ) }
245263 </ div >
246264 { dashboardState ?. state === 'ready' && (
247- < div className = "section-count" >
265+ < div
266+ className = "section-count clickable-count"
267+ onClick = { handleIssueCountClick }
268+ title = "Click to open GitHub issues"
269+ >
248270 { milestoneIssues . length || 0 } issue{ milestoneIssues . length !== 1 ? 's' : '' }
249271 </ div >
250272 ) }
0 commit comments