@idevconn/create-icore 0.6.3 → 0.7.0

package/templates/apps/templates/client-shadcn/src/components/auth/MagicLinkForm.tsx

@@ -0,0 +1,110 @@
+import { SyntheticEvent, useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import { Loader2, MailCheck } from 'lucide-react';
+import { Button } from '../ui/button';
+import { Input } from '../ui/input';
+import { Label } from '../ui/label';
+
+interface MagicLinkFormProps {
+  onError: (msg: string) => void;
+  onSwitchToLogin: () => void;
+  api: <T>(path: string, init?: RequestInit) => Promise<T>;
+}
+
+export function MagicLinkForm({ onError, onSwitchToLogin, api }: MagicLinkFormProps) {
+  const { t } = useTranslation();
+  const [email, setEmail] = useState('');
+  const [submitting, setSubmitting] = useState(false);
+  const [sent, setSent] = useState(false);
+
+  async function handleSubmit(e: SyntheticEvent<HTMLFormElement>) {
+    e.preventDefault();
+    setSubmitting(true);
+    try {
+      await api('/auth/magic-link', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ email }),
+      });
+      setSent(true);
+    } catch (err) {
+      onError(err instanceof Error ? err.message : t('error.unknown'));
+    } finally {
+      setSubmitting(false);
+    }
+  }
+
+  if (sent) {
+    return (
+      <div className="flex flex-col items-center text-center space-y-4 py-4">
+        <div className="flex h-14 w-14 items-center justify-center rounded-full bg-[--color-primary]/15">
+          <MailCheck size={24} className="text-[--color-primary]" />
+        </div>
+        <div className="space-y-1">
+          <h3 className="text-lg font-semibold">{t('auth.magicLinkSent')}</h3>
+          <p className="text-sm text-[--color-muted-foreground] max-w-xs">
+            {t('auth.magicLinkSentDescription', { email })}
+          </p>
+        </div>
+        <Button
+          type="button"
+          variant="outline"
+          className="w-full cursor-pointer"
+          onClick={() => {
+            setEmail('');
+            setSent(false);
+          }}
+        >
+          {t('auth.magicLinkUseDifferentEmail')}
+        </Button>
+        <button
+          type="button"
+          onClick={onSwitchToLogin}
+          className="text-sm text-[--color-muted-foreground] hover:underline cursor-pointer"
+        >
+          {t('auth.backToLogin')}
+        </button>
+      </div>
+    );
+  }
+
+  return (
+    <div className="space-y-5">
+      <div className="space-y-1">
+        <h1 className="text-2xl font-bold">{t('auth.withMagicLink')}</h1>
+        <p className="text-sm text-[--color-muted-foreground]">
+          {t('auth.magicLinkSentDescription', { email: 'your email' }).replace(
+            'your email',
+            t('auth.email').toLowerCase(),
+          )}
+        </p>
+      </div>
+
+      <form onSubmit={handleSubmit} className="space-y-4">
+        <div className="space-y-2">
+          <Label htmlFor="ml-email">{t('auth.email')}</Label>
+          <Input
+            id="ml-email"
+            type="email"
+            value={email}
+            onChange={(e) => setEmail(e.target.value)}
+            placeholder="you@example.com"
+            required
+            autoComplete="email"
+          />
+        </div>
+        <Button type="submit" className="w-full cursor-pointer" disabled={submitting}>
+          {submitting ? <Loader2 size={16} className="animate-spin" /> : t('auth.sendMagicLink')}
+        </Button>
+      </form>
+
+      <button
+        type="button"
+        onClick={onSwitchToLogin}
+        className="block w-full text-center text-sm text-[--color-muted-foreground] hover:underline cursor-pointer"
+      >
+        {t('auth.backToLogin')}
+      </button>
+    </div>
+  );
+}

package/templates/apps/templates/client-shadcn/src/components/auth/RegisterForm.tsx

