Mirrors/notesnook
1
0
Fork 0
mirror of https://github.com/streetwriters/notesnook.git synced 2025-12-29 00:20:04 +01:00
Code Issues Packages Projects Releases Wiki Activity

web: hide unnecessary items from status bar in focus mode (#3577)

Browse Source 
* web: used app-store to hide sync-status suring focus mode

* web: hide useless items from status bar in focus mode

---------

Co-authored-by: Abdullah Atta <abdullahatta@streetwriters.co>
This commit is contained in:
Muhammad Ali
2023-10-31 10:54:57 +05:00
committed by GitHub
parent 365764e3e3
commit 0ac5e2b995
1 changed files with 101 additions and 94 deletions
Download Patch File Download Diff File Expand all files Collapse all files

195
apps/web/src/components/status-bar/index.tsx
View File

@@ -50,6 +50,7 @@ function StatusBar() {
const isLoggedIn = useUserStore((state) => state.isLoggedIn);
const statuses = useStatus();
const updateStatus = useAutoUpdater();
const isFocusMode = useAppStore((state) => state.isFocusMode);
return (
<ScopedThemeProvider
@@ -63,124 +64,130 @@ function StatusBar() {
}}
px={2}
>
<Flex>
{isLoggedIn ? (
<>
{isFocusMode ? (
<Flex />
) : (
<Flex>
{isLoggedIn ? (
<>
<Button
onClick={() =>
user?.isEmailConfirmed
? navigate("/settings")
: hashNavigate("/email/verify")
}
variant="statusitem"
sx={{
alignItems: "center",
justifyContent: "center",
display: "flex"
}}
>
<Circle
size={7}
color={
user?.isEmailConfirmed
? "var(--icon-success)"
: "var(--icon-error)"
}
/>
<Text
className="selectable"
variant="subBody"
ml={1}
sx={{ color: "paragraph" }}
>
{user?.email}
{user?.isEmailConfirmed ? "" : " (not verified)"}
</Text>
</Button>
<SyncStatus />
</>
) : isLoggedIn === false ? (
<Button
onClick={() =>
user?.isEmailConfirmed
? navigate("/settings")
: hashNavigate("/email/verify")
}
variant="statusitem"
onClick={() => hardNavigate("/login")}
sx={{
alignItems: "center",
justifyContent: "center",
display: "flex"
}}
data-test-id="not-logged-in"
>
<Circle
size={7}
color={
user?.isEmailConfirmed
? "var(--icon-success)"
: "var(--icon-error)"
}
/>
<Text
className="selectable"
variant="subBody"
ml={1}
sx={{ color: "paragraph" }}
>
{user?.email}
{user?.isEmailConfirmed ? "" : " (not verified)"}
<Circle size={7} color="var(--icon-error)" />
<Text variant="subBody" ml={1} sx={{ color: "paragraph" }}>
Not logged in
</Text>
</Button>
<SyncStatus />
</>
) : isLoggedIn === false ? (
) : null}
<Button
variant="statusitem"
onClick={() => hardNavigate("/login")}
onClick={() => showIssueDialog()}
sx={{
alignItems: "center",
justifyContent: "center",
display: "flex"
}}
data-test-id="not-logged-in"
title="Facing an issue? Click here to create a bug report."
>
<Circle size={7} color="var(--icon-error)" />
<Issue size={12} />
<Text variant="subBody" ml={1} sx={{ color: "paragraph" }}>
Not logged in
Report an issue
</Text>
</Button>
) : null}
<Button
variant="statusitem"
onClick={() => showIssueDialog()}
sx={{
alignItems: "center",
justifyContent: "center",
display: "flex"
}}
title="Facing an issue? Click here to create a bug report."
>
<Issue size={12} />
<Text variant="subBody" ml={1} sx={{ color: "paragraph" }}>
Report an issue
</Text>
</Button>
{statuses?.map((status) => {
const { key, icon: Icon } = status;
return (
<Flex
key={key}
ml={1}
sx={{ alignItems: "center", justifyContent: "center" }}
{statuses?.map((status) => {
const { key, icon: Icon } = status;
return (
<Flex
key={key}
ml={1}
sx={{ alignItems: "center", justifyContent: "center" }}
>
{Icon ? <Icon size={12} /> : <Loading size={12} />}
<Text variant="subBody" ml={1} sx={{ color: "paragraph" }}>
{statusToString(status)}
</Text>
</Flex>
);
})}
{updateStatus && updateStatus.type !== "updated" && (
<Button
variant="statusitem"
onClick={async () => {
if (updateStatus.type === "available") {
await showUpdateAvailableNotice(updateStatus);
} else if (updateStatus.type === "completed") {
installUpdate();
} else {
checkForUpdate();
}
}}
sx={{
ml: 1,
alignItems: "center",
justifyContent: "center",
display: "flex"
}}
>
{Icon ? <Icon size={12} /> : <Loading size={12} />}
<Update
rotate={
updateStatus.type !== "completed" &&
updateStatus.type !== "available"
}
color={
updateStatus.type === "available" ? "accent" : "paragraph"
}
size={12}
/>
<Text variant="subBody" ml={1} sx={{ color: "paragraph" }}>
{statusToString(status)}
{statusToInfoText(updateStatus)}
</Text>
</Flex>
);
})}
{updateStatus && updateStatus.type !== "updated" && (
<Button
variant="statusitem"
onClick={async () => {
if (updateStatus.type === "available") {
await showUpdateAvailableNotice(updateStatus);
} else if (updateStatus.type === "completed") {
installUpdate();
} else {
checkForUpdate();
}
}}
sx={{
ml: 1,
alignItems: "center",
justifyContent: "center",
display: "flex"
}}
>
<Update
rotate={
updateStatus.type !== "completed" &&
updateStatus.type !== "available"
}
color={updateStatus.type === "available" ? "accent" : "paragraph"}
size={12}
/>
<Text variant="subBody" ml={1} sx={{ color: "paragraph" }}>
{statusToInfoText(updateStatus)}
</Text>
</Button>
)}
</Flex>
</Button>
)}
</Flex>
)}
<EditorFooter />
</ScopedThemeProvider>
);