feat: integrate StarRating component into MediaFormModal for improved rating input

src/lib/MediaFormModal.svelte

@@ -2,6 +2,7 @@
   import type { Media } from './interfaces';
   import { fade, scale } from 'svelte/transition';
   import DatePicker from './DatePicker.svelte';
+  import StarRating from './StarRating.svelte';
 
   let {show, mode, submitMedia, handleClose, media: initialMedia, itemType} = $props();
   let media: Media = $state({
@@ -114,17 +115,11 @@
           />
         </div>
 
-        <div class="flex justify-between items-center gap-6">
-          <label class="font-medium text-gray-700 whitespace-nowrap" for="rating">评分</label>
-          <input
-            id="rating"
-            type="number"
-            min="0"
-            max="10"
-            step="0.5"
-            bind:value={media.rating}
-            class="w-full px-3 py-2 border border-gray-300 rounded-md focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
-            aria-label="输入评分，范围0-10"
+        <div class="flex start items-center gap-6">
+          <label for="score" class="font-medium text-gray-700 whitespace-nowrap">评分</label>
+          <StarRating
+            value={media.rating}
+            onSelect={(score: number) => media.rating = score}
           />
         </div>
         {#if media.type === 'game' || media.type === 'other'}