\n \n \n \n\n","label",[181,68],"frontend","pulls","branches","forks","envVars",{"_189":26,"_191":26},"connections",{"_189":26,"_190":26},"count","unfilledCount","emptyCount",{"_33":301,"_13":292,"_66":286,"_43":-5,"_35":36,"_174":296,"_175":95,"_37":302,"_39":26,"_69":276,"_177":-5,"_70":24,"_179":-5,"_212":303,"_17":304},{"_33":293,"_13":294,"_66":295,"_43":286,"_35":36,"_174":296,"_175":95,"_37":297,"_39":26,"_69":227,"_177":298,"_70":24,"_179":-5,"_212":299,"_17":300},{"_33":283,"_13":284,"_66":285,"_43":286,"_35":36,"_174":287,"_175":95,"_37":288,"_39":26,"_69":227,"_177":289,"_70":24,"_179":-5,"_212":290,"_17":291},{"_33":279,"_13":181,"_66":173,"_43":-5,"_35":36,"_174":40,"_175":95,"_37":280,"_39":26,"_69":276,"_177":-5,"_70":24,"_179":-5,"_212":281,"_17":282},{"_33":274,"_13":250,"_66":244,"_43":173,"_35":36,"_174":40,"_175":95,"_37":275,"_39":26,"_69":276,"_177":-5,"_70":24,"_179":-5,"_212":277,"_17":278},{"_33":266,"_13":267,"_66":268,"_43":244,"_35":36,"_174":269,"_175":95,"_37":270,"_39":40,"_69":227,"_177":271,"_70":24,"_179":-5,"_212":272,"_17":273},{"_33":258,"_13":259,"_66":260,"_43":244,"_35":36,"_174":261,"_175":95,"_37":262,"_39":26,"_69":227,"_177":263,"_70":24,"_179":-5,"_212":264,"_17":265},{"_33":251,"_13":252,"_66":253,"_43":244,"_35":36,"_174":121,"_175":95,"_37":254,"_39":40,"_69":227,"_177":255,"_70":24,"_179":-5,"_212":256,"_17":257},{"_33":241,"_13":242,"_66":243,"_43":244,"_35":36,"_174":245,"_175":95,"_37":246,"_39":26,"_69":227,"_177":247,"_70":24,"_179":-5,"_212":248,"_17":249},{"_33":234,"_13":235,"_66":236,"_43":173,"_35":36,"_174":40,"_175":95,"_37":237,"_39":26,"_69":21,"_177":238,"_70":24,"_179":-5,"_212":239,"_17":240},{"_33":172,"_13":68,"_66":67,"_43":173,"_35":36,"_174":76,"_175":95,"_37":231,"_39":40,"_69":21,"_177":178,"_70":24,"_179":-5,"_212":232,"_17":233},{"_33":223,"_13":224,"_66":225,"_43":173,"_35":36,"_174":40,"_175":95,"_37":226,"_39":26,"_69":227,"_177":228,"_70":24,"_179":-5,"_212":229,"_17":230},{"_33":215,"_13":216,"_66":217,"_43":-5,"_35":36,"_174":218,"_175":95,"_37":219,"_39":40,"_69":21,"_177":220,"_70":24,"_179":-5,"_212":221,"_17":222},{"_33":206,"_13":207,"_66":93,"_43":-5,"_35":36,"_174":208,"_175":95,"_37":209,"_39":40,"_69":210,"_177":211,"_70":24,"_179":-5,"_212":213,"_17":214},"8983a50a-5352-11f1-ac0f-ee650bb23af1","index.ts",11,["D",1779174938459],"http","import { parseVal, serveFile } from \"https://esm.town/v/std/utils/index.ts\";\nimport { Hono } from \"npm:hono\";\nimport requestsApi from \"./backend/requests-api.ts\";\n\nconst app = new Hono();\n\n// Serve index.html at the root /\napp.get(\"/\", () => serveFile(\"/frontend/index.html\"));\n\n// Serve all /frontend files\napp.get(\"/frontend/**/*\", (c) => serveFile(c.req.path));\n\n// View source redirect\napp.get(\"/source\", (c) => c.redirect(parseVal().links.self.val));\n\n// API routes\napp.route(\"/api/requests\", requestsApi);\n\n// Unwrap and rethrow Hono errors as the original error\napp.onError((err) => Promise.reject(err));\n\nexport default app.fetch;\n","children",[],[207],"768b95c8-534f-11f1-aa39-ee650bb23af1","README.md","019e3f01-eb31-756d-9006-fd8b7583e53d",8,["D",1779173618141],"# 📱 Requests & Chat\n\nA tab-based web app with two sections:\n\n- **📋 Requests** — View, create, and track requests with status indicators (pending/approved/rejected)\n- **💬 Chat** — Real-time-style messaging interface with auto-replies\n\n## Architecture\n\n```mermaid\ngraph LR\n Browser -->|\"GET /\"| Hono[\"index.ts (Hono)\"]\n Hono -->|serves| HTML[\"index.html\"]\n HTML -->|loads| Entry[\"index.tsx\"]\n Entry -->|renders| App[\"App.tsx\"]\n App -->|tab: requests| Requests[\"RequestsTab.tsx\"]\n App -->|tab: chat| Chat[\"ChatTab.tsx\"]\n App -->|navigation| Tabs[\"Tabs.tsx\"]\n```\n\n## File structure\n\n```\nindex.ts ← Hono backend\nfrontend/\n index.html ← HTML shell\n index.tsx ← React entrypoint\n favicon.svg ← App icon\n components/\n App.tsx ← Root layout + tab switching\n Tabs.tsx ← Tab navigation bar\n RequestsTab.tsx ← Requests list + new request form\n ChatTab.tsx ← Chat messaging interface\n```\n",[],[216],"4e777840-534f-11f1-8736-ee650bb23af1","index.tsx","019e3f01-eb31-756d-9006-f765cb9a811b",["D",1779173550816],"script","/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport { createRoot } from \"https://esm.sh/react-dom@18.2.0/client\";\nimport { App } from \"./components/App.tsx\";\n\nconst root = document.getElementById(\"root\");\nif (!root) {\n throw new Error(\"No root element found\");\n}\n\ncreateRoot(root).render();",[],[181,224],["D",1779173556610],[],[181,68],"4e776c38-534f-11f1-8736-ee650bb23af1","favicon.svg","019e3f01-eb31-756d-9006-ef243b131488",["D",1779173550816],"\n",[],[181,235],"55942cc2-534f-11f1-a2d2-ee650bb23af1","Tabs.tsx","55942dbc-534f-11f1-a2d2-ee650bb23af1","019e3f01-eb31-756d-9006-ea2e305243c9",3,["D",1779173562838],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\n\ninterface TabsProps {\n activeTab: string;\n onTabChange: (tab: string) => void;\n}\n\nconst tabs = [\n { id: \"requests\", label: \"📋 Requests\", emoji: \"📋\" },\n { id: \"chat\", label: \"💬 Chat\", emoji: \"💬\" },\n];\n\nexport function Tabs({ activeTab, onTabChange }: TabsProps) {\n return (\n

\n {tabs.map((tab) => (\n onTabChange(tab.id)}\n class={`flex-1 py-3 px-6 text-sm font-semibold transition-all cursor-pointer\n ${\n activeTab === tab.id\n ? \"text-blue-600 border-b-2 border-blue-600 bg-blue-50/50\"\n : \"text-gray-500 hover:text-gray-700 hover:bg-gray-50\"\n }`}\n >\n {tab.label}\n \n ))}\n

\n );\n}\n",[],[181,250,242],"components","97073656-5352-11f1-8969-ee650bb23af1","RequestsTab.tsx","5ffa71c6-534f-11f1-a2d2-ee650bb23af1",["D",1779174961130],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport { useState, useEffect } from \"https://esm.sh/react@18.2.0\";\n\ninterface RequestItem {\n id: number;\n title: string;\n description: string;\n status: \"pending\" | \"approved\" | \"rejected\";\n created_at: string;\n}\n\nconst statusColors: Record = {\n pending: \"bg-yellow-100 text-yellow-800\",\n approved: \"bg-green-100 text-green-800\",\n rejected: \"bg-red-100 text-red-800\",\n};\n\nconst statusEmoji: Record = {\n pending: \"⏳\",\n approved: \"✅\",\n rejected: \"❌\",\n};\n\nexport function RequestsTab() {\n const [requests, setRequests] = useState([]);\n const [loading, setLoading] = useState(true);\n const [showForm, setShowForm] = useState(false);\n const [newTitle, setNewTitle] = useState(\"\");\n const [newDesc, setNewDesc] = useState(\"\");\n const [error, setError] = useState(\"\");\n const [submitting, setSubmitting] = useState(false);\n\n // Load requests from the database on mount\n useEffect(() => {\n fetchRequests();\n }, []);\n\n async function fetchRequests() {\n try {\n const res = await fetch(\"/api/requests\");\n const data = await res.json();\n setRequests(data);\n } catch (err) {\n console.error(\"Failed to fetch requests:\", err);\n } finally {\n setLoading(false);\n }\n }\n\n async function handleAddRequest() {\n // Validation: prevent empty submissions\n if (!newTitle.trim()) {\n setError(\"⚠️ Sorğu başlığı boş ola bilməz! / Title cannot be empty!\");\n return;\n }\n\n setError(\"\");\n setSubmitting(true);\n\n try {\n const res = await fetch(\"/api/requests\", {\n method: \"POST\",\n headers: { \"Content-Type\": \"application/json\" },\n body: JSON.stringify({\n title: newTitle.trim(),\n description: newDesc.trim(),\n }),\n });\n\n if (!res.ok) {\n const errData = await res.json();\n setError(errData.error || \"Failed to create request\");\n return;\n }\n\n const created = await res.json();\n setRequests([created, ...requests]);\n setNewTitle(\"\");\n setNewDesc(\"\");\n setShowForm(false);\n } catch (err) {\n setError(\"Network error. Please try again.\");\n console.error(\"Failed to create request:\", err);\n } finally {\n setSubmitting(false);\n }\n }\n\n function formatDate(dateStr: string) {\n return dateStr.split(\"T\")[0] || dateStr.split(\" \")[0] || dateStr;\n }\n\n if (loading) {\n return (\n

