@assistkick/create 1.6.0 → 1.8.0

package/templates/assistkick-product-system/packages/frontend/src/components/LoginPage.tsx

@@ -54,12 +54,12 @@ export function LoginPage({ onLoginSuccess }: LoginPageProps) {
   }, [email, password, onLoginSuccess]);
 
   return (
-    <div className="login-page">
-      <div className="login-card">
-        <div className="login-header">
-          <span className="login-title">login</span>
+    <div className="flex items-center justify-center w-full h-screen bg-surface">
+      <div className="w-[360px] p-8 bg-surface-alt border border-edge rounded">
+        <div className="flex items-center justify-between mb-6">
+          <span className="font-mono text-base text-content tracking-wide">login</span>
           <button
-            className="login-theme-toggle"
+            className="bg-transparent border border-edge rounded w-7 h-7 text-content-secondary text-sm cursor-pointer flex items-center justify-center transition-[border-color,color] duration-150 hover:border-content hover:text-content"
             onClick={toggleTheme}
             title={`Switch to ${theme === 'dark' ? 'light' : 'dark'} theme`}
           >
@@ -67,11 +67,11 @@ export function LoginPage({ onLoginSuccess }: LoginPageProps) {
           </button>
         </div>
 
-        <form className="login-form" onSubmit={handleSubmit}>
-          <label className="login-label" htmlFor="login-email">email</label>
+        <form className="flex flex-col gap-2" onSubmit={handleSubmit}>
+          <label className="font-mono text-[11px] text-content-secondary mt-1" htmlFor="login-email">email</label>
           <input
             id="login-email"
-            className="login-input"
+            className="bg-surface-raised border border-edge rounded text-content font-mono text-[13px] py-2 px-2.5 outline-none transition-[border-color] duration-150 focus:border-accent placeholder:text-content-muted disabled:opacity-60"
             type="email"
             value={email}
             onChange={e => setEmail(e.target.value)}
@@ -81,10 +81,10 @@ export function LoginPage({ onLoginSuccess }: LoginPageProps) {
             disabled={submitting}
           />
 
-          <label className="login-label" htmlFor="login-password">password</label>
+          <label className="font-mono text-[11px] text-content-secondary mt-1" htmlFor="login-password">password</label>
           <input
             id="login-password"
-            className="login-input"
+            className="bg-surface-raised border border-edge rounded text-content font-mono text-[13px] py-2 px-2.5 outline-none transition-[border-color] duration-150 focus:border-accent placeholder:text-content-muted disabled:opacity-60"
             type="password"
             value={password}
             onChange={e => setPassword(e.target.value)}
@@ -93,10 +93,10 @@ export function LoginPage({ onLoginSuccess }: LoginPageProps) {
             disabled={submitting}
           />
 
-          {error && <div className="login-error">{error}</div>}
+          {error && <div className="font-mono text-[11px] text-error mt-1">{error}</div>}
 
           <button
-            className="login-submit"
+            className="mt-3 bg-transparent border border-accent rounded text-accent font-mono text-[13px] py-2 px-3.5 cursor-pointer transition-[background,color] duration-150 hover:enabled:bg-accent hover:enabled:text-white disabled:opacity-50 disabled:cursor-not-allowed"
             type="submit"
             disabled={submitting}
           >
@@ -104,10 +104,10 @@ export function LoginPage({ onLoginSuccess }: LoginPageProps) {
           </button>
         </form>
 
-        <p className="login-register-link">
+        <p className="font-mono text-xs text-content-secondary mt-4 text-center">
           <Link to="/forgot-password">Forgot password?</Link>
         </p>
-        <p className="login-register-link">
+        <p className="font-mono text-xs text-content-secondary mt-2 text-center">
           No account yet? <Link to="/register">Register</Link>
         </p>
       </div>

package/templates/assistkick-product-system/packages/frontend/src/components/ProjectSelector.tsx

@@ -5,7 +5,7 @@ interface ProjectSelectorProps {
   projects: Project[];
   selectedProjectId: string | null;
   onSelect: (id: string) => void;
-  onCreate: (name: string) => Promise<any>;
+  onCreate: (name: string, type?: string) => Promise<any>;
   onRename: (id: string, name: string) => Promise<void>;
   onArchive: (id: string) => Promise<void>;
   onOpenGitModal?: (project: Project) => void;
@@ -17,6 +17,7 @@ export function ProjectSelector({
   const [open, setOpen] = useState(false);
   const [creating, setCreating] = useState(false);
   const [newName, setNewName] = useState('');
+  const [newType, setNewType] = useState<'software' | 'video'>('software');
   const [renamingId, setRenamingId] = useState<string | null>(null);
   const [renameValue, setRenameValue] = useState('');
   const dropdownRef = useRef<HTMLDivElement>(null);
@@ -53,8 +54,9 @@ export function ProjectSelector({
     const trimmed = newName.trim();
     if (!trimmed) return;
     try {
-      await onCreate(trimmed);
+      await onCreate(trimmed, newType);
       setNewName('');
+      setNewType('software');
       setCreating(false);
       setOpen(false);
     } catch {
@@ -83,30 +85,30 @@ export function ProjectSelector({
   };
 
   return (
-    <div className="project-selector" ref={dropdownRef}>
+    <div className="relative" ref={dropdownRef}>
       <button
-        className="project-selector-trigger"
+        className="flex items-center gap-1.5 py-[5px] px-2.5 bg-transparent border border-edge rounded text-content font-mono text-xs cursor-pointer transition-[border-color,background] duration-150 max-w-[200px] hover:bg-tab-hover hover:border-accent"
         onClick={() => setOpen(v => !v)}
         title="Select project"
       >
-        <span className="project-selector-label">
+        <span className="overflow-hidden text-ellipsis whitespace-nowrap">
           {selectedProject?.name || 'No project'}
         </span>
-        <span className="project-selector-chevron">{open ? '\u25B4' : '\u25BE'}</span>
+        <span className="text-[10px] text-content-muted shrink-0">{open ? '\u25B4' : '\u25BE'}</span>
       </button>
 
       {open && (
-        <div className="project-selector-dropdown">
-          <div className="project-selector-list">
+        <div className="absolute top-[calc(100%+4px)] left-0 min-w-[220px] max-w-[300px] bg-panel border border-edge rounded-md shadow-[0_4px_12px_var(--panel-shadow)] z-[200] overflow-hidden">
+          <div className="max-h-60 overflow-y-auto py-1">
             {projects.map(project => (
               <div
                 key={project.id}
-                className={`project-selector-item${project.id === selectedProjectId ? ' active' : ''}`}
+                className={`group flex items-center pr-1 hover:bg-tab-hover${project.id === selectedProjectId ? ' bg-tab-active' : ''}`}
               >
                 {renamingId === project.id ? (
                   <input
                     ref={renameInputRef}
-                    className="project-selector-input"
+                    className="flex-1 py-[5px] px-2 bg-surface border border-accent rounded-sm text-content font-mono text-xs outline-none mx-1 my-0.5"
                     value={renameValue}
                     onChange={e => setRenameValue(e.target.value)}
                     onKeyDown={e => {
@@ -118,15 +120,18 @@ export function ProjectSelector({
                 ) : (
                   <>
                     <button
-                      className="project-selector-item-name"
+                      className="flex-1 flex items-center gap-1.5 text-left py-1.5 px-2 bg-none border-none text-content font-mono text-xs cursor-pointer overflow-hidden"
                       onClick={() => { onSelect(project.id); setOpen(false); }}
                     >
-                      {project.name}
+                      <span className="overflow-hidden text-ellipsis whitespace-nowrap">{project.name}</span>
+                      {project.type === 'video' && (
+                        <span className="shrink-0 rounded-full bg-purple-500/15 px-1.5 py-0.5 text-[9px] font-bold text-purple-400">Video</span>
+                      )}
                     </button>
-                    <div className="project-selector-item-actions">
+                    <div className="flex gap-0.5 opacity-0 transition-opacity duration-150 group-hover:opacity-100">
                       {onOpenGitModal && (
                         <button
-                          className={`project-selector-action-btn project-selector-git-btn${project.repoUrl ? ' connected' : ''}`}
+                          className={`bg-none border-none text-xs cursor-pointer px-1 py-0.5 rounded-sm transition-[color,background] duration-150 hover:text-content hover:bg-surface-raised ${project.repoUrl ? 'text-accent' : 'text-content-secondary'}`}
                           title="Git Repository"
                           onClick={(e) => {
                             e.stopPropagation();
@@ -140,7 +145,7 @@ export function ProjectSelector({
                         </button>
                       )}
                       <button
-                        className="project-selector-action-btn"
+                        className="bg-none border-none text-content-muted text-xs cursor-pointer px-1 py-0.5 rounded-sm transition-[color,background] duration-150 hover:text-content hover:bg-surface-raised"
                         title="Rename"
                         onClick={(e) => {
                           e.stopPropagation();
@@ -152,7 +157,7 @@ export function ProjectSelector({
                       </button>
                       {!project.isDefault && (
                         <button
-                          className="project-selector-action-btn project-selector-archive-btn"
+                          className="bg-none border-none text-content-muted text-xs cursor-pointer px-1 py-0.5 rounded-sm transition-[color,background] duration-150 hover:text-content hover:bg-surface-raised hover:!text-error"
                           title="Archive"
                           onClick={(e) => {
                             e.stopPropagation();
@@ -169,27 +174,43 @@ export function ProjectSelector({
             ))}
           </div>
 
-          <div className="project-selector-footer">
+          <div className="border-t border-edge p-1">
             {creating ? (
-              <div className="project-selector-create-form">
-                <input
-                  ref={createInputRef}
-                  className="project-selector-input"
-                  placeholder="Project name..."
-                  value={newName}
-                  onChange={e => setNewName(e.target.value)}
-                  onKeyDown={e => {
-                    if (e.key === 'Enter') handleCreate();
-                    if (e.key === 'Escape') { setCreating(false); setNewName(''); }
-                  }}
-                />
-                <button className="project-selector-create-confirm" onClick={handleCreate}>
-                  +
-                </button>
+              <div className="flex flex-col gap-1">
+                <div className="flex gap-1 items-center">
+                  <input
+                    ref={createInputRef}
+                    className="flex-1 py-[5px] px-2 bg-surface border border-accent rounded-sm text-content font-mono text-xs outline-none mx-1 my-0.5"
+                    placeholder="Project name..."
+                    value={newName}
+                    onChange={e => setNewName(e.target.value)}
+                    onKeyDown={e => {
+                      if (e.key === 'Enter') handleCreate();
+                      if (e.key === 'Escape') { setCreating(false); setNewName(''); setNewType('software'); }
+                    }}
+                  />
+                  <button className="bg-accent border-none text-white text-sm font-bold w-7 h-7 rounded-sm cursor-pointer flex items-center justify-center shrink-0" onClick={handleCreate}>
+                    +
+                  </button>
+                </div>
+                <div className="flex gap-1 px-1.5">
+                  <button
+                    className={`px-2 py-0.5 rounded-sm text-[10px] font-mono border cursor-pointer transition-colors ${newType === 'software' ? 'bg-accent/15 border-accent text-accent' : 'bg-transparent border-edge text-content-muted hover:border-content/30'}`}
+                    onClick={() => setNewType('software')}
+                  >
+                    Software
+                  </button>
+                  <button
+                    className={`px-2 py-0.5 rounded-sm text-[10px] font-mono border cursor-pointer transition-colors ${newType === 'video' ? 'bg-accent/15 border-accent text-accent' : 'bg-transparent border-edge text-content-muted hover:border-content/30'}`}
+                    onClick={() => setNewType('video')}
+                  >
+                    Video
+                  </button>
+                </div>
               </div>
             ) : (
               <button
-                className="project-selector-new-btn"
+                className="w-full py-1.5 px-2 bg-none border-none text-accent font-mono text-xs cursor-pointer text-left rounded-sm transition-background duration-150 hover:bg-tab-hover"
                 onClick={() => setCreating(true)}
               >
                 + New Project

package/templates/assistkick-product-system/packages/frontend/src/components/QaIssueSheet.tsx

@@ -1,22 +1,14 @@
-import React, { useState, useEffect, useRef, useCallback } from 'react';
+import React, { useState, useEffect, useCallback } from 'react';
 import { apiClient } from '../api/client';
+import { useQaSheetStore } from '../stores/useQaSheetStore';
+import { SideSheet } from './ds/SideSheet';
 
-interface QaIssueSheetProps {
-  isOpen: boolean;
-  featureId: string | null;
-  featureName: string;
-  column: string;
-  notes: any[];
-  reviews: any[];
-  onClose: () => void;
-  onNotesChanged: () => void;
-}
+export function QaIssueSheet() {
+  const {
+    isOpen, featureId, featureName, column, notes: initialNotes,
+    reviews: initialReviews, close,
+  } = useQaSheetStore();
 
-export function QaIssueSheet({
-  isOpen, featureId, featureName, column, notes: initialNotes, reviews: initialReviews,
-  onClose, onNotesChanged,
-}: QaIssueSheetProps) {
-  const sheetRef = useRef<HTMLDivElement>(null);
   const [notes, setNotes] = useState<any[]>(initialNotes);
   const [reviews, setReviews] = useState<any[]>(initialReviews);
   const [newNoteText, setNewNoteText] = useState('');
@@ -25,7 +17,7 @@ export function QaIssueSheet({
 
   const isEditable = column === 'qa';
 
-  // Sync when props change
+  // Sync when store data changes
   useEffect(() => {
     setNotes(initialNotes);
     setReviews(initialReviews);
@@ -33,19 +25,6 @@ export function QaIssueSheet({
     setNewNoteText('');
   }, [featureId, initialNotes, initialReviews]);
 
-  // Close on outside click
-  useEffect(() => {
-    if (!isOpen) return;
-    const handleClick = (e: MouseEvent) => {
-      if (sheetRef.current && !sheetRef.current.contains(e.target as Node)) {
-        if ((e.target as HTMLElement).closest('.kanban-issues-btn')) return;
-        onClose();
-      }
-    };
-    document.addEventListener('click', handleClick);
-    return () => document.removeEventListener('click', handleClick);
-  }, [isOpen, onClose]);
-
   const refreshNotes = useCallback(async () => {
     if (!featureId) return;
     try {
@@ -55,11 +34,10 @@ export function QaIssueSheet({
         setNotes(entry.notes || []);
         setReviews(entry.reviews || []);
       }
-      onNotesChanged();
     } catch (err) {
       console.error('Failed to refresh notes:', err);
     }
-  }, [featureId, onNotesChanged]);
+  }, [featureId]);
 
   const handleAddNote = async () => {
     const text = newNoteText.trim();
@@ -105,63 +83,59 @@ export function QaIssueSheet({
   };
 
   return (
-    <div className={`qa-issue-sheet${isOpen ? ' open' : ''}`} ref={sheetRef}>
-      <div className="qa-sheet-header">
-        <span className="qa-sheet-title">{featureId} — {featureName}</span>
-        <button className="qa-sheet-close" onClick={onClose}>&times;</button>
-      </div>
-      <div className="qa-sheet-body">
-        <div className="qa-sheet-subtitle">
+    <SideSheet isOpen={isOpen} onClose={close} title={`${featureId} — ${featureName}`} zIndex={260}>
+      <div className="flex flex-col gap-3">
+        <div className="text-[11px] text-content-muted uppercase tracking-wider">
           {isEditable ? 'Report and manage QA issues' : 'Issues (read-only)'}
         </div>
 
         {reviews.length > 0 && (
-          <div className="qa-sheet-review-history">
-            <div className="qa-sheet-section-title">Review History</div>
+          <div className="mb-4 border-b border-edge pb-3">
+            <div className="text-[11px] font-semibold uppercase tracking-wide text-content-secondary mb-2">Review History</div>
             {reviews.map((review: any, i: number) => (
-              <div key={i} className="qa-sheet-review-item">
-                <div className="qa-sheet-review-header">
-                  <span className="qa-sheet-review-cycle">Cycle {review.cycle}</span>
-                  <span className={`qa-sheet-review-badge ${review.status}`}>
+              <div key={i} className="bg-surface-alt rounded-md px-2.5 py-2 mb-1.5">
+                <div className="flex items-center gap-2 text-xs">
+                  <span className="font-semibold text-content">Cycle {review.cycle}</span>
+                  <span className={`text-[10px] font-semibold px-1.5 py-px rounded-sm uppercase ${review.status === 'approved' ? 'bg-[#16a34a22] text-[#16a34a]' : 'bg-[#dc262622] text-[#dc2626]'}`}>
                     {review.status === 'approved' ? 'Approved' : 'Rejected'}
                   </span>
-                  <span className="qa-sheet-review-time">{formatDate(review.timestamp)}</span>
+                  <span className="text-content-secondary text-[11px] ml-auto">{formatDate(review.timestamp)}</span>
                 </div>
-                {review.reason && <div className="qa-sheet-review-reason">{review.reason}</div>}
+                {review.reason && <div className="mt-1.5 text-xs text-content-secondary whitespace-pre-wrap leading-snug max-h-[120px] overflow-y-auto">{review.reason}</div>}
               </div>
             ))}
           </div>
         )}
 
         {notes.length === 0 ? (
-          <div className="qa-sheet-empty">No issues reported yet.</div>
+          <div className="text-xs text-content-muted p-4 text-center">No issues reported yet.</div>
         ) : (
-          <div className="qa-sheet-notes-list">
+          <div className="flex flex-col gap-2">
             {notes.map((note: any) => (
-              <div key={note.id} className="qa-sheet-note">
+              <div key={note.id} className="bg-surface-raised border border-edge rounded px-3 py-2.5">
                 {editingNoteId === note.id ? (
-                  <div className="qa-sheet-edit-form">
+                  <div className="flex flex-col gap-2">
                     <textarea
-                      className="qa-sheet-textarea"
+                      className="w-full bg-surface-raised border border-edge rounded text-content font-mono text-xs px-3 py-2.5 resize-y leading-relaxed focus:outline-none focus:border-accent placeholder:text-content-muted"
                       value={editText}
                       onChange={e => setEditText(e.target.value)}
                       rows={4}
                       autoFocus
                     />
-                    <div className="qa-sheet-form-btns">
-                      <button className="qa-sheet-add-btn" onClick={() => handleUpdateNote(note.id)}>Save</button>
-                      <button className="qa-sheet-cancel-btn" onClick={() => setEditingNoteId(null)}>Cancel</button>
+                    <div className="flex gap-2">
+                      <button className="bg-transparent border border-accent rounded text-accent font-mono text-[11px] px-3.5 py-1.5 cursor-pointer transition-[background,color] duration-150 hover:bg-accent hover:text-white" onClick={() => handleUpdateNote(note.id)}>Save</button>
+                      <button className="bg-transparent border border-edge rounded text-content-secondary font-mono text-[11px] px-3.5 py-1.5 cursor-pointer hover:border-content hover:text-content" onClick={() => setEditingNoteId(null)}>Cancel</button>
                     </div>
                   </div>
                 ) : (
                   <>
-                    <div className="qa-sheet-note-text">{note.text}</div>
-                    <div className="qa-sheet-note-meta">
-                      <span className="qa-sheet-note-date">{formatDate(note.created_at || note.timestamp)}</span>
+                    <div className="text-xs text-content leading-relaxed whitespace-pre-wrap break-words">{note.text}</div>
+                    <div className="flex items-center justify-between mt-2">
+                      <span className="text-[10px] text-content-muted">{formatDate(note.created_at || note.timestamp)}</span>
                       {isEditable && (
-                        <span className="qa-sheet-note-actions">
-                          <button className="qa-sheet-action-btn" onClick={() => { setEditingNoteId(note.id); setEditText(note.text); }}>Edit</button>
-                          <button className="qa-sheet-action-btn delete" onClick={() => handleDeleteNote(note.id)}>Delete</button>
+                        <span className="flex gap-1.5">
+                          <button className="bg-transparent border-none text-content-muted text-[11px] font-mono cursor-pointer px-1.5 py-0.5 rounded-sm hover:bg-surface hover:text-content" onClick={() => { setEditingNoteId(note.id); setEditText(note.text); }}>Edit</button>
+                          <button className="bg-transparent border-none text-content-muted text-[11px] font-mono cursor-pointer px-1.5 py-0.5 rounded-sm hover:bg-surface hover:text-error" onClick={() => handleDeleteNote(note.id)}>Delete</button>
                         </span>
                       )}
                     </div>
@@ -173,20 +147,20 @@ export function QaIssueSheet({
         )}
 
         {isEditable && (
-          <div className="qa-sheet-add-form">
+          <div className="flex flex-col gap-2 mt-auto pt-3 border-t border-edge">
             <textarea
-              className="qa-sheet-textarea"
+              className="w-full bg-surface-raised border border-edge rounded text-content font-mono text-xs px-3 py-2.5 resize-y leading-relaxed focus:outline-none focus:border-accent placeholder:text-content-muted"
               placeholder="Describe the issue..."
               rows={4}
               value={newNoteText}
               onChange={e => setNewNoteText(e.target.value)}
             />
-            <div className="qa-sheet-form-btns">
-              <button className="qa-sheet-add-btn" onClick={handleAddNote}>Add Issue</button>
+            <div className="flex gap-2">
+              <button className="bg-transparent border border-accent rounded text-accent font-mono text-[11px] px-3.5 py-1.5 cursor-pointer transition-[background,color] duration-150 hover:bg-accent hover:text-white" onClick={handleAddNote}>Add Issue</button>
             </div>
           </div>
         )}
       </div>
-    </div>
+    </SideSheet>
   );
 }