Hacktoberfest 2026:メンテナが10月に向けて印を付けた、オープンで初心者向けの issue。 Hacktoberfest の issue を見る

Clean up frontend: compact model select + polished UI

オープン
#2 コメント 0 件 リアクション 0 件 担当者 0 名 GitHub で見る

まだ誰も着手していません。

評価

難易度
3/5
見積もり時間
1〜2日
初心者へのやさしさ
72/100
issue の種類
機能追加
明瞭さ
明確に書かれている
活発さ
静か
技術スタック
typescript
領域
design, frontend

調査の方向性

まず src/components/chat/model-selector.tsx と現在のモデル状態の流れを読み、次に src/components/providers.tsx と src/components/chat/chat-panel.tsx を確認します。共有の ModelProvider を追加し、セレクターを src/components/nav.tsx に移動し、Claude と Gemini の SVG アイコンを src/components/icons/model-icons.tsx に作成します。コンパクトな nav セレクターでチャットモデルを制御でき、枠線付きのセレクターヘッダーが削除されていれば完了です。

索引モデルが issue の本文から書いたものです。

説明

Why

The current model selector uses two large side-by-side cards that take up too much vertical space and don't feel polished enough for the hackathon demo. We want to impress judges with a minimal, clean interface.

What

  • Replace card-based model selector with a compact Select dropdown in the nav bar
  • Add proper Claude and Gemini icon marks (SVG, icon-only — no text logos)
  • Remove the bordered header section from the chat panel — the selector moves into the nav
  • Create a shared model context so nav and chat panel can share model state cleanly

Files to touch

File Action
src/components/icons/model-icons.tsx New — Claude & Gemini SVG icons
src/components/chat/model-context.tsx New — shared model state context
src/components/chat/model-selector.tsx Rewrite — cards → Select dropdown
src/components/nav.tsx Add ModelSelector to right-side controls
src/components/chat/chat-panel.tsx Remove selector header, use context
src/components/providers.tsx Add ModelProvider

Reference

Style/font inspiration: https://github.com/lfglabs-dev/private-ethereum-assistant

主要言語
TypeScript
スター
0
フォーク
0
PR マージ指標
30日以内にマージされた PR はありません

コントリビューションガイド

このリポジトリのコントリビューションガイドは索引されていません

はじめの一歩

  1. issue を最後まで読み、次にプロジェクトのコントリビューションガイドを読みます。
  2. 着手することを issue にコメントします — 二人が同じ作業をするのを防げます。
  3. リポジトリをフォークし、ブランチを切って変更します。
  4. issue 番号を参照したプルリクエストを送ります。

似ている issue

TypeScript の issue をもっと見る

新しい issue をメールで受け取る

初心者向けの GitHub issue を短くまとめたダイジェスト。