Rework Classes/Character Override options UI

- Fix checkbox/button click sound never playing: the sound hook was
  installed before the real OnClick handler, which SetScript then
  silently overwrote. Apply the click-sound hook after each button's
  real handler instead, and extend it to Hide All/Show All and the
  class tabs.
- Split the single bordered box around the Classes tab list and
  checkbox content into two separate boxes with a 3px gap, remove the
  bright edge texture, and lower the fill alpha so it reads closer to
  LootCollector's panel styling.
- Show "Name - Realm" above the Character Override checkbox and drop
  its trailing period.
- Add breathing room around the class name label and tab list.

Options.lua

@@ -4,6 +4,36 @@ if ElvUI then
     ElvSkins = E:GetModule("Skins")
 end
 
+local function AddClickSound(button)
+    button:HookScript("OnClick", function()
+        PlaySound("igMainMenuOptionCheckBoxOn")
+    end)
+end
+
+local function AddCheckboxFeedback(check)
+
+    check:HookScript("OnClick", function()
+        PlaySound("igMainMenuOptionCheckBoxOn")
+    end)
+
+    local text = _G[check:GetName() .. "Text"]
+
+    if text then
+
+        local point, relativeTo, relativePoint, xOfs, yOfs = text:GetPoint()
+
+        check:HookScript("OnMouseDown", function()
+            text:SetPoint(point, relativeTo, relativePoint, xOfs + 1, yOfs - 2)
+        end)
+
+        check:HookScript("OnMouseUp", function()
+            text:SetPoint(point, relativeTo, relativePoint, xOfs, yOfs)
+        end)
+
+    end
+
+end
+
 local panel = CreateFrame("Frame")
 panel.name = "HideCoAUI"
 
@@ -11,41 +41,27 @@ local title = panel:CreateFontString(nil, "ARTWORK", "GameFontNormalLarge")
 title:SetPoint("TOPLEFT", 16, -16)
 title:SetText("HideCoAUI")
 
-local sidebar = CreateFrame("Frame", nil, panel)
+local titleFont, titleSize = title:GetFont()
-sidebar:SetPoint("TOPLEFT", title, "BOTTOMLEFT", 0, -20)
-sidebar:SetPoint("BOTTOMLEFT", panel, "BOTTOMLEFT", 16, 16)
-sidebar:SetWidth(150)
 
-local content = CreateFrame("Frame", nil, panel)
+InterfaceOptions_AddCategory(panel)
-content:SetPoint("TOPLEFT", sidebar, "TOPRIGHT", 16, 0)
-content:SetPoint("BOTTOMRIGHT", panel, "BOTTOMRIGHT", -16, 16)
 
-local classesContent = CreateFrame("Frame", nil, content)
+-- CLASSES SUBCATEGORY --
-classesContent:SetAllPoints(content)
 
-local characterOverrideContent = CreateFrame("Frame", nil, content)
+local classesPanel = CreateFrame("Frame")
-characterOverrideContent:SetAllPoints(content)
+classesPanel.name = "Classes"
-characterOverrideContent:Hide()
+classesPanel.parent = panel.name
 
-local aboutContent = CreateFrame("Frame", nil, content)
+local classesTitle = classesPanel:CreateFontString(nil, "ARTWORK", "GameFontNormalLarge")
-aboutContent:SetAllPoints(content)
+classesTitle:SetPoint("TOPLEFT", 16, -16)
-aboutContent:Hide()
-
--- CLASSES TAB --
-
-local classesTitle = classesContent:CreateFontString(nil, "ARTWORK", "GameFontNormalLarge")
-classesTitle:SetPoint("TOPLEFT", classesContent, "TOPLEFT", 0, 0)
-
-local titleFont, titleSize = classesTitle:GetFont()
 classesTitle:SetFont(titleFont, titleSize + 4, "OUTLINE")
 classesTitle:SetText("Classes")
 
