update pagination ui

src/components/board-pagination/board-pagination.module.css

@@ -35,20 +35,75 @@
   color: var(--button-desktop-text-color-hover);
 }
 
-/* Footer-style compact pagination (layout in footer-first-row.module.css) */
+.pagelist {
+  display: flex;
+  align-items: center;
+  flex-wrap: wrap;
+  margin: 0;
+  padding: 3px 7px !important;
+  overflow: hidden;
+  list-style: none;
+  background-color: var(--pagelist-background-color);
+}
+
+.footerNavPlain {
+  font: inherit;
+  margin: 0;
+  padding: 0;
+  border: none;
+  background: none;
+  cursor: pointer;
+  text-decoration: none;
+  color: inherit;
+}
+
+.footerNavPlain:hover {
+  text-decoration: none;
+}
+
+.footerNavPlainDisabled {
+  font: inherit;
+  margin: 0;
+  padding: 0;
+  border: none;
+  background: none;
+  opacity: 0.5;
+  cursor: default;
+  color: inherit;
+}
+
+.footerPageLink,
+.footerPageCurrent {
+  font-size: 13px;
+  margin: 0;
+  padding: 3px 2px;
+  border: none;
+  background: transparent;
+  list-style: none;
+  overflow: hidden;
+  color: var(--pagelist-item-text-color, #89a);
+}
+
 .footerPageLink {
-  padding: 2px 6px;
-  font-size: 12px;
+  all: unset;
+  display: inline-block;
+  font-size: 13px;
+  margin: 0;
+  padding: 3px 2px;
+  border: none;
+  background: transparent;
+  color: var(--pagelist-item-text-color, #89a);
+  text-transform: capitalize;
+  cursor: pointer;
   text-decoration: var(--button-text-decoration);
-  color: var(--button-desktop-text-color);
 }
 
 .footerPageLink:hover {
-  color: var(--button-desktop-text-color-hover);
+  color: var(--pagelist-item-text-color-hover, #d00);
   text-decoration: var(--button-text-decoration);
 }
 
 .footerPageCurrent {
   font-weight: bold;
-  color: var(--button-desktop-text-color-hover);
+  color: var(--pagelist-item-text-color-current, #000);
 }

src/components/board-pagination/board-pagination.tsx

@@ -8,7 +8,7 @@ export interface BoardPaginationProps {
   basePath: string;
   currentPage: number;
   totalPages: number;
-  /** When true, renders compact footer-style row with [1] [2] ... [10] Next Catalog + Style select */
+  /** When true, renders pagelist: [All] [1] [2] ... [10] Catalog Archive + Style select */
   footerStyle?: boolean;
 }
 
@@ -26,41 +26,43 @@ const BoardPagination = ({ basePath, currentPage, totalPages, footerStyle = fals
 
   if (footerStyle) {
     const pageNumbers = Array.from({ length: totalPages }, (_, i) => i + 1);
-    const ellipsisThreshold = 7;
-    const showEllipsis = totalPages > ellipsisThreshold;
-    const visiblePages = showEllipsis ? [1, 2, currentPage, totalPages].filter((p, i, arr) => arr.indexOf(p) === i).sort((a, b) => a - b) : pageNumbers;
+    const archiveHref = `${basePath}/archive`;
 
     return (
       <div className={footerStyles.footerRow}>
-        <div className={footerStyles.footerLeft}>
-          {visiblePages.map((page, idx) => {
-            const isCurrent = page === currentPage;
-            const prevPage = visiblePages[idx - 1];
-            const showLeadingEllipsis = showEllipsis && prevPage !== undefined && page - prevPage > 1;
-            return (
-              <span key={page}>
-                {showLeadingEllipsis && <span> ... </span>}
-                {isCurrent ? (
-                  <span className={styles.footerPageCurrent}>[{page}]</span>
-                ) : (
-                  <Link to={pageHref(page)} className={styles.footerPageLink}>
-                    [{page}]
-                  </Link>
-                )}
+        <div className={styles.pagelist}>
+          {currentPage > 1 && (
+            <Link to={pageHref(currentPage - 1)} className={styles.footerNavPlain}>
+              {t('previous')}
+            </Link>
+          )}
+          <Link to={basePath} className={styles.footerPageLink}>
+            [{t('all')}]
+          </Link>
+          {pageNumbers.map((page) =>
+            page === currentPage ? (
+              <span key={page} className={styles.footerPageCurrent}>
+                [{page}]
               </span>
-            );
-          })}
-          {nextHref && (
-            <>
-              {' '}
-              <Link to={nextHref} className={styles.footerPageLink}>
-                {t('next')}
+            ) : (
+              <Link key={page} to={pageHref(page)} className={styles.footerPageLink}>
+                [{page}]
               </Link>
-            </>
-          )}{' '}
+            ),
+          )}
+          {currentPage < totalPages ? (
+            <Link to={pageHref(currentPage + 1)} className={styles.footerNavPlain}>
+              {t('next')}
+            </Link>
+          ) : (
+            <span className={styles.footerNavPlainDisabled}>{t('next')}</span>
+          )}
           <Link to={catalogHref} className={styles.footerPageLink}>
             {t('catalog')}
           </Link>
+          <Link to={archiveHref} className={styles.footerPageLink}>
+            {t('archive')}
+          </Link>
         </div>
         <div className={footerStyles.footerRight}>
           <span className={footerStyles.styleLabel}>{t('style')}:</span>
@@ -75,12 +77,12 @@ const BoardPagination = ({ basePath, currentPage, totalPages, footerStyle = fals
   return (
     <div className={styles.pagination}>
       {prevHref ? (
-        <Link to={prevHref} className={styles.paginationButton} aria-label={t('prev')}>
-          {t('prev')}
+        <Link to={prevHref} className={styles.paginationButton} aria-label={t('previous')}>
+          {t('previous')}
         </Link>
       ) : (
         <span className={`${styles.paginationButton} ${styles.disabled}`} aria-disabled='true'>
-          {t('prev')}
+          {t('previous')}
         </span>
       )}
       {pageNumbers.map((page) => {

src/components/footer/footer.tsx

@@ -24,7 +24,6 @@ export const PageFooterDesktop = ({ firstRow, styleRow }: PageFooterDesktopProps
   <footer className={styles.footer}>
     <hr />
     <div className={styles.firstRow}>{firstRow}</div>
-    <hr />
     {styleRow != null ? <div className={styles.styleRow}>{styleRow}</div> : null}
     <div className={styles.boardsBarRow}>
       <BoardsBar />