From 0952a15ec51c43f195cd593c10ef725037ea20ef Mon Sep 17 00:00:00 2001 From: Rostislav Dugin Date: Tue, 20 Jan 2026 08:25:58 +0300 Subject: [PATCH] FEATURE (navbar): Update navbar style --- frontend/package-lock.json | 19 ----- frontend/package.json | 1 - .../settings/ui/SettingsComponent.tsx | 2 +- .../features/users/ui/AuthNavbarComponent.tsx | 21 ++--- .../features/users/ui/ProfileComponent.tsx | 2 +- .../src/features/users/ui/UsersComponent.tsx | 2 +- .../ui/WorkspaceSettingsComponent.tsx | 2 +- .../src/shared/ui/StarButtonComponent.tsx | 61 ++++++++++++++ .../ui}/ThemeToggleComponent.tsx | 2 +- frontend/src/shared/ui/index.ts | 2 + .../src/widgets/main/MainScreenComponent.tsx | 82 +++++++++---------- .../src/widgets/main/SidebarComponent.tsx | 14 +--- .../main/WorkspaceSelectionComponent.tsx | 2 +- 13 files changed, 118 insertions(+), 94 deletions(-) create mode 100644 frontend/src/shared/ui/StarButtonComponent.tsx rename frontend/src/{widgets/main => shared/ui}/ThemeToggleComponent.tsx (97%) diff --git a/frontend/package-lock.json b/frontend/package-lock.json index 8cd60df..1788804 100644 --- a/frontend/package-lock.json +++ b/frontend/package-lock.json @@ -14,7 +14,6 @@ "dayjs": "^1.11.13", "react": "^19.1.0", "react-dom": "^19.1.0", - "react-github-btn": "^1.4.0", "react-router": "^7.6.0", "recharts": "^3.2.0", "tailwindcss": "^4.1.7" @@ -4272,12 +4271,6 @@ "url": "https://github.com/sponsors/ljharb" } }, - "node_modules/github-buttons": { - "version": "2.29.1", - "resolved": "https://registry.npmjs.org/github-buttons/-/github-buttons-2.29.1.tgz", - "integrity": "sha512-TV3YgAKda5hPz75n7QXmGCsSzgVya1vvmBieebg3EB5ScmashTZ0FldViG1aU2d4V5rcAGrtQ7k5uAaCo0A4PA==", - "license": "BSD-2-Clause" - }, "node_modules/glob": { "version": "10.5.0", "resolved": "https://registry.npmjs.org/glob/-/glob-10.5.0.tgz", @@ -6759,18 +6752,6 @@ "react": "^19.1.0" } }, - "node_modules/react-github-btn": { - "version": "1.4.0", - "resolved": "https://registry.npmjs.org/react-github-btn/-/react-github-btn-1.4.0.tgz", - "integrity": "sha512-lV4FYClAfjWnBfv0iNlJUGhamDgIq6TayD0kPZED6VzHWdpcHmPfsYOZ/CFwLfPv4Zp+F4m8QKTj0oy2HjiGXg==", - "license": "BSD-2-Clause", - "dependencies": { - "github-buttons": "^2.22.0" - }, - "peerDependencies": { - "react": ">=16.3.0" - } - }, "node_modules/react-is": { "version": "16.13.1", "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz", diff --git a/frontend/package.json b/frontend/package.json index a066ce1..611b524 100644 --- a/frontend/package.json +++ b/frontend/package.json @@ -19,7 +19,6 @@ "dayjs": "^1.11.13", "react": "^19.1.0", "react-dom": "^19.1.0", - "react-github-btn": "^1.4.0", "react-router": "^7.6.0", "recharts": "^3.2.0", "tailwindcss": "^4.1.7" diff --git a/frontend/src/features/settings/ui/SettingsComponent.tsx b/frontend/src/features/settings/ui/SettingsComponent.tsx index acb9d7a..7ea1e5b 100644 --- a/frontend/src/features/settings/ui/SettingsComponent.tsx +++ b/frontend/src/features/settings/ui/SettingsComponent.tsx @@ -91,7 +91,7 @@ export function SettingsComponent({ contentHeight }: Props) { console.log(`isCloud = ${IS_CLOUD}`); return ( -
+
-
- -  Star on GitHub - -
+
+ - + +
); diff --git a/frontend/src/features/users/ui/ProfileComponent.tsx b/frontend/src/features/users/ui/ProfileComponent.tsx index ba0b29d..341cdd4 100644 --- a/frontend/src/features/users/ui/ProfileComponent.tsx +++ b/frontend/src/features/users/ui/ProfileComponent.tsx @@ -197,7 +197,7 @@ export function ProfileComponent({ contentHeight }: Props) { }; return ( -
+
+
+
( + + + +); + +export function StarButtonComponent() { + const [starCount, setStarCount] = useState(null); + const [isLoading, setIsLoading] = useState(true); + + const fetchStarCount = async () => { + try { + const response = await fetch('https://api.github.com/repos/databasus/databasus'); + if (response.ok) { + const data = (await response.json()) as { stargazers_count: number }; + setStarCount(data.stargazers_count); + } + } catch (error) { + console.error('Failed to fetch GitHub star count:', error); + } finally { + setIsLoading(false); + } + }; + + useEffect(() => { + fetchStarCount(); + }, []); + + return ( + +
+ + Star on GitHub +
+ + {!isLoading && starCount !== null && ( + + {starCount.toLocaleString()} + + )} + + ); +} diff --git a/frontend/src/widgets/main/ThemeToggleComponent.tsx b/frontend/src/shared/ui/ThemeToggleComponent.tsx similarity index 97% rename from frontend/src/widgets/main/ThemeToggleComponent.tsx rename to frontend/src/shared/ui/ThemeToggleComponent.tsx index 9ac8194..ab021fc 100644 --- a/frontend/src/widgets/main/ThemeToggleComponent.tsx +++ b/frontend/src/shared/ui/ThemeToggleComponent.tsx @@ -1,7 +1,7 @@ import { Dropdown } from 'antd'; import type { MenuProps } from 'antd'; -import { type ThemeMode, useTheme } from '../../shared/theme'; +import { type ThemeMode, useTheme } from '../theme'; const SunIcon = () => ( { const { message } = App.useApp(); - const { resolvedTheme } = useTheme(); const screenHeight = useScreenHeight(); const isMobile = useIsMobile(); const contentHeight = screenHeight - (isMobile ? 70 : 95); @@ -115,6 +113,9 @@ export const MainScreenComponent = () => { const isUsedMoreThan95Percent = diskUsage && diskUsage.usedSpaceBytes / diskUsage.totalSpaceBytes > 0.95; + const isUsedMoreThan85Percent = + diskUsage && diskUsage.usedSpaceBytes / diskUsage.totalSpaceBytes > 0.85; + const isCanManageDBs = selectedWorkspace?.userRole !== WorkspaceRole.VIEWER; const tabs = [ @@ -199,7 +200,7 @@ export const MainScreenComponent = () => {
-
+
{!isLoading && ( { Docs - - Contribute - { Community -
- -  Star Databasus on GitHub - -
- - {diskUsage && ( + {isUsedMoreThan85Percent && (
{ )} - +
+ + + +
@@ -276,6 +260,7 @@ export const MainScreenComponent = () => { />
+ {isLoading ? (
} size="large" /> @@ -292,13 +277,23 @@ export const MainScreenComponent = () => { contentHeight={contentHeight} /> - {selectedTab === 'profile' && } - - {selectedTab === 'databasus-settings' && ( - + {selectedTab === 'profile' && ( +
+ +
)} - {selectedTab === 'users' && } + {selectedTab === 'databasus-settings' && ( +
+ +
+ )} + + {selectedTab === 'users' && ( +
+ +
+ )} {(selectedTab === 'databases' || selectedTab === 'storages' || @@ -323,7 +318,7 @@ export const MainScreenComponent = () => {
) : ( <> -
+
{selectedTab === 'notifiers' && selectedWorkspace && ( { key={`databases-${selectedWorkspace.id}`} /> )} - {selectedTab === 'settings' && selectedWorkspace && user && ( - - )} + +
+ {selectedTab === 'settings' && selectedWorkspace && user && ( + + )} +
)} diff --git a/frontend/src/widgets/main/SidebarComponent.tsx b/frontend/src/widgets/main/SidebarComponent.tsx index 738152e..a1a162c 100644 --- a/frontend/src/widgets/main/SidebarComponent.tsx +++ b/frontend/src/widgets/main/SidebarComponent.tsx @@ -1,13 +1,13 @@ import { CloseOutlined } from '@ant-design/icons'; import { Drawer, Tooltip } from 'antd'; import { useEffect } from 'react'; -import GitHubButton from 'react-github-btn'; import { type DiskUsage } from '../../entity/disk'; import { type UserProfile, UserRole } from '../../entity/users'; import { useIsMobile } from '../../shared/hooks'; import { useTheme } from '../../shared/theme'; -import { ThemeToggleComponent } from './ThemeToggleComponent'; +import { StarButtonComponent } from '../../shared/ui/StarButtonComponent'; +import { ThemeToggleComponent } from '../../shared/ui/ThemeToggleComponent'; interface TabItem { text: string; @@ -213,15 +213,7 @@ export const SidebarComponent = ({
- - Star on GitHub - +
diff --git a/frontend/src/widgets/main/WorkspaceSelectionComponent.tsx b/frontend/src/widgets/main/WorkspaceSelectionComponent.tsx index a6bb0e0..417f229 100644 --- a/frontend/src/widgets/main/WorkspaceSelectionComponent.tsx +++ b/frontend/src/widgets/main/WorkspaceSelectionComponent.tsx @@ -62,7 +62,7 @@ export const WorkspaceSelectionComponent = ({ return (