@mdguggenbichler/slugbase-core 0.0.31 → 0.0.33

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/VerifyEmailRequired.tsx

@@ -0,0 +1,163 @@
+import React, { useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import { useLocation, Link } from 'react-router-dom';
+import { useAppConfig } from '../contexts/AppConfigContext';
+import api from '../api/client';
+import { Mail } from 'lucide-react';
+import Button from '../components/ui/Button';
+
+export default function VerifyEmailRequired() {
+  const { t } = useTranslation();
+  const location = useLocation();
+  const { pathPrefixForLinks } = useAppConfig();
+  const stateEmail = (location.state as { email?: string } | null)?.email?.trim() || '';
+  const [email, setEmail] = useState(stateEmail);
+  const [newEmail, setNewEmail] = useState('');
+  const [loading, setLoading] = useState(false);
+  const [error, setError] = useState('');
+  const [success, setSuccess] = useState(false);
+  const [emailChanged, setEmailChanged] = useState(false);
+
+  const prefix = pathPrefixForLinks || '';
+  const loginPath = `${prefix}/login`.replace(/\/+/g, '/') || '/login';
+  const currentEmail = stateEmail || email.trim();
+
+  const handleResend = async (e: React.FormEvent) => {
+    e.preventDefault();
+    const toSend = currentEmail || email.trim();
+    if (!toSend) {
+      setError(t('auth.verifyEmailRequiredPageEmailLabel') + ' is required');
+      return;
+    }
+    setLoading(true);
+    setError('');
+    setSuccess(false);
+    setEmailChanged(false);
+    try {
+      const payload: { email: string; newEmail?: string } = { email: toSend };
+      const newEmailTrimmed = newEmail.trim();
+      if (newEmailTrimmed && newEmailTrimmed !== toSend) {
+        payload.newEmail = newEmailTrimmed;
+      }
+      const res = await api.post('/auth/request-signup-resend', payload);
+      setSuccess(true);
+      setEmailChanged(Boolean((res.data as { emailChanged?: boolean })?.emailChanged));
+    } catch (err: unknown) {
+      const msg = (err as { response?: { data?: { error?: string } } })?.response?.data?.error;
+      setError(msg || t('common.error'));
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  return (
+    <div className="min-h-screen flex items-center justify-center bg-gray-50 dark:bg-gray-900 py-12 px-4 sm:px-6 lg:px-8">
+      <div className="max-w-md w-full space-y-8">
+        <div className="text-center">
+          <div className="flex justify-center mb-6">
+            <img
+              src={`/slugbase_icon_blue.svg${(import.meta as any).env?.VITE_ASSET_VERSION ? `?v=${(import.meta as any).env.VITE_ASSET_VERSION}` : ''}`}
+              alt="SlugBase"
+              className="h-16 w-16 dark:hidden"
+            />
+            <img
+              src={`/slugbase_icon_white.svg${(import.meta as any).env?.VITE_ASSET_VERSION ? `?v=${(import.meta as any).env.VITE_ASSET_VERSION}` : ''}`}
+              alt="SlugBase"
+              className="h-16 w-16 hidden dark:block"
+            />
+          </div>
+          <h2 className="text-2xl font-semibold text-gray-900 dark:text-white">
+            {t('auth.verifyEmailRequiredPageTitle')}
+          </h2>
+          <p className="mt-2 text-sm text-gray-600 dark:text-gray-400">
+            {t('auth.verifyEmailRequiredPageDescription')}
+          </p>
+        </div>
+
+        <div className="bg-white dark:bg-gray-800 rounded-lg border border-gray-200 dark:border-gray-700 shadow-lg p-4 space-y-6">
+          {success ? (
+            <div className="space-y-4 text-center">
+              <div className="mx-auto w-16 h-16 bg-green-100 dark:bg-green-900/30 rounded-full flex items-center justify-center">
+                <Mail className="h-8 w-8 text-green-600 dark:text-green-400" />
+              </div>
+              <p className="text-sm text-gray-600 dark:text-gray-400">
+                {emailChanged ? t('auth.emailChangedResendMessage') : t('auth.resendVerificationSuccess')}
+              </p>
+              <Link
+                to={loginPath}
+                className="inline-block text-sm font-medium text-primary hover:underline"
+              >
+                {t('signup.backToLogin')}
+              </Link>
+            </div>
+          ) : (
+            <form onSubmit={handleResend} className="space-y-5">
+              {stateEmail ? (
+                <>
+                  <p className="text-sm text-gray-600 dark:text-gray-400">
+                    {t('auth.verifyEmailRequiredPageEmailLabel')}: <span className="font-medium text-gray-900 dark:text-white">{stateEmail}</span>
+                  </p>
+                  <div>
+                    <label htmlFor="verify-email-required-new-email" className="block text-sm font-semibold text-gray-900 dark:text-white mb-2">
+                      {t('auth.newEmailLabel')}
+                    </label>
+                    <input
+                      id="verify-email-required-new-email"
+                      name="newEmail"
+                      type="email"
+                      className="w-full px-4 h-9 text-sm text-gray-900 dark:text-white bg-white dark:bg-gray-700 border border-gray-300 dark:border-gray-600 rounded-lg focus:outline-none focus:ring-2 focus:ring-ring focus:border-ring transition-colors"
+                      placeholder={t('auth.newEmailPlaceholder')}
+                      value={newEmail}
+                      onChange={(e) => setNewEmail(e.target.value)}
+                    />
+                    <p className="mt-1 text-xs text-gray-500 dark:text-gray-400">
+                      {t('auth.newEmailHint')}
+                    </p>
+                  </div>
+                </>
+              ) : (
+                <div>
+                  <label htmlFor="verify-email-required-email" className="block text-sm font-semibold text-gray-900 dark:text-white mb-2">
+                    {t('auth.verifyEmailRequiredPageEmailLabel')}
+                  </label>
+                  <input
+                    id="verify-email-required-email"
+                    name="email"
+                    type="email"
+                    required
+                    className="w-full px-4 h-9 text-sm text-gray-900 dark:text-white bg-white dark:bg-gray-700 border border-gray-300 dark:border-gray-600 rounded-lg focus:outline-none focus:ring-2 focus:ring-ring focus:border-ring transition-colors"
+                    placeholder={t('auth.emailPlaceholder')}
+                    value={email}
+                    onChange={(e) => setEmail(e.target.value)}
+                  />
+                </div>
+              )}
+              {error && (
+                <div className="px-4 py-3 bg-red-50 dark:bg-red-900/20 border border-red-200 dark:border-red-800 rounded-lg">
+                  <p className="text-sm text-red-800 dark:text-red-200">{error}</p>
+                </div>
+              )}
+              <Button
+                type="submit"
+                variant="primary"
+                disabled={loading}
+                icon={Mail}
+                className="w-full"
+              >
+                {loading ? t('common.loading') : t('auth.resendVerificationEmail')}
+              </Button>
+              <div className="text-center">
+                <Link
+                  to={loginPath}
+                  className="text-sm font-medium text-primary hover:text-primary/90"
+                >
+                  {t('signup.backToLogin')}
+                </Link>
+              </div>
+            </form>
+          )}
+        </div>
+      </div>
+    </div>
+  );
+}

package/package.json

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