diff --git a/packages/frontend/src/pages/room.add-object-dialog.vue b/packages/frontend/src/pages/room.add-object-dialog.vue index 917ebbd79e..707b00cb06 100644 --- a/packages/frontend/src/pages/room.add-object-dialog.vue +++ b/packages/frontend/src/pages/room.add-object-dialog.vue @@ -17,8 +17,19 @@ SPDX-License-Identifier: AGPL-3.0-only
-
- +
+ + +
+ +
+
+ + +
+ +
+
@@ -55,6 +66,7 @@ import MkButton from '@/components/MkButton.vue'; import { prefer } from '@/preferences.js'; import { deepClone } from '@/utility/clone.js'; import { store } from '@/store.js'; +import MkFoldableSection from '@/components/MkFoldableSection.vue'; // TODO: instanceのidと紛らわしいのでid -> typeにする @@ -76,6 +88,11 @@ const selectedObjectDef = computed(() => OBJECT_DEFS.find(def => def.id === sele const showObjectOptions = ref(false); const engine = shallowRef(null); +const recentlyUsedDefs = computed(() => { + const recentlyUsed = store.s.recentlyUsedRoomObjects; + return recentlyUsed.map(id => OBJECT_DEFS.find(def => def.id === id)).filter((def): def is typeof OBJECT_DEFS[number] => def != null); +}); + onMounted(async () => { engine.value = await createRoomObjectPreviewEngine(canvas.value!); @@ -142,20 +159,22 @@ async function cancel() { position: relative; } -.catalogItems { - display: grid; - grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); - grid-gap: 12px; - padding: 12px; +.main { height: 100%; box-sizing: border-box; overflow-y: scroll; background: var(--MI_THEME-bg); } -.catalogItem { +.catalogItems { + display: grid; + grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); + grid-gap: 12px; + padding: 12px; + box-sizing: border-box; } -.selected { + +.catalogItem { } .preview {