clean up folders, created sub-components

2026-06-11 11:28:58 +09:00
parent b40e5886b5
commit 6b13522d6d
9 changed files with 643 additions and 668 deletions
--- a/src/lib/timeline/TimelineCard.svelte
+++ b/src/lib/timeline/TimelineCard.svelte
@@ -0,0 +1,148 @@
+<script>
+  import PhotoGallery from '../shared/PhotoGallery.svelte';
+
+  /** @type {{ entry: import('../stores/journalStore.js').JournalEntry, onClick: () => void }} */
+  let { entry, onClick } = $props();
+
+  function formatDate(/** @type {string} */ iso) {
+    return new Date(iso).toLocaleDateString('en-US', {
+      year: 'numeric', month: 'short', day: 'numeric',
+    });
+  }
+</script>
+
+<li class="v-item">
+  <div class="v-dot" aria-hidden="true"></div>
+  <div class="v-entry-wrap">
+    <div class="above-card">
+      <time class="above-date" datetime={entry.date}>{formatDate(entry.date)}</time>
+      <span class="above-sep">·</span>
+      <span class="above-loc">{entry.location.city}, {entry.location.country}</span>
+      <span class="above-sep">·</span>
+      <span class="above-days">{entry.days} {entry.days === 1 ? 'day' : 'days'}</span>
+    </div>
+
+    <div class="entry-card" role="button" tabindex="0"
+      onclick={onClick}
+      onkeydown={(e) => e.key === 'Enter' && onClick()}>
+
+      <PhotoGallery photos={entry.photos} height="220px" />
+
+      <div class="entry-body">
+        <h2 class="entry-title">{entry.title}</h2>
+        {#if entry.memo}
+          <p class="entry-memo">{entry.memo}</p>
+        {/if}
+        <div class="entry-song">
+          <svg class="song-icon" width="13" height="13" viewBox="0 0 24 24" fill="none">
+            <path d="M9 18V5l12-2v13" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+            <circle cx="6" cy="18" r="3" stroke="currentColor" stroke-width="2"/>
+            <circle cx="18" cy="16" r="3" stroke="currentColor" stroke-width="2"/>
+          </svg>
+          <span class="song-title">{entry.song.title}</span>
+          <span class="song-sep">·</span>
+          <span class="song-artist">{entry.song.artist}</span>
+          <span class="trip-badge trip-badge--{entry.tripType}">
+            {entry.tripType === 'solo' ? 'Solo' : 'With Friends'}
+          </span>
+        </div>
+      </div>
+    </div>
+  </div>
+</li>
+
+<style>
+  /* Above-card meta */
+  .above-card {
+    display: flex;
+    align-items: center;
+    gap: 6px;
+    flex-wrap: wrap;
+    margin-bottom: 8px;
+  }
+  .above-date { font-size: 12px; font-weight: 500; color: var(--text-h, #08060d); }
+  .above-loc, .above-days { font-size: 12px; color: var(--text, #6b6375); }
+  .above-sep { font-size: 11px; color: var(--border, #c8c6cc); user-select: none; }
+
+  /* Card */
+  .entry-card {
+    display: block;
+    width: 100%;
+    box-sizing: border-box;
+    border: 1px solid var(--border, #e5e4e7);
+    border-radius: 14px;
+    overflow: hidden;
+    background: var(--bg, #fff);
+    cursor: pointer;
+    transition: box-shadow 0.2s, transform 0.15s;
+    text-align: left;
+  }
+  .entry-card:hover {
+    box-shadow: 0 6px 24px rgba(0,0,0,0.1);
+    transform: translateY(-2px);
+  }
+
+  .entry-body { padding: 14px 18px 18px; }
+
+  .entry-title {
+    font-size: 16px;
+    font-weight: 600;
+    color: var(--text-h, #08060d);
+    margin: 0 0 6px;
+    letter-spacing: -0.2px;
+  }
+
+  .entry-memo {
+    font-size: 13px;
+    line-height: 1.6;
+    color: var(--text, #6b6375);
+    margin: 0 0 10px;
+  }
+
+  .entry-song {
+    display: flex;
+    align-items: center;
+    gap: 5px;
+    font-size: 12px;
+    color: var(--text, #6b6375);
+    padding-top: 10px;
+    border-top: 1px solid var(--border, #e5e4e7);
+  }
+  .song-icon { flex-shrink: 0; color: var(--accent, #aa3bff); }
+  .song-title { font-weight: 500; color: var(--text-h, #08060d); }
+  .song-sep { opacity: 0.35; }
+
+  .entry-song .trip-badge { margin-left: auto; flex-shrink: 0; }
+  .trip-badge {
+    display: inline-block;
+    font-size: 11px;
+    font-weight: 500;
+    padding: 2px 8px;
+    border-radius: 20px;
+  }
+  .trip-badge--solo    { background: rgba(245,158,11,0.12); color: #b45309; }
+  .trip-badge--friends { background: rgba(59,130,246,0.12); color: #1d4ed8; }
+
+  /* Timeline line & dot */
+  .v-item { display: flex; gap: 24px; align-items: flex-start; padding-bottom: 36px; }
+  .v-item:last-child { padding-bottom: 0; }
+
+  .v-dot {
+    flex-shrink: 0;
+    width: 22px;
+    height: 22px;
+    border-radius: 50%;
+    background: var(--accent, #aa3bff);
+    border: 3px solid var(--bg, #fff);
+    box-shadow: 0 0 0 2px var(--accent, #aa3bff);
+    margin-top: 28px;
+    z-index: 1;
+  }
+
+  .v-entry-wrap { flex: 1; display: flex; flex-direction: column; }
+
+  @media (max-width: 600px) {
+    .v-dot { width: 18px; height: 18px; }
+    .v-item { gap: 16px; }
+  }
+</style>