phc-run/src/components/Ide.astro

---
import { TreeView, EXAMPLE_TREE } from '@/client/components/TreeView.jsx'
import { Editor } from '@/client/components/Editor.jsx'

const { project } = Astro.props

const userName = project.split('/').at(0).slice(1)
const projectName = project.split('/').at(-1)
---

<div class="ide">
    <div class="sidebar">
        <div class="logo">PHC / Run</div>

        <div class="flex-row">
            <button class="icon">
                <div class="material-symbols-outlined">home</div>
            </button>
            <div class="project-details flex-grow">
                <div class="title">
                    {projectName}
                </div>
                <div class="open">
                    <div class="material-symbols-outlined">unfold_more</div>
                </div>
            </div>
        </div>

        <div class="section">
            <div class="spoiler">
                <div class="material-symbols-outlined">account_tree</div>
                <div class="title">Files</div>
                <div class="material-symbols-outlined">keyboard_arrow_down</div>
            </div>
            <div class="content">
                <TreeView client:load value={EXAMPLE_TREE} />
            </div>
        </div>
        <div class="section">
            <div class="spoiler">
                <div class="material-symbols-outlined">chat</div>
                <div class="title">Conversation</div>
                <div class="material-symbols-outlined">keyboard_arrow_down</div>
            </div>
            <div class="content">...</div>
        </div>
        <div class="section">
            <div class="spoiler">
                <div class="material-symbols-outlined">settings</div>
                <div class="title">Settings</div>
                <div class="material-symbols-outlined">keyboard_arrow_down</div>
            </div>
        </div>
        <div class="spacer"></div>
        <div class="user-details">
            <div class="profile">
                <img src={`https://avatar.iran.liara.run/username?username=${userName}`} alt="profile picture" />
            </div>
            <div class="username">{userName}</div>
            <div class="email">{userName}@exmaple.com</div>
        </div>
    </div>
    <div class="header">
        <div class="search">
            <div class="material-symbols-outlined">search</div>
            <input type="text" placeholder="Search a snippet..." />
        </div>
        <div class="actions">
            <button class="icon">
                <div class="material-symbols-outlined">terminal</div>
            </button>
            <button class="run">
                <div class="material-symbols-outlined">play_arrow</div>
                Run
            </button>
        </div>
    </div>
    <div class="tabbed-editor">
        <div class="tabs">
            <div class="tab active">
                <div class="title">main.c</div>
                <div class="buttons">
                    <button class="flat icon">
                        <div class="material-symbols-outlined">close</div>
                    </button>
                </div>
            </div>
            <div class="tab">
                <div class="title">data.csv</div>
                <div class="buttons">
                    <button class="flat icon">
                        <div class="material-symbols-outlined">close</div>
                    </button>
                </div>
            </div>
        </div>
        <div class="editor">
            <Editor client:load />
        </div>
    </div>
    <div class="terminal">
        <div class="title">Terminal</div>
        <div class="actions">
            <button class="flat icon">
                <div class="material-symbols-outlined">delete</div>
            </button>
            <button class="flat icon">
                <div class="material-symbols-outlined">close</div>
            </button>
        </div>
        <div class="content">
            <pre><code>{`/ # ls`}</code></pre>
        </div>
    </div>
    <div class="status">Websocket connection active</div>
</div>