feat: migrate from Foundation to Fomantic-UI

Swap foundation-rails for fomantic-ui-sass across the gem's own
layout/menu/alerts partials and all 11 generic scaffold resources
(pages, news, faqs, quotes, images, directories, keywords, yml_files,
contact_forms, newsletter_subscriptions, users). Foundation grid/button
classes replaced with Fomantic ui.form/ui.button/ui.table conventions;
legacy Foundation mixins in the custom component sass (panel, button,
grid-row/grid-column) rewritten as plain CSS since they no longer exist
once foundation_and_overrides.scss is gone.

Also fixes a real bug found along the way: boolean_text used
`.present?` on values, but SimplyCouch stores booleans as the strings
"0"/"1" — and "0".present? is true in Ruby, so it always rendered
"Yes" regardless of actual value. Now uses ActiveModel::Type::Boolean.

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>

app/assets/javascripts/cmtool/application.js.coffee

@@ -1,6 +1,6 @@
 #= require jquery
 #= require jquery_ujs
-#= require foundation
+#= require semantic-ui
 #= require ace/ace
 #= require moment
 #= require ace/theme-monokai
@@ -19,7 +19,9 @@
 #= require_self
 
 $ ->
-  $(document).foundation()
+  $('.ui.dropdown').dropdown()
+  $('.ui.checkbox').checkbox()
+  $('.message .close.icon').on 'click', -> $(@).closest('.message').transition('fade')
   collapsible.setup()
   html_edit.setup()
   yml_edit.setup()
@@ -38,7 +40,7 @@ $ ->
       layout: $('#page_layout').val()
     $.post url, page: params, (response)->
       iframe.attr 'src', url
-      $('#preview-modal').foundation('reveal', 'open')
+      $('#preview-modal').modal('show')
     false
 
   $("[data-time]").each ->

app/assets/stylesheets/cmtool/application.sass

@@ -1,8 +1,7 @@
 //= require pickadate/default
 //= require pickadate/default.date
 //= require pickadate/default.time
-@import font-awesome
-@import ./foundation_and_overrides
+@import semantic-ui
 @import ./structure
 @import ./components/*
 @import ./locale

app/assets/stylesheets/cmtool/components/_buttons.sass

@@ -1,12 +1,25 @@
+// Legacy button hooks kept for cmtool scaffold views not yet converted to
+// Fomantic `ui button` classes. Colors match Fomantic's default palette.
+=legacy-button($bg: #1b1c1d)
+  display: inline-block
+  padding: 0.78571429em 1.5em
+  background: $bg
+  color: white
+  border: none
+  border-radius: 0.28571429rem
+  cursor: pointer
+  &:hover
+    opacity: 0.85
+
 .to-index-button
-  +button($bg: $secondary-color)
+  +legacy-button($bg: #767676)
 .record-show-button
-  +button($bg: $info-color)
+  +legacy-button($bg: #31ccec)
 .record-new-button
-  +button
+  +legacy-button
 .record-edit-button
-  +button($bg: $warning-color)
+  +legacy-button($bg: #fbbd08)
 .record-destroy-button
-  +button($bg: $alert-color)
+  +legacy-button($bg: #db2828)
 .form-submit-button
-  +button
+  +legacy-button

app/assets/stylesheets/cmtool/components/_collapsible.sass

@@ -4,10 +4,13 @@
     font-weight: bold
     cursor: pointer
     span
-      @extend .fa, .fa-arrow-down
+      &:before
+        content: "\25BC"
+        margin-right: 0.5em
   &.collapsed
     .collapsible-title
       span
-        @extend .fa, .fa-arrow-right
+        &:before
+          content: "\25B6"
     .collapsible-content
       display: none

app/assets/stylesheets/cmtool/components/_forms.sass

@@ -1,30 +1,20 @@
 .form-row
-  +grid-row
+  display: flex
+  flex-wrap: wrap
+  align-items: flex-start
+  gap: 1em
+  margin-bottom: 0.5em
   .form-label
-    @media #{$small-only}
-      +grid-column($columns:10, $center:true)
-    @media #{$medium-only}
-      +grid-column($columns:4, $offset:1)
-    @media #{$large-up}
-      +grid-column(3)
-    &.half
-      +grid-column(6)
+    flex: 0 0 200px
+    max-width: 100%
+    padding-top: 0.5em
   .form-field
-    @media #{$small-only}
-      +grid-column($columns:10, $center:true, $last-column:true)
-    @media #{$medium-only}
-      +grid-column($columns:4, $last-column:true)
-    @media #{$large-up}
-      +grid-column($columns: 3, $last-column:true)
+    flex: 1 1 300px
+    max-width: 100%
     &.full
-      @media #{$small-only}
-        +grid-column($columns:10, $center:true, $last-column:true)
-      @media #{$medium-only}
-        +grid-column($columns:6, $last-column:true)
-      @media #{$large-up}
-        +grid-column($columns: 9, $last-column:true)
+      flex-basis: 100%
     &.half
-      +grid-column(6)
+      flex-basis: 45%
   &.form-actions
     padding-top: 12px
 body
@@ -37,9 +27,17 @@ body
       width: 60px
       display: inline-block
   .apply-filter
-    +button($bg: $primary-color, $padding: $button-tny)
+    display: inline-block
+    padding: 0.5em 1em
+    background: #2185d0
+    color: white
+    border: none
+    border-radius: 0.28571429rem
+    cursor: pointer
+    &:hover
+      opacity: 0.85
   .error
     input, textarea
-      border-color: $alert-color
+      border-color: #db2828
   input[type="number"]
     text-align: right

app/assets/stylesheets/cmtool/structure.sass

@@ -1,10 +1,25 @@
 .clear
   clear: both
 
+// Generic scaffold show pages: `.show_field > strong + value`
+.show_field
+  padding: 0.5em 0
+  border-bottom: 1px solid rgba(34, 36, 38, 0.1)
+  strong
+    display: inline-block
+    min-width: 160px
+    margin-right: 1em
+
 #sub-navigation-container
   margin-top: 20px
-  +panel()
-  +clearfix()
+  padding: 1em
+  background: #f8f8f8
+  border: 1px solid rgba(34, 36, 38, 0.15)
+  border-radius: 0.28571429rem
+  &:after
+    content: ""
+    display: table
+    clear: both
   ul
     list-style: none
     margin: 0