-local hideAllButton = CreateFrame("Button", "HideCoAHideAllButton", classesContent, "UIPanelButtonTemplate")
+local hideAllButton = CreateFrame("Button", "HideCoAHideAllButton", classesPanel, "UIPanelButtonTemplate")
 hideAllButton:SetPoint("TOPLEFT", classesTitle, "BOTTOMLEFT", 0, -12)
 hideAllButton:SetSize(100, 22)
 hideAllButton:SetText("Hide All")
 
-local showAllButton = CreateFrame("Button", "HideCoAShowAllButton", classesContent, "UIPanelButtonTemplate")
+local showAllButton = CreateFrame("Button", "HideCoAShowAllButton", classesPanel, "UIPanelButtonTemplate")
 showAllButton:SetPoint("LEFT", hideAllButton, "RIGHT", 8, 0)
 showAllButton:SetSize(100, 22)
 showAllButton:SetText("Show All")
@@ -55,24 +71,50 @@ if ElvSkins then
     ElvSkins:HandleButton(showAllButton)
 end
 
-local classDropDown = CreateFrame("Frame", "HideCoAClassDropDown", classesContent, "UIDropDownMenuTemplate")
+local BOX_BACKDROP = {
-classDropDown:SetPoint("TOPLEFT", hideAllButton, "BOTTOMLEFT", -16, -16)
+    bgFile = "Interface\\Tooltips\\UI-Tooltip-Background",
+    tile = true,
+    tileSize = 16,
+    insets = { left = 0, right = 0, top = 0, bottom = 0 },
+}
 
-if ElvSkins then
+local sidebarBox = CreateFrame("Frame", nil, classesPanel)
-    ElvSkins:HandleDropDownBox(classDropDown, 140)
+sidebarBox:SetPoint("TOPLEFT", hideAllButton, "BOTTOMLEFT", 0, -12)
-end
+sidebarBox:SetPoint("BOTTOMLEFT", classesPanel, "BOTTOMLEFT", 0, 8)
+sidebarBox:SetWidth(158)
+
+sidebarBox:SetBackdrop(BOX_BACKDROP)
+sidebarBox:SetBackdropColor(0.08, 0.10, 0.14, 0.5)
+
+local contentBox = CreateFrame("Frame", nil, classesPanel)
+contentBox:SetPoint("TOPLEFT", sidebarBox, "TOPRIGHT", 3, 0)
+contentBox:SetPoint("BOTTOMRIGHT", classesPanel, "BOTTOMRIGHT", -8, 8)
+
+contentBox:SetBackdrop(BOX_BACKDROP)
+contentBox:SetBackdropColor(0.08, 0.10, 0.14, 0.5)
+
+local classSidebar = CreateFrame("Frame", nil, sidebarBox)
+classSidebar:SetPoint("TOPLEFT", sidebarBox, "TOPLEFT", 4, -4)
+classSidebar:SetPoint("BOTTOMRIGHT", sidebarBox, "BOTTOMRIGHT", -4, 4)
+
+local classContent = CreateFrame("Frame", nil, contentBox)
+classContent:SetPoint("TOPLEFT", contentBox, "TOPLEFT", 12, -4)
+classContent:SetPoint("BOTTOMRIGHT", contentBox, "BOTTOMRIGHT", -12, 4)
+
+local classLabel = classContent:CreateFontString(nil, "ARTWORK", "GameFontNormalLarge")
+classLabel:SetPoint("TOPLEFT", classContent, "TOPLEFT", 16, -12)
 
 local checks = {}
 local selectedClass = nil
 
-local previousAnchor = classDropDown
+local previousAnchor = classLabel
-local previousSpacing = -16
+local previousSpacing = -20
-local previousXOffset = 16
 
 for _, frameName in ipairs(HideCoA.FRAMES) do
 
-    local check = CreateFrame("CheckButton", "HideCoAClassCheck" .. frameName, classesContent, "InterfaceOptionsCheckButtonTemplate")
+    local check = CreateFrame("CheckButton", "HideCoAClassCheck" .. frameName, classContent, "InterfaceOptionsCheckButtonTemplate")
-    check:SetPoint("TOPLEFT", previousAnchor, "BOTTOMLEFT", previousXOffset, previousSpacing)
+    check:SetPoint("TOPLEFT", previousAnchor, "BOTTOMLEFT", 0, previousSpacing)
+
     _G[check:GetName() .. "Text"]:SetText("Hide " .. frameName)
 
     check.frameName = frameName
