From 65a18eb406bcb6e165aa8b7c61db0df9db8ff225 Mon Sep 17 00:00:00 2001
From: AJ Kim <jkim67cloud@gmail.com>
Date: Sat, 28 Sep 2024 14:31:07 +0900
Subject: [PATCH] style: PRIVATE_GAUGE_VISIBLE_PIXELS

---
 src/components/organism_appbar/index.tsx              | 9 +++++----
 src/components/organism_rituals_frame/index.gauge.tsx | 6 +++---
 2 files changed, 8 insertions(+), 7 deletions(-)

diff --git a/src/components/organism_appbar/index.tsx b/src/components/organism_appbar/index.tsx
index bfdf4d6..002fd72 100644
--- a/src/components/organism_appbar/index.tsx
+++ b/src/components/organism_appbar/index.tsx
@@ -14,7 +14,8 @@ import RitualsFrameGauge from '../organism_rituals_frame/index.gauge'
 
 const PRIVATE_TITLE = `Consistency GPT (Beta)`
 const PRIVATE_SHORTER_TITLE = `CGT`
-const PRIVATE_TITLE_SHRINK_PIXELS = 500
+const PRIVATE_TITLE_VISIBLE_PIXELS = 500
+const PRIVATE_GAUGE_VISIBLE_PIXELS = 850
 const PRIVATE_TITLE_LOGO = `/favicon_archived/android-chrome-512x512.png`
 interface Props {
   nickname?: string
@@ -36,7 +37,7 @@ const Appbar: FC<Props> = ({ children, nickname }) => {
             height={30}
             style={{ marginRight: 8 }}
           />
-          {width <= PRIVATE_TITLE_SHRINK_PIXELS && (
+          {width <= PRIVATE_TITLE_VISIBLE_PIXELS && (
             <Typography
               variant="h6"
               color="inherit"
@@ -47,7 +48,7 @@ const Appbar: FC<Props> = ({ children, nickname }) => {
               {nickname && ` - ${nickname}`}
             </Typography>
           )}
-          {PRIVATE_TITLE_SHRINK_PIXELS < width && (
+          {PRIVATE_TITLE_VISIBLE_PIXELS <= width && (
             <Typography
               variant="h6"
               color="inherit"
@@ -60,7 +61,7 @@ const Appbar: FC<Props> = ({ children, nickname }) => {
           )}
           <Box pr={2} />
           <Box flexGrow={1} />
-          <RitualsFrameGauge />
+          {PRIVATE_GAUGE_VISIBLE_PIXELS <= width && <RitualsFrameGauge />}
           <RitualsFrameRefreshButton nickname={nickname} />
           <Box pr={1} />
           <AppbarGitHubButtonPart />
diff --git a/src/components/organism_rituals_frame/index.gauge.tsx b/src/components/organism_rituals_frame/index.gauge.tsx
index 19d3d89..2a4585e 100644
--- a/src/components/organism_rituals_frame/index.gauge.tsx
+++ b/src/components/organism_rituals_frame/index.gauge.tsx
@@ -33,12 +33,12 @@ const BorderLinearProgress = styled(LinearProgress)(({ theme }) => ({
  * @returns
  */
 const RitualsFrameGauge: FC<Props> = () => {
-  const value = useRecoilValue(actionGroupAchievedPercentSelector)
+  const percentage = useRecoilValue(actionGroupAchievedPercentSelector)
 
   return (
     <Box minWidth={200} alignItems={`center`}>
-      <BorderLinearProgress variant="determinate" value={value} />
-      <Typography>{`${value}%`}</Typography>
+      <BorderLinearProgress variant="determinate" value={percentage} />
+      <Typography>{`${percentage}%`}</Typography>
     </Box>
   )
 }