fix: improve sidebar buttons

2026-02-16 22:16:08 +01:00
parent edadda2c45
commit b7eafb0f37
6 changed files with 119 additions and 108 deletions
--- a/apps/start/src/components/feedback-button.tsx
+++ b/apps/start/src/components/feedback-button.tsx
@@ -1,15 +1,12 @@
-import { op } from '@/utils/op';
 import { useRouteContext } from '@tanstack/react-router';
-import { SparklesIcon } from 'lucide-react';
-import { Button } from './ui/button';
+import { cn } from '@/lib/utils';
+import { op } from '@/utils/op';

-export function FeedbackButton() {
+export function FeedbackButton({ className }: { className?: string }) {
  const context = useRouteContext({ strict: false });
  return (
-    <Button
-      variant={'outline'}
-      className="text-left justify-start text-[13px]"
-      icon={SparklesIcon}
+    <button
+      className={cn('justify-start text-left text-[13px]', className)}
      onClick={() => {
        op.track('feedback_button_clicked');
        if ('uj' in window && window.uj !== undefined) {
@@ -23,8 +20,9 @@ export function FeedbackButton() {
          }, 10);
        }
      }}
+      type="button"
    >
      Give feedback
-    </Button>
+    </button>
  );
 }
--- a/apps/start/src/components/profile-toggle.tsx
+++ b/apps/start/src/components/profile-toggle.tsx
@@ -1,4 +1,5 @@
-import { Button } from '@/components/ui/button';
+import { CheckIcon, UserIcon } from 'lucide-react';
+import { themeConfig } from './theme-provider';
 import {
  DropdownMenu,
  DropdownMenuContent,
@@ -10,11 +11,9 @@ import {
  DropdownMenuSubTrigger,
  DropdownMenuTrigger,
 } from '@/components/ui/dropdown-menu';
-import { useTheme } from '@/hooks/use-theme';
-import { CheckIcon, UserIcon } from 'lucide-react';
-
 import { useLogout } from '@/hooks/use-logout';
-import { themeConfig } from './theme-provider';
+import { useTheme } from '@/hooks/use-theme';
+import { cn } from '@/lib/utils';

 interface Props {
  className?: string;
@@ -27,10 +26,13 @@ export function ProfileToggle({ className }: Props) {
  return (
    <DropdownMenu>
      <DropdownMenuTrigger asChild>
-        <Button variant="outline" size="icon" className={className}>
+        <button
+          className={cn(className, 'center-center outline-0')}
+          type="button"
+        >
          <UserIcon className="size-4" />
          <span className="sr-only">Profile</span>
-        </Button>
+        </button>
      </DropdownMenuTrigger>
      <DropdownMenuContent align="center" className="w-56">
        <DropdownMenuSub>
@@ -44,9 +46,9 @@ export function ProfileToggle({ className }: Props) {
          <DropdownMenuSubContent className="p-0">
            {themes.map((themeOption) => (
              <DropdownMenuItem
+                className="capitalize"
                key={themeOption.key}
                onClick={() => setTheme(themeOption.key)}
-                className="capitalize"
              >
                <span className="mr-2">{themeOption.icon}</span>
                {themeOption.label}
--- a/apps/start/src/components/sidebar-organization-menu.tsx
+++ b/apps/start/src/components/sidebar-organization-menu.tsx
@@ -1,21 +1,15 @@
+import { Link, useNavigate } from '@tanstack/react-router';
+import { AnimatePresence, motion } from 'framer-motion';
 import {
+  ChevronDownIcon,
  CogIcon,
  CreditCardIcon,
  LayoutListIcon,
+  PlusIcon,
  UsersIcon,
  WorkflowIcon,
 } from 'lucide-react';
-
-import { Button } from '@/components/ui/button';
-import { useAppContext } from '@/hooks/use-app-context';
-import { useAppParams } from '@/hooks/use-app-params';
-import { pushModal } from '@/modals';
-import type { RouterOutputs } from '@/trpc/client';
-import { cn } from '@/utils/cn';
-import { Link, useNavigate, useRouteContext } from '@tanstack/react-router';
-import { AnimatePresence, motion } from 'framer-motion';
-import { ChevronDownIcon, PlusIcon } from 'lucide-react';
-import { useCallback, useEffect, useState } from 'react';
+import { useEffect, useState } from 'react';
 import { Badge } from './ui/badge';
 import {
  DropdownMenu,
@@ -23,6 +17,11 @@ import {
  DropdownMenuItem,
  DropdownMenuTrigger,
 } from './ui/dropdown-menu';
+import { Button } from '@/components/ui/button';
+import { useAppContext } from '@/hooks/use-app-context';
+import { pushModal } from '@/modals';
+import type { RouterOutputs } from '@/trpc/client';
+import { cn } from '@/utils/cn';

 export default function SidebarOrganizationMenu({
  organization,
@@ -34,35 +33,35 @@ export default function SidebarOrganizationMenu({
  return (
    <>
      <Link
-        className={cn(
-          'flex items-center gap-2 rounded-md px-3 py-2 font-medium transition-all hover:bg-def-200 text-[13px]',
-        )}
        activeOptions={{ exact: true }}
-        to="/$organizationId"
+        className={cn(
+          'flex items-center gap-2 rounded-md px-3 py-2 font-medium text-[13px] transition-all hover:bg-def-200'
+        )}
        from="/$organizationId"
+        to="/$organizationId"
      >
        <LayoutListIcon size={20} />
        <div className="flex-1">Projects</div>
      </Link>
      <Link
-        className={cn(
-          'flex items-center gap-2 rounded-md px-3 py-2 font-medium transition-all hover:bg-def-200 text-[13px]',
-        )}
        activeOptions={{ exact: true }}
-        to="/$organizationId/settings"
+        className={cn(
+          'flex items-center gap-2 rounded-md px-3 py-2 font-medium text-[13px] transition-all hover:bg-def-200'
+        )}
        from="/$organizationId"
+        to="/$organizationId/settings"
      >
        <CogIcon size={20} />
        <div className="flex-1">Settings</div>
      </Link>
      {!isSelfHosted && (
        <Link
-          className={cn(
-            'flex items-center gap-2 rounded-md px-3 py-2 font-medium transition-all hover:bg-def-200 text-[13px]',
-          )}
          activeOptions={{ exact: true }}
-          to="/$organizationId/billing"
+          className={cn(
+            'flex items-center gap-2 rounded-md px-3 py-2 font-medium text-[13px] transition-all hover:bg-def-200'
+          )}
          from="/$organizationId"
+          to="/$organizationId/billing"
        >
          <CreditCardIcon size={20} />
          <div className="flex-1">Billing</div>
@@ -74,20 +73,20 @@ export default function SidebarOrganizationMenu({
      )}
      <Link
        className={cn(
-          'flex items-center gap-2 rounded-md px-3 py-2 font-medium transition-all hover:bg-def-200 text-[13px]',
+          'flex items-center gap-2 rounded-md px-3 py-2 font-medium text-[13px] transition-all hover:bg-def-200'
        )}
-        to="/$organizationId/members"
        from="/$organizationId"
+        to="/$organizationId/members"
      >
        <UsersIcon size={20} />
        <div className="flex-1">Members</div>
      </Link>
      <Link
        className={cn(
-          'flex items-center gap-2 rounded-md px-3 py-2 font-medium transition-all hover:bg-def-200 text-[13px]',
+          'flex items-center gap-2 rounded-md px-3 py-2 font-medium text-[13px] transition-all hover:bg-def-200'
        )}
-        to="/$organizationId/integrations"
        from="/$organizationId"
+        to="/$organizationId/integrations"
      >
        <WorkflowIcon size={20} />
        <div className="flex-1">Integrations</div>
@@ -138,20 +137,20 @@ export function ActionCTAButton() {
          <Button className="w-full justify-between" size="default">
            <div className="flex items-center gap-2">
              <PlusIcon size={16} />
-              <div className="relative h-5 flex items-center">
+              <div className="relative flex h-5 items-center">
                <AnimatePresence mode="popLayout">
                  <motion.span
-                    key={currentActionIndex}
-                    initial={{ y: 20, opacity: 0 }}
                    animate={{ y: 0, opacity: 1 }}
+                    className="absolute whitespace-nowrap"
                    exit={{ y: -20, opacity: 0 }}
+                    initial={{ y: 20, opacity: 0 }}
+                    key={currentActionIndex}
                    transition={{
                      type: 'spring',
                      stiffness: 300,
                      damping: 25,
                      duration: 0.3,
                    }}
-                    className="absolute whitespace-nowrap"
                  >
                    {ACTIONS[currentActionIndex].label}
                  </motion.span>
@@ -161,12 +160,12 @@ export function ActionCTAButton() {
            <ChevronDownIcon size={16} />
          </Button>
        </DropdownMenuTrigger>
-        <DropdownMenuContent className="w-56" align="start">
+        <DropdownMenuContent align="start" className="w-56">
          {ACTIONS.map((action) => (
            <DropdownMenuItem
-              onClick={action.onClick}
              className="cursor-pointer"
              key={action.label}
+              onClick={action.onClick}
            >
              <action.icon className="mr-2 h-4 w-4" />
              {action.label}
--- a/apps/start/src/components/sidebar-project-menu.tsx
+++ b/apps/start/src/components/sidebar-project-menu.tsx
@@ -1,5 +1,3 @@
-import { Button } from '@/components/ui/button';
-import { pushModal } from '@/modals';
 import type { IServiceDashboards } from '@openpanel/db';
 import { useNavigate } from '@tanstack/react-router';
 import { AnimatePresence, motion } from 'framer-motion';
@@ -30,6 +28,8 @@ import {
  DropdownMenuItem,
  DropdownMenuTrigger,
 } from './ui/dropdown-menu';
+import { Button } from '@/components/ui/button';
+import { pushModal } from '@/modals';

 interface SidebarProjectMenuProps {
  dashboards: IServiceDashboards;
@@ -40,38 +40,42 @@ export default function SidebarProjectMenu({
 }: SidebarProjectMenuProps) {
  return (
    <>
-      <div className="mb-2 font-medium text-muted-foreground">Analytics</div>
-      <SidebarLink icon={WallpaperIcon} label="Overview" href={'/'} />
+      <div className="mb-2 font-medium text-muted-foreground text-sm">
+        Analytics
+      </div>
+      <SidebarLink href={'/'} icon={WallpaperIcon} label="Overview" />
      <SidebarLink
+        href={'/dashboards'}
        icon={LayoutPanelTopIcon}
        label="Dashboards"
-        href={'/dashboards'}
      />
      <SidebarLink
+        href={'/insights'}
        icon={TrendingUpDownIcon}
        label="Insights"
-        href={'/insights'}
      />
-      <SidebarLink icon={LayersIcon} label="Pages" href={'/pages'} />
-      <SidebarLink icon={Globe2Icon} label="Realtime" href={'/realtime'} />
-      <SidebarLink icon={GanttChartIcon} label="Events" href={'/events'} />
-      <SidebarLink icon={UsersIcon} label="Sessions" href={'/sessions'} />
-      <SidebarLink icon={UsersIcon} label="Profiles" href={'/profiles'} />
-      <div className="mt-4 mb-2 font-medium text-muted-foreground">Manage</div>
+      <SidebarLink href={'/pages'} icon={LayersIcon} label="Pages" />
+      <SidebarLink href={'/realtime'} icon={Globe2Icon} label="Realtime" />
+      <SidebarLink href={'/events'} icon={GanttChartIcon} label="Events" />
+      <SidebarLink href={'/sessions'} icon={UsersIcon} label="Sessions" />
+      <SidebarLink href={'/profiles'} icon={UsersIcon} label="Profiles" />
+      <div className="mt-4 mb-2 font-medium text-muted-foreground text-sm">
+        Manage
+      </div>
      <SidebarLink
        exact={false}
+        href={'/settings'}
        icon={CogIcon}
        label="Settings"
-        href={'/settings'}
      />
-      <SidebarLink icon={GridIcon} label="References" href={'/references'} />
+      <SidebarLink href={'/references'} icon={GridIcon} label="References" />
      <SidebarLink
        exact={false}
+        href={'/notifications'}
        icon={BellIcon}
        label="Notifications"
-        href={'/notifications'}
      />
-      <SidebarLink icon={UndoDotIcon} label="Back to workspace" href={'..'} />
+      <SidebarLink href={'..'} icon={UndoDotIcon} label="Back to workspace" />
    </>
  );
 }
@@ -143,20 +147,20 @@ export function ActionCTAButton() {
          <Button className="w-full justify-between" size="default">
            <div className="flex items-center gap-2">
              <PlusIcon size={16} />
-              <div className="relative h-5 flex items-center">
+              <div className="relative flex h-5 items-center">
                <AnimatePresence mode="popLayout">
                  <motion.span
-                    key={currentActionIndex}
-                    initial={{ y: 20, opacity: 0 }}
                    animate={{ y: 0, opacity: 1 }}
+                    className="absolute whitespace-nowrap"
                    exit={{ y: -20, opacity: 0 }}
+                    initial={{ y: 20, opacity: 0 }}
+                    key={currentActionIndex}
                    transition={{
                      type: 'spring',
                      stiffness: 300,
                      damping: 25,
                      duration: 0.3,
                    }}
-                    className="absolute whitespace-nowrap"
                  >
                    {ACTIONS[currentActionIndex].label}
                  </motion.span>
@@ -166,12 +170,12 @@ export function ActionCTAButton() {
            <ChevronDownIcon size={16} />
          </Button>
        </DropdownMenuTrigger>
-        <DropdownMenuContent className="w-56" align="start">
+        <DropdownMenuContent align="start" className="w-56">
          {ACTIONS.map((action) => (
            <DropdownMenuItem
-              onClick={action.onClick}
              className="cursor-pointer"
              key={action.label}
+              onClick={action.onClick}
            >
              <action.icon className="mr-2 h-4 w-4" />
              {action.label}
--- a/apps/start/src/components/sidebar.tsx
+++ b/apps/start/src/components/sidebar.tsx
@@ -1,6 +1,3 @@
-import { useAppContext } from '@/hooks/use-app-context';
-import { useTRPC } from '@/integrations/trpc/react';
-import { cn } from '@/utils/cn';
 import type { IServiceOrganization } from '@openpanel/db';
 import { useQuery } from '@tanstack/react-query';
 import { Link, useLocation, useParams } from '@tanstack/react-router';
@@ -17,6 +14,9 @@ import SidebarProjectMenu, {
  ActionCTAButton as ActionProjectCTAButton,
 } from './sidebar-project-menu';
 import { Button } from './ui/button';
+import { useAppContext } from '@/hooks/use-app-context';
+import { useTRPC } from '@/integrations/trpc/react';
+import { cn } from '@/utils/cn';

 export function Sidebar() {
  const { organizationId, projectId } = useParams({ strict: false });
@@ -24,7 +24,7 @@ export function Sidebar() {

  // Get organizations data
  const { data: organizations = [] } = useQuery(
-    trpc.organization.list.queryOptions(),
+    trpc.organization.list.queryOptions()
  );

  // Get projects data when we have an organization
@@ -86,67 +86,75 @@ export function SidebarContainer({
  return (
    <>
      <button
-        type="button"
-        onClick={() => setActive(false)}
        className={cn(
-          'fixed bottom-0 left-0 right-0 top-0 z-40 backdrop-blur-sm transition-opacity',
+          'fixed top-0 right-0 bottom-0 left-0 z-40 backdrop-blur-sm transition-opacity',
          active
            ? 'pointer-events-auto opacity-100'
-            : 'pointer-events-none opacity-0',
+            : 'pointer-events-none opacity-0'
        )}
+        onClick={() => setActive(false)}
+        type="button"
      />
      <div
        className={cn(
-          'fixed left-0 top-0 z-40 flex h-screen w-72 flex-col border-r border-border bg-card transition-transform',
+          'fixed top-0 left-0 z-40 flex h-screen w-72 flex-col border-border border-r bg-card transition-transform',
          '-translate-x-72 lg:-translate-x-0', // responsive
-          active && 'translate-x-0', // force active on mobile
+          active && 'translate-x-0' // force active on mobile
        )}
      >
        <div className="absolute -right-12 flex h-16 items-center lg:hidden">
          <Button
-            size="icon"
            onClick={() => setActive((p) => !p)}
+            size="icon"
            variant={'outline'}
          >
            {active ? <XIcon size={16} /> : <MenuIcon size={16} />}
          </Button>
        </div>
-        <div className="flex h-16 shrink-0 items-center gap-2 border-b border-border px-4">
+        <div className="flex h-16 shrink-0 items-center gap-2 border-border border-b px-4">
          <Link to="/">
            <LogoSquare className="max-h-8" />
          </Link>
          <ProjectSelector
            align="start"
-            projects={projects}
            organizations={organizations}
+            projects={projects}
          />
        </div>
        <div
          className={cn([
-            'flex flex-grow col gap-1 overflow-auto p-4 hide-scrollbar',
+            'hide-scrollbar flex-1 overflow-auto p-4',
            "[&_a[data-status='active']]:bg-def-200",
          ])}
        >
          {children}
-
-          <div className="mt-auto w-full pt-6">
-            <div className="row gap-2 justify-between">
-              <FeedbackButton />
-              <ProfileToggle />
+        </div>
+        <div className="relative">
+          <div className="pointer-events-none absolute right-0 bottom-full left-0 h-8 bg-gradient-to-t from-card to-card/0" />
+          <div className="border-border border-t bg-card">
+            <div className="flex items-center">
+              <FeedbackButton className="h-12 flex-1 whitespace-nowrap rounded-none border-border border-r px-4 text-muted-foreground outline-0 hover:bg-accent hover:text-accent-foreground" />
+              <a
+                className="flex h-12 flex-1 items-center justify-center gap-2 border-border border-r font-medium text-muted-foreground text-sm transition-colors hover:bg-accent hover:text-accent-foreground"
+                href="https://openpanel.dev/docs"
+                rel="noopener noreferrer"
+                target="_blank"
+              >
+                Docs
+              </a>
+              <ProfileToggle className="h-12 flex-1 rounded-none hover:bg-accent hover:text-accent-foreground" />
            </div>
            {isSelfHosted && (
              <a
+                className="center-center flex h-12 cursor-pointer gap-2 border-border border-t px-4 font-medium text-muted-foreground text-sm transition-colors hover:bg-accent hover:text-accent-foreground"
                href="https://openpanel.dev/supporter"
-                className="text-center text-sm w-full mt-2 border rounded p-2 font-medium block hover:underline hover:text-primary outline-none"
              >
-                Self-hosted instance, support us!
+                <span>Support Us</span>
+                <span>Pay What You Want</span>
              </a>
            )}
          </div>
        </div>
-        <div className="fixed bottom-0 left-0 right-0 pointer-events-none">
-          <div className="h-8 w-full bg-gradient-to-t from-card to-card/0" />
-        </div>
      </div>
    </>
  );
--- a/apps/start/src/routes/index.tsx
+++ b/apps/start/src/routes/index.tsx
@@ -1,3 +1,5 @@
+import { useSuspenseQuery } from '@tanstack/react-query';
+import { createFileRoute, Link, redirect } from '@tanstack/react-router';
 import FullPageLoadingState from '@/components/full-page-loading-state';
 import { LogoSquare } from '@/components/logo';
 import { PageHeader } from '@/components/page-header';
@@ -6,11 +8,9 @@ import { useLogout } from '@/hooks/use-logout';
 import { useNumber } from '@/hooks/use-numer-formatter';
 import { useTRPC } from '@/integrations/trpc/react';
 import { createTitle } from '@/utils/title';
-import { useQuery, useSuspenseQuery } from '@tanstack/react-query';
-import { Link, createFileRoute, redirect } from '@tanstack/react-router';

 export const Route = createFileRoute('/')({
-  beforeLoad: async ({ context }) => {
+  beforeLoad: ({ context }) => {
    if (!context.session.session) {
      throw redirect({ to: '/login' });
    }
@@ -28,7 +28,7 @@ export const Route = createFileRoute('/')({
        context.trpc.organization.list.queryOptions(undefined, {
          staleTime: 0,
          gcTime: 0,
-        }),
+        })
      )
      .catch(() => []);

@@ -50,28 +50,28 @@ function LandingPage() {
  const trpc = useTRPC();
  const logout = useLogout();
  const { data: organizations } = useSuspenseQuery(
-    trpc.organization.list.queryOptions(),
+    trpc.organization.list.queryOptions()
  );
  const number = useNumber();

  return (
-    <div className="min-h-screen flex flex-col items-center justify-center">
-      <div className="max-w-2xl mx-auto px-4 col gap-12">
+    <div className="flex min-h-screen flex-col items-center justify-center">
+      <div className="col mx-auto max-w-2xl gap-12 px-4 py-8">
        <div className="col gap-4">
-          <LogoSquare className="w-full max-w-24" />
+          <LogoSquare className="w-full max-w-14 md:max-w-24" />
          <PageHeader
-            title="Welcome to OpenPanel.dev"
            description="The best web and product analytics tool out there (our honest opinion)."
+            title="Welcome to OpenPanel.dev"
          />
        </div>

        <div className="col gap-2">
          {organizations?.map((org) => (
            <Link
+              className="row items-center justify-between rounded-lg border bg-card p-3 transition-all hover:translate-x-1 hover:border-primary hover:shadow-md"
              key={org.id}
-              to={'/$organizationId'}
              params={{ organizationId: org.id }}
-              className="row justify-between items-center p-3 rounded-lg border bg-card hover:border-primary hover:shadow-md transition-all hover:translate-x-1"
+              to={'/$organizationId'}
            >
              <div className="col gap-2">
                <span className="font-medium text-lg">{org.name}</span>
@@ -89,7 +89,7 @@ function LandingPage() {
        </div>

        <div className="row gap-4">
-          <Button onClick={() => logout.mutate()} loading={logout.isPending}>
+          <Button loading={logout.isPending} onClick={() => logout.mutate()}>
            Log out
          </Button>
        </div>