fuji_admin 0.1.0

data/app/assets/stylesheets/fuji_admin/components/_buttons.scss

@@ -0,0 +1,106 @@
+// Buttons — primary, secondary, and the handful of specialised AA variants.
+//
+// AA emits buttons as many different selectors (form submits, action items,
+// filter buttons, batch actions). A shared mixin keeps visuals consistent.
+
+@mixin fuji-button-base {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: $space-2;
+  padding: $space-2 $space-4;
+  font-size: $font-size-sm;
+  font-weight: $font-weight-medium;
+  line-height: 1.4;
+  border: 1px solid transparent;
+  border-radius: $border-radius;
+  cursor: pointer;
+  text-decoration: none;
+  transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease, box-shadow 0.15s ease;
+
+  &:focus-visible {
+    outline: none;
+    box-shadow: $shadow-focus;
+  }
+
+  &:disabled,
+  &.disabled {
+    opacity: 0.5;
+    cursor: not-allowed;
+  }
+}
+
+@mixin fuji-button-primary {
+  @include fuji-button-base;
+  background-color: $primary-color;
+  color: $primary-color-text;
+  border-color: $primary-color;
+
+  &:hover {
+    background-color: $primary-700;
+    border-color: $primary-700;
+    color: $primary-color-text;
+    text-decoration: none;
+  }
+
+  &:active {
+    background-color: $primary-800;
+    border-color: $primary-800;
+  }
+}
+
+@mixin fuji-button-secondary {
+  @include fuji-button-base;
+  background-color: $surface-0;
+  color: $text-color;
+  border-color: $surface-border;
+
+  &:hover {
+    background-color: $surface-100;
+    color: $text-color;
+    text-decoration: none;
+  }
+
+  &:active {
+    background-color: $surface-200;
+  }
+}
+
+// Primary button surface — form submit, action item buttons, batch actions.
+form input[type="submit"],
+a.button,
+a:link.button,
+a:visited.button,
+fieldset.actions > ol > li.button_action > button,
+#title_bar #titlebar_right .action_item > a,
+.batch_actions_selector > a,
+.table_tools .batch_actions_selector > a {
+  @include fuji-button-primary;
+}
+
+// Batch-actions dropdown button is also a `.dropdown_menu`, which would
+// otherwise pick up the secondary (outlined) style from _dropdown_menu.scss
+// at higher specificity. Re-apply primary with a specificity that wins.
+.dropdown_menu.batch_actions_selector > a.dropdown_menu_button,
+.table_tools .dropdown_menu.batch_actions_selector > a.dropdown_menu_button {
+  @include fuji-button-primary;
+
+  &::after {
+    border-top-color: $primary-color-text;
+  }
+}
+
+// Secondary / cancel surface.
+form fieldset.buttons li.cancel a,
+form fieldset.actions li.cancel a,
+form.filter_form a.clear_filters_btn,
+form.filter_form input[type="submit"].clear_filters_btn {
+  @include fuji-button-secondary;
+}
+
+// Filter form submit — secondary but accented.
+form.filter_form input[type="submit"] {
+  @include fuji-button-primary;
+  width: 100%;
+  margin-top: $space-3;
+}

data/app/assets/stylesheets/fuji_admin/components/_comments.scss

@@ -0,0 +1,44 @@
+// Record comments — AA's active_admin_comments partial renders comment
+// entries plus a new-comment form. Keep it aligned with the panel aesthetic.
+
+.active_admin_comments,
+.comments {
+  .active_admin_comment {
+    padding: $space-4 0;
+    border-bottom: 1px solid $surface-200;
+
+    &:last-child {
+      border-bottom: 0;
+    }
+
+    .active_admin_comment_meta {
+      display: flex;
+      gap: $space-2;
+      align-items: center;
+      font-size: $font-size-xs;
+      color: $text-color-muted;
+      margin-bottom: $space-2;
+    }
+
+    .active_admin_comment_author {
+      font-weight: $font-weight-semibold;
+      color: $text-color-secondary;
+    }
+
+    .active_admin_comment_body {
+      font-size: $font-size-sm;
+      color: $text-color;
+      line-height: $line-height-relaxed;
+    }
+  }
+
+  form.active_admin_comment {
+    padding-top: $space-4;
+
+    fieldset.inputs {
+      border: 0;
+      padding: 0;
+      background: transparent;
+    }
+  }
+}

data/app/assets/stylesheets/fuji_admin/components/_components.scss

