feat: add minimal theme with StepList component and styling

- Implemented a new minimal theme for the itinerary application.
- Created StepList component to display steps with date, time, title, location, and notes.
- Added theme configuration in index.ts and corresponding CSS styles.
- Updated itinerary page to utilize the new StepList component.
- Refactored itinerary loading logic to include theme data.
- Removed deprecated itinerary detail page and associated logic.
- Updated database schema to support new step and itinerary attributes.
- Added new types for steps and themes in the types package.
- Updated package dependencies to latest versions.

Author: soranjiro

.gitignore

@@ -146,7 +146,6 @@ dist/
 .wrangler/
 
 00_memo
-memo*
 
 # TurboRepo cache
 .turbo/

Makefile

@@ -1,4 +1,4 @@
-.PHONY: build deploy deploy-api deploy-web dev
+.PHONY: build deploy deploy-api deploy-web dev migrate
 
 build:
 	pnpm run build
@@ -13,3 +13,6 @@ deploy-web:
 
 dev:
 	pnpm run dev
+
+migrate:
+	cd apps/api && pnpm wrangler d1 execute tabitabi --local --file=../../migrations/0001_simple_schema.sql

apps/api/src/index.ts

@@ -6,16 +6,13 @@ import steps from './routes/steps';
 
 const app = new Hono<{ Bindings: Env }>();
 
-// Apply CORS middleware
 app.use('*', corsMiddleware);
 
-// Health check
 app.get('/health', (c) => {
   return c.json({ status: 'ok', service: 'tabitabi-api' });
 });
 
-// API routes
 app.route('/api/v1/itineraries', itineraries);
-app.route('/api/v1/itineraries', steps);
+app.route('/api/v1/steps', steps);
 
 export default app;

apps/api/src/routes/itineraries.ts

@@ -4,14 +4,12 @@ import { ItineraryService } from '../services/itinerary.service';
 
 const itineraries = new Hono<{ Bindings: Env }>();
 
-// List itineraries
 itineraries.get('/', async (c) => {
   const service = new ItineraryService(c.env.DB);
   const data = await service.list();
   return c.json({ success: true, data });
 });
 
