apunkt/SurfSense
1
0
Fork 0
mirror of https://github.com/MODSetter/SurfSense.git synced 2026-05-21 18:55:16 +02:00
Code Issues Projects Releases Packages Wiki Activity

refactor: improve UI component styles and loading text

Browse source 
- Removed unused Check icon from SidebarUserProfile and Select components.
- Enhanced hover and focus styles for SidebarUserProfile and ModelSelector items for better user experience.
- Updated loading text in ModelSelector for consistency.
This commit is contained in:
Anish Sarkar 2026-01-20 17:53:36 +05:30
parent 1f06794021
commit 1a0503f683
3 changed files with 22 additions and 29 deletions
Download patch file Download diff file Expand all files Collapse all files

28
surfsense_web/components/layout/ui/sidebar/SidebarUserProfile.tsx
View file

@ -1,6 +1,6 @@
"use client"; "use client";
import { Check, ChevronUp, Laptop, Languages, LogOut, Moon, Settings, Sun } from "lucide-react"; import { ChevronUp, Laptop, Languages, LogOut, Moon, Settings, Sun } from "lucide-react";
import { useTranslations } from "next-intl"; import { useTranslations } from "next-intl";
import { import {
DropdownMenu, DropdownMenu,
@ -195,14 +195,13 @@ export function SidebarUserProfile({
key={themeOption.value} key={themeOption.value}
onClick={() => handleThemeChange(themeOption.value)} onClick={() => handleThemeChange(themeOption.value)}
className={cn( className={cn(
"mb-1 last:mb-0", "mb-1 last:mb-0 transition-all",
!isSelected && "focus:bg-transparent hover:bg-transparent", "hover:bg-accent/50",
isSelected && "bg-accent focus:!bg-accent hover:!bg-accent" isSelected && "bg-accent/80"
)} )}
> >
<Icon className="mr-2 h-4 w-4" /> <Icon className="mr-2 h-4 w-4" />
<span className="flex-1">{t(themeOption.value)}</span> <span className="flex-1">{t(themeOption.value)}</span>
{isSelected && <Check className="ml-2 h-4 w-4" />}
</DropdownMenuItem> </DropdownMenuItem>
); );
})} })}
@ -225,9 +224,9 @@ export function SidebarUserProfile({
key={language.code} key={language.code}
onClick={() => handleLanguageChange(language.code)} onClick={() => handleLanguageChange(language.code)}
className={cn( className={cn(
"mb-1 last:mb-0", "mb-1 last:mb-0 transition-all",
!isSelected && "focus:bg-transparent hover:bg-transparent", "hover:bg-accent/50",
isSelected && "bg-accent focus:!bg-accent hover:!bg-accent" isSelected && "bg-accent/80"
)} )}
> >
<span className="mr-2">{language.flag}</span> <span className="mr-2">{language.flag}</span>
@ -312,14 +311,13 @@ export function SidebarUserProfile({
key={themeOption.value} key={themeOption.value}
onClick={() => handleThemeChange(themeOption.value)} onClick={() => handleThemeChange(themeOption.value)}
className={cn( className={cn(
"mb-1 last:mb-0", "mb-1 last:mb-0 transition-all",
!isSelected && "focus:bg-transparent hover:bg-transparent", "hover:bg-accent/50",
isSelected && "bg-accent focus:!bg-accent hover:!bg-accent" isSelected && "bg-accent/80"
)} )}
> >
<Icon className="mr-2 h-4 w-4" /> <Icon className="mr-2 h-4 w-4" />
<span className="flex-1">{t(themeOption.value)}</span> <span className="flex-1">{t(themeOption.value)}</span>
{isSelected && <Check className="ml-2 h-4 w-4" />}
</DropdownMenuItem> </DropdownMenuItem>
); );
})} })}
@ -342,9 +340,9 @@ export function SidebarUserProfile({
key={language.code} key={language.code}
onClick={() => handleLanguageChange(language.code)} onClick={() => handleLanguageChange(language.code)}
className={cn( className={cn(
"mb-1 last:mb-0", "mb-1 last:mb-0 transition-all",
!isSelected && "focus:bg-transparent hover:bg-transparent", "hover:bg-accent/50",
isSelected && "bg-accent focus:!bg-accent hover:!bg-accent" isSelected && "bg-accent/80"
)} )}
> >
<span className="mr-2">{language.flag}</span> <span className="mr-2">{language.flag}</span>

14
surfsense_web/components/new-chat/model-selector.tsx
View file

@ -182,7 +182,7 @@ export function ModelSelector({ onEdit, onAddNew, className }: ModelSelectorProp
{isLoading ? ( {isLoading ? (
<> <>
<Loader2 className="h-4 w-4 animate-spin text-muted-foreground" /> <Loader2 className="h-4 w-4 animate-spin text-muted-foreground" />
<span className="text-muted-foreground hidden md:inline">Loading...</span> <span className="text-muted-foreground hidden md:inline">Loading</span>
</> </>
) : currentConfig ? ( ) : currentConfig ? (
<> <>
@ -259,9 +259,9 @@ export function ModelSelector({ onEdit, onAddNew, className }: ModelSelectorProp
value={`global-${config.id}`} value={`global-${config.id}`}
onSelect={() => handleSelectConfig(config)} onSelect={() => handleSelectConfig(config)}
className={cn( className={cn(
"mx-2 rounded-lg mb-1 cursor-pointer", "mx-2 rounded-lg mb-1 cursor-pointer transition-all",
!isSelected && "data-[selected=true]:bg-transparent hover:bg-transparent", "hover:bg-accent/50",
isSelected && "bg-accent/80 data-[selected=true]:!bg-accent/80 hover:!bg-accent/80" isSelected && "bg-accent/80"
)} )}
> >
<div className="flex items-center justify-between w-full gap-2"> <div className="flex items-center justify-between w-full gap-2">
@ -321,9 +321,9 @@ export function ModelSelector({ onEdit, onAddNew, className }: ModelSelectorProp
value={`user-${config.id}`} value={`user-${config.id}`}
onSelect={() => handleSelectConfig(config)} onSelect={() => handleSelectConfig(config)}
className={cn( className={cn(
"mx-2 rounded-lg mb-1 cursor-pointer", "mx-2 rounded-lg mb-1 cursor-pointer transition-all",
!isSelected && "data-[selected=true]:bg-transparent hover:bg-transparent", "hover:bg-accent/50",
isSelected && "bg-accent/80 data-[selected=true]:!bg-accent/80 hover:!bg-accent/80" isSelected && "bg-accent/80"
)} )}
> >
<div className="flex items-center justify-between w-full gap-2"> <div className="flex items-center justify-between w-full gap-2">

9
surfsense_web/components/ui/select.tsx
View file

@ -1,7 +1,7 @@
"use client"; "use client";
import * as SelectPrimitive from "@radix-ui/react-select"; import * as SelectPrimitive from "@radix-ui/react-select";
import { CheckIcon, ChevronDownIcon, ChevronUpIcon } from "lucide-react"; import { ChevronDownIcon, ChevronUpIcon } from "lucide-react";
import type * as React from "react"; import type * as React from "react";
import { cn } from "@/lib/utils"; import { cn } from "@/lib/utils";
@ -94,16 +94,11 @@ function SelectItem({
<SelectPrimitive.Item <SelectPrimitive.Item
data-slot="select-item" data-slot="select-item"
className={cn( className={cn(
"focus:bg-accent focus:text-accent-foreground [&_svg:not([class*='text-'])]:text-muted-foreground relative flex w-full cursor-default items-center gap-2 rounded-sm py-1.5 pr-8 pl-2 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 *:[span]:last:flex *:[span]:last:items-center *:[span]:last:gap-2", "focus:bg-accent/50 focus:text-accent-foreground hover:bg-accent/50 [&_svg:not([class*='text-'])]:text-muted-foreground relative flex w-full cursor-default items-center gap-2 rounded-sm py-1.5 px-2 text-sm outline-hidden select-none transition-all data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 *:[span]:last:flex *:[span]:last:items-center *:[span]:last:gap-2 data-[highlighted]:bg-accent/50",
className className
)} )}
{...props} {...props}
> >
<span className="absolute right-2 flex size-3.5 items-center justify-center">
<SelectPrimitive.ItemIndicator>
<CheckIcon className="size-4" />
</SelectPrimitive.ItemIndicator>
</span>
<SelectPrimitive.ItemText>{children}</SelectPrimitive.ItemText> <SelectPrimitive.ItemText>{children}</SelectPrimitive.ItemText>
</SelectPrimitive.Item> </SelectPrimitive.Item>
); );