feat(nav): add API Reference link to navigation menu

refactor(AuthGuard): remove redundant error handling

refactor(ChatRoom): simplify message sending logic and update message list props

refactor(PlanetCreator): streamline form submission and reset logic

refactor(PlanetsList): update planet props typing for better clarity

Author: dinwwwh

apps/web/src/App.tsx

@@ -18,6 +18,9 @@ function App() {
         <div className="nav-menu">
           <a href="#planets">Planets</a>
           <a href="#chat">Chat</a>
+          <a href={import.meta.env.VITE_API_URL} target="_blank" rel="noopener noreferrer">
+            API Reference
+          </a>
         </div>
 
         <div className="nav-actions">

apps/web/src/components/AuthGuard.tsx

@@ -23,12 +23,6 @@ export function AuthGuard({ children }: AuthGuardProps) {
         })
         setUser(userData)
       }
-      catch (err) {
-        if (!controller.signal.aborted) {
-          console.error('Auth check failed:', err)
-          // Don't show error, just show login
-        }
-      }
       finally {
         if (!controller.signal.aborted) {
           setIsLoading(false)

apps/web/src/components/ChatRoom.tsx

@@ -8,10 +8,6 @@ import { WarningMessage } from './ui/WarningMessage'
 
 const DEFAULT_ROOM = 'default'
 
-interface ChatMessage {
-  message: string
-}
-
 export function ChatRoom() {
   const [inputValue, setInputValue] = useState('')
 
@@ -24,9 +20,6 @@ export function ChatRoom() {
 
   const sendMessageMutation = useMutation(
     chatServiceOrpc.room.publish.mutationOptions({
-      onSuccess: () => {
-        setInputValue('')
-      },
       onError(error) {
         console.error('Failed to send message:', error)
         // eslint-disable-next-line no-alert
@@ -41,10 +34,12 @@ export function ChatRoom() {
     if (!inputValue.trim())
       return
 
-    sendMessageMutation.mutate({
+    await sendMessageMutation.mutateAsync({
       room: DEFAULT_ROOM,
       message: inputValue,
     })
+
+    setInputValue('')
   }
 
   return (
@@ -89,11 +84,7 @@ export function ChatRoom() {
   )
 }
 
-interface MessageListProps {
-  messages: ChatMessage[]
-}
-
-function MessageList({ messages }: MessageListProps) {
+function MessageList({ messages }: { messages: Array<{ message: string }> }) {
   return (
     <ul className="chat-messages">
       {messages.length === 0 && (

apps/web/src/components/PlanetCreator.tsx

@@ -1,38 +1,17 @@
 import { useMutation, useQueryClient } from '@tanstack/react-query'
-import { useState } from 'react'
 import { planetServiceOrpc } from '../lib/service-planet'
 import { Card } from './ui/Card'
 import { InfoMessage } from './ui/InfoMessage'
 
-interface PlanetFormData {
-  name: string
-  description?: string
-  image?: File
-}
-
 export function PlanetCreator() {
   const queryClient = useQueryClient()
-  const [formData, setFormData] = useState<PlanetFormData>({
-    name: '',
-    description: '',
-  })
 
   const createPlanetMutation = useMutation(
     planetServiceOrpc.planet.create.mutationOptions({
       onSuccess() {
-        // Invalidate and refetch planets list
         queryClient.invalidateQueries({
           queryKey: planetServiceOrpc.planet.key(),
         })
-
-        // Reset form
-        setFormData({ name: '', description: '' })
-
-        // Clear file input manually
-        const fileInput = document.querySelector<HTMLInputElement>('input[type="file"]')
-        if (fileInput) {
-          fileInput.value = ''
-        }
       },
       onError(error) {
         console.error('Failed to create planet:', error)
@@ -42,19 +21,21 @@ export function PlanetCreator() {
     }),
   )
 
-  const handleSubmit = (e: React.FormEvent<HTMLFormElement>) => {
+  const handleSubmit = async (e: React.FormEvent<HTMLFormElement>) => {
     e.preventDefault()
     const form = new FormData(e.currentTarget)
 
     const name = form.get('name') as string
     const description = (form.get('description') as string | null) ?? undefined
     const image = form.get('image') as File
 
-    createPlanetMutation.mutate({
+    await createPlanetMutation.mutateAsync({
       name,
       description,
       image: image.size > 0 ? image : undefined,
     })
+
+    e.currentTarget.reset()
   }
 
   return (
@@ -71,8 +52,6 @@ export function PlanetCreator() {
             name="name"
             required
             placeholder="Enter planet name..."
-            value={formData.name}
-            onChange={e => setFormData({ ...formData, name: e.target.value })}
           />
         </label>
 
@@ -81,8 +60,6 @@ export function PlanetCreator() {
           <textarea
             name="description"
             placeholder="Describe this planet (optional)..."
-            value={formData.description}
-            onChange={e => setFormData({ ...formData, description: e.target.value })}
           />
         </label>
 

apps/web/src/components/PlanetsList.tsx

@@ -1,16 +1,10 @@
+import type { PlanetServiceOutputs } from '../lib/service-planet'
 import { useSuspenseInfiniteQuery } from '@tanstack/react-query'
 import { planetServiceOrpc } from '../lib/service-planet'
 import { ErrorMessage } from './ui/ErrorMessage'
 import { InfoMessage } from './ui/InfoMessage'
 import { InterfaceWindow } from './ui/InterfaceWindow'
 
-interface Planet {
-  id: number
-  name: string
-  description?: string
-  imageUrl?: string
-}
-
 export function PlanetsList() {
   const {
     data,
@@ -66,11 +60,7 @@ export function PlanetsList() {
   )
 }
 
-interface PlanetsTableProps {
-  planets: Planet[]
-}
-
-function PlanetsTable({ planets }: PlanetsTableProps) {
+function PlanetsTable({ planets }: { planets: PlanetServiceOutputs['planet']['list'] }) {
   return (
     <table>
       <thead>
@@ -90,11 +80,7 @@ function PlanetsTable({ planets }: PlanetsTableProps) {
   )
 }
 
-interface PlanetRowProps {
-  planet: Planet
-}
-
-function PlanetRow({ planet }: PlanetRowProps) {
+function PlanetRow({ planet }: { planet: PlanetServiceOutputs['planet']['list'][0] }) {
   return (
     <tr>
       <td>