Skip to content

feat: scaffold KI Hypothesen Test React/Vite app - #14

Merged
MarcelRaschke merged 1 commit into
masterfrom
vibe/ki-hypothesen-test-app-3e4360
Aug 18, 2026
Merged

MarcelRaschke merged 1 commit into
masterfrom
vibe/ki-hypothesen-test-app-3e4360

Conversation

@MarcelRaschke

Copy link
Copy Markdown
Owner

Summary

Scaffolds a new React + Vite + TypeScript SPA ("KI Hypothesen Test") in the ki-hypothesen-test/ subfolder. This app is independent of the existing C++ Kodi visualization addon and sits alongside it — it does not touch any C++ build files, shaders, or addon resources.

This was built from a narrative spec; none of the described React work existed in the repo before (the repo is a C++ Kodi addon). The app is now scaffolded from scratch as requested.

What's included

  • Sidebar.tsx — collapsible, searchable sidebar listing categories and their topics; selecting a topic opens the modal.
  • LessonsTab.tsx — Knowledge Base tab with category cards, popular lessons (by popularity), and recent lessons (by date), rendered as responsive grids.
  • TopicModal.tsx — accessible modal showing a topic's description and its related lessons (closes on Escape / backdrop click).
  • types/hypothesis.ts — Hypothesis type with a topic field plus HypothesisStatus enum and German labels.
  • types/topics.ts — Category / Topic / Lesson types.
  • data/topics.json — static seed data (3 categories, 5 topics, 8 lessons).
  • hooks/useTopics.ts — custom hook exposing topic data plus derived popularLessons / recentLessons views and lookups.
  • App.tsx — tab switching (Hypotheses / Knowledge Base), collapsible sidebar, topic modal, hypothesis form with a topic dropdown, and a filterable hypothesis table (filter by topic, inline status change).

Notes

  • All type-only imports use import type (strict verbatimModuleSyntax enabled) — addressing the type-only import concern from the spec.
  • Tailwind CSS for styling; Vite dev server runs on http://localhost:5173/.
  • Subfolder .gitignore excludes node_modules/, dist/, and *.tsbuildinfo.

Verification

Run from ki-hypothesen-test/:

npm install
npm run build   # tsc -b (type-check) + vite build → ✅ pass
npm run dev     # Vite v5.4.21 ready in ~200ms on http://localhost:5173/
  • npm run build: pass — 37 modules transformed, output dist/assets/index-*.js (158.62 kB) and index-*.css (12.41 kB).
  • npm run dev: server boots cleanly on http://localhost:5173/.
  • tsc -b (strict, noUnusedLocals, noUnusedParameters, verbatimModuleSyntax): no errors.

The parent C++ addon build (CMakeLists.txt, src/*.cpp, shaders) is unchanged.

How to use

  1. cd ki-hypothesen-test && npm install && npm run dev
  2. Open http://localhost:5173/.
  3. Sidebar → browse/search topics; click a topic to open the modal.
  4. Knowledge Base tab → category cards, popular & recent lessons.
  5. Hypotheses tab → add a hypothesis (title, description, topic); filter the table by topic; change status inline.

Add an independent React + Vite + TypeScript SPA in the
ki-hypothesen-test/ subfolder (unrelated to the C++ Kodi addon).

Components:
- Sidebar: collapsible, searchable topics sidebar (categories + topics)
- LessonsTab: knowledge base with category cards, popular & recent lessons
- TopicModal: accessible modal for topic details + related lessons

Data/types/hooks:
- types/hypothesis.ts: Hypothesis type incl.  field + status enums
- types/topics.ts: Category / Topic / Lesson types
- data/topics.json: static categories, topics, lessons
- hooks/useTopics.ts: custom hook with derived popular/recent views

App.tsx wires tabs (Hypotheses / Knowledge Base), sidebar, modal,
hypothesis form with topic dropdown, and filterable hypothesis table.

Uses  for all type-only imports (verbatimModuleSyntax).
Build verified: tsc -b + vite build pass.

Co-authored-by: MarcelRaschke <MarcelRaschke@users.noreply.github.com>
@MarcelRaschke MarcelRaschke self-assigned this Aug 18, 2026
@MarcelRaschke
MarcelRaschke marked this pull request as ready for review August 18, 2026 05:53

@greptile-apps greptile-apps Bot left a comment

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Your trial has ended. Reactivate Greptile to resume code reviews.

@MarcelRaschke
MarcelRaschke merged commit 2f23083 into master Aug 18, 2026
2 of 7 checks passed
MarcelRaschke added a commit that referenced this pull request Aug 26, 2026
Static build of the React/Vite app for GitHub Pages deployment.
Serves at: https://MarcelRaschke.github.io/visualization.matrix/ki-hypothesen-test/

Closes #14

Co-authored-by: MarcelRaschke <MarcelRaschke@users.noreply.github.com>
MarcelRaschke added a commit that referenced this pull request Aug 30, 2026
…sistence (#16)

* feat: expand topics, customize Tailwind styling, add localStorage persistence

- Add 3 new categories (Modellarchitekturen, Datenverarbeitung, Zukunft & Forschung)
- Add 12 new topics with 28 lessons (total: 6 categories, 22 topics, 36 lessons)
- Customize Tailwind with primary/secondary color palettes, Inter font, animations
- Add useLocalStorage hook for hypothesis persistence across sessions
- Add delete functionality with confirmation
- Update all components to use custom Tailwind classes

Closes #14

Co-authored-by: MarcelRaschke <MarcelRaschke@users.noreply.github.com>

* docs: add built KI Hypothesen Test app to docs/ki-hypothesen-test/

Static build of the React/Vite app for GitHub Pages deployment.
Serves at: https://MarcelRaschke.github.io/visualization.matrix/ki-hypothesen-test/

Closes #14

Co-authored-by: MarcelRaschke <MarcelRaschke@users.noreply.github.com>

---------

Co-authored-by: Vibe Nuage Agent <vibe@mistral.ai>
Co-authored-by: MarcelRaschke <MarcelRaschke@users.noreply.github.com>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants