ufh/web/Pins.svelte

38 lines
918 B
Svelte

<script lang="ts">
// TODO: rename this to Workspaces.svelte?
// TODO: implement
// workspaces are a cross between (discord server, matrix space) and browser window
let workspaces: Array<Workspace> = [];
type ref = string;
interface Workspace {
name: string,
// icon: ref,
events: Array<ref>,
}
</script>
<nav id="pins">
{#each workspaces as _workspace}
<div class="item"></div>
{/each}
</nav>
<style lang="scss">
#pins {
grid-area: pin;
contain: strict;
display: flex;
flex-direction: column;
padding: calc(8px / var(--resize));
gap: calc(8px / var(--resize));
overflow-y: auto;
width: var(--pin-size);
background: var(--bg-quartiary);
& > .item {
background: var(--bg-primary);
min-height: calc(48px / var(--resize));
width: calc(48px / var(--resize));
border-radius: calc(4px / var(--resize));
}
}
</style>