@imjp/writenex-astro 0.1.0

package/src/client/components/Sidebar/Sidebar.css

@@ -0,0 +1,570 @@
+/* Sidebar Panel */
+.wn-sidebar {
+  display: flex;
+  flex-direction: column;
+  flex-shrink: 0;
+  border-right: 1px solid var(--wn-overlay-10);
+  background-color: var(--wn-zinc-900);
+  overflow: hidden;
+  transition: width 0.3s ease-in-out;
+}
+
+.wn-sidebar--open {
+  width: var(--wn-panel-sm);
+}
+
+.wn-sidebar--closed {
+  width: 0;
+}
+
+.wn-sidebar-inner {
+  display: flex;
+  flex-direction: column;
+  width: var(--wn-panel-sm);
+  height: 100%;
+}
+
+/* Sidebar Header */
+.wn-sidebar-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: var(--wn-space-3) var(--wn-space-4);
+  border-bottom: 1px solid var(--wn-overlay-10);
+}
+
+.wn-sidebar-title {
+  display: flex;
+  align-items: center;
+  gap: var(--wn-space-3);
+  font-size: var(--wn-font-base);
+  font-weight: 600;
+  color: var(--wn-zinc-50);
+}
+
+.wn-sidebar-close {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: var(--wn-icon-btn-md);
+  height: var(--wn-icon-btn-md);
+  border-radius: var(--wn-radius-md);
+  border: none;
+  background: transparent;
+  color: rgba(255, 255, 255, 0.5);
+  cursor: pointer;
+  transition: all 0.15s ease;
+}
+
+.wn-sidebar-close:hover {
+  background: var(--wn-overlay-10);
+  color: #fff;
+}
+
+/* Collections Section */
+.wn-sidebar-section {
+  padding: var(--wn-space-4);
+  border-bottom: 1px solid var(--wn-overlay-10);
+}
+
+.wn-sidebar-section-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  margin-bottom: var(--wn-space-3);
+}
+
+.wn-sidebar-section-title {
+  font-size: var(--wn-font-xs);
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+  color: rgba(255, 255, 255, 0.5);
+}
+
+.wn-sidebar-section-actions {
+  display: flex;
+  gap: var(--wn-space-1);
+}
+
+/* Collection List */
+.wn-collection-list {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+  display: flex;
+  flex-direction: column;
+  gap: var(--wn-space-1);
+}
+
+.wn-collection-item {
+  display: flex;
+  align-items: center;
+  gap: var(--wn-space-3);
+  width: 100%;
+  padding: var(--wn-space-3) var(--wn-space-4);
+  border-radius: var(--wn-radius-md);
+  border: none;
+  background: transparent;
+  color: rgba(255, 255, 255, 0.6);
+  font-size: var(--wn-font-sm);
+  text-align: left;
+  cursor: pointer;
+  transition: all var(--wn-transition-fast) ease;
+}
+
+.wn-collection-item:hover {
+  background: var(--wn-overlay-5);
+  color: var(--wn-zinc-50);
+}
+
+.wn-collection-item--selected {
+  background: var(--wn-brand-alpha-10);
+  color: var(--wn-brand-400);
+}
+
+.wn-collection-item-name {
+  flex: 1;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.wn-collection-item-count {
+  font-size: var(--wn-font-xs);
+  color: rgba(255, 255, 255, 0.3);
+}
+
+/* Content Section */
+.wn-sidebar-content {
+  display: flex;
+  flex-direction: column;
+  flex: 1;
+  overflow: hidden;
+}
+
+/* Content Section Header - for inline style replacement */
+.wn-sidebar-content-header {
+  padding: var(--wn-space-3) var(--wn-space-4);
+  border-bottom: 1px solid var(--wn-overlay-10);
+}
+
+/* Search and Filter */
+.wn-sidebar-search {
+  display: flex;
+  flex-direction: column;
+  gap: var(--wn-space-3);
+  padding: var(--wn-space-4);
+  border-bottom: 1px solid var(--wn-overlay-10);
+}
+
+.wn-search-input-wrapper {
+  display: flex;
+  align-items: center;
+  gap: var(--wn-space-3);
+  padding: var(--wn-space-2) var(--wn-space-3);
+  border-radius: var(--wn-radius-md);
+  border: 1px solid var(--wn-overlay-10);
+  transition: border-color var(--wn-transition-fast) ease;
+}
+
+.wn-search-input-wrapper:focus-within {
+  border-color: var(--wn-brand-500);
+}
+
+.wn-search-input {
+  flex: 1;
+  background: transparent;
+  border: none;
+  outline: none;
+  font-size: var(--wn-font-xs);
+  color: var(--wn-zinc-50);
+}
+
+.wn-search-input::placeholder {
+  color: rgba(255, 255, 255, 0.3);
+}
+
+.wn-search-clear {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 0;
+  border: none;
+  background: transparent;
+  color: rgba(255, 255, 255, 0.3);
+  cursor: pointer;
+  transition: color 0.15s ease;
+}
+
+.wn-search-clear:hover {
+  color: var(--wn-zinc-50);
+}
+
+/* Filter Tabs */
+.wn-filter-tabs {
+  display: flex;
+  gap: var(--wn-space-1);
+}
+
+.wn-filter-tab {
+  flex: 1;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: var(--wn-space-1);
+  padding: var(--wn-space-2) var(--wn-space-3);
+  border-radius: var(--wn-radius-sm);
+  border: none;
+  background: transparent;
+  font-size: var(--wn-font-xs);
+  color: rgba(255, 255, 255, 0.4);
+  cursor: pointer;
+  transition: all 0.15s ease;
+}
+
+.wn-filter-tab:hover {
+  background: var(--wn-overlay-5);
+  color: rgba(255, 255, 255, 0.7);
+}
+
+.wn-filter-tab--active {
+  background: var(--wn-brand-alpha-10);
+  color: var(--wn-brand-400);
+}
+
+/* Content List */
+.wn-content-list {
+  list-style: none;
+  margin: 0;
+  padding: var(--wn-space-3);
+  flex: 1;
+  overflow-y: auto;
+  display: flex;
+  flex-direction: column;
+  gap: var(--wn-space-1);
+}
+
+.wn-content-item {
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  padding: var(--wn-space-3) var(--wn-space-4);
+  border-radius: var(--wn-radius-md);
+  border: none;
+  background: transparent;
+  text-align: left;
+  cursor: pointer;
+  transition: all 0.15s ease;
+}
+
+.wn-content-item:hover {
+  background: var(--wn-overlay-5);
+}
+
+.wn-content-item--selected {
+  background: var(--wn-brand-alpha-10);
+}
+
+.wn-content-item-header {
+  display: flex;
+  align-items: center;
+  gap: var(--wn-space-3);
+}
+
+.wn-content-item-title {
+  flex: 1;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  font-size: var(--wn-font-sm);
+  color: var(--wn-zinc-50);
+}
+
+.wn-content-item-date {
+  margin-top: var(--wn-space-1);
+  font-size: var(--wn-font-xs);
+  color: rgba(255, 255, 255, 0.3);
+}
+
+/* Badge */
+.wn-badge-draft {
+  padding: var(--wn-space-1) var(--wn-space-2);
+  border-radius: var(--wn-radius-sm);
+  font-size: var(--wn-font-xs);
+  font-weight: 500;
+  background: var(--wn-warning-alpha-10);
+  color: var(--wn-warning-400);
+}
+
+/* Icon Button */
+.wn-sidebar-icon-btn {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: var(--wn-icon-btn-sm);
+  height: var(--wn-icon-btn-sm);
+  border-radius: var(--wn-radius-sm);
+  border: none;
+  background: transparent;
+  color: rgba(255, 255, 255, 0.5);
+  cursor: pointer;
+  transition: all 0.15s ease;
+}
+
+.wn-sidebar-icon-btn:hover {
+  background: var(--wn-overlay-10);
+  color: #fff;
+}
+
+.wn-sidebar-icon-btn--primary {
+  color: var(--wn-brand-500);
+}
+
+.wn-sidebar-icon-btn--primary:hover {
+  color: var(--wn-brand-400);
+}
+
+/* Empty State */
+.wn-sidebar-empty {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  padding: var(--wn-space-7);
+  text-align: center;
+}
+
+.wn-sidebar-empty-text {
+  font-size: var(--wn-font-xs);
+  color: rgba(255, 255, 255, 0.4);
+}
+
+.wn-sidebar-empty-link {
+  margin-top: var(--wn-space-3);
+  font-size: var(--wn-font-xs);
+  color: var(--wn-brand-500);
+  background: none;
+  border: none;
+  cursor: pointer;
+  text-decoration: none;
+}
+
+.wn-sidebar-empty-link:hover {
+  text-decoration: underline;
+}
+
+/* Loading State */
+.wn-sidebar-loading {
+  padding: var(--wn-space-8);
+  text-align: center;
+  font-size: var(--wn-font-xs);
+  color: rgba(255, 255, 255, 0.4);
+}
+
+/* ============================================================================
+   SKELETON LOADERS
+   ============================================================================ */
+
+.wn-skeleton {
+  background: linear-gradient(
+    90deg,
+    var(--wn-overlay-5) 25%,
+    var(--wn-overlay-10) 50%,
+    var(--wn-overlay-5) 75%
+  );
+  background-size: 200% 100%;
+  animation: wn-skeleton-shimmer 1.5s infinite;
+  border-radius: var(--wn-radius-sm);
+}
+
+@keyframes wn-skeleton-shimmer {
+  0% {
+    background-position: 200% 0;
+  }
+  100% {
+    background-position: -200% 0;
+  }
+}
+
+.wn-skeleton-collection {
+  display: flex;
+  align-items: center;
+  gap: var(--wn-space-3);
+  padding: var(--wn-space-3) var(--wn-space-4);
+}
+
+.wn-skeleton-icon {
+  width: 16px;
+  height: 16px;
+  border-radius: var(--wn-radius-sm);
+}
+
+.wn-skeleton-text {
+  height: 14px;
+  flex: 1;
+}
+
+.wn-skeleton-text--short {
+  width: 60%;
+}
+
+.wn-skeleton-badge {
+  width: 24px;
+  height: 14px;
+}
+
+.wn-skeleton-content {
+  display: flex;
+  flex-direction: column;
+  gap: var(--wn-space-1);
+  padding: var(--wn-space-3) var(--wn-space-4);
+}
+
+.wn-skeleton-title {
+  height: 14px;
+  width: 80%;
+}
+
+.wn-skeleton-date {
+  height: 12px;
+  width: 40%;
+}
+
+/* ============================================================================
+   LIGHT MODE OVERRIDES
+   ============================================================================ */
+
+.wn-light .wn-sidebar {
+  border-right-color: var(--wn-overlay-light-10);
+  background-color: #fff;
+}
+
+.wn-light .wn-sidebar-header {
+  border-bottom-color: var(--wn-overlay-light-10);
+}
+
+.wn-light .wn-sidebar-title {
+  color: var(--wn-zinc-900);
+}
+
+.wn-light .wn-sidebar-close {
+  color: rgba(0, 0, 0, 0.5);
+}
+
+.wn-light .wn-sidebar-close:hover {
+  background: var(--wn-overlay-light-5);
+  color: var(--wn-zinc-900);
+}
+
+.wn-light .wn-sidebar-section {
+  border-bottom-color: var(--wn-overlay-light-10);
+}
+
+.wn-light .wn-sidebar-section-title {
+  color: rgba(0, 0, 0, 0.5);
+}
+
+.wn-light .wn-sidebar-content-header {
+  border-bottom-color: var(--wn-overlay-light-10);
+}
+
+.wn-light .wn-collection-item {
+  color: rgba(0, 0, 0, 0.6);
+}
+
+.wn-light .wn-collection-item:hover {
+  background: var(--wn-overlay-light-5);
+  color: var(--wn-zinc-900);
+}
+
+.wn-light .wn-collection-item--selected {
+  background: var(--wn-brand-alpha-10);
+  color: var(--wn-brand-600);
+}
+
+.wn-light .wn-collection-item-count {
+  color: rgba(0, 0, 0, 0.3);
+}
+
+.wn-light .wn-sidebar-search {
+  border-bottom-color: var(--wn-overlay-light-10);
+}
+
+.wn-light .wn-search-input-wrapper {
+  border-color: var(--wn-overlay-light-10);
+}
+
+.wn-light .wn-search-input {
+  color: var(--wn-zinc-900);
+}
+
+.wn-light .wn-search-input::placeholder {
+  color: rgba(0, 0, 0, 0.3);
+}
+
+.wn-light .wn-search-clear {
+  color: rgba(0, 0, 0, 0.3);
+}
+
+.wn-light .wn-search-clear:hover {
+  color: var(--wn-zinc-900);
+}
+
+.wn-light .wn-filter-tab {
+  color: rgba(0, 0, 0, 0.4);
+}
+
+.wn-light .wn-filter-tab:hover {
+  background: var(--wn-overlay-light-5);
+  color: rgba(0, 0, 0, 0.7);
+}
+
+.wn-light .wn-filter-tab--active {
+  background: var(--wn-brand-alpha-10);
+  color: var(--wn-brand-600);
+}
+
+.wn-light .wn-content-item:hover {
+  background: var(--wn-overlay-light-5);
+}
+
+.wn-light .wn-content-item--selected {
+  background: var(--wn-brand-alpha-10);
+}
+
+.wn-light .wn-content-item-title {
+  color: var(--wn-zinc-900);
+}
+
+.wn-light .wn-content-item-date {
+  color: rgba(0, 0, 0, 0.3);
+}
+
+.wn-light .wn-sidebar-icon-btn {
+  color: rgba(0, 0, 0, 0.5);
+}
+
+.wn-light .wn-sidebar-icon-btn:hover {
+  background: var(--wn-overlay-light-5);
+  color: var(--wn-zinc-900);
+}
+
+.wn-light .wn-sidebar-empty-text {
+  color: rgba(0, 0, 0, 0.4);
+}
+
+.wn-light .wn-sidebar-loading {
+  color: rgba(0, 0, 0, 0.4);
+}
+
+.wn-light .wn-skeleton {
+  background: linear-gradient(
+    90deg,
+    var(--wn-overlay-light-5) 25%,
+    var(--wn-overlay-light-8) 50%,
+    var(--wn-overlay-light-5) 75%
+  );
+  background-size: 200% 100%;
+}