[PR #9] [MERGED] Migrate to SvelteKit with TypeScript #15

New issue

Closed

opened 2026-03-16 12:11:48 +03:00 by kerem · 0 comments

kerem commented

2026-03-16 12:11:48 +03:00

Owner

📋 Pull Request Information

Original PR: https://github.com/hipcityreg/situation-monitor/pull/9
Author: @xaelophone
Created: 1/11/2026
Status: ✅ Merged
Merged: 1/11/2026
Merged by: @xaelophone

Base: main ← Head: feature/sveltekit-migration

📝 Commits (10+)

032e645 Phase 0: Initialize SvelteKit + TypeScript foundation
4e8e919 Phase 1: Migrate service layer to TypeScript
5d7279a Phase 2: Implement Svelte stores and analysis modules
7d92036 Phase 3: Build core component library
70ff42a Phase 4: Migrate all panels to Svelte components
6639c83 Phase 5: Complete integration and cleanup
1231630 Fix API data fetching and add missing panel data
1fea39b Add Iran Crisis panel from main branch feature
3943e31 Add first-visit onboarding with preset profiles
c32bde5 Fix Svelte 5 $derived() misuse and remove unused code

📊 Changes

118 files changed (+32201 additions, -0 deletions)

View changed files

➕ .gitignore (+32 -0)
➕ .prettierignore (+23 -0)
➕ .prettierrc (+15 -0)
➕ eslint.config.js (+45 -0)
➕ package-lock.json (+7514 -0)
➕ package.json (+50 -0)
➕ playwright.config.ts (+25 -0)
➕ postcss.config.js (+6 -0)
➕ src/app.css (+132 -0)
➕ src/app.html (+14 -0)
➕ src/lib/analysis/correlation.test.ts (+212 -0)
➕ src/lib/analysis/correlation.ts (+270 -0)
➕ src/lib/analysis/index.ts (+35 -0)
➕ src/lib/analysis/main-character.test.ts (+294 -0)
➕ src/lib/analysis/main-character.ts (+97 -0)
➕ src/lib/analysis/narrative.test.ts (+200 -0)
➕ src/lib/analysis/narrative.ts (+207 -0)
➕ src/lib/api/index.ts (+14 -0)
➕ src/lib/api/markets.ts (+121 -0)
➕ src/lib/api/misc.ts (+145 -0)

...and 80 more files

📄 Description

Summary

Complete migration from vanilla JS to SvelteKit + TypeScript
Implement Svelte 5 runes ($state, $derived, $effect) for reactivity
Add masonry-style CSS columns layout for denser panel arrangement
Enable map pan/zoom on all devices with working reset button
Add first-visit onboarding with preset dashboard profiles
Fix various UI issues (header spacing, panel density)

Changes

Architecture

SvelteKit app with TypeScript throughout
Svelte stores for state management (news, markets, monitors, settings, refresh)
Modular component library (panels, modals, layout, common)
Service layer with caching, circuit breaker, and request deduplication

Features

15+ dashboard panels (news, markets, crypto, commodities, analysis, etc.)
Interactive world map with hotspots, conflict zones, and chokepoints
Custom monitor system with keyword tracking
Onboarding flow with preset profiles (Investor, Analyst, Researcher, etc.)
Settings modal for panel visibility configuration

UI/UX

Dark military/ops-center theme
Responsive masonry layout (1-6 columns based on viewport)
Auto-refresh with manual override
Panel visibility toggles

Test plan

Verify all panels load and display data correctly
Test map pan/zoom/reset functionality
Verify onboarding flow for first-time visitors
Check responsive layout at various breakpoints
Test settings modal panel toggles

🤖 Generated with Claude Code

_{🔄 This issue represents a GitHub Pull Request. It cannot be merged through Gitea due to API limitations.}

## 📋 Pull Request Information **Original PR:** https://github.com/hipcityreg/situation-monitor/pull/9 **Author:** [@xaelophone](https://github.com/xaelophone) **Created:** 1/11/2026 **Status:** ✅ Merged **Merged:** 1/11/2026 **Merged by:** [@xaelophone](https://github.com/xaelophone) **Base:** `main` ← **Head:** `feature/sveltekit-migration` --- ### 📝 Commits (10+) - [`032e645`](https://github.com/hipcityreg/situation-monitor/commit/032e6456102c04a313524d781d580ea7b25a4244) Phase 0: Initialize SvelteKit + TypeScript foundation - [`4e8e919`](https://github.com/hipcityreg/situation-monitor/commit/4e8e919f03f93f6441b8c54b3b3961f68e8c3707) Phase 1: Migrate service layer to TypeScript - [`5d7279a`](https://github.com/hipcityreg/situation-monitor/commit/5d7279a24dcb4ce73bb9dfb7ee3b8892d4e889c0) Phase 2: Implement Svelte stores and analysis modules - [`7d92036`](https://github.com/hipcityreg/situation-monitor/commit/7d92036ba3df5272adfae16230a0eaf16b8c8fe6) Phase 3: Build core component library - [`70ff42a`](https://github.com/hipcityreg/situation-monitor/commit/70ff42a249de411d098ab2b76ed318ed8dc5f003) Phase 4: Migrate all panels to Svelte components - [`6639c83`](https://github.com/hipcityreg/situation-monitor/commit/6639c83532c1af8f064545356762a5fae8f35247) Phase 5: Complete integration and cleanup - [`1231630`](https://github.com/hipcityreg/situation-monitor/commit/12316308574ab2e7d3673ee87d42aa8ddf2e2898) Fix API data fetching and add missing panel data - [`1fea39b`](https://github.com/hipcityreg/situation-monitor/commit/1fea39b67fc44ce24eceed1579a57289b9dceebe) Add Iran Crisis panel from main branch feature - [`3943e31`](https://github.com/hipcityreg/situation-monitor/commit/3943e31dcea298fd47242090cefedd17df432d69) Add first-visit onboarding with preset profiles - [`c32bde5`](https://github.com/hipcityreg/situation-monitor/commit/c32bde50800a0e495b8585530375d265d3f3c1a0) Fix Svelte 5 $derived() misuse and remove unused code ### 📊 Changes **118 files changed** (+32201 additions, -0 deletions) <details> <summary>View changed files</summary> ➕ `.gitignore` (+32 -0) ➕ `.prettierignore` (+23 -0) ➕ `.prettierrc` (+15 -0) ➕ `eslint.config.js` (+45 -0) ➕ `package-lock.json` (+7514 -0) ➕ `package.json` (+50 -0) ➕ `playwright.config.ts` (+25 -0) ➕ `postcss.config.js` (+6 -0) ➕ `src/app.css` (+132 -0) ➕ `src/app.html` (+14 -0) ➕ `src/lib/analysis/correlation.test.ts` (+212 -0) ➕ `src/lib/analysis/correlation.ts` (+270 -0) ➕ `src/lib/analysis/index.ts` (+35 -0) ➕ `src/lib/analysis/main-character.test.ts` (+294 -0) ➕ `src/lib/analysis/main-character.ts` (+97 -0) ➕ `src/lib/analysis/narrative.test.ts` (+200 -0) ➕ `src/lib/analysis/narrative.ts` (+207 -0) ➕ `src/lib/api/index.ts` (+14 -0) ➕ `src/lib/api/markets.ts` (+121 -0) ➕ `src/lib/api/misc.ts` (+145 -0) _...and 80 more files_ </details> ### 📄 Description ## Summary - Complete migration from vanilla JS to SvelteKit + TypeScript - Implement Svelte 5 runes ($state, $derived, $effect) for reactivity - Add masonry-style CSS columns layout for denser panel arrangement - Enable map pan/zoom on all devices with working reset button - Add first-visit onboarding with preset dashboard profiles - Fix various UI issues (header spacing, panel density) ## Changes ### Architecture - SvelteKit app with TypeScript throughout - Svelte stores for state management (news, markets, monitors, settings, refresh) - Modular component library (panels, modals, layout, common) - Service layer with caching, circuit breaker, and request deduplication ### Features - 15+ dashboard panels (news, markets, crypto, commodities, analysis, etc.) - Interactive world map with hotspots, conflict zones, and chokepoints - Custom monitor system with keyword tracking - Onboarding flow with preset profiles (Investor, Analyst, Researcher, etc.) - Settings modal for panel visibility configuration ### UI/UX - Dark military/ops-center theme - Responsive masonry layout (1-6 columns based on viewport) - Auto-refresh with manual override - Panel visibility toggles ## Test plan - [ ] Verify all panels load and display data correctly - [ ] Test map pan/zoom/reset functionality - [ ] Verify onboarding flow for first-time visitors - [ ] Check responsive layout at various breakpoints - [ ] Test settings modal panel toggles 🤖 Generated with [Claude Code](https://claude.com/claude-code) --- <sub>🔄 This issue represents a GitHub Pull Request. It cannot be merged through Gitea due to API limitations.</sub>