fix: align webpack config and sidebar with shared patterns

src/App.vue

@@ -24,10 +24,11 @@
 
 		<!-- App loaded normally -->
 		<template v-else-if="storesReady && hasOpenRegisters">
-			<MainMenu />
+			<MainMenu @open-settings="settingsOpen = true" />
+			<UserSettings :open="settingsOpen" @update:open="settingsOpen = $event" />
 			<Views />
 			<CnIndexSidebar
-				v-if="sidebarState.active"
+				v-if="sidebarState.active && !objectSidebarState.active"
 				:schema="sidebarState.schema"
 				:visible-columns="sidebarState.visibleColumns"
 				:search-value="sidebarState.searchValue"
@@ -38,6 +39,19 @@
 				@search="onSidebarSearch"
 				@columns-change="onSidebarColumnsChange"
 				@filter-change="onSidebarFilterChange" />
+
+			<!-- Object sidebar (files/notes/tags/tasks/audit trail — controlled by CnDetailPage) -->
+			<CnObjectSidebar
+				v-if="objectSidebarState.active"
+				:object-type="objectSidebarState.objectType"
+				:object-id="objectSidebarState.objectId"
+				:title="objectSidebarState.title"
+				:subtitle="objectSidebarState.subtitle"
+				:register="objectSidebarState.register"
+				:schema="objectSidebarState.schema"
+				:hidden-tabs="objectSidebarState.hiddenTabs"
+				:open.sync="objectSidebarState.open" />
+
 			<Modals />
 			<Dialogs />
 		</template>
@@ -55,9 +69,10 @@
 
 import Vue from 'vue'
 import { NcContent, NcAppContent, NcButton, NcEmptyContent, NcLoadingIcon } from '@nextcloud/vue'
-import { CnIndexSidebar } from '@conduction/nextcloud-vue'
+import { CnObjectSidebar, CnIndexSidebar } from '@conduction/nextcloud-vue'
 import { generateUrl, imagePath } from '@nextcloud/router'
 import MainMenu from './navigation/MainMenu.vue'
+import UserSettings from './views/settings/UserSettings.vue'
 import Modals from './modals/Modals.vue'
 import Dialogs from './dialogs/Dialogs.vue'
 import Views from './views/Views.vue'
@@ -71,22 +86,37 @@
 		NcButton,
 		NcEmptyContent,
 		NcLoadingIcon,
+		CnObjectSidebar,
 		CnIndexSidebar,
 		MainMenu,
