@striae-org/striae 4.1.0 → 4.2.1

package/app/components/navbar/case-modals/open-case-modal.module.css

@@ -0,0 +1,81 @@
+.overlay {
+  position: fixed;
+  inset: 0;
+  background: rgba(0, 0, 0, 0.45);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  z-index: 120;
+}
+
+.modal {
+  position: relative;
+  width: min(460px, calc(100vw - 2rem));
+  background: #ffffff;
+  border-radius: 12px;
+  border: 1px solid #d9e0e7;
+  box-shadow: 0 14px 36px rgba(0, 0, 0, 0.2);
+  padding: 1.1rem;
+}
+
+.title {
+  margin: 0;
+  color: #212529;
+  font-size: 1.02rem;
+}
+
+.helperText {
+  margin: 0.4rem 0 0.9rem;
+  color: #6c757d;
+  font-size: 0.85rem;
+}
+
+.input {
+  width: 100%;
+  box-sizing: border-box;
+  border: 1px solid #cdd5dd;
+  border-radius: 8px;
+  padding: 0.6rem 0.75rem;
+  font-size: 0.92rem;
+}
+
+.input:focus {
+  outline: none;
+  border-color: #1f6feb;
+  box-shadow: 0 0 0 2px rgba(31, 111, 235, 0.2);
+}
+
+.actions {
+  display: flex;
+  justify-content: flex-end;
+  gap: 0.65rem;
+  margin-top: 1rem;
+}
+
+.cancelButton,
+.confirmButton {
+  border: 1px solid transparent;
+  border-radius: 8px;
+  padding: 0.55rem 0.9rem;
+  font-size: 0.86rem;
+  font-weight: 500;
+  cursor: pointer;
+}
+
+.cancelButton {
+  background: #f3f4f6;
+  color: #3c4651;
+  border-color: #d6dce2;
+}
+
+.confirmButton {
+  background: #198754;
+  color: #ffffff;
+  border-color: #157347;
+}
+
+.cancelButton:disabled,
+.confirmButton:disabled {
+  cursor: not-allowed;
+  opacity: 0.6;
+}

package/app/components/navbar/case-modals/open-case-modal.tsx

@@ -0,0 +1,120 @@
+import { useEffect, useRef, useState } from 'react';
+import { useOverlayDismiss } from '~/hooks/useOverlayDismiss';
+import styles from './open-case-modal.module.css';
+
+interface OpenCaseModalProps {
+  isOpen: boolean;
+  isSubmitting?: boolean;
+  title?: string;
+  helperText?: string;
+  onClose: () => void;
+  onSubmit: (caseNumber: string) => Promise<void>;
+}
+
+export const OpenCaseModal = ({
+  isOpen,
+  isSubmitting = false,
+  title = 'Open Case',
+  helperText,
+  onClose,
+  onSubmit,
+}: OpenCaseModalProps) => {
+  const [caseNumber, setCaseNumber] = useState('');
+  const inputRef = useRef<HTMLInputElement>(null);
+  const isCloseBlocked = isSubmitting;
+
+  useEffect(() => {
+    if (!isOpen) {
+      return;
+    }
+
+    const focusId = window.requestAnimationFrame(() => {
+      inputRef.current?.focus();
+    });
+
+    return () => {
+      window.cancelAnimationFrame(focusId);
+    };
+  }, [isOpen]);
+
+  const handleClose = () => {
+    if (isCloseBlocked) {
+      return;
+    }
+
+    setCaseNumber('');
+    onClose();
+  };
+
+  const {
+    requestClose,
+    overlayProps,
+    getCloseButtonProps,
+  } = useOverlayDismiss({
+    isOpen,
+    onClose: handleClose,
+    canDismiss: !isCloseBlocked,
+  });
+
+  const handleSubmit = async () => {
+    const trimmedCaseNumber = caseNumber.trim();
+    if (!trimmedCaseNumber || isSubmitting) {
+      return;
+    }
+
+    await onSubmit(trimmedCaseNumber);
+    setCaseNumber('');
+  };
+
+  if (!isOpen) return null;
+
+  return (
+    <div
+      className={styles.overlay}
+      aria-label="Close open case dialog"
+      {...overlayProps}
+    >
+      <div className={styles.modal} role="dialog" aria-modal="true" aria-label="Open Case">
+        <button {...getCloseButtonProps({ ariaLabel: 'Close open case dialog' })}>
+          ×
+        </button>
+        <h3 className={styles.title}>{title}</h3>
+        {helperText ? <p className={styles.helperText}>{helperText}</p> : null}
+        <input
+          ref={inputRef}
+          type="text"
+          className={styles.input}
+          value={caseNumber}
+          onChange={(event) => setCaseNumber(event.target.value)}
+          placeholder="Case #"
+          disabled={isSubmitting}
+          onKeyDown={(event) => {
+            if (event.key === 'Enter') {
+              void handleSubmit();
+            }
+          }}
+        />
+        <div className={styles.actions}>
+          <button
+            type="button"
+            className={styles.cancelButton}
+            onClick={requestClose}
+            disabled={isCloseBlocked}
+          >
+            Cancel
+          </button>
+          <button
+            type="button"
+            className={styles.confirmButton}
+            onClick={() => {
+              void handleSubmit();
+            }}
+            disabled={isSubmitting || !caseNumber.trim()}
+          >
+            {isSubmitting ? 'Opening...' : 'Load/Create Case'}
+          </button>
+        </div>
+      </div>
+    </div>
+  );
+};