⏳

Loading requests...

\n );\n }\n\n return (\n

\n {/* Header */}\n

Requests

\n { setShowForm(!showForm); setError(\"\"); }}\n class=\"bg-blue-600 hover:bg-blue-700 text-white text-sm font-medium px-4 py-2 rounded-lg transition-colors cursor-pointer\"\n >\n {showForm ? \"Cancel\" : \"+ New Request\"}\n \n

\n\n {/* New Request Form */}\n {showForm && (\n

\n {error && (\n

\n {error}\n

\n )}\n { setNewTitle((e.target as HTMLInputElement).value); setError(\"\"); }}\n class={`w-full px-3 py-2 border rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-blue-500 ${\n error && !newTitle.trim() ? \"border-red-400 bg-red-50\" : \"border-gray-300\"\n }`}\n />\n setNewDesc((e.target as HTMLTextAreaElement).value)}\n class=\"w-full px-3 py-2 border border-gray-300 rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-blue-500 resize-none\"\n rows={3}\n />\n \n {submitting ? \"Submitting...\" : \"Submit Request\"}\n \n

\n )}\n\n {/* Summary */}\n

\n {([\"pending\", \"approved\", \"rejected\"] as const).map((status) => (\n

{requests.filter((r) => r.status === status).length}

{statusEmoji[status]} {status}

\n ))}\n

\n\n {/* Request List */}\n {requests.length === 0 ? (\n

📭

No requests yet. Create your first one!

\n ) : (\n

\n {requests.map((req) => (\n

{req.title}

\n {req.description && (\n

{req.description}

\n )}\n

📅 {formatDate(req.created_at)}

\n \n {statusEmoji[req.status]} {req.status}\n \n

\n ))}\n

\n )}\n

\n );\n}\n",[],[181,250,252],"6a1f9f8c-534f-11f1-a2d2-ee650bb23af1","ChatTab.tsx","6a1fa07c-534f-11f1-a2d2-ee650bb23af1",5,["D",1779173597301],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport { useState, useRef, useEffect } from \"https://esm.sh/react@18.2.0\";\n\ninterface ChatMessage {\n id: number;\n sender: \"user\" | \"other\";\n name: string;\n text: string;\n time: string;\n}\n\nfunction getTime() {\n return new Date().toLocaleTimeString([], { hour: \"2-digit\", minute: \"2-digit\" });\n}\n\nconst autoReplies = [\n \"Got it, I'll look into that! 👍\",\n \"Interesting point. Let me think about it.\",\n \"Thanks for sharing! 🙏\",\n \"Sure, I can help with that.\",\n \"Sounds good to me! ✨\",\n \"Let me get back to you on that.\",\n];\n\nexport function ChatTab() {\n const [messages, setMessages] = useState([\n { id: 1, sender: \"other\", name: \"Aysel\", text: \"Hi! How's the project going? 🚀\", time: \"10:30\" },\n { id: 2, sender: \"user\", name: \"You\", text: \"Going well! Just finished the dashboard.\", time: \"10:31\" },\n { id: 3, sender: \"other\", name: \"Aysel\", text: \"Awesome! Can you share the link?\", time: \"10:32\" },\n ]);\n const [input, setInput] = useState(\"\");\n const bottomRef = useRef(null);\n\n useEffect(() => {\n bottomRef.current?.scrollIntoView({ behavior: \"smooth\" });\n }, [messages]);\n\n function handleSend() {\n if (!input.trim()) return;\n\n const userMsg: ChatMessage = {\n id: Date.now(),\n sender: \"user\",\n name: \"You\",\n text: input,\n time: getTime(),\n };\n\n setMessages((prev) => [...prev, userMsg]);\n setInput(\"\");\n\n // Simulate auto-reply\n setTimeout(() => {\n const reply: ChatMessage = {\n id: Date.now() + 1,\n sender: \"other\",\n name: \"Aysel\",\n text: autoReplies[Math.floor(Math.random() * autoReplies.length)],\n time: getTime(),\n };\n setMessages((prev) => [...prev, reply]);\n }, 800 + Math.random() * 1200);\n }\n\n function handleKeyDown(e: KeyboardEvent) {\n if (e.key === \"Enter\" && !e.shiftKey) {\n e.preventDefault();\n handleSend();\n }\n }\n\n return (\n

\n {/* Chat Header */}\n

Aysel

● Online

\n\n {/* Messages */}\n

\n {messages.map((msg) => (\n

\n \n

{msg.text}

\n \n {msg.time}\n

\n ))}\n

\n\n {/* Input */}\n

\n setInput((e.target as HTMLInputElement).value)}\n onKeyDown={handleKeyDown as any}\n placeholder=\"Type a message...\"\n class=\"flex-1 px-4 py-2 border border-gray-300 rounded-full text-sm focus:outline-none focus:ring-2 focus:ring-blue-500\"\n />\n \n ➤\n \n

\n \n );\n}\n",[],[181,250,259],"6eb17066-534f-11f1-a2d2-ee650bb23af1","App.tsx","019e3f01-eb31-756d-9006-e36263d0de81",6,["D",1779173604969],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport { useState } from \"https://esm.sh/react@18.2.0\";\nimport { Tabs } from \"./Tabs.tsx\";\nimport { RequestsTab } from \"./RequestsTab.tsx\";\nimport { ChatTab } from \"./ChatTab.tsx\";\n\nexport function App() {\n const [activeTab, setActiveTab] = useState(\"requests\");\n\n return (\n

