\n {editingRule.id ? 'Edit Rule' : 'New Rule'}\n

\n \n {/* Rule name */}\n

\n Rule Name\n updateRuleField('name', e.target.value)}\n className=\"w-full p-2 border border-gray-300 dark:border-gray-600 rounded dark:bg-gray-800\"\n />\n

\n \n {/* Condition type */}\n

\n Condition Type\n updateRuleField('condition.type', e.target.value)}\n className=\"w-full p-2 border border-gray-300 dark:border-gray-600 rounded dark:bg-gray-800\"\n >\n \n \n \n \n \n

\n \n {/* Condition value */}\n

\n Condition Value\n {editingRule.condition.type === 'property' ? (\n updateRuleField('condition.value', e.target.value)}\n className=\"w-full p-2 border border-gray-300 dark:border-gray-600 rounded dark:bg-gray-800\"\n >\n \n \n \n \n \n ) : (\n updateRuleField('condition.value', e.target.value)}\n className=\"w-full p-2 border border-gray-300 dark:border-gray-600 rounded dark:bg-gray-800\"\n placeholder={\n editingRule.condition.type === 'title'\n ? 'e.g., \"Meeting\" or \"Flight\"'\n : editingRule.condition.type === 'calendar'\n ? 'Calendar ID or email'\n : 'Custom expression'\n }\n />\n )}\n

\n \n {/* Format options */}\n

Formatting

\n \n {/* Background color */}\n

\n Background Color:\n updateRuleField('format.backgroundColor', e.target.value)}\n className=\"p-1 border border-gray-300 dark:border-gray-600 rounded\"\n />\n

\n \n {/* Text color */}\n

\n Text Color:\n updateRuleField('format.textColor', e.target.value)}\n className=\"p-1 border border-gray-300 dark:border-gray-600 rounded\"\n />\n

\n \n {/* Display format */}\n

\n Display Format:\n updateRuleField('format.displayFormat', e.target.value)}\n className=\"w-full p-2 border border-gray-300 dark:border-gray-600 rounded dark:bg-gray-800\"\n placeholder=\"e.g., {flight} or {title}\"\n />\n

\n Use {'{title}'}, {'{location}'}, {'{description}'}, or {'{flight}'} for flights\n

\n \n {/* Visibility */}\n

\n Visible:\n updateRuleField('format.visible', e.target.checked)}\n className=\"p-1 border border-gray-300 dark:border-gray-600 rounded\"\n />\n

\n \n {/* Buttons */}\n

\n setIsEditing(false)}\n className=\"px-4 py-2 bg-gray-300 dark:bg-gray-600 rounded hover:bg-gray-400 dark:hover:bg-gray-500\"\n disabled={isSubmitting}\n >\n Cancel\n \n \n {isSubmitting ? 'Saving...' : 'Save Rule'}\n \n

\n );\n };\n \n // Render a rule in the list\n const renderRuleItem = (rule: FormatRule) => {\n return (\n

{rule.name}

\n handleEditRule(rule)}\n className=\"px-3 py-1 bg-blue-600 text-white rounded hover:bg-blue-700\"\n >\n Edit\n \n rule.id && handleDeleteRule(rule.id)}\n className=\"px-3 py-1 bg-red-600 text-white rounded hover:bg-red-700\"\n >\n Delete\n \n

\n \n

\n Condition: {getConditionDescription(rule.condition)}\n

\n Format:\n

\n Background\n \n

\n Text\n \n {rule.format.displayFormat && (\n \n Format: {rule.format.displayFormat}\n \n )}\n \n {rule.format.visible === false && (\n \n Hidden\n \n )}\n

\n );\n };\n \n // Get a human-readable description of a condition\n const getConditionDescription = (condition: RuleCondition): string => {\n switch (condition.type) {\n case 'title':\n return `Title contains \"${condition.value}\"`;\n case 'calendar':\n return `Calendar is \"${condition.value}\"`;\n case 'property':\n return `Event is ${condition.value.replace('-', ' ')}`;\n case 'custom':\n return `Custom: \"${condition.value}\"`;\n default:\n return 'Unknown condition';\n }\n };\n \n return (\n

Format Rules

\n {!isEditing && (\n \n Add Rule\n \n )}\n

\n \n {isEditing ? (\n renderRuleEditor()\n ) : (\n

\n {rules.length === 0 ? (\n

\n No format rules yet. Click \"Add Rule\" to create one.\n

\n ) : (\n rules.map(renderRuleItem)\n )}\n

\n )}\n

\n );\n};\n\nexport default FormatRules;","deleted","label",[169,170,171,150],"frontend","components","settings","permalink","https://www.val.town/x/malcolmocean/FlexCal/code/frontend/components/settings/FormatRules.tsx","extension","actionData","errors"]