@mdguggenbichler/slugbase-core 0.0.13 → 0.0.15

package/frontend/src/App.tsx

@@ -30,25 +30,27 @@ const GoPreferences = lazy(() => import('./pages/GoPreferences'));
 function PrivateRoute({ children }: { children: React.ReactNode }) {
   const { user, loading } = useAuth();
   const { t } = useTranslation();
-  const { appBasePath } = useAppConfig();
+  const { pathPrefixForLinks } = useAppConfig();
+  const loginPath = `${pathPrefixForLinks || ''}/login`.replace(/\/+/g, '/') || '/login';
   if (loading) return <div className="min-h-screen flex items-center justify-center"><div className="text-lg">{t('common.loading')}</div></div>;
-  if (!user) return <Navigate to={`${appBasePath}/login`} replace />;
+  if (!user) return <Navigate to={loginPath} replace />;
   return <>{children}</>;
 }
 
 function AdminRoute({ children }: { children: React.ReactNode }) {
   const { user, loading } = useAuth();
   const { t } = useTranslation();
-  const { appBasePath, appRootPath } = useAppConfig();
+  const { pathPrefixForLinks, appRootPath } = useAppConfig();
+  const loginPath = `${pathPrefixForLinks || ''}/login`.replace(/\/+/g, '/') || '/login';
   if (loading) return <div className="min-h-screen flex items-center justify-center"><div className="text-lg">{t('common.loading')}</div></div>;
-  if (!user) return <Navigate to={`${appBasePath}/login`} replace />;
+  if (!user) return <Navigate to={loginPath} replace />;
   if (!user.is_admin) return <Navigate to={appRootPath} replace />;
   return <>{children}</>;
 }
 
 function SharedRedirect() {
-  const { appBasePath } = useAppConfig();
-  const to = `${appBasePath || ''}/bookmarks?scope=shared_with_me`;
+  const { pathPrefixForLinks } = useAppConfig();
+  const to = `${pathPrefixForLinks || ''}/bookmarks?scope=shared_with_me`.replace(/\/+/g, '/') || '/bookmarks?scope=shared_with_me';
   return <Navigate to={to} replace />;
 }
 

package/frontend/src/components/AppSidebar.tsx

@@ -1,6 +1,6 @@
+import React, { useState, useEffect } from 'react';
 import { Link, useLocation } from 'react-router-dom';
 import { useTranslation } from 'react-i18next';
