Fix Context Menu Titles

components/boards/boards.tsx

@@ -5,9 +5,9 @@ import { Droppable, Draggable, DragDropContext } from 'react-beautiful-dnd';
 import { capWords, dev, formatDate, generateUniqueID, replaceAll, StateContext } from '../../pages/_app';
 
 export enum ItemTypes {
-    Task = `Task`,
     Item = `Item`,
     Image = `Image`,
+    // Task = `Task`,
     // Video = `Video`,
 }
 

components/boards/column.tsx

@@ -1,6 +1,5 @@
 import Tasks from './tasks';
 import { ItemTypes } from './boards';
-import 'react-circular-progressbar/dist/styles.css';
 import React, { useContext, useState } from 'react';
 import Item, { getTypeIcon, manageItem } from './item';
 import { Droppable, Draggable } from 'react-beautiful-dnd';

components/boards/item.tsx

@@ -30,16 +30,16 @@ export const getTypeIcon = (type, plain?) => {
     switch (type) {
         default:
             return `+`;
-        case ItemTypes.Task:
-            if (plain) {
-                return `✔`
-            } else {
-                return (
-                    <span style={{fontSize: 20, textAlign: `center`}}>
-                        ✔
-                    </span>
-                );
-            }
+        // case ItemTypes.Task:
+        //     if (plain) {
+        //         return `✔`
+        //     } else {
+        //         return (
+        //             <span style={{fontSize: 20, textAlign: `center`}}>
+        //                 ✔
+        //             </span>
+        //         );
+        //     }
         case ItemTypes.Image:
             return <i style={{display: `contents`}} className={`fas fa-image`} />;
         // case ItemTypes.Video:
@@ -223,7 +223,7 @@ export default function Item({ item, count, column, itemIndex, board, setBoard }
         <div id={`itemElement_${item.id}`} className={`itemComponent itemInnerRow flex row`} onContextMenu={(e) => onRightClick(e, item, column)}>
             <span className={`itemOrder rowIndexOrder`}>
                 <i className={`itemIndex ${item.complete ? `completedIndex` : `activeIndex`}`}>
-                    {(item?.type == ItemTypes.Item || item?.type == ItemTypes.Task) && (
+                    {(item?.type == ItemTypes.Item) && (
                         <span className={`itemIconType ${item?.type}`}>
                             {getTypeIcon(item?.type, true)}
                         </span>

components/context-menus/context-menu.tsx

@@ -31,6 +31,11 @@ export default function ContextMenu({ menuRef, menuPosition, iconColor = `var(--
         selected?.onDeleteItem(e);
     }
 
+    const itemTitle = (item?) => {
+        let title = item?.title || item?.content;
+        return title;
+    }
+
     const copyToClipBoard = () => {
         if (navigator.clipboard) {
             navigator.clipboard.writeText(selected?.item?.title);
@@ -88,9 +93,9 @@ export default function ContextMenu({ menuRef, menuPosition, iconColor = `var(--
             }}
         >
             <ul className={`customContextMenuOptions`}>
-                <li title={selected?.item?.title} className={`menuTitleRow customContextMenuOption flex gap15 disabledOption`} onClick={() => onClose()}>
+                <li title={itemTitle(selected?.item)} className={`menuTitleRow customContextMenuOption flex gap15 disabledOption`} onClick={() => onClose()}>
                     <span style={{ maxWidth: 120 }} className={`textOverflow`}>
-                        {selected?.item?.title?.toUpperCase()}
+                        {itemTitle(selected?.item)?.toUpperCase()}
                     </span>
                 </li>
                 <li className={`customContextMenuOption flex gap15`} onClick={() => onClose()}>

main.scss

@@ -1,5 +1,6 @@
 @use './styles/toast';
 @use './styles/image';
+@use './styles/utility';
 @use './styles/columns';
 @use './styles/contextmenu';
 @use './styles/itemsoverwrite';

shared/database.ts

@@ -1 +1 @@
-export const dbBoards = [{"created":"6:03 PM 5/27/2023","expanded":true,"name":"Try Dragging Me","columnOrder":["column_1_6_03_PM_5_27_2023_vua19vc5d","column_2_6_03_PM_5_27_2023_z6mtlms7c"],"columns":{"column_1_6_03_PM_5_27_2023_vua19vc5d":{"id":"column_1_6_03_PM_5_27_2023_vua19vc5d","title":"active","itemIds":["item_3_6_13_PM_5_27_2023_27vnmb2j2","item_3_6_15_PM_5_27_2023_lvza6sitz"],"itemType":"Item"},"column_2_6_03_PM_5_27_2023_z6mtlms7c":{"id":"column_2_6_03_PM_5_27_2023_z6mtlms7c","title":"complete","itemIds":["item_3_6_13_PM_5_27_2023_942tumtrc","item_1_6_08_PM_5_27_2023_s2egf8yu6","item_1_6_06_PM_5_27_2023_gqfn5z8cr"],"itemType":"Image"}},"id":"board_1_6_03_PM_5_27_2023_q1nmnvrpp","titleWidth":"207.5px","items":{"item_1_6_06_PM_5_27_2023_gqfn5z8cr":{"image":"","video":"","id":"item_1_6_06_PM_5_27_2023_gqfn5z8cr","subtasks":[{"id":"subtask_1_6_06_PM_5_27_2023_20jn2tf20","complete":true,"task":"Netflix","created":"6:06 PM 5/27/2023","updated":"6:08 PM 5/27/2023"},{"id":"subtask_4_6_06_PM_5_27_2023_fslx5f05w","complete":true,"task":"Car","created":"6:06 PM 5/27/2023","updated":"6:08 PM 5/27/2023"},{"id":"subtask_5_6_06_PM_5_27_2023_b7ji8l1se","complete":true,"task":"House","created":"6:06 PM 5/27/2023","updated":"6:08 PM 5/27/2023"}],"complete":true,"type":"Task","created":"6:06 PM 5/27/2023","content":"Pay Bills","updated":"6:08 PM 5/27/2023"},"item_1_6_08_PM_5_27_2023_s2egf8yu6":{"image":"","video":"","id":"item_1_6_08_PM_5_27_2023_s2egf8yu6","subtasks":[],"complete":true,"type":"Item","created":"6:08 PM 5/27/2023","content":"Testing New Board","updated":"6:08 PM 5/27/2023"},"item_3_6_13_PM_5_27_2023_942tumtrc":{"image":"","video":"","id":"item_3_6_13_PM_5_27_2023_942tumtrc","subtasks":[{"id":"subtask_1_6_13_PM_5_27_2023_w3ddkmv48","complete":false,"task":"Sub Task One","created":"6:13 PM 5/27/2023"},{"id":"subtask_2_6_17_PM_5_27_2023_3970zp8nd","complete":true,"task":"Completed Subtask","created":"6:17 PM 5/27/2023","updated":"6:17 PM 5/27/2023"}],"complete":false,"type":"Task","created":"6:13 PM 5/27/2023","content":"Create Subtasks","updated":"6:17 PM 5/27/2023"},"item_3_6_13_PM_5_27_2023_27vnmb2j2":{"image":"","video":"","id":"item_3_6_13_PM_5_27_2023_27vnmb2j2","subtasks":[],"complete":false,"type":"Item","created":"6:13 PM 5/27/2023","content":"Try Dragging Me","updated":"6:17 PM 5/27/2023"},"item_3_6_15_PM_5_27_2023_lvza6sitz":{"image":"https://user-images.githubusercontent.com/2182637/53614150-efbed780-3c2c-11e9-9204-a5d2e746faca.gif","video":"","id":"item_3_6_15_PM_5_27_2023_lvza6sitz","subtasks":[],"complete":false,"type":"Image","created":"6:15 PM 5/27/2023","content":"Or Add An Image","updated":"6:17 PM 5/27/2023"}},"updated":"6:17 PM 5/27/2023"},{"created":"6:09 PM 5/27/2023","expanded":true,"name":"Another Board To Drag","columnOrder":["column_1_6_09_PM_5_27_2023_zpcan4deb","list_3_6_10_PM_5_27_2023_wlcimzlua"],"columns":{"column_1_6_09_PM_5_27_2023_zpcan4deb":{"id":"column_1_6_09_PM_5_27_2023_zpcan4deb","title":"You Can Drag Columns","itemIds":["item_1_6_11_PM_5_27_2023_y2vtop14o","item_2_6_18_PM_5_27_2023_n458lp2jj","item_3_6_19_PM_5_27_2023_58qpoeyi0"],"itemType":"Item","updated":"6:10 PM 5/27/2023"},"list_3_6_10_PM_5_27_2023_wlcimzlua":{"id":"list_3_6_10_PM_5_27_2023_wlcimzlua","title":"And Make New Ones","itemIds":["item_2_6_14_PM_5_27_2023_wie8q2ts3","item_2_6_18_PM_5_27_2023_cl6xfeisp","item_3_6_19_PM_5_27_2023_jx025dtp9"],"itemType":"Item","updated":"6:15 PM 5/27/2023"}},"id":"board_2_6_09_PM_5_27_2023_op1nautzv","titleWidth":"258.5px","items":{"item_1_6_11_PM_5_27_2023_y2vtop14o":{"image":"","video":"","id":"item_1_6_11_PM_5_27_2023_y2vtop14o","subtasks":[],"complete":true,"type":"Item","created":"6:11 PM 5/27/2023","content":"You Can Have Completed Items In Any Column","updated":"6:14 PM 5/27/2023"},"item_2_6_14_PM_5_27_2023_wie8q2ts3":{"image":"","video":"","id":"item_2_6_14_PM_5_27_2023_wie8q2ts3","subtasks":[],"complete":false,"type":"Item","created":"6:14 PM 5/27/2023","content":"Click Me To Manage An Item Or To Rename","updated":"6:14 PM 5/27/2023"},"item_2_6_18_PM_5_27_2023_n458lp2jj":{"image":"","video":"","id":"item_2_6_18_PM_5_27_2023_n458lp2jj","subtasks":[],"complete":false,"type":"Item","created":"6:18 PM 5/27/2023","content":"You Can Manage Tasks Or Create Lists In Any Order You Prefer!"},"item_2_6_18_PM_5_27_2023_cl6xfeisp":{"image":"","video":"","id":"item_2_6_18_PM_5_27_2023_cl6xfeisp","subtasks":[],"complete":false,"type":"Image","created":"6:18 PM 5/27/2023","content":"You Can Click A Board To Expand That Board Or Focus On It"},"item_3_6_19_PM_5_27_2023_jx025dtp9":{"image":"","video":"","id":"item_3_6_19_PM_5_27_2023_jx025dtp9","subtasks":[],"complete":false,"type":"Item","created":"6:19 PM 5/27/2023","content":"Also You Can Click To Collapse A Board Entirely Until You Are Ready To Open It Back Up Again"},"item_3_6_19_PM_5_27_2023_58qpoeyi0":{"image":"","video":"","id":"item_3_6_19_PM_5_27_2023_58qpoeyi0","subtasks":[],"complete":false,"type":"Item","created":"6:19 PM 5/27/2023","content":"Create Rankings And Reorder Them With Dynamic Sorting Indexes"}},"updated":"6:19 PM 5/27/2023"}];
+export const dbBoards = [{"created":"6:03 PM 5/27/2023","expanded":true,"name":"Example Draggable Board","columnOrder":["column_1_6_03_PM_5_27_2023_vua19vc5d","column_2_6_03_PM_5_27_2023_z6mtlms7c"],"columns":{"column_1_6_03_PM_5_27_2023_vua19vc5d":{"id":"column_1_6_03_PM_5_27_2023_vua19vc5d","title":"active","itemIds":["item_3_6_13_PM_5_27_2023_27vnmb2j2","item_3_6_15_PM_5_27_2023_lvza6sitz"],"itemType":"Item"},"column_2_6_03_PM_5_27_2023_z6mtlms7c":{"id":"column_2_6_03_PM_5_27_2023_z6mtlms7c","title":"complete","itemIds":["item_3_6_13_PM_5_27_2023_942tumtrc","item_1_6_08_PM_5_27_2023_s2egf8yu6","item_1_6_06_PM_5_27_2023_gqfn5z8cr"],"itemType":"Image"}},"id":"board_1_6_03_PM_5_27_2023_q1nmnvrpp","titleWidth":"207.5px","items":{"item_1_6_06_PM_5_27_2023_gqfn5z8cr":{"image":"","video":"","id":"item_1_6_06_PM_5_27_2023_gqfn5z8cr","subtasks":[{"id":"subtask_1_6_06_PM_5_27_2023_20jn2tf20","complete":true,"task":"Netflix","created":"6:06 PM 5/27/2023","updated":"6:08 PM 5/27/2023"},{"id":"subtask_4_6_06_PM_5_27_2023_fslx5f05w","complete":true,"task":"Car","created":"6:06 PM 5/27/2023","updated":"6:08 PM 5/27/2023"},{"id":"subtask_5_6_06_PM_5_27_2023_b7ji8l1se","complete":true,"task":"House","created":"6:06 PM 5/27/2023","updated":"6:08 PM 5/27/2023"}],"complete":true,"type":"Task","created":"6:06 PM 5/27/2023","content":"Pay Bills","updated":"6:08 PM 5/27/2023"},"item_1_6_08_PM_5_27_2023_s2egf8yu6":{"image":"","video":"","id":"item_1_6_08_PM_5_27_2023_s2egf8yu6","subtasks":[],"complete":true,"type":"Item","created":"6:08 PM 5/27/2023","content":"Testing New Board","updated":"6:08 PM 5/27/2023"},"item_3_6_13_PM_5_27_2023_942tumtrc":{"image":"","video":"","id":"item_3_6_13_PM_5_27_2023_942tumtrc","subtasks":[{"id":"subtask_1_6_13_PM_5_27_2023_w3ddkmv48","complete":false,"task":"Sub Task One","created":"6:13 PM 5/27/2023"},{"id":"subtask_2_6_17_PM_5_27_2023_3970zp8nd","complete":true,"task":"Completed Subtask","created":"6:17 PM 5/27/2023","updated":"6:17 PM 5/27/2023"}],"complete":false,"type":"Task","created":"6:13 PM 5/27/2023","content":"Create Subtasks","updated":"6:17 PM 5/27/2023"},"item_3_6_13_PM_5_27_2023_27vnmb2j2":{"image":"","video":"","id":"item_3_6_13_PM_5_27_2023_27vnmb2j2","subtasks":[],"complete":false,"type":"Item","created":"6:13 PM 5/27/2023","content":"Try Dragging Me","updated":"6:17 PM 5/27/2023"},"item_3_6_15_PM_5_27_2023_lvza6sitz":{"image":"https://user-images.githubusercontent.com/2182637/53614150-efbed780-3c2c-11e9-9204-a5d2e746faca.gif","video":"","id":"item_3_6_15_PM_5_27_2023_lvza6sitz","subtasks":[],"complete":false,"type":"Image","created":"6:15 PM 5/27/2023","content":"Or Add An Image","updated":"6:17 PM 5/27/2023"}},"updated":"6:17 PM 5/27/2023"},{"created":"6:09 PM 5/27/2023","expanded":false,"name":"Draggable Board 2","columnOrder":["column_1_6_09_PM_5_27_2023_zpcan4deb","list_3_6_10_PM_5_27_2023_wlcimzlua"],"columns":{"column_1_6_09_PM_5_27_2023_zpcan4deb":{"id":"column_1_6_09_PM_5_27_2023_zpcan4deb","title":"You Can Drag Columns","itemIds":["item_1_6_11_PM_5_27_2023_y2vtop14o","item_2_6_18_PM_5_27_2023_n458lp2jj","item_3_6_19_PM_5_27_2023_58qpoeyi0"],"itemType":"Item","updated":"6:10 PM 5/27/2023"},"list_3_6_10_PM_5_27_2023_wlcimzlua":{"id":"list_3_6_10_PM_5_27_2023_wlcimzlua","title":"And Make New Ones","itemIds":["item_2_6_14_PM_5_27_2023_wie8q2ts3","item_2_6_18_PM_5_27_2023_cl6xfeisp","item_3_6_19_PM_5_27_2023_jx025dtp9"],"itemType":"Item","updated":"6:15 PM 5/27/2023"}},"id":"board_2_6_09_PM_5_27_2023_op1nautzv","titleWidth":"258.5px","items":{"item_1_6_11_PM_5_27_2023_y2vtop14o":{"image":"","video":"","id":"item_1_6_11_PM_5_27_2023_y2vtop14o","subtasks":[],"complete":true,"type":"Item","created":"6:11 PM 5/27/2023","content":"You Can Have Completed Items In Any Column","updated":"6:14 PM 5/27/2023"},"item_2_6_14_PM_5_27_2023_wie8q2ts3":{"image":"","video":"","id":"item_2_6_14_PM_5_27_2023_wie8q2ts3","subtasks":[],"complete":false,"type":"Item","created":"6:14 PM 5/27/2023","content":"Click Me To Manage An Item Or To Rename","updated":"6:14 PM 5/27/2023"},"item_2_6_18_PM_5_27_2023_n458lp2jj":{"image":"","video":"","id":"item_2_6_18_PM_5_27_2023_n458lp2jj","subtasks":[],"complete":false,"type":"Item","created":"6:18 PM 5/27/2023","content":"You Can Manage Tasks Or Create Lists In Any Order You Prefer!"},"item_2_6_18_PM_5_27_2023_cl6xfeisp":{"image":"","video":"","id":"item_2_6_18_PM_5_27_2023_cl6xfeisp","subtasks":[],"complete":false,"type":"Image","created":"6:18 PM 5/27/2023","content":"You Can Click A Board To Expand That Board Or Focus On It"},"item_3_6_19_PM_5_27_2023_jx025dtp9":{"image":"","video":"","id":"item_3_6_19_PM_5_27_2023_jx025dtp9","subtasks":[],"complete":false,"type":"Item","created":"6:19 PM 5/27/2023","content":"Also You Can Click To Collapse A Board Entirely Until You Are Ready To Open It Back Up Again"},"item_3_6_19_PM_5_27_2023_58qpoeyi0":{"image":"","video":"","id":"item_3_6_19_PM_5_27_2023_58qpoeyi0","subtasks":[],"complete":false,"type":"Item","created":"6:19 PM 5/27/2023","content":"Create Rankings And Reorder Them With Dynamic Sorting Indexes"}},"updated":"6:19 PM 5/27/2023"}];

styles/_itemsoverwrite.scss

@@ -22,6 +22,17 @@
     max-width: 100px;
 }
 
+.disabledIconBtn {
+    pointer-events: none;
+}
+
+.boardOptionsRow {
+    transition: var(--transition);
+    &.collapsedBoardOptionsRow {
+        max-width: fit-content !important;
+    }
+}
+
 .itemTypesMenu {
     .itemTypeIconRow {
         grid-gap: 5px;

styles/_utility.scss

@@ -0,0 +1,9 @@
+.stretch {
+    --fullWidth: 100% !important;
+    width: var(--fullWidth) !important;
+    min-width: var(--fullWidth) !important;
+    max-width: var(--fullWidth) !important;
+    &.boardIndexAndTitle {
+        --fullWidth: 83% !important;
+    }
+}