add missing sidebar features

CHANGELOG.md

@@ -9,8 +9,9 @@ You can also check [on GitHub](https://github.com/nextcloud/news/releases), the
 ### Changed
 
 ### Fixed
-- restore old scroll behaviour to scroll after articles needed for mark scroll on read (#2817)
-
+- restore old scroll behavior to scroll after articles needed for mark scroll on read (#2817)
+- 25.0.0-alpha2: Feed folder bar menu always opens collapsed (#2508)
+- fix: hide folder/feeds with no unread items when `showAll` is disabled (#2503)
 
 # Releases
 ## [25.0.0-alpha11] - 2024-10-19

src/App.vue

@@ -68,6 +68,8 @@ export default Vue.extend({
 		// fetch folders and feeds to build side bar
 		await this.$store.dispatch(ACTIONS.FETCH_FOLDERS)
 		await this.$store.dispatch(ACTIONS.FETCH_FEEDS)
+
+		this.$store.commit(MUTATIONS.SET_LOADING, { value: false })
 	},
 	methods: {
 		stopPlaying() {

src/components/Sidebar.vue

@@ -48,60 +48,66 @@
 				</template>
 			</NcAppNavigationItem>
 
-			<NcAppNavigationItem v-for="topLevelItem in topLevelNav"
-				:key="topLevelItem.name || topLevelItem.title"
-				:name="topLevelItem.name || topLevelItem.title"
-				:icon="''"
-				:to="isFolder(topLevelItem) ? { name: ROUTES.FOLDER, params: { folderId: topLevelItem.id.toString() }} : { name: ROUTES.FEED, params: { feedId: topLevelItem.id.toString() } }"
-				:allow-collapse="true"
-				:force-menu="true">
-				<template #default>
-					<NcAppNavigationItem v-for="feed in topLevelItem.feeds"
-						:key="feed.name"
-						:name="feed.title"
-						:icon="''"
-						:to="{ name: ROUTES.FEED, params: { feedId: feed.id.toString() } }">
-						<template #icon>
-							<RssIcon v-if="!feed.faviconLink" />
-							<span v-if="feed.faviconLink" style="width: 16px; height: 16px; background-size: contain;" :style="{ 'backgroundImage': 'url(' + feed.faviconLink + ')' }" />
-						</template>
-						<template #counter>
-							<NcCounterBubble v-if="feed.unreadCount > 0">
-								{{ feed.unreadCount }}
-							</NcCounterBubble>
-						</template>
+			<template v-if="loading">
+				<NcAppNavigationItem name="Loading Feeds" :loading="true" />
+			</template>
+			<template v-else>
+				<NcAppNavigationItem v-for="topLevelItem in topLevelNav"
+					:key="topLevelItem.name || topLevelItem.title"
+					:name="topLevelItem.name || topLevelItem.title"
+					:icon="''"
+					:open="topLevelItem.opened"
+					:to="isFolder(topLevelItem) ? { name: ROUTES.FOLDER, params: { folderId: topLevelItem.id.toString() }} : { name: ROUTES.FEED, params: { feedId: topLevelItem.id.toString() } }"
+					:allow-collapse="true"
+					:force-menu="true"
+					@update:open="toggleFolderState(topLevelItem)">
+					<template v-for="feed in topLevelItem.feeds">
+						<NcAppNavigationItem :key="feed.name"
+							:name="feed.title"
+							:icon="''"
+							:to="{ name: ROUTES.FEED, params: { feedId: feed.id.toString() } }">
+							<template #icon>
+								<RssIcon v-if="!feed.faviconLink" />
+								<span v-if="feed.faviconLink" style="width: 16px; height: 16px; background-size: contain;" :style="{ 'backgroundImage': 'url(' + feed.faviconLink + ')' }" />
+							</template>
+							<template #counter>
+								<NcCounterBubble v-if="feed.unreadCount > 0">
+									{{ feed.unreadCount }}
+								</NcCounterBubble>
+							</template>
 
-						<template #actions>
-							<SidebarFeedLinkActions :feed-id="feed.id" />
-						</template>
-					</NcAppNavigationItem>
-				</template>
-				<template #icon>
-					<FolderIcon v-if="topLevelItem.feedCount !== undefined" style="width:22px" />
-					<RssIcon v-if="topLevelItem.feedCount === undefined && !topLevelItem.faviconLink" />
-					<span v-if="topLevelItem.feedCount === undefined && topLevelItem.faviconLink" style="height: 16px; width: 16px; background-size: contain;" :style="{ 'backgroundImage': 'url(' + topLevelItem.faviconLink + ')' }" />
-				</template>
-				<template #counter>
-					<NcCounterBubble v-if="topLevelItem.feedCount > 0">
-						{{ topLevelItem.feedCount }}
-					</NcCounterBubble>
-					<NcCounterBubble v-if="topLevelItem.unreadCount > 0">
-						{{ topLevelItem.unreadCount }}
-					</NcCounterBubble>
-				</template>
-				<template #actions>
-					<SidebarFeedLinkActions v-if="topLevelItem.name === undefined && !topLevelItem.url.includes('news/sharedwithme')" :feed-id="topLevelItem.id" />
-					<NcActionButton v-if="topLevelItem.name !== undefined" icon="icon-checkmark" @click="markFolderRead(topLevelItem)">
-						{{ t("news", "Mark read") }}
-					</NcActionButton>
-					<NcActionButton v-if="topLevelItem.name !== undefined" icon="icon-rename" @click="renameFolder(topLevelItem)">
-						{{ t("news", "Rename") }}
-					</NcActionButton>
-					<NcActionButton v-if="topLevelItem.name !== undefined" icon="icon-delete" @click="deleteFolder(topLevelItem)">
-						{{ t("news", "Delete") }}
-					</NcActionButton>
-				</template>
-			</NcAppNavigationItem>
+							<template #actions>
+								<SidebarFeedLinkActions :feed-id="feed.id" />
+							</template>
+						</NcAppNavigationItem>
+					</template>
+					<template #icon>
+						<FolderIcon v-if="topLevelItem.feedCount !== undefined" style="width:22px" />
+						<RssIcon v-if="topLevelItem.feedCount === undefined && !topLevelItem.faviconLink" />
+						<span v-if="topLevelItem.feedCount === undefined && topLevelItem.faviconLink" style="height: 16px; width: 16px; background-size: contain;" :style="{ 'backgroundImage': 'url(' + topLevelItem.faviconLink + ')' }" />
+					</template>
+					<template #counter>
+						<NcCounterBubble v-if="topLevelItem.feedCount > 0">
+							{{ topLevelItem.feedCount }}
+						</NcCounterBubble>
+						<NcCounterBubble v-if="topLevelItem.unreadCount > 0">
+							{{ topLevelItem.unreadCount }}
+						</NcCounterBubble>
+					</template>
+					<template #actions>
+						<SidebarFeedLinkActions v-if="topLevelItem.name === undefined && !topLevelItem.url.includes('news/sharedwithme')" :feed-id="topLevelItem.id" />
+						<NcActionButton v-if="topLevelItem.name !== undefined" icon="icon-checkmark" @click="markFolderRead(topLevelItem)">
+							{{ t("news", "Mark read") }}
+						</NcActionButton>
+						<NcActionButton v-if="topLevelItem.name !== undefined" icon="icon-rename" @click="renameFolder(topLevelItem)">
+							{{ t("news", "Rename") }}
+						</NcActionButton>
+						<NcActionButton v-if="topLevelItem.name !== undefined" icon="icon-delete" @click="deleteFolder(topLevelItem)">
+							{{ t("news", "Delete") }}
+						</NcActionButton>
+					</template>
+				</NcAppNavigationItem>
+			</template>
 
 			<NcAppNavigationItem :name="t('news', 'Explore')"
 				icon="true"
@@ -180,7 +186,7 @@ import FolderPlusIcon from 'vue-material-design-icons/FolderPlus.vue'
 import PlusIcon from 'vue-material-design-icons/Plus.vue'
 
 import { ROUTES } from '../routes'
-import { ACTIONS, AppState } from '../store'
+import { ACTIONS } from '../store'
 
 import AddFeed from './AddFeed.vue'
 import SidebarFeedLinkActions from './SidebarFeedLinkActions.vue'
@@ -189,26 +195,6 @@ import HelpModal from './modals/HelpModal.vue'
 import { Folder } from '../types/Folder'
 import { Feed } from '../types/Feed'
 
-const SideBarState = {
-	// eslint-disable-next-line @typescript-eslint/no-explicit-any
-	topLevelNav(localState: any, state: AppState): (Feed | Folder)[] {
-		let navItems: (Feed | Folder)[] = state.feeds.filter((feed: Feed) => {
-			return feed.folderId === undefined || feed.folderId === null
-		})
-		navItems = navItems.concat(state.folders)
-
-		// bring pinned items to the top
-		return navItems.sort((item, item2) => {
-			if ((item as Feed).pinned && !(item2 as Feed).pinned) {
-				return -1
-			} else if ((item2 as Feed).pinned && !(item as Feed).pinned) {
-				return 1
-			}
-			return 0
-		})
-	},
-}
-
 export default Vue.extend({
 	components: {
 		NcAppNavigation,
@@ -238,7 +224,42 @@ export default Vue.extend({
 	},
 	computed: {
 		...mapState(['feeds', 'folders', 'items']),
-		...mapState(SideBarState),
+		topLevelNav(): (Feed | Folder)[] {
+			const showAll = this.$store.getters.showAll
+
+			const feeds: { pinned: Feed[], visible: Feed[], ungrouped: Feed[] } = this.$store.getters.feeds.reduce((result, feed: Feed) => {
+				if (feed.pinned) result.pinned.push(feed)
+				if (showAll || feed.unreadCount > 0) {
+					result.visible.push(feed)
+					if (feed.folderId === undefined || feed.folderId === null) {
+						result.ungrouped.push(feed)
+					}
+				}
+				return result
+			}, { pinned: [], visible: [], ungrouped: [] })
+
+			const visibleFolders = this.$store.getters.folders
+				.filter((folder: Folder) => {
+					return showAll || feeds.visible.some((feed: Feed) => feed.folderId === folder.id)
+				})
+				.map((folder: Folder) => {
+					folder.feeds = feeds.visible.filter((feed: Feed) => feed.folderId === folder.id)
+					return folder
+				})
+
+			const navItems: (Feed | Folder)[] = [
+				...feeds.pinned,
+				...feeds.ungrouped,
+				...visibleFolders,
+			]
+
+			return navItems
+		},
+		loading: {
+			get() {
+				return this.$store.getters.loading
+			},
+		},
 		compact: {
 			get() {
 				return this.$store.getters.compact
@@ -373,7 +394,10 @@ export default Vue.extend({
 		isFolder(item: Feed | Folder) {
 			return (item as Folder).name !== undefined
 		},
-
+		toggleFolderState(folder: Folder) {
+			this.$set(folder, 'opened', !folder.opened)
+			this.$store.dispatch(ACTIONS.FOLDER_OPEN_STATE, { folder })
+		},
 	},
 })
 

src/dataservices/folder.service.ts

@@ -39,6 +39,20 @@ export class FolderService {
 		})
 	}
 
+	/**
+	 * Update folder open state
+	 *
+	 * @param param0 Folder data
+	 * @param param0.id {Number} ID number of folder to update
+	 * @param param0.opened {Boolean} opened state
+	 * @return {AxiosResponse} Null value is returned on success
+	 */
+	static folderOpenState({ id, opened }: { id: number, opened: boolean }): Promise<AxiosResponse> {
+		return axios.post(API_ROUTES.FOLDER + `/${id}/open`, {
+			open: opened,
+		})
+	}
+
 	/**
 	 * Deletes a folder in the Nextcloud News backend (by id number)
 	 *

src/store/app.ts

@@ -7,6 +7,7 @@ export const APPLICATION_ACTION_TYPES = {
 
 export type AppInfoState = {
 	error?: Error;
+	loading: boolean;
 	compact: boolean;
 	compactExpand: boolean;
 	oldestFirst: boolean;
@@ -18,6 +19,7 @@ export type AppInfoState = {
 
 const state: AppInfoState = {
 	error: undefined,
+	loading: true,
 	compact: loadState('news', 'compact', null) === '1',
 	compactExpand: loadState('news', 'compactExpand', null) === '1',
 	oldestFirst: loadState('news', 'oldestFirst', null) === '1',
@@ -31,6 +33,9 @@ const getters = {
 	error(state: AppInfoState) {
 		return state.error
 	},
+	loading() {
+		return state.loading
+	},
 	compact() {
 		return state.compact
 	},
@@ -67,6 +72,12 @@ export const mutations = {
 	) {
 		state.error = error
 	},
+	[APPLICATION_MUTATION_TYPES.SET_LOADING](
+		state: AppInfoState,
+		{ value }: { value: boolean },
+	) {
+		state.loading = value
+	},
 	compact(
 		state: AppInfoState,
 		{ value }: { value: boolean },

src/store/folder.ts

@@ -12,6 +12,7 @@ export const FOLDER_ACTION_TYPES = {
 	DELETE_FOLDER: 'DELETE_FOLDER',
 
 	FOLDER_SET_NAME: 'FOLDER_SET_NAME',
+	FOLDER_OPEN_STATE: 'FOLDER_OPEN_STATE',
 }
 
 export type FolderState = {
@@ -55,6 +56,12 @@ export const actions = {
 		await FolderService.renameFolder({ id: folder.id, name })
 		commit(FOLDER_MUTATION_TYPES.UPDATE_FOLDER, { id: folder.id, name })
 	},
+	async [FOLDER_ACTION_TYPES.FOLDER_OPEN_STATE](
+		state: ActionParams<FolderState>,
+		{ folder }: { folder: Folder },
+	) {
+		await FolderService.folderOpenState({ id: folder.id, opened: folder.opened })
+	},
 }
 
 export const mutations = {

src/types/Folder.ts

@@ -5,4 +5,5 @@ export type Folder = {
   feedCount: number;
   name: string;
   id: number;
+  opened: boolean;
 }

src/types/MutationTypes.ts

@@ -36,4 +36,5 @@ export const FEED_ITEM_MUTATION_TYPES = {
 
 export const APPLICATION_MUTATION_TYPES = {
 	SET_ERROR: 'SET_ERROR',
+	SET_LOADING: 'SET_LOADING',
 }

tests/javascript/unit/components/Sidebar.spec.ts

@@ -31,6 +31,7 @@ describe('Sidebar.vue', () => {
 					},
 					getters: {
 						feeds,
+						showAll: () => { return true },
 					},
 					dispatch: jest.fn(),
 				},
@@ -97,6 +98,7 @@ describe('Sidebar.vue', () => {
 					getters: {
 						feeds: [],
 						folders: [],
+						showAll: () => { return true },
 					},
 				},
 			})
@@ -112,6 +114,7 @@ describe('Sidebar.vue', () => {
 					getters: {
 						feeds,
 						folders,
+						showAll: () => { return true },
 					},
 				},
 			})
@@ -127,6 +130,7 @@ describe('Sidebar.vue', () => {
 					getters: {
 						feeds,
 						folders,
+						showAll: () => { return true },
 					},
 				},
 			})
@@ -142,6 +146,7 @@ describe('Sidebar.vue', () => {
 					getters: {
 						feeds,
 						folders,
+						showAll: () => { return true },
 					},
 				},
 			})
@@ -157,6 +162,7 @@ describe('Sidebar.vue', () => {
 					getters: {
 						feeds,
 						folders,
+						showAll: () => { return true },
 					},
 				},
 			})
@@ -172,6 +178,7 @@ describe('Sidebar.vue', () => {
 					getters: {
 						feeds,
 						folders,
+						showAll: () => { return true },
 					},
 				},
 			})