@@ -80,44 +80,53 @@ export function Sidebar({ ranges }) {
8080 < h1 class = { styles . pageTitle } > { t ( 'page_title' ) } </ h1 >
8181 < nav class = { styles . nav } >
8282 { ranges . value . map ( ( range ) => {
83- const { buttonLabel, linkLabel } = labels ( range , t ) ;
84- return (
85- < div class = { styles . item } key = { range } >
86- < RowLink onClick = { ( ) => onClick ( range ) } current = { current } range = { range } label = { linkLabel } >
87- { titleMap [ range ] ( t ) }
88- </ RowLink >
89- { range === 'all' && (
90- < DeleteAllButton onClick = { onDelete } ariaLabel = { buttonLabel } range = { range } ranges = { ranges } count = { count } />
91- ) }
92- { range !== 'all' && < DeleteButton onClick = { ( ) => onDelete ( range ) } label = { buttonLabel } range = { range } /> }
93- </ div >
94- ) ;
83+ return < Item onClick = { onClick } onDelete = { onDelete } current = { current } range = { range } ranges = { ranges } count = { count } /> ;
9584 } ) }
9685 </ nav >
9786 </ div >
9887 ) ;
9988}
10089
101- function RowLink ( { range, current, label, children, onClick } ) {
90+ /**
91+ * A component that renders a list item with optional delete actions and a link.
92+ *
93+ * @param {Object } props
94+ * @param {import('@preact/signals').ReadonlySignal<Range|null> } props.current The current selection with a value property.
95+ * @param {Range } props.range The range represented by this item.
96+ * @param {(range: Range) => void } props.onClick Callback function triggered when the range is clicked.
97+ * @param {(range: Range) => void } props.onDelete Callback function triggered when the delete action is clicked.
98+ * @param {import("@preact/signals").Signal<Range[]> } props.ranges
99+ * @param {import('@preact/signals').ReadonlySignal<number> } props.count The count value associated with the ranges.
100+ */
101+ function Item ( { current, range, onClick, onDelete, ranges, count } ) {
102+ const { t } = useTypedTranslation ( ) ;
103+ const { buttonLabel, linkLabel } = labels ( range , t ) ;
102104 const classNames = useComputed ( ( ) => {
103- return cn ( styles . link , current . value === range && styles . active ) ;
105+ if ( range === 'all' && current . value === null ) {
106+ return cn ( styles . item , styles . active ) ;
107+ }
108+ return cn ( styles . item , current . value === range && styles . active ) ;
104109 } ) ;
110+
105111 return (
106- < a
107- href = "#"
108- aria-label = { label }
109- class = { classNames }
110- tabindex = { 0 }
111- onClick = { ( e ) => {
112- e . preventDefault ( ) ;
113- onClick ( range ) ;
114- } }
115- >
116- < span class = { styles . icon } >
117- < img src = { iconMap [ range ] } />
118- </ span >
119- { children }
120- </ a >
112+ < div class = { classNames } key = { range } >
113+ < button
114+ aria-label = { linkLabel }
115+ className = { styles . link }
116+ tabIndex = { 0 }
117+ onClick = { ( e ) => {
118+ e . preventDefault ( ) ;
119+ onClick ( range ) ;
120+ } }
121+ >
122+ < span className = { styles . icon } >
123+ < img src = { iconMap [ range ] } />
124+ </ span >
125+ { titleMap [ range ] ( t ) }
126+ </ button >
127+ { range === 'all' && < DeleteAllButton onClick = { onDelete } ariaLabel = { buttonLabel } range = { range } ranges = { ranges } count = { count } /> }
128+ { range !== 'all' && < DeleteButton onClick = { ( ) => onDelete ( range ) } label = { buttonLabel } range = { range } /> }
129+ </ div >
121130 ) ;
122131}
123132
0 commit comments