feat: Nativize "No distraction" theme as "Focus Mode" (#758)

Co-authored-by: Mo Bitar <me@bitar.io>

app/assets/stylesheets/_focused.scss

@@ -0,0 +1,88 @@
+.section.tags,
+.section.notes {
+  transition: width 1.25s;
+}
+
+.focus-mode {
+  .mac-desktop #editor-column {
+    // To offset colored circles in Mac
+    padding-top: 35px;
+  }
+
+  .mac-desktop #editor-column:before {
+    content: '';
+    display: block;
+    position: absolute;
+    top: 0;
+    width: 100%;
+    height: 38px;
+    -webkit-app-region: drag;
+  }
+
+  #editor-title-bar {
+    display: none;
+  }
+
+  #editor-menu-bar {
+    display: none;
+  }
+
+  #editor-pane-component-stack {
+    display: none;
+  }
+
+  #footer-bar {
+    opacity: 0.08;
+    transition: opacity 0.25s;
+  }
+
+  #footer-bar:hover {
+    opacity: 1;
+  }
+
+  .section.tags,
+  .section.notes {
+    will-change: opacity;
+    animation: fade-out 1.25s forwards;
+    transition-delay: 0s;
+    width: 0px !important;
+    flex: none !important;
+  }
+
+  .section.tags:hover {
+    flex: initial;
+    width: 0px !important;
+  }
+
+  .section.notes:hover {
+    flex: initial;
+    width: 0px !important;
+  }
+}
+
+.disable-focus-mode {
+  .section.tags,
+  .section.notes {
+    will-change: opacity;
+    animation: fade-in 1.25s forwards;
+  }
+}
+
+@keyframes fade-in {
+  0% {
+    opacity: 0;
+  }
+  100% {
+    opacity: 1;
+  }
+}
+
+@keyframes fade-out {
+  0% {
+    opacity: 1;
+  }
+  100% {
+    opacity: 0;
+    border: none !important;
+  }
+}

app/assets/stylesheets/_sn.scss

@@ -289,6 +289,10 @@
   max-width: 18rem;
 }
 
+.max-w-89 {
+  max-width: 22.25rem;
+}
+
 .mb-4 {
   margin-bottom: 1rem;
 }
@@ -300,10 +304,6 @@
   margin-bottom: 2rem;
 }
 
-.max-w-89 {
-  max-width: 22.25rem;
-}
-
 .w-26 {
   width: 6.5rem;
 }
@@ -461,6 +461,11 @@
   padding-right: 0;
 }
 
+.px-4 {
+  padding-left: 1rem;
+  padding-right: 1rem;
+}
+
 .sn-component .px-4\.5,
 .sn-component .sk-panel .px-4\.5 {
   padding-left: 1.375rem;

app/assets/stylesheets/index.css.scss

@@ -13,4 +13,5 @@
 @import 'reach-sub';
 @import 'sessions-modal';
 @import 'preferences';
+@import 'focused';
 @import 'sn';