more help for users, v1.4.1

CHANGELOG.md

@@ -1,3 +1,9 @@
+## 1.4.1 - 2024-12-27
+### Added
+- Added a help tooltip to explain how to use the app
+- Added an onboarding guide to help users get started
+- Added a FAQ section to help users
+
 ## 1.4.0 - 2024-12-27
 ### Added
 - Added ability to exclude specific folders from duplicate scanning via settings page

appinfo/info.xml

@@ -33,7 +33,7 @@
 * 📊 **Aperçu & Simulation** - Visualisez ce qui serait supprimé avant d'agir
 * 💼 **Traitement en Arrière-plan** - Tâches automatisées de recherche de doublons
 ]]></description>
-    <version>1.4.0</version>
+    <version>1.4.1</version>
     <author>André Théo LAURET</author>
 
     <namespace>DuplicateFinder</namespace>

package.json

@@ -1,7 +1,7 @@
 {
   "name": "duplicatefinder",
   "description": "Save some space by finding your duplicate files",
-  "version": "1.4.0",
+  "version": "1.4.1",
   "author": "André Théo LAURET <andrelauret@eclipse-technology.eu>",
   "contributors": [],
   "bugs": {

src/App.vue

@@ -2,17 +2,21 @@
 	<NcContent app-name="duplicatefinder">
 		<NcLoadingIcon v-if="isLoading" />
 		<template v-else>
-			<DuplicateNavigation v-if="acknowledgedDuplicates.length > 0 || unacknowledgedDuplicates.length > 0"
-				:acknowledged-duplicates="acknowledgedDuplicates" :unacknowledged-duplicates="unacknowledgedDuplicates"
-				:currentDuplicateId="currentDuplicate?.id"
-				:acknowledgedPagination="acknowledgedPagination"
-				:unacknowledgedPagination="unacknowledgedPagination"
-				:activeView="activeView"
-				@open-duplicate="openDuplicate"
-				@open-settings="settingsOpen = true"
-				@open-bulk-delete="openBulkDelete"
-				@update-acknowledged-duplicates="updateAcknowledgedDuplicates"
-				@update-unacknowledged-duplicates="updateUnacknowledgedDuplicates" />
+			<div class="app-navigation-header">
+				<DuplicateNavigation v-if="acknowledgedDuplicates.length > 0 || unacknowledgedDuplicates.length > 0"
+					:acknowledged-duplicates="acknowledgedDuplicates" :unacknowledged-duplicates="unacknowledgedDuplicates"
+					:currentDuplicateId="currentDuplicate?.id"
+					:acknowledgedPagination="acknowledgedPagination"
+					:unacknowledgedPagination="unacknowledgedPagination"
+					:activeView="activeView"
+					@open-duplicate="openDuplicate"
+					@open-settings="settingsOpen = true"
+					@show-help="showHelp"
+					@open-bulk-delete="openBulkDelete"
+					@update-acknowledged-duplicates="updateAcknowledgedDuplicates"
+					@update-unacknowledged-duplicates="updateUnacknowledgedDuplicates" />
+			</div>
+
 			<NcAppContent>
 				<template v-if="activeView === 'bulk-delete'">
 					<BulkDeletionSettings @duplicates-deleted="refreshDuplicates" />
@@ -45,18 +49,32 @@
 					<ExcludedFoldersSettings />
 				</NcAppSettingsSection>
 			</NcAppSettingsDialog>
+
+			<NcModal
+				v-if="helpModalOpen"
+				:title="helpModalTitle"
+				@close="helpModalOpen = false">
+				<div class="help-content">
+					<OnboardingGuide v-if="currentHelpSection === 'guide'" :show="true" @close="helpModalOpen = false" />
+					<UsageExamples v-if="currentHelpSection === 'examples'" :show="true" @close="helpModalOpen = false" />
+					<FAQ v-if="currentHelpSection === 'faq'" :show="true" @close="helpModalOpen = false" />
+				</div>
+			</NcModal>
 		</template>
 	</NcContent>
 </template>
 
 
 <script>
-import { NcAppContent, NcContent, NcLoadingIcon, NcAppSettingsDialog, NcAppSettingsSection } from '@nextcloud/vue';
+import { NcAppContent, NcContent, NcLoadingIcon, NcAppSettingsDialog, NcAppSettingsSection, NcButton, NcModal } from '@nextcloud/vue';
 import DuplicateNavigation from './components/DuplicateNavigation.vue';
 import DuplicateDetails from './components/DuplicateDetails.vue';
 import OriginFoldersSettings from './components/OriginFoldersSettings.vue';
 import ExcludedFoldersSettings from './components/ExcludedFoldersSettings.vue';
 import BulkDeletionSettings from './components/BulkDeletionSettings.vue';
+import OnboardingGuide from './components/help/OnboardingGuide.vue';
+import UsageExamples from './components/help/UsageExamples.vue';
+import FAQ from './components/help/FAQ.vue';
 import { fetchDuplicates } from '@/tools/api';
 import { removeDuplicateFromList } from '@/tools/utils';
 import Folder from 'vue-material-design-icons/Folder';
@@ -69,6 +87,8 @@ export default {
 		NcAppContent,
 		NcContent,
 		NcLoadingIcon,
+		NcButton,
+		NcModal,
 		DuplicateNavigation,
 		DuplicateDetails,
 		OriginFoldersSettings,
@@ -79,6 +99,9 @@ export default {
 		Folder,
 		FolderRemove,
 		Delete,
+		OnboardingGuide,
+		UsageExamples,
+		FAQ
 	},
 	data() {
 		return {
@@ -97,9 +120,29 @@ export default {
 			unacknowledgedPagination: {
 				currentPage: 1,
 				totalPages: 1
-			}
+			},
+			helpModalOpen: false,
+			currentHelpSection: 'guide',
 		};
 	},
+	computed: {
+		helpModalTitle() {
+			const titles = {
+				guide: t('duplicatefinder', 'Getting Started'),
+				examples: t('duplicatefinder', 'Usage Examples'),
+				faq: t('duplicatefinder', 'FAQ')
+			}
+			return titles[this.currentHelpSection] || t('duplicatefinder', 'Help')
+		},
+		currentHelpComponent() {
+			const components = {
+				guide: OnboardingGuide,
+				examples: UsageExamples,
+				faq: FAQ
+			}
+			return components[this.currentHelpSection]
+		}
+	},
 	async created() {
 		await this.loadInitialData()
 	},
@@ -262,6 +305,10 @@ export default {
 		openBulkDelete() {
 			this.activeView = 'bulk-delete'
 			this.currentDuplicate = null
+		},
+		showHelp(section) {
+			this.currentHelpSection = section || 'guide'
+			this.helpModalOpen = true
 		}
 	},
 	mounted() {
@@ -275,4 +322,49 @@ export default {
 .app-content {
 	overflow-y: auto;
 }
+
+.help-content {
+	padding: var(--spacing-3);
+	max-width: 800px;
+	margin: 0 auto;
+}
+
+:deep(.modal-container) {
+	background-color: var(--color-main-background);
+	border-radius: var(--border-radius-large);
+	box-shadow: var(--shadow-modal);
+	border: 1px solid var(--color-border);
+	overflow: hidden;
+}
+
+:deep(.modal-wrapper) {
+	border-radius: var(--border-radius-large);
+}
+
+:deep(.modal-header) {
+	background-color: var(--color-primary-element-light);
+	border-bottom: 1px solid var(--color-border);
+	padding: 16px 20px;
+}
+
+:deep(.modal-title) {
+	color: var(--color-main-text);
+	font-weight: bold;
+	font-size: 20px;
+}
+
+:deep(.modal-container__close) {
+	opacity: 0.7;
+	transition: opacity 0.2s ease;
+}
+
+:deep(.modal-container__close:hover) {
+	opacity: 1;
+}
+
+:deep(.modal-container__content) {
+	padding: 0;
+	max-height: 80vh;
+	overflow-y: auto;
+}
 </style>

src/components/DuplicateNavigation.vue

@@ -15,34 +15,48 @@
                 </template>
             </NcAppNavigationItem>
 
-            <!-- Navigation for Unacknowledged Duplicates -->
-            <NcAppNavigationItem :name="t('duplicatefinder', 'Unacknowledged')" 
+            <!-- Settings Navigation Item -->
+            <NcAppNavigationItem :name="t('duplicatefinder', 'Settings')" @click="$emit('open-settings')" :exact="true">
+                <template #icon>
+                    <Cog :size="20" />
+                </template>
+            </NcAppNavigationItem>
+
+            <!-- Help Section -->
+            <NcAppNavigationItem :name="t('duplicatefinder', 'Help')" 
                 :allowCollapse="true" 
-                :open="true"
-                :active="activeView === 'details'">
+                :open="false">
                 <template #icon>
-                    <CloseCircle :size="20" />
+                    <HelpCircle :size="20" />
                 </template>
                 <template>
-                    <div v-show="filteredUnacknowledgedDuplicates.length > 0">
-                        <div v-for="duplicate in filteredUnacknowledgedDuplicates" :key="duplicate.id" class="duplicate-item">
-                            <DuplicateListItem 
-                                :duplicate="duplicate" 
-                                :isActive="currentDuplicateId === duplicate.id"
-                                @duplicate-selected="openDuplicate"
-                                @duplicate-resolved="handleDuplicateResolved" />
-                        </div>
-                    </div>
-                    <div v-show="filteredUnacknowledgedDuplicates.length === 0">
-                        <p>{{ t('duplicatefinder', 'No unacknowledged duplicates found.') }}</p>
-                    </div>
-                    <button v-if="hasMoreUnacknowledged" @click="loadMoreUnacknowledgedDuplicates">
-                        {{ t('duplicatefinder', 'Load More') }}
-                    </button>
+                    <NcAppNavigationItem :name="t('duplicatefinder', 'Getting Started')"
+                        @click="$emit('show-help', 'guide')">
+                        <template #icon>
+                            <School :size="20" />
+                        </template>
+                    </NcAppNavigationItem>
+
+                    <NcAppNavigationItem :name="t('duplicatefinder', 'Usage Examples')"
+                        @click="$emit('show-help', 'examples')">
+                        <template #icon>
+                            <PlayCircle :size="20" />
+                        </template>
+                    </NcAppNavigationItem>
+
+                    <NcAppNavigationItem :name="t('duplicatefinder', 'FAQ')"
+                        @click="$emit('show-help', 'faq')">
+                        <template #icon>
+                            <FrequentlyAskedQuestions :size="20" />
+                        </template>
+                    </NcAppNavigationItem>
                 </template>
             </NcAppNavigationItem>
+
             <!-- Navigation for Acknowledged Duplicates -->
-            <NcAppNavigationItem :name="t('duplicatefinder', 'Acknowledged')" :allowCollapse="true" :open="true">
+            <NcAppNavigationItem :name="t('duplicatefinder', 'Acknowledged')" 
+                :allowCollapse="true" 
+                :open="true">
                 <template #icon>
                     <CheckCircle :size="20" />
                 </template>
@@ -64,10 +78,31 @@
                     </button>
                 </template>
             </NcAppNavigationItem>
-            <!-- Settings Navigation Item -->
-            <NcAppNavigationItem :name="t('duplicatefinder', 'Settings')" @click="$emit('open-settings')" :exact="true">
+
+            <!-- Navigation for Unacknowledged Duplicates -->
+            <NcAppNavigationItem :name="t('duplicatefinder', 'Unacknowledged')" 
+                :allowCollapse="true" 
+                :open="true"
+                :active="activeView === 'details'">
                 <template #icon>
-                    <Cog :size="20" />
+                    <CloseCircle :size="20" />
+                </template>
+                <template>
+                    <div v-show="filteredUnacknowledgedDuplicates.length > 0">
+                        <div v-for="duplicate in filteredUnacknowledgedDuplicates" :key="duplicate.id" class="duplicate-item">
+                            <DuplicateListItem 
+                                :duplicate="duplicate" 
+                                :isActive="currentDuplicateId === duplicate.id"
+                                @duplicate-selected="openDuplicate"
+                                @duplicate-resolved="handleDuplicateResolved" />
+                        </div>
+                    </div>
+                    <div v-show="filteredUnacknowledgedDuplicates.length === 0">
+                        <p>{{ t('duplicatefinder', 'No unacknowledged duplicates found.') }}</p>
+                    </div>
+                    <button v-if="hasMoreUnacknowledged" @click="loadMoreUnacknowledgedDuplicates">
+                        {{ t('duplicatefinder', 'Load More') }}
+                    </button>
                 </template>
             </NcAppNavigationItem>
         </template>
@@ -81,6 +116,10 @@ import CloseCircle from 'vue-material-design-icons/CloseCircle';
 import CheckCircle from 'vue-material-design-icons/CheckCircle';
 import Cog from 'vue-material-design-icons/Cog';
 import Delete from 'vue-material-design-icons/Delete';
+import HelpCircle from 'vue-material-design-icons/HelpCircle';
+import School from 'vue-material-design-icons/School';
+import PlayCircle from 'vue-material-design-icons/PlayCircle';
+import FrequentlyAskedQuestions from 'vue-material-design-icons/FrequentlyAskedQuestions';
 import { fetchDuplicates } from '@/tools/api';
 
 export default {
@@ -92,7 +131,11 @@ export default {
         CheckCircle, 
         CloseCircle, 
         Cog,
-        Delete
+        Delete,
+        HelpCircle,
+        School,
+        PlayCircle,
+        FrequentlyAskedQuestions
     },
     props: {
         acknowledgedDuplicates: Array,