در صفحه FeedPage یک refactor فنی و دقیق انجام بده، اما به هیچ عنوان ساختار APIها، نام endpointها، شکل responseها، نام فیلدهای دریافتی از backend، و contract فعلی بین frontend و backend را تغییر نده.
یعنی تمام تغییرات فقط در لایه frontend، state management، rendering structure، data mapping، UI behavior و component architecture انجام شود و API integration فعلی دست‌نخورده بماند.

هدف

این صفحه باید برای هر topic / subject به‌صورت پایدار، دقیق، قابل نگهداری و scalable کار کند.
رفتار صفحه باید متناسب با هر موضوع (topicId) درست باشد، بدون bug در rendering، pagination، loading، empty state و media mapping.

الزامات اصلی
1) Rule of Hooks را کامل رعایت کن

در نسخه فعلی احتمال نقض Rule of Hooks وجود دارد چون قبل از اجرای همه hookها شرط بازگشت وجود دارد.
ساختار را طوری اصلاح کن که:

همه hookها همیشه در ترتیب ثابت اجرا شوند
هیچ early return قبل از hookها وجود نداشته باشد
اگر topic نامعتبر بود، بعد از تعریف hookها fallback UI نمایش داده شود
2) منطق data fetching را از UI جدا کن

منطق fetch، pagination، loading، error handling و delete handling را از خود FeedPage خارج کن و در یک hook اختصاصی مثل این مدیریت کن:

useTopicFeed(topic)
یا ساختاری معادل آن

این hook باید این موارد را مدیریت کند:

initial fetch
refetch هنگام تغییر topic
pagination
loading اولیه
loading برای صفحات بعد
hasMore
error state
حذف یک پست از لیست
جلوگیری از state corruption هنگام تغییر سریع topic
3) Race condition در fetch و pagination را برطرف کن

نسخه فعلی مستعد race condition است.
این موارد باید اصلاح شوند:

اگر کاربر سریع بین topicها جابه‌جا شد، پاسخ request قدیمی نباید state موضوع جدید را overwrite کند
اگر scroll چند بار سریع trigger شد، یک page نباید چند بار fetch شود
duplicate append در pagination نباید اتفاق بیفتد
برای request lifecycle از guard مناسب استفاده کن:
request id
abort/cancel strategy
یا ref-based fetch lock
4) loading stateها را تفکیک کن

یک loading کلی کافی نیست. این stateها را جدا کن:

initialLoading
loadingMore
error

رفتار درست باید این باشد:

هنگام load اولیه فقط skeleton/spinner اولیه نمایش داده شود
هنگام pagination فقط loader پایین لیست نمایش داده شود
empty state فقط زمانی نمایش داده شود که:
loading اولیه false باشد
خطا وجود نداشته باشد
واقعاً آیتمی در feed نباشد
5) empty state اشتباه را اصلاح کن

در نسخه فعلی ممکن است قبل از پایان fetch، empty state نمایش داده شود.
این رفتار را اصلاح کن تا پیام «هنوز پستی وجود ندارد» فقط در حالت واقعی empty feed نمایش داده شود.

6) mapping داده سرور به مدل UI را از صفحه جدا کن

تابع تبدیل FeedItem به props مربوط به PostCard را از FeedPage خارج کن و به یک mapper مستقل منتقل کن.
مثلاً:

mapFeedItemToPostCardModel
یا ساختاری معادل آن

این mapper باید:

فقط مسئول تبدیل مدل API به مدل UI باشد
هیچ rendering logic نداشته باشد
media type را دقیق تشخیص دهد
cover image، mediaUrl، workflow id و ownership را درست نگه دارد
بدون تغییر در ساختار API کار کند
7) دقت media mapping را بالا ببر

برای هر feed item تشخیص media باید دقیق و deterministic باشد:

قوانین:
اگر film وجود دارد:
mediaType = "video"
mediaUrl = getVideoUrl(StageID)
اگر image وجود داشت، به عنوان cover استفاده شود
اگر audio وجود دارد:
mediaType = "audio"
mediaUrl = getAudioUrl(StageID)
اگر image وجود داشت، cover باشد
اگر فقط image وجود دارد:
mediaType = "image"
image نمایش داده شود
اگر هیچ mediaای وجود ندارد:
UI نباید break شود
fallback امن داشته باشد

همچنین بررسی null/undefined/empty string باید robust باشد و فقط به .trim() ساده متکی نباشد مگر type-safe شده باشد.

8) topic handling را دقیق‌تر و scalable کن

