diff --git a/components/compose/compose-modal.tsx b/components/compose/compose-modal.tsx index aa7c8f09..a3273c4c 100644 --- a/components/compose/compose-modal.tsx +++ b/components/compose/compose-modal.tsx @@ -8,6 +8,8 @@ import { TrashIcon, EyeIcon, EyeSlashIcon, + GlobeAltIcon, + ChevronDownIcon, } from '@heroicons/react/24/outline' import { useAppStore, ThreadPost } from '@/lib/store' import { Button } from '@/components/ui/button' @@ -38,6 +40,99 @@ import { const CHARACTER_LIMIT = 500 +// Supported languages for post creation (ISO 639-1 codes) +const SUPPORTED_LANGUAGES = [ + { code: 'en', name: 'English' }, + { code: 'es', name: 'Spanish' }, + { code: 'pt', name: 'Portuguese' }, + { code: 'fr', name: 'French' }, + { code: 'de', name: 'German' }, + { code: 'it', name: 'Italian' }, + { code: 'nl', name: 'Dutch' }, + { code: 'ru', name: 'Russian' }, + { code: 'zh', name: 'Chinese' }, + { code: 'ja', name: 'Japanese' }, + { code: 'ko', name: 'Korean' }, + { code: 'ar', name: 'Arabic' }, + { code: 'hi', name: 'Hindi' }, + { code: 'tr', name: 'Turkish' }, + { code: 'pl', name: 'Polish' }, + { code: 'uk', name: 'Ukrainian' }, + { code: 'vi', name: 'Vietnamese' }, + { code: 'th', name: 'Thai' }, + { code: 'id', name: 'Indonesian' }, + { code: 'sv', name: 'Swedish' }, +] as const + +// Language selector component +function LanguageSelector({ + value, + onChange, + disabled = false, +}: { + value: string + onChange: (code: string) => void + disabled?: boolean +}) { + const [isOpen, setIsOpen] = useState(false) + const dropdownRef = useRef(null) + + // Close dropdown when clicking outside + useEffect(() => { + function handleClickOutside(event: MouseEvent) { + if (dropdownRef.current && !dropdownRef.current.contains(event.target as Node)) { + setIsOpen(false) + } + } + document.addEventListener('mousedown', handleClickOutside) + return () => document.removeEventListener('mousedown', handleClickOutside) + }, []) + + const selectedLanguage = SUPPORTED_LANGUAGES.find(l => l.code === value) || SUPPORTED_LANGUAGES[0] + + return ( +
+ + + {isOpen && ( +
+ {SUPPORTED_LANGUAGES.map((lang) => ( + + ))} +
+ )} +
+ ) +} + // Formatting button component function FormatButton({ onClick, @@ -438,6 +533,7 @@ export function ComposeModal() { const [isPosting, setIsPosting] = useState(false) const [postingProgress, setPostingProgress] = useState(null) const [showPreview, setShowPreview] = useState(false) + const [postLanguage, setPostLanguage] = useState('en') const firstTextareaRef = useRef(null) // Focus first textarea when modal opens @@ -513,6 +609,7 @@ export function ComposeModal() { return await dashClient.createPost(postContent, { replyToPostId: previousPostId || undefined, quotedPostId: i === 0 ? quotingPost?.id : undefined, + language: postLanguage, }) }) @@ -740,6 +837,7 @@ export function ComposeModal() { resetThreadPosts() setShowPreview(false) setPostingProgress(null) + setPostLanguage('en') } const handleKeyDown = (e: React.KeyboardEvent) => { @@ -894,9 +992,14 @@ export function ComposeModal() { - {/* Footer - minimal with keyboard hint */} + {/* Footer - language selector and keyboard hint */}
-
+
+ {threadPosts.length > 1 ? `${totalCharacters} total chars · ${isMac ? '⌘' : 'Ctrl'}+Enter to post` diff --git a/lib/dash-platform-client.ts b/lib/dash-platform-client.ts index 9be43f5e..0bd9c828 100644 --- a/lib/dash-platform-client.ts +++ b/lib/dash-platform-client.ts @@ -70,6 +70,7 @@ export class DashPlatformClient { quotedPostId?: string mediaUrl?: string primaryHashtag?: string + language?: string }) { // Get identity ID from instance or auth context let identityId = this.identityId @@ -150,8 +151,8 @@ export class DashPlatformClient { postData.primaryHashtag = options.primaryHashtag.replace('#', '') } - // Add language (defaults to 'en' in the contract, but let's be explicit) - postData.language = 'en' + // Add language (defaults to 'en' if not specified) + postData.language = options?.language || 'en' console.log('Creating post with data:', postData)