Live Talk

Presentation Management

\n setShowSignUpModal(true)}\n className=\"text-sm font-semibold glass-button-secondary px-4 py-2 rounded-lg hover:bg-white/80 transition-colors\"\n >\n Sign Up\n \n setShowLoginModal(true)}\n className=\"text-sm font-semibold glass-button-secondary px-4 py-2 rounded-lg hover:bg-white/80 transition-colors\"\n >\n Login\n \n

\n Last Conference\n

\n\n

\n {error && (\n

\n ⚠️\n {error}\n setError(null)}\n className=\"ml-auto text-red-500 hover:text-red-700\"\n aria-label=\"Dismiss error\"\n >\n ✕\n \n

\n )}\n\n

Presentations

\n {presentations.length > 0 && (\n \n {deletingAll ? \"Deleting...\" : \"Delete All\"}\n \n )}\n setShowCreateForm(!showCreateForm)}\n className=\"glass-button px-6 py-2 rounded-xl font-bold shadow-lg hover:shadow-xl transition-all\"\n >\n {showCreateForm ? \"Cancel\" : \"+ New Presentation\"}\n \n

\n\n {showCreateForm && (\n

\n setShowCreateForm(false)}\n />\n

\n )}\n\n {presentations.length === 0 ? (\n

📊

No presentations yet

Create your first presentation to get started

\n ) : (\n

\n {presentations.map((pres) => (\n \n ))}\n

\n )}\n

\n\n {/* Login Modal */}\n {showLoginModal && (\n

Login

\n Enter your email to retrieve your previous session.\n

\n \n Email *\n \n setLoginEmail(e.target.value)}\n onKeyDown={(e) => {\n if (e.key === \"Enter\" && !loginLoading && loginEmail.trim()) {\n handleLogin();\n }\n }}\n placeholder=\"your.email@example.com\"\n className=\"w-full px-4 py-3 glass-input text-gray-800 rounded-xl\"\n autoFocus\n />\n

\n \n {loginLoading ? \"Logging in...\" : \"Login\"}\n \n {\n setShowLoginModal(false);\n setLoginEmail(\"\");\n }}\n className=\"px-6 py-3 glass-button-secondary rounded-xl font-semibold transition-all\"\n >\n Cancel\n \n

\n )}\n\n {/* Sign Up Modal */}\n {showSignUpModal && (\n

Sign Up

\n Enter your email to save it to this session. You can use Login later to retrieve this session.\n

\n \n Email *\n \n setSignUpEmail(e.target.value)}\n onKeyDown={(e) => {\n if (e.key === \"Enter\" && !signUpLoading && signUpEmail.trim()) {\n handleSignUp();\n }\n }}\n placeholder=\"your.email@example.com\"\n className=\"w-full px-4 py-3 glass-input text-gray-800 rounded-xl\"\n autoFocus\n />\n

\n \n {signUpLoading ? \"Saving...\" : \"Sign Up\"}\n \n {\n setShowSignUpModal(false);\n setSignUpEmail(\"\");\n }}\n className=\"px-6 py-3 glass-button-secondary rounded-xl font-semibold transition-all\"\n >\n Cancel\n \n

\n )}\n

\n );\n}\n\ninterface PresentationCardProps {\n presentation: Presentation;\n onUpdate: (id: number, data: { name: string; presenter: string; talk_deck_link?: string }) => Promise;\n onDelete: (id: number) => void;\n deleting: boolean;\n}\n\nfunction PresentationCard({ presentation, onUpdate, onDelete, deleting }: PresentationCardProps) {\n const [isEditing, setIsEditing] = useState(false);\n const [name, setName] = useState(presentation.name);\n const [presenter, setPresenter] = useState(presentation.presenter);\n const [talkDeckLink, setTalkDeckLink] = useState(presentation.talk_deck_link || \"\");\n const [saving, setSaving] = useState(false);\n\n // Sync local state when presentation prop changes\n useEffect(() => {\n if (!isEditing) {\n setName(presentation.name);\n setPresenter(presentation.presenter);\n setTalkDeckLink(presentation.talk_deck_link || \"\");\n }\n }, [presentation, isEditing]);\n\n const handleSave = async () => {\n if (!name.trim() || !presenter.trim()) {\n return;\n }\n\n setSaving(true);\n try {\n await onUpdate(presentation.id, {\n name: name.trim(),\n presenter: presenter.trim(),\n talk_deck_link: talkDeckLink.trim() || undefined,\n });\n setIsEditing(false);\n } catch (err) {\n // Error is handled by parent component\n } finally {\n setSaving(false);\n }\n };\n\n const handleCancel = () => {\n setName(presentation.name);\n setPresenter(presentation.presenter);\n setTalkDeckLink(presentation.talk_deck_link || \"\");\n setIsEditing(false);\n };\n\n return (\n

\n {isEditing ? (\n

\n \n Presentation Name *\n \n setName(e.target.value)}\n className=\"w-full px-3 py-2 glass-input text-sm\"\n placeholder=\"e.g., Introduction to React\"\n />\n

\n \n Presenter Name *\n \n setPresenter(e.target.value)}\n className=\"w-full px-3 py-2 glass-input text-sm\"\n placeholder=\"e.g., Jane Doe\"\n />\n

\n \n Talk Deck Link (optional)\n \n setTalkDeckLink(e.target.value)}\n className=\"w-full px-3 py-2 glass-input text-sm\"\n placeholder=\"https://example.com/slides\"\n />\n

\n ) : (\n <>\n

{presentation.name}

by {presentation.presenter}

\n \n )}\n

\n \n {!isEditing && presentation.talk_deck_link && (\n \n 📎 View Slides\n \n )}\n\n

\n {isEditing ? (\n

\n \n {saving ? \"Saving...\" : \"Save\"}\n \n \n Cancel\n \n

\n ) : (\n <>\n

\n \n Manage Steps\n \n \n Present\n \n

\n setIsEditing(true)}\n className=\"flex-1 text-last-pink hover:text-last-orange hover:bg-pink-50 px-4 py-2 rounded-lg font-medium text-sm transition-colors\"\n >\n Edit\n \n onDelete(presentation.id)}\n disabled={deleting}\n className=\"flex-1 text-red-500 hover:text-red-700 hover:bg-red-50 px-4 py-2 rounded-lg font-medium text-sm transition-colors disabled:opacity-50\"\n >\n {deleting ? \"Deleting...\" : \"Delete\"}\n \n

\n \n )}\n

\n );\n}\n\ninterface PresentationFormProps {\n onSubmit: (data: { name: string; presenter: string; talk_deck_link?: string }) => Promise;\n onCancel: () => void;\n}\n\nfunction PresentationForm({ onSubmit, onCancel }: PresentationFormProps) {\n const [name, setName] = useState(\"\");\n const [presenter, setPresenter] = useState(\"\");\n const [talkDeckLink, setTalkDeckLink] = useState(\"\");\n const [loading, setLoading] = useState(false);\n\n const handleSubmit = async (e: React.FormEvent) => {\n e.preventDefault();\n if (!name.trim() || !presenter.trim()) {\n return;\n }\n\n setLoading(true);\n try {\n await onSubmit({\n name: name.trim(),\n presenter: presenter.trim(),\n talk_deck_link: talkDeckLink.trim() || undefined,\n });\n setName(\"\");\n setPresenter(\"\");\n setTalkDeckLink(\"\");\n } finally {\n setLoading(false);\n }\n };\n\n return (\n

Create New Presentation

\n \n

\n \n Presentation Name *\n \n setName(e.target.value)}\n required\n className=\"w-full px-4 py-2 glass-input\"\n placeholder=\"e.g., Introduction to React\"\n />\n

\n\n

\n \n Presenter Name *\n \n setPresenter(e.target.value)}\n required\n className=\"w-full px-4 py-2 glass-input\"\n placeholder=\"e.g., Jane Doe\"\n />\n

\n\n

\n \n Talk Deck Link (optional)\n \n setTalkDeckLink(e.target.value)}\n className=\"w-full px-4 py-2 glass-input\"\n placeholder=\"https://example.com/slides\"\n />\n

\n\n

\n \n {loading ? \"Creating...\" : \"Create Presentation\"}\n \n \n Cancel\n \n

\n );\n}\n\n","deleted","label",[168,169,149],"frontend","components","permalink","https://www.val.town/x/fwfben/live-talk/code/frontend/components/ManageMode.tsx","extension","actionData","errors"]