package/app/components/navbar/case-modals/rename-case-modal.module.css

@@ -0,0 +1,81 @@
+.overlay {
+  position: fixed;
+  inset: 0;
+  background: rgba(0, 0, 0, 0.45);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  z-index: 120;
+}
+
+.modal {
+  position: relative;
+  width: min(460px, calc(100vw - 2rem));
+  background: #ffffff;
+  border-radius: 12px;
+  border: 1px solid #d9e0e7;
+  box-shadow: 0 14px 36px rgba(0, 0, 0, 0.2);
+  padding: 1.1rem;
+}
+
+.title {
+  margin: 0;
+  color: #212529;
+  font-size: 1.02rem;
+}
+
+.subtitle {
+  margin: 0.4rem 0 0.9rem;
+  color: #6c757d;
+  font-size: 0.85rem;
+}
+
+.input {
+  width: 100%;
+  box-sizing: border-box;
+  border: 1px solid #cdd5dd;
+  border-radius: 8px;
+  padding: 0.6rem 0.75rem;
+  font-size: 0.92rem;
+}
+
+.input:focus {
+  outline: none;
+  border-color: #1f6feb;
+  box-shadow: 0 0 0 2px rgba(31, 111, 235, 0.2);
+}
+
+.actions {
+  display: flex;
+  justify-content: flex-end;
+  gap: 0.65rem;
+  margin-top: 1rem;
+}
+
+.cancelButton,
+.confirmButton {
+  border: 1px solid transparent;
+  border-radius: 8px;
+  padding: 0.55rem 0.9rem;
+  font-size: 0.86rem;
+  font-weight: 500;
+  cursor: pointer;
+}
+
+.cancelButton {
+  background: #f3f4f6;
+  color: #3c4651;
+  border-color: #d6dce2;
+}
+
+.confirmButton {
+  background: #ffc107;
+  color: #3f2f00;
+  border-color: #e8b103;
+}
+
+.cancelButton:disabled,
+.confirmButton:disabled {
+  cursor: not-allowed;
+  opacity: 0.6;
+}

package/app/components/navbar/case-modals/rename-case-modal.tsx

@@ -0,0 +1,107 @@
+import { useEffect, useRef, useState } from 'react';
+import { useOverlayDismiss } from '~/hooks/useOverlayDismiss';
+import styles from './rename-case-modal.module.css';
+
+interface RenameCaseModalProps {
+  isOpen: boolean;
+  currentCase: string;
+  isSubmitting?: boolean;
+  onClose: () => void;
+  onSubmit: (newCaseName: string) => Promise<void>;
+}
+
+export const RenameCaseModal = ({
+  isOpen,
+  currentCase,
+  isSubmitting = false,
+  onClose,
+  onSubmit,
+}: RenameCaseModalProps) => {
+  const [newCaseName, setNewCaseName] = useState('');
+  const inputRef = useRef<HTMLInputElement>(null);
+  const isCloseBlocked = isSubmitting;
+
+  const handleClose = () => {
+    setNewCaseName('');
+    onClose();
+  };
+
+  const {
+    requestClose,
+    overlayProps,
+    getCloseButtonProps,
+  } = useOverlayDismiss({
+    isOpen,
+    onClose: handleClose,
+    canDismiss: !isCloseBlocked,
+  });
+
+  useEffect(() => {
+    if (!isOpen) {
+      return;
+    }
+
+    const focusId = window.requestAnimationFrame(() => {
+      inputRef.current?.focus();
+    });
+
+    return () => {
+      window.cancelAnimationFrame(focusId);
+    };
+  }, [isOpen]);
+
+  if (!isOpen) return null;
+
+  const handleSubmit = async () => {
+    await onSubmit(newCaseName.trim());
+    setNewCaseName('');
+  };
+
+  return (
+    <div
+      className={styles.overlay}
+      aria-label="Close rename case dialog"
+      {...overlayProps}
+    >
+      <div className={styles.modal} role="dialog" aria-modal="true" aria-label="Rename Case">
+        <button {...getCloseButtonProps({ ariaLabel: 'Close rename case dialog' })}>
+          ×
+        </button>
+        <h3 className={styles.title}>Rename Case</h3>
+        <p className={styles.subtitle}>Current case: {currentCase}</p>
+        <input
+          ref={inputRef}
+          type="text"
+          value={newCaseName}
+          onChange={(event) => setNewCaseName(event.target.value)}
+          className={styles.input}
+          placeholder="New case number"
+          disabled={isSubmitting}
+          onKeyDown={(event) => {
+            if (event.key === 'Enter' && newCaseName.trim() && !isSubmitting) {
+              void handleSubmit();
+            }
+          }}
+        />
+        <div className={styles.actions}>
+          <button
+            type="button"
+            className={styles.cancelButton}
+            onClick={requestClose}
+            disabled={isCloseBlocked}
+          >
+            Cancel
+          </button>
+          <button
+            type="button"
+            className={styles.confirmButton}
+            onClick={() => void handleSubmit()}
+            disabled={isSubmitting || !newCaseName.trim()}
+          >
+            {isSubmitting ? 'Renaming...' : 'Rename Case'}
+          </button>
+        </div>
+      </div>
+    </div>
+  );
+};