front-end restructuring, chat shows message ownership
This commit is contained in:
Daan Meijer
@@ -0,0 +1,5 @@
|
||||
/* 7. AppContent Layout Component */
|
||||
.app-content {
|
||||
@apply mx-auto flex h-full w-full max-w-7xl flex-1 flex-col gap-4;
|
||||
border-radius: var(--radius);
|
||||
}
|
||||
@@ -0,0 +1,20 @@
|
||||
/* 4. AppLogo Component */
|
||||
.app-logo__icon-container {
|
||||
@apply flex aspect-square size-8 items-center justify-center;
|
||||
border-radius: var(--radius);
|
||||
background-color: var(--sidebar-primary);
|
||||
color: var(--sidebar-primary-foreground);
|
||||
|
||||
.app-logo__icon {
|
||||
@apply size-5 fill-current;
|
||||
}
|
||||
}
|
||||
|
||||
.app-logo__text-container {
|
||||
@apply ml-1 grid flex-1 text-left text-sm;
|
||||
|
||||
.app-logo__text {
|
||||
@apply mb-0.5 truncate leading-tight font-semibold;
|
||||
color: var(--foreground);
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,35 @@
|
||||
/* 8. AppearanceTabs Component */
|
||||
.appearance-tabs {
|
||||
@apply inline-flex gap-1 p-1;
|
||||
border-radius: var(--radius);
|
||||
background-color: var(--muted);
|
||||
|
||||
.appearance-tabs__tab {
|
||||
@apply flex cursor-pointer items-center px-3.5 py-1.5 transition-colors;
|
||||
border-radius: calc(var(--radius) - 2px);
|
||||
color: var(--muted-foreground);
|
||||
|
||||
&:hover {
|
||||
color: var(--foreground);
|
||||
background-color: rgba(0, 0, 0, 0.05);
|
||||
}
|
||||
|
||||
&.appearance-tabs__tab--active {
|
||||
background-color: var(--card);
|
||||
color: var(--card-foreground);
|
||||
box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
|
||||
|
||||
&:hover {
|
||||
background-color: var(--card);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.appearance-tabs__icon {
|
||||
@apply -ml-1 h-4 w-4;
|
||||
}
|
||||
|
||||
.appearance-tabs__label {
|
||||
@apply ml-1.5 text-sm;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,46 @@
|
||||
/* 10. AuthSimpleLayout Component */
|
||||
.auth-layout {
|
||||
@apply flex min-h-svh flex-col items-center justify-center gap-6 p-6 md:p-10;
|
||||
background-color: var(--background);
|
||||
|
||||
.auth-layout__container {
|
||||
@apply w-full max-w-sm;
|
||||
|
||||
.auth-layout__inner {
|
||||
@apply flex flex-col gap-8;
|
||||
|
||||
.auth-layout__header {
|
||||
@apply flex flex-col items-center gap-4;
|
||||
|
||||
.auth-layout__logo-link {
|
||||
@apply flex flex-col items-center gap-2 font-medium;
|
||||
|
||||
.auth-layout__logo-box {
|
||||
@apply mb-1 flex h-9 w-9 items-center justify-center;
|
||||
border-radius: var(--radius);
|
||||
background-color: var(--sidebar-primary);
|
||||
|
||||
.auth-layout__logo {
|
||||
@apply size-9 fill-current;
|
||||
color: var(--sidebar-primary-foreground);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.auth-layout__title-box {
|
||||
@apply space-y-2 text-center;
|
||||
|
||||
.auth-layout__title {
|
||||
@apply text-xl font-medium;
|
||||
color: var(--foreground);
|
||||
}
|
||||
|
||||
.auth-layout__description {
|
||||
@apply text-center text-sm;
|
||||
color: var(--muted-foreground);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,210 @@
|
||||
/* 11. Chat Component */
|
||||
.c-chat {
|
||||
@apply mt-8;
|
||||
|
||||
.c-chat__title {
|
||||
@apply text-lg font-medium;
|
||||
color: var(--foreground);
|
||||
}
|
||||
|
||||
.c-chat__list {
|
||||
@apply mt-4 flex flex-col gap-3;
|
||||
|
||||
.c-chat__message {
|
||||
@apply overflow-hidden p-4 shadow-sm sm:rounded-lg;
|
||||
border: 1px solid var(--border);
|
||||
|
||||
&.c-chat__message--system {
|
||||
@apply w-full self-center border-0 bg-transparent p-0 shadow-none;
|
||||
}
|
||||
|
||||
&.c-chat__message--own {
|
||||
@apply self-end rounded-br-none text-right;
|
||||
max-width: 80%;
|
||||
background-color: var(--primary);
|
||||
border-color: var(--primary);
|
||||
|
||||
.c-chat__message-header {
|
||||
@apply flex-row-reverse;
|
||||
}
|
||||
.c-chat__message-author {
|
||||
color: var(--primary-foreground);
|
||||
}
|
||||
.c-chat__message-time {
|
||||
color: var(--primary-foreground);
|
||||
opacity: 0.7;
|
||||
}
|
||||
.c-chat__message-text {
|
||||
color: var(--primary-foreground);
|
||||
}
|
||||
}
|
||||
|
||||
&.c-chat__message--other {
|
||||
@apply self-start rounded-bl-none;
|
||||
max-width: 80%;
|
||||
background-color: var(--muted);
|
||||
border-color: var(--border);
|
||||
|
||||
.c-chat__message-author {
|
||||
color: var(--foreground);
|
||||
}
|
||||
.c-chat__message-time {
|
||||
color: var(--muted-foreground);
|
||||
}
|
||||
.c-chat__message-text {
|
||||
color: var(--foreground);
|
||||
}
|
||||
}
|
||||
|
||||
.c-chat__system-inner {
|
||||
@apply flex items-center gap-2 px-3 py-1.5 text-xs;
|
||||
background-color: var(--muted);
|
||||
border: 1px solid var(--border);
|
||||
border-radius: calc(var(--radius) - 2px);
|
||||
color: var(--muted-foreground);
|
||||
|
||||
.c-chat__system-icon {
|
||||
@apply size-3.5 shrink-0;
|
||||
color: var(--muted-foreground);
|
||||
}
|
||||
|
||||
.c-chat__system-text {
|
||||
@apply flex-1 font-medium;
|
||||
}
|
||||
|
||||
.c-chat__system-time {
|
||||
@apply shrink-0 text-[10px];
|
||||
color: var(--muted-foreground);
|
||||
}
|
||||
}
|
||||
|
||||
.c-chat__message-header {
|
||||
@apply flex justify-between;
|
||||
|
||||
.c-chat__message-author {
|
||||
@apply font-semibold;
|
||||
color: var(--foreground);
|
||||
}
|
||||
|
||||
.c-chat__message-time {
|
||||
@apply text-xs;
|
||||
color: var(--muted-foreground);
|
||||
}
|
||||
}
|
||||
|
||||
.c-chat__message-text {
|
||||
@apply mt-2 text-sm;
|
||||
color: var(--foreground);
|
||||
}
|
||||
|
||||
.c-chat__message-media {
|
||||
@apply mt-3 flex flex-wrap gap-2;
|
||||
|
||||
.c-chat__media-item {
|
||||
@apply relative max-w-[240px] overflow-hidden bg-black;
|
||||
border-radius: calc(var(--radius) - 2px);
|
||||
border: 1px solid var(--border);
|
||||
|
||||
.c-chat__image {
|
||||
@apply h-auto max-h-[180px] w-full object-cover;
|
||||
}
|
||||
|
||||
.c-chat__video {
|
||||
@apply h-auto max-h-[180px] w-full;
|
||||
}
|
||||
|
||||
.c-chat__play-overlay {
|
||||
@apply absolute inset-0 flex items-center justify-center bg-black/40 text-2xl font-bold text-white;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.c-chat__empty {
|
||||
color: var(--muted-foreground);
|
||||
}
|
||||
|
||||
.c-chat__form {
|
||||
@apply mt-6 space-y-6;
|
||||
|
||||
.c-chat__form-group {
|
||||
@apply space-y-2;
|
||||
|
||||
.c-chat__label {
|
||||
@apply block text-sm font-medium;
|
||||
color: var(--foreground);
|
||||
}
|
||||
|
||||
.c-chat__textarea {
|
||||
@apply mt-1 block w-full shadow-sm;
|
||||
border-radius: var(--radius);
|
||||
border: 1px solid var(--border);
|
||||
background-color: var(--background);
|
||||
color: var(--foreground);
|
||||
}
|
||||
|
||||
.c-chat__error {
|
||||
@apply text-sm;
|
||||
color: var(--destructive);
|
||||
}
|
||||
|
||||
.c-chat__attachment-container {
|
||||
@apply mt-2 flex items-center;
|
||||
|
||||
.c-chat__attach-btn {
|
||||
@apply inline-flex cursor-pointer items-center gap-1.5 text-xs transition-colors;
|
||||
color: var(--muted-foreground);
|
||||
|
||||
&:hover {
|
||||
color: var(--foreground);
|
||||
}
|
||||
|
||||
.c-chat__attach-icon {
|
||||
@apply size-3.5;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.c-chat__preview-list {
|
||||
@apply mt-2 flex flex-wrap gap-2;
|
||||
|
||||
.c-chat__preview-item {
|
||||
@apply relative inline-flex items-center gap-2 p-1.5 pr-8 text-xs;
|
||||
border-radius: calc(var(--radius) - 2px);
|
||||
border: 1px solid var(--border);
|
||||
background-color: var(--muted);
|
||||
|
||||
.c-chat__preview-name {
|
||||
@apply max-w-[150px] truncate;
|
||||
color: var(--foreground);
|
||||
}
|
||||
|
||||
.c-chat__preview-remove {
|
||||
@apply absolute top-1.5 right-1.5 cursor-pointer text-[10px];
|
||||
color: var(--muted-foreground);
|
||||
|
||||
&:hover {
|
||||
color: var(--destructive);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.c-chat__submit-box {
|
||||
@apply flex items-center gap-4;
|
||||
|
||||
.c-chat__button {
|
||||
@apply inline-flex items-center border border-transparent px-4 py-2 text-xs font-semibold tracking-widest uppercase transition duration-150 ease-in-out focus:ring-2 focus:outline-none;
|
||||
border-radius: var(--radius);
|
||||
background-color: var(--primary);
|
||||
color: var(--primary-foreground);
|
||||
|
||||
&:hover {
|
||||
opacity: 0.9;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,22 @@
|
||||
/* 1. Heading Component */
|
||||
.c-heading {
|
||||
@apply mb-8 space-y-0.5;
|
||||
|
||||
&.c-heading--small {
|
||||
@apply mb-0 space-y-0;
|
||||
|
||||
.c-heading__title {
|
||||
@apply mb-0.5 text-base font-medium tracking-normal;
|
||||
}
|
||||
}
|
||||
|
||||
.c-heading__title {
|
||||
@apply text-xl font-semibold tracking-tight;
|
||||
color: var(--foreground);
|
||||
}
|
||||
|
||||
.c-heading__description {
|
||||
@apply text-sm;
|
||||
color: var(--muted-foreground);
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,5 @@
|
||||
/* 2. InputError Component */
|
||||
.c-input-error__message {
|
||||
@apply text-sm;
|
||||
color: var(--destructive);
|
||||
}
|
||||
@@ -0,0 +1,25 @@
|
||||
/* 12. Reusable Lightbox Component */
|
||||
.c-lightbox {
|
||||
@apply fixed inset-0 z-50 flex items-center justify-center p-4;
|
||||
background-color: rgba(0, 0, 0, 0.95);
|
||||
|
||||
.c-lightbox__close {
|
||||
@apply absolute top-6 right-6 cursor-pointer text-3xl text-white transition-colors duration-200;
|
||||
|
||||
&:hover {
|
||||
color: var(--destructive);
|
||||
}
|
||||
}
|
||||
|
||||
.c-lightbox__content {
|
||||
@apply max-h-full max-w-full;
|
||||
|
||||
.c-lightbox__image {
|
||||
@apply max-h-[90vh] max-w-full rounded object-contain shadow-lg;
|
||||
}
|
||||
|
||||
.c-lightbox__video {
|
||||
@apply max-h-[90vh] max-w-full rounded shadow-lg;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,21 @@
|
||||
/* 9. PasswordInput Component */
|
||||
.password-input {
|
||||
@apply relative;
|
||||
|
||||
.password-input__field {
|
||||
@apply pr-10;
|
||||
}
|
||||
|
||||
.password-input__toggle {
|
||||
@apply absolute inset-y-0 right-0 flex items-center rounded-r-md px-3 focus-visible:outline-none;
|
||||
color: var(--muted-foreground);
|
||||
|
||||
&:hover {
|
||||
color: var(--foreground);
|
||||
}
|
||||
}
|
||||
|
||||
.password-input__icon {
|
||||
@apply size-4;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,14 @@
|
||||
/* 6. AppSidebarHeader Component */
|
||||
.sidebar-header {
|
||||
@apply flex h-16 shrink-0 items-center gap-2 transition-[width,height] ease-linear md:px-4;
|
||||
border-bottom: 1px solid var(--sidebar-border);
|
||||
background-color: var(--sidebar-background);
|
||||
}
|
||||
|
||||
.sidebar-header__inner {
|
||||
@apply flex items-center gap-2;
|
||||
}
|
||||
|
||||
.group-has-data-[collapsible='icon']/sidebar-wrapper:h-12 .sidebar-header {
|
||||
@apply h-12;
|
||||
}
|
||||
@@ -0,0 +1,10 @@
|
||||
/* 3. TextLink Component */
|
||||
.c-text-link {
|
||||
@apply underline underline-offset-4 transition-colors duration-300 ease-out;
|
||||
color: var(--foreground);
|
||||
text-decoration-color: var(--border);
|
||||
|
||||
&:hover {
|
||||
text-decoration-color: var(--foreground);
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,19 @@
|
||||
/* 5. UserInfo Component */
|
||||
.user-info__avatar {
|
||||
@apply h-8 w-8 overflow-hidden;
|
||||
border-radius: var(--radius);
|
||||
}
|
||||
|
||||
.user-info__details {
|
||||
@apply grid flex-1 text-left text-sm leading-tight;
|
||||
|
||||
.user-info__name {
|
||||
@apply truncate font-medium;
|
||||
color: var(--foreground);
|
||||
}
|
||||
|
||||
.user-info__email {
|
||||
@apply truncate text-xs;
|
||||
color: var(--muted-foreground);
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user