Browsing files on the frontend

crates/core/src/storage/storage_path.rs

@@ -64,7 +64,13 @@ impl From<&str> for StoragePath {
         let value = value.split("/").collect::<Vec<&str>>();
         let components = value
             .iter()
-            .map(|v| StoragePathComponent(v.to_string()))
+            .filter_map(|v| {
+                if v.is_empty() {
+                    None
+                } else {
+                    Some(StoragePathComponent(v.to_string()))
+                }
+            })
             .collect::<Vec<StoragePathComponent>>();
         StoragePath(components)
     }

nitro_repo/src/app/api/repository/management.rs

@@ -1,6 +1,6 @@
 use ahash::HashMap;
 use axum::{
-    extract::{Path, State},
+    extract::{Path, Query, State},
     response::{IntoResponse, Response},
     routing::{get, post, put},
     Json, Router,
@@ -121,6 +121,7 @@ pub async fn new_repository(
         .body(serde_json::to_string(&db_repository).unwrap().into())
         .unwrap())
 }
+
 #[utoipa::path(
     get,
     path = "/{repository}/configs",
@@ -147,6 +148,11 @@ pub async fn get_configs_for_repository(
         .status(StatusCode::OK)
         .json_body(&repository)
 }
+#[derive(Deserialize, Default, Debug)]
+#[serde(default)]
+pub struct GetConfigParams {
+    default: bool,
+}
 #[utoipa::path(
     get,
     path = "/{repository}/config/{config_key}",
