컴포넌트를 도메인과 무관한 UI 컴포넌트와 도메인 컴포넌트로 재구성하고 중복된 파일 목록 컴포넌트 통합 및 모듈 간 의존성 방향을 ESLint로 강제

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>

src/lib/features/filesystem/components/FileThumbnailButton.svelte

@@ -0,0 +1,34 @@
+<script lang="ts">
+  import { getFileThumbnail } from "#lib/client/cache/index.js";
+  import type { SummarizedFileInfo } from "#lib/features/filesystem/index.js";
+
+  import IconFavorite from "~icons/material-symbols/favorite";
+
+  interface Props {
+    info: SummarizedFileInfo;
+    onclick?: (file: SummarizedFileInfo) => void;
+  }
+
+  let { info, onclick }: Props = $props();
+
+  let thumbnail = $derived(getFileThumbnail(info));
+</script>
+
+<button
+  onclick={onclick && (() => setTimeout(() => onclick(info), 100))}
+  class="relative aspect-square overflow-hidden rounded-sm transition active:scale-95 active:brightness-90"
+>
+  {#if thumbnail?.url}
+    <img src={thumbnail?.url} alt={info.name} class="size-full object-cover" />
+  {:else}
+    <div class="size-full bg-gray-100"></div>
+  {/if}
+  {#if info.isFavorite}
+    <div class={["absolute right-0.5 bottom-0.5"]}>
+      <IconFavorite
+        class="text-sm text-red-500"
+        style="filter: drop-shadow(0 0 1px white) drop-shadow(0 0 1px white)"
+      />
+    </div>
+  {/if}
+</button>