Use countdown timer for better delivery estimates in Logs tab (#425)

Author: synzen

services/backend-api/client/src/features/feed/components/UserFeedLogs/DeliveryPreview/ArticleDeliveryDetails.tsx

@@ -25,10 +25,15 @@ import { pages } from "../../../../../constants";
 import { FeedConnectionType } from "../../../../../types";
 import { DeliveryChecksModal } from "./DeliveryChecksModal";
 import { getOutcomeColorScheme } from "./deliveryPreviewUtils";
-import { formatRefreshRateSeconds } from "../../../../../utils/formatRefreshRateSeconds";
+import {
+  formatRefreshRateSeconds,
+  getEffectiveRefreshRateSeconds,
+  getNextCheckText,
+} from "../../../../../utils/formatRefreshRateSeconds";
 
 interface Props {
   result: ArticleDeliveryResult;
+  lastRequestAtUnix?: number;
 }
 
 const getOutcomeLabel = (outcome: ArticleDeliveryOutcome): string => {
@@ -60,10 +65,18 @@ const getOutcomeLabel = (outcome: ArticleDeliveryOutcome): string => {
   }
 };
 
-const getExplanationText = (outcome: ArticleDeliveryOutcome): string => {
+const getExplanationText = (
+  outcome: ArticleDeliveryOutcome,
+  refreshRateSeconds: number,
+  lastRequestAtUnix?: number,
+): string => {
+  const refreshRateText = `Your feed checks for new content every ${formatRefreshRateSeconds(refreshRateSeconds)}.`;
+  const nextCheckText = getNextCheckText(lastRequestAtUnix, refreshRateSeconds);
+  const timingText = nextCheckText ? `${refreshRateText} ${nextCheckText}` : refreshRateText;
+
   switch (outcome) {
     case ArticleDeliveryOutcome.WouldDeliver:
-      return "This article would be delivered to Discord when the feed is next processed.";
+      return `This article would be delivered to Discord when the feed is next processed. ${timingText}`;
     case ArticleDeliveryOutcome.FirstRunBaseline:
       return "This feed is in its learning phase. MonitoRSS skips pre-existing articles to avoid flooding your channel with old content.";
     case ArticleDeliveryOutcome.DuplicateId:
@@ -79,7 +92,7 @@ const getExplanationText = (outcome: ArticleDeliveryOutcome): string => {
     case ArticleDeliveryOutcome.RateLimitedMedium:
       return "This connection has reached its delivery limit. The article will be delivered automatically once the limit resets.";
     case ArticleDeliveryOutcome.WouldDeliverPassingComparison:
-      return "This article was seen before, but one of your Passing Comparison fields changed, so it will be re-delivered as an update.";
+      return `This article was seen before, but one of your Passing Comparison fields changed, so it will be re-delivered as an update. ${timingText}`;
     case ArticleDeliveryOutcome.FeedUnchanged:
       return "The feed's content hasn't changed since it was last checked. MonitoRSS skips unchanged feeds to save resources. New articles will be detected automatically once the publisher has indicated that there are new changes.";
     case ArticleDeliveryOutcome.FeedError:
@@ -134,7 +147,7 @@ const ConnectionResultRow = ({ mediumResult }: ConnectionResultRowProps) => {
   );
 };
 
-export const ArticleDeliveryDetails = ({ result }: Props) => {
+export const ArticleDeliveryDetails = ({ result, lastRequestAtUnix }: Props) => {
   const { userFeed } = useUserFeedContext();
   const { isOpen, onOpen, onClose } = useDisclosure();
 
@@ -148,19 +161,23 @@ export const ArticleDeliveryDetails = ({ result }: Props) => {
     return uniqueOutcomes.size > 1;
   };
 
+  const effectiveRefreshRateSeconds = getEffectiveRefreshRateSeconds(userFeed);
+
   const getDisplayText = () => {
     if (isLearningPhase) {
       const plural = connectionCount !== 1 ? "s" : "";
-      const formattedTime = formatRefreshRateSeconds(userFeed.refreshRateSeconds);
+      const formattedTime = formatRefreshRateSeconds(effectiveRefreshRateSeconds);
+      const nextCheckText = getNextCheckText(lastRequestAtUnix, effectiveRefreshRateSeconds);
+      const nextCheckSuffix = nextCheckText ? ` ${nextCheckText}` : "";
 
-      return `Skipped (Learning Phase): This article existed before the feed was added. MonitoRSS skips pre-existing articles to avoid flooding your channel with old content. New articles will be delivered to all ${connectionCount} connection${plural} once learning completes (within ${formattedTime}).`;
+      return `Skipped (Learning Phase): This article existed before the feed was added. MonitoRSS skips pre-existing articles to avoid flooding your channel with old content. New articles will be delivered to all ${connectionCount} connection${plural} once learning completes (within ${formattedTime}).${nextCheckSuffix}`;
     }
 
     if (hasPartialDelivery()) {
       return "This article would deliver to some connections but not others.";
     }
 
-    return getExplanationText(result.outcome);
+    return getExplanationText(result.outcome, effectiveRefreshRateSeconds, lastRequestAtUnix);
   };
 
   return (

services/backend-api/client/src/features/feed/components/UserFeedLogs/DeliveryPreview/DeliveryChecksModal.tsx

@@ -32,7 +32,10 @@ import {
   RepeatIcon,
   WarningIcon,
 } from "@chakra-ui/icons";
-import { formatRefreshRateSeconds } from "../../../../../utils/formatRefreshRateSeconds";
+import {
+  formatRefreshRateSeconds,
+  getEffectiveRefreshRateSeconds,
+} from "../../../../../utils/formatRefreshRateSeconds";
 import {
   ArticleDeliveryOutcome,
   ArticleDeliveryResult,
@@ -869,9 +872,7 @@ export const DeliveryChecksModal = ({ isOpen, onClose, result, initialMediumId }
         <ModalCloseButton />
         <ModalBody>
           {isLearningPhase && (
-            <LearningPhaseContent
-              refreshRateSeconds={userFeed.userRefreshRateSeconds || userFeed.refreshRateSeconds}
-            />
+            <LearningPhaseContent refreshRateSeconds={getEffectiveRefreshRateSeconds(userFeed)} />
           )}
           {isFeedUnchanged && <FeedUnchangedContent />}
           {isFeedError && <FeedErrorContent outcomeReason={result.outcomeReason} />}

services/backend-api/client/src/features/feed/components/UserFeedLogs/DeliveryPreview/DeliveryPreviewAccordion.tsx

@@ -47,9 +47,14 @@ const getStatusBorderColor = (outcome: ArticleDeliveryOutcome): string => {
 interface DeliveryPreviewAccordionItemProps {
   result: ArticleDeliveryResult;
   isFirst: boolean;
+  lastRequestAtUnix?: number;
 }
 
-const DeliveryPreviewAccordionItem = ({ result, isFirst }: DeliveryPreviewAccordionItemProps) => {
+const DeliveryPreviewAccordionItem = ({
+  result,
+  isFirst,
+  lastRequestAtUnix,
+}: DeliveryPreviewAccordionItemProps) => {
   const displayOutcome = getOutcomeLabel(result.outcome);
   const colorScheme = getOutcomeColorScheme(result.outcome);
   const borderColor = getStatusBorderColor(result.outcome);
@@ -81,24 +86,29 @@ const DeliveryPreviewAccordionItem = ({ result, isFirst }: DeliveryPreviewAccord
         <AccordionIcon ml={2} />
       </AccordionButton>
       <AccordionPanel p={0}>
-        <ArticleDeliveryDetails result={result} />
+        <ArticleDeliveryDetails result={result} lastRequestAtUnix={lastRequestAtUnix} />
       </AccordionPanel>
     </AccordionItem>
   );
 };
 
 interface DeliveryPreviewAccordionProps {
   results: ArticleDeliveryResult[];
+  lastRequestAtUnix?: number;
 }
 
-export const DeliveryPreviewAccordion = ({ results }: DeliveryPreviewAccordionProps) => (
+export const DeliveryPreviewAccordion = ({
+  results,
+  lastRequestAtUnix,
+}: DeliveryPreviewAccordionProps) => (
   <Box {...ARTICLE_LIST_CONTAINER_PROPS}>
     <Accordion allowMultiple>
       {results.map((result, index) => (
         <DeliveryPreviewAccordionItem
           key={result.articleId}
           result={result}
           isFirst={index === 0}
+          lastRequestAtUnix={lastRequestAtUnix}
         />
       ))}
     </Accordion>

services/backend-api/client/src/features/feed/components/UserFeedLogs/DeliveryPreview/index.tsx

@@ -21,20 +21,26 @@ import { useUserFeedContext } from "../../../../../contexts/UserFeedContext";
 import { pages } from "../../../../../constants";
 import { UserFeedTabSearchParam } from "../../../../../constants/userFeedTabSearchParam";
 import { useDeliveryPreviewWithPagination } from "../../../hooks/useDeliveryPreviewWithPagination";
+import { useUserFeedRequests } from "../../../hooks";
 import { InlineErrorAlert } from "../../../../../components";
 import {
   DeliveryPreviewAccordion,
   DeliveryPreviewAccordionSkeleton,
 } from "./DeliveryPreviewAccordion";
 import { ArticleDeliveryOutcome, ArticleDeliveryResult } from "../../../types/DeliveryPreview";
-import { formatRefreshRateSeconds } from "../../../../../utils/formatRefreshRateSeconds";
+import {
+  formatRefreshRateSeconds,
+  getEffectiveRefreshRateSeconds,
+  getNextCheckText,
+} from "../../../../../utils/formatRefreshRateSeconds";
 import { FeedLevelStateDisplay, FeedState } from "./FeedLevelStateDisplay";
 
 dayjs.extend(relativeTime);
 
 export const getPatternAlert = (
   results: ArticleDeliveryResult[],
   refreshRateSeconds: number,
+  lastRequestAtUnix?: number,
 ): { type: "info" | "warning"; message: string } | null => {
   if (results.length === 0) return null;
 
@@ -59,10 +65,12 @@ export const getPatternAlert = (
   // First run is a feed-level state - if any article has it, all do
   if (outcome === ArticleDeliveryOutcome.FirstRunBaseline && count >= 1) {
     const formattedTime = formatRefreshRateSeconds(refreshRateSeconds);
+    const nextCheckText = getNextCheckText(lastRequestAtUnix, refreshRateSeconds);
+    const nextCheckSuffix = nextCheckText ? ` ${nextCheckText}` : "";
 
     return {
       type: "info",
-      message: `This feed is in its learning phase. MonitoRSS is identifying existing articles so it only delivers new ones. This typically completes within ${formattedTime}.`,
+      message: `This feed is in its learning phase. MonitoRSS is identifying existing articles so it only delivers new ones. This typically completes within ${formattedTime}.${nextCheckSuffix}`,
     };
   }
 
@@ -105,6 +113,7 @@ export interface DeliveryPreviewPresentationalProps {
   feedState?: FeedState | null;
   feedId: string;
   refreshRateSeconds: number;
+  lastRequestAtUnix?: number;
   addConnectionUrl: string;
   lastCheckedFormatted?: string;
   onRefresh?: () => void;
@@ -122,14 +131,15 @@ export const DeliveryPreviewPresentational = ({
   feedState = null,
   feedId,
   refreshRateSeconds,
+  lastRequestAtUnix,
   addConnectionUrl,
   lastCheckedFormatted = "Never",
   onRefresh = () => {},
   onLoadMore = () => {},
 }: DeliveryPreviewPresentationalProps) => {
   const hasFeedLevelState = !!feedState;
   const hasNoData = results.length === 0 && !isLoading && !hasFeedLevelState;
-  const patternAlert = getPatternAlert(results, refreshRateSeconds);
+  const patternAlert = getPatternAlert(results, refreshRateSeconds, lastRequestAtUnix);
 
   return (
     <Stack spacing={4} mb={8} border="solid 1px" borderColor="gray.700" borderRadius="md">
@@ -225,7 +235,7 @@ export const DeliveryPreviewPresentational = ({
             {isFetching && results.length === 0 ? (
               <DeliveryPreviewAccordionSkeleton />
             ) : (
-              <DeliveryPreviewAccordion results={results} />
+              <DeliveryPreviewAccordion results={results} lastRequestAtUnix={lastRequestAtUnix} />
             )}
             <Flex justifyContent="space-between" alignItems="center">
               <Text fontSize="sm" color="whiteAlpha.600">
@@ -266,6 +276,13 @@ export const DeliveryPreview = () => {
     feedId: userFeed.id,
   });
 
+  const { data: requestsData } = useUserFeedRequests({
+    feedId: userFeed.id,
+    data: { skip: 0, limit: 1 },
+  });
+
+  const lastRequestAtUnix = requestsData?.result.requests[0]?.createdAt;
+
   const activeConnections = userFeed.connections.filter((c) => !c.disabledCode);
   const hasNoConnections = activeConnections.length === 0;
   const isLoading = status === "loading";
@@ -288,7 +305,8 @@ export const DeliveryPreview = () => {
       hasNoConnections={hasNoConnections}
       feedState={feedState}
       feedId={userFeed.id}
-      refreshRateSeconds={userFeed.refreshRateSeconds}
+      refreshRateSeconds={getEffectiveRefreshRateSeconds(userFeed)}
+      lastRequestAtUnix={lastRequestAtUnix}
       addConnectionUrl={pages.userFeed(userFeed.id, { tab: UserFeedTabSearchParam.Connections })}
       lastCheckedFormatted={formatLastChecked()}
       onRefresh={refresh}

services/backend-api/client/src/features/feed/components/UserFeedsTable/components/FilteredEmptyState.tsx

@@ -1,11 +1,22 @@
-import { Button, Center, Heading, Stack, Text } from "@chakra-ui/react";
+import { Button, Center, Divider, Heading, Stack, Text } from "@chakra-ui/react";
 import { SearchIcon } from "@chakra-ui/icons";
 
+const URL_PATTERN = /^https?:\/\//;
+
 interface FilteredEmptyStateProps {
   onClearAllFilters: () => void;
+  searchTerm?: string;
+  onSearchForNewFeed?: (term: string) => void;
 }
 
-export const FilteredEmptyState: React.FC<FilteredEmptyStateProps> = ({ onClearAllFilters }) => {
+export const FilteredEmptyState: React.FC<FilteredEmptyStateProps> = ({
+  onClearAllFilters,
+  searchTerm,
+  onSearchForNewFeed,
+}) => {
+  const trimmedSearch = searchTerm?.trim();
+  const isUrl = trimmedSearch && URL_PATTERN.test(trimmedSearch);
+
   return (
     <Center py={16}>
       <Stack alignItems="center" spacing={4}>
@@ -21,6 +32,26 @@ export const FilteredEmptyState: React.FC<FilteredEmptyStateProps> = ({ onClearA
         <Button variant="outline" onClick={onClearAllFilters}>
           Clear all filters
         </Button>
+        {trimmedSearch && onSearchForNewFeed && (
+          <>
+            <Divider borderColor="whiteAlpha.300" />
+            <Stack alignItems="center" spacing={1}>
+              <Text fontSize="sm" color="whiteAlpha.700">
+                {isUrl
+                  ? "This looks like a feed URL."
+                  : "Can\u2019t find what you\u2019re looking for?"}
+              </Text>
+              <Button
+                variant="link"
+                colorScheme="blue"
+                size="sm"
+                onClick={() => onSearchForNewFeed(trimmedSearch)}
+              >
+                {isUrl ? "Add it as a new feed \u2192" : "Search for new feeds to add \u2192"}
+              </Button>
+            </Stack>
+          </>
+        )}
       </Stack>
     </Center>
   );

services/backend-api/client/src/features/feed/components/UserFeedsTable/index.tsx

@@ -1,5 +1,6 @@
 import { Alert, AlertIcon, Box, Center, Stack, Table, Td, Thead, Tr, Text } from "@chakra-ui/react";
 import React, { useCallback, useContext, useEffect, useMemo, useRef, useState } from "react";
+import { useSearchParams } from "react-router-dom";
 import {
   OnChangeFn,
   RowSelectionState,
@@ -80,6 +81,19 @@ export const UserFeedsTable: React.FC = () => {
     onSearchChange: useCallback((s: string) => setSearch(s), [setSearch]),
   });
 
+  const [, setSearchParams] = useSearchParams();
+
+  const handleSearchForNewFeed = useCallback(
+    (term: string) => {
+      setSearchParams((prev) => {
+        const next = new URLSearchParams(prev);
+        next.set("addFeed", term);
+        return next;
+      });
+    },
+    [setSearchParams],
+  );
+
   // Columns with search highlighting
   const columns = useMemo(() => createTableColumns(search), [search]);
 
@@ -246,7 +260,13 @@ export const UserFeedsTable: React.FC = () => {
           <Text>Loading feeds...</Text>
         </Stack>
       </Center>
-      {isFilteredEmpty && <FilteredEmptyState onClearAllFilters={handleClearAllFilters} />}
+      {isFilteredEmpty && (
+        <FilteredEmptyState
+          onClearAllFilters={handleClearAllFilters}
+          searchTerm={urlSearch}
+          onSearchForNewFeed={handleSearchForNewFeed}
+        />
+      )}
       <Stack hidden={isInitiallyLoading || isFilteredEmpty}>
         <Box
           boxShadow="lg"

services/backend-api/client/src/features/feedConnections/components/UserFeedMiscSettingsTabSection/index.tsx

@@ -75,6 +75,7 @@ import {
 } from "../../../../contexts/PageAlertContext";
 import { UserFeedTabSearchParam } from "../../../../constants/userFeedTabSearchParam";
 import ApiAdapterError from "../../../../utils/ApiAdapterError";
+import { getEffectiveRefreshRateSeconds } from "../../../../utils/formatRefreshRateSeconds";
 
 interface Props {
   feedId: string;
@@ -144,7 +145,7 @@ export const UserFeedMiscSettingsTabSection = ({ feedId }: Props) => {
       shareManageOptions: feed?.shareManageOptions || null,
       userRefreshRateMinutes:
         (
-          Number((feed?.userRefreshRateSeconds || feed?.refreshRateSeconds || 0).toFixed(1)) / 60
+          Number(getEffectiveRefreshRateSeconds(feed || { refreshRateSeconds: 0 }).toFixed(1)) / 60
         )?.toString() || "",
     },
   });
@@ -223,11 +224,9 @@ export const UserFeedMiscSettingsTabSection = ({ feedId }: Props) => {
         oldArticleDateDiffMsThreshold:
           updatedFeed.result.dateCheckOptions?.oldArticleDateDiffMsThreshold,
         shareManageOptions: updatedFeed.result.shareManageOptions || null,
-        userRefreshRateMinutes:
-          updatedFeed.result.userRefreshRateSeconds &&
-          !Number.isNaN(updatedFeed.result.userRefreshRateSeconds)
-            ? (updatedFeed.result.userRefreshRateSeconds / 60).toFixed(1)
-            : (updatedFeed.result.refreshRateSeconds / 60).toFixed(1),
+        userRefreshRateMinutes: (getEffectiveRefreshRateSeconds(updatedFeed.result) / 60).toFixed(
+          1,
+        ),
       });
       createSuccessAlert({
         title: "Successfully updated feed settings",