From 73b27bfc00d36254c4577f97e220638726af5be3 Mon Sep 17 00:00:00 2001
From: Adam Setch <adam.setch@outlook.com>
Date: Tue, 28 Jan 2025 17:16:07 -0500
Subject: [PATCH] refactor: nest detailed notification sub-settings

Signed-off-by: Adam Setch <adam.setch@outlook.com>
---
 .../settings/AppearanceSettings.tsx           | 162 ++++++++--------
 .../__snapshots__/Settings.test.tsx.snap      | 178 ++++++++++--------
 2 files changed, 178 insertions(+), 162 deletions(-)

diff --git a/src/renderer/components/settings/AppearanceSettings.tsx b/src/renderer/components/settings/AppearanceSettings.tsx
index 5d58ed82d..33831e0dd 100644
--- a/src/renderer/components/settings/AppearanceSettings.tsx
+++ b/src/renderer/components/settings/AppearanceSettings.tsx
@@ -167,95 +167,97 @@ export const AppearanceSettings: FC = () => {
           tooltip={
             <Stack direction="vertical" gap="condensed">
               <Text>
-                Enrich notifications with author or last commenter profile
-                information, state and GitHub-like colors.
+                Enrich notifications with detailed user and state information.
+              </Text>
+              <Text>
+                You may also choose to display{' '}
+                <Text as="strong">notification metric pills</Text> or{' '}
+                <Text as="strong">notification numbers</Text>.
               </Text>
               <Text className="text-gitify-caution">
                 ⚠️ Users with a large number of unread notifications <i>may</i>{' '}
-                experience rate limiting under certain circumstances. Disable
-                this setting if you experience this.
+                experience rate limiting under certain circumstances. Please
+                disable this setting if you experience this.
               </Text>
             </Stack>
           }
         />
 
-        <Checkbox
-          name="showPills"
-          label="Show notification metric pills"
-          checked={settings.showPills}
-          onChange={(evt) => updateSetting('showPills', evt.target.checked)}
-          tooltip={
-            <Box>
-              <Text>Show notification metric pills for:</Text>
-              <Box className="pl-4">
-                <ul>
-                  <li className="flex items-center gap-1">
-                    <IssueClosedIcon size={Size.SMALL} />
-                    linked issues
-                  </li>
-                  <li className="flex items-center gap-1">
-                    <CheckIcon size={Size.SMALL} />
-                    pr reviews
-                  </li>
-                  <li className="flex items-center gap-1">
-                    <CommentIcon size={Size.SMALL} />
-                    comments
-                  </li>
-                  <li className="flex items-center gap-1">
-                    <TagIcon size={Size.SMALL} />
-                    labels
-                  </li>
-                  <li className="flex items-center gap-1">
-                    <MilestoneIcon size={Size.SMALL} />
-                    milestones
-                  </li>
-                </ul>
-              </Box>
-            </Box>
-          }
-        />
+        <Box className="pl-6" hidden={!settings.detailedNotifications}>
+          <Stack direction="vertical" gap="condensed">
+            <Checkbox
+              name="showPills"
+              label="Show notification metric pills"
+              checked={settings.showPills}
+              onChange={(evt) => updateSetting('showPills', evt.target.checked)}
+              tooltip={
+                <Stack direction="vertical" gap="condensed">
+                  <Text>Show notification metric pills for:</Text>
+                  <Box className="pl-4">
+                    <ul>
+                      <li className="flex items-center gap-1">
+                        <IssueClosedIcon size={Size.SMALL} />
+                        linked issues
+                      </li>
+                      <li className="flex items-center gap-1">
+                        <CheckIcon size={Size.SMALL} />
+                        pr reviews
+                      </li>
+                      <li className="flex items-center gap-1">
+                        <CommentIcon size={Size.SMALL} />
+                        comments
+                      </li>
+                      <li className="flex items-center gap-1">
+                        <TagIcon size={Size.SMALL} />
+                        labels
+                      </li>
+                      <li className="flex items-center gap-1">
+                        <MilestoneIcon size={Size.SMALL} />
+                        milestones
+                      </li>
+                    </ul>
+                  </Box>
+                </Stack>
+              }
+            />
 
-        <Checkbox
-          name="showNumber"
-          label="Show number"
-          checked={settings.detailedNotifications && settings.showNumber}
-          onChange={(evt) =>
-            settings.detailedNotifications &&
-            updateSetting('showNumber', evt.target.checked)
-          }
-          disabled={!settings.detailedNotifications}
-          tooltip={
-            <Stack direction="vertical" gap="condensed">
-              <Text>Show GitHub number for:</Text>
-              <Box className="pl-4">
-                <ul>
-                  <li>
-                    <Stack direction="horizontal" gap="condensed">
-                      <CommentIcon size={Size.SMALL} />
-                      Discussion
-                    </Stack>
-                  </li>
-                  <li>
-                    <Stack direction="horizontal" gap="condensed">
-                      <IssueClosedIcon size={Size.SMALL} />
-                      Issue
-                    </Stack>
-                  </li>
-                  <li>
-                    <Stack direction="horizontal" gap="condensed">
-                      <GitPullRequestIcon size={Size.SMALL} />
-                      Pull Request
-                    </Stack>
-                  </li>
-                </ul>
-              </Box>
-              <Text className="text-gitify-caution">
-                ⚠️ This setting requires{' '}
-                <Text as="strong">Detailed Notifications</Text> to be enabled.
-              </Text>
-            </Stack>
-          }
-        />
+            <Checkbox
+              name="showNumber"
+              label="Show notification number"
+              checked={settings.showNumber}
+              onChange={(evt) =>
+                updateSetting('showNumber', evt.target.checked)
+              }
+              tooltip={
+                <Stack direction="vertical" gap="condensed">
+                  <Text>Show GitHub number for:</Text>
+                  <Box className="pl-4">
+                    <ul>
+                      <li>
+                        <Stack direction="horizontal" gap="condensed">
+                          <CommentIcon size={Size.SMALL} />
+                          Discussion
+                        </Stack>
+                      </li>
+                      <li>
+                        <Stack direction="horizontal" gap="condensed">
+                          <IssueClosedIcon size={Size.SMALL} />
+                          Issue
+                        </Stack>
+                      </li>
+                      <li>
+                        <Stack direction="horizontal" gap="condensed">
+                          <GitPullRequestIcon size={Size.SMALL} />
+                          Pull Request
+                        </Stack>
+                      </li>
+                    </ul>
+                  </Box>
+                </Stack>
+              }
+            />
+          </Stack>
+        </Box>
 
         <Checkbox
           name="showAccountHeader"
diff --git a/src/renderer/routes/__snapshots__/Settings.test.tsx.snap b/src/renderer/routes/__snapshots__/Settings.test.tsx.snap
index e47d7138d..5b9dab18f 100644
--- a/src/renderer/routes/__snapshots__/Settings.test.tsx.snap
+++ b/src/renderer/routes/__snapshots__/Settings.test.tsx.snap
@@ -427,95 +427,109 @@ exports[`renderer/routes/Settings.tsx should render itself & its children 1`] =
             </div>
           </div>
           <div
-            class="Stack__StyledStack-sc-x3xa2i-0 duhwY text-sm"
-            data-align="center"
-            data-direction="horizontal"
-            data-gap="condensed"
-            data-justify="start"
-            data-padding="none"
-            data-wrap="nowrap"
+            class="Box-sc-g0xbh4-0 pl-6"
           >
-            <input
-              checked=""
-              class="size-4 rounded-sm cursor-pointer"
-              data-testid="checkbox-showPills"
-              id="showPills"
-              type="checkbox"
-            />
-            <label
-              class="font-medium text-gitify-font cursor-pointer"
-              for="showPills"
-            >
-              Show notification metric pills
-            </label>
             <div
-              aria-label="tooltip-showPills"
-              class="Box-sc-g0xbh4-0 relative"
-              data-testid="tooltip-tooltip-showPills"
-              id="tooltip-showPills"
+              class="Stack__StyledStack-sc-x3xa2i-0 duhwY"
+              data-align="stretch"
+              data-direction="vertical"
+              data-gap="condensed"
+              data-justify="start"
+              data-padding="none"
+              data-wrap="nowrap"
             >
-              <svg
-                aria-hidden="true"
-                class="octicon octicon-question ml-1 text-gitify-tooltip-icon"
-                display="inline-block"
-                fill="currentColor"
-                focusable="false"
-                height="16"
-                overflow="visible"
-                style="vertical-align: text-bottom;"
-                viewBox="0 0 16 16"
-                width="16"
+              <div
+                class="Stack__StyledStack-sc-x3xa2i-0 duhwY text-sm"
+                data-align="center"
+                data-direction="horizontal"
+                data-gap="condensed"
+                data-justify="start"
+                data-padding="none"
+                data-wrap="nowrap"
               >
-                <path
-                  d="M0 8a8 8 0 1 1 16 0A8 8 0 0 1 0 8Zm8-6.5a6.5 6.5 0 1 0 0 13 6.5 6.5 0 0 0 0-13ZM6.92 6.085h.001a.749.749 0 1 1-1.342-.67c.169-.339.436-.701.849-.977C6.845 4.16 7.369 4 8 4a2.756 2.756 0 0 1 1.637.525c.503.377.863.965.863 1.725 0 .448-.115.83-.329 1.15-.205.307-.47.513-.692.662-.109.072-.22.138-.313.195l-.006.004a6.24 6.24 0 0 0-.26.16.952.952 0 0 0-.276.245.75.75 0 0 1-1.248-.832c.184-.264.42-.489.692-.661.103-.067.207-.132.313-.195l.007-.004c.1-.061.182-.11.258-.161a.969.969 0 0 0 .277-.245C8.96 6.514 9 6.427 9 6.25a.612.612 0 0 0-.262-.525A1.27 1.27 0 0 0 8 5.5c-.369 0-.595.09-.74.187a1.01 1.01 0 0 0-.34.398ZM9 11a1 1 0 1 1-2 0 1 1 0 0 1 2 0Z"
+                <input
+                  checked=""
+                  class="size-4 rounded-sm cursor-pointer"
+                  data-testid="checkbox-showPills"
+                  id="showPills"
+                  type="checkbox"
                 />
-              </svg>
-            </div>
-          </div>
-          <div
-            class="Stack__StyledStack-sc-x3xa2i-0 duhwY text-sm"
-            data-align="center"
-            data-direction="horizontal"
-            data-gap="condensed"
-            data-justify="start"
-            data-padding="none"
-            data-wrap="nowrap"
-          >
-            <input
-              checked=""
-              class="size-4 rounded-sm cursor-pointer"
-              data-testid="checkbox-showNumber"
-              id="showNumber"
-              type="checkbox"
-            />
-            <label
-              class="font-medium text-gitify-font cursor-pointer"
-              for="showNumber"
-            >
-              Show number
-            </label>
-            <div
-              aria-label="tooltip-showNumber"
-              class="Box-sc-g0xbh4-0 relative"
-              data-testid="tooltip-tooltip-showNumber"
-              id="tooltip-showNumber"
-            >
-              <svg
-                aria-hidden="true"
-                class="octicon octicon-question ml-1 text-gitify-tooltip-icon"
-                display="inline-block"
-                fill="currentColor"
-                focusable="false"
-                height="16"
-                overflow="visible"
-                style="vertical-align: text-bottom;"
-                viewBox="0 0 16 16"
-                width="16"
+                <label
+                  class="font-medium text-gitify-font cursor-pointer"
+                  for="showPills"
+                >
+                  Show notification metric pills
+                </label>
+                <div
+                  aria-label="tooltip-showPills"
+                  class="Box-sc-g0xbh4-0 relative"
+                  data-testid="tooltip-tooltip-showPills"
+                  id="tooltip-showPills"
+                >
+                  <svg
+                    aria-hidden="true"
+                    class="octicon octicon-question ml-1 text-gitify-tooltip-icon"
+                    display="inline-block"
+                    fill="currentColor"
+                    focusable="false"
+                    height="16"
+                    overflow="visible"
+                    style="vertical-align: text-bottom;"
+                    viewBox="0 0 16 16"
+                    width="16"
+                  >
+                    <path
+                      d="M0 8a8 8 0 1 1 16 0A8 8 0 0 1 0 8Zm8-6.5a6.5 6.5 0 1 0 0 13 6.5 6.5 0 0 0 0-13ZM6.92 6.085h.001a.749.749 0 1 1-1.342-.67c.169-.339.436-.701.849-.977C6.845 4.16 7.369 4 8 4a2.756 2.756 0 0 1 1.637.525c.503.377.863.965.863 1.725 0 .448-.115.83-.329 1.15-.205.307-.47.513-.692.662-.109.072-.22.138-.313.195l-.006.004a6.24 6.24 0 0 0-.26.16.952.952 0 0 0-.276.245.75.75 0 0 1-1.248-.832c.184-.264.42-.489.692-.661.103-.067.207-.132.313-.195l.007-.004c.1-.061.182-.11.258-.161a.969.969 0 0 0 .277-.245C8.96 6.514 9 6.427 9 6.25a.612.612 0 0 0-.262-.525A1.27 1.27 0 0 0 8 5.5c-.369 0-.595.09-.74.187a1.01 1.01 0 0 0-.34.398ZM9 11a1 1 0 1 1-2 0 1 1 0 0 1 2 0Z"
+                    />
+                  </svg>
+                </div>
+              </div>
+              <div
+                class="Stack__StyledStack-sc-x3xa2i-0 duhwY text-sm"
+                data-align="center"
+                data-direction="horizontal"
+                data-gap="condensed"
+                data-justify="start"
+                data-padding="none"
+                data-wrap="nowrap"
               >
-                <path
-                  d="M0 8a8 8 0 1 1 16 0A8 8 0 0 1 0 8Zm8-6.5a6.5 6.5 0 1 0 0 13 6.5 6.5 0 0 0 0-13ZM6.92 6.085h.001a.749.749 0 1 1-1.342-.67c.169-.339.436-.701.849-.977C6.845 4.16 7.369 4 8 4a2.756 2.756 0 0 1 1.637.525c.503.377.863.965.863 1.725 0 .448-.115.83-.329 1.15-.205.307-.47.513-.692.662-.109.072-.22.138-.313.195l-.006.004a6.24 6.24 0 0 0-.26.16.952.952 0 0 0-.276.245.75.75 0 0 1-1.248-.832c.184-.264.42-.489.692-.661.103-.067.207-.132.313-.195l.007-.004c.1-.061.182-.11.258-.161a.969.969 0 0 0 .277-.245C8.96 6.514 9 6.427 9 6.25a.612.612 0 0 0-.262-.525A1.27 1.27 0 0 0 8 5.5c-.369 0-.595.09-.74.187a1.01 1.01 0 0 0-.34.398ZM9 11a1 1 0 1 1-2 0 1 1 0 0 1 2 0Z"
+                <input
+                  checked=""
+                  class="size-4 rounded-sm cursor-pointer"
+                  data-testid="checkbox-showNumber"
+                  id="showNumber"
+                  type="checkbox"
                 />
-              </svg>
+                <label
+                  class="font-medium text-gitify-font cursor-pointer"
+                  for="showNumber"
+                >
+                  Show notification number
+                </label>
+                <div
+                  aria-label="tooltip-showNumber"
+                  class="Box-sc-g0xbh4-0 relative"
+                  data-testid="tooltip-tooltip-showNumber"
+                  id="tooltip-showNumber"
+                >
+                  <svg
+                    aria-hidden="true"
+                    class="octicon octicon-question ml-1 text-gitify-tooltip-icon"
+                    display="inline-block"
+                    fill="currentColor"
+                    focusable="false"
+                    height="16"
+                    overflow="visible"
+                    style="vertical-align: text-bottom;"
+                    viewBox="0 0 16 16"
+                    width="16"
+                  >
+                    <path
+                      d="M0 8a8 8 0 1 1 16 0A8 8 0 0 1 0 8Zm8-6.5a6.5 6.5 0 1 0 0 13 6.5 6.5 0 0 0 0-13ZM6.92 6.085h.001a.749.749 0 1 1-1.342-.67c.169-.339.436-.701.849-.977C6.845 4.16 7.369 4 8 4a2.756 2.756 0 0 1 1.637.525c.503.377.863.965.863 1.725 0 .448-.115.83-.329 1.15-.205.307-.47.513-.692.662-.109.072-.22.138-.313.195l-.006.004a6.24 6.24 0 0 0-.26.16.952.952 0 0 0-.276.245.75.75 0 0 1-1.248-.832c.184-.264.42-.489.692-.661.103-.067.207-.132.313-.195l.007-.004c.1-.061.182-.11.258-.161a.969.969 0 0 0 .277-.245C8.96 6.514 9 6.427 9 6.25a.612.612 0 0 0-.262-.525A1.27 1.27 0 0 0 8 5.5c-.369 0-.595.09-.74.187a1.01 1.01 0 0 0-.34.398ZM9 11a1 1 0 1 1-2 0 1 1 0 0 1 2 0Z"
+                    />
+                  </svg>
+                </div>
+              </div>
             </div>
           </div>
           <div