@@ -92,50 +134,79 @@ for _, frameName in ipairs(HideCoA.FRAMES) do
 
     end)
 
+    AddCheckboxFeedback(check)
+
     checks[frameName] = check
     previousAnchor = check
     previousSpacing = -8
-    previousXOffset = 0
 
 end
 
+local tabButtons = {}
+local TAB_HEIGHT = 18
+
 local function SelectClass(class)
 
     selectedClass = class
 
     local displayName = (LOCALIZED_CLASS_NAMES_MALE and LOCALIZED_CLASS_NAMES_MALE[class]) or class
+    classLabel:SetText(displayName)
+
+    local color = RAID_CLASS_COLORS and RAID_CLASS_COLORS[class]
+    if color then
+        classLabel:SetTextColor(color.r, color.g, color.b)
+    else
+        classLabel:SetTextColor(1, 1, 1)
+    end
 
     for _, frameName in ipairs(HideCoA.FRAMES) do
         checks[frameName]:SetChecked(HideCoA.GetActiveClassSettings()[class][frameName])
     end
 
-    UIDropDownMenu_SetText(classDropDown, displayName)
+    for tabClass, button in pairs(tabButtons) do
-
+        if tabClass == class then
-end
+            button.selectedTexture:Show()
-
+        else
-local function ClassDropDown_OnClick(self)
+            button.selectedTexture:Hide()
-    SelectClass(self.value)
+        end
-end
-
-UIDropDownMenu_Initialize(classDropDown, function(self, level)
-
-    for _, class in ipairs(HideCoA.CUSTOM_CLASSES) do
-
-        local displayName = (LOCALIZED_CLASS_NAMES_MALE and LOCALIZED_CLASS_NAMES_MALE[class]) or class
-
-        local info = UIDropDownMenu_CreateInfo()
-        info.text = displayName
-        info.value = class
-        info.func = ClassDropDown_OnClick
-        info.checked = (selectedClass == class)
-
-        UIDropDownMenu_AddButton(info, level)
-
     end
 
-end)
+end
 
