@mdguggenbichler/slugbase-core 0.0.30 → 0.0.32

package/frontend/src/pages/Tags.tsx

@@ -4,15 +4,14 @@ import { useTranslation } from 'react-i18next';
 import api from '../api/client';
 import ConfirmDialog from '../components/ui/ConfirmDialog';
 import { useConfirmDialog } from '../hooks/useConfirmDialog';
-import { Plus, Edit, Trash2, Tag as TagIcon, LayoutGrid, List, ChevronLeft, ChevronRight } from 'lucide-react';
+import { Plus, Edit, Trash2, Tag as TagIcon, ChevronLeft, ChevronRight } from 'lucide-react';
 import TagModal from '../components/modals/TagModal';
 import Button from '../components/ui/Button';
-import Select from '../components/ui/Select';
-import { PageHeader } from '../components/PageHeader';
+import { CollectionToolbar } from '../components/collections';
 import { EmptyState } from '../components/EmptyState';
 import { PageLoadingSkeleton } from '../components/ui/PageLoadingSkeleton';
 import { useAppConfig } from '../contexts/AppConfigContext';
-import { FilterChips } from '../components/FilterChips';
+import { Card } from '../components/ui/card';
 
 interface Tag {
   id: string;
@@ -39,9 +38,6 @@ export default function Tags() {
     const saved = localStorage.getItem('tags-view-mode');
     return (saved === 'list' || saved === 'card') ? saved : 'card';
   });
-  const [compactMode, setCompactMode] = useState(() => {
-    return localStorage.getItem('tags-compact-mode') === 'true';
-  });
 
   const sortParam = searchParams.get('sort');
   const sortBy = (sortParam === 'recently_added' || sortParam === 'alphabetical') ? sortParam : DEFAULT_SORT;
@@ -57,10 +53,6 @@ export default function Tags() {
     localStorage.setItem('tags-view-mode', viewMode);
   }, [viewMode]);
 
-  useEffect(() => {
-    localStorage.setItem('tags-compact-mode', compactMode.toString());
-  }, [compactMode]);
-
   useEffect(() => {
     loadTags();
   }, [sortBy, page, pageSize]);
