# Wave — پرامپت واحد ساخت وب‌اپ اجتماعی صوتی ## مأموریت و ق...

Prompt

# Wave — پرامپت واحد ساخت وب‌اپ اجتماعی صوتی ## مأموریت و قرارداد اجرا Wave شبکهٔ اجتماعی audio-first است: ضبط/آپلود کلیپ کوتاه، waveform، انتشار، feed، کشف، پخش پیوسته، تعامل و گفت‌وگو. وب‌اپ واقعی responsive، dark-first با light theme و PWA قابل‌نصب بساز؛ نه mockup، screenهای جدا، سرویس نمایشی یا backend جعلی. منبع جزئیات `C:\Users\K1\Desktop\Projects\Ideas\Ideas\Wave\Prompts`، فایل‌های 01–110؛ این متن قرارداد اجرایی فشردهٔ کل دامنه است. سیستم، کاربر و دستورهای repository مقدم‌اند. ابتدا `AGENTS.md`، کد/تست/DB/route موجود و invariants را بررسی کن؛ چیز درست را reuse، owner موجود را extend، API استاندارد را ترجیح بده، implementation کوچک را در مرز مسئول بساز و فقط برای رفع مانع مالکیت refactor کن. پیچیدگی کل مهم‌تر از تعداد فایل/خط؛ abstraction تک‌مصرف، feature حدسی و config برای مقدار ثابت نساز. ولی authorization، validation، RLS، accessibility، data safety، concurrency، recovery، rollback و تست لازم حذف نشوند. یک قرارداد canonical برای تفاوت‌های source انتخاب و migration/type mapping را در همان owner حل کن؛ بدون پرسش برای تصمیم‌های کم‌ریسک. artifact واقعی و کوچک‌ترین proof کافی را اجرا کن؛ stub/plan پایان کار نیست. ## استک و مرزها React 18، Vite 5، TypeScript 5.4+ strict، Tailwind 3.4/CSS variables، Framer Motion 11، Zustand 4، React Router v6 data router، Lucide React، native Web Audio/MediaRecorder، Supabase (PostgreSQL/Auth/Storage/Realtime/Edge Functions)، Vitest/Testing Library/MSW، Playwright، `@tanstack/react-virtual`، Workbox یا `vite-plugin-pwa`، Sentry، PostHog، GitHub Actions/Vercel و Node 20. فقط یک package manager/lockfile. Capacitor adapter اختیاری؛ هیچ native import مسیر web را نشکند. dependency جدید فقط برای طراحی درست یا هزینهٔ نگه‌داری کمتر. `src/app` router/guards/providers؛ `components` UI primitives/layout/feedback؛ `screens` route views؛ `engine` PlaybackEngine/RecordingEngine/WaveformExtractor بدون React/Zustand؛ `services` infrastructure بدون React/store؛ `stores` state/presentation بدون cross-store cycle؛ `hooks` glue؛ `lib` Supabase/env/realtime/offline/rate limit؛ `types` domain/generated DB؛ `theme/styles`؛ `supabase/migrations,functions,storage`؛ `tests/e2e`. Screens با hooks/stores تعامل کنند، components مستقیم DB نبینند؛ business authorization در DB/Edge، نه UI. DB snake_case به domain camelCase در service boundary map شود؛ generated types و migration یک truth. Zustand تنها owner UI coordination؛ optimistic mutation قبلی را snapshot و هنگام شکست rollback کند؛ cursor/hasMore/reset، concurrent request dedupe و cleanup صریح. فقط settings/theme/onboarding مناسب persistence؛ token، media Blob و secret نه. یک audio source فعال، singleton engine در سطح app، playback هنگام route change حفظ شود. ## ظاهر، navigation و کامل‌بودن صفحه‌ها هویت Wave: زمینهٔ نزدیک `#0a0a0f`، surfaceهای لایه‌ای، accent آبی/بنفش و waveform با pink/purple/teal؛ tokenهای CSS برای رنگ/فاصله/تایپوگرافی، نه hardcode پراکنده. mobile-first با bottom nav و sticky player، desktop top nav/sidebar؛ safe area، tap target، max width و modal/bottom-sheet با focus trap. dark/light/system، theme پیش از اولین paint برای حذف FOUC؛ animation سبک، `prefers-reduced-motion` معادل فوری. هر صفحه loading/skeleton، empty، error، retry و permission/429/offline state واقعی داشته باشد، بدون placeholder/TODO. Routes: `/` splash/auth resolution؛ `/login`, `/register`, `/auth/callback`, `/onboarding`, `/complete-profile`؛ `/home`, `/discover`, `/search`, `/record`, `/wave/:id`, `/u/:username`, `/profile`, `/edit-profile`, `/followers/:id`, `/comments/:id`, `/tag/:tag`, `/messages`, `/messages/:id`, `/notifications`, `/bookmarks`, `/settings`, `/report`, `/delete-account`. auth guard مقصد اولیه را نگه دارد؛ guest guard کاربر واردشده را `/home` ببرد؛ فقط بخش public مجاز بدون auth. lazy route؛ direct-refresh/SPA rewrite؛ legacy `/w/:id → /wave/:id`, `/t/:tag → /tag/:tag`, `/share?url=...`، `/u/:username` بدون تغییر. برای Wave public، OG/Twitter metadata و share preview واقعی server/edge-rendered، نه صرفاً JS client. Home feed `discover/trending/following` با cursor/infinite scroll و virtualization در فید بزرگ، WaveCard با avatar/verified/cover/title/caption/tags/waveform/duration/counts/play/seek/like/bookmark/share. Discover: trending waves/users/tags؛ search: people/waves/tags با debounce/rate limit و history قابل پاک‌کردن. Profile خود/دیگران با edit، followers/following، privacy و suggestions؛ tag follow/feed؛ comments/replies؛ bookmarks/collections؛ notifications unread/mark read/deep links؛ private conversations با text، Wave attachment، read state و reconnect؛ report/moderator؛ settings theme/notifications/privacy/blocked/muted/linked accounts/email/password/export/delete/sign out. OAuth callback و profile completion، onboarding interests. remix metadata و collab notification فقط وقتی source/flag فعال و contract کامل است؛ هیچ دکمهٔ بی‌اثر نگذار. ## صوت، ضبط و انتشار `PlaybackEngine` جدا از React: load/play/pause/stop/seek/volume/mute، duration/currentTime/buffered/error و subscription/cleanup؛ request identity یا AbortSignal برای race بارگذاری، autoplay denial و خراب‌بودن source با retry/error صریح. global player، queue/next/previous، mini/full view و keyboard shortcuts بیرون input؛ native autoplay policy. Waveform seeker click/drag/touch/keyboard و played/buffered/unplayed، range ARIA. شمارندهٔ play backend idempotent/session-safe. `WaveformExtractor` از `OfflineAudioContext` peaks نرمال می‌سازد، decode error typed و فایل بزرگ async؛ domain `waveformData` مستقل از تعداد bar یا عرض UI؛ renderer resample به viewport کند. `RecordingEngine`: `getUserMedia({ audio: true })`، permission denied، MIME fallback با `MediaRecorder.isTypeSupported`، AudioContext/Analyser، level meter و noise gate، pause/resume/stop/discard، cleanup track/chunk/objectURL/listener/RAF. سقف ضبط قطعی `180` ثانیه؛ timer، UI و تست یکسان. مسیر upload فایل audio موجود با MIME/size/duration واقعی، preview، peaks، title/caption/tags/visibility/cover، progress 0–100، cancel/retry و orphan cleanup. حداکثر 10 tag normalized. cover/avatar image جدا validate شوند. audio limit و storage quota را از یک قرارداد واحد در migration/server/client/test بگیر؛ sourceهای متناقض را در UI تکرار نکن. publish موفق فقط پس از upload/row commit معتبر؛ enrichment شکست‌خورده state روشن داشته باشد و اگر لازم نیست انتشار درست را بی‌دلیل rollback نکند. ## Supabase و امنیت Domain `User`, `Wave`, `WavePreview`, `Message`, `Notification`, `Comment`, `Follow`, `Bookmark`, `Collection`, `Tag`, `Conversation`, `PlaybackState`, `RecordingState` typed؛ Wave `id,user_id,title,caption,audio_url,cover_url,duration,peaks,tags,visibility,play_count,like_count,bookmark_count,comment_count,remix_of,created_at,published/deleted` با mapping واحد. schema: profiles، waves، follows، likes، plays، collections، bookmarks، comments، tags/tag_follows، notifications، conversations/messages، reports، push_subscriptions؛ unique/FK/check/index برای integrity و cursor. audio/avatars/covers storage buckets با MIME/size/ownership policy؛ private/followers audio با access server-enforced و signed URL کوتاه‌عمر، نه URL عمومی دائمی. Storage metadata و URL خودشان مجوز خواندن نیستند. RLS روی همهٔ جدول‌های حساس: public فقط طبق visibility و block/privacy؛ owner write فقط دادهٔ خودش؛ messages فقط participants؛ notification فقط recipient؛ report insert user/read+action moderator؛ service role فقط Edge Functions. username/title/caption/tags/file validate/normalize و محدودیت‌ها server-side؛ role/count client نامعتبر. follow/like/bookmark/play و countهای وابسته با RPC/transaction اتمیک، unique + dedupe/idempotency برای double click/race/replay. صف following با cursor و index؛ search trigram؛ trending view/query با refresh اندازه‌گیری‌شده. نام ستون/شمارنده در migrations، types و service یکی. conversation participant order canonical تا دو chat تکراری ساخته نشود. Edge Function فقط وقتی RLS/SQL کافی نیست: thumbnail، notification، follow یا account deletion طبق نیاز؛ JWT، input، status و secretها درست. Supabase Auth email/password و Google/Apple OAuth فقط در صورت configured؛ session refresh/expiry، callback و sign out با cleanup. هیچ service-role/password/token در browser/log/analytics/git. report abuse/ moderation backend-authorized و audited؛ rate limit server authoritative، client throttle فقط UX. export JSON دادهٔ خود کاربر؛ delete با confirmation واضح، حذف storage/data و در انتها Auth user با function امن و failure/retry قابل‌مشاهده؛ پاک‌سازی local/realtime/push پس از موفقیت، نه قبل از آن. migration additive با rollback و تست RLS برای owner، non-owner، follower، blocked، anonymous و moderator. ## realtime، offline و وب‌پلتفرم Realtime بعد از auth؛ channel محدود به user/conversation/wave، unsubscribe در logout/unmount؛ reconnect/backoff + fetch gap، event-ID dedupe و reconcile با optimistic state، بدون double count. offline از request failure هم تشخیص داده شود، نه فقط `navigator.onLine`؛ banner live، shell و audio cache محدود/versioned، صفحهٔ offline و safe service-worker update. فقط mutation replay-safe مانند like/bookmark/follow/comment با stable ID، ترتیب، TTL، bounded retry/backoff و auth revalidation در queue؛ duplicate، stale permission و conflict بررسی شوند. audio Blob بزرگ در localStorage ممنوع؛ upload cancel/recovery به کاربر نشان بده. `ApiError` typed برای 401/403/404/409/422/429/timeout/network، ErrorBoundary/Suspense، safe auth redirect؛ 429 با countdown و RateLimitScreen اما server limit دور زده نشود. PWA manifest/icons، install، push فقط بعد از permission و VAPID معتبر، Web Share با clipboard fallback، share-target، deep links، safe-area و responsive؛ asset cache bounded و logout پاک‌سازی خصوصی. Sentry برای exception، PostHog برای event/flags فقط با consent/privacy و بدون محتوا/PII صوتی؛ missing keys no-op؛ flag default امن، auth/permission/schema را تغییر ندهد. CDN/OG متناسب با visibility؛ private content در crawler/preview لو نرود. ## دسترس‌پذیری، سرعت و آزمون پذیرش WCAG 2.1 AA: semantic HTML، keyboard کامل، visible focus، trap/restore و Escape برای overlay، label/ARIA برای play/like/follow، `role="slider"` برای seeker، `role="meter"` برای input level، live region برای toast/upload/offline، no-color-only، alt، contrast در هر دو theme، reduced motion و safe touch target. shortcutها هنگام تایپ غیرفعال. Live update باعث جابه‌جایی focus نشود. Lazy routes/assets؛ virtualization فقط برای لیست بزرگ، waveform SVG/canvas سبک، progress update throttled، audio engine بیرون render loop، cover size/lazy loading؛ mobile slow CPU/network و memory بررسی؛ Lighthouse و bundle با evidence واقعی، نه عدد حدسی. قابلیت auth→publish→play→social→conversation→notification→privacy/account باید end-to-end کامل باشد. ترتیب اجرا: inspect/contract → foundation/router/theme → audio engines/record/player → Supabase schema/RLS/storage/RPC/types → services/stores/screens → realtime/offline/PWA/sharing → moderation/account → tests/CI/deploy. هر گام artifact runnable و test دارد؛ نسخهٔ بدون credential فقط local development adapter با برچسب `BLOCKED` برای backend، نه ادعای production. Test: auth+OAuth callback، record/upload fixture→waveform→publish→feed/profile، play/seek/queue، user B follow/like/comment→notification، search/tag/collection، chat text+attachment/reconnect، offline replay/conflict، 429/countdown، permission denial/autoplay، RLS cross-user/visibility/block، report/moderator، export→delete→logout، deep-link refresh/OG، keyboard/mobile/a11y. `pnpm typecheck`, `pnpm lint`, `pnpm test:run`, `pnpm build`, `pnpm e2e` با package manager واقعی؛ CI و migration/deploy/rollback README. تست و build را واقعاً اجرا و نتیجه/تعداد دقیق را گزارش کن؛ mock فقط برای توسعه، نه اثبات backend واقعی. خارج از V1: live streaming، recommendation ML، payment، public API پیچیده، multi-region، native-only، backend تازه در کنار Supabase، سرویس/رابط بدون owner. گزارش فقط تغییرات مهم، proof اجراشده، risk و omission مادی؛ تا تکمیل یا blocker واقعی ادامه بده.

A system prompt was added to support web rendering