refactor: enhance announcement dialog logic and improve load more functionality

Author: chenyme

frontend/features/announcements/components/announcement-dialog-host.tsx

@@ -20,10 +20,12 @@ import { closeAnnouncement, dismissAnnouncementToday, listAnnouncements } from "
 import type { AnnouncementDTO } from "@/shared/api/announcements.types";
 import { useAuthSession } from "@/shared/auth/auth-session-context";
 import { dispatchAnnouncementUnreadChanged, subscribeOpenAnnouncements } from "@/shared/events/announcement-events";
+import { useDialogSnapshot } from "@/shared/hooks/use-dialog-snapshot";
 import { cn } from "@/lib/utils";
 
 type AnnouncementSortMode = "default" | "type" | "time";
 type AnnouncementDialogMode = "auto" | "manual";
+type AnnouncementType = "critical" | "warning" | "info" | "normal" | "general";
 
 function isSkippedPath(pathname: string | null): boolean {
   if (!pathname) {
@@ -56,7 +58,11 @@ function formatAnnouncementTime(value: string, locale: string): string {
   }).format(date);
 }
 
-function normalizeAnnouncementType(value: string): "critical" | "warning" | "info" | "normal" | "general" {
+function isAnnouncementSortMode(value: string): value is AnnouncementSortMode {
+  return value === "default" || value === "type" || value === "time";
+}
+
+function normalizeAnnouncementType(value: string): AnnouncementType {
   switch (value) {
     case "critical":
     case "warning":
@@ -112,6 +118,14 @@ function compareReadState(a: AnnouncementDTO, b: AnnouncementDTO): number {
   return Number(isAnnouncementRead(a)) - Number(isAnnouncementRead(b));
 }
 
+function compareAnnouncementByTime(a: AnnouncementDTO, b: AnnouncementDTO): number {
+  return announcementTime(b.updatedAt) - announcementTime(a.updatedAt) || b.id - a.id;
+}
+
+function compareAnnouncementByType(a: AnnouncementDTO, b: AnnouncementDTO): number {
+  return announcementTypeRank(b.type) - announcementTypeRank(a.type) || compareAnnouncementByTime(a, b);
+}
+
 export function AnnouncementDialogHost() {
   const t = useTranslations("announcements");
   const locale = useLocale();
@@ -215,10 +229,10 @@ export function AnnouncementDialogHost() {
   const queue = dialogMode === "manual" ? manualQueue : autoQueue;
   const sortedQueue = React.useMemo(() => {
     if (sortMode === "time") {
-      return [...queue].sort((a, b) => compareReadState(a, b) || announcementTime(b.updatedAt) - announcementTime(a.updatedAt) || b.id - a.id);
+      return [...queue].sort((a, b) => compareReadState(a, b) || compareAnnouncementByTime(a, b));
     }
     if (sortMode === "type") {
-      return [...queue].sort((a, b) => compareReadState(a, b) || announcementTypeRank(b.type) - announcementTypeRank(a.type) || announcementTime(b.updatedAt) - announcementTime(a.updatedAt) || b.id - a.id);
+      return [...queue].sort((a, b) => compareReadState(a, b) || compareAnnouncementByType(a, b));
     }
     return queue;
   }, [queue, sortMode]);
@@ -233,7 +247,11 @@ export function AnnouncementDialogHost() {
   }, [hasUnread]);
 
   const open = manualOpen || autoOpen;
-  const active = sortedQueue[Math.min(activeIndex, Math.max(sortedQueue.length - 1, 0))] ?? null;
+  const renderMode = useDialogSnapshot(open ? dialogMode : null) ?? dialogMode;
+  const renderQueue = useDialogSnapshot(open ? sortedQueue : null) ?? sortedQueue;
+  const renderActiveIndex = useDialogSnapshot(open ? activeIndex : null) ?? activeIndex;
+  const renderManualLoading = useDialogSnapshot(open ? manualLoading : null) ?? manualLoading;
+  const active = renderQueue[Math.min(renderActiveIndex, Math.max(renderQueue.length - 1, 0))] ?? null;
   const unreadQueue = React.useMemo(() => queue.filter((item) => !isAnnouncementRead(item)), [queue]);
 
   const closeDialog = React.useCallback(() => {
@@ -255,6 +273,23 @@ export function AnnouncementDialogHost() {
     setActiveIndex(0);
   }, []);
 
+  const handleOpenChange = React.useCallback((nextOpen: boolean) => {
+    if (nextOpen) {
+      return;
+    }
+    if (manualOpen) {
+      closeManualDialog();
+      return;
+    }
+    hideAutoDialog();
+  }, [closeManualDialog, hideAutoDialog, manualOpen]);
+
+  const handleSortModeChange = React.useCallback((value: string) => {
+    if (isAnnouncementSortMode(value)) {
+      setSortMode(value);
+    }
+  }, []);
+
   const dismissAllToday = React.useCallback(async () => {
     if (!accessToken || stateSaving) {
       return;
@@ -286,40 +321,32 @@ export function AnnouncementDialogHost() {
   }, [accessToken, closeDialog, stateSaving, t, unreadQueue]);
 
   return (
-    <Dialog open={open} onOpenChange={(nextOpen) => {
-      if (!nextOpen) {
-        if (manualOpen) {
-          closeManualDialog();
-        } else {
-          hideAutoDialog();
-        }
-      }
-    }}>
-      <DialogContent className="flex max-h-[min(84svh,720px)] flex-col overflow-hidden sm:max-w-[760px]">
+    <Dialog open={open} onOpenChange={handleOpenChange}>
+      <DialogContent className="flex max-h-[min(84svh,720px)] min-w-0 flex-col overflow-hidden p-4 sm:max-w-[760px] sm:p-5">
         <DialogHeader className="shrink-0">
           <div className="min-w-0">
             <DialogTitle className="truncate">{t("title")}</DialogTitle>
           </div>
         </DialogHeader>
-        <div className="grid h-[27rem] max-h-[calc(100svh-11rem)] min-h-0 grid-rows-[auto_minmax(0,1fr)] gap-0 overflow-hidden md:grid-cols-[13rem_minmax(0,1fr)] md:grid-rows-1">
-          <div className="flex min-h-0 flex-col border-b border-border/60 md:border-b-0 md:border-r">
-            <Tabs value={sortMode} onValueChange={(value) => setSortMode(value as AnnouncementSortMode)} className="shrink-0 px-2 pt-2 pb-1">
+        <div className="grid h-[27rem] max-h-[calc(100svh-11rem)] min-h-0 min-w-0 grid-rows-[auto_minmax(0,1fr)] gap-0 overflow-hidden md:grid-cols-[13rem_minmax(0,1fr)] md:grid-rows-1">
+          <div className="flex min-h-0 min-w-0 flex-col border-b border-border/60 md:border-b-0 md:border-r">
+            <Tabs value={sortMode} onValueChange={handleSortModeChange} className="min-w-0 shrink-0 px-2 pt-2 pb-1">
               <TabsList className="grid h-7 w-full grid-cols-3">
                 <TabsTrigger value="default" className="px-1.5">{t("sort.default")}</TabsTrigger>
                 <TabsTrigger value="type" className="px-1.5">{t("sort.type")}</TabsTrigger>
                 <TabsTrigger value="time" className="px-1.5">{t("sort.time")}</TabsTrigger>
               </TabsList>
             </Tabs>
-            <div className="flex gap-2 overflow-x-auto px-2 py-2 md:block md:min-h-0 md:flex-1 md:space-y-0.5 md:overflow-y-auto">
-              {sortedQueue.length > 0 ? sortedQueue.map((item, index) => (
+            <div className="flex min-w-0 gap-2 overflow-x-auto px-2 py-2 md:block md:min-h-0 md:flex-1 md:space-y-0.5 md:overflow-y-auto">
+              {renderQueue.length > 0 ? renderQueue.map((item, index) => (
                 <button
                   key={`${item.id}:${item.updatedAt}`}
                   type="button"
                   className={cn(
                     "relative min-w-36 rounded-md py-1 pl-3.5 pr-8 text-left text-xs transition-colors before:absolute before:left-1.5 before:top-2 before:bottom-2 before:w-0.5 before:rounded-full md:h-[3.125rem] md:w-full",
                     announcementTypeAccentClassName(item.type),
                     isAnnouncementRead(item) && "opacity-55",
-                    index === activeIndex
+                    index === renderActiveIndex
                       ? "bg-muted text-foreground"
                       : "text-muted-foreground hover:bg-muted/60 hover:text-foreground",
                   )}
@@ -336,29 +363,38 @@ export function AnnouncementDialogHost() {
                 </button>
               )) : (
                 <div className="flex h-full min-h-24 items-center justify-center px-3 py-6 text-center text-xs text-muted-foreground">
-                  {manualLoading ? t("loading") : t("empty")}
+                  {renderManualLoading ? t("loading") : t("empty")}
                 </div>
               )}
             </div>
           </div>
-          <div className="min-h-0 overflow-y-auto px-4 py-3">
+          <div className="min-h-0 min-w-0 overflow-y-auto overflow-x-hidden px-3 py-3 sm:px-4">
             {active ? (
               <>
                 <div className="mb-2 flex min-w-0 items-center justify-between gap-3 text-xs text-muted-foreground">
                   <span className="min-w-0 truncate">{active.title}</span>
                   <span className="shrink-0 tabular-nums">{formatAnnouncementTime(active.updatedAt, locale)}</span>
                 </div>
-                <StreamdownRender content={active.contentMarkdown} className="text-sm" />
+                <StreamdownRender
+                  content={active.contentMarkdown}
+                  className={cn(
+                    "max-w-full text-sm leading-7",
+                    "[&_h1]:text-base [&_h1]:leading-7",
+                    "[&_h2]:text-base [&_h2]:leading-7",
+                    "[&_h3]:text-sm [&_h3]:leading-6",
+                    "[&_li]:leading-7",
+                  )}
+                />
               </>
             ) : (
               <div className="flex min-h-full items-center justify-center text-center text-sm text-muted-foreground">
-                {manualLoading ? t("loading") : t("empty")}
+                {renderManualLoading ? t("loading") : t("empty")}
               </div>
             )}
           </div>
         </div>
         <DialogFooter className="shrink-0">
-          {dialogMode === "manual" ? (
+          {renderMode === "manual" ? (
             <Button type="button" onClick={() => unreadQueue.length > 0 ? void closeAll() : closeManualDialog()} disabled={stateSaving}>
               {t("close")}
             </Button>

frontend/features/files/components/sections/sidebar/sidebar-list.tsx

@@ -218,14 +218,12 @@ export function SidebarList({
 }: SidebarListProps) {
   const t = useTranslations("files");
   const scrollAreaRef = React.useRef<HTMLDivElement | null>(null);
-  const loadMoreRef = React.useRef<HTMLDivElement | null>(null);
   const selectedFileIDSet = React.useMemo(() => new Set(selectedFileIDs), [selectedFileIDs]);
 
-  useLoadMoreSentinel({
+  const loadMoreRef = useLoadMoreSentinel<HTMLDivElement>({
     enabled: hasMore && !loading && !loadingMore,
     rootMargin: "0px 0px 200px 0px",
     rootRef: scrollAreaRef,
-    targetRef: loadMoreRef,
     onLoadMore,
   });
 

frontend/features/layouts/components/navigation/nav-main-item.tsx

@@ -66,7 +66,7 @@ export function NavMainItem({
   const itemClassName = cn(
     "group/item h-8 gap-0 rounded-md px-0 text-left text-sm font-normal text-sidebar-foreground transition-colors focus-visible:ring-2 focus-visible:ring-sidebar-ring",
     isCollapsed
-      ? "w-8 justify-center hover:bg-transparent hover:text-current"
+      ? "w-8 justify-center hover:bg-sidebar-accent hover:text-sidebar-accent-foreground"
       : "w-full justify-start hover:bg-sidebar-accent hover:text-sidebar-accent-foreground",
   );
 

frontend/features/layouts/components/navigation/nav-recents.tsx

@@ -88,7 +88,6 @@ export function NavRecents() {
   const [renameValue, setRenameValue] = React.useState("");
   const [autoRenamingPublicID, setAutoRenamingPublicID] = React.useState<string | null>(null);
   const [recentsOpen, setRecentsOpen] = useStoredBoolean(RECENTS_OPEN_STORAGE_KEY, true);
-  const loadMoreRef = React.useRef<HTMLLIElement | null>(null);
   const listContainerRef = React.useRef<HTMLDivElement | null>(null);
   const deleteFilesID = React.useId();
   const stableDeleteTarget = useDialogSnapshot(deleteTarget);
@@ -99,9 +98,8 @@ export function NavRecents() {
     failureMessage: t("exportFailed"),
   });
 
-  useLoadMoreSentinel({
+  const loadMoreRef = useLoadMoreSentinel<HTMLLIElement>({
     enabled: recentsOpen && hasMore && !loadingInitial && !loadingMore && !loadMoreFailed,
-    targetRef: loadMoreRef,
     onLoadMore: loadMore,
   });
 

frontend/features/layouts/components/sections/project-layout.tsx

@@ -86,7 +86,7 @@ export function ProjectLayout({
       <AnnouncementDialogHost />
       <SidebarProvider className="h-svh overflow-hidden" defaultOpen={defaultSidebarOpen}>
         <SidebarConversationsProvider
-          bulkPendingTitle={tRecent("labelMenu.bulk.pending")}
+          bulkPendingTitle={tRecent("dialogs.bulk.pending")}
           newConversationTitle={tRecent("newChat")}
         >
           <ChatSessionProvider>

frontend/features/prompts/hooks/use-skills-prompt-page.ts

@@ -157,7 +157,6 @@ export function useSkillsPromptPage() {
   const [deleteTarget, setDeleteTarget] = React.useState<PromptPresetDTO | null>(null);
   const [query, setQuery] = React.useState("");
   const [debouncedQuery, setDebouncedQuery] = React.useState("");
-  const loadMoreRef = React.useRef<HTMLDivElement | null>(null);
   const loadingMoreRef = React.useRef(false);
   const loadMoreFailedRef = React.useRef(false);
 
@@ -269,9 +268,8 @@ export function useSkillsPromptPage() {
     }
   }, [fetchPage, hasMore, loading, pagination, resolveErrorMessage, t]);
 
-  useLoadMoreSentinel({
+  const loadMoreRef = useLoadMoreSentinel<HTMLDivElement>({
     enabled: hasMore && !loading && !loadingMore && !loadMoreFailed,
-    targetRef: loadMoreRef,
     rootMargin: "160px",
     onLoadMore: loadMore,
   });

frontend/features/recent/components/sections/recent-list.tsx

@@ -320,7 +320,7 @@ type RecentListProps = {
   shareFilter: ConversationShareFilter;
   rowStates: RecentRowState[];
   isSelectionMode: boolean;
-  loadMoreRef: React.RefObject<HTMLDivElement | null>;
+  loadMoreRef: React.RefCallback<HTMLDivElement>;
   hasMore: boolean;
   loadMoreFailed: boolean;
   loadingMore: boolean;

frontend/features/recent/hooks/use-recent-page.ts

@@ -135,7 +135,6 @@ export function useRecentPage() {
   const { deleteFilesByDefault } = useSettingsChatPreferences();
   const [shareTarget, setShareTarget] = React.useState<ConversationDTO | null>(null);
   const [exportingAll, setExportingAll] = React.useState(false);
-  const loadMoreRef = React.useRef<HTMLDivElement | null>(null);
   const pageRef = React.useRef(1);
   const requestVersionRef = React.useRef(0);
   const loadingMoreRef = React.useRef(false);
@@ -299,9 +298,8 @@ export function useRecentPage() {
     }
   }, [hasMore, loadPage, loadingInitial, resolveErrorMessage, t]);
 
-  useLoadMoreSentinel({
+  const loadMoreRef = useLoadMoreSentinel<HTMLDivElement>({
     enabled: hasMore && !loadingInitial && !loadingMore && !loadMoreFailed,
-    targetRef: loadMoreRef,
     rootMargin: "160px",
     onLoadMore: loadMore,
   });
@@ -546,7 +544,7 @@ export function useRecentPage() {
     await runBulkActionInChunks({
       chunkSize: 10,
       items: deleteTarget.ids,
-      title: t("labelMenu.bulk.pending"),
+      title: t("dialogs.bulk.pending"),
       runChunk: async (ids) => {
         for (const id of ids) {
           await deleteByPublicID(id, deleteFiles ? { deleteFiles: true } : undefined);
@@ -618,7 +616,7 @@ export function useRecentPage() {
     const updates = (await runBulkActionInChunks({
       chunkSize: 10,
       items: targets,
-      title: t("labelMenu.bulk.pending"),
+      title: t("dialogs.bulk.pending"),
       runChunk: async (chunk) => {
         const updatedItems: Array<ConversationDTO | null> = [];
         for (const item of chunk) {
@@ -661,7 +659,7 @@ export function useRecentPage() {
     const ids = selectedSharedItems.map((item) => item.publicID);
     await runBulkActionInChunks({
       items: ids,
-      title: t("labelMenu.bulk.pending"),
+      title: t("dialogs.bulk.pending"),
       runChunk: (conversationPublicIDs) => revokeConversationShares(token, { conversationPublicIDs }),
     });
     const patch: Partial<ConversationDTO> = {

frontend/shared/hooks/use-load-more-sentinel.ts

@@ -6,7 +6,6 @@ type UseLoadMoreSentinelOptions = {
   enabled: boolean;
   rootMargin?: string;
   rootRef?: React.RefObject<HTMLElement | null>;
-  targetRef: React.RefObject<Element | null>;
   onLoadMore: () => void | Promise<void>;
 };
 
@@ -20,14 +19,17 @@ function rootMarginToPixels(rootMargin: string): number {
   return Number(match[1]) || 0;
 }
 
-export function useLoadMoreSentinel({
+export function useLoadMoreSentinel<T extends Element = HTMLElement>({
   enabled,
   rootMargin = "120px",
   rootRef,
-  targetRef,
   onLoadMore,
-}: UseLoadMoreSentinelOptions) {
+}: UseLoadMoreSentinelOptions): React.RefCallback<T> {
+  const [target, setTarget] = React.useState<T | null>(null);
   const onLoadMoreRef = React.useRef(onLoadMore);
+  const targetRef = React.useCallback((node: T | null) => {
+    setTarget(node);
+  }, []);
 
   React.useEffect(() => {
     onLoadMoreRef.current = onLoadMore;
@@ -38,7 +40,6 @@ export function useLoadMoreSentinel({
       return;
     }
 
-    const target = targetRef.current;
     if (!target) {
       return;
     }
@@ -103,5 +104,7 @@ export function useLoadMoreSentinel({
         window.cancelAnimationFrame(animationFrame);
       }
     };
-  }, [enabled, rootMargin, rootRef, targetRef]);
+  }, [enabled, rootMargin, rootRef, target]);
+
+  return targetRef;
 }