@@ -171,83 +163,43 @@ export default function Tags() {
 
   return (
     <div className="space-y-6 pb-24">
-      {/* Sticky controls bar: header + toolbar - stays visible when scrolling */}
-      <div className="sticky top-0 z-40 space-y-4 pb-4 -mx-4 sm:-mx-6 lg:-mx-8 px-4 sm:px-6 lg:px-8 pt-0 -mt-8 bg-background shadow-sm">
-        <PageHeader
-          className="pt-4"
-          title={`${t('tags.title')} (${totalTags})`}
-          subtitle={
-            hasActiveFilters || totalTags > pageSize
-              ? t('bookmarks.showingXOfY', { x: sortedTags.length, y: totalTags })
-              : undefined
-          }
-          actions={
-            <Button onClick={handleCreate} icon={Plus}>
-              {t('tags.create')}
-            </Button>
-          }
-        />
-
-        <FilterChips
-          chips={filterChips}
-          onRemove={handleRemoveFilter}
-          onClearAll={handleResetFilters}
-          clearAllLabel={t('bookmarks.clearAllFilters')}
-          clearAllAriaLabel={t('bookmarks.clearAllFilters')}
-        />
-
-        {/* Toolbar: Sort, Page size, View Modes - same card style as Bookmarks/Folders */}
-        <div className="flex flex-wrap items-center gap-3 bg-card rounded-lg border border-border p-4 shadow-sm">
-          <div className="flex items-center gap-2">
-            <Select
-              value={sortBy}
-              onChange={(value) => updateParams({ sort: value as SortOption })}
-              options={sortOptions}
-              className="min-w-[160px]"
-            />
-          </div>
-          <div className="flex items-center gap-2">
-            <Select
-              value={String(pageSize)}
-              onChange={(value) => updateParams({ limit: value })}
-              options={PAGE_SIZE_OPTIONS.map((n) => ({ value: String(n), label: String(n) }))}
-              className="min-w-[80px]"
-            />
-            <span className="text-sm text-muted-foreground whitespace-nowrap">{t('bookmarks.perPage')}</span>
-          </div>
-          <div className="flex items-center gap-2 border-l border-border pl-3 ml-auto">
-            <div className="flex items-center gap-1 bg-muted/50 rounded-lg p-1 border border-border">
-              <button
-                onClick={() => setViewMode('card')}
-                className={`p-1.5 rounded transition-colors ${
-                  viewMode === 'card' ? 'bg-background text-primary shadow-sm' : 'text-muted-foreground hover:text-foreground'
-                }`}
-                title={t('tags.viewCard')}
-              >
-                <LayoutGrid className="h-4 w-4" />
-              </button>
-              <button
-                onClick={() => setViewMode('list')}
-                className={`p-1.5 rounded transition-colors ${
-                  viewMode === 'list' ? 'bg-background text-primary shadow-sm' : 'text-muted-foreground hover:text-foreground'
-                }`}
-                title={t('tags.viewList')}
-              >
-                <List className="h-4 w-4" />
-              </button>
-            </div>
-            <button
-              onClick={() => setCompactMode(!compactMode)}
-              className={`px-3 py-1.5 text-sm rounded-lg transition-colors ${
-                compactMode ? 'bg-primary/20 text-primary' : 'bg-muted text-muted-foreground hover:bg-accent'
-              }`}
-              title={t('tags.compactMode')}
-            >
-              {t('tags.compactMode')}
-            </button>
-          </div>
-        </div>
-      </div>
+      <CollectionToolbar
+        title={t('tags.title')}
+        count={totalTags}
+        subtitle={
+          hasActiveFilters || totalTags > pageSize
+            ? t('bookmarks.showingXOfY', { x: sortedTags.length, y: totalTags })
+            : undefined
+        }
+        createButton={{ label: t('tags.create'), onClick: handleCreate }}
+        filterChips={{
+          chips: filterChips,
+          onRemove: handleRemoveFilter,
+          onClearAll: handleResetFilters,
+          clearAllLabel: t('bookmarks.clearAllFilters'),
+          clearAllAriaLabel: t('bookmarks.clearAllFilters'),
+        }}
+        sort={{
+          value: sortBy,
+          onChange: (value) => updateParams({ sort: value as SortOption }),
+          options: sortOptions,
+          className: 'min-w-[160px]',
+        }}
+        perPage={{
+          value: pageSize,
+          onChange: (value) => {
+            updateParams({ limit: String(value) });
+          },
+          options: [...PAGE_SIZE_OPTIONS],
+          label: t('bookmarks.perPage'),
+        }}
+        viewMode={{
+          value: viewMode,
+          onChange: setViewMode,
+          cardLabel: t('tags.viewCard'),
+          listLabel: t('tags.viewList'),
+        }}
+      />
 
       {/* Tags Display */}
       {sortedTags.length === 0 ? (
@@ -262,55 +214,48 @@ export default function Tags() {
           }
         />
       ) : viewMode === 'card' ? (
-        <div className={`grid grid-cols-1 gap-3 items-stretch ${
-          compactMode 
-            ? 'sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5 xl:grid-cols-6 2xl:grid-cols-8' 
-            : 'sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 xl:grid-cols-5 2xl:grid-cols-6'
-        }`}>
+        <div className="grid gap-3 items-start [grid-template-columns:repeat(auto-fill,minmax(300px,1fr))]">
           {sortedTags.map((tag) => (
-            <div
+            <Card
               key={tag.id}
-              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]'}`}
+              className="group relative flex flex-col cursor-pointer rounded-lg border bg-card/95 dark:bg-card/90 transition-[border-color,box-shadow] duration-150 border-border/80 hover:border-primary/80 hover:shadow-[0_2px_6px_rgba(0,0,0,0.06)] dark:border-border/70 dark:hover:border-primary/80 dark:hover:shadow-[0_2px_6px_rgba(0,0,0,0.25)] px-3 pt-0 pb-1.5 focus-within:ring-2 focus-within:ring-ring focus-within:ring-offset-2"
             >
               <Link
                 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">
-                  <div className="flex items-start gap-3">
-                    <div className={`flex-shrink-0 ${compactMode ? 'w-9 h-9' : 'w-10 h-10'} rounded-xl 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`}>
-                      <TagIcon className={`${compactMode ? 'h-4 w-4' : 'h-5 w-5'} text-purple-600 dark:text-purple-400`} />
-                    </div>
-                    <div className="flex-1 min-w-0 pt-0.5">
-                      <h3 className={`${compactMode ? 'text-xs' : 'text-sm'} font-medium text-foreground truncate`}>
-                        {tag.name}
-                      </h3>
-                    </div>
-                  </div>
+                className="absolute inset-0 rounded-lg z-0 focus:outline-none"
+                aria-label={tag.name}
+              />
+              <header className="flex-shrink-0 flex items-center gap-1.5 min-w-0 pt-3 relative z-10">
+                <div className="flex-shrink-0 w-7 h-7 rounded-md bg-background/90 dark:bg-muted/20 flex items-center justify-center border border-border/50 overflow-hidden">
+                  <TagIcon className="h-4 w-4 text-purple-600 dark:text-purple-400" />
                 </div>
-              </Link>
-              <div className={`flex gap-1.5 pt-2.5 mt-auto shrink-0 border-t border-border ${compactMode ? 'pt-2' : ''}`}>
-                  <Button
-                    variant="ghost"
-                    size="sm"
-                    icon={Edit}
-                    iconClassName="h-3.5 w-3.5 stroke-[1.5]"
-                    onClick={() => handleEdit(tag)}
-                    className="flex-1 h-8 min-w-0 text-xs"
-                  >
-                    {t('common.edit')}
-                  </Button>
-                  <Button
-                    variant="ghost"
-                    size="sm"
-                    icon={Trash2}
-                    iconClassName="h-3.5 w-3.5 stroke-[1.5]"
-                    onClick={() => handleDelete(tag.id)}
-                    title={t('common.delete')}
-                    className="h-8 w-8 p-0 flex-shrink-0 text-red-600 hover:text-red-700 dark:text-red-400 dark:hover:text-red-300"
-                  />
+                <div className="flex-1 min-w-0 min-h-0 overflow-hidden">
+                  <h3 className="text-sm font-semibold text-foreground line-clamp-2 break-words leading-snug tracking-tight min-h-0">
+                    {tag.name}
+                  </h3>
                 </div>
-            </div>
+              </header>
+              <footer className="flex-shrink-0 flex items-center justify-end gap-0.5 h-6 min-h-[24px] pt-2.5 relative z-10 opacity-0 group-hover:opacity-100 focus-within:opacity-100 transition-opacity duration-150 w-[52px] ml-auto">
+                <Button
+                  variant="ghost"
+                  size="sm"
+                  icon={Edit}
+                  iconClassName="h-3.5 w-3.5 stroke-[1.5]"
+                  onClick={(e) => { e.preventDefault(); e.stopPropagation(); handleEdit(tag); }}
+                  className="h-6 w-6 p-0 min-w-6 text-muted-foreground hover:text-foreground"
+                  title={t('common.edit')}
+                />
+                <Button
+                  variant="ghost"
+                  size="sm"
+                  icon={Trash2}
+                  iconClassName="h-3.5 w-3.5 stroke-[1.5]"
+                  onClick={(e) => { e.preventDefault(); e.stopPropagation(); handleDelete(tag.id); }}
+                  className="h-6 w-6 p-0 min-w-6 text-red-600 hover:text-red-700 dark:text-red-400 dark:hover:text-red-300"
+                  title={t('common.delete')}
+                />
+              </footer>
+            </Card>
           ))}
         </div>
       ) : (
@@ -318,10 +263,10 @@ export default function Tags() {
           <table className="w-full">
             <thead className="bg-gray-50 dark:bg-gray-900/50 border-b border-gray-200 dark:border-gray-700">
               <tr>
-                <th className={`${compactMode ? 'px-2 py-1.5' : 'px-4 py-3'} text-left ${compactMode ? 'text-[10px]' : 'text-xs'} font-semibold text-gray-700 dark:text-gray-300 uppercase tracking-wide`}>
+                <th className="px-4 py-3 text-left text-xs font-semibold text-gray-700 dark:text-gray-300 uppercase tracking-wide">
                   {t('tags.name')}
                 </th>
-                <th className={`${compactMode ? 'px-2 py-1.5' : 'px-4 py-3'} text-right ${compactMode ? 'text-[10px]' : 'text-xs'} font-semibold text-gray-700 dark:text-gray-300 uppercase tracking-wide`}>
+                <th className="px-4 py-3 text-right text-xs font-semibold text-gray-700 dark:text-gray-300 uppercase tracking-wide">
                   {t('common.actions')}
                 </th>
               </tr>
@@ -330,32 +275,29 @@ export default function Tags() {
               {sortedTags.map((tag) => (
                 <tr
                   key={tag.id}
-                  className={`hover:bg-gray-50 dark:hover:bg-gray-700/50 transition-colors ${compactMode ? 'h-10' : ''}`}
+                  className="hover:bg-gray-50 dark:hover:bg-gray-700/50 transition-colors"
                 >
-                  <td className={`${compactMode ? 'px-2 py-1.5' : 'px-4 py-3'}`}>
+                  <td className="px-4 py-3">
                     <Link
                       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`}
+                      className="flex items-center 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`}>
-                        <TagIcon className={`${compactMode ? 'h-3 w-3' : 'h-4 w-4'} text-purple-600 dark:text-purple-400`} />
+                      <div className="flex-shrink-0 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">
+                        <TagIcon className="h-4 w-4 text-purple-600 dark:text-purple-400" />
                       </div>
-                      <div className={`font-medium text-gray-900 dark:text-white ${compactMode ? 'text-xs' : 'text-[15px]'}`}>
+                      <div className="font-medium text-gray-900 dark:text-white text-[15px]">
                         {tag.name}
                       </div>
                     </Link>
                   </td>
-                  {!compactMode && (
-                    <td className="px-4 py-3 text-xs text-muted-foreground">—</td>
-                  )}
-                  <td className={`${compactMode ? 'px-2 py-1.5' : 'px-4 py-3'}`}>
-                    <div className={`flex items-center justify-end ${compactMode ? 'gap-1' : 'gap-2'}`}>
+                  <td className="px-4 py-3">
+                    <div className="flex items-center justify-end gap-2">
                       <Button
                         variant="ghost"
                         size="sm"
                         icon={Edit}
                         onClick={() => handleEdit(tag)}
-                        className={compactMode ? 'px-1 h-6' : 'px-2'}
+                        className="px-2"
                       />
                       <Button
                         variant="ghost"
@@ -363,7 +305,7 @@ export default function Tags() {
                         icon={Trash2}
                         onClick={() => handleDelete(tag.id)}
                         title={t('common.delete')}
-                        className={`text-red-600 hover:text-red-700 dark:text-red-400 dark:hover:text-red-300 ${compactMode ? 'px-1 h-6' : 'px-2'}`}
+                        className="text-red-600 hover:text-red-700 dark:text-red-400 dark:hover:text-red-300 px-2"
                       />
                     </div>
                   </td>

package/frontend/src/pages/admin/AdminLayout.tsx

@@ -1,6 +1,7 @@
 import { useTranslation } from 'react-i18next';
 import { Outlet } from 'react-router-dom';
 import { ExternalLink } from 'lucide-react';
+import { getDocsApiReferenceUrl } from '../../config/docs';
 
 export default function AdminLayout() {
   const { t } = useTranslation();
@@ -25,7 +26,7 @@ export default function AdminLayout() {
             </p>
           </div>
           <a
-            href="/api-docs"
+            href={getDocsApiReferenceUrl()}
             target="_blank"
             rel="noopener noreferrer"
             className="inline-flex items-center gap-2 px-4 py-2 text-sm font-medium text-primary hover:text-primary/90 transition-colors"

package/package.json

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