-UIDropDownMenu_SetWidth(classDropDown, 140)
+for index, class in ipairs(HideCoA.CUSTOM_CLASSES) do
+
+    local button = CreateFrame("Button", "HideCoAClassTab" .. class, classSidebar)
+    button:SetHeight(TAB_HEIGHT)
+    button:SetPoint("TOPLEFT", classSidebar, "TOPLEFT", 4, -4 - (index - 1) * TAB_HEIGHT)
+    button:SetPoint("RIGHT", classSidebar, "RIGHT", -4, 0)
+
+    local selectedTexture = button:CreateTexture(nil, "BACKGROUND")
+    selectedTexture:SetAllPoints()
+    selectedTexture:SetTexture(1, 1, 1, 0.2)
+    selectedTexture:Hide()
+    button.selectedTexture = selectedTexture
+
+    button:SetHighlightTexture("Interface\\QuestFrame\\UI-QuestTitleHighlight", "ADD")
+
+    local displayName = (LOCALIZED_CLASS_NAMES_MALE and LOCALIZED_CLASS_NAMES_MALE[class]) or class
+    local text = button:CreateFontString(nil, "OVERLAY", "GameFontHighlightSmall")
+    text:SetPoint("LEFT", 4, 0)
+    text:SetText(displayName)
+
+    local color = RAID_CLASS_COLORS and RAID_CLASS_COLORS[class]
+    if color then
+        text:SetTextColor(color.r, color.g, color.b)
+    end
+
+    button:SetScript("OnClick", function()
+        SelectClass(class)
+    end)
+
+    AddClickSound(button)
+
+    tabButtons[class] = button
+
+end
 
 hideAllButton:SetScript("OnClick", function()
     HideCoA.HideAllFrames()
@@ -144,6 +215,8 @@ hideAllButton:SetScript("OnClick", function()
     end
 end)
 
+AddClickSound(hideAllButton)
+
 showAllButton:SetScript("OnClick", function()
     HideCoA.ShowAllFrames()
     if selectedClass then
@@ -151,16 +224,32 @@ showAllButton:SetScript("OnClick", function()
     end
 end)
 
--- CHARACTER OVERRIDE TAB --
+AddClickSound(showAllButton)
 
-local characterOverrideTitle = characterOverrideContent:CreateFontString(nil, "ARTWORK", "GameFontNormalLarge")
+classesPanel:SetScript("OnShow", function()
-characterOverrideTitle:SetPoint("TOPLEFT", characterOverrideContent, "TOPLEFT", 0, 0)
+    SelectClass(selectedClass or HideCoA.CUSTOM_CLASSES[1])
+end)
+
+InterfaceOptions_AddCategory(classesPanel)
+
+-- CHARACTER OVERRIDE SUBCATEGORY --
+
+local characterOverridePanel = CreateFrame("Frame")
+characterOverridePanel.name = "Character Override"
+characterOverridePanel.parent = panel.name
+
+local characterOverrideTitle = characterOverridePanel:CreateFontString(nil, "ARTWORK", "GameFontNormalLarge")
+characterOverrideTitle:SetPoint("TOPLEFT", 16, -16)
 characterOverrideTitle:SetFont(titleFont, titleSize + 4, "OUTLINE")
 characterOverrideTitle:SetText("Character Override")
 
-local overrideEnabledCheck = CreateFrame("CheckButton", "HideCoAOverrideEnabledCheck", characterOverrideContent, "InterfaceOptionsCheckButtonTemplate")
+local characterNameText = characterOverridePanel:CreateFontString(nil, "ARTWORK", "GameFontHighlight")
-overrideEnabledCheck:SetPoint("TOPLEFT", characterOverrideTitle, "BOTTOMLEFT", 0, -12)
+characterNameText:SetPoint("TOPLEFT", characterOverrideTitle, "BOTTOMLEFT", 0, -12)
-_G[overrideEnabledCheck:GetName() .. "Text"]:SetText("Override class options for this character.")
+characterNameText:SetText(HideCoA.GetCharacterKey())
+
+local overrideEnabledCheck = CreateFrame("CheckButton", "HideCoAOverrideEnabledCheck", characterOverridePanel, "InterfaceOptionsCheckButtonTemplate")
+overrideEnabledCheck:SetPoint("TOPLEFT", characterNameText, "BOTTOMLEFT", 0, -12)
+_G[overrideEnabledCheck:GetName() .. "Text"]:SetText("Override class options for this character")
 
 if ElvSkins then
     ElvSkins:HandleCheckBox(overrideEnabledCheck)
@@ -173,7 +262,7 @@ local overridePreviousSpacing = -16
 
 for _, frameName in ipairs(HideCoA.FRAMES) do
 
-    local check = CreateFrame("CheckButton", "HideCoAOverrideCheck" .. frameName, characterOverrideContent, "InterfaceOptionsCheckButtonTemplate")
+    local check = CreateFrame("CheckButton", "HideCoAOverrideCheck" .. frameName, characterOverridePanel, "InterfaceOptionsCheckButtonTemplate")
     check:SetPoint("TOPLEFT", overridePreviousAnchor, "BOTTOMLEFT", 0, overridePreviousSpacing)
     _G[check:GetName() .. "Text"]:SetText("Hide " .. frameName)
 
@@ -187,6 +276,8 @@ for _, frameName in ipairs(HideCoA.FRAMES) do
         HideCoA.SetCharacterOverrideFrameHidden(self.frameName, self:GetChecked() and true or false)
     end)
 
+    AddCheckboxFeedback(check)
+
     overrideChecks[frameName] = check
     overridePreviousAnchor = check
     overridePreviousSpacing = -8
@@ -223,87 +314,27 @@ overrideEnabledCheck:SetScript("OnClick", function(self)
     RefreshCharacterOverrideTab()
 end)
 
--- ABOUT TAB --
+AddCheckboxFeedback(overrideEnabledCheck)
 
-local aboutTitle = aboutContent:CreateFontString(nil, "ARTWORK", "GameFontNormalLarge")
+characterOverridePanel:SetScript("OnShow", RefreshCharacterOverrideTab)
-aboutTitle:SetPoint("TOPLEFT", aboutContent, "TOPLEFT", 0, 0)
+
+InterfaceOptions_AddCategory(characterOverridePanel)
+
+-- ABOUT SUBCATEGORY --
+
+local aboutPanel = CreateFrame("Frame")
+aboutPanel.name = "About"
+aboutPanel.parent = panel.name
+
+local aboutTitle = aboutPanel:CreateFontString(nil, "ARTWORK", "GameFontNormalLarge")
+aboutTitle:SetPoint("TOPLEFT", 16, -16)
 aboutTitle:SetFont(titleFont, titleSize + 4, "OUTLINE")
 aboutTitle:SetText("About")
 
--- SIDEBAR TABS --
+InterfaceOptions_AddCategory(aboutPanel)
 
-local TAB_HEIGHT = 18
+-- Jump straight to the Classes subcategory when the HideCoAUI parent node itself is opened.
-
+panel:SetScript("OnShow", function(self)
-local function CreateTabButton(name, index)
+    InterfaceOptionsFrame_OpenToCategory(classesPanel)
-
+    self:Hide()
-    local button = CreateFrame("Button", "HideCoATab" .. name, sidebar)
+end)
-    button:SetHeight(TAB_HEIGHT)
-    button:SetPoint("TOPLEFT", sidebar, "TOPLEFT", 0, -(index - 1) * TAB_HEIGHT)
-    button:SetPoint("RIGHT", sidebar, "RIGHT", 0, 0)
-
-    local selectedTexture = button:CreateTexture(nil, "BACKGROUND")
-    selectedTexture:SetAllPoints()
-    selectedTexture:SetTexture("Interface\\QuestFrame\\UI-QuestTitleHighlight")
-    selectedTexture:SetBlendMode("ADD")
-    selectedTexture:Hide()
-    button.selectedTexture = selectedTexture
-
-    button:SetHighlightTexture("Interface\\QuestFrame\\UI-QuestTitleHighlight", "ADD")
-
-    local text = button:CreateFontString(nil, "OVERLAY", "GameFontNormalSmall")
-    text:SetPoint("LEFT", 4, 0)
-    text:SetText(name)
-    text:SetTextColor(1, 0.82, 0)
-    button.text = text
-
-    return button
-
-end
-
-local classesTabButton = CreateTabButton("Classes", 1)
-local characterOverrideTabButton = CreateTabButton("Character Override", 2)
-local aboutTabButton = CreateTabButton("About", 3)
-
-local sidebarTabButtons = { classesTabButton, characterOverrideTabButton, aboutTabButton }
-
-local function SelectTab(activeButton, contentFrame)
-
-    classesContent:Hide()
-    characterOverrideContent:Hide()
-    aboutContent:Hide()
-
-    contentFrame:Show()
-
-    for _, button in ipairs(sidebarTabButtons) do
-        if button == activeButton then
-            button.selectedTexture:Show()
-            button.text:SetTextColor(1, 1, 1)
-        else
-            button.selectedTexture:Hide()
-            button.text:SetTextColor(1, 0.82, 0)
-        end
-    end
-
-end
-
-local function ShowClassesTab()
-    SelectTab(classesTabButton, classesContent)
-    SelectClass(selectedClass or HideCoA.CUSTOM_CLASSES[1])
-end
-
-local function ShowCharacterOverrideTab()
-    SelectTab(characterOverrideTabButton, characterOverrideContent)
-    RefreshCharacterOverrideTab()
-end
-
-local function ShowAboutTab()
-    SelectTab(aboutTabButton, aboutContent)
-end
-
-classesTabButton:SetScript("OnClick", ShowClassesTab)
-characterOverrideTabButton:SetScript("OnClick", ShowCharacterOverrideTab)
-aboutTabButton:SetScript("OnClick", ShowAboutTab)
-
-panel:SetScript("OnShow", ShowClassesTab)
-
-InterfaceOptions_AddCategory(panel)