From fef8ad540ae507469680161d2ed7baf795fbc54e Mon Sep 17 00:00:00 2001
From: Hayden <hay-kot@pm.me>
Date: Fri, 8 Jan 2021 17:09:03 -0900
Subject: [PATCH] file reorganize

---
 frontend/src/App.vue                          |   6 +-
 frontend/src/components/Admin/SFTP.vue        |  12 --
 frontend/src/components/Admin/Users.vue       |  12 --
 .../{EditPlan.vue => MealPlanEditor.vue}      |   0
 .../MealPlan/{NewMeal.vue => MealPlanNew.vue} |   0
 .../{ => Recipe}/RecipeEditor/BulkAdd.vue     |   0
 .../RecipeEditor/index.vue}                   |   4 +-
 .../RecipePrint.vue}                          |   0
 .../RecipeViewer.vue}                         |   0
 .../components/RecipeEditor/DetailsView.vue   | 128 ------------------
 .../Backup.vue => Settings/Backup/index.vue}  |   3 +-
 .../Migration/index.vue}                      |   2 +-
 .../Theme/ColorPickerDialog.vue}              |   0
 .../Theme/NewThemeDialog.vue}                 |   0
 .../Theme.vue => Settings/Theme/index.vue}    |  36 ++---
 .../Webhook/TimePickerDialog.vue}             |   0
 .../Webhook/index.vue}                        |   8 +-
 .../{AddRecipe.vue => UI/AddRecipeFab.vue}    |   2 +-
 .../src/components/{ => UI}/RecentRecipes.vue |   2 +-
 .../Page404.vue => pages/404Page.vue}         |   0
 .../Home.vue => pages/HomePage.vue}           |   2 +-
 .../MealPlanPage.vue}                         |   8 +-
 .../MealPlanThisWeekPage.vue}                 |   4 +-
 .../NewRecipe.vue => pages/RecipeNewPage.vue} |  10 +-
 .../Recipe.vue => pages/RecipePage.vue}       |  32 ++---
 .../Admin.vue => pages/SettingsPage.vue}      |   8 +-
 frontend/src/routes.js                        |  30 ++--
 mealie/routes/recipe_routes.py                |   2 +-
 28 files changed, 80 insertions(+), 231 deletions(-)
 delete mode 100644 frontend/src/components/Admin/SFTP.vue
 delete mode 100644 frontend/src/components/Admin/Users.vue
 rename frontend/src/components/MealPlan/{EditPlan.vue => MealPlanEditor.vue} (100%)
 rename frontend/src/components/MealPlan/{NewMeal.vue => MealPlanNew.vue} (100%)
 rename frontend/src/components/{ => Recipe}/RecipeEditor/BulkAdd.vue (100%)
 rename frontend/src/components/{RecipeEditor/EditRecipe.vue => Recipe/RecipeEditor/index.vue} (99%)
 rename frontend/src/components/{RecipeEditor/PrintRecipe.vue => Recipe/RecipePrint.vue} (100%)
 rename frontend/src/components/{RecipeEditor/ViewRecipe.vue => Recipe/RecipeViewer.vue} (100%)
 delete mode 100644 frontend/src/components/RecipeEditor/DetailsView.vue
 rename frontend/src/components/{Admin/Backup.vue => Settings/Backup/index.vue} (99%)
 rename frontend/src/components/{Admin/Migration.vue => Settings/Migration/index.vue} (98%)
 rename frontend/src/components/{Admin/ThemeUI/ColorPicker.vue => Settings/Theme/ColorPickerDialog.vue} (100%)
 rename frontend/src/components/{Admin/ThemeUI/NewTheme.vue => Settings/Theme/NewThemeDialog.vue} (100%)
 rename frontend/src/components/{Admin/Theme.vue => Settings/Theme/index.vue} (88%)
 rename frontend/src/components/{Admin/Webhooks/TimePicker.vue => Settings/Webhook/TimePickerDialog.vue} (100%)
 rename frontend/src/components/{Admin/Webhooks.vue => Settings/Webhook/index.vue} (94%)
 rename frontend/src/components/{AddRecipe.vue => UI/AddRecipeFab.vue} (98%)
 rename frontend/src/components/{ => UI}/RecentRecipes.vue (93%)
 rename frontend/src/{components/Page404.vue => pages/404Page.vue} (100%)
 rename frontend/src/{components/Home.vue => pages/HomePage.vue} (72%)
 rename frontend/src/{components/MealPlan/MealPlanner.vue => pages/MealPlanPage.vue} (94%)
 rename frontend/src/{components/MealPlan/ThisWeek.vue => pages/MealPlanThisWeekPage.vue} (96%)
 rename frontend/src/{components/NewRecipe.vue => pages/RecipeNewPage.vue} (91%)
 rename frontend/src/{components/Recipe.vue => pages/RecipePage.vue} (87%)
 rename frontend/src/{components/Admin/Admin.vue => pages/SettingsPage.vue} (87%)

diff --git a/frontend/src/App.vue b/frontend/src/App.vue
index 533c394c7c67..0e33a66d5edf 100644
--- a/frontend/src/App.vue
+++ b/frontend/src/App.vue
@@ -20,7 +20,7 @@
     </v-app-bar>
     <v-main>
       <v-container>
-        <AddRecipe />
+        <AddRecipeFab />
         <SnackBar />
         <v-expand-transition>
           <SearchHeader v-show="search" />
@@ -35,7 +35,7 @@
 <script>
 import Menu from "./components/UI/Menu";
 import SearchHeader from "./components/UI/SearchHeader";
-import AddRecipe from "./components/AddRecipe";
+import AddRecipeFab from "./components/UI/AddRecipeFab";
 import SnackBar from "./components/UI/SnackBar";
 import Vuetify from "./plugins/vuetify";
 export default {
@@ -43,7 +43,7 @@ export default {
 
   components: {
     Menu,
-    AddRecipe,
+    AddRecipeFab,
     SearchHeader,
     SnackBar
   },
diff --git a/frontend/src/components/Admin/SFTP.vue b/frontend/src/components/Admin/SFTP.vue
deleted file mode 100644
index bc90342e1a70..000000000000
--- a/frontend/src/components/Admin/SFTP.vue
+++ /dev/null
@@ -1,12 +0,0 @@
-<template>
-  <v-card>
-    <v-card-title class="card-title mt-1"> SFTP Settings </v-card-title>
-  </v-card>
-</template>
-
-<script>
-export default {};
-</script>
-
-<style>
-</style>
\ No newline at end of file
diff --git a/frontend/src/components/Admin/Users.vue b/frontend/src/components/Admin/Users.vue
deleted file mode 100644
index f8d0653fe57a..000000000000
--- a/frontend/src/components/Admin/Users.vue
+++ /dev/null
@@ -1,12 +0,0 @@
-<template>
-  <v-card>
-    <v-card-title class="card-title mt-1"> User Settings </v-card-title>
-  </v-card>
-</template>
-
-<script>
-export default {};
-</script>
-
-<style>
-</style>
\ No newline at end of file
diff --git a/frontend/src/components/MealPlan/EditPlan.vue b/frontend/src/components/MealPlan/MealPlanEditor.vue
similarity index 100%
rename from frontend/src/components/MealPlan/EditPlan.vue
rename to frontend/src/components/MealPlan/MealPlanEditor.vue
diff --git a/frontend/src/components/MealPlan/NewMeal.vue b/frontend/src/components/MealPlan/MealPlanNew.vue
similarity index 100%
rename from frontend/src/components/MealPlan/NewMeal.vue
rename to frontend/src/components/MealPlan/MealPlanNew.vue
diff --git a/frontend/src/components/RecipeEditor/BulkAdd.vue b/frontend/src/components/Recipe/RecipeEditor/BulkAdd.vue
similarity index 100%
rename from frontend/src/components/RecipeEditor/BulkAdd.vue
rename to frontend/src/components/Recipe/RecipeEditor/BulkAdd.vue
diff --git a/frontend/src/components/RecipeEditor/EditRecipe.vue b/frontend/src/components/Recipe/RecipeEditor/index.vue
similarity index 99%
rename from frontend/src/components/RecipeEditor/EditRecipe.vue
rename to frontend/src/components/Recipe/RecipeEditor/index.vue
index 83c7a00bf8be..de60a558c1fd 100644
--- a/frontend/src/components/RecipeEditor/EditRecipe.vue
+++ b/frontend/src/components/Recipe/RecipeEditor/index.vue
@@ -175,8 +175,8 @@
 </template>
 
 <script>
-import api from "../../api";
-import utils from "../../utils";
+import api from "../../../api";
+import utils from "../../../utils";
 import BulkAdd from "./BulkAdd";
 export default {
   components: {
diff --git a/frontend/src/components/RecipeEditor/PrintRecipe.vue b/frontend/src/components/Recipe/RecipePrint.vue
similarity index 100%
rename from frontend/src/components/RecipeEditor/PrintRecipe.vue
rename to frontend/src/components/Recipe/RecipePrint.vue
diff --git a/frontend/src/components/RecipeEditor/ViewRecipe.vue b/frontend/src/components/Recipe/RecipeViewer.vue
similarity index 100%
rename from frontend/src/components/RecipeEditor/ViewRecipe.vue
rename to frontend/src/components/Recipe/RecipeViewer.vue
diff --git a/frontend/src/components/RecipeEditor/DetailsView.vue b/frontend/src/components/RecipeEditor/DetailsView.vue
deleted file mode 100644
index 123d9dced63c..000000000000
--- a/frontend/src/components/RecipeEditor/DetailsView.vue
+++ /dev/null
@@ -1,128 +0,0 @@
-<template>
-  <v-card-text>
-    <v-row>
-      <v-col cols="4">
-        <h2 class="mb-4">Ingredients</h2>
-        <div v-for="ingredient in ingredients" :key="ingredient">
-          <v-row align="center">
-            <v-checkbox hide-details class="shrink mr-2 mt-0"></v-checkbox>
-            <v-text-field :value="ingredient"></v-text-field>
-          </v-row>
-        </div>
-        <v-btn
-          class="ml-n5"
-          color="primary"
-          fab`
-          dark
-          small
-          @click="addIngredient"
-        >
-          <v-icon>mdi-plus</v-icon>
-        </v-btn>
-
-        <h2 class="mt-6">Categories</h2>
-        <v-combobox
-          dense
-          multiple
-          chips
-          item-color="primary"
-          deletable-chips
-          :value="categories"
-        >
-          <template v-slot:selection="data">
-            <v-chip :selected="data.selected" close color="primary" dark>
-              {{ data.item }}
-            </v-chip>
-          </template>
-        </v-combobox>
-
-        <h2 class="mt-4">Tags</h2>
-        <v-combobox dense multiple chips deletable-chips :value="tags">
-          <template v-slot:selection="data">
-            <v-chip :selected="data.selected" close color="primary" dark>
-              {{ data.item }}
-            </v-chip>
-          </template>
-        </v-combobox>
-      </v-col>
-
-      <v-divider :vertical="true"></v-divider>
-
-      <v-col>
-        <h2 class="mb-4">Instructions</h2>
-        <div v-for="(step, index) in instructions" :key="step.text">
-          <v-hover v-slot="{ hover }">
-            <v-card
-              class="ma-1"
-              :class="[{ 'on-hover': hover }]"
-              :elevation="hover ? 12 : 2"
-            >
-              <v-card-title>Step: {{ index + 1 }}</v-card-title>
-              <v-card-text>
-                <v-textarea dense :value="step.text"></v-textarea>
-              </v-card-text>
-            </v-card>
-          </v-hover>
-        </div>
-        <v-btn color="primary" fab dark small @click="addStep">
-          <v-icon>mdi-plus</v-icon>
-        </v-btn>
-      </v-col>
-    </v-row>
-  </v-card-text>
-</template>
-
-<script>
-export default {
-  props: {
-    form: Boolean,
-    ingredients: Array,
-    instructions: Array,
-    categories: Array,
-    tags: Array,
-  },
-  data() {
-    return {
-      disabledSteps: [],
-    };
-  },
-
-  methods: {
-    toggleDisabled(stepIndex) {
-      if (this.disabledSteps.includes(stepIndex)) {
-        let index = this.disabledSteps.indexOf(stepIndex);
-        if (index !== -1) {
-          this.disabledSteps.splice(index, 1);
-        }
-      } else {
-        this.disabledSteps.push(stepIndex);
-      }
-    },
-    isDisabled(stepIndex) {
-      if (this.disabledSteps.includes(stepIndex)) {
-        return "disabled-card";
-      } else {
-        return;
-      }
-    },
-    saveRecipe() {
-      this.$emit("save");
-    },
-    deleteRecipe() {
-      this.$emit("delete");
-    },
-    addIngredient() {
-      this.$emit("addingredient");
-    },
-    addStep() {
-      this.$emit("addstep");
-    },
-  },
-};
-</script>
-
-<style>
-.disabled-card {
-  opacity: 0.5;
-}
-</style>
\ No newline at end of file
diff --git a/frontend/src/components/Admin/Backup.vue b/frontend/src/components/Settings/Backup/index.vue
similarity index 99%
rename from frontend/src/components/Admin/Backup.vue
rename to frontend/src/components/Settings/Backup/index.vue
index e986a43858c7..1117bfc33adf 100644
--- a/frontend/src/components/Admin/Backup.vue
+++ b/frontend/src/components/Settings/Backup/index.vue
@@ -62,7 +62,8 @@
 </template>
 
 <script>
-import api from "../../api";
+import api from "../../../api";
+
 export default {
   data() {
     return {
diff --git a/frontend/src/components/Admin/Migration.vue b/frontend/src/components/Settings/Migration/index.vue
similarity index 98%
rename from frontend/src/components/Admin/Migration.vue
rename to frontend/src/components/Settings/Migration/index.vue
index f792abccec45..5f53a0879fa1 100644
--- a/frontend/src/components/Admin/Migration.vue
+++ b/frontend/src/components/Settings/Migration/index.vue
@@ -40,7 +40,7 @@
 </template>
 
 <script>
-import api from "../../api";
+import api from "../../../api";
 // import TimePicker from "./Webhooks/TimePicker";
 export default {
   data() {
diff --git a/frontend/src/components/Admin/ThemeUI/ColorPicker.vue b/frontend/src/components/Settings/Theme/ColorPickerDialog.vue
similarity index 100%
rename from frontend/src/components/Admin/ThemeUI/ColorPicker.vue
rename to frontend/src/components/Settings/Theme/ColorPickerDialog.vue
diff --git a/frontend/src/components/Admin/ThemeUI/NewTheme.vue b/frontend/src/components/Settings/Theme/NewThemeDialog.vue
similarity index 100%
rename from frontend/src/components/Admin/ThemeUI/NewTheme.vue
rename to frontend/src/components/Settings/Theme/NewThemeDialog.vue
diff --git a/frontend/src/components/Admin/Theme.vue b/frontend/src/components/Settings/Theme/index.vue
similarity index 88%
rename from frontend/src/components/Admin/Theme.vue
rename to frontend/src/components/Settings/Theme/index.vue
index fbdec561c1e2..339ab97382af 100644
--- a/frontend/src/components/Admin/Theme.vue
+++ b/frontend/src/components/Settings/Theme/index.vue
@@ -50,7 +50,7 @@
             </v-select>
           </v-col>
           <v-col cols="12" sm="1">
-            <NewTheme @new-theme="appendTheme" />
+            <NewThemeDialog @new-theme="appendTheme" />
           </v-col>
           <v-col cols="12" sm="1">
             <v-btn text color="error" @click="deleteSelectedThemeValidation">
@@ -69,40 +69,40 @@
       </v-form>
       <v-row dense align-content="center" v-if="selectedTheme.colors">
         <v-col>
-          <ColorPicker
+          <ColorPickerDialog
             button-text="Primary"
             v-model="selectedTheme.colors.primary"
           />
         </v-col>
         <v-col>
-          <ColorPicker
+          <ColorPickerDialog
             button-text="Secondary"
             v-model="selectedTheme.colors.secondary"
           />
         </v-col>
         <v-col>
-          <ColorPicker
+          <ColorPickerDialog
             button-text="Accent"
             v-model="selectedTheme.colors.accent"
           />
         </v-col>
         <v-col>
-          <ColorPicker
+          <ColorPickerDialog
             button-text="Success"
             v-model="selectedTheme.colors.success"
           />
         </v-col>
         <v-col>
-          <ColorPicker button-text="Info" v-model="selectedTheme.colors.info" />
+          <ColorPickerDialog button-text="Info" v-model="selectedTheme.colors.info" />
         </v-col>
         <v-col>
-          <ColorPicker
+          <ColorPickerDialog
             button-text="Warning"
             v-model="selectedTheme.colors.warning"
           />
         </v-col>
         <v-col>
-          <ColorPicker
+          <ColorPickerDialog
             button-text="Error"
             v-model="selectedTheme.colors.error"
           />
@@ -125,16 +125,16 @@
 </template>
 
 <script>
-import api from "../../api";
-import ColorPicker from "./ThemeUI/ColorPicker";
-import NewTheme from "./ThemeUI/NewTheme";
-import Confirmation from "../UI/Confirmation";
+import api from "../../../api";
+import ColorPickerDialog from "./ColorPickerDialog";
+import NewThemeDialog from "./NewThemeDialog";
+import Confirmation from "../../UI/Confirmation";
 
 export default {
   components: {
-    ColorPicker,
+    ColorPickerDialog,
     Confirmation,
-    NewTheme,
+    NewThemeDialog,
   },
   data() {
     return {
@@ -186,10 +186,10 @@ export default {
     /**
      * Create the new Theme and select it.
      */
-    async appendTheme(newTheme) {
-      await api.themes.create(newTheme);
-      this.availableThemes.push(newTheme);
-      this.selectedTheme = newTheme;
+    async appendTheme(NewThemeDialog) {
+      await api.themes.create(NewThemeDialog);
+      this.availableThemes.push(NewThemeDialog);
+      this.selectedTheme = NewThemeDialog;
     },
 
     themeSelected() {
diff --git a/frontend/src/components/Admin/Webhooks/TimePicker.vue b/frontend/src/components/Settings/Webhook/TimePickerDialog.vue
similarity index 100%
rename from frontend/src/components/Admin/Webhooks/TimePicker.vue
rename to frontend/src/components/Settings/Webhook/TimePickerDialog.vue
diff --git a/frontend/src/components/Admin/Webhooks.vue b/frontend/src/components/Settings/Webhook/index.vue
similarity index 94%
rename from frontend/src/components/Admin/Webhooks.vue
rename to frontend/src/components/Settings/Webhook/index.vue
index 5f433e6a894f..28c94d0ed7ea 100644
--- a/frontend/src/components/Admin/Webhooks.vue
+++ b/frontend/src/components/Settings/Webhook/index.vue
@@ -20,7 +20,7 @@
           ></v-switch>
         </v-col>
         <v-col cols="12" md="3" sm="5">
-          <TimePicker @save-time="saveTime" />
+          <TimePickerDialog @save-time="saveTime" />
         </v-col>
         <v-col cols="12" md="4" sm="5">
           <v-btn text color="info" @click="testWebhooks"> Test Webhooks </v-btn>
@@ -60,11 +60,11 @@
 </template>
 
 <script>
-import api from "../../api";
-import TimePicker from "./Webhooks/TimePicker";
+import api from "../../../api";
+import TimePickerDialog from "./TimePickerDialog";
 export default {
   components: {
-    TimePicker,
+    TimePickerDialog,
   },
   data() {
     return {
diff --git a/frontend/src/components/AddRecipe.vue b/frontend/src/components/UI/AddRecipeFab.vue
similarity index 98%
rename from frontend/src/components/AddRecipe.vue
rename to frontend/src/components/UI/AddRecipeFab.vue
index b44838374699..55d2ebc8c77b 100644
--- a/frontend/src/components/AddRecipe.vue
+++ b/frontend/src/components/UI/AddRecipeFab.vue
@@ -41,7 +41,7 @@
 </template>
 
 <script>
-import api from "../api";
+import api from "../../api";
 
 export default {
   data() {
diff --git a/frontend/src/components/RecentRecipes.vue b/frontend/src/components/UI/RecentRecipes.vue
similarity index 93%
rename from frontend/src/components/RecentRecipes.vue
rename to frontend/src/components/UI/RecentRecipes.vue
index 2804ff7794f0..684d482bd0b4 100644
--- a/frontend/src/components/RecentRecipes.vue
+++ b/frontend/src/components/UI/RecentRecipes.vue
@@ -20,7 +20,7 @@
 </template>
 
 <script>
-import RecipeCard from "./UI/RecipeCard";
+import RecipeCard from "./RecipeCard";
 
 export default {
   components: {
diff --git a/frontend/src/components/Page404.vue b/frontend/src/pages/404Page.vue
similarity index 100%
rename from frontend/src/components/Page404.vue
rename to frontend/src/pages/404Page.vue
diff --git a/frontend/src/components/Home.vue b/frontend/src/pages/HomePage.vue
similarity index 72%
rename from frontend/src/components/Home.vue
rename to frontend/src/pages/HomePage.vue
index 10aa93e0a925..db14c5ee5e58 100644
--- a/frontend/src/components/Home.vue
+++ b/frontend/src/pages/HomePage.vue
@@ -5,7 +5,7 @@
 </template>
 
 <script>
-import RecentRecipes from "./RecentRecipes";
+import RecentRecipes from "../components/UI/RecentRecipes";
 
 export default {
   components: {
diff --git a/frontend/src/components/MealPlan/MealPlanner.vue b/frontend/src/pages/MealPlanPage.vue
similarity index 94%
rename from frontend/src/components/MealPlan/MealPlanner.vue
rename to frontend/src/pages/MealPlanPage.vue
index fca4f79a108a..9179fc03975f 100644
--- a/frontend/src/components/MealPlan/MealPlanner.vue
+++ b/frontend/src/pages/MealPlanPage.vue
@@ -69,10 +69,10 @@
 </template>
 
 <script>
-import api from "../../api";
-import utils from "../../utils";
-import NewMeal from "./NewMeal";
-import EditPlan from "./EditPlan";
+import api from "../api";
+import utils from "../utils";
+import NewMeal from "../components/MealPlan/MealPlanNew";
+import EditPlan from "../components/MealPlan/MealPlanEditor";
 
 export default {
   components: {
diff --git a/frontend/src/components/MealPlan/ThisWeek.vue b/frontend/src/pages/MealPlanThisWeekPage.vue
similarity index 96%
rename from frontend/src/components/MealPlan/ThisWeek.vue
rename to frontend/src/pages/MealPlanThisWeekPage.vue
index 75da6b7dde7f..e5ae5e73892a 100644
--- a/frontend/src/components/MealPlan/ThisWeek.vue
+++ b/frontend/src/pages/MealPlanThisWeekPage.vue
@@ -39,8 +39,8 @@
 </template>
 
 <script>
-import api from "../../api";
-import utils from "../../utils";
+import api from "../api";
+import utils from "../utils";
 export default {
   data() {
     return {
diff --git a/frontend/src/components/NewRecipe.vue b/frontend/src/pages/RecipeNewPage.vue
similarity index 91%
rename from frontend/src/components/NewRecipe.vue
rename to frontend/src/pages/RecipeNewPage.vue
index da46271eed84..fecfe87d970b 100644
--- a/frontend/src/components/NewRecipe.vue
+++ b/frontend/src/pages/RecipeNewPage.vue
@@ -29,20 +29,20 @@
       />
     </div>
 
-    <EditRecipe v-else v-model="recipeDetails" @upload="getImage" />
+    <RecipeEditor v-else v-model="recipeDetails" @upload="getImage" />
   </v-card>
 </template>
 
 <script>
 import api from "../api";
 
-import EditRecipe from "./RecipeEditor/EditRecipe";
+import RecipeEditor from "../components/Recipe/RecipeEditor";
 import VJsoneditor from "v-jsoneditor";
-import ButtonRow from "./UI/ButtonRow";
+import ButtonRow from "../components/UI/ButtonRow";
 export default {
   components: {
     VJsoneditor,
-    EditRecipe,
+    RecipeEditor,
     ButtonRow,
   },
   data() {
@@ -89,7 +89,7 @@ export default {
 
       if (this.fileObject) {
         this.recipeDetails.image = this.fileObject.name;
-      } 
+      }
       let slug = await api.recipes.create(this.recipeDetails);
 
       if (this.fileObject) {
diff --git a/frontend/src/components/Recipe.vue b/frontend/src/pages/RecipePage.vue
similarity index 87%
rename from frontend/src/components/Recipe.vue
rename to frontend/src/pages/RecipePage.vue
index e28dd9836816..460f72ec9c45 100644
--- a/frontend/src/components/Recipe.vue
+++ b/frontend/src/pages/RecipePage.vue
@@ -18,7 +18,7 @@
       @delete="deleteRecipe"
     />
 
-    <ViewRecipe
+    <RecipeViewer
       v-if="!form"
       :name="recipeDetails.name"
       :ingredients="recipeDetails.recipeIngredient"
@@ -39,7 +39,7 @@
       height="1500px"
       :options="jsonEditorOptions"
     />
-    <EditRecipe v-else v-model="recipeDetails" @upload="getImageFile" />
+    <RecipeEditor v-else v-model="recipeDetails" @upload="getImageFile" />
   </v-card>
 </template>
 
@@ -47,16 +47,16 @@
 import api from "../api";
 import utils from "../utils";
 import VJsoneditor from "v-jsoneditor";
-import ViewRecipe from "./RecipeEditor/ViewRecipe";
-import EditRecipe from "./RecipeEditor/EditRecipe";
-import ButtonRow from "./UI/ButtonRow";
+import RecipeViewer from "../components/Recipe/RecipeViewer";
+import RecipeEditor from "../components/Recipe/RecipeEditor";
+import ButtonRow from "../components/UI/ButtonRow";
 
 export default {
   components: {
     VJsoneditor,
-    ViewRecipe,
-    EditRecipe,
-    ButtonRow
+    RecipeViewer,
+    RecipeEditor,
+    ButtonRow,
   },
   data() {
     return {
@@ -66,7 +66,7 @@ export default {
       jsonEditorOptions: {
         mode: "code",
         search: false,
-        mainMenuBar: false
+        mainMenuBar: false,
       },
       // Recipe Details //
       recipeDetails: {
@@ -83,9 +83,9 @@ export default {
         categories: [],
         dateAdded: "",
         notes: [],
-        rating: 0
+        rating: 0,
       },
-      imageKey: 1
+      imageKey: 1,
     };
   },
   mounted() {
@@ -93,9 +93,9 @@ export default {
   },
 
   watch: {
-    $route: function() {
+    $route: function () {
       this.getRecipeDetails();
-    }
+    },
   },
 
   computed: {
@@ -111,7 +111,7 @@ export default {
       } else {
         return false;
       }
-    }
+    },
   },
   methods: {
     getImageFile(fileObject) {
@@ -142,8 +142,8 @@ export default {
     showForm() {
       this.form = true;
       this.jsonEditor = false;
-    }
-  }
+    },
+  },
 };
 </script>
 
diff --git a/frontend/src/components/Admin/Admin.vue b/frontend/src/pages/SettingsPage.vue
similarity index 87%
rename from frontend/src/components/Admin/Admin.vue
rename to frontend/src/pages/SettingsPage.vue
index ed6948c14f19..0f33d8c06025 100644
--- a/frontend/src/components/Admin/Admin.vue
+++ b/frontend/src/pages/SettingsPage.vue
@@ -27,10 +27,10 @@
 </template>
 
 <script>
-import Backup from "./Backup";
-import Webhooks from "./Webhooks";
-import Theme from "./Theme";
-import Migration from "./Migration";
+import Backup from "../components/Settings/Backup";
+import Webhooks from "../components/Settings/Webhook";
+import Theme from "../components/Settings/Theme";
+import Migration from "../components/Settings/Migration";
 import axios from "axios";
 
 export default {
diff --git a/frontend/src/routes.js b/frontend/src/routes.js
index f97fabcf9fac..4f571e272bb2 100644
--- a/frontend/src/routes.js
+++ b/frontend/src/routes.js
@@ -1,23 +1,23 @@
-import Home from "./components/Home";
-import Page404 from "./components/Page404";
-import Recipe from "./components/Recipe";
-import NewRecipe from "./components/NewRecipe";
-import Admin from "./components/Admin/Admin";
-import MealPlanner from "./components/MealPlan/MealPlanner";
-import ThisWeek from "./components/MealPlan/ThisWeek";
+import HomePage from "./pages/HomePage";
+import Page404 from "./pages/404Page";
+import RecipePage from "./pages/RecipePage";
+import RecipeNewPage from "./pages/RecipeNewPage";
+import SettingsPage from "./pages/SettingsPage";
+import MeaplPlanPage from "./pages/MealPlanPage";
+import MealPlanThisWeekPage from "./pages/MealPlanThisWeekPage";
 import api from "./api";
 
 export const routes = [
-  { path: "/", component: Home },
-  { path: "/mealie", component: Home },
-  { path: "/recipe/:recipe", component: Recipe },
-  { path: "/new/", component: NewRecipe },
-  { path: "/settings/site", component: Admin },
-  { path: "/meal-plan/planner", component: MealPlanner },
-  { path: "/meal-plan/this-week", component: ThisWeek },
+  { path: "/", component: HomePage },
+  { path: "/mealie", component: HomePage },
+  { path: "/recipe/:recipe", component: RecipePage },
+  { path: "/new/", component: RecipeNewPage },
+  { path: "/settings/site", component: SettingsPage },
+  { path: "/meal-plan/planner", component: MeaplPlanPage },
+  { path: "/meal-plan/this-week", component: MealPlanThisWeekPage },
   {
     path: "/meal-plan/today",
-    beforeEnter:  async (_to, _from, next) => {
+    beforeEnter: async (_to, _from, next) => {
       await todaysMealRoute().then((redirect) => {
         next(redirect);
       });
diff --git a/mealie/routes/recipe_routes.py b/mealie/routes/recipe_routes.py
index 7a9949961903..5e1f72a75e7f 100644
--- a/mealie/routes/recipe_routes.py
+++ b/mealie/routes/recipe_routes.py
@@ -77,7 +77,7 @@ async def parse_recipe_url(url: RecipeURLIn):
     return slug
 
 
-@router.post("/api/recipe/create/", tags=["Recipes"], response_model=SlugResponse)
+@router.post("/api/recipe/create/", tags=["Recipes"])
 async def create_from_json(data: Recipe) -> str:
     """ Takes in a JSON string and loads data into the database as a new entry"""
     created_recipe = data.save_to_db()