\n {/* Header: Accent Aqua background, Black text */}\n

\n {/* First row with logo and API key controls */}\n

\n {/* Logo */}\n

\n \n {/* Subtitle directly next to logo */}\n \n

\n \n {/* API Key and username section */}\n

\n {/* API Key Input Area: Gray background */}\n

\n {/* Label: Black text */}\n \n API Key:\n \n \n

\n \n Get Key\n \n {username && ({username})}\n

\n\n {/* Responsive subtitle for mobile */}\n

\n Create and manage moi.md files for your Val Town vals.\n

\n\n {/* Token Error Message: Red background, White text */}\n {tokenError && (\n

\n {tokenError}\n

\n )}\n\n

\n {/* Filter Select: Main Blue background, Black text, Gray border, Yellow focus */}\n setFilterPrivacy(e.target.value)}\n className=\"bg-[#c8e9f3] text-[#000000] border border-[#cac8ef] rounded px-3 py-1.5 text-sm focus:ring-2 focus:ring-[#fdbb2e] focus:outline-none disabled:bg-[#cac8ef] disabled:opacity-70 disabled:cursor-not-allowed\"\n disabled={loading || !apiToken}\n title={!apiToken ? \"API Key required to filter vals\" : \"Filter vals by privacy\"}\n >\n \n \n \n \n \n

\n\n {/* Refresh Button: Aqua background, Black text */}\n \n {loading ? \"Refreshing...\" : \"↻ Refresh\"}\n \n

\n\n {/* Main Content Area: White background */}\n

\n {/* Global Error: White bg, Red border/text */}\n {error && (\n

Error

{error}

\n )}\n\n {/* API Key Needed Warning: Yellow bg, Black text */}\n {!apiToken && !loading && (\n

\n Please enter your Val Town API Key above to load and manage your vals.\n

\n )}\n\n {/* Profile Preview Component */}\n {apiToken && (\n \n )}\n

\n\n {/* Editor Modal - conditionally rendered */}\n {isModalOpen && selectedVal && (\n \n )}\n\n {/* Footer: Main Blue background, Gray border, Black text (opaque), Aqua links */}\n \n

\n );\n};\n\nexport default App;","deleted","label",[173,174,155],"frontend","components","permalink","https://www.val.town/x/dcm31/moiPosterImproved/code/frontend/components/App.tsx","extension","actionData","errors"]