refactor: improve team management, OKRs, and session components

src/components/ui/EditableMotivatorTitle.tsx

@@ -26,4 +26,3 @@ export function EditableMotivatorTitle({
     />
   );
 }
-

src/components/ui/EditableSessionTitle.tsx

@@ -26,4 +26,3 @@ export function EditableSessionTitle({
     />
   );
 }
-

src/components/ui/EditableTitle.tsx

@@ -9,19 +9,17 @@ interface EditableTitleProps {
   onUpdate: (sessionId: string, title: string) => Promise<{ success: boolean; error?: string }>;
 }
 
-export function EditableTitle({
-  sessionId,
-  initialTitle,
-  canEdit,
-  onUpdate,
-}: EditableTitleProps) {
+export function EditableTitle({ sessionId, initialTitle, canEdit, onUpdate }: EditableTitleProps) {
   const [isEditing, setIsEditing] = useState(false);
   const [editingTitle, setEditingTitle] = useState('');
   const [isPending, startTransition] = useTransition();
   const inputRef = useRef<HTMLInputElement>(null);
 
   // Use editingTitle when editing, otherwise use initialTitle (synced from SSE)
-  const title = useMemo(() => (isEditing ? editingTitle : initialTitle), [isEditing, editingTitle, initialTitle]);
+  const title = useMemo(
+    () => (isEditing ? editingTitle : initialTitle),
+    [isEditing, editingTitle, initialTitle]
+  );
 
   useEffect(() => {
     if (isEditing && inputRef.current) {
@@ -110,4 +108,3 @@ export function EditableTitle({
     </button>
   );
 }
-

src/components/ui/EditableYearReviewTitle.tsx

@@ -26,4 +26,3 @@ export function EditableYearReviewTitle({
     />
   );
 }
-

src/components/ui/Select.tsx

@@ -90,9 +90,16 @@ export const Select = forwardRef<HTMLSelectElement, SelectProps>(
               </option>
             ))}
           </select>
-          <div className={`pointer-events-none absolute ${iconPosition} top-1/2 -translate-y-1/2 text-muted-foreground`}>
+          <div
+            className={`pointer-events-none absolute ${iconPosition} top-1/2 -translate-y-1/2 text-muted-foreground`}
+          >
             <svg className={iconSize} fill="none" stroke="currentColor" viewBox="0 0 24 24">
-              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 9l-7 7-7-7" />
+              <path
+                strokeLinecap="round"
+                strokeLinejoin="round"
+                strokeWidth={2}
+                d="M19 9l-7 7-7-7"
+              />
             </svg>
           </div>
         </div>

src/components/ui/ToggleGroup.tsx

@@ -22,7 +22,9 @@ export function ToggleGroup<T extends string>({
   className = '',
 }: ToggleGroupProps<T>) {
   return (
-    <div className={`flex items-center gap-2 rounded-lg border border-border bg-card p-1 ${className}`}>
+    <div
+      className={`flex items-center gap-2 rounded-lg border border-border bg-card p-1 ${className}`}
+    >
       {options.map((option) => (
         <button
           key={option.value}
@@ -30,9 +32,10 @@ export function ToggleGroup<T extends string>({
           onClick={() => onChange(option.value)}
           className={`
             flex items-center gap-1.5 rounded-md px-3 py-1.5 text-sm font-medium transition-colors
-            ${value === option.value
-              ? 'bg-[#8b5cf6] text-white shadow-sm'
-              : 'text-muted hover:text-foreground hover:bg-card-hover'
+            ${
+              value === option.value
+                ? 'bg-[#8b5cf6] text-white shadow-sm'
+                : 'text-muted hover:text-foreground hover:bg-card-hover'
             }
           `}
         >
@@ -43,4 +46,3 @@ export function ToggleGroup<T extends string>({
     </div>
   );
 }
-

src/components/ui/index.ts

@@ -17,4 +17,4 @@ export { Select } from './Select';
 export type { SelectOption } from './Select';
 export { Textarea } from './Textarea';
 export { ToggleGroup } from './ToggleGroup';
-export type { ToggleOption } from './ToggleGroup';
+export type { ToggleOption } from './ToggleGroup';