+		UserSettings,
 		Modals,
 		Dialogs,
 		Views,
 	},
 
 	provide() {
 		return {
+			objectSidebarState: this.objectSidebarState,
 			sidebarState: this.sidebarState,
 		}
 	},
 
 	data() {
 		return {
 			storesReady: false,
+			settingsOpen: false,
+			objectSidebarState: {
+				active: false,
+				open: true,
+				objectType: '',
+				objectId: '',
+				title: '',
+				subtitle: '',
+				register: '',
+				schema: '',
+				hiddenTabs: [],
+			},
 			sidebarState: Vue.observable({
 				active: false,
 				open: true,

src/navigation/MainMenu.vue

@@ -1,6 +1,7 @@
 <template>
 	<NcAppNavigation>
 		<NcAppNavigationList>
+
 			<!-- Dashboard -->
 			<NcAppNavigationItem
 				:active="navigationStore.selected === 'dashboard'"
@@ -23,18 +24,30 @@
 				</template>
 			</NcAppNavigationItem>
 		</NcAppNavigationList>
+
+		<NcAppNavigationSettings>
+			<NcAppNavigationItem
+				name="Settings"
+				@click="$emit('open-settings')">
+				<template #icon>
+					<Cog :size="20" />
+				</template>
+			</NcAppNavigationItem>
+		</NcAppNavigationSettings>
 	</NcAppNavigation>
 </template>
 <script>
 import {
 	NcAppNavigation,
 	NcAppNavigationList,
 	NcAppNavigationItem,
+	NcAppNavigationSettings,
 } from '@nextcloud/vue'
 import { navigationStore, objectStore } from '../store/store.js'
 
 // Icons
 import ViewDashboard from 'vue-material-design-icons/ViewDashboard.vue'
+import Cog from 'vue-material-design-icons/Cog.vue'
 import OfficeBuildingOutline from 'vue-material-design-icons/OfficeBuildingOutline.vue'
 import AccountMultiple from 'vue-material-design-icons/AccountMultiple.vue'
 import ApplicationCog from 'vue-material-design-icons/ApplicationCog.vue'
@@ -58,12 +71,15 @@
  */
 export default {
 	name: 'MainMenu',
+	emits: ['open-settings'],
 	components: {
 		NcAppNavigation,
 		NcAppNavigationList,
 		NcAppNavigationItem,
+		NcAppNavigationSettings,
 		// Icons
 		ViewDashboard,
+		Cog,
 		OfficeBuildingOutline,
 		AccountMultiple,
 		ApplicationCog,

src/views/settings/UserSettings.vue

@@ -0,0 +1,22 @@
+<!-- SPDX-License-Identifier: EUPL-1.2 -->
+<template>
+    <NcAppSettingsDialog
+        :open="open"
+        :show-navigation="false"
+        :name="t('softwarecatalog', 'Software Catalogus settings')"
+        @update:open="$emit('update:open', $event)">
+        <NcAppSettingsSection id="general" :name="t('softwarecatalog', 'General')">
+            <template #icon><CogIcon :size="20" /></template>
+            <p>{{ t('softwarecatalog', 'User preferences will appear here.') }}</p>
+        </NcAppSettingsSection>
+    </NcAppSettingsDialog>
+</template>
+<script>
+import { NcAppSettingsDialog, NcAppSettingsSection } from '@nextcloud/vue'
+import CogIcon from 'vue-material-design-icons/Cog.vue'
+export default {
+    name: 'UserSettings',
+    components: { NcAppSettingsDialog, NcAppSettingsSection, CogIcon },
+    props: { open: { type: Boolean, default: false } },
+}
+</script>

webpack.config.js

@@ -2,6 +2,7 @@ const path = require('path')
 const fs = require('fs')
 const webpackConfig = require('@nextcloud/webpack-vue-config')
 const { VueLoaderPlugin } = require('vue-loader')
+const NodePolyfillPlugin = require('node-polyfill-webpack-plugin')
 
 const buildMode = process.env.NODE_ENV
 const isDev = buildMode === 'development'
@@ -28,41 +29,40 @@ webpackConfig.entry = {
 const localLib = path.resolve(__dirname, '../nextcloud-vue/src')
 const useLocalLib = fs.existsSync(localLib)
 
-webpackConfig.resolve = {
-	extensions: ['.ts', '.tsx', '.vue', '.js'],
-	alias: {
-		'@': path.resolve(__dirname, 'src'),
-		...(useLocalLib ? { '@conduction/nextcloud-vue': localLib } : {}),
-		// Deduplicate shared packages so the aliased library source uses
-		// the same instances as the app (prevents dual-Pinia / dual-Vue bugs).
-		'vue$': path.resolve(__dirname, 'node_modules/vue'),
-		'pinia$': path.resolve(__dirname, 'node_modules/pinia'),
-		'@nextcloud/vue$': path.resolve(__dirname, 'node_modules/@nextcloud/vue'),
-	},
+webpackConfig.resolve = webpackConfig.resolve || {}
+webpackConfig.resolve.modules = [path.resolve(__dirname, 'node_modules'), 'node_modules']
+webpackConfig.resolve.alias = {
+	...(webpackConfig.resolve.alias || {}),
+	'@': path.resolve(__dirname, 'src'),
+	...(useLocalLib ? { '@conduction/nextcloud-vue': localLib } : {}),
+	// Deduplicate shared packages so the aliased library source uses
+	// the same instances as the app (prevents dual-Pinia / dual-Vue bugs).
+	'vue$': path.resolve(__dirname, 'node_modules/vue'),
+	'pinia$': path.resolve(__dirname, 'node_modules/pinia'),
+	'@nextcloud/vue$': path.resolve(__dirname, 'node_modules/@nextcloud/vue'),
 }
 
-webpackConfig.module = {
-	rules: [
-		{
-			test: /\.vue$/,
-			loader: 'vue-loader',
-		},
-		{
-			test: /\.ts$/,
-			loader: 'ts-loader',
-			exclude: /node_modules/,
-			options: { appendTsSuffixTo: [/\.vue$/] },
-		},
-		{
-			test: /\.css$/,
-			use: ['style-loader', 'css-loader'],
-		},
-	],
-}
+webpackConfig.module.rules.push(
+	{
+		test: /\.vue$/,
+		loader: 'vue-loader',
+	},
+	{
+		test: /\.ts$/,
+		loader: 'ts-loader',
+		exclude: /node_modules/,
+		options: { appendTsSuffixTo: [/\.vue$/] },
+	},
+	{
+		test: /\.css$/,
+		use: ['style-loader', 'css-loader'],
+	},
+)
 
-webpackConfig.plugins = [
+webpackConfig.plugins.push(
 	new VueLoaderPlugin(),
-]
+	new NodePolyfillPlugin({ additionalAliases: ['process'] }),
+)
 
 // Force @nextcloud/dialogs to resolve from this app's node_modules,
 // preventing the nextcloud-vue submodule's nested deps (Vue 3) from leaking in.