style(mod queue): add missing footer, improve mobile UI

src/components/footer/footer.tsx

@@ -39,6 +39,23 @@ export const PageFooterDesktop = ({ firstRow, styleRow }: PageFooterDesktopProps
   </footer>
 );
 
+/* -----------------------------------------------------------------------------
+ * StyleOnlyFooterFirstRow
+ * Footer first row with only the style selector (right-aligned). Used by mod queue.
+ * -------------------------------------------------------------------------- */
+
+export const StyleOnlyFooterFirstRow = () => {
+  const { t } = useTranslation();
+  return (
+    <div className={`${styles.footerRow} ${styles.footerRowRightOnly}`}>
+      <div className={styles.footerRight}>
+        <span className={styles.styleLabel}>{t('style')}:</span>
+        <StyleSelector />
+      </div>
+    </div>
+  );
+};
+
 /* -----------------------------------------------------------------------------
  * CatalogFooterFirstRow
  * Catalog footer first row: Return, Archive, Top, Refresh on left; Style selector on right.

src/components/footer/index.ts

@@ -1,2 +1,10 @@
-export { PageFooterDesktop, PageFooterMobile, CatalogFooterFirstRow, ThreadFooterFirstRow, ThreadFooterStyleRow, ThreadFooterMobile } from './footer';
+export {
+  PageFooterDesktop,
+  PageFooterMobile,
+  StyleOnlyFooterFirstRow,
+  CatalogFooterFirstRow,
+  ThreadFooterFirstRow,
+  ThreadFooterStyleRow,
+  ThreadFooterMobile,
+} from './footer';
 export type { PageFooterDesktopProps, CatalogFooterFirstRowProps, ThreadFooterFirstRowProps, ThreadFooterMobileProps } from './footer';

src/components/post-form/post-form.module.css

@@ -24,6 +24,12 @@
   padding: 10px 0;
 }
 
+@media (max-width: 639px) {
+  .modQueueTitle {
+    padding-top: 24px;
+  }
+}
+
 @media (min-width: 640px) {
   .modQueueTitle {
     font-size: 1em;

src/views/mod-queue/mod-queue.module.css

@@ -292,16 +292,31 @@
 .cardHeader {
   display: flex;
   justify-content: space-between;
+  align-items: baseline;
   font-size: 9pt;
   font-weight: bold;
 }
 
+.cardHeaderLeft {
+  display: flex;
+  align-items: baseline;
+  gap: 0;
+  min-width: 0;
+}
+
 .cardNumber {
   color: var(--body-font-color);
+  flex-shrink: 0;
+}
+
+.cardBoardSeparator {
+  color: var(--body-font-color);
+  margin: 0 4px;
 }
 
 .cardTime {
   white-space: nowrap;
+  flex-shrink: 0;
 }
 
 .cardContent {
@@ -325,6 +340,17 @@
   gap: 8px;
 }
 
+/* Mobile compact view: match feed view approve/reject button styling */
+.cardApproveButton {
+  background-color: #3fa96b;
+  color: #fff;
+}
+
+.cardRejectButton {
+  background-color: #d9534f;
+  color: #fff;
+}
+
 /* Desktop: buttons styled as text links (same as board buttons) */
 @media (min-width: 640px) {
   .actions {
@@ -438,7 +464,7 @@ span.reject:hover {
 
 .cardBoard {
   font-size: 8pt;
-  margin-right: 8px;
+  flex-shrink: 0;
 }
 
 .cardBoard a {
@@ -614,7 +640,7 @@ span.reject:hover {
     text-decoration: var(--button-text-decoration);
     display: inline;
     font-family: inherit;
-    font-size: 8pt;
+    font-size: var(--button-font-size-mobile);
   }
 
   .button:hover {

src/views/mod-queue/mod-queue.tsx

@@ -24,9 +24,18 @@ import { useCurrentTime } from '../../hooks/use-current-time';
 import { Post } from '../post/post';
 import capitalize from 'lodash/capitalize';
 import lowerCase from 'lodash/lowerCase';
+import { PageFooterDesktop, PageFooterMobile, StyleOnlyFooterFirstRow } from '../../components/footer';
+import footerStyles from '../../components/footer/footer.module.css';
 
 const { addChallenge } = useChallengesStore.getState();
 
+/** Path for display: directory code, or full address if has TLD, or shortened for long IPNS keys (no dot) */
+const getBoardDisplayPath = (address: string, path: string): string => {
+  if (path !== address) return path;
+  if (address.includes('.')) return address;
+  return getShortAddress(address) || address;
+};
+
 interface ModQueueViewProps {
   boardIdentifier?: string; // If provided, shows queue for single board
 }
@@ -54,8 +63,10 @@ interface ModQueueRowProps {
   comment: Comment;
   isOdd?: boolean;
   showBoard?: boolean;
-  /** Precomputed board path from parent (avoids per-row useBoardPath lookup) */
+  /** Board path for URLs (directory code or full address) */
   boardPath: string | undefined;
+  /** Board path for display (shortened when long IPNS key with no TLD) */
+  boardDisplayPath: string | undefined;
 }
 
 // Track which action was initiated to show appropriate completion message
@@ -123,10 +134,10 @@ const ModQueueActions = ({ status, errorMessage, isPublishing, handleApprove, ha
       </div>
     ) : (
       <div className={styles.cardActions}>
-        <button className={styles.button} onClick={handleApprove} disabled={isPublishing}>
+        <button className={`button ${styles.cardApproveButton}`} onClick={handleApprove} disabled={isPublishing}>
           {t('approve')}
         </button>
-        <button className={styles.button} onClick={handleReject} disabled={isPublishing}>
+        <button className={`button ${styles.cardRejectButton}`} onClick={handleReject} disabled={isPublishing}>
           {t('reject')}
         </button>
       </div>
@@ -225,7 +236,7 @@ const useModQueueActions = (comment: Comment): ModQueueActionState => {
   return { status, errorMessage, isPublishing, handleApprove, handleReject };
 };
 
-const ModQueueRow = memo(({ comment, isOdd = false, showBoard = false, boardPath }: ModQueueRowProps) => {
+const ModQueueRow = memo(({ comment, isOdd = false, showBoard = false, boardPath, boardDisplayPath }: ModQueueRowProps) => {
   const { t } = useTranslation();
   const { getAlertThresholdSeconds } = useModQueueStore();
   const isMobile = useIsMobile();
@@ -257,13 +268,14 @@ const ModQueueRow = memo(({ comment, isOdd = false, showBoard = false, boardPath
   const isReply = !!parentCid;
   const commentMediaInfo = getCommentMediaInfo(link, thumbnailUrl, linkWidth, linkHeight);
   const hasThumbnail = getHasThumbnail(commentMediaInfo, link);
-  const rawExcerpt =
+  const rawExcerpt = (
     (hasTitle && hasContent ? `${title}: ${content}` : null) ||
     (hasTitle ? title : null) ||
     (hasContent ? content : null) ||
     (hasLink ? link : null) ||
     (hasThumbnail ? t('image') : null) ||
-    t('no_content');
+    t('no_content')
+  ).trim();
   // Only truncate excerpt on desktop, allow wrapping on mobile
   const excerpt = !isMobile && rawExcerpt.length > 101 ? rawExcerpt.slice(0, 98) + '...' : rawExcerpt;
   const threadTargetCid = threadCid || cid;
@@ -274,7 +286,9 @@ const ModQueueRow = memo(({ comment, isOdd = false, showBoard = false, boardPath
   return (
     <div className={`${styles.row} ${isOdd ? styles.rowOdd : ''}`}>
       <div className={styles.number}>{number ?? 'N/A'}</div>
-      {showBoard && <div className={styles.board}>{modQueueUrl ? <Link to={modQueueUrl}>/{boardPath}/</Link> : <span>/{boardPath ?? '—'}/</span>}</div>}
+      {showBoard && (
+        <div className={styles.board}>{modQueueUrl ? <Link to={modQueueUrl}>/{boardDisplayPath ?? '—'}/</Link> : <span>/{boardDisplayPath ?? '—'}/</span>}</div>
+      )}
       <div className={styles.excerpt}>
         {postUrl ? (
           <Link to={postUrl} title={excerpt}>
@@ -329,11 +343,13 @@ ModQueueRow.displayName = 'ModQueueRow';
 interface ModQueueCardProps {
   comment: Comment;
   showBoard?: boolean;
-  /** Precomputed board path from parent (avoids per-row useBoardPath lookup) */
+  /** Board path for URLs (directory code or full address) */
   boardPath: string | undefined;
+  /** Board path for display (shortened when long IPNS key with no TLD) */
+  boardDisplayPath: string | undefined;
 }
 
-const ModQueueCard = memo(({ comment, showBoard = false, boardPath }: ModQueueCardProps) => {
+const ModQueueCard = memo(({ comment, showBoard = false, boardPath, boardDisplayPath }: ModQueueCardProps) => {
   const { t } = useTranslation();
   const { getAlertThresholdSeconds } = useModQueueStore();
   const currentTime = useCurrentTime();
@@ -359,13 +375,14 @@ const ModQueueCard = memo(({ comment, showBoard = false, boardPath }: ModQueueCa
   const isReply = !!parentCid;
   const commentMediaInfo = getCommentMediaInfo(link, thumbnailUrl, linkWidth, linkHeight);
   const hasThumbnail = getHasThumbnail(commentMediaInfo, link);
-  const rawExcerpt =
+  const rawExcerpt = (
     (hasTitle && hasContent ? `${title}: ${content}` : null) ||
     (hasTitle ? title : null) ||
     (hasContent ? content : null) ||
     (hasLink ? link : null) ||
     (hasThumbnail ? t('image') : null) ||
-    t('no_content');
+    t('no_content')
+  ).trim();
   const excerpt = rawExcerpt.length > 140 ? rawExcerpt.slice(0, 137) + '...' : rawExcerpt;
   const threadTargetCid = threadCid || cid;
   const postUrl = boardPath && threadTargetCid ? `/${boardPath}/thread/${threadTargetCid}` : undefined;
@@ -375,8 +392,15 @@ const ModQueueCard = memo(({ comment, showBoard = false, boardPath }: ModQueueCa
   return (
     <div className={styles.mobileCard}>
       <div className={styles.cardHeader}>
-        <span className={styles.cardNumber}>No. {number ?? 'N/A'}</span>
-        {showBoard && boardPath && <span className={styles.cardBoard}>{modQueueUrl ? <Link to={modQueueUrl}>/{boardPath}/</Link> : <span>/{boardPath}/</span>}</span>}
+        <span className={styles.cardHeaderLeft}>
+          <span className={styles.cardNumber}>No. {number ?? 'N/A'}</span>
+          {showBoard && boardPath && (
+            <>
+              <span className={styles.cardBoardSeparator}> — </span>
+              <span className={styles.cardBoard}>{modQueueUrl ? <Link to={modQueueUrl}>/{boardDisplayPath}/</Link> : <span>/{boardDisplayPath}/</span>}</span>
+            </>
+          )}
+        </span>
         <span className={styles.cardTime}>
           {isAwaitingApproval && isOverThreshold ? (
             <>
@@ -792,27 +816,35 @@ const ModQueueView = ({ boardIdentifier: propBoardIdentifier }: ModQueueViewProp
 
   const showBoardColumn = !resolvedAddress;
   const compactRowItemContent = useCallback(
-    (index: number, comment: Comment) => (
-      <ModQueueRow
-        key={comment.cid}
-        comment={comment}
-        isOdd={index % 2 === 0}
-        showBoard={showBoardColumn}
-        boardPath={addressToPathMap.get(comment.subplebbitAddress) ?? comment.subplebbitAddress}
-      />
-    ),
-    [addressToPathMap, showBoardColumn],
+    (index: number, comment: Comment) => {
+      const path = addressToPathMap.get(comment.subplebbitAddress) ?? getBoardPath(comment.subplebbitAddress, directories);
+      return (
+        <ModQueueRow
+          key={comment.cid}
+          comment={comment}
+          isOdd={index % 2 === 0}
+          showBoard={showBoardColumn}
+          boardPath={path}
+          boardDisplayPath={path ? getBoardDisplayPath(comment.subplebbitAddress, path) : undefined}
+        />
+      );
+    },
+    [addressToPathMap, showBoardColumn, directories],
   );
   const compactCardItemContent = useCallback(
-    (_index: number, comment: Comment) => (
-      <ModQueueCard
-        key={comment.cid}
-        comment={comment}
-        showBoard={showBoardColumn}
-        boardPath={addressToPathMap.get(comment.subplebbitAddress) ?? comment.subplebbitAddress}
-      />
-    ),
-    [addressToPathMap, showBoardColumn],
+    (_index: number, comment: Comment) => {
+      const path = addressToPathMap.get(comment.subplebbitAddress) ?? getBoardPath(comment.subplebbitAddress, directories);
+      return (
+        <ModQueueCard
+          key={comment.cid}
+          comment={comment}
+          showBoard={showBoardColumn}
+          boardPath={path}
+          boardDisplayPath={path ? getBoardDisplayPath(comment.subplebbitAddress, path) : undefined}
+        />
+      );
+    },
+    [addressToPathMap, showBoardColumn, directories],
   );
 
   const setResetFunction = useFeedResetStore((state) => state.setResetFunction);
@@ -838,127 +870,156 @@ const ModQueueView = ({ boardIdentifier: propBoardIdentifier }: ModQueueViewProp
     [hasMore, subplebbitAddresses, subplebbitError, feed.length],
   );
 
-  return (
-    <div className={styles.container}>
-      {!resolvedAddress && (
-        <div className={styles.controls}>
-          <div className={styles.controlsLeft}>
-            <ModQueueBoardSummary feed={feed} directories={directories} accountSubplebbitAddresses={accountSubplebbitAddresses} />
+  const pageFooter = (
+    <>
+      <PageFooterDesktop firstRow={<StyleOnlyFooterFirstRow />} />
+      <PageFooterMobile>
+        <div>
+          <div className={footerStyles.mobileFooterButtons}>
+            <button type='button' className='button' onClick={() => window.scrollTo({ top: 0, left: 0, behavior: 'instant' })}>
+              {t('top')}
+            </button>
+            <button type='button' className='button' onClick={() => reset?.()}>
+              {t('refresh')}
+            </button>
           </div>
         </div>
-      )}
+      </PageFooterMobile>
+    </>
+  );
 
-      {filteredFeed.length === 0 && !hasMore ? (
-        <div className={styles.empty}>{t('queue_is_empty')}</div>
-      ) : (
-        <>
-          {viewMode === 'compact' && !isMobile && (
-            <>
-              <div className={styles.tableHeader}>
-                <div className={styles.numberHeader}>No.</div>
-                {!resolvedAddress && <div className={styles.boardHeader}>{t('board')}</div>}
-                <div className={styles.excerptHeader}>{t('excerpt')}</div>
-                <div className={styles.timeHeader}>{t('submitted')}</div>
-                <div className={styles.typeHeader}>{t('type')}</div>
-                <div className={styles.imageHeader}>{t('image')}</div>
-                <div className={styles.actionsHeader}>{t('actions')}</div>
-              </div>
+  return (
+    <>
+      <div className={styles.container}>
+        {!resolvedAddress && (
+          <div className={styles.controls}>
+            <div className={styles.controlsLeft}>
+              <ModQueueBoardSummary feed={feed} directories={directories} accountSubplebbitAddresses={accountSubplebbitAddresses} />
+            </div>
+          </div>
+        )}
 
-              {hasMore ? (
-                <Virtuoso
-                  useWindowScroll
-                  data={filteredFeed}
-                  totalCount={filteredFeed.length}
-                  endReached={loadMore}
-                  increaseViewportBy={{ bottom: 600, top: 600 }}
-                  itemContent={compactRowItemContent}
-                  components={footerComponents}
-                />
-              ) : (
-                <>
-                  {filteredFeed.map((comment, index) => (
-                    <ModQueueRow
-                      key={comment.cid}
-                      comment={comment}
-                      isOdd={index % 2 === 0}
-                      showBoard={showBoardColumn}
-                      boardPath={addressToPathMap.get(comment.subplebbitAddress) ?? comment.subplebbitAddress}
-                    />
-                  ))}
-                  {subplebbitError?.message && feed.length === 0 && (
-                    <div className={styles.error}>
-                      <ErrorDisplay error={subplebbitError} />
-                    </div>
-                  )}
-                  <ModQueueFooter hasMore={hasMore} subplebbitAddresses={subplebbitAddresses} />
-                </>
-              )}
-            </>
-          )}
+        {filteredFeed.length === 0 && !hasMore ? (
+          <div className={styles.empty}>{t('queue_is_empty')}</div>
+        ) : (
+          <>
+            {viewMode === 'compact' && !isMobile && (
+              <>
+                <div className={styles.tableHeader}>
+                  <div className={styles.numberHeader}>No.</div>
+                  {!resolvedAddress && <div className={styles.boardHeader}>{t('board')}</div>}
+                  <div className={styles.excerptHeader}>{t('excerpt')}</div>
+                  <div className={styles.timeHeader}>{t('submitted')}</div>
+                  <div className={styles.typeHeader}>{t('type')}</div>
+                  <div className={styles.imageHeader}>{t('image')}</div>
+                  <div className={styles.actionsHeader}>{t('actions')}</div>
+                </div>
 
-          {viewMode === 'compact' && isMobile && (
-            <>
-              {hasMore ? (
-                <Virtuoso
-                  useWindowScroll
-                  data={filteredFeed}
-                  totalCount={filteredFeed.length}
-                  endReached={loadMore}
-                  increaseViewportBy={{ bottom: 600, top: 600 }}
-                  itemContent={compactCardItemContent}
-                  components={footerComponents}
-                />
-              ) : (
-                <>
-                  {filteredFeed.map((comment) => (
-                    <ModQueueCard
-                      key={comment.cid}
-                      comment={comment}
-                      showBoard={showBoardColumn}
-                      boardPath={addressToPathMap.get(comment.subplebbitAddress) ?? comment.subplebbitAddress}
-                    />
-                  ))}
-                  {subplebbitError?.message && feed.length === 0 && (
-                    <div className={styles.error}>
-                      <ErrorDisplay error={subplebbitError} />
-                    </div>
-                  )}
-                  <ModQueueFooter hasMore={hasMore} subplebbitAddresses={subplebbitAddresses} />
-                </>
-              )}
-            </>
-          )}
+                {hasMore ? (
+                  <Virtuoso
+                    useWindowScroll
+                    data={filteredFeed}
+                    totalCount={filteredFeed.length}
+                    endReached={loadMore}
+                    increaseViewportBy={{ bottom: 600, top: 600 }}
+                    itemContent={compactRowItemContent}
+                    components={footerComponents}
+                  />
+                ) : (
+                  <>
+                    {filteredFeed.map((comment, index) => {
+                      const path = addressToPathMap.get(comment.subplebbitAddress) ?? getBoardPath(comment.subplebbitAddress, directories);
+                      return (
+                        <ModQueueRow
+                          key={comment.cid}
+                          comment={comment}
+                          isOdd={index % 2 === 0}
+                          showBoard={showBoardColumn}
+                          boardPath={path}
+                          boardDisplayPath={path ? getBoardDisplayPath(comment.subplebbitAddress, path) : undefined}
+                        />
+                      );
+                    })}
+                    {subplebbitError?.message && feed.length === 0 && (
+                      <div className={styles.error}>
+                        <ErrorDisplay error={subplebbitError} />
+                      </div>
+                    )}
+                    <ModQueueFooter hasMore={hasMore} subplebbitAddresses={subplebbitAddresses} />
+                  </>
+                )}
+              </>
+            )}
 
-          {viewMode === 'feed' && (
-            <>
-              {hasMore ? (
-                <Virtuoso
-                  useWindowScroll
-                  data={filteredFeed}
-                  totalCount={filteredFeed.length}
-                  endReached={loadMore}
-                  increaseViewportBy={{ bottom: 600, top: 600 }}
-                  itemContent={(_index, comment) => <ModQueueFeedPost key={comment.cid} comment={comment} />}
-                  components={footerComponents}
-                />
-              ) : (
-                <>
-                  {filteredFeed.map((comment) => (
-                    <ModQueueFeedPost key={comment.cid} comment={comment} />
-                  ))}
-                  {subplebbitError?.message && feed.length === 0 && (
-                    <div className={styles.error}>
-                      <ErrorDisplay error={subplebbitError} />
-                    </div>
-                  )}
-                  <ModQueueFooter hasMore={hasMore} subplebbitAddresses={subplebbitAddresses} />
-                </>
-              )}
-            </>
-          )}
-        </>
-      )}
-    </div>
+            {viewMode === 'compact' && isMobile && (
+              <>
+                {hasMore ? (
+                  <Virtuoso
+                    useWindowScroll
+                    data={filteredFeed}
+                    totalCount={filteredFeed.length}
+                    endReached={loadMore}
+                    increaseViewportBy={{ bottom: 600, top: 600 }}
+                    itemContent={compactCardItemContent}
+                    components={footerComponents}
+                  />
+                ) : (
+                  <>
+                    {filteredFeed.map((comment) => {
+                      const path = addressToPathMap.get(comment.subplebbitAddress) ?? getBoardPath(comment.subplebbitAddress, directories);
+                      return (
+                        <ModQueueCard
+                          key={comment.cid}
+                          comment={comment}
+                          showBoard={showBoardColumn}
+                          boardPath={path}
+                          boardDisplayPath={path ? getBoardDisplayPath(comment.subplebbitAddress, path) : undefined}
+                        />
+                      );
+                    })}
+                    {subplebbitError?.message && feed.length === 0 && (
+                      <div className={styles.error}>
+                        <ErrorDisplay error={subplebbitError} />
+                      </div>
+                    )}
+                    <ModQueueFooter hasMore={hasMore} subplebbitAddresses={subplebbitAddresses} />
+                  </>
+                )}
+              </>
+            )}
+
+            {viewMode === 'feed' && (
+              <>
+                {hasMore ? (
+                  <Virtuoso
+                    useWindowScroll
+                    data={filteredFeed}
+                    totalCount={filteredFeed.length}
+                    endReached={loadMore}
+                    increaseViewportBy={{ bottom: 600, top: 600 }}
+                    itemContent={(_index, comment) => <ModQueueFeedPost key={comment.cid} comment={comment} />}
+                    components={footerComponents}
+                  />
+                ) : (
+                  <>
+                    {filteredFeed.map((comment) => (
+                      <ModQueueFeedPost key={comment.cid} comment={comment} />
+                    ))}
+                    {subplebbitError?.message && feed.length === 0 && (
+                      <div className={styles.error}>
+                        <ErrorDisplay error={subplebbitError} />
+                      </div>
+                    )}
+                    <ModQueueFooter hasMore={hasMore} subplebbitAddresses={subplebbitAddresses} />
+                  </>
+                )}
+              </>
+            )}
+          </>
+        )}
+      </div>
+      {pageFooter}
+    </>
   );
 };