feat: implement preferences pane

app/assets/stylesheets/_main.scss

@@ -12,6 +12,8 @@ $z-index-footer-bar: 2000;
 $z-index-footer-bar-item: 2000;
 $z-index-footer-bar-item-panel: 2000;
 
+$z-index-preferences: 3000;
+
 $z-index-lock-screen: 10000;
 $z-index-modal: 10000;
 
@@ -238,3 +240,7 @@ $footer-height: 32px;
 .icon {
   margin-right: 4px;
 }
+
+.z-index-preferences {
+  z-index: $z-index-preferences;
+}

app/assets/stylesheets/_preferences.scss

@@ -0,0 +1,46 @@
+.preferences-menu-item {
+  @extend .border-box;
+  @extend .w-auto;
+  @extend .h-auto;
+  @extend .rounded;
+  @extend .min-w-42;
+
+  @extend .py-2;
+  @extend .px-4;
+
+  @extend .flex;
+  @extend .flex-row;
+  @extend .items-center;
+  @extend .justify-start;
+
+  @extend .gap-1;
+  @extend .text-sm;
+  @extend .cursor-pointer;
+
+  @extend .border-transparent;
+  @extend .border-solid;
+  @extend .border-1;
+
+  .icon {
+    color: var(--sn-stylekit-grey-1);
+    @extend .text-base;
+  }
+
+  &:hover {
+    @extend .border-gray-300;
+    @extend .border-solid;
+    @extend .border-1;
+  }
+}
+
+.preferences-menu-item.selected {
+  @extend .border-info;
+  @extend .color-info;
+  @extend .font-bold;
+
+  background-color: var(--sn-stylekit-info-backdrop-color);
+
+  .icon {
+    @extend .color-info;
+  }
+}

app/assets/stylesheets/_sn.scss

@@ -4,42 +4,14 @@
   height: 90vh;
 }
 
-/**
- * A button that is just an icon. Separated from .sn-button because there
- * is almost no style overlap.
- */
-.sn-icon-button {
-  @extend .w-8;
-  @extend .h-8;
-  @extend .flex;
-  @extend .justify-center;
-  @extend .items-center;
-  @extend .border-solid;
-  @extend .border-1;
-  @extend .border-neutral;
-  @extend .bg-clip-padding;
-  @extend .m-0;
-  @extend .p-0;
-  @extend .bg-transparent;
-  @extend .cursor-pointer;
-  @extend .rounded-full;
-  @extend .color-neutral;
-  @extend .hover\:color-text;
-  @extend .focus\:color-text;
-  @extend .hover\:bg-contrast;
-  @extend .focus\:bg-contrast;
-  @extend .focus\:outline-none;
-  @extend .focus\:ring-info;
-}
-
 .sn-icon {
   @extend .h-5;
   @extend .w-5;
   @extend .fill-current;
 
   &.sn-icon--small {
-    @extend .h-3\.5 ;
-    @extend .w-3\.5 ;
+    @extend .h-3\.5;
+    @extend .w-3\.5;
   }
 }
 
@@ -57,7 +29,7 @@
   &[data-state='collapsed'] {
     display: none;
   }
-  
+
   &.sn-dropdown--animated {
     @extend .transition-transform;
     @extend .duration-150;
@@ -105,10 +77,7 @@
   transform: translate(0px, -50%);
 
   &.sn-switch-handle--right {
-    transform: translate(
-      calc(2rem - 1.125rem),
-      -50%
-    );
+    transform: translate(calc(2rem - 1.125rem), -50%);
   }
 }
 
@@ -152,3 +121,23 @@
   @extend .hover\:bg-secondary-contrast;
   @extend .focus\:bg-secondary-contrast;
 }
+
+.sn-titlebar {
+  @extend .w-full;
+  @extend .bg-default;
+  @extend .h-14;
+
+  @extend .border-bottom-solid;
+  @extend .border-b-1;
+  @extend .border-gray-300;
+
+  @extend .py-3;
+  @extend .px-3;
+
+  @extend .flex;
+  @extend .flex-row;
+}
+
+.sn-title {
+  @extend .font-bold;
+}

app/assets/stylesheets/index.css.scss

@@ -1,15 +1,16 @@
-@import "sn-stylekit/dist/stylekit";
-@import "main";
-@import "ui";
-@import "footer";
-@import "tags";
-@import "notes";
-@import "editor";
-@import "menus";
-@import "modals";
-@import "lock-screen";
-@import "stylekit-sub";
-@import "ionicons";
-@import "reach-sub";
-@import "sessions-modal";
-@import "sn";
+@import 'sn-stylekit/dist/stylekit';
+@import 'main';
+@import 'ui';
+@import 'footer';
+@import 'tags';
+@import 'notes';
+@import 'editor';
+@import 'menus';
+@import 'modals';
+@import 'lock-screen';
+@import 'stylekit-sub';
+@import 'ionicons';
+@import 'reach-sub';
+@import 'sessions-modal';
+@import 'preferences';
+@import 'sn';