From 6218b02687f9360e8f881e3cdb9c0912c390fd51 Mon Sep 17 00:00:00 2001
From: Wolfgang <github@linux-dude.de>
Date: Fri, 3 Jan 2025 23:09:51 +0100
Subject: [PATCH 1/2] fix: style fixes in settings section and feed info table

Signed-off-by: Wolfgang <github@linux-dude.de>
---
 CHANGELOG.md                            |  1 +
 src/components/Sidebar.vue              | 24 ++++++++----
 src/components/modals/FeedInfoTable.vue | 51 ++++++++++++++++++-------
 3 files changed, 54 insertions(+), 22 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 0f3a7230b..e2388cc8d 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -12,6 +12,7 @@ You can also check [on GitHub](https://github.com/nextcloud/news/releases), the
 
 ### Fixed
 - OPML import use text field for title if title field is missing (#3016) 
+- style fixes in settings section and feed info table
 
 # Releases
 ## [25.2.0-beta.2] - 2024-01-02
diff --git a/src/components/Sidebar.vue b/src/components/Sidebar.vue
index d8621004f..069497280 100644
--- a/src/components/Sidebar.vue
+++ b/src/components/Sidebar.vue
@@ -154,13 +154,17 @@
 		</template>
 		<template #footer>
 			<NcAppNavigationSettings :name="t('news', 'Settings')">
-				<NcButton @click="showHelp = true">
-					{{ t('news', 'Keyboard shortcuts') }}
-				</NcButton>
-				<HelpModal v-if="showHelp" @close="showHelp=false" />
-				<NcButton @click="showFeedInfoTable = true">
-					{{ t('news', 'Article feed information') }}
-				</NcButton>
+				<div class="settings-button">
+					<NcButton wide="true" @click="showHelp = true">
+						{{ t('news', 'Keyboard shortcuts') }}
+					</NcButton>
+				</div>
+				<HelpModal v-if="showHelp" @close="showHelp = false" />
+				<div class="settings-button">
+					<NcButton wide="true" @click="showFeedInfoTable = true">
+						{{ t('news', 'Article feed information') }}
+					</NcButton>
+				</div>
 				<FeedInfoTable v-if="showFeedInfoTable" @close="showFeedInfoTable = false" />
 				<div>
 					<div class="select-container">
@@ -228,7 +232,7 @@
 							{{ t('news', 'Disable automatic refresh') }}
 						</label>
 					</div>
-					<h1>{{ t('news', 'Abonnements (OPML)') }}</h1>
+					<h2>{{ t('news', 'Abonnements (OPML)') }}</h2>
 					<div class="button-container">
 						<NcButton aria-label="UploadOpml"
 							:disabled="loading"
@@ -737,6 +741,10 @@ export default Vue.extend({
   margin-left: auto;
 }
 
+.settings-button {
+  padding: 2px;
+}
+
 .new-folder-container {
 	padding: calc(var(--default-grid-baseline, 4px)* 2);
 }
diff --git a/src/components/modals/FeedInfoTable.vue b/src/components/modals/FeedInfoTable.vue
index 4ee9f647d..4cdcc279c 100644
--- a/src/components/modals/FeedInfoTable.vue
+++ b/src/components/modals/FeedInfoTable.vue
@@ -13,45 +13,57 @@
 						<th @click="sortBy('id')">
 							<span class="column-title">
 								ID
-								<SortAscIcon v-if="sortKey === 'id' && sortOrder === 1" />
-								<SortDescIcon v-if="sortKey === 'id' && sortOrder !== 1" />
+								<div class="sort-icon">
+									<SortAscIcon v-show="sortKey === 'id' && sortOrder === 1" :size="20" />
+									<SortDescIcon v-show="sortKey === 'id' && sortOrder !== 1" :size="20" />
+								</div>
 							</span>
 						</th>
 						<th @click="sortBy('title')">
 							<span class="column-title">
 								{{ t('news', 'Title') }}
-								<SortAscIcon v-if="sortKey === 'title' && sortOrder === 1" />
-								<SortDescIcon v-if="sortKey === 'title' && sortOrder !== 1" />
+								<span class="sort-icon">
+									<SortAscIcon v-show="sortKey === 'title' && sortOrder === 1" :size="20" />
+									<SortDescIcon v-show="sortKey === 'title' && sortOrder !== 1" :size="20" />
+								</span>
 							</span>
 						</th>
 						<th @click="sortBy('lastModified')">
 							<span class="column-title">
 								{{ t('news', 'Last update') }}
-								<SortAscIcon v-if="sortKey === 'lastModified' && sortOrder === 1" />
-								<SortDescIcon v-if="sortKey === 'lastModified' && sortOrder !== 1" />
+								<span class="sort-icon">
+									<SortAscIcon v-show="sortKey === 'lastModified' && sortOrder === 1" :size="20" />
+									<SortDescIcon v-show="sortKey === 'lastModified' && sortOrder !== 1" :size="20" />
+								</span>
 							</span>
 						</th>
 						<th @click="sortBy('nextUpdateTime')">
 							<span class="column-title">
 								{{ t('news', 'Next update') }}
-								<SortAscIcon v-if="sortKey === 'nextUpdateTime' && sortOrder === 1" />
-								<SortDescIcon v-if="sortKey === 'nextUpdateTime' && sortOrder !== 1" />
+								<span class="sort-icon">
+									<SortAscIcon v-show="sortKey === 'nextUpdateTime' && sortOrder === 1" :size="20" />
+									<SortDescIcon v-show="sortKey === 'nextUpdateTime' && sortOrder !== 1" :size="20" />
+								</span>
 							</span>
 						</th>
 						<th :title="t('news', 'Articles per update')"
 							@click="sortBy('articlesPerUpdate')">
 							<span class="column-title">
 								APU
-								<SortAscIcon v-if="sortKey === 'articlesPerUpdate' && sortOrder === 1" />
-								<SortDescIcon v-if="sortKey === 'articlesPerUpdate' && sortOrder !== 1" />
+								<span class="sort-icon">
+									<SortAscIcon v-show="sortKey === 'articlesPerUpdate' && sortOrder === 1" :size="20" />
+									<SortDescIcon v-show="sortKey === 'articlesPerUpdate' && sortOrder !== 1" :size="20" />
+								</span>
 							</span>
 						</th>
 						<th :title="t('news', 'Error Count') "
 							@click="sortBy('updateErrorCount')">
 							<span class="column-title">
 								EC
-								<SortAscIcon v-if="sortKey === 'updateErrorCount' && sortOrder === 1" />
-								<SortDescIcon v-if="sortKey === 'updateErrorCount' && sortOrder !== 1" />
+								<span class="sort-icon">
+									<SortAscIcon v-if="sortKey === 'updateErrorCount' && sortOrder === 1" :size="20" />
+									<SortDescIcon v-if="sortKey === 'updateErrorCount' && sortOrder !== 1" :size="20" />
+								</span>
 							</span>
 						</th>
 					</tr>
@@ -165,15 +177,19 @@ export default {
 		th {
 			cursor: pointer;
 			font-weight: bold;
-			padding: .75rem 1rem .75rem 0;
 			border-bottom: 2px solid var(--color-background-darker);
 			&:hover {
 				background-color: var(--color-background-hover);
+				border-radius: 10px;
 			}
 		}
 
+		th * {
+			cursor: pointer;
+		}
+
 		td {
-			padding: .75rem 1rem .75rem 0;
+			padding: .25rem 1rem .25rem 0;
 			border-top: 1px solid var(--color-background-dark);
 			border-bottom: unset;
 
@@ -196,10 +212,17 @@ export default {
 		}
 
 		.column-title {
+			width: 100%;
 			display: flex;
+			justify-content: center;
 			align-items: center;
 			gap: 4px;
+			padding: .25rem 1rem .25rem 0;
 		}
 
+		.sort-icon {
+			height: 20px;
+			width: 20px;
+		}
 	}
 </style>

From 0ca9de049310c5191b08d47b62d801bbb8089e29 Mon Sep 17 00:00:00 2001
From: Wolfgang <github@linux-dude.de>
Date: Fri, 3 Jan 2025 23:35:32 +0100
Subject: [PATCH 2/2] fix: sorting in the feed information table changes also
 the original sorting

Signed-off-by: Wolfgang <github@linux-dude.de>
---
 CHANGELOG.md                            | 1 +
 src/components/modals/FeedInfoTable.vue | 2 +-
 2 files changed, 2 insertions(+), 1 deletion(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index e2388cc8d..8b4e14da4 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -13,6 +13,7 @@ You can also check [on GitHub](https://github.com/nextcloud/news/releases), the
 ### Fixed
 - OPML import use text field for title if title field is missing (#3016) 
 - style fixes in settings section and feed info table
+- sorting in the feed information table changes also the original sorting
 
 # Releases
 ## [25.2.0-beta.2] - 2024-01-02
diff --git a/src/components/modals/FeedInfoTable.vue b/src/components/modals/FeedInfoTable.vue
index 4cdcc279c..9faf33306 100644
--- a/src/components/modals/FeedInfoTable.vue
+++ b/src/components/modals/FeedInfoTable.vue
@@ -109,7 +109,7 @@ export default {
 			feeds: state => state.feeds.feeds,
 		}),
 		sortedFeeds() {
-			const sorted = this.feeds
+			const sorted = [...this.feeds]
 			if (this.sortKey) {
 				sorted.sort((a, b) => {
 					const valueA = a[this.sortKey]