docs(docs): add Approach and Explanation sections with mermaid diagrams to problem pages

apps/docs/content/(hash-table)/451-sort-characters-by-frequency.mdx

@@ -28,6 +28,18 @@ sidebar:
 - `1 <= s.length <= 5 * 10^5`
 - `s` consists of uppercase and lowercase English letters and digits.
 
+## Approach
+
+```mermaid
+flowchart TD
+  S(["frequencySort(s)"]) --> F["freq: count every char of s"]
+  F --> C["split s and sort with a two-key comparator"]
+  C --> K1["primary: freq[b] - freq[a] — most frequent first"]
+  C --> K2["tie-break: a.localeCompare(b) — alphabetical"]
+  K1 --> R(["join and return"])
+  K2 --> R
+```
+
 ## Solution
 
 ```js
@@ -47,3 +59,7 @@ var frequencySort = function (s) {
     .join("");
 };
 ```
+
+## Explanation
+
+<YouTube id="OXdXc9HTrIg" title="Sort Characters By Frequency - Leetcode 451 - Python" />