Observatory UI refactorings

[berekuk]

Most changes under the hood, or pretty minor in how it looks - extracted common UI components, got rid of more inline styles, etc.

For context, my longer-term goal is to eventually extract the common React components library to reuse here, in gridworks and everywhere else.

The next iteration I'm going to do on this, though (if I will have time and no one else does it first) is Next.js rewrite, because the big part of other code that I want to trim down is loading states.

[berekuk]

• Observatory UI refactorings #4520 👈 (View in Graphite)
• main

This stack of pull requests is managed by Graphite. Learn more about stacking.

[graphite-app]

Invalid Tailwind CSS class gap- with no value specified. This will cause the styling to fail.

// Fix: Specify a valid gap value
<div className="flex flex-wrap gap-2">

Suggested change

	<div className="flex flex-wrap gap-">
	<div className="flex flex-wrap gap-2">

Spotted by Graphite Agent



Is this helpful? React 👍 or 👎 to let us know.

[graphite-app]

Missing cleanup flag for async operation in useEffect. The old code had an ignore flag to prevent state updates on unmounted components, but this was removed in the refactor. This will cause "Can't perform a React state update on an unmounted component" warnings and potential memory leaks if the component unmounts before the async getPublicLeaderboard() completes.

// Fix: Add back the ignore flag pattern
useEffect(() => {
  let ignore = false
  const load = async () => {
    setPublicLeaderboard((prev) => ({ ...prev, loading: prev.entries.length === 0, error: null }))
    try {
      const response = await repo.getPublicLeaderboard()
      if (!ignore) {
        setPublicLeaderboard({ entries: response.entries, loading: false, error: null })
      }
    } catch (error: any) {
      if (!ignore) {
        setPublicLeaderboard({ entries: [], loading: false, error: error.message ?? 'Failed to load leaderboard' })
      }
    }
  }
  load()
  const intervalId = window.setInterval(() => load(), REFRESH_INTERVAL_MS)
  return () => {
    ignore = true
    window.clearInterval(intervalId)
  }
}, [repo])

Suggested change

	useEffect(() => {
	const load = async () => {
	setPublicLeaderboard((prev) => ({ ...prev, loading: prev.entries.length === 0, error: null }))
	try {
	// Use the new endpoint that returns entries with VOR already computed
	const response = await repo.getPublicLeaderboard()
	setPublicLeaderboard({ entries: response.entries, loading: false, error: null })
	} catch (error: any) {
	setPublicLeaderboard({ entries: [], loading: false, error: error.message ?? 'Failed to load leaderboard' })
	}
	}
	load()
	const intervalId = window.setInterval(() => load(), REFRESH_INTERVAL_MS)
	return () => {
	window.clearInterval(intervalId)
	}
	}, [repo])
	useEffect(() => {
	let ignore = false
	const load = async () => {
	setPublicLeaderboard((prev) => ({ ...prev, loading: prev.entries.length === 0, error: null }))
	try {
	// Use the new endpoint that returns entries with VOR already computed
	const response = await repo.getPublicLeaderboard()
	if (!ignore) {
	setPublicLeaderboard({ entries: response.entries, loading: false, error: null })
	}
	} catch (error: any) {
	if (!ignore) {
	setPublicLeaderboard({ entries: [], loading: false, error: error.message ?? 'Failed to load leaderboard' })
	}
	}
	}
	load()
	const intervalId = window.setInterval(() => load(), REFRESH_INTERVAL_MS)
	return () => {
	ignore = true
	window.clearInterval(intervalId)
	}
	}, [repo])

Spotted by Graphite Agent



Is this helpful? React 👍 or 👎 to let us know.

[chatgpt-codex-connector]

💡 Codex Review

Here are some automated review suggestions for this pull request.

ℹ️ About Codex in GitHub

Your team has set up Codex to review pull requests in this repo. Reviews are triggered when you

• Open a pull request for review
• Mark a draft as ready
• Comment "@codex review".

If Codex has suggestions, it will comment; otherwise it will react with 👍.

Codex can also answer questions or update the PR. Try commenting "@codex address that feedback".

[nishu-builder]

ty for this!