@@ -0,0 +1,107 @@
+import { SyntheticEvent, useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import { Loader2 } from 'lucide-react';
+import { Button } from '../ui/button';
+import { Input } from '../ui/input';
+import { Label } from '../ui/label';
+
+interface RegisterFormProps {
+  onSuccess: (email: string) => void;
+  onError: (msg: string) => void;
+  onSwitchToLogin: () => void;
+  api: <T>(path: string, init?: RequestInit) => Promise<T>;
+}
+
+export function RegisterForm({ onSuccess, onError, onSwitchToLogin, api }: RegisterFormProps) {
+  const { t } = useTranslation();
+  const [email, setEmail] = useState('');
+  const [password, setPassword] = useState('');
+  const [confirm, setConfirm] = useState('');
+  const [submitting, setSubmitting] = useState(false);
+  const [validationError, setValidationError] = useState('');
+
+  async function handleSubmit(e: SyntheticEvent<HTMLFormElement>) {
+    e.preventDefault();
+    setValidationError('');
+    if (password !== confirm) {
+      setValidationError(t('auth.passwordMismatch'));
+      return;
+    }
+    setSubmitting(true);
+    try {
+      await api('/auth/register', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ email, password }),
+      });
+      onSuccess(email);
+    } catch (err) {
+      onError(err instanceof Error ? err.message : t('error.unknown'));
+    } finally {
+      setSubmitting(false);
+    }
+  }
+
+  return (
+    <div className="space-y-5">
+      <div className="space-y-1">
+        <h1 className="text-2xl font-bold">{t('auth.registerTitle')}</h1>
+        <p className="text-sm text-[--color-muted-foreground]">{t('auth.registerSubtitle')}</p>
+      </div>
+
+      <form onSubmit={handleSubmit} className="space-y-4">
+        <div className="space-y-2">
+          <Label htmlFor="reg-email">{t('auth.email')}</Label>
+          <Input
+            id="reg-email"
+            type="email"
+            value={email}
+            onChange={(e) => setEmail(e.target.value)}
+            placeholder="you@example.com"
+            required
+            autoComplete="email"
+          />
+        </div>
+        <div className="space-y-2">
+          <Label htmlFor="reg-password">{t('auth.password')}</Label>
+          <Input
+            id="reg-password"
+            type="password"
+            value={password}
+            onChange={(e) => setPassword(e.target.value)}
+            required
+            autoComplete="new-password"
+          />
+        </div>
+        <div className="space-y-2">
+          <Label htmlFor="reg-confirm">{t('auth.confirmPassword')}</Label>
+          <Input
+            id="reg-confirm"
+            type="password"
+            value={confirm}
+            onChange={(e) => setConfirm(e.target.value)}
+            required
+            autoComplete="new-password"
+          />
+          {validationError && (
+            <p className="text-xs text-[--color-destructive]">{validationError}</p>
+          )}
+        </div>
+        <Button type="submit" className="w-full cursor-pointer" disabled={submitting}>
+          {submitting ? <Loader2 size={16} className="animate-spin" /> : t('auth.register')}
+        </Button>
+      </form>
+
+      <p className="text-center text-sm text-[--color-muted-foreground]">
+        {t('auth.switchToLogin')}{' '}
+        <button
+          type="button"
+          onClick={onSwitchToLogin}
+          className="text-[--color-primary] font-medium hover:underline cursor-pointer"
+        >
+          {t('auth.switchToLoginLink')}
+        </button>
+      </p>
+    </div>
+  );
+}

package/templates/apps/templates/client-shadcn/src/components/layout/LayoutHeader.tsx

@@ -1,5 +1,6 @@
 import { useTranslation } from 'react-i18next';
 import { useNavigate } from '@tanstack/react-router';
+import { LogOut } from 'lucide-react';
 import { useAuthStore, setStoredLocale, type IcoreLocale } from '@icore/template-shared';
 import { Button } from '../ui/button';
 import { ThemeToggle } from '../ThemeToggle';