-// Get itinerary by ID
 itineraries.get('/:id', async (c) => {
   const id = c.req.param('id');
   const service = new ItineraryService(c.env.DB);
@@ -24,15 +22,13 @@ itineraries.get('/:id', async (c) => {
   return c.json({ success: true, data });
 });
 
-// Create itinerary
 itineraries.post('/', async (c) => {
   const input = await c.req.json();
   const service = new ItineraryService(c.env.DB);
   const data = await service.create(input);
   return c.json({ success: true, data }, 201);
 });
 
-// Update itinerary
 itineraries.put('/:id', async (c) => {
   const id = c.req.param('id');
   const input = await c.req.json();
@@ -46,7 +42,6 @@ itineraries.put('/:id', async (c) => {
   return c.json({ success: true, data });
 });
 
-// Delete itinerary
 itineraries.delete('/:id', async (c) => {
   const id = c.req.param('id');
   const service = new ItineraryService(c.env.DB);

apps/api/src/routes/steps.ts

@@ -4,45 +4,80 @@ import { StepService } from '../services/step.service';
 
 const steps = new Hono<{ Bindings: Env }>();
 
-// Get steps for an itinerary
-steps.get('/:itineraryId/steps', async (c) => {
-  const itineraryId = c.req.param('itineraryId');
+steps.get('/', async (c) => {
+  const itineraryId = c.req.query('itinerary_id');
+
+  if (!itineraryId) {
+    return c.json({
+      success: false,
+      error: { code: 'VALIDATION_ERROR', message: 'itinerary_id is required' }
+    }, 400);
+  }
+
   const service = new StepService(c.env.DB);
   const data = await service.list(itineraryId);
   return c.json({ success: true, data });
 });
 
-// Add step
-steps.post('/:itineraryId/steps', async (c) => {
-  const itineraryId = c.req.param('itineraryId');
+steps.get('/:stepId', async (c) => {
+  const stepId = c.req.param('stepId');
+  const service = new StepService(c.env.DB);
+  const data = await service.get(stepId);
+
+  if (!data) {
+    return c.json({
+      success: false,
+      error: { code: 'NOT_FOUND', message: 'Step not found' }
+    }, 404);
+  }
+
+  return c.json({ success: true, data });
+});
+
+steps.post('/', async (c) => {
   const input = await c.req.json();
+
+  if (!input.itinerary_id || !input.title || !input.date || !input.time) {
+    return c.json({
+      success: false,
+      error: {
+        code: 'VALIDATION_ERROR',
+        message: 'itinerary_id, title, date, and time are required'
+      }
+    }, 400);
+  }
+
   const service = new StepService(c.env.DB);
-  const data = await service.create(itineraryId, input);
+  const data = await service.create(input);
   return c.json({ success: true, data }, 201);
 });
 
-// Update step
-steps.put('/steps/:stepId', async (c) => {
+steps.put('/:stepId', async (c) => {
   const stepId = c.req.param('stepId');
   const input = await c.req.json();
   const service = new StepService(c.env.DB);
   const data = await service.update(stepId, input);
 
   if (!data) {
-    return c.json({ success: false, error: { code: 'NOT_FOUND', message: 'Step not found' } }, 404);
+    return c.json({
+      success: false,
+      error: { code: 'NOT_FOUND', message: 'Step not found' }
+    }, 404);
   }
 
   return c.json({ success: true, data });
 });
 
-// Delete step
-steps.delete('/steps/:stepId', async (c) => {
+steps.delete('/:stepId', async (c) => {
   const stepId = c.req.param('stepId');
   const service = new StepService(c.env.DB);
   const success = await service.delete(stepId);
 
   if (!success) {
-    return c.json({ success: false, error: { code: 'NOT_FOUND', message: 'Step not found' } }, 404);
+    return c.json({
+      success: false,
+      error: { code: 'NOT_FOUND', message: 'Step not found' }
+    }, 404);
   }
 
   return c.json({ success: true, data: null });

apps/api/src/services/itinerary.service.ts

@@ -5,6 +5,14 @@ import { generateId, getCurrentTimestamp } from '../utils';
 export class ItineraryService {
   constructor(private db: D1Database) {}
 
+  async list(): Promise<Itinerary[]> {
+    const result = await this.db
+      .prepare('SELECT * FROM itineraries ORDER BY created_at DESC')
+      .all();
+
+    return result.results ? result.results.map(row => this.mapToItinerary(row)) : [];
+  }
+
   async get(id: string): Promise<Itinerary | null> {
     const result = await this.db
       .prepare('SELECT * FROM itineraries WHERE id = ?')
@@ -15,21 +23,20 @@ export class ItineraryService {
   }
 
   async create(input: CreateItineraryInput): Promise<Itinerary> {
-    const id = generateId(8);
+    const id = generateId(32);
     const now = getCurrentTimestamp();
 
     const itinerary: Itinerary = {
       id,
       title: input.title,
-      startDate: input.startDate,
-      endDate: input.endDate,
-      themeId: input.themeId || 'standard',
-      createdAt: now,
+      theme_id: input.theme_id || 'minimal',
+      created_at: now,
+      updated_at: now,
     };
 
     await this.db
-      .prepare('INSERT INTO itineraries (id, title, start_date, end_date, theme_id, created_at) VALUES (?, ?, ?, ?, ?, ?)')
-      .bind(itinerary.id, itinerary.title, itinerary.startDate, itinerary.endDate, itinerary.themeId, itinerary.createdAt)
+      .prepare('INSERT INTO itineraries (id, title, theme_id, created_at, updated_at) VALUES (?, ?, ?, ?, ?)')
+      .bind(itinerary.id, itinerary.title, itinerary.theme_id, itinerary.created_at, itinerary.updated_at)
       .run();
 
     return itinerary;
@@ -39,40 +46,28 @@ export class ItineraryService {
     const existing = await this.get(id);
     if (!existing) return null;
 
-    const updated: Itinerary = {
-      ...existing,
-      ...input,
-    };
-
-    const fields = [];
-    const values = [];
+    const now = getCurrentTimestamp();
+    const fields = ['updated_at = ?'];
+    const values = [now];
 
     if (input.title !== undefined) {
       fields.push('title = ?');
       values.push(input.title);
     }
-    if (input.startDate !== undefined) {
-      fields.push('start_date = ?');
-      values.push(input.startDate);
-    }
-    if (input.endDate !== undefined) {
-      fields.push('end_date = ?');
-      values.push(input.endDate);
-    }
-    if (input.themeId !== undefined) {
+    if (input.theme_id !== undefined) {
       fields.push('theme_id = ?');
-      values.push(input.themeId);
+      values.push(input.theme_id);
     }
 
-    if (fields.length > 0) {
+    if (fields.length > 1) {
       values.push(id);
       await this.db
         .prepare(`UPDATE itineraries SET ${fields.join(', ')} WHERE id = ?`)
         .bind(...values)
         .run();
     }
 
-    return updated;
+    return await this.get(id);
   }
 
   async delete(id: string): Promise<boolean> {
@@ -88,10 +83,9 @@ export class ItineraryService {
     return {
       id: row.id,
       title: row.title,
-      startDate: row.start_date,
-      endDate: row.end_date,
-      themeId: row.theme_id,
-      createdAt: row.created_at,
+      theme_id: row.theme_id,
+      created_at: row.created_at,
+      updated_at: row.updated_at,
     };
   }
 }