wip 18

frontend/src/components/Field.tsx

@@ -6,7 +6,7 @@ interface FieldProps {
   isEditing?: boolean;
 }
 
-export function Field({ label, children, isEditing = false }: FieldProps) {
+export function Field({ label, children, isEditing: _isEditing = false }: FieldProps) {
   return (
     <div className="relative rounded">
       <div className="relative inline-flex gap-2 text-gray-500">{label}</div>

frontend/src/icons/CheckIcon.tsx

@@ -12,7 +12,7 @@ export function CheckIcon({ size = 24, className = '', disabled = false }: Check
       <path
         fillRule="evenodd"
         clipRule="evenodd"
-        d="M20.7071 6.29289C21.0976 6.68342 21.0976 7.31658 20.7071 7.70711L9.70711 18.7071C9.31658 19.0976 8.68342 19.0976 8.29289 18.7071L3.29289 13.7071C2.90237 13.3166 2.90237 12.6834 3.29289 12.2929C3.68342 11.9024 4.31658 11.9024 4.70711 12.2929L9 16.5858L19.2929 6.29289C19.6834 5.90237 20.3166 5.90237 20.7071 6.29289Z"
+        d="M12 22C7.28595 22 4.92893 22 3.46447 20.5355C2 19.0711 2 16.714 2 12C2 7.28595 2 4.92893 3.46447 3.46447C4.92893 2 7.28595 2 12 2C16.714 2 19.0711 2 20.5355 3.46447C22 4.92893 22 7.28595 22 12C22 16.714 22 19.0711 20.5355 20.5355C19.0711 22 16.714 22 12 22ZM16.2929 8.70711C16.6834 9.09763 16.6834 9.7308 16.2929 10.1213L10.1213 16.2929C9.73072 16.6834 9.09755 16.6834 8.70703 16.2929L6.70703 14.2929C6.3165 13.9024 6.3165 13.2692 6.70703 12.8787C7.09755 12.4882 7.73072 12.4882 8.12124 12.8787L9.41413 14.1716L14.8787 8.70711C15.2692 8.31658 15.9024 8.31658 16.2929 8.70711Z"
       />
     </BaseIcon>
   );

frontend/src/icons/CloseIcon.tsx

@@ -12,7 +12,7 @@ export function CloseIcon({ size = 24, className = '', disabled = false }: Close
       <path
         fillRule="evenodd"
         clipRule="evenodd"
-        d="M5.46967 5.46967C5.76256 5.17678 6.23744 5.17678 6.53033 5.46967L12 10.9393L17.4697 5.46967C17.7626 5.17678 18.2374 5.17678 18.5303 5.46967C18.8232 5.76256 18.8232 6.23744 18.5303 6.53033L13.0607 12L18.5303 17.4697C18.8232 17.7626 18.8232 18.2374 18.5303 18.5303C18.2374 18.8232 17.7626 18.8232 17.4697 18.5303L12 13.0607L6.53033 18.5303C6.23744 18.8232 5.76256 18.8232 5.46967 18.5303C5.17678 18.2374 5.17678 17.7626 5.46967 17.4697L10.9393 12L5.46967 6.53033C5.17678 6.23744 5.17678 5.76256 5.46967 5.46967Z"
+        d="M12 22C7.28595 22 4.92893 22 3.46447 20.5355C2 19.0711 2 16.714 2 12C2 7.28595 2 4.92893 3.46447 3.46447C4.92893 2 7.28595 2 12 2C16.714 2 19.0711 2 20.5355 3.46447C22 4.92893 22 7.28595 22 12C22 16.714 22 19.0711 20.5355 20.5355C19.0711 22 16.714 22 12 22ZM8.46967 8.46967C8.17678 8.16256 8.17678 7.68744 8.46967 7.39455C8.76256 7.10166 9.23744 7.10166 9.53033 7.39455L12 9.86422L14.4697 7.39455C14.7626 7.10166 15.2374 7.10166 15.5303 7.39455C15.8232 7.68744 15.8232 8.16256 15.5303 8.46967L13.0607 10.9393L15.5303 13.409C15.8232 13.7019 15.8232 14.1768 15.5303 14.4697C15.2374 14.7626 14.7626 14.7626 14.4697 14.4697L12 12L9.53033 14.4697C9.23744 14.7626 8.76256 14.7626 8.46967 14.4697C8.17678 14.1768 8.17678 13.7019 8.46967 13.409L10.9393 10.9393L8.46967 8.46967Z"
       />
     </BaseIcon>
   );

frontend/src/pages/DocumentPage.tsx

@@ -159,54 +159,54 @@ export default function DocumentPage() {
               </div>
             </div>
 
+            {/* Edit Cover Dropdown */}
+            <div className="relative">
+              <input
+                type="checkbox"
+                id="edit-cover-checkbox"
+                className="hidden"
+                checked={showEditCover}
+                onChange={e => setShowEditCover(e.target.checked)}
+              />
+              <div
+                className={`absolute left-0 top-0 z-30 flex flex-col gap-2 rounded bg-gray-200 p-3 shadow-lg transition-all duration-200 dark:bg-gray-600 ${
+                  showEditCover ? 'opacity-100' : 'pointer-events-none opacity-0'
+                }`}
+              >
+                <form className="flex w-72 flex-col gap-2 text-sm text-black dark:text-white">
+                  <input
+                    type="file"
+                    id="cover_file"
+                    name="cover_file"
+                    className="bg-gray-300 p-2"
+                  />
+                  <button
+                    type="submit"
+                    className="rounded bg-blue-700 px-2 py-1 text-sm font-medium text-white hover:bg-blue-800 dark:bg-blue-600"
+                  >
+                    Upload Cover
+                  </button>
+                </form>
+                <form className="flex w-72 flex-col gap-2 text-sm text-black dark:text-white">
+                  <input
+                    type="checkbox"
+                    checked
+                    id="remove_cover"
+                    name="remove_cover"
+                    className="hidden"
+                  />
+                  <button
+                    type="submit"
+                    className="rounded bg-blue-700 px-2 py-1 text-sm font-medium text-white hover:bg-blue-800 dark:bg-blue-600"
+                  >
+                    Remove Cover
+                  </button>
+                </form>
+              </div>
+            </div>
+
             {/* Icons Container */}
             <div className="relative my-auto flex grow justify-between text-gray-500 dark:text-gray-500">
-              {/* Edit Cover Dropdown */}
-              <div className="relative">
-                <input
-                  type="checkbox"
-                  id="edit-cover-checkbox"
-                  className="hidden"
-                  checked={showEditCover}
-                  onChange={e => setShowEditCover(e.target.checked)}
-                />
-                <div
-                  className={`absolute left-0 top-0 z-30 flex flex-col gap-2 rounded bg-gray-200 p-3 shadow-lg transition-all duration-200 dark:bg-gray-600 ${
-                    showEditCover ? 'opacity-100' : 'pointer-events-none opacity-0'
-                  }`}
-                >
-                  <form className="flex w-72 flex-col gap-2 text-sm text-black dark:text-white">
-                    <input
-                      type="file"
-                      id="cover_file"
-                      name="cover_file"
-                      className="bg-gray-300 p-2"
-                    />
-                    <button
-                      type="submit"
-                      className="rounded bg-blue-700 px-2 py-1 text-sm font-medium text-white hover:bg-blue-800 dark:bg-blue-600"
-                    >
-                      Upload Cover
-                    </button>
-                  </form>
-                  <form className="flex w-72 flex-col gap-2 text-sm text-black dark:text-white">
-                    <input
-                      type="checkbox"
-                      checked
-                      id="remove_cover"
-                      name="remove_cover"
-                      className="hidden"
-                    />
-                    <button
-                      type="submit"
-                      className="rounded bg-blue-700 px-2 py-1 text-sm font-medium text-white hover:bg-blue-800 dark:bg-blue-600"
-                    >
-                      Remove Cover
-                    </button>
-                  </form>
-                </div>
-              </div>
-
               {/* Delete Button */}
               <div className="relative">
                 <button
@@ -320,7 +320,7 @@ export default function DocumentPage() {
                 <FieldLabel>Title</FieldLabel>
                 <FieldActions>
                   {isEditingTitle ? (
-                    <>
+                    <div className="flex gap-1">
                       <button
                         type="button"
                         onClick={() => setIsEditingTitle(false)}
@@ -337,7 +337,7 @@ export default function DocumentPage() {
                       >
                         <CheckIcon size={18} />
                       </button>
-                    </>
+                    </div>
                   ) : (
                     <button
                       type="button"
@@ -361,7 +361,7 @@ export default function DocumentPage() {
                   type="text"
                   value={editTitle}
                   onChange={e => setEditTitle(e.target.value)}
-                  className="grow rounded border border-blue-200 bg-blue-50 p-2 text-lg font-medium text-black focus:outline-none focus:ring-2 focus:ring-blue-400 dark:border-blue-700 dark:bg-blue-900/20 dark:text-white dark:focus:ring-blue-500"
+                  className="w-full rounded border border-blue-200 bg-blue-50 p-2 text-lg font-medium text-black focus:outline-none focus:ring-2 focus:ring-blue-400 dark:border-blue-700 dark:bg-blue-900/20 dark:text-white dark:focus:ring-blue-500"
                 />
               </div>
             ) : (
@@ -418,7 +418,7 @@ export default function DocumentPage() {
                   type="text"
                   value={editAuthor}
                   onChange={e => setEditAuthor(e.target.value)}
-                  className="grow rounded border border-blue-200 bg-blue-50 p-2 text-lg font-medium text-black focus:outline-none focus:ring-2 focus:ring-blue-400 dark:border-blue-700 dark:bg-blue-900/20 dark:text-white dark:focus:ring-blue-500"
+                  className="w-full rounded border border-blue-200 bg-blue-50 p-2 text-lg font-medium text-black focus:outline-none focus:ring-2 focus:ring-blue-400 dark:border-blue-700 dark:bg-blue-900/20 dark:text-white dark:focus:ring-blue-500"
                 />
               </div>
             ) : (