From 3bc31b3e3f33a38146acc63d8da2e16a98a403fb Mon Sep 17 00:00:00 2001 From: Glen Huang Date: Fri, 19 Sep 2025 22:09:59 +0800 Subject: [PATCH 1/2] ui: use css modules for sidebar components --- .../src/components/Sidebar/SidebarHeader.css | 93 ------------- .../Sidebar/SidebarHeader.module.css | 89 +++++++++++++ .../src/components/Sidebar/SidebarHeader.tsx | 22 ++-- .../ui/src/components/Sidebar/SidebarPane.css | 123 ------------------ .../components/Sidebar/SidebarPane.module.css | 120 +++++++++++++++++ .../Sidebar/SidebarPane.stories.tsx | 2 +- .../ui/src/components/Sidebar/SidebarPane.tsx | 23 ++-- .../src/components/Sidebar/SidebarSection.css | 15 --- .../Sidebar/SidebarSection.module.css | 12 ++ .../src/components/Sidebar/SidebarSection.tsx | 16 ++- .../components/Sidebar/SidebarSectionForm.tsx | 68 +++++----- 11 files changed, 280 insertions(+), 303 deletions(-) delete mode 100644 pkgs/clan-app/ui/src/components/Sidebar/SidebarHeader.css create mode 100644 pkgs/clan-app/ui/src/components/Sidebar/SidebarHeader.module.css delete mode 100644 pkgs/clan-app/ui/src/components/Sidebar/SidebarPane.css create mode 100644 pkgs/clan-app/ui/src/components/Sidebar/SidebarPane.module.css delete mode 100644 pkgs/clan-app/ui/src/components/Sidebar/SidebarSection.css create mode 100644 pkgs/clan-app/ui/src/components/Sidebar/SidebarSection.module.css diff --git a/pkgs/clan-app/ui/src/components/Sidebar/SidebarHeader.css b/pkgs/clan-app/ui/src/components/Sidebar/SidebarHeader.css deleted file mode 100644 index 92ffc7ae1..000000000 --- a/pkgs/clan-app/ui/src/components/Sidebar/SidebarHeader.css +++ /dev/null @@ -1,93 +0,0 @@ -div.sidebar-header { - @apply flex items-center justify-center w-full px-1 py-1; - @apply border border-inv-3 rounded-md rounded-bl-none rounded-br-none; - - background: linear-gradient( - 90deg, - theme(colors.bg.inv.2) 0%, - theme(colors.bg.inv.3) 0% - ); - - & > .dropdown-trigger { - @apply flex items-center justify-between flex-grow px-1 py-1; - @apply rounded-tl-md rounded-tr-md; - @apply border border-transparent border-b-0; - - transition: all 250ms ease-in-out; - - div.clan-label { - @apply flex items-center gap-2 justify-start; - - & > .clan-icon { - @apply flex justify-center items-center; - @apply rounded-full bg-inv-4 w-7 h-7; - } - } - - .icon[data-icon-name="CaretDown"] { - transition: transform 300ms cubic-bezier(0.87, 0, 0.13, 1); - } - - &[data-expanded] { - @apply bg-def-1 border-def-2; - - .icon[data-icon-name="CaretDown"] { - transform: rotate(180deg); - } - } - } -} - -.sidebar-dropdown-content { - @apply flex flex-col w-full px-2 py-1.5 z-10 gap-3; - @apply bg-def-1 rounded-bl-md rounded-br-md; - @apply border border-def-2; - - animation: sidebarNavContentHide 250ms ease-in forwards; - - .dropdown-item { - @apply flex items-center justify-start w-full px-1.5 py-2 gap-2 rounded; - - &:hover { - @apply bg-def-acc-2 cursor-pointer; - } - } - - .dropdown-group { - @apply flex flex-col gap-2; - @apply px-1; - - .dropdown-group-label { - @apply flex items-baseline justify-between w-full; - } - - .dropdown-group-items { - @apply rounded px-1 py-1.5 bg-def-2; - } - } -} - -.sidebar-dropdown-content[data-expanded] { - animation: sidebarNavContentShow 250ms ease-out; -} - -@keyframes sidebarNavContentShow { - from { - opacity: 0; - transform: scale(0.96); - } - to { - opacity: 1; - transform: scale(1); - } -} -@keyframes sidebarNavContentHide { - from { - opacity: 1; - transform: scale(1); - } - to { - opacity: 0; - transform: scale(0.96); - } -} diff --git a/pkgs/clan-app/ui/src/components/Sidebar/SidebarHeader.module.css b/pkgs/clan-app/ui/src/components/Sidebar/SidebarHeader.module.css new file mode 100644 index 000000000..087704ed5 --- /dev/null +++ b/pkgs/clan-app/ui/src/components/Sidebar/SidebarHeader.module.css @@ -0,0 +1,89 @@ +.sidebarHeader { + @apply flex items-center justify-center w-full px-1 py-1; + @apply border border-inv-3 rounded-md rounded-bl-none rounded-br-none; + + background: linear-gradient( + 90deg, + theme(colors.bg.inv.2) 0%, + theme(colors.bg.inv.3) 0% + ); +} + +.dropDownTrigger { + @apply flex items-center justify-between flex-grow px-1 py-1; + @apply rounded-tl-md rounded-tr-md; + @apply border border-transparent border-b-0; + + transition: all 250ms ease-in-out; + + .icon[data-icon-name="CaretDown"] { + transition: transform 300ms cubic-bezier(0.87, 0, 0.13, 1); + } + + &[data-expanded] { + @apply bg-def-1 border-def-2; + + .icon[data-icon-name="CaretDown"] { + transform: rotate(180deg); + } + } +} + +.clanLabel { + @apply flex items-center gap-2 justify-start; +} +.clanIcon { + @apply flex justify-center items-center; + @apply rounded-full bg-inv-4 w-7 h-7; +} + +.dropDownContent { + @apply flex flex-col w-full px-2 py-1.5 z-10 gap-3; + @apply bg-def-1 rounded-bl-md rounded-br-md; + @apply border border-def-2; + + animation: sidebarNavContentHide 250ms ease-in forwards; +} +.dropDownContent[data-expanded] { + animation: sidebarNavContentShow 250ms ease-out; +} + +.dropdownItem { + @apply flex items-center justify-start w-full px-1.5 py-2 gap-2 rounded; + + &:hover { + @apply bg-def-acc-2 cursor-pointer; + } +} + +.dropdownGroup { + @apply flex flex-col gap-2; + @apply px-1; +} +.dropdownGroupLabel { + @apply flex items-baseline justify-between w-full; +} +.dropdownGroupItems { + @apply rounded px-1 py-1.5 bg-def-2; +} + +@keyframes sidebarNavContentShow { + from { + opacity: 0; + transform: scale(0.96); + } + to { + opacity: 1; + transform: scale(1); + } +} +@keyframes sidebarNavContentHide { + from { + opacity: 1; + transform: scale(1); + } + to { + opacity: 0; + transform: scale(0.96); + } +} diff --git a/pkgs/clan-app/ui/src/components/Sidebar/SidebarHeader.tsx b/pkgs/clan-app/ui/src/components/Sidebar/SidebarHeader.tsx index 756e76412..89eb01463 100644 --- a/pkgs/clan-app/ui/src/components/Sidebar/SidebarHeader.tsx +++ b/pkgs/clan-app/ui/src/components/Sidebar/SidebarHeader.tsx @@ -1,4 +1,4 @@ -import "./SidebarHeader.css"; +import styles from "./SidebarHeader.module.css"; import Icon from "@/src/components/Icon/Icon"; import { DropdownMenu } from "@kobalte/core/dropdown-menu"; import { useNavigate } from "@solidjs/router"; @@ -30,7 +30,7 @@ export const SidebarHeader = () => { .sort((a, b) => a.details.name.localeCompare(b.details.name)); return ( -
+
{ - -
-
+ +
+
{ - + setShowSettings(true)} > { Settings - - + + { Add -
+
{(clan) => ( { setActiveClanURI(clan.uri); }} diff --git a/pkgs/clan-app/ui/src/components/Sidebar/SidebarPane.css b/pkgs/clan-app/ui/src/components/Sidebar/SidebarPane.css deleted file mode 100644 index 2591684a3..000000000 --- a/pkgs/clan-app/ui/src/components/Sidebar/SidebarPane.css +++ /dev/null @@ -1,123 +0,0 @@ -div.sidebar-pane { - @apply flex flex-col border-none z-20 h-full; - - animation: sidebarPaneShow 250ms ease-in forwards; - - &.open { - @apply w-72; - } - - &.closing { - animation: sidebarPaneHide 250ms ease-out 300ms forwards; - - & > div.header > *, - & > div.sub-header > *, - & > div.body > * { - animation: sidebarFadeOut 250ms ease-out forwards; - } - } - - & > div.header { - @apply flex items-center justify-between px-3 py-2 rounded-t-[0.5rem]; - @apply border-t-[1px] border-t-bg-inv-3 - border-r-[1px] border-r-bg-inv-3 - border-b-2 border-b-bg-inv-4 - border-l-[1px] border-l-bg-inv-3; - - background: linear-gradient( - 90deg, - theme(colors.bg.inv.3) 0%, - theme(colors.bg.inv.4) 100% - ); - - & > * { - @apply opacity-0; - animation: sidebarFadeIn 250ms ease-in 250ms forwards; - } - } - - & > div.sub-header { - @apply px-3 py-1; - @apply border-b-[1px] border-b-bg-inv-4; - @apply border-r-[1px] border-r-bg-inv-3 border-l-[1px] border-l-bg-inv-3; - - background: - linear-gradient(0deg, rgba(0, 0, 0, 0.08) 0%, rgba(0, 0, 0, 0.08) 100%), - linear-gradient( - 90deg, - theme(colors.bg.inv.3) 0%, - theme(colors.bg.inv.4) 100% - ); - - & > * { - @apply opacity-0; - animation: sidebarFadeIn 250ms ease-in 250ms forwards; - } - } - - & > div.body { - @apply flex flex-col gap-4 px-2 pt-4 pb-3 w-full h-full; - @apply backdrop-blur-md; - @apply rounded-b-[0.5rem] - border-r-[1px] border-r-bg-inv-3 - border-b-2 border-b-bg-inv-4 - border-l-[1px] border-l-bg-inv-3; - - background: - linear-gradient(0deg, rgba(0, 0, 0, 0.2) 0%, rgba(0, 0, 0, 0.2) 100%), - linear-gradient( - 180deg, - theme(colors.bg.inv.2) 0%, - theme(colors.bg.inv.3) 100% - ); - - & > * { - @apply opacity-0; - animation: sidebarFadeIn 250ms ease-in 350ms forwards; - } - } -} - -@keyframes sidebarPaneShow { - 0% { - @apply w-0; - @apply opacity-0; - } - 10% { - @apply w-8; - } - 30% { - @apply opacity-100; - } - 100% { - @apply w-72; - } -} - -@keyframes sidebarPaneHide { - 90% { - @apply w-8; - } - 100% { - @apply w-0; - @apply opacity-0; - } -} - -@keyframes sidebarFadeIn { - from { - opacity: 0; - } - to { - opacity: 1; - } -} - -@keyframes sidebarFadeOut { - from { - opacity: 1; - } - to { - opacity: 0; - } -} diff --git a/pkgs/clan-app/ui/src/components/Sidebar/SidebarPane.module.css b/pkgs/clan-app/ui/src/components/Sidebar/SidebarPane.module.css new file mode 100644 index 000000000..ed9abf955 --- /dev/null +++ b/pkgs/clan-app/ui/src/components/Sidebar/SidebarPane.module.css @@ -0,0 +1,120 @@ +.sidebarPane { + @apply flex flex-col border-none z-20 h-full; + @apply w-72; + + animation: sidebarPaneShow 250ms ease-in forwards; + + &.closing { + animation: sidebarPaneHide 250ms ease-out 300ms forwards; + + & > .header > *, + & > .subHeader > *, + & > .body > * { + animation: sidebarFadeOut 250ms ease-out forwards; + } + } +} + +.header { + @apply flex items-center justify-between px-3 py-2 rounded-t-[0.5rem]; + @apply border-t-[1px] border-t-bg-inv-3 + border-r-[1px] border-r-bg-inv-3 + border-b-2 border-b-bg-inv-4 + border-l-[1px] border-l-bg-inv-3; + + background: linear-gradient( + 90deg, + theme(colors.bg.inv.3) 0%, + theme(colors.bg.inv.4) 100% + ); + + & > * { + @apply opacity-0; + animation: sidebarFadeIn 250ms ease-in 250ms forwards; + } +} + +.subHeader { + @apply px-3 py-1; + @apply border-b-[1px] border-b-bg-inv-4; + @apply border-r-[1px] border-r-bg-inv-3 border-l-[1px] border-l-bg-inv-3; + + background: + linear-gradient(0deg, rgba(0, 0, 0, 0.08) 0%, rgba(0, 0, 0, 0.08) 100%), + linear-gradient( + 90deg, + theme(colors.bg.inv.3) 0%, + theme(colors.bg.inv.4) 100% + ); + + & > * { + @apply opacity-0; + animation: sidebarFadeIn 250ms ease-in 250ms forwards; + } +} + +.body { + @apply flex flex-col gap-4 px-2 pt-4 pb-3 w-full h-full; + @apply backdrop-blur-md; + @apply rounded-b-[0.5rem] + border-r-[1px] border-r-bg-inv-3 + border-b-2 border-b-bg-inv-4 + border-l-[1px] border-l-bg-inv-3; + + background: + linear-gradient(0deg, rgba(0, 0, 0, 0.2) 0%, rgba(0, 0, 0, 0.2) 100%), + linear-gradient( + 180deg, + theme(colors.bg.inv.2) 0%, + theme(colors.bg.inv.3) 100% + ); + + & > * { + @apply opacity-0; + animation: sidebarFadeIn 250ms ease-in 350ms forwards; + } +} + +@keyframes sidebarPaneShow { + 0% { + @apply w-0; + @apply opacity-0; + } + 10% { + @apply w-8; + } + 30% { + @apply opacity-100; + } + 100% { + @apply w-72; + } +} + +@keyframes sidebarPaneHide { + 90% { + @apply w-8; + } + 100% { + @apply w-0; + @apply opacity-0; + } +} + +@keyframes sidebarFadeIn { + from { + opacity: 0; + } + to { + opacity: 1; + } +} + +@keyframes sidebarFadeOut { + from { + opacity: 1; + } + to { + opacity: 0; + } +} diff --git a/pkgs/clan-app/ui/src/components/Sidebar/SidebarPane.stories.tsx b/pkgs/clan-app/ui/src/components/Sidebar/SidebarPane.stories.tsx index 9d1cbeece..8c0b638c1 100644 --- a/pkgs/clan-app/ui/src/components/Sidebar/SidebarPane.stories.tsx +++ b/pkgs/clan-app/ui/src/components/Sidebar/SidebarPane.stories.tsx @@ -158,7 +158,7 @@ export const Default: Story = { )} - + Static Content diff --git a/pkgs/clan-app/ui/src/components/Sidebar/SidebarPane.tsx b/pkgs/clan-app/ui/src/components/Sidebar/SidebarPane.tsx index e6305db1e..d9584bccb 100644 --- a/pkgs/clan-app/ui/src/components/Sidebar/SidebarPane.tsx +++ b/pkgs/clan-app/ui/src/components/Sidebar/SidebarPane.tsx @@ -1,12 +1,11 @@ -import { createSignal, JSX, onMount, Show } from "solid-js"; -import "./SidebarPane.css"; +import { createSignal, JSX, Show } from "solid-js"; +import styles from "./SidebarPane.module.css"; import { Typography } from "@/src/components/Typography/Typography"; import Icon from "../Icon/Icon"; import { Button as KButton } from "@kobalte/core/button"; import cx from "classnames"; export interface SidebarPaneProps { - class?: string; title: string; onClose: () => void; subHeader?: JSX.Element; @@ -15,26 +14,20 @@ export interface SidebarPaneProps { export const SidebarPane = (props: SidebarPaneProps) => { const [closing, setClosing] = createSignal(false); - const [open, setOpened] = createSignal(true); + // FIXME: use animationend event instead of setTimeout const onClose = () => { setClosing(true); setTimeout(() => props.onClose(), 550); }; - onMount(() => { - setTimeout(() => { - setOpened(true); - }, 250); - }); return (
-
+
{props.title} @@ -43,9 +36,9 @@ export const SidebarPane = (props: SidebarPaneProps) => {
-
{props.subHeader}
+
{props.subHeader}
 -
{props.children}
+
{props.children}
); }; diff --git a/pkgs/clan-app/ui/src/components/Sidebar/SidebarSection.css b/pkgs/clan-app/ui/src/components/Sidebar/SidebarSection.css deleted file mode 100644 index b7b7fd943..000000000 --- a/pkgs/clan-app/ui/src/components/Sidebar/SidebarSection.css +++ /dev/null @@ -1,15 +0,0 @@ -div.sidebar-section { - @apply flex flex-col gap-2 w-full h-full; - - & > div.header { - @apply flex items-center justify-between px-1.5; - - & > div.controls { - @apply flex items-center justify-end; - } - } - - & > div.content { - @apply w-full h-fit px-1.5 py-3 rounded-md bg-inv-4; - } -} diff --git a/pkgs/clan-app/ui/src/components/Sidebar/SidebarSection.module.css b/pkgs/clan-app/ui/src/components/Sidebar/SidebarSection.module.css new file mode 100644 index 000000000..99e3b4b65 --- /dev/null +++ b/pkgs/clan-app/ui/src/components/Sidebar/SidebarSection.module.css @@ -0,0 +1,12 @@ +.sidebarSection { + @apply flex flex-col gap-2 w-full h-full; +} +.header { + @apply flex items-center justify-between px-1.5; +} +.controls { + @apply flex items-center justify-end h-4; +} +.content { + @apply w-full h-fit px-1.5 py-3 rounded-md bg-inv-4; +} diff --git a/pkgs/clan-app/ui/src/components/Sidebar/SidebarSection.tsx b/pkgs/clan-app/ui/src/components/Sidebar/SidebarSection.tsx index 9b5dfeda3..bacd178e2 100644 --- a/pkgs/clan-app/ui/src/components/Sidebar/SidebarSection.tsx +++ b/pkgs/clan-app/ui/src/components/Sidebar/SidebarSection.tsx @@ -1,18 +1,17 @@ -import { JSX } from "solid-js"; -import "./SidebarSection.css"; +import { JSX, Show } from "solid-js"; +import styles from "./SidebarSection.module.css"; import { Typography } from "@/src/components/Typography/Typography"; -import cx from "classnames"; export interface SidebarSectionProps { title: string; - class?: string; + controls?: JSX.Element; children: JSX.Element; } export const SidebarSection = (props: SidebarSectionProps) => { return ( -
-
+
+
{ > {props.title} + +
{props.controls}
+
-
{props.children}
+
{props.children}
); }; diff --git a/pkgs/clan-app/ui/src/components/Sidebar/SidebarSectionForm.tsx b/pkgs/clan-app/ui/src/components/Sidebar/SidebarSectionForm.tsx index 83b43545c..8e97b200c 100644 --- a/pkgs/clan-app/ui/src/components/Sidebar/SidebarSectionForm.tsx +++ b/pkgs/clan-app/ui/src/components/Sidebar/SidebarSectionForm.tsx @@ -15,8 +15,8 @@ import { GenericSchema, GenericSchemaAsync } from "valibot"; import { Typography } from "@/src/components/Typography/Typography"; import { Button } from "@/src/components/Button/Button"; -import "./SidebarSection.css"; import { Loader } from "../../components/Loader/Loader"; +import { SidebarSection } from "./SidebarSection"; export interface SidebarSectionFormProps { title: string; @@ -71,31 +71,24 @@ export function SidebarSectionForm< return (
-
-
- - {props.title} - -
- {editing() && !formStore.submitting && ( - - )} - {editing() && formStore.submitting && } + + {editing() && + (formStore.submitting ? ( + + ) : ( + + ))}
-
- - - - {props.children({ editing: editing(), Field, formStore })} -
-
+ + {props.children({ editing: editing(), Field, formStore })} + ); } From 3cf979f0edcc3783aa524203c1d48fcdc83c1647 Mon Sep 17 00:00:00 2001 From: Glen Huang Date: Fri, 19 Sep 2025 22:29:18 +0800 Subject: [PATCH 2/2] ui/divider: use css modules --- .../components/Divider/{Divider.css => Divider.module.css} | 0 pkgs/clan-app/ui/src/components/Divider/Divider.tsx | 5 ++--- 2 files changed, 2 insertions(+), 3 deletions(-) rename pkgs/clan-app/ui/src/components/Divider/{Divider.css => Divider.module.css} (100%) diff --git a/pkgs/clan-app/ui/src/components/Divider/Divider.css b/pkgs/clan-app/ui/src/components/Divider/Divider.module.css similarity index 100% rename from pkgs/clan-app/ui/src/components/Divider/Divider.css rename to pkgs/clan-app/ui/src/components/Divider/Divider.module.css diff --git a/pkgs/clan-app/ui/src/components/Divider/Divider.tsx b/pkgs/clan-app/ui/src/components/Divider/Divider.tsx index e59f031a6..94b3f0594 100644 --- a/pkgs/clan-app/ui/src/components/Divider/Divider.tsx +++ b/pkgs/clan-app/ui/src/components/Divider/Divider.tsx @@ -1,10 +1,9 @@ -import "./Divider.css"; +import styles from "./Divider.module.css"; import cx from "classnames"; import { Separator, SeparatorRootProps } from "@kobalte/core/separator"; export interface DividerProps extends Pick { inverted?: boolean; - class?: string; } export const Divider = (props: DividerProps) => { @@ -12,7 +11,7 @@ export const Divider = (props: DividerProps) => { return ( );