@@ -158,19 +164,35 @@ pub async fn get_configs_for_repository(
 pub async fn get_config(
     State(site): State<NitroRepo>,
     auth: Authentication,
+    Query(params): Query<GetConfigParams>,
     Path((repository, config)): Path<(Uuid, String)>,
 ) -> Result<Response, InternalError> {
     if !auth.can_edit_repository(repository) {
         return Ok(MissingPermission::EditRepository(repository).into_response());
     }
-    let Some(config) =
-        GenericDBRepositoryConfig::get_config(repository, config, site.as_ref()).await?
-    else {
-        return Ok(RepositoryNotFound::Uuid(repository).into_response());
+    let config = match GenericDBRepositoryConfig::get_config(repository, &config, site.as_ref())
+        .await?
+    {
+        Some(config) => config.value.0,
+        None => {
+            if params.default {
+                let Some(config_type) = site.get_repository_config_type(&config) else {
+                    return Ok(InvalidRepositoryConfig::InvalidConfigType(config).into_response());
+                };
+                match config_type.default() {
+                    Ok(ok) => ok,
+                    Err(_) => {
+                        return Ok(RepositoryNotFound::Uuid(repository).into_response());
+                    }
+                }
+            } else {
+                return Ok(RepositoryNotFound::Uuid(repository).into_response());
+            }
+        }
     };
     Response::builder()
         .status(StatusCode::OK)
-        .json_body(&config.value.0)
+        .json_body(&config)
 }
 /// Updates a config for a repository
 ///

site/package.json

@@ -44,7 +44,7 @@
     "vue3-simple-icons": "^13.2.0"
   },
   "devDependencies": {
-    "@chromatic-com/storybook": "^1.6.1",
+    "@chromatic-com/storybook": "^1.7.0",
     "@rushstack/eslint-patch": "^1.10.4",
     "@storybook/addon-essentials": "^8.2.9",
     "@storybook/addon-interactions": "^8.2.9",
@@ -69,7 +69,7 @@
     "sass": "^1.77",
     "storybook": "^8.2.9",
     "typescript": "~5.5.4",
-    "vite": "^5.4.1",
+    "vite": "^5.4.2",
     "vite-plugin-vue-devtools": "^7.3.8",
     "vue-tsc": "^2.0.29"
   }

site/src/components/admin/repository/configs/FallBackEditor.vue

@@ -40,7 +40,7 @@ async function load() {
   })
   if (props.repository) {
     await http
-      .get(`/api/repository/repository/${props.repository}/config/${props.settingName}`)
+      .get(`/api/repository/${props.repository}/config/${props.settingName}?default=true`)
       .then((response) => {
         model.value = response.data
       })

site/src/components/admin/repository/configs/RepositoryPageEditor.vue

@@ -4,7 +4,7 @@
     <div v-if="input.page_type === PageType.Markdown" id="markdownEditor">
       <MilkdownProvider>
         <MarkdownEditor
-          :value="input.content"
+          :value="input.content || ''"
           @update="
             (content: string) => {
               input.content = content

site/src/components/form/JsonSchemaForm.vue

@@ -14,6 +14,7 @@ import { EnumInput, SchemaForm, type FormInputType } from 'nitro-jsf'
 import { computed, type Component, type PropType } from 'vue'
 import TextInput from './text/TextInput.vue'
 import DropDown from './dropdown/DropDown.vue'
+import SwitchInput from './SwitchInput.vue'
 
 const props = defineProps({
   form: Object as PropType<SchemaForm>
@@ -64,6 +65,14 @@ function formFieldToInput(field: FormInputType): Input | undefined {
         }
       }
     }
+    case 'boolean': {
+      return {
+        component: SwitchInput,
+        label: field.title() ?? field.key(),
+        id: field.key(),
+        props: {}
+      }
+    }
     default:
       console.error(`Unsupported field type: ${field.type()}`)
       return undefined

site/src/components/nav/NavBar.vue

@@ -6,9 +6,7 @@
         <span>Nitro Repository</span>
       </router-link>
     </div>
-    <RouterLink class="navLink" :to="{ name: 'browse' }" title="Browse Repositories"
-      >Browse</RouterLink
-    >
+
     <RouterLink class="navLink" :to="{ name: 'repositories' }" title="Browse Repositories"
       >Repositories</RouterLink
     >

site/src/components/repository/browse/BrowseEntry.vue

@@ -0,0 +1,38 @@
+<template>
+  <BrowseFile
+    v-if="props.file.type === 'File'"
+    :file="props.file.value as RawFile"
+    :currentPath="props.currentPath"
+    :repository="props.repository" />
+  <BrowseFolder
+    v-else-if="props.file.type === 'Directory'"
+    :file="props.file.value as RawDirectory"
+    :currentPath="props.currentPath"
+    :repository="props.repository" />
+</template>
+
+<script setup lang="ts">
+import { apiURL } from '@/config'
+import router from '@/router'
+import { fixCurrentPath, type RawBrowseFile, type RawDirectory, type RawFile } from '@/types/browse'
+import { createRepositoryRoute, type RepositoryWithStorageName } from '@/types/repository'
+import { computed, type PropType } from 'vue'
+import BrowseFolder from './BrowseFolder.vue'
+import BrowseFile from './BrowseFile.vue'
+
+const props = defineProps({
+  file: {
+    type: Object as PropType<RawBrowseFile>,
+    required: true
+  },
+  currentPath: {
+    type: String,
+    required: true
+  },
+  repository: {
+    type: Object as PropType<RepositoryWithStorageName>,
+    required: true
+  }
+})
+console.log(props.file)
+</script>

site/src/components/repository/browse/BrowseFile.vue

@@ -0,0 +1,46 @@
+<template>
+  <div @click="click" class="browseItem" data-type="file">
+    <div class="itemAndName">
+      <font-awesome-icon :icon="fileIcon" />
+      {{ props.file.name }}
+    </div>
+
+    <div>
+      {{ props.file.modified }}
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { apiURL } from '@/config'
+import router from '@/router'
+import { fixCurrentPath, type RawBrowseFile, type RawFile } from '@/types/browse'
+import { createRepositoryRoute, type RepositoryWithStorageName } from '@/types/repository'
+import { computed, type PropType } from 'vue'
+import './browse.scss'
+const props = defineProps({
+  file: {
+    type: Object as PropType<RawFile>,
+    required: true
+  },
+  currentPath: {
+    type: String,
+    required: true
+  },
+  repository: {
+    type: Object as PropType<RepositoryWithStorageName>,
+    required: true
+  }
+})
+
+const fixedPath = fixCurrentPath(props.currentPath)
+const repositoryURL = createRepositoryRoute(props.repository, `${fixedPath}/${props.file.name}`)
+
+const fileIcon = computed(() => {
+  // TODO: More icons
+  return 'fa-solid fa-file'
+})
+function click() {
+  window.open(repositoryURL, '_blank')
+}
+</script>