feat: unify settings (#3128)

packages/ui/primitives/avatar.tsx

@@ -68,7 +68,7 @@ const AvatarWithText = ({
 
     <div className={cn('flex flex-col truncate text-left font-normal text-sm', textSectionClassName)}>
       <span className="truncate text-foreground">{primaryText}</span>
-      <span className="truncate text-muted-foreground text-xs">{secondaryText}</span>
+      {secondaryText && <span className="truncate text-muted-foreground text-xs">{secondaryText}</span>}
     </div>
 
     {rightSideComponent}

packages/ui/primitives/document-upload-button.tsx

@@ -1,9 +1,7 @@
 import { useCurrentOrganisation } from '@documenso/lib/client-only/providers/organisation';
-import { useSession } from '@documenso/lib/client-only/providers/session';
 import { APP_DOCUMENT_UPLOAD_SIZE_LIMIT, IS_BILLING_ENABLED } from '@documenso/lib/constants/app';
 import { getAllowedUploadMimeTypes } from '@documenso/lib/constants/document-conversion';
 import { megabytesToBytes } from '@documenso/lib/universal/unit-convertions';
-import { isPersonalLayout } from '@documenso/lib/utils/organisations';
 import type { MessageDescriptor } from '@lingui/core';
 import { msg } from '@lingui/core/macro';
 import { useLingui } from '@lingui/react';
@@ -45,12 +43,8 @@ export const DocumentUploadButton = ({
 }: DocumentUploadButtonProps) => {
   const { _ } = useLingui();
 
-  const { organisations } = useSession();
-
   const organisation = useCurrentOrganisation();
 
-  const isPersonalLayoutMode = isPersonalLayout(organisations);
-
   const { getRootProps, getInputProps } = useDropzone({
     accept: getAllowedUploadMimeTypes(),
     multiple: internalVersion === '2',
@@ -76,7 +70,7 @@ export const DocumentUploadButton = ({
         <Tooltip>
           <TooltipTrigger asChild>
             <Button className="bg-warning hover:bg-warning/80" asChild>
-              <Link to={isPersonalLayoutMode ? `/settings/billing` : `/o/${organisation.url}/settings/billing`}>
+              <Link to={`/o/${organisation.url}/settings/billing`}>
                 <Trans>Upgrade</Trans>
               </Link>
             </Button>

packages/ui/styles/theme.css

@@ -243,6 +243,38 @@
   display: none;
 }
 
+/*
+ * Scrollbar hidden until the element is hovered, then a thin thumb is revealed.
+ * The track keeps a constant width so revealing the thumb doesn't shift layout;
+ * the thumb colour transitions in on WebKit (Firefox snaps, which is fine).
+ */
+.hover-scrollbar {
+  scrollbar-width: thin;
+  scrollbar-color: transparent transparent;
+}
+
+.hover-scrollbar:hover {
+  scrollbar-color: hsl(var(--muted-foreground) / 0.4) transparent;
+}
+
+.hover-scrollbar::-webkit-scrollbar {
+  width: 8px;
+  height: 8px;
+  background: transparent;
+}
+
+.hover-scrollbar::-webkit-scrollbar-thumb {
+  background-color: transparent;
+  border: 2px solid transparent;
+  background-clip: padding-box;
+  border-radius: 9999px;
+  transition: background-color 200ms ease;
+}
+
+.hover-scrollbar:hover::-webkit-scrollbar-thumb {
+  background-color: hsl(var(--muted-foreground) / 0.4);
+}
+
 /* .custom-scrollbar::-webkit-scrollbar-track {
   border-radius: 10px;
 }