\n {/* App Header */}\n

📱 Workspace

Manage requests & chat with your team

\n\n {/* Tab Navigation */}\n \n\n {/* Tab Content */}\n

\n {activeTab === \"requests\" && }\n {activeTab === \"chat\" && }\n

\n\n {/* Footer */}\n

\n view source\n

\n );\n}\n",[],[181,250,267],"4e776a4e-534f-11f1-8736-ee650bb23af1",["D",1779173550816],"directory",[197,198,199,200],[181,250],"4e777c5a-534f-11f1-8736-ee650bb23af1",["D",1779173550816],[196,201,202,203],[181],"8617abc8-5352-11f1-ac0f-ee650bb23af1","requests-api.ts","8617ac90-5352-11f1-ac0f-ee650bb23af1","5a050e7b-df80-4523-a994-75efde00f637",10,["D",1779174932721],"import { Hono } from \"npm:hono\";\nimport { initDB, sqlite } from \"./db.ts\";\n\nconst api = new Hono();\n\n// Ensure DB is initialized on first request\nlet dbReady = false;\napi.use(\"*\", async (_c, next) => {\n if (!dbReady) {\n await initDB();\n dbReady = true;\n }\n await next();\n});\n\n// GET /api/requests — fetch all requests (newest first)\napi.get(\"/\", async (c) => {\n const result = await sqlite.execute(\"SELECT * FROM requests ORDER BY created_at DESC\");\n return c.json(result.rows);\n});\n\n// POST /api/requests — create a new request\napi.post(\"/\", async (c) => {\n const body = await c.req.json();\n const { title, description } = body;\n\n // Validate: title is required and must not be empty\n if (!title || typeof title !== \"string\" || !title.trim()) {\n return c.json({ error: \"Title is required and cannot be empty.\" }, 400);\n }\n\n const desc = (description && typeof description === \"string\") ? description.trim() : \"\";\n\n const result = await sqlite.execute({\n sql: \"INSERT INTO requests (title, description) VALUES (?, ?)\",\n args: [title.trim(), desc],\n });\n\n // Fetch the inserted row\n const inserted = await sqlite.execute({\n sql: \"SELECT * FROM requests WHERE id = ?\",\n args: [result.lastInsertRowid!],\n });\n\n return c.json(inserted.rows[0], 201);\n});\n\nexport default api;\n",[],[292,284],"backend","813d0a80-5352-11f1-8d9d-ee650bb23af1","db.ts","813d0b48-5352-11f1-8d9d-ee650bb23af1",9,["D",1779174924545],"import { sqlite } from \"https://esm.town/v/std/sqlite/main.ts\";\n\n// Initialize the requests table\nexport async function initDB() {\n await sqlite.execute(`\n CREATE TABLE IF NOT EXISTS requests (\n id INTEGER PRIMARY KEY AUTOINCREMENT,\n title TEXT NOT NULL,\n description TEXT NOT NULL DEFAULT '',\n status TEXT NOT NULL DEFAULT 'pending',\n created_at TEXT NOT NULL DEFAULT (datetime('now'))\n )\n `);\n}\n\nexport { sqlite };\n",[],[292,294],"813d1c6e-5352-11f1-8d9d-ee650bb23af1",["D",1779174924545],[193,194],[292],["D",1779173550816],["D",1789555877593],{"_11":12,"_138":73},{"_11":12,"_133":134,"_72":73,"_30":71,"_135":136,"_137":24},{"_39":121,"_13":16,"_33":36,"_122":83,"_123":63,"_124":125,"_126":87,"_127":128,"_129":130,"_131":14,"_132":12},"ctx",{"_52":-5,"_159":343,"_344":345,"_346":347,"_348":24,"_349":24,"_350":24,"_351":95,"_352":-5,"_353":-7,"_354":-7,"_355":26,"_356":24,"_357":24,"_358":-5,"_359":24,"_360":24,"_361":24,"_362":-5},"ENV",{"_314":315,"_316":317,"_318":16,"_319":320,"_321":322,"_323":324,"_325":326,"_327":328,"_329":330,"_331":332,"_333":334,"_335":336,"_337":338,"_339":340,"_341":342},"REACT_APP_SENTRY_DSN","https://586020d86f05489db63a554690acf1e9@o1398359.ingest.sentry.io/6724499","RENDER_GIT_COMMIT","fdb67791413f4386b4dbf18f354029a617f6160f","RENDER_GIT_BRANCH","POSTHOG_API_TOKEN","phc_nmoyuAkStEZuUp69rYlg1DZgrIt19Gx0Y4Hwf8tGgJP","POSTHOG_API_HOST","https://wart.val.town","WEB_API_TEMPLATE","https://{val}.web.val.run","APP_URL","https://www.val.town","MODULE_URL","https://esm.town","VANITY_WEB_API_TEMPLATE","https://{label}.val.run/","DENOLS_URL","https://lsp.val.town","NODE_ENV","production","CLOUDFLARE_TURNSTILE_SITE_KEY","0x4AAAAAACtaIZJH7s9rBMZ6","GOOGLE_CLIENT_ID","875989696899-jtsqkhlbdv5jrlsk8631p7ipjg3c6o62.apps.googleusercontent.com","STRIPE_PUBLISHABLE_KEY","pk_live_51N2zvWEpZTTLipIkVEwXrUG9AT0yeOOEYxszarZT1jpsZV58Ly6wlg3SltZpHN26CUalOBmUSY7adQRQiSkCZz2500qSXNkf8Y","API_URL","https://api.val.town",[],"preferencesKeybindings","default","preferencesTheme","light","preferencesFixers","preferencesCopilot","preferencesSelectionAi","preferencesCloseBrackets","preferencesChatPanelState","preferencesDprint","preferencesDenofmt","notificationCount","flagDenols","isBusinessOrgMember","businessOrgHandle","isBusinessOrgAdmin","isHigherTownieTier","navCollapsed","currentOrgId"]

History · index.html