Implement note rules

So we may specify regex rules to map to notes

frontend/src/components/Header.tsx

@@ -98,23 +98,23 @@ export const Header = ({ title, breadcrumbs = [] }: HeaderProps) => {
       <div className="flex items-center justify-between">
         <h1 className="text-2xl font-bold text-white">{title}</h1>
         <div className="flex items-center gap-3">
+          <Button size="sm" variant="outline" className="border-purple-500/40 text-purple-200" onClick={() => navigate('/settings/signature-rules')}>Rules</Button>
           {chars.length > 0 && (
-            <div 
+            <div
               className="grid gap-1 flex-1 justify-end"
-              style={{ 
+              style={{
                 gridTemplateColumns: `repeat(${Math.ceil(chars.length / 2)}, 1fr)`,
                 gridTemplateRows: 'repeat(2, auto)'
               }}
             >
               {chars.map((c) => (
-                <span 
-                  key={c.character_id} 
+                <span
+                  key={c.character_id}
                   onClick={() => handleCharacterClick(c)}
-                  className={`px-3 py-1 text-xs cursor-pointer transition-colors text-center overflow-hidden text-ellipsis ${
-                    c.waypoint_enabled 
-                      ? 'bg-purple-500/20 text-purple-200 border border-purple-400/40 hover:bg-purple-500/30' 
+                  className={`px-3 py-1 text-xs cursor-pointer transition-colors text-center overflow-hidden text-ellipsis ${c.waypoint_enabled
+                      ? 'bg-purple-500/20 text-purple-200 border border-purple-400/40 hover:bg-purple-500/30'
                       : 'bg-gray-500/20 text-gray-400 border border-gray-400/40 hover:bg-gray-500/30'
-                  }`}
+                    }`}
                   title={`Click to ${c.waypoint_enabled ? 'disable' : 'enable'} waypoints for ${c.character_name}`}
                 >
                   {c.character_name}