-import { useState, useEffect } from 'react';
 import {
   Bookmark,
   Folder,
@@ -30,7 +30,7 @@ import {
 } from './ui/sidebar';
 import { useAppConfig } from '../contexts/AppConfigContext';
 import type { User } from '../contexts/AuthContext';
-import { cn } from '@/lib/utils';
+import { cn } from '../lib/utils';
 
 const SIDEBAR_ADMIN_OPEN_KEY = 'slugbase_sidebar_admin_open';
 
@@ -43,16 +43,18 @@ export default function AppSidebar({ user, version = null }: AppSidebarProps) {
   const { t } = useTranslation();
   const location = useLocation();
   const pathname = location.pathname;
-  const { appBasePath } = useAppConfig();
+  const { appBasePath, pathPrefixForLinks } = useAppConfig();
   const { setOpenMobile, toggleSidebar, isMobile, state } = useSidebar();
-  const adminBase = `${appBasePath || ''}/admin`;
+  const prefix = pathPrefixForLinks || '';
+  const adminBaseFull = `${appBasePath || ''}/admin`;
+  const adminBaseLink = `${prefix}/admin`.replace(/\/+/g, '/') || '/admin';
 
   const adminNavItems = [
-    { path: `${adminBase}/members`, label: t('admin.users'), icon: Users },
-    { path: `${adminBase}/teams`, label: t('admin.teams'), icon: UserCog },
-    { path: `${adminBase}/oidc`, label: t('admin.oidcProviders'), icon: Key },
-    { path: `${adminBase}/settings`, label: t('admin.settings'), icon: Settings },
-    { path: `${adminBase}/ai`, label: t('admin.ai.nav'), icon: Sparkles },
+    { pathForLink: `${adminBaseLink}/members`, pathForActive: `${adminBaseFull}/members`, label: t('admin.users'), icon: Users },
+    { pathForLink: `${adminBaseLink}/teams`, pathForActive: `${adminBaseFull}/teams`, label: t('admin.teams'), icon: UserCog },
+    { pathForLink: `${adminBaseLink}/oidc`, pathForActive: `${adminBaseFull}/oidc`, label: t('admin.oidcProviders'), icon: Key },
+    { pathForLink: `${adminBaseLink}/settings`, pathForActive: `${adminBaseFull}/settings`, label: t('admin.settings'), icon: Settings },
+    { pathForLink: `${adminBaseLink}/ai`, pathForActive: `${adminBaseFull}/ai`, label: t('admin.ai.nav'), icon: Sparkles },
   ];
 
   const isOverviewActive =
@@ -71,11 +73,13 @@ export default function AppSidebar({ user, version = null }: AppSidebarProps) {
     localStorage.setItem(SIDEBAR_ADMIN_OPEN_KEY, String(adminOpen));
   }, [adminOpen]);
 
+  const rootLink = prefix || '/';
+  const rootActive = appBasePath || '/';
   const primaryNavItems = [
-    { path: appBasePath || '/', label: t('dashboard.overview'), icon: LayoutDashboard },
-    { path: `${appBasePath}/bookmarks`, label: t('bookmarks.title'), icon: Bookmark },
-    { path: `${appBasePath}/folders`, label: t('folders.title'), icon: Folder },
-    { path: `${appBasePath}/tags`, label: t('tags.title'), icon: Tag },
+    { pathForLink: rootLink, pathForActive: rootActive, label: t('dashboard.overview'), icon: LayoutDashboard },
+    { pathForLink: `${prefix}/bookmarks`.replace(/\/+/g, '/') || '/bookmarks', pathForActive: `${appBasePath || ''}/bookmarks`, label: t('bookmarks.title'), icon: Bookmark },
+    { pathForLink: `${prefix}/folders`.replace(/\/+/g, '/') || '/folders', pathForActive: `${appBasePath || ''}/folders`, label: t('folders.title'), icon: Folder },
+    { pathForLink: `${prefix}/tags`.replace(/\/+/g, '/') || '/tags', pathForActive: `${appBasePath || ''}/tags`, label: t('tags.title'), icon: Tag },
   ];
 
   const handleNavClick = () => {
@@ -85,21 +89,22 @@ export default function AppSidebar({ user, version = null }: AppSidebarProps) {
   };
 
   return (
+    <React.Fragment>
     <Sidebar collapsible="icon" side="left">
       <SidebarContent>
         <SidebarGroup>
           <SidebarGroupContent>
             <SidebarMenu>
               {primaryNavItems.map((item) => (
-                <SidebarMenuItem key={item.path}>
+                <SidebarMenuItem key={item.pathForLink}>
                   <SidebarMenuButton
                     asChild
                     isActive={
-                      item.path === (appBasePath || '/') ? isOverviewActive : pathname === item.path
+                      item.pathForActive === (appBasePath || '/') ? isOverviewActive : pathname === item.pathForActive
                     }
                     tooltip={item.label}
                   >
-                    <Link to={item.path} onClick={handleNavClick} aria-current={pathname === item.path ? 'page' : undefined}>
+                    <Link to={item.pathForLink} onClick={handleNavClick} aria-current={pathname === item.pathForActive ? 'page' : undefined}>
                       <item.icon className="h-5 w-5" />
                       <span>{item.label}</span>
                     </Link>
@@ -138,16 +143,16 @@ export default function AppSidebar({ user, version = null }: AppSidebarProps) {
                     {adminNavItems.map((item) => {
                       const Icon = item.icon;
                       return (
-                        <SidebarMenuItem key={item.path}>
+                        <SidebarMenuItem key={item.pathForLink}>
                           <SidebarMenuButton
                             asChild
-                            isActive={pathname === item.path}
+                            isActive={pathname === item.pathForActive}
                             tooltip={item.label}
                           >
                             <Link
-                              to={item.path}
+                              to={item.pathForLink}
                               onClick={handleNavClick}
-                              aria-current={pathname === item.path ? 'page' : undefined}
+                              aria-current={pathname === item.pathForActive ? 'page' : undefined}
                             >
                               <Icon className="h-5 w-5" />
                               <span>{item.label}</span>
@@ -210,5 +215,6 @@ export default function AppSidebar({ user, version = null }: AppSidebarProps) {
         </SidebarGroup>
       </SidebarFooter>
     </Sidebar>
+    </React.Fragment>
   );
 }

package/frontend/src/components/GlobalSearch.tsx

@@ -37,7 +37,8 @@ interface SearchResult {
 export default function GlobalSearch() {
   const { t } = useTranslation();
   const navigate = useNavigate();
-  const { appBasePath } = useAppConfig();
+  const { pathPrefixForLinks } = useAppConfig();
+  const prefix = (pathPrefixForLinks || '').replace(/\/+/g, '/') || '';
   const { user } = useAuth();
   const { open, setOpen, openSearch } = useSearchCommand();
   const [query, setQuery] = useState('');
@@ -47,19 +48,19 @@ export default function GlobalSearch() {
   const showAdmin = user?.is_admin;
 
   const navigationItems: SearchResult[] = useMemo(() => [
-    { type: 'navigation', title: t('bookmarks.title'), path: `${appBasePath}/bookmarks`, id: 'nav-bookmarks' },
-    { type: 'navigation', title: t('folders.title'), path: `${appBasePath}/folders`, id: 'nav-folders' },
-    { type: 'navigation', title: t('tags.title'), path: `${appBasePath}/tags`, id: 'nav-tags' },
-    { type: 'navigation', title: t('shared.title'), path: `${appBasePath}/shared`, id: 'nav-shared' },
-    ...(showAdmin ? [{ type: 'navigation' as const, title: t('admin.title'), path: `${appBasePath}/admin/members`, id: 'nav-admin' }] : []),
-  ], [showAdmin, t, appBasePath]);
+    { type: 'navigation', title: t('bookmarks.title'), path: `${prefix}/bookmarks`.replace(/\/+/g, '/') || '/bookmarks', id: 'nav-bookmarks' },
+    { type: 'navigation', title: t('folders.title'), path: `${prefix}/folders`.replace(/\/+/g, '/') || '/folders', id: 'nav-folders' },
+    { type: 'navigation', title: t('tags.title'), path: `${prefix}/tags`.replace(/\/+/g, '/') || '/tags', id: 'nav-tags' },
+    { type: 'navigation', title: t('shared.title'), path: `${prefix}/shared`.replace(/\/+/g, '/') || '/shared', id: 'nav-shared' },
+    ...(showAdmin ? [{ type: 'navigation' as const, title: t('admin.title'), path: `${prefix}/admin/members`.replace(/\/+/g, '/') || '/admin/members', id: 'nav-admin' }] : []),
+  ], [showAdmin, t, prefix]);
 
   const actionItems: SearchResult[] = useMemo(() => [
-    { type: 'action', title: t('bookmarks.create'), path: `${appBasePath}/bookmarks`, id: 'action-create-bookmark', action: () => navigate(`${appBasePath}/bookmarks?create=true`) },
-    { type: 'action', title: t('folders.create'), path: `${appBasePath}/folders`, id: 'action-create-folder', action: () => navigate(`${appBasePath}/folders?create=true`) },
-    { type: 'action', title: t('bookmarks.import'), path: `${appBasePath}/bookmarks`, id: 'action-import', action: () => navigate(`${appBasePath}/bookmarks?import=true`) },
-    { type: 'action', title: t('bookmarks.export'), path: `${appBasePath}/bookmarks`, id: 'action-export', action: () => navigate(`${appBasePath}/bookmarks?export=true`) },
-  ], [t, navigate, appBasePath]);
+    { type: 'action', title: t('bookmarks.create'), path: `${prefix}/bookmarks`, id: 'action-create-bookmark', action: () => navigate(`${prefix}/bookmarks?create=true`.replace(/\/+/g, '/') || '/bookmarks?create=true') },
+    { type: 'action', title: t('folders.create'), path: `${prefix}/folders`, id: 'action-create-folder', action: () => navigate(`${prefix}/folders?create=true`.replace(/\/+/g, '/') || '/folders?create=true') },
+    { type: 'action', title: t('bookmarks.import'), path: `${prefix}/bookmarks`, id: 'action-import', action: () => navigate(`${prefix}/bookmarks?import=true`.replace(/\/+/g, '/') || '/bookmarks?import=true') },
+    { type: 'action', title: t('bookmarks.export'), path: `${prefix}/bookmarks`, id: 'action-export', action: () => navigate(`${prefix}/bookmarks?export=true`.replace(/\/+/g, '/') || '/bookmarks?export=true') },
+  ], [t, navigate, prefix]);
 
   useEffect(() => {
     function handleKeyDown(e: KeyboardEvent) {
@@ -173,9 +174,9 @@ export default function GlobalSearch() {
       api.post(`/bookmarks/${result.id}/track-access`).catch(() => {});
       window.open(result.url, '_blank', 'noopener,noreferrer');
     } else if (result.type === 'folder') {
-      navigate(`${appBasePath}/bookmarks?folder_id=${result.id}`);
+      navigate(`${prefix}/bookmarks?folder_id=${result.id}`.replace(/\/+/g, '/') || `/bookmarks?folder_id=${result.id}`);
     } else if (result.type === 'tag') {
-      navigate(`${appBasePath}/bookmarks?tag_id=${result.id}`);
+      navigate(`${prefix}/bookmarks?tag_id=${result.id}`.replace(/\/+/g, '/') || `/bookmarks?tag_id=${result.id}`);
     }
   }
 

package/frontend/src/components/TopBar.tsx

@@ -14,7 +14,8 @@ interface TopBarProps {
 
 export default function TopBar({ user }: TopBarProps) {
   const { t } = useTranslation();
-  const { appBasePath } = useAppConfig();
+  const { pathPrefixForLinks } = useAppConfig();
+  const prefix = pathPrefixForLinks || '';
   const { isMobile } = useSidebar();
 
   return (
@@ -25,7 +26,7 @@ export default function TopBar({ user }: TopBarProps) {
           <SidebarTrigger className="-ml-2" aria-label={t('common.expandSidebar')} />
         )}
         <Link
-          to={appBasePath || '/'}
+          to={prefix || '/'}
           className="flex items-center gap-2 text-xl font-bold text-foreground hover:text-primary transition-colors focus:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 rounded-lg"
         >
           <img
@@ -51,7 +52,7 @@ export default function TopBar({ user }: TopBarProps) {
 
       {/* Right: Create bookmark + Profile — right-aligned */}
       <div className="flex items-center gap-2 sm:gap-4 shrink-0 ml-auto">
-        <Link to={`${appBasePath}/bookmarks?create=true`}>
+        <Link to={`${prefix}/bookmarks?create=true`.replace(/\/+/g, '/') || '/bookmarks?create=true'}>
           <Button variant="primary" size="sm" icon={Plus}>
             <span className="hidden sm:inline">{t('bookmarks.create')}</span>
           </Button>

package/frontend/src/components/UserDropdown.tsx

@@ -27,7 +27,8 @@ function getInitials(name: string): string {
 
 export default function UserDropdown({ user }: UserDropdownProps) {
   const { t } = useTranslation();
-  const { appBasePath } = useAppConfig();
+  const { pathPrefixForLinks } = useAppConfig();
+  const prefix = (pathPrefixForLinks || '').replace(/\/+/g, '/') || '';
   const { logout } = useAuth();
 
   const showAdmin = user?.is_admin;
@@ -59,14 +60,14 @@ export default function UserDropdown({ user }: UserDropdownProps) {
         </DropdownMenuLabel>
         <DropdownMenuSeparator />
         <DropdownMenuItem asChild>
-          <Link to={`${appBasePath}/profile`} className="flex items-center gap-2 cursor-pointer">
+          <Link to={`${prefix}/profile`} className="flex items-center gap-2 cursor-pointer">
             <UserIcon className="h-4 w-4" />
             {t('profile.title')}
           </Link>
         </DropdownMenuItem>
         {showAdmin && (
           <DropdownMenuItem asChild>
-            <Link to={`${appBasePath}/admin/members`} className="flex items-center gap-2 cursor-pointer">
+            <Link to={`${prefix}/admin/members`} className="flex items-center gap-2 cursor-pointer">
               <Settings className="h-4 w-4" />
               {t('admin.title')}
             </Link>

package/frontend/src/pages/Bookmarks.tsx

@@ -47,7 +47,8 @@ type SortOption = 'recently_added' | 'alphabetical' | 'most_used' | 'recently_ac
 
 export default function Bookmarks() {
   const { t } = useTranslation();
-  const { appBasePath } = useAppConfig();
+  const { pathPrefixForLinks } = useAppConfig();
+  const prefix = (pathPrefixForLinks || '').replace(/\/+/g, '/') || '';
   const { user } = useAuth();
   const { isMobile, state: sidebarState } = useSidebar();
   const [searchParams, setSearchParams] = useSearchParams();
@@ -823,7 +824,7 @@ export default function Bookmarks() {
                 >
                   {t('bookmarks.emptyImport')}
                 </Button>
-                <Link to={`${appBasePath}/search-engine-guide`}>
+                <Link to={`${prefix}/search-engine-guide`}>
                   <Button variant="ghost" icon={ExternalLink}>
                     {t('bookmarks.emptyLearnForwarding')}
                   </Button>
@@ -921,7 +922,7 @@ export default function Bookmarks() {
               <p className="text-sm text-gray-700 dark:text-gray-300">
                 {t('bookmarks.searchEngineNote')}{' '}
                 <Link
-                  to={`${appBasePath}/search-engine-guide`}
+                  to={`${prefix}/search-engine-guide`}
                   className="text-primary hover:text-primary/90 font-medium underline"
                 >
                   {t('bookmarks.searchEngineGuideLink')}

package/frontend/src/pages/Dashboard.tsx

@@ -61,18 +61,18 @@ const ONBOARDING_DISMISSED_KEY = 'slugbase_dashboard_onboarding_dismissed';
 
 function ProTipBanner({
   onDismiss,
-  appBasePath,
+  pathPrefix,
   t,
 }: {
   onDismiss: () => void;
-  appBasePath: string;
+  pathPrefix: string;
   t: (key: string) => string;
 }) {
   return (
     <div className="flex items-start gap-3 rounded-xl border border-border bg-card shadow-sm px-4 py-3">
       <p className="text-sm text-muted-foreground flex-1 min-w-0">
         {t('dashboard.proTipBody')}{' '}
-        <Link to={`${appBasePath}/search-engine-guide`} className="text-primary font-medium hover:underline">
+        <Link to={`${pathPrefix}/search-engine-guide`.replace(/\/+/g, '/') || '/search-engine-guide'} className="text-primary font-medium hover:underline">
           {t('dashboard.proTipLink')}
         </Link>
       </p>
@@ -92,13 +92,13 @@ function OnboardingChecklist({
   totalBookmarks,
   totalFolders,
   topTagsCount,
-  appBasePath,
+  pathPrefix,
   t,
 }: {
   totalBookmarks: number;
   totalFolders: number;
   topTagsCount: number;
-  appBasePath: string;
+  pathPrefix: string;
   t: (key: string) => string;
 }) {
   const [collapsed, setCollapsed] = useState(true);
@@ -109,10 +109,10 @@ function OnboardingChecklist({
   if (!show) return null;
 
   const steps = [
-    { done: totalBookmarks > 0, label: t('dashboard.onboardingImport'), to: `${appBasePath}/bookmarks?import=true` },
-    { done: false, label: t('dashboard.onboardingSearchEngine'), to: `${appBasePath}/search-engine-guide` },
-    { done: totalFolders > 0, label: t('dashboard.onboardingFolder'), to: `${appBasePath}/folders` },
-    { done: topTagsCount > 0, label: t('dashboard.onboardingTag'), to: `${appBasePath}/bookmarks` },
+    { done: totalBookmarks > 0, label: t('dashboard.onboardingImport'), to: `${pathPrefix}/bookmarks?import=true`.replace(/\/+/g, '/') || '/bookmarks?import=true' },
+    { done: false, label: t('dashboard.onboardingSearchEngine'), to: `${pathPrefix}/search-engine-guide`.replace(/\/+/g, '/') || '/search-engine-guide' },
+    { done: totalFolders > 0, label: t('dashboard.onboardingFolder'), to: `${pathPrefix}/folders`.replace(/\/+/g, '/') || '/folders' },
+    { done: topTagsCount > 0, label: t('dashboard.onboardingTag'), to: `${pathPrefix}/bookmarks`.replace(/\/+/g, '/') || '/bookmarks' },
   ];
 
   function handleDismiss() {
@@ -161,7 +161,8 @@ function OnboardingChecklist({
 
 export default function Dashboard() {
   const { t } = useTranslation();
-  const { appBasePath } = useAppConfig();
+  const { pathPrefixForLinks } = useAppConfig();
+  const prefix = (pathPrefixForLinks || '').replace(/\/+/g, '/') || '';
   const [stats, setStats] = useState<DashboardStats | null>(null);
   const [proTipDismissed, setProTipDismissed] = useState(() => typeof window !== 'undefined' && !!localStorage.getItem(PRO_TIP_DISMISSED_KEY));
 
@@ -190,7 +191,7 @@ export default function Dashboard() {
             localStorage.setItem(PRO_TIP_DISMISSED_KEY, '1');
             setProTipDismissed(true);
           }}
-          appBasePath={appBasePath}
+          pathPrefix={prefix}
           t={t}
         />
       )}
@@ -202,7 +203,7 @@ export default function Dashboard() {
             label={t('dashboard.statsBookmarks')}
             value={stats.totalBookmarks}
             icon={Bookmark}
-            href={appBasePath + '/bookmarks'}
+            href={prefix + '/bookmarks'}
             dense
             iconContainerClassName="bg-primary/20"
             iconColorClassName="text-primary"
@@ -211,7 +212,7 @@ export default function Dashboard() {
             label={t('dashboard.statsFolders')}
             value={stats.totalFolders}
             icon={Folder}
-            href={appBasePath + '/folders'}
+            href={prefix + '/folders'}
             dense
             iconContainerClassName="bg-primary/20"
             iconColorClassName="text-primary"
@@ -220,7 +221,7 @@ export default function Dashboard() {
             label={t('dashboard.statsTags')}
             value={stats.totalTags}
             icon={Tag}
-            href={appBasePath + '/tags'}
+            href={prefix + '/tags'}
             dense
             iconContainerClassName="bg-primary/20"
             iconColorClassName="text-primary"
@@ -235,7 +236,7 @@ export default function Dashboard() {
             {t('dashboard.pinned')}
           </h2>
           <Link
-            to={appBasePath + '/bookmarks?pinned=true'}
+            to={prefix + '/bookmarks?pinned=true'}
             className="text-sm font-medium text-primary hover:underline"
           >
             {t('dashboard.viewAll')}
@@ -284,7 +285,7 @@ export default function Dashboard() {
                 title={t('dashboard.noPinnedBookmarks')}
                 description={t('dashboard.pinFromBookmarks')}
                 action={
-                  <Link to={appBasePath + '/bookmarks'}>
+                  <Link to={prefix + '/bookmarks'}>
                     <Button variant="secondary">{t('dashboard.pinFromBookmarksLink')}</Button>
                   </Link>
                 }
@@ -301,7 +302,7 @@ export default function Dashboard() {
             {t('dashboard.quickAccess')}
           </h2>
           <Link
-            to={appBasePath + '/bookmarks'}
+            to={prefix + '/bookmarks'}
             className="text-sm font-medium text-primary hover:underline"
           >
             {t('dashboard.viewAll')}
@@ -350,7 +351,7 @@ export default function Dashboard() {
                 title={t('dashboard.noQuickAccessBookmarks')}
                 description={t('dashboard.noQuickAccessBookmarksHint')}
                 action={
-                  <Link to={`${appBasePath}/bookmarks?create=true`}>
+                  <Link to={`${prefix}/bookmarks?create=true`}>
                     <Button variant="primary" icon={Plus}>{t('bookmarks.create')}</Button>
                   </Link>
                 }
@@ -371,7 +372,7 @@ export default function Dashboard() {
               label={t('dashboard.sharedBookmarks')}
               value={stats.sharedBookmarks}
               icon={Share2}
-              href={appBasePath + '/shared'}
+              href={prefix + '/shared'}
               iconContainerClassName="bg-primary/20"
               iconColorClassName="text-primary"
             />
@@ -379,7 +380,7 @@ export default function Dashboard() {
               label={t('dashboard.sharedFolders')}
               value={stats.sharedFolders}
               icon={Share2}
-              href={appBasePath + '/shared'}
+              href={prefix + '/shared'}
               iconContainerClassName="bg-primary/20"
               iconColorClassName="text-primary"
             />
@@ -398,7 +399,7 @@ export default function Dashboard() {
             {stats.topTags.map((tag) => (
               <Link
                 key={tag.id}
-                to={`${appBasePath}/bookmarks?tag_id=${tag.id}`}
+                to={`${prefix}/bookmarks?tag_id=${tag.id}`}
                 className="inline-flex items-center gap-1.5 rounded-md border border-border bg-card px-2.5 py-1.5 text-xs font-medium text-foreground hover:bg-accent hover:border-primary/50 transition-colors focus:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2"
                 title={t('dashboard.filterByTagHint')}
               >
@@ -418,7 +419,7 @@ export default function Dashboard() {
           totalBookmarks={stats.totalBookmarks}
           totalFolders={stats.totalFolders}
           topTagsCount={stats.topTags.length}
-          appBasePath={appBasePath}
+          pathPrefix={prefix}
           t={t}
         />
       )}

package/frontend/src/pages/Folders.tsx

@@ -35,7 +35,8 @@ const DEFAULT_SORT: SortOption = 'alphabetical';
 
 export default function Folders() {
   const { t } = useTranslation();
-  const { appBasePath } = useAppConfig();
+  const { pathPrefixForLinks } = useAppConfig();
+  const prefix = (pathPrefixForLinks || '').replace(/\/+/g, '/') || '';
   const { showConfirm, dialogState } = useConfirmDialog();
   const [searchParams, setSearchParams] = useSearchParams();
   const [folders, setFolders] = useState<Folder[]>([]);
@@ -331,7 +332,7 @@ export default function Folders() {
               className={`group bg-card rounded-lg border border-border hover:border-primary/70 hover:bg-muted/50 hover:shadow-md transition-all duration-200 flex flex-col h-full min-h-0 ${compactMode ? 'p-2.5 min-h-[160px]' : 'p-2.5 min-h-[140px]'}`}
             >
               <Link
-                to={`${appBasePath}/bookmarks?folder_id=${folder.id}`}
+                to={`${prefix}/bookmarks?folder_id=${folder.id}`}
                 className="flex-1 flex flex-col min-w-0 focus:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 rounded"
               >
                 <div className="space-y-3 flex-1 flex flex-col">
@@ -437,7 +438,7 @@ export default function Folders() {
                 >
                   <td className={`${compactMode ? 'px-2 py-1.5' : 'px-4 py-3'}`}>
                     <Link
-                      to={`${appBasePath}/bookmarks?folder_id=${folder.id}`}
+                      to={`${prefix}/bookmarks?folder_id=${folder.id}`}
                       className={`flex items-center ${compactMode ? 'gap-2' : 'gap-3'} hover:opacity-90 focus:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 rounded`}
                     >
                       <div className={`flex-shrink-0 ${compactMode ? 'w-6 h-6' : 'w-8 h-8'} rounded-lg bg-primary/20 flex items-center justify-center border border-primary/30`}>

package/frontend/src/pages/GoPreferences.tsx

@@ -21,7 +21,8 @@ interface SlugPreference {
 
 export default function GoPreferences() {
   const { t } = useTranslation();
-  const { appBasePath } = useAppConfig();
+  const { pathPrefixForLinks } = useAppConfig();
+  const prefix = (pathPrefixForLinks || '').replace(/\/+/g, '/') || '';
   const { showToast } = useToast();
   const [preferences, setPreferences] = useState<SlugPreference[]>([]);
   const [loading, setLoading] = useState(true);
@@ -64,7 +65,7 @@ export default function GoPreferences() {
   return (
     <div className="space-y-6 max-w-3xl">
       <div className="flex items-center gap-4">
-        <Link to={`${appBasePath}/profile`}>
+        <Link to={`${prefix}/profile`}>
           <Button variant="ghost" size="sm" icon={ArrowLeft}>
             {t('common.back')}
           </Button>

package/frontend/src/pages/PasswordReset.tsx

@@ -8,7 +8,8 @@ import Button from '../components/ui/Button';
 
 export default function PasswordReset() {
   const { t } = useTranslation();
-  const { appBasePath } = useAppConfig();
+  const { pathPrefixForLinks } = useAppConfig();
+  const prefix = (pathPrefixForLinks || '').replace(/\/+/g, '/') || '';
   const [searchParams] = useSearchParams();
   const navigate = useNavigate();
   const token = searchParams.get('token');
@@ -143,7 +144,7 @@ export default function PasswordReset() {
 
             <div className="text-center">
               <Link
-                to={`${appBasePath}/login`}
+                to={`${prefix}/login`}
                 className="inline-flex items-center gap-2 text-sm font-medium text-blue-600 dark:text-blue-400 hover:text-blue-700 dark:hover:text-blue-300"
               >
                 <ArrowLeft className="h-4 w-4" />
@@ -163,7 +164,7 @@ export default function PasswordReset() {
                   {t('passwordReset.invalidToken')}
                 </p>
                 <Link
-                  to={`${appBasePath}/password-reset`}
+                  to={`${prefix}/password-reset`}
                   className="inline-flex items-center gap-2 text-sm font-medium text-blue-600 dark:text-blue-400 hover:text-blue-700 dark:hover:text-blue-300"
                 >
                   <ArrowLeft className="h-4 w-4" />
@@ -225,7 +226,7 @@ export default function PasswordReset() {
 
                 <div className="text-center">
                   <Link
-                    to={`${appBasePath}/login`}
+                    to={`${prefix}/login`}
                     className="inline-flex items-center gap-2 text-sm font-medium text-blue-600 dark:text-blue-400 hover:text-blue-700 dark:hover:text-blue-300"
                   >
                     <ArrowLeft className="h-4 w-4" />

package/frontend/src/pages/Profile.tsx

@@ -58,7 +58,8 @@ function SettingsRow({
 
 export default function Profile() {
   const { t } = useTranslation();
-  const { appBasePath, apiBaseUrl } = useAppConfig();
+  const { pathPrefixForLinks, apiBaseUrl } = useAppConfig();
+  const prefix = (pathPrefixForLinks || '').replace(/\/+/g, '/') || '';
   const { user, updateUser, checkAuth } = useAuth();
   const { showToast } = useToast();
   const [formData, setFormData] = useState({
@@ -406,7 +407,7 @@ export default function Profile() {
                   <>
                     {t('profile.quickAccessDescription')}{' '}
                     <Link
-                      to={`${appBasePath}/go-preferences`}
+                      to={`${prefix}/go-preferences`}
                       className="text-primary hover:text-primary/90 font-medium"
                     >
                       {t('profile.manageQuickAccess')} →

package/frontend/src/pages/SearchEngineGuide.tsx

@@ -6,7 +6,8 @@ import { useAppConfig } from '../contexts/AppConfigContext';
 
 export default function SearchEngineGuide() {
   const { t } = useTranslation();
-  const { appBasePath } = useAppConfig();
+  const { pathPrefixForLinks } = useAppConfig();
+  const prefix = (pathPrefixForLinks || '').replace(/\/+/g, '/') || '';
 
   const baseUrl = window.location.origin;
   const goPath = '/go/%s';
@@ -16,7 +17,7 @@ export default function SearchEngineGuide() {
     <div className="space-y-6 max-w-4xl mx-auto">
       {/* Header */}
       <div className="flex items-center gap-4">
-        <Link to={`${appBasePath}/bookmarks`}>
+        <Link to={`${prefix}/bookmarks`}>
           <Button variant="ghost" size="sm" icon={ArrowLeft}>
             {t('common.back')}
           </Button>

package/frontend/src/pages/Tags.tsx

@@ -27,7 +27,8 @@ const DEFAULT_SORT: SortOption = 'alphabetical';
 
 export default function Tags() {
   const { t } = useTranslation();
-  const { appBasePath } = useAppConfig();
+  const { pathPrefixForLinks } = useAppConfig();
+  const prefix = (pathPrefixForLinks || '').replace(/\/+/g, '/') || '';
   const { showConfirm, dialogState } = useConfirmDialog();
   const [searchParams, setSearchParams] = useSearchParams();
   const [tags, setTags] = useState<Tag[]>([]);
@@ -272,7 +273,7 @@ export default function Tags() {
               className={`group bg-card rounded-lg border border-border hover:border-primary/70 hover:bg-muted/50 hover:shadow-md transition-all duration-200 flex flex-col h-full min-h-0 ${compactMode ? 'p-2.5 min-h-[160px]' : 'p-2.5 min-h-[140px]'}`}
             >
               <Link
-                to={`${appBasePath}/bookmarks?tag_id=${tag.id}`}
+                to={`${prefix}/bookmarks?tag_id=${tag.id}`}
                 className="flex-1 flex flex-col min-w-0 focus:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 rounded"
               >
                 <div className="space-y-3 flex-1 flex flex-col">
@@ -335,7 +336,7 @@ export default function Tags() {
                 >
                   <td className={`${compactMode ? 'px-2 py-1.5' : 'px-4 py-3'}`}>
                     <Link
-                      to={`${appBasePath}/bookmarks?tag_id=${tag.id}`}
+                      to={`${prefix}/bookmarks?tag_id=${tag.id}`}
                       className={`flex items-center ${compactMode ? 'gap-2' : 'gap-3'} hover:opacity-90 focus:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 rounded`}
                     >
                       <div className={`flex-shrink-0 ${compactMode ? 'w-6 h-6' : 'w-8 h-8'} rounded-lg bg-gradient-to-br from-purple-50 to-purple-100 dark:from-purple-900/30 dark:to-purple-800/20 flex items-center justify-center border border-purple-100 dark:border-purple-800/50`}>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mdguggenbichler/slugbase-core",
-  "version": "0.0.13",
+  "version": "0.0.15",
   "description": "SlugBase core: backend and frontend entrypoints for self-hosted and cloud apps",
   "type": "module",
   "exports": {