feat(admin): GitHub repo button in the sidebar footer (#778)

Adds a subtle 'View PicPeak on GitHub' link in the admin sidebar footer
(next to the version/storage widgets), so admins can reach the repo —
star it, browse source, report an issue — from anywhere in the dashboard,
not just the setup screen.

- Centralizes the repo URL as `repoUrl` in utils/githubReleaseUrl.ts
  (githubReleaseUrl now derives from it) so the org URL lives in one place.
- target=_blank + rel=noopener noreferrer; EN + DE i18n
  (`admin.viewOnGithub`); dark-mode aware, matches the muted footer style.
This commit is contained in:
Paul Nothaft
2026-07-10 09:50:05 +02:00
parent 274ef0cd73
commit d3d7df46f2
4 changed files with 24 additions and 1 deletions
@@ -15,11 +15,13 @@ import {
Workflow,
PanelLeftClose,
PanelLeftOpen,
Github,
} from 'lucide-react';
import { useQuery } from '@tanstack/react-query';
import { useTranslation } from 'react-i18next';
import { settingsService } from '../../services/settings.service';
import { VersionInfo } from './VersionInfo';
import { repoUrl } from '../../utils/githubReleaseUrl';
import { usePermissions } from '../../contexts/PermissionsContext';
import { useAdminDarkMode } from '../../contexts/AdminDarkModeContext';
import { useFeatureFlags, type FeatureKey } from '../../contexts/FeatureFlagsContext';
@@ -324,6 +326,20 @@ export const AdminSidebar: React.FC<AdminSidebarProps> = ({ isOpen, onClose, col
{/* Storage Info */}
<StorageInfo />
{/* Link to the project on GitHub (#778). Subtle footer row so
admins can reach the repo — star, source, report an issue —
from anywhere in the dashboard, not just the setup screen. */}
<a
href={repoUrl}
target="_blank"
rel="noopener noreferrer"
className="mx-4 mb-3 flex items-center gap-2 text-xs text-neutral-500 dark:text-neutral-400 hover:text-neutral-700 dark:hover:text-neutral-200 transition-colors"
title={t('admin.viewOnGithub', 'View PicPeak on GitHub')}
>
<Github className="w-3.5 h-3.5" />
<span>{t('admin.viewOnGithub', 'View PicPeak on GitHub')}</span>
</a>
</div>
)}
</div>
+1
View File
@@ -2411,6 +2411,7 @@
"channelBeta": "Beta",
"beta": "BETA",
"viewReleaseNotes": "Versionshinweise anzeigen",
"viewOnGithub": "PicPeak auf GitHub ansehen",
"updateAvailableShort": "v{{version}} verfügbar",
"upToDate": "Alles aktuell",
"updateNow": "Jetzt aktualisieren",
+1
View File
@@ -1987,6 +1987,7 @@
"channelBeta": "Beta",
"beta": "BETA",
"viewReleaseNotes": "View Release Notes",
"viewOnGithub": "View PicPeak on GitHub",
"updateAvailableShort": "v{{version}} available",
"upToDate": "You're up to date",
"updateNow": "Update Now",
+6 -1
View File
@@ -10,5 +10,10 @@
* notes for the running version (#566) and by the update-available
* indicator to link to the upgrade target's notes.
*/
/** Repository home on GitHub. Single source of truth for the org URL so
* links (release notes, the admin "view on GitHub" button, #778) don't
* each hardcode it. */
export const repoUrl = 'https://github.com/PicPeak/picpeak';
export const githubReleaseUrl = (version: string): string =>
`https://github.com/PicPeak/picpeak/releases/tag/v${version}`;
`${repoUrl}/releases/tag/v${version}`;