style(playtime): add compact view and tweak style of compact playtime details

main/components/PlaytimeDisplay.vue

@@ -2,17 +2,17 @@
   <div v-if="stats" class="flex flex-col gap-1">
     <!-- Main playtime display -->
     <div class="flex items-center gap-2">
-      <ClockIcon class="w-4 h-4 text-zinc-400" />
-      <span class="text-sm text-zinc-300">
-        {{ formatPlaytime(stats.totalPlaytimeSeconds) }}
+      <ClockIcon class="w-5 h-5 text-zinc-400" />
+      <span class="text-base text-zinc-300 font-medium">
+        {{ formatPlaytime(stats.totalPlaytimeSeconds) }} played
       </span>
-      <span v-if="isActive" class="text-xs text-green-400 font-medium">
+      <span v-if="isActive && showActiveIndicator" class="text-sm text-green-400 font-medium">
         • Playing
       </span>
     </div>
     
     <!-- Additional details when expanded -->
-    <div v-if="showDetails" class="text-xs text-zinc-400 space-y-1 ml-6">
+    <div v-if="showDetails" class="text-xs text-zinc-400 space-y-1 ml-7">
       <div>{{ stats.sessionCount }} session{{ stats.sessionCount !== 1 ? 's' : '' }}</div>
       <div v-if="stats.sessionCount > 0">
         Avg: {{ formatPlaytime(stats.averageSessionLength) }} per session
@@ -26,8 +26,8 @@
   
   <!-- No playtime data -->
   <div v-else-if="showWhenEmpty" class="flex items-center gap-2 text-zinc-500">
-    <ClockIcon class="w-4 h-4" />
-    <span class="text-sm">Never played</span>
+    <ClockIcon class="w-5 h-5" />
+    <span class="text-base">Never played</span>
   </div>
 </template>
 
@@ -40,12 +40,14 @@ interface Props {
   isActive?: boolean;
   showDetails?: boolean;
   showWhenEmpty?: boolean;
+  showActiveIndicator?: boolean;
 }
 
 const props = withDefaults(defineProps<Props>(), {
   isActive: false,
   showDetails: false,
   showWhenEmpty: true,
+  showActiveIndicator: true,
 });
 
 const { formatPlaytime, formatRelativeTime } = usePlaytime();

main/pages/library/[id]/index.vue

@@ -28,7 +28,8 @@
           <PlaytimeDisplay 
             :stats="gamePlaytime" 
             :is-active="isPlaytimeActive"
-            :show-details="true"
+            :show-details="false"
+            :show-active-indicator="false"
           />
         </div>