feat: add snippet list (basic)

src/renderer/components/snippets/SnippetList.vue

@@ -0,0 +1,30 @@
+<template>
+  <div class="list">
+    <div class="header">
+      <SnippetListActionBar />
+    </div>
+    <div class="body">
+      <SnippetListItem
+        v-for="i in 30"
+        :key="i"
+      />
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts"></script>
+
+<style lang="scss" scoped>
+.list {
+  border-right: 1px solid var(--color-border);
+  display: grid;
+  grid-template-rows: 50px 1fr;
+}
+.header {
+  display: flex;
+}
+.body {
+  overflow-y: scroll;
+  height: calc(100vh - 50px);
+}
+</style>

src/renderer/components/snippets/SnippetListActionBar.vue

@@ -0,0 +1,26 @@
+<template>
+  <div class="action">
+    <UniconsSearch />
+    <input placeholder="Search...">
+    <UniconsPlus />
+  </div>
+</template>
+
+<script setup lang="ts"></script>
+
+<style lang="scss" scoped>
+.action {
+  display: flex;
+  align-items: center;
+  padding: var(--spacing-xs);
+  input {
+    outline: none;
+    border: none;
+    width: 100%;
+    padding: 0 var(--spacing-xs);
+  }
+  :deep(svg) {
+    flex-shrink: 0;
+  }
+}
+</style>

src/renderer/components/snippets/SnippetListItem.vue

@@ -0,0 +1,45 @@
+<template>
+  <div class="item">
+    <div class="header">
+      <div class="name">
+        <span> snippet name </span>
+      </div>
+    </div>
+    <div class="footer">
+      <div class="folder">
+        folder
+      </div>
+      <div class="date">
+        19/03/2022
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts"></script>
+
+<style lang="scss" scoped>
+.item {
+  // height: 100px;
+  padding: var(--spacing-xs);
+  border-bottom: 1px solid var(--color-border);
+}
+.name {
+  display: table;
+  table-layout: fixed;
+  width: 100%;
+  overflow: hidden;
+  span {
+    display: -webkit-box;
+    -webkit-line-clamp: 1;
+    -webkit-box-orient: vertical;
+  }
+}
+.footer {
+  font-size: 11px;
+  display: flex;
+  justify-content: space-between;
+  color: var(--color-contrast-medium);
+  padding-top: var(--spacing-xs);
+}
+</style>

src/renderer/views/Main.vue

@@ -1,6 +1,7 @@
 <template>
   <div class="main">
     <TheSidebar />
+    <SnippetList />
     <TheEditor
       v-model="snippet"
       v-model:lang="lang"
@@ -32,7 +33,7 @@ const lang = ref()
   height: 100vh;
   background-color: var(--color-bg);
   overflow: hidden;
-  grid-template-columns: 200px 1fr;
+  grid-template-columns: 200px 200px 1fr;
 }
 .update-available {
   position: absolute;