feat: add snippets header, fragments (basic)

Author: antonreshetov

src/renderer/assets/scss/variables.scss

@@ -2,11 +2,12 @@
   --sidebar-width: 180px;
   --snippets-list-width: 220px;
   --snippets-view-header-height: 60px;
+  --snippets-view-header-top-height: 30px;
   --snippets-view-header-full-height: calc(var(--snippets-view-header-height) + var(--snippets-tags-height));
   --snippets-view-footer-height: 30px;
-  --snippet-tab-header-height: 40px;
+  --snippet-header-fragment-height: 25px;
   --snippet-tab-height: 30px;
-  --title-bar-height: 20px;
+  --title-bar-height: 15px;
   --menu-header: 80px;
 
   --spacing-unit: 4px;

src/renderer/components/editor/TheEditor.vue

@@ -1,5 +1,8 @@
 <template>
-  <div class="editor">
+  <div
+    class="editor"
+    :class="{ 'with-fragments': fragments }"
+  >
     <div
       ref="editorRef"
       class="main"
@@ -38,6 +41,7 @@ import { languages, oldLanguageMap } from './languages'
 interface Props {
   lang: Language
   theme: string
+  fragments: boolean
   modelValue: string
 }
 
@@ -48,7 +52,8 @@ interface Emits {
 
 const props = withDefaults(defineProps<Props>(), {
   lang: 'typescript',
-  theme: 'google'
+  theme: 'google',
+  fragments: false
 })
 
 const emit = defineEmits<Emits>()
@@ -133,8 +138,21 @@ watch(
 
 <style lang="scss" scoped>
 .editor {
+  padding-top: 4px;
+  &.with-fragments {
+    .main {
+      height: calc(
+        100vh - var(--title-bar-height) - var(--snippets-view-header-top-height) -
+          var(--snippets-view-footer-height) -
+          var(--snippet-header-fragment-height)
+      );
+    }
+  }
   .main {
-    height: calc(100vh - var(--title-bar-height) - 30px);
+    height: calc(
+      100vh - var(--title-bar-height) - var(--snippets-view-header-top-height) -
+        var(--snippets-view-footer-height)
+    );
   }
   .footer {
     height: 30px;

src/renderer/components/snippets/SnippetFragments.vue

@@ -0,0 +1,43 @@
+<template>
+  <div class="fragments">
+    <div
+      v-for="(i, index) in snippetStore.fragmentLabels"
+      :key="index"
+      class="item"
+      :class="{ 'is-active': index == snippetStore.fragment }"
+      @click="onClickFragment(index)"
+    >
+      {{ i }}
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { useSnippetStore } from '@/store/snippets'
+
+const snippetStore = useSnippetStore()
+
+const onClickFragment = (index: number) => {
+  snippetStore.fragment = index
+}
+</script>
+
+<style lang="scss" scoped>
+.fragments {
+  display: flex;
+  align-items: center;
+  height: var(--snippet-header-fragment-height);
+  .item {
+    padding: 0 var(--spacing-xs);
+    display: flex;
+    align-items: center;
+    height: var(--snippet-header-fragment-height);
+    width: 1000%;
+    border-top: 1px solid var(--color-border);
+    border-bottom: 1px solid var(--color-border);
+    &.is-active {
+      background-color: var(--color-contrast-lower);
+    }
+  }
+}
+</style>

src/renderer/components/snippets/SnippetHeader.vue

@@ -0,0 +1,44 @@
+<template>
+  <div class="header">
+    <div class="top">
+      <div class="name">
+        {{ snippetStore.snippet?.name }}
+      </div>
+      <div class="action">
+        <AppActionButton>
+          <UniconsArrow />
+        </AppActionButton>
+        <AppActionButton>
+          <UniconsPlus />
+        </AppActionButton>
+      </div>
+    </div>
+    <div class="bottom">
+      <SnippetFragments v-if="snippetStore.isFragmentsShow" />
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { useSnippetStore } from '@/store/snippets'
+
+const snippetStore = useSnippetStore()
+</script>
+
+<style lang="scss" scoped>
+.header {
+  .top {
+    padding: 0 var(--spacing-xs);
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    height: var(--snippets-view-header-top-height);
+  }
+  .name {
+    font-size: 16px;
+  }
+  .action {
+    display: flex;
+  }
+}
+</style>

src/renderer/components/snippets/SnippetsView.vue

@@ -0,0 +1,40 @@
+<template>
+  <div class="snippets-view">
+    <SnippetHeader />
+    <TheEditor
+      v-model="snippet"
+      v-model:lang="lang"
+      :fragments="snippetStore.isFragmentsShow"
+    />
+  </div>
+</template>
+
+<script setup lang="ts">
+import { useSnippetStore } from '@/store/snippets'
+import { computed } from 'vue'
+
+const snippetStore = useSnippetStore()
+
+const snippet = computed({
+  get: () => snippetStore.currentContent || '',
+  set: v => {
+    if (!v) return
+    if (snippetStore.currentContent !== v) {
+      snippetStore.patchCurrentSnippetContentByKey('value', v)
+    }
+  }
+})
+
+const lang = computed({
+  get: () => snippetStore.currentLanguage || 'plain_text',
+  set: v => {
+    snippetStore.patchCurrentSnippetContentByKey('language', v)
+  }
+})
+</script>
+
+<style lang="scss" scoped>
+.snippets-view {
+  padding-top: var(--title-bar-height);
+}
+</style>