added functionality to create new files and directories

frontend/src/assets/main.css

@@ -50,6 +50,7 @@ button {
 }
 
 
+
 .button-row {
   display: flex;
   gap: 1rem;

frontend/src/components/NavigationSidebar.vue

@@ -1,10 +1,63 @@
 <script setup lang="ts">
+import { DirectoryContentRepository } from '@/repository/directory';
+import { NoteRepository } from '@/repository/note';
 import type { DirectoryContent } from '@/types'
+import { ref, type Ref } from 'vue';
 
 const props = defineProps<{
   currentDirectory: string
   directoryContent: DirectoryContent
 }>()
+
+
+const emit = defineEmits(["refresh"])
+
+const directoryRepository = new DirectoryContentRepository()
+const noteRepository = new NoteRepository()
+
+const isNoteCreation: Ref<boolean> = ref(false)
+const newNoteName: Ref<string> = ref("")
+const isDirectoryCreation: Ref<boolean> = ref(false)
+const newDirectoryName: Ref<string> = ref("")
+
+function startNoteCreation() {
+  isNoteCreation.value = true
+}
+
+function startDirectoryCreation() {
+  isDirectoryCreation.value = true
+}
+
+function cancelDirectoryCreation() {
+  newDirectoryName.value = ""
+  isDirectoryCreation.value = false
+}
+
+async function submitDirectoryCreation() {
+  const directoryPath = `${props.currentDirectory}${newDirectoryName.value}`
+  console.log("new dir", directoryPath)
+  await directoryRepository.createNew(directoryPath)
+  newDirectoryName.value = ""
+  isDirectoryCreation.value = false
+  emit("refresh")
+}
+
+async function submitFileCreation() {
+  const notePath = `${props.currentDirectory}${newNoteName.value}`
+  console.log("new note", notePath)
+  await noteRepository.saveNote({
+    path: notePath,
+    text: "",
+  })
+  newNoteName.value = ""
+  isNoteCreation.value = false
+  emit("refresh")
+}
+
+function cancelFileCreation() {
+  newNoteName.value = ""
+  isNoteCreation.value = false
+}
 </script>
 
 <template>
@@ -17,32 +70,71 @@ const props = defineProps<{
             <p class="bullet">⧐</p> {{ directory }}
           </RouterLink>
         </li>
+
+        <li>
+          <template v-if="isDirectoryCreation">
+            <input type="text" v-model="newDirectoryName">
+            <div style="display: grid; gap: 0.5rem; grid-template-columns: 1fr 1fr;">
+              <button @click="submitDirectoryCreation()" class="btn-primary" style="text-align: center;">✔</button>
+              <button @click="cancelDirectoryCreation()" class="btn-primary" style="text-align: center;">✘</button>
+            </div>
+          </template>
+          <template v-else>
+            <button @click="startDirectoryCreation()" class="btn-secondary" style="color: var(--color-light);">
+              <p class="bullet">⧏</p> Create new
+            </button>
+          </template>
+        </li>
       </ul>
     </section>
 
     <section v-if="props.directoryContent.files.length > 0">
-      <h2>Files</h2>
+      <div style="display: flex; justify-content: space-between; align-items: center;">
+        <h2>Files</h2>
+      </div>
       <ul>
         <li v-for="filename in props.directoryContent.files" :key="filename">
           <button class="btn-secondary" @click="$emit('file-select', `${props.currentDirectory}/${filename}`)">
             <p class="bullet">⧐</p> {{ filename }}
           </button>
         </li>
+        <li>
+          <template v-if="isNoteCreation">
+            <input type="text" v-model="newNoteName">
+            <div style="display: grid; gap: 0.5rem; grid-template-columns: 1fr 1fr;">
+              <button @click="submitFileCreation()" class="btn-primary" style="text-align: center;">✔</button>
+              <button @click="cancelFileCreation()" class="btn-primary" style="text-align: center;">✘</button>
+            </div>
+          </template>
+          <template v-else>
+            <button @click="startNoteCreation()" class="btn-secondary" style="color: var(--color-light);">
+              <p class="bullet">⧏</p> Create new
+            </button>
+          </template>
+        </li>
       </ul>
     </section>
   </main>
 </template>
 
 <style scoped>
+input[type="text"] {
+  background-color: var(--color-black);
+  color: var(--color-light);
+  border: 1px solid var(--color-highlight);
+  width: 100%;
+}
+
 .bullet {
   color: var(--color-light);
   display: inline-block;
 }
+
 nav {
   font-size: 1rem;
 }
 
-header > button {
+header>button {
   color: var(--color-light);
   font-weight: bold;
   border: 1px solid var(--color-light);
@@ -63,6 +155,14 @@ section {
   margin-bottom: 2rem;
 }
 
+.icon-button {
+  background-color: none;
+  border: none;
+  padding: none;
+  background: none;
+  color: var(--color-light);
+}
+
 ul {
   list-style-position: inside;
   padding-left: 0;

frontend/src/components/icons/FilePlusIcon.vue

@@ -0,0 +1,6 @@
+<template>
+  <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-file-earmark-plus" viewBox="0 0 16 16">
+  <path d="M8 6.5a.5.5 0 0 1 .5.5v1.5H10a.5.5 0 0 1 0 1H8.5V11a.5.5 0 0 1-1 0V9.5H6a.5.5 0 0 1 0-1h1.5V7a.5.5 0 0 1 .5-.5"/>
+  <path d="M14 4.5V14a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V2a2 2 0 0 1 2-2h5.5zm-3 0A1.5 1.5 0 0 1 9.5 3V1H4a1 1 0 0 0-1 1v12a1 1 0 0 0 1 1h8a1 1 0 0 0 1-1V4.5z"/>
+</svg>
+</template>

frontend/src/components/icons/FolderPlusIcon.vue

@@ -0,0 +1,5 @@
+<template><svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-folder-plus" viewBox="0 0 16 16">
+  <path d="m.5 3 .04.87a2 2 0 0 0-.342 1.311l.637 7A2 2 0 0 0 2.826 14H9v-1H2.826a1 1 0 0 1-.995-.91l-.637-7A1 1 0 0 1 2.19 4h11.62a1 1 0 0 1 .996 1.09L14.54 8h1.005l.256-2.819A2 2 0 0 0 13.81 3H9.828a2 2 0 0 1-1.414-.586l-.828-.828A2 2 0 0 0 6.172 1H2.5a2 2 0 0 0-2 2m5.672-1a1 1 0 0 1 .707.293L7.586 3H2.19q-.362.002-.683.12L1.5 2.98a1 1 0 0 1 1-.98z"/>
+  <path d="M13.5 9a.5.5 0 0 1 .5.5V11h1.5a.5.5 0 1 1 0 1H14v1.5a.5.5 0 1 1-1 0V12h-1.5a.5.5 0 0 1 0-1H13V9.5a.5.5 0 0 1 .5-.5"/>
+</svg>
+</template>

frontend/src/repository/directory.ts

@@ -2,8 +2,17 @@ import type { DirectoryContent } from '@/types'
 
 export class DirectoryContentRepository {
   async getByPath(path: string): Promise<DirectoryContent> {
-    const url = `/api/directory/${path}`
+    const url = `/api/directory${path}`
+    console.log("get", url)
     const response = await fetch(url)
     return response.json()
   }
+
+  async createNew(path: string): Promise<DirectoryContent> {
+    const url = `/api/directory${path}`
+    const response = await fetch(url,{
+      method: "POST",
+    })
+    return response.json()
+  }
 }

frontend/src/views/HomeView.vue

@@ -120,7 +120,7 @@ function showSidebar() {
     <div class="content" :style="{ 'grid-template-columns': selectedGridLayout }">
       <div id="sidebar">
         <div id="nav-area">
-          <NavigationSidebar  class="sidebar-content" :directory-content="directoryContent"
+          <NavigationSidebar @refresh="updateFromRoutePath(route.params.path)"  class="sidebar-content" :directory-content="directoryContent"
             :current-directory="currentDirectory" @file-select="(path) => changeFile(path)" />
 
             <template v-if="isSidebarVisible">

internal/onyx/notes.go

@@ -102,7 +102,7 @@ func (s *Server) CreateDirectory(w http.ResponseWriter, r *http.Request) {
 		return
 	}
 
-	w.WriteHeader(http.StatusCreated)
+	s.GetDirectoryContent(w, r)
 }
 
 func (s *Server) GetDirectoryContent(w http.ResponseWriter, r *http.Request) {

onyx.env

@@ -1 +1 @@
-ONYX_VERSION=0.1.4
+ONYX_VERSION=0.2.3

testdata/Top Level 1/Deep/Whatever.md

@@ -0,0 +1 @@
+i can just write stuff here