@@ -27,17 +28,22 @@ export function LayoutHeader() {
   }
 
   return (
-    <header className="border-b border-border px-6 py-3 flex items-center justify-between bg-background">
-      <span className="font-semibold text-foreground tracking-tight">icore</span>
+    <header className="sticky top-0 z-30 flex h-14 items-center justify-between border-b border-[--color-border] bg-[--color-background]/80 px-4 backdrop-blur-sm">
+      <div className="flex items-center gap-2">
+        <div className="flex h-6 w-6 items-center justify-center rounded bg-[--color-primary]">
+          <span className="text-xs font-bold text-[--color-primary-foreground]">i</span>
+        </div>
+        <span className="text-sm font-semibold tracking-tight">iCore</span>
+      </div>
 
-      <div className="flex items-center gap-4">
-        <div className="flex items-center gap-1">
+      <div className="flex items-center gap-1">
+        <div className="flex items-center rounded-md border border-[--color-border] overflow-hidden mr-2">
           {LOCALES.map(({ code, label }) => (
             <button
               key={code}
-              onClick={() => handleLocale(code)}
-              className="text-xs px-2 py-1 rounded hover:bg-muted text-muted-foreground hover:text-foreground transition-colors"
               type="button"
+              onClick={() => handleLocale(code)}
+              className="px-2.5 py-1 text-xs text-[--color-muted-foreground] hover:bg-[--color-muted] hover:text-[--color-foreground] transition-colors cursor-pointer"
             >
               {label}
             </button>
@@ -46,14 +52,29 @@ export function LayoutHeader() {
 
         <ThemeToggle />
 
-        <div className="flex items-center gap-2">
-          <span className="text-sm text-muted-foreground hidden sm:inline">
+        <div className="hidden sm:flex items-center gap-2 ml-1 pl-2 border-l border-[--color-border]">
+          <span className="text-xs text-[--color-muted-foreground] max-w-[140px] truncate">
             {user?.email ?? ''}
           </span>
-          <Button variant="outline" size="sm" onClick={handleLogout}>
-            {t('common.logout')}
+          <Button
+            variant="ghost"
+            size="icon"
+            onClick={handleLogout}
+            aria-label={t('common.logout')}
+            className="h-8 w-8 cursor-pointer"
+          >
+            <LogOut size={15} />
           </Button>
         </div>
+
+        <Button
+          variant="ghost"
+          size="sm"
+          onClick={handleLogout}
+          className="sm:hidden cursor-pointer"
+        >
+          <LogOut size={15} />
+        </Button>
       </div>
     </header>
   );

package/templates/apps/templates/client-shadcn/src/components/layout/LayoutSider.tsx

@@ -3,46 +3,41 @@ import { Link } from '@tanstack/react-router';
 import { useTranslation } from 'react-i18next';
 import { ChevronLeft, ChevronRight, LayoutDashboard, StickyNote, User } from 'lucide-react';
 
+const NAV_ITEMS = [
+  { to: '/dashboard' as const, icon: LayoutDashboard, labelKey: 'nav.dashboard', exact: true },
+  { to: '/notes' as const, icon: StickyNote, labelKey: 'nav.notes', exact: false },
+  { to: '/profile' as const, icon: User, labelKey: 'nav.profile', exact: false },
+];
+
 export function LayoutSider() {
   const { t } = useTranslation();
   const [collapsed, setCollapsed] = useState(false);
 
   return (
     <aside
-      className={`relative flex flex-col border-r border-border bg-background transition-all duration-200 ${
-        collapsed ? 'w-12' : 'w-48'
+      className={`relative flex flex-col border-r border-[--color-border] bg-[--color-card] transition-all duration-200 ${
+        collapsed ? 'w-14' : 'w-52'
       }`}
     >
-      <nav className="flex flex-col gap-1 p-2 flex-1">
-        <Link
-          to="/dashboard"
-          activeOptions={{ exact: true }}
-          className="flex items-center gap-2 px-2 py-2 rounded hover:bg-muted text-sm text-foreground transition-colors [&.active]:bg-muted [&.active]:font-medium"
-        >
-          <LayoutDashboard size={16} className="shrink-0" />
-          {!collapsed && <span>{t('nav.dashboard')}</span>}
-        </Link>
-        <Link
-          to="/notes"
-          className="flex items-center gap-2 px-2 py-2 rounded hover:bg-muted text-sm text-foreground transition-colors [&.active]:bg-muted [&.active]:font-medium"
-        >
-          <StickyNote size={16} className="shrink-0" />
-          {!collapsed && <span>{t('notes.title')}</span>}
-        </Link>
-        <Link
-          to="/profile"
-          className="flex items-center gap-2 px-2 py-2 rounded hover:bg-muted text-sm text-foreground transition-colors [&.active]:bg-muted [&.active]:font-medium"
-        >
-          <User size={16} className="shrink-0" />
-          {!collapsed && <span>{t('nav.profile')}</span>}
-        </Link>
+      <nav className="flex flex-col gap-0.5 p-2 flex-1 pt-3">
+        {NAV_ITEMS.map(({ to, icon: Icon, labelKey, exact }) => (
+          <Link
+            key={to}
+            to={to}
+            activeOptions={{ exact }}
+            className="group flex items-center gap-3 rounded-md px-2.5 py-2 text-sm text-[--color-muted-foreground] transition-colors hover:bg-[--color-muted] hover:text-[--color-foreground] [&.active]:bg-[--color-primary]/10 [&.active]:text-[--color-primary] [&.active]:font-medium cursor-pointer"
+          >
+            <Icon size={16} className="shrink-0" />
+            {!collapsed && <span className="truncate">{t(labelKey)}</span>}
+          </Link>
+        ))}
       </nav>
 
       <button
-        onClick={() => setCollapsed((c) => !c)}
-        className="absolute -right-3 top-4 z-10 flex h-6 w-6 items-center justify-center rounded-full border border-border bg-background text-muted-foreground hover:text-foreground shadow-sm"
         type="button"
+        onClick={() => setCollapsed((c) => !c)}
         aria-label={collapsed ? 'Expand sidebar' : 'Collapse sidebar'}
+        className="absolute -right-3 top-5 z-10 flex h-6 w-6 cursor-pointer items-center justify-center rounded-full border border-[--color-border] bg-[--color-card] text-[--color-muted-foreground] shadow-sm hover:text-[--color-foreground] transition-colors"
       >
         {collapsed ? <ChevronRight size={12} /> : <ChevronLeft size={12} />}
       </button>

package/templates/apps/templates/client-shadcn/src/components/ui/card.tsx

@@ -11,7 +11,7 @@ const Card = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElemen
     <div
       ref={ref}
       className={cn(
-        'rounded-lg border border-[--color-border] bg-[--color-background] text-[--color-foreground] shadow-sm',
+        'rounded-lg border border-[--color-border] bg-[--color-card] text-[--color-card-foreground] shadow-sm',
         className,
       )}
       {...props}

package/templates/apps/templates/client-shadcn/src/globals.css

@@ -1,27 +1,53 @@
 @import 'tailwindcss';
+@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@300;400;500;600;700&display=swap');
 
 @theme {
-  --color-background: oklch(0.99 0 0);
-  --color-foreground: oklch(0.15 0 0);
-  --color-primary: oklch(0.45 0.18 250);
-  --color-primary-foreground: oklch(0.98 0 0);
-  --color-muted: oklch(0.96 0 0);
-  --color-muted-foreground: oklch(0.45 0 0);
-  --color-border: oklch(0.92 0 0);
-  --color-destructive: oklch(0.55 0.25 25);
+  --font-sans: 'Plus Jakarta Sans', system-ui, sans-serif;
+
+  /* Light mode defaults */
+  --color-background: #ffffff;
+  --color-foreground: #0f172a;
+  --color-card: #f8fafc;
+  --color-card-foreground: #0f172a;
+  --color-primary: #16a34a;
+  --color-primary-foreground: #ffffff;
+  --color-secondary: #f1f5f9;
+  --color-secondary-foreground: #0f172a;
+  --color-muted: #f1f5f9;
+  --color-muted-foreground: #475569;
+  --color-border: #e2e8f0;
+  --color-input: #e2e8f0;
+  --color-ring: #16a34a;
+  --color-destructive: #ef4444;
   --radius-default: 0.5rem;
 }
 
 @layer base {
+  * {
+    font-family: var(--font-sans);
+  }
+
   body {
     background-color: var(--color-background);
     color: var(--color-foreground);
+    -webkit-font-smoothing: antialiased;
   }
+
+  /* OLED Dark mode */
   html.dark {
-    --color-background: oklch(0.15 0 0);
-    --color-foreground: oklch(0.98 0 0);
-    --color-muted: oklch(0.25 0 0);
-    --color-muted-foreground: oklch(0.7 0 0);
-    --color-border: oklch(0.3 0 0);
+    --color-background: #020617;
+    --color-foreground: #f8fafc;
+    --color-card: #0f172a;
+    --color-card-foreground: #f8fafc;
+    --color-primary: #22c55e;
+    --color-primary-foreground: #020617;
+    --color-secondary: #1e293b;
+    --color-secondary-foreground: #f8fafc;
+    --color-muted: #1e293b;
+    --color-muted-foreground: #94a3b8;
+    --color-border: #1e293b;
+    --color-input: #1e293b;
+    --color-ring: #22c55e;
+    --color-destructive: #ef4444;
   }
 }

package/templates/apps/templates/client-shadcn/src/routes/auth.callback.tsx

@@ -3,7 +3,7 @@ import { useEffect, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { useAuthStore, useNotify } from '@icore/template-shared';
 import { Loader2 } from 'lucide-react';
-import { api } from '../main';
+import { api } from '@/main';
 
 type Status = 'verifying' | 'done' | 'error';