Val Town Code SearchReturn to Val Town

8import CreditBalance from "./CreditBalance.tsx";
9
10export function Header () {
11  const navigate = useNavigate();
12  const { user } = useContext(AppContext);
26}
27
28function Dropdown () {
29  const { user } = useContext(AppContext);
30  const { ref, open, setOpen } = useDropdown();
54}
55
56function useDropdown() {
57  const [open, setOpen] = useState(false);
58  const ref = useRef(null);
72}
73
74function Avatar ({ user }) {
75  if (!user?.profileImageUrl) {
76    return (
90}
91
92function LogOut () {
93  const { user } = useContext(AppContext);
94  return (
101}
102
103function DarkButton () {
104  const [dark, setDark] = useLocalStorage("DARK_MODE", false);
105  const toggle = () => {
127}
128
129function AudioButton () {
130  const {audio, setAudio} = useContext(AppContext);
131

1// Utility functions for formatting data in the dashboard
2
3/**

4const SOURCE_URL = "https://val.town/x/valdottown/Townie";
5
6export function Footer () {
7  return (
8    <footer className="container footer">

1export default function fileWithLineNumbers(text: string, view_range) {
2  const lines = text.split("\n")
3    .map((line, index) => (index + 1) + ": " + line)

3import { TownieIcon } from "./components/icons.tsx";
4
5export default async function (loading: boolean) {
6  const svg = renderToString(
7    <TownieIcon color="#ffffff" circle={loading ? "#0EA5E9" : "#000000"} />

4import { Messages } from "./Messages.tsx";
5
6export function DebugStyles() {
7  const [pathname, setPathname] = useState("");
8  return (

16}
17
18export function renderDashboard(data: UserSummaryRow[]): string {
19  // Calculate totals
20  const totalUsers = data.length;

4
5- Ask clarifying questions when requirements are ambiguous
6- Provide complete, functional solutions rather than skeleton implementations
7- Test your logic against edge cases before presenting the final solution
8- Ensure all code follows Val Town's specific platform requirements
17- **Never bake in secrets into the code** - always use environment variables
18- Include comments explaining complex logic (avoid commenting obvious operations)
19- Follow modern ES6+ conventions and functional programming practices if possible
20
21## Types of triggers
28
29```ts
30export default async function (req: Request) {
31  return new Response("Hello World");
32}
42
43```ts
44export default async function () {
45  // Scheduled task code
46}
56
57```ts
58export default async function (email: Email) {
59  // Process email
60}
66## Val Town Standard Libraries
67
68Val Town provides several hosted services and utility functions.
69
70### Blob Storage
120```
121
122## Val Town Utility Functions
123
124Val Town provides several utility functions to help with common project tasks.
125
126### Importing Utilities
200│   ├── database/
201│   │   ├── migrations.ts    # Schema definitions
202│   │   ├── queries.ts       # DB query functions
203│   │   └── README.md
204│   └── routes/              # Route modules
219└── shared/
220    ├── README.md
221    └── utils.ts             # Shared types and functions
222```
223
226- Hono is the recommended API framework
227- Main entry point should be `backend/index.ts`
228- **Static asset serving:** Use the utility functions to read and serve project files:
229  ```ts
230  import { readFile, serveFile } from "https://esm.town/v/std/utils@85-main/index.ts";
260- Run migrations on startup or comment out for performance
261- Change table names when modifying schemas rather than altering
262- Export clear query functions with proper TypeScript typing
263
264## Common Gotchas and Solutions

3import { Link } from "react-router";
4
5export default function CreditBalance() {
6  const [balance, setBalance] = useState<number | null>(null);
7  const [loading, setLoading] = useState(true);

12 * Render the credit additions page
13 */
14export function renderCreditAdditions(
15  data: CreditAddition[],
16  pagination: PaginationResult,
100    activeTab: "credit-additions",
101    scripts: [`
102      document.addEventListener('DOMContentLoaded', function() {
103        // Date inputs initialization
104        const today = new Date();