feat(ui): new conversation sidebar

src/components/Main.astro

@@ -10,7 +10,6 @@ import Conversation from './main/Conversation'
 <main class="relative h-full flex-1 flex flex-col overflow-hidden bg-base">
  <Header client:load />
  <main class="flex-1 mt-14 flex flex-col overflow-hidden">
- <!-- <ConversationConfiguration /> -->
  <div class="flex-1 relative overflow-hidden">
  <Conversation client:only />
  </div>

src/components/conversations/ConversationSidebar.tsx

@@ -2,7 +2,6 @@ import { For } from 'solid-js'
 import { useStore } from '@nanostores/solid'
 import { useI18n } from '@/hooks'
 import { conversationMapSortList } from '@/stores/conversation'
-import logo from '@/assets/logo.svg'
 import ConversationSidebarItem from './ConversationSidebarItem'
 import ConversationSidebarAdd from './ConversationSidebarAdd'
 
@@ -12,16 +11,25 @@ export default () => {
 
  return (
  <div class="h-full flex flex-col bg-sidebar">
- <header class="fi gap-1.5 h-14 px-6">
- <img src={logo} alt="logo" class="w-4" />
+ <header class="h-14 fi justify-between px-4 text-xs uppercase">
+ <p>{t('conversations.title')}</p>
+ <div class="fi gap-1">
+ {/* <Button
+ icon="i-carbon-search"
+ onClick={() => {}}
+ size="sm"
+ /> */}
+ <ConversationSidebarAdd />
+ </div>
  </header>
  <div class="flex-1 overflow-auto">
- <For each={$conversationMapSortList()}>
- {instance => (
- <ConversationSidebarItem instance={instance} />
- )}
- </For>
- <ConversationSidebarAdd />
+ <div class="px-2">
+ <For each={$conversationMapSortList()}>
+ {instance => (
+ <ConversationSidebarItem instance={instance} />
+ )}
+ </For>
+ </div>
  </div>
  </div>
  )

src/components/conversations/ConversationSidebarAdd.tsx

@@ -1,5 +1,6 @@
 import { useI18n } from '@/hooks'
 import { addConversation } from '@/stores/conversation'
+import Button from '../ui/Button'
 
 export default () => {
  const { t } = useI18n()
@@ -8,14 +9,12 @@ export default () => {
  }
 
  return (
- <div
- class="flex items-center h-18 px-4 gap-4 border-b border-l-4 border-l-transparent border-b-base hv-base"
+ <Button
+ icon="i-carbon-add"
  onClick={handleAdd}
+ size="sm"
  >
- <div class="w-8 h-8 flex items-center justify-center op-60">
- <div class="i-carbon-add text-2xl" />
- </div>
- <div class="op-60">{t('conversations.add')}</div>
- </div>
+ {t('conversations.add')}
+ </Button>
  )
 }

src/components/conversations/ConversationSidebarItem.tsx

@@ -26,15 +26,15 @@ export default ({ instance }: Props) => {
  return (
  <div
  class={[
- 'group fi h-16 px-4 gap-3 border-b border-l-4 border-b-base hv-base',
- instance.id === $currentConversationId() ? 'border-l-emerald-600' : 'border-l-transparent',
+ 'group fi h-10 my-0.5 px-2 gap-2 hv-base rounded-md',
+ instance.id === $currentConversationId() ? 'bg-base-100' : '',
  ].join(' ')}
  onClick={handleClick}
  >
- <div class="fcc w-8 h-8 rounded-full text-2xl shrink-0">
- {instance.icon ? instance.icon : <div class="text-xl i-carbon-chat" />}
+ <div class="fcc w-8 h-8 rounded-full text-xl shrink-0">
+ {instance.icon ? instance.icon : <div class="text-base i-carbon-chat" />}
  </div>
- <div class="flex-1 truncate">{ instance.name || 'Untitled' }</div>
+ <div class="flex-1 truncate text-sm">{ instance.name || 'Untitled' }</div>
  <div class={isTouchDevice ? '' : 'hidden group-hover:block'}>
  <div
  class="inline-flex p-2 items-center gap-1 rounded-md hv-base"

src/components/ui/Button.tsx

@@ -0,0 +1,35 @@
+import { Show } from 'solid-js'
+import type { JSXElement } from 'solid-js'
+
+interface Props {
+ icon?: string
+ text?: string
+ size?: 'sm' | 'md' | 'lg'
+ children?: JSXElement
+ onClick: () => void
+}
+
+export default (props: Props) => {
+ const sizeClass = {
+ sm: 'px-2 h-7 text-xs',
+ md: 'px-3 h-10 text-sm',
+ lg: 'px-3 h-10 text-sm',
+ }[props.size || 'md']
+ return (
+ <div
+ class={[
+ 'fi gap-1 bg-base-100 border border-darker rounded-md cursor-pointer transition-colors',
+ 'hover:(bg-base-200)',
+ sizeClass,
+ ].join(' ')}
+ onClick={props.onClick}
+ >
+ <Show when={props.icon}>
+ <div class={`text-sm ${props.icon}`} />
+ </Show>
+ <Show when={props.text || props.children}>
+ <div>{props.text || props.children}</div>
+ </Show>
+ </div>
+ )
+}

src/components/ui/Sidebar.tsx

@@ -8,7 +8,7 @@ interface Props {
 
 export default (props: Props) => {
  const containerBaseClass = {
- left: 'w-[300px] h-100dvh border-r',
+ left: 'w-[260px] h-100dvh border-r',
  right: 'w-[300px] h-100dvh border-l',
  }[props.direction]
 

src/locale/lang/en.ts

@@ -20,7 +20,7 @@ export const en = {
  },
  conversations: {
  title: 'Conversations',
- add: 'New Conversation',
+ add: 'New',
  recent: 'Recents',
  noRecent: 'No recents',
  },

src/locale/lang/zh-cn.ts

@@ -20,7 +20,7 @@ export const zhCN = {
  },
  conversations: {
  title: '对话列表',
- add: '创建新对话',
+ add: '新对话',
  recent: '最近对话',
  noRecent: '暂无最近对话',
  },

unocss.config.ts

@@ -43,17 +43,18 @@ export default defineConfig({
  ],
  transformers: [transformerVariantGroup(), transformerDirectives()],
  shortcuts: [{
- 'bg-base': 'bg-light-100 dark:bg-[#18191a]',
- 'bg-base-100': 'bg-light-200 dark:bg-[#18191a]',
- 'bg-blur': 'bg-light-200/85 dark:bg-[#18191a]/85 backdrop-blur-xl backdrop-saturate-150',
- 'bg-sidebar': 'bg-light-400 dark:bg-[#18191a]',
+ 'bg-base': 'bg-light-100 dark:bg-[#080808]',
+ 'bg-base-100': 'bg-light-200 dark:bg-[#151515]',
+ 'bg-base-200': 'bg-light-300 dark:bg-[#1a1a1a]',
+ 'bg-blur': 'bg-light-200/85 dark:bg-[#080808]/85 backdrop-blur-xl backdrop-saturate-150',
+ 'bg-sidebar': 'bg-light-400 dark:bg-[#080808]',
  'bg-modal': 'bg-base dark:bg-base-100',
  'bg-darker': 'bg-black/4 dark:bg-white/4',
  'fg-base': 'text-dark dark:text-[#dadada]',
  'border-base': 'border-black/6 dark:border-white/6',
  'border-b-base': 'border-b-black/6 dark:border-b-white/6',
  'border-lighter': 'border-light-600 dark:border-dark-300',
- 'border-darker': 'border-black/50 dark:border-white/50',
+ 'border-darker': 'border-black/10 dark:border-white/10',
  'placeholder-base': 'placeholder:op-50 dark:placeholder:op-30',
  'hv-base': 'transition-colors cursor-pointer hover:bg-darker',
  'hv-foreground': 'transition-opacity cursor-pointer op-70 hover:op-100',