feat(playground): FileTree filter per bahasa — C dan Python dipisah

- FileTree menerima prop language ('c' | 'python', default 'c')
- hanya merender file dengan ekstensi yang cocok (.c atau .py)
- tombol + buat file dengan ekstensi bahasa aktif
- header menampilkan nama bahasa (C/Python), bukan generik 'File'
This commit is contained in:
a2nr 2026-08-01 22:39:20 +00:00
parent 152ca85718
commit ddfbbb80f3
1 changed files with 16 additions and 5 deletions

View File

@ -2,10 +2,17 @@
import { playgroundStore } from '$stores/playground'; import { playgroundStore } from '$stores/playground';
interface Props { interface Props {
language?: 'c' | 'python';
onselect?: (id: string) => void; onselect?: (id: string) => void;
} }
let { onselect }: Props = $props(); let { language = 'c', onselect }: Props = $props();
const fileExt = $derived(language === 'python' ? '.py' : '.c');
const langLabel = $derived(language === 'python' ? 'Python' : 'C');
const filteredFiles = $derived(
$playgroundStore.files.filter((f) => f.name.toLowerCase().endsWith(fileExt))
);
let renamingId = $state<string | null>(null); let renamingId = $state<string | null>(null);
let renameValue = $state(''); let renameValue = $state('');
@ -49,17 +56,21 @@
<div class="file-tree"> <div class="file-tree">
<div class="ft-header"> <div class="ft-header">
<span class="ft-title">File</span> <span class="ft-title">{langLabel} Files</span>
<button class="ft-new-btn" onclick={() => playgroundStore.addFile('main.c')} title="Buat file baru"> <button
class="ft-new-btn"
onclick={() => playgroundStore.addFile(language === 'python' ? 'main.py' : 'main.c')}
title={`Buat file ${fileExt} baru`}
>
+ +
</button> </button>
</div> </div>
{#if $playgroundStore.files.length === 0} {#if filteredFiles.length === 0}
<div class="ft-empty">Belum ada file. Klik + untuk membuat.</div> <div class="ft-empty">Belum ada file. Klik + untuk membuat.</div>
{:else} {:else}
<div class="ft-list"> <div class="ft-list">
{#each $playgroundStore.files as file (file.id)} {#each filteredFiles as file (file.id)}
<div <div
class="ft-item" class="ft-item"
class:active={file.id === $playgroundStore.activeFileId} class:active={file.id === $playgroundStore.activeFileId}