صفحه Feed باید برای هر موضوع (topicId) با دقت بیشتر رفتار کند.
ساختار topic config را از فایل صفحه جدا کن و به config/domain layer منتقل کن.

الزامات:

topicConfig بیرون از page باشد
access به topic با helper امن انجام شود
اگر topic معتبر نبود، fallback واضح و پایدار نمایش داده شود
داده‌های theme و identity هر topic مثل title، serverName، accentColor و feed behavior قابل استفاده باقی بمانند
rendering صفحه و fetch logic متناسب با هر topic درست کار کند
9) component structure را تمیز و ماژولار کن

FeedPage بیش از حد چندمسئولیتی است. آن را به چند بخش واضح تقسیم کن.
حداقل این تفکیک را انجام بده:

FeedPage → orchestration only
FeedHeader
FeedList
FeedEmptyState
FeedFloatingAction
FeedBackground
useTopicFeed
feed mapper
topic config

خود FeedPage فقط باید:

topic را resolve کند
hook را صدا بزند
بخش‌های UI را compose کند
10) decorative rendering را پایدار کن

المان‌های تزئینی مثل star background نباید در هر render دوباره با Math.random() ساخته شوند.
رفتار فعلی باعث جابه‌جایی تصادفی UI در هر state update می‌شود.

اصلاح کن:

داده‌های ستاره‌ها فقط یک‌بار تولید شوند
با useMemo یا state اولیه پایدار شوند
در هر rerender visual jump اتفاق نیفتد
11) performance rendering را بهتر کن

این بهینه‌سازی‌ها اعمال شود:

محاسبه postCards memoized شود
animation delay برای لیست‌های بزرگ معقول شود و با index خیلی زیاد نشود
از rerenderهای غیرضروری جلوگیری شود
اگر لازم بود handlerها stable باقی بمانند
12) scroll/pagination behavior را production-grade کن

به‌جای رفتار شکننده فعلی، منطق load more را دقیق‌تر کن:

فقط یک بار برای هر page درخواست ارسال شود
threshold اسکرول منطقی باشد
وقتی hasMore = false است هیچ request اضافه‌ای نرود
اگر backend page خالی برگرداند، pagination متوقف شود
در صورت امکان duplicate itemها بر اساس StageID حذف شوند
13) error handling را کامل کن

اگر loadFeeds() fail یا throw کرد:

صفحه crash نکند
خطای مناسب نمایش داده شود
state در وضعیت ناسالم نماند
loading در finally درست reset شود
14) data correctness را بالا ببر

این موارد را بررسی و اصلاح کن:

topicName نباید به‌اشتباه از item.title گرفته شود اگر در واقع باید نام topic باشد
authorUsername نباید با full_name پر شود مگر واقعاً username همین باشد
timestamp نباید hardcoded باشد مگر موقت و با fallback کنترل‌شده
workflowID و missionType همان contract قبلی را حفظ کنند
هیچ field مورد نیاز PostCard گم یا اشتباه map نشود
15) inline styleهای شلوغ را تا حد ممکن تمیز کن

بدون تغییر ظاهر فعلی، JSX را تمیزتر کن:

styleهای تکراری را استخراج کن
selectorهای شکننده را حذف کن
برای بخش scroll class اختصاصی تعریف کن
ساختار styleها maintainable شود
محدودیت بسیار مهم

ساختار APIها را تغییر نده.
این یعنی:

نام سرویس‌ها مثل loadFeeds, getAvatarUrl, getFeedImageUrl, getVideoUrl, getAudioUrl, isOwnFeed حفظ شود مگر فقط در لایه wrapping
فیلدهای response مثل StageID, film, audio, image, workflow_ID, user_id, full_name تغییر نکنند
endpointها، request params و response schema دست‌نخورده بمانند
فقط frontend architecture و page behavior اصلاح شود
خروجی مورد انتظار

خروجی باید شامل این‌ها باشد:

نسخه refactor شده FeedPage
hook جدا برای feed logic
mapper جدا برای تبدیل داده
topic config جداشده
component structure ماژولارتر
رفع bugهای hook order، race condition، empty state، loading state، pagination
حفظ کامل ظاهر فعلی تا جای ممکن
حفظ کامل contract فعلی با API
اولویت‌ها

اولویت اجرای تغییرات به این ترتیب باشد:

پایداری فنی
حفظ contract API
درستی behavior برای هر topic
ساختار maintainable
performance
تمیز شدن کد بدون تغییر غیرضروری در UI