@@ -0,0 +1,22 @@
+// Aggregator.
+@import "buttons";
+@import "inputs";
+@import "panel";
+@import "tables";
+@import "pagination";
+@import "status_tag";
+@import "flash";
+@import "scopes";
+@import "table_tools";
+@import "dropdown_menu";
+@import "filter_form";
+@import "comments";
+@import "menu_toggle";
+@import "select2";
+@import "date_picker";
+@import "filter_drawer";
+@import "filter_chips";
+@import "float_labels";
+@import "row_actions";
+@import "watchlist_bar";
+@import "palette_switcher";

data/app/assets/stylesheets/fuji_admin/components/_date_picker.scss

@@ -0,0 +1,147 @@
+// jQuery UI date picker — AA injects this when a field is declared
+// `as: :datepicker`. It's appended to <body> as `#ui-datepicker-div`.
+
+#ui-datepicker-div {
+  background-color: $surface-0;
+  border: 1px solid $surface-border;
+  border-radius: $border-radius-card;
+  box-shadow: $shadow-lg;
+  padding: $space-2;
+  font-family: inherit;
+  font-size: $font-size-sm;
+  z-index: 100;
+
+  // --- Header -----------------------------------------------------------
+  .ui-datepicker-header {
+    position: relative;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: $space-2 $space-3 $space-3;
+    background: transparent;
+    border: 0;
+  }
+
+  .ui-datepicker-title {
+    flex: 1;
+    text-align: center;
+    font-weight: $font-weight-semibold;
+    color: $text-color;
+  }
+
+  .ui-datepicker-prev,
+  .ui-datepicker-next {
+    position: static;
+    width: 28px;
+    height: 28px;
+    padding: 0;
+    border-radius: $radius-sm;
+    background: transparent;
+    border: 0;
+    color: $text-color-secondary;
+    cursor: pointer;
+    transition: background-color 0.15s ease, color 0.15s ease;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+
+    &:hover {
+      background-color: $surface-100;
+      color: $text-color;
+    }
+
+    span {
+      display: none;
+    }
+
+    &::before {
+      content: "";
+      display: inline-block;
+      width: 0;
+      height: 0;
+      border-top: 5px solid transparent;
+      border-bottom: 5px solid transparent;
+    }
+  }
+
+  .ui-datepicker-prev::before {
+    border-right: 6px solid currentColor;
+  }
+
+  .ui-datepicker-next::before {
+    border-left: 6px solid currentColor;
+  }
+
+  // --- Calendar grid ----------------------------------------------------
+  table.ui-datepicker-calendar {
+    width: 100%;
+    margin: 0;
+    border-collapse: separate;
+    border-spacing: 2px;
+
+    th {
+      padding: $space-1 0;
+      font-size: $font-size-xs;
+      font-weight: $font-weight-medium;
+      color: $text-color-muted;
+      text-transform: uppercase;
+      letter-spacing: 0.04em;
+      text-align: center;
+    }
+
+    td {
+      padding: 0;
+      text-align: center;
+
+      a,
+      span {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        width: 32px;
+        height: 32px;
+        margin: 0 auto;
+        border-radius: $radius-sm;
+        color: $text-color;
+        text-decoration: none;
+        font-size: $font-size-sm;
+        font-weight: $font-weight-regular;
+        cursor: pointer;
+        transition: background-color 0.12s ease, color 0.12s ease;
+      }
+
+      a:hover {
+        background-color: $surface-100;
+        color: $text-color;
+        text-decoration: none;
+      }
+
+      &.ui-datepicker-other-month a,
+      &.ui-datepicker-other-month span {
+        color: $text-color-muted;
+      }
+
+      &.ui-datepicker-today a,
+      &.ui-datepicker-today span {
+        background-color: $surface-100;
+        color: $primary-color;
+        font-weight: $font-weight-semibold;
+      }
+
+      &.ui-datepicker-current-day a,
+      &.ui-datepicker-current-day span {
+        background-color: $primary-color;
+        color: $primary-color-text;
+
+        &:hover {
+          background-color: $primary-700;
+        }
+      }
+
+      &.ui-datepicker-unselectable span {
+        color: $text-color-muted;
+        cursor: not-allowed;
+      }
+    }
+  }
+}

data/app/assets/stylesheets/fuji_admin/components/_dropdown_menu.scss

@@ -0,0 +1,76 @@
+// Dropdown menus — AA renders as `div.dropdown_menu` containing a trigger
+// `a.dropdown_menu_button` and a `div.dropdown_menu_list_wrapper` with an
+// inner `ul.dropdown_menu_list`. Used for batch actions, download formats,
+// and action item menus.
+
+.dropdown_menu {
+  position: relative;
+  display: inline-flex;
+
+  > a.dropdown_menu_button {
+    @include fuji-button-secondary;
+
+    &::after {
+      content: "";
+      display: inline-block;
+      width: 0;
+      height: 0;
+      margin-left: $space-2;
+      border-left: 4px solid transparent;
+      border-right: 4px solid transparent;
+      border-top: 5px solid currentColor;
+    }
+  }
+
+  .dropdown_menu_list_wrapper {
+    position: absolute;
+    top: calc(100% + #{$space-1});
+    right: 0;
+    min-width: 180px;
+    background-color: $surface-0;
+    border: 1px solid $surface-border;
+    border-radius: $border-radius;
+    box-shadow: $shadow-md;
+    padding: $space-1;
+    z-index: 30;
+  }
+
+  // Remove AA's legacy nipple/arrow pointer artifacts.
+  .dropdown_menu_nipple {
+    display: none;
+  }
+
+  ul.dropdown_menu_list {
+    list-style: none;
+    padding: 0;
+    margin: 0;
+
+    li {
+      display: block;
+
+      a {
+        display: block;
+        padding: $space-2 $space-3;
+        font-size: $font-size-sm;
+        color: $text-color;
+        border-radius: $radius-sm;
+        transition: background-color 0.15s ease, color 0.15s ease;
+
+        &:hover {
+          background-color: $surface-100;
+          color: $primary-color;
+          text-decoration: none;
+        }
+      }
+    }
+  }
+}
+
+// Primary-flavoured trigger when used inside the title bar action row.
+#title_bar #titlebar_right .dropdown_menu > a.dropdown_menu_button {
+  @include fuji-button-primary;
+
+  &::after {
+    border-top-color: $primary-color-text;
+  }
+}

data/app/assets/stylesheets/fuji_admin/components/_filter_chips.scss

@@ -0,0 +1,71 @@
+// Active-filter chip strip — rendered above the table by fuji_admin/filters.js
+// when the URL has Ransack query params.
+
+.fuji-filter-chips {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: $space-2;
+  padding: 0 0 $space-4;
+  margin: 0;
+
+  &__pill {
+    display: inline-flex;
+    align-items: center;
+    gap: $space-2;
+    padding: $space-1 $space-2 $space-1 $space-3;
+    background-color: $primary-50;
+    border: 1px solid $primary-100;
+    border-radius: $radius-full;
+    color: $primary-700;
+    font-size: $font-size-xs;
+    font-weight: $font-weight-medium;
+    line-height: 1.4;
+    text-decoration: none;
+    transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
+
+    &:hover {
+      background-color: $primary-100;
+      border-color: $primary-200;
+      color: $primary-800;
+      text-decoration: none;
+
+      .fuji-filter-chips__remove {
+        background-color: $primary-200;
+        color: $primary-800;
+      }
+    }
+  }
+
+  &__label {
+    white-space: nowrap;
+  }
+
+  &__remove {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: 18px;
+    height: 18px;
+    border-radius: $radius-full;
+    background-color: $primary-100;
+    color: $primary-700;
+    font-size: $font-size-sm;
+    line-height: 1;
+    transition: background-color 0.15s ease, color 0.15s ease;
+  }
+
+  &__clear {
+    margin-left: $space-2;
+    padding: $space-1 $space-2;
+    font-size: $font-size-xs;
+    font-weight: $font-weight-medium;
+    color: $text-color-secondary;
+    text-decoration: none;
+
+    &:hover {
+      color: $color-danger;
+      text-decoration: underline;
+    }
+  }
+}

data/app/assets/stylesheets/fuji_admin/components/_filter_drawer.scss

@@ -0,0 +1,224 @@
+// Filters drawer. Turns AA's `#sidebar` (when the page has `.with_sidebar`)
+// into a right-anchored slide-in panel, triggered by a "Filters" button in
+// the title bar.
+
+// --- Toggle button in the title bar -----------------------------------------
+.fuji-filters-toggle {
+  display: inline-flex;
+  align-items: center;
+  gap: $space-2;
+  padding: $space-2 $space-3;
+  font-family: inherit;
+  font-size: $font-size-sm;
+  font-weight: $font-weight-medium;
+  line-height: 1.4;
+  color: $text-color;
+  background-color: $surface-0;
+  border: 1px solid $surface-border;
+  border-radius: $border-radius;
+  cursor: pointer;
+  transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease, box-shadow 0.15s ease;
+
+  &:hover {
+    background-color: $surface-100;
+    border-color: $surface-400;
+  }
+
+  &:focus-visible {
+    outline: none;
+    box-shadow: $shadow-focus;
+  }
+
+  &__icon {
+    display: inline-flex;
+    color: $text-color-secondary;
+  }
+
+  &__count {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    min-width: 18px;
+    height: 18px;
+    padding: 0 $space-1;
+    margin-left: $space-1;
+    background-color: $primary-color;
+    color: $primary-color-text;
+    border-radius: $radius-full;
+    font-size: $font-size-xs;
+    font-weight: $font-weight-semibold;
+    line-height: 1;
+
+    &[hidden] {
+      display: none;
+    }
+  }
+
+  &--active {
+    border-color: $primary-200;
+    background-color: $primary-50;
+    color: $primary-700;
+
+    .fuji-filters-toggle__icon {
+      color: $primary-color;
+    }
+  }
+}
+
+// --- Drawer container (repurposed AA #sidebar) ------------------------------
+body.active_admin #sidebar {
+  position: fixed;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  width: 100%;
+  max-width: 420px;
+  margin: 0;
+  padding: 0;
+  background-color: $surface-0;
+  border-left: 1px solid $surface-border;
+  box-shadow: $shadow-xl;
+  z-index: 30;
+  transform: translateX(100%);
+  transition: transform 0.25s ease;
+  overflow: hidden;
+  display: flex;
+  flex-direction: column;
+}
+
+// Matches the default rule's specificity (2 IDs + 1 class) so it actually
+// wins the cascade when the drawer is open.
+body.active_admin.fuji-filters-open #sidebar {
+  transform: translateX(0);
+}
+
+// Drawer header (injected by JS) ---------------------------------------------
+.fuji-filters-drawer__header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: $space-4 $space-5;
+  border-bottom: 1px solid $surface-200;
+  flex: 0 0 auto;
+}
+
+.fuji-filters-drawer__title {
+  margin: 0;
+  font-size: $font-size-lg;
+  font-weight: $font-weight-semibold;
+  color: $text-color;
+}
+
+.fuji-filters-drawer__close {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 32px;
+  height: 32px;
+  padding: 0;
+  background: transparent;
+  border: 0;
+  border-radius: $border-radius;
+  color: $text-color-secondary;
+  cursor: pointer;
+  transition: background-color 0.15s ease, color 0.15s ease;
+
+  &:hover {
+    background-color: $surface-100;
+    color: $text-color;
+  }
+
+  &:focus-visible {
+    outline: none;
+    box-shadow: $shadow-focus;
+  }
+}
+
+// Sidebar sections shared reset — strip the default panel chrome so both
+// sections sit naturally inside the drawer body.
+body.active_admin #sidebar .sidebar_section.panel {
+  margin: 0;
+  border: 0;
+  border-radius: 0;
+  background: transparent;
+  box-shadow: none;
+
+  > h3 {
+    display: none; // "Filters" / "Search status:" — drawer header replaces them.
+  }
+
+  .panel_contents {
+    padding: 0;
+  }
+}
+
+// Filter form panel (the main body — scrollable).
+body.active_admin #sidebar #filters_sidebar_section {
+  order: 2;
+  flex: 1 1 auto;
+  overflow-y: auto;
+  padding: $space-5;
+}
+
+// "Search status" / Current filters panel (compact chip strip at top).
+body.active_admin #sidebar .sidebar_section.panel:not(#filters_sidebar_section) {
+  order: 1;
+  flex: 0 0 auto;
+  padding: $space-4 $space-5;
+  border-bottom: 1px solid $surface-200;
+  background-color: $surface-50;
+
+  // AA emits the summary as a bare <div style="margin-top:10px"> with an
+  // inline <h4> label and a <ul> of current_filter entries.
+  .panel_contents > div {
+    margin-top: 0 !important; // override AA's inline margin-top:10px
+
+    > h4 {
+      margin: 0 0 $space-2 !important; // override inline margin-bottom:10px
+      font-size: $font-size-xs;
+      font-weight: $font-weight-semibold;
+      text-transform: uppercase;
+      letter-spacing: 0.04em;
+      color: $text-color-muted;
+    }
+
+    > ul {
+      display: flex;
+      flex-wrap: wrap;
+      gap: $space-1;
+      list-style: none;
+      padding: 0;
+      margin: 0;
+    }
+  }
+
+  li.current_filter {
+    display: inline-flex;
+    align-items: center;
+    gap: $space-1;
+    padding: $space-1 $space-3;
+    background-color: $primary-50;
+    border: 1px solid $primary-100;
+    border-radius: $radius-full;
+    font-size: $font-size-xs;
+    line-height: 1.4;
+
+    span {
+      color: $text-color-secondary;
+    }
+
+    b {
+      color: $primary-700;
+      font-weight: $font-weight-semibold;
+    }
+  }
+
+  .current_scope_name {
+    color: $primary-700;
+    font-weight: $font-weight-semibold;
+  }
+}
+
+// Legacy flex reset removed — layouts/_main_content.scss no longer applies a
+// two-column flex to `#active_admin_content.with_sidebar`, so no override is
+// needed here.