feat: journals not on shelf

src/components/modals/JournalShelf.modal.vue

@@ -0,0 +1,42 @@
+<script setup lang="ts">
+import { computed, ref } from "vue";
+import ObsidianSetting from "../obsidian/ObsidianSetting.vue";
+import ObsidianDropdown from "../obsidian/ObsidianDropdown.vue";
+import ObsidianButton from "../obsidian/ObsidianButton.vue";
+import { pluginSettings$ } from "@/stores/settings.store";
+
+const { currentShelf } = defineProps<{
+  currentShelf: string;
+}>();
+const emit = defineEmits<{
+  (event: "close"): void;
+  (event: "save", shelf: string): void;
+}>();
+
+const selectedShelf = ref(currentShelf);
+const shelves = computed(() => {
+  return Object.values(pluginSettings$.value.shelves).sort();
+});
+
+function save() {
+  if (selectedShelf.value !== currentShelf) {
+    emit("save", selectedShelf.value);
+  }
+  emit("close");
+}
+</script>
+
+<template>
+  <ObsidianSetting name="Shelf">
+    <ObsidianDropdown v-model="selectedShelf">
+      <option value="">Not on a shelf</option>
+      <option v-for="shelf in shelves" :key="shelf.name" :value="shelf.name">{{ shelf.name }}</option>
+    </ObsidianDropdown>
+  </ObsidianSetting>
+  <ObsidianSetting>
+    <ObsidianButton @click="$emit('close')">Cancel</ObsidianButton>
+    <ObsidianButton cta @click="save">Save</ObsidianButton>
+  </ObsidianSetting>
+</template>
+
+<style scoped></style>

src/settings/JournalSettingsDashboard.vue

@@ -58,7 +58,11 @@ function changeFirstWeekOfYear(value: number): void {
     <ObsidianToggle v-model="pluginSettings$.useShelves" />
   </ObsidianSetting>
 
-  <JournalSettingsWithShelves v-if="pluginSettings$.useShelves" @organize="emit('organize', $event)" />
+  <JournalSettingsWithShelves
+    v-if="pluginSettings$.useShelves"
+    @organize="emit('organize', $event)"
+    @edit="emit('edit', $event)"
+  />
   <JournalSettingsWithoutShelves v-else @edit="emit('edit', $event)" />
 
   <ObsidianSetting name="Calendar view" heading />

src/settings/JournalSettingsEdit.vue

@@ -23,6 +23,7 @@ import RenameJournalModal from "../components/modals/RenameJournal.modal.vue";
 import { today } from "@/calendar";
 import NavigationBlockEditPreview from "@/code-blocks/navigation/NavigationBlockEditPreview.vue";
 import EditNavBlockRowModal from "@/components/modals/EditNavBlockRow.modal.vue";
+import JournalShelfModal from "@/components/modals/JournalShelf.modal.vue";
 
 const props = defineProps<{
   journalName: string;
@@ -48,6 +49,26 @@ function showRenameModal(): void {
   }).open();
 }
 
+function place(): void {
+  new VueModal("Place journal", JournalShelfModal, {
+    currentShelf: journal.value.shelves[0] ?? "",
+    onSave(shelfName: string) {
+      const currentShelf = journal.value.shelves[0];
+      if (currentShelf) {
+        pluginSettings$.value.shelves[currentShelf].journals = pluginSettings$.value.shelves[
+          currentShelf
+        ].journals.filter((name) => name !== props.journalName);
+      }
+      if (shelfName) {
+        pluginSettings$.value.shelves[shelfName].journals.push(props.journalName);
+        journal.value.shelves = [shelfName];
+      } else {
+        journal.value.shelves = [];
+      }
+    },
+  }).open();
+}
+
 function addCommand(): void {
   new VueModal("Add command", EditCommandModal, {
     index: journal.value.commands.length,
@@ -156,6 +177,12 @@ watch(
   <div v-if="journal">
     <ObsidianSetting heading>
       <template #name> Configuring {{ journal.name }} </template>
+      <template #description>
+        <div v-if="pluginSettings$.useShelves">
+          <div v-if="journal.shelves.length === 0">Not on a shelf right not. <a href="#" @click="place">Place</a></div>
+          <div v-else>On {{ journal.shelves[0] }} shelf right now. <a href="#" @click="place">Place elsewhere</a></div>
+        </div>
+      </template>
       <ObsidianIconButton icon="pencil" tooltip="Rename journal" @click="showRenameModal" />
       <ObsidianIconButton icon="chevron-left" tooltip="Back to list" @click="$emit('back')" />
     </ObsidianSetting>

src/settings/JournalSettingsWithShelves.vue

@@ -7,8 +7,15 @@ import RemoveShelf from "@/components/modals/RemoveShelf.modal.vue";
 import { plugin$ } from "@/stores/obsidian.store";
 import { pluginSettings$ } from "@/stores/settings.store";
 import { computed } from "vue";
+import JournalSettingsList from "./JournalSettingsList.vue";
+import CreateJournalModal from "@/components/modals/CreateJournal.modal.vue";
+import type { JournalSettings } from "@/types/settings.types";
 
-defineEmits<(event: "organize", shelfName: string) => void>();
+const emit = defineEmits<{
+  (event: "organize", shelfName: string): void;
+  // eslint-disable-next-line @typescript-eslint/unified-signatures
+  (event: "edit", journalName: string): void;
+}>();
 
 const shelvesList = computed(() =>
   Object.values(pluginSettings$.value.shelves).toSorted((a, b) => a.name.localeCompare(b.name)),
@@ -36,6 +43,15 @@ function removeShelf(shelfName: string): void {
     },
   }).open();
 }
+
+function create(): void {
+  new VueModal("Add Journal", CreateJournalModal, {
+    onCreate(name: string, writing: JournalSettings["write"]) {
+      plugin$.value.createJournal(name, writing);
+      emit("edit", name);
+    },
+  }).open();
+}
 </script>
 
 <template>
@@ -56,9 +72,10 @@ function removeShelf(shelfName: string): void {
       <ObsidianIconButton icon="trash-2" :tooltip="'Delete ' + shelf.name" @click="removeShelf(shelf.name)" />
     </ObsidianSetting>
   </template>
-  <template v-if="journalsWithoutShelf.length > 0">
-    <ObsidianSetting name="Journals without shelf" heading />
-  </template>
+  <ObsidianSetting name="Journals not on shelf" heading>
+    <ObsidianIconButton icon="plus" cta tooltip="Create new journal" @click="create" />
+  </ObsidianSetting>
+  <JournalSettingsList :journals="journalsWithoutShelf" @edit="$emit('edit', $event)" />
 </template>
 
 <style scoped></style>