Migrate Angular UI from portmaster-ui to desktop/angular. Update Earthfile to build libs, UI and tauri-builtin

desktop/angular/src/theme/_breadcrumbs.scss

@@ -0,0 +1,20 @@
+h4.breadcrumbs {
+  * {
+    margin-left : 0.125rem;
+    margin-right: 0.125rem;
+  }
+
+  span {
+    outline: none;
+    @apply text-secondary;
+
+    &:hover {
+      @apply text-primary;
+      text-decoration: underline;
+    }
+
+    &:last-of-type {
+      @apply text-primary;
+    }
+  }
+}

desktop/angular/src/theme/_button.scss

@@ -0,0 +1,58 @@
+@layer components {
+  button {
+    @apply text-xs;
+    @apply bg-buttons-dark;
+    @apply p-1;
+    @apply px-4;
+    @apply capitalize;
+    @apply rounded-sm;
+    @apply font-medium;
+    user-select: none;
+    outline: none;
+    cursor: pointer;
+    font-size: 0.7rem;
+
+    &.btn-outline {
+      background: transparent;
+      opacity: 0.6;
+    }
+
+    &:hover {
+      &:not(.outline):not(.bg-blue) {
+        @apply bg-buttons-light;
+      }
+
+      opacity: 1;
+    }
+
+    &:disabled {
+      @apply cursor-default;
+      opacity: 0.3;
+
+      &:not(.outline):hover {
+        @apply bg-buttons-dark;
+      }
+    }
+
+    &:active {
+      @apply bg-buttons-dark;
+    }
+
+    &:hover,
+    &:focus,
+    &:active {
+      outline: none;
+    }
+  }
+
+  .info-circle {
+    width: 18px;
+    height: 18px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    font-size: 0.8em;
+    @apply rounded-full;
+    @apply bg-buttons-dark;
+  }
+}

desktop/angular/src/theme/_card.scss

@@ -0,0 +1,110 @@
+.card-header {
+  display        : flex;
+  align-items    : center;
+  cursor         : pointer;
+  outline        : none;
+  justify-content: space-between;
+  @apply text-xs;
+  @apply font-medium;
+  margin-top             : 5px;
+  padding-top            : 0.65rem;
+  padding-bottom         : 0.65rem;
+  padding-left           : 0.65rem;
+  padding-right          : 0.65rem;
+  border-top-left-radius : 4px;
+  border-top-right-radius: 4px;
+  background-color       : #202020e0;
+
+  &:not(.open) {
+    border-radius: 4px;
+  }
+
+  &>*:not(:last-child) {
+    @apply mr-1;
+  }
+
+  &>app-icon:not(:last-child) {
+    @apply mr-2;
+  }
+
+  &:hover {
+    background-color: #292929b0;
+  }
+
+  &.active {
+    background-color: #303030;
+
+    app-count-indicator {
+      background-color: #474747;
+
+      div.state {
+        background-color: #5c5c5c;
+
+      }
+    }
+  }
+
+  &>app-icon {
+    --app-icon-size: 22px;
+  }
+
+  .card-title {
+    flex-grow    : 1;
+    overflow     : hidden;
+    white-space  : nowrap;
+    text-overflow: ellipsis;
+    font-size    : 0.7rem;
+    font-weight  : 600;
+    color        : #cacaca;
+    margin-left  : 3px;
+
+    .card-sub-title {
+      display   : block;
+      font-size : 0.8em;
+      margin-top: -3px;
+      @apply text-tertiary;
+      text-overflow: ellipsis;
+      overflow     : hidden;
+    }
+  }
+
+  .card-actions {
+    @apply mr-2;
+
+    span {
+      display   : inline-block;
+      text-align: center;
+      min-width : 5rem;
+      @apply px-2;
+      @apply rounded;
+      @apply text-xs;
+
+      padding-top   : 0.1rem;
+      padding-bottom: 0.1rem;
+
+      // TODO(ppacher): this is actually a "toggle-switch" / radio-button
+      // component. make it one.
+      &.selected {
+        @apply bg-buttons-dark;
+      }
+
+      &:hover {
+        @apply bg-buttons-light;
+      }
+    }
+  }
+}
+
+.card-content {
+  @apply bg-cards-secondary;
+  @apply rounded-b;
+
+  @apply py-2;
+  @apply px-4;
+  @apply mb-2;
+
+  display        : flex;
+  flex-direction : column;
+  flex           : 1 0;
+  justify-content: space-between;
+}

desktop/angular/src/theme/_colors.scss

@@ -0,0 +1,46 @@
+/**
+ * For debugging purposes, we define all our colors as
+ * CSS3 variables and make tailwind put a reference to those
+ * variables. This way we will see the variable name in the
+ * developer-tools instead of the hex/rgba values.
+ *
+ * You're welcome 🚀
+ */
+:root {
+  --background: #121213;
+
+  --text-primary  : #ffffff;
+  --text-secondary: #ababab;
+  --text-tertiary : #888888;
+
+  --cards-primary      : #222222;
+  --cards-secondary    : #1b1b1b;
+  --cards-secondary-rgb: 27, 27, 27;
+  --cards-tertiary     : #2c2c2c;
+
+  --button-icon : #ababab;
+  --button-dark : #343434;
+  --button-light: #474747;
+
+  --info-green     : #3df57f;
+  --info-red       : #d12e2e;
+  --info-gray      : #ababab;
+  --info-blue      : #4e97fa;
+  --info-yellow    : #e9d31d;
+  --info-yellow-rgb: 233, 211, 29;
+
+  --protection-ok-primary  : rgb(29, 233, 102);
+  --protection-ok-secondary: rgb(24, 130, 61);
+  --protection-ok-tertiary : rgb(20, 61, 36);
+
+  --protection-warn-primary  : rgb(233, 216, 29);
+  --protection-warn-secondary: rgb(130, 121, 24);
+  --protection-warn-tertiary : rgb(61, 58, 20);
+
+  --protection-fail-primary  : rgb(224, 29, 29);
+  --protection-fail-secondary: rgb(129, 24, 24);
+  --protection-fail-tertiary : rgb(61, 20, 20);
+
+  --portmaster-plus: #2fcfae;
+  --portmaster-pro: #029ad0;
+}

desktop/angular/src/theme/_dialog.scss

@@ -0,0 +1,9 @@
+.dialog-screen-backdrop {
+  backdrop-filter : blur(10px);
+  background-color: rgba(#000000, 0.7);
+}
+
+.dialog-screen-backdrop-light {
+  backdrop-filter : blur(3px);
+  background-color: rgba(#000000, 0.4);
+}

desktop/angular/src/theme/_drag-n-drop.scss

@@ -0,0 +1,46 @@
+.cdk-drag {
+  .widget {
+    user-select: none;
+
+    fa-icon {
+      opacity: 1;
+    }
+  }
+}
+
+.cdk-drag-placeholder {
+  user-select: none;
+  position: relative;
+  opacity: 0.5;
+  box-sizing: border-box;
+  cursor: grabbing !important;
+  @apply border-2;
+  @apply rounded;
+  @apply border-dashed;
+  border-color: #292929;
+}
+
+.cdk-drag-animating {
+  transition: transform 250ms cubic-bezier(0, 0, 0.2, 1);
+  user-select: none;
+}
+
+.cdk-drag-preview {
+  user-select: none;
+  box-sizing: border-box;
+  cursor: grabbing !important;
+
+  @apply rounded;
+  @apply border-2;
+  @apply border-dashed;
+  border-color: #292929;
+  @apply text-primary;
+}
+
+.cdk-drag-handle {
+  cursor: grab !important;
+}
+
+.document-grabbing {
+  cursor: grabbing !important;
+}

desktop/angular/src/theme/_inputs.scss

@@ -0,0 +1,35 @@
+input:not([type="checkbox"]),
+textarea,
+select {
+  @apply outline-none w-full block;
+  @apply bg-gray-300 rounded;
+  @apply text-xs text-primary;
+  @apply border border-gray-300;
+  @apply rounded-sm font-medium;
+  @apply p-1.5;
+
+  transition: border cubic-bezier(0.175, 0.885, 0.32, 1.275) .3s;
+
+  &::placeholder {
+    @apply text-secondary text-xxs;
+  }
+
+  &:active,
+  &:focus {
+    @apply text-primary;
+    @apply bg-gray-500 border-gray-400 bg-opacity-75 border-opacity-75;
+
+    &::placeholder {
+      @apply text-tertiary;
+    }
+  }
+}
+
+
+input,
+textarea,
+select {
+  .ng-invalid {
+    @apply border-red;
+  }
+}

desktop/angular/src/theme/_markdown.scss

@@ -0,0 +1,455 @@
+// Mostly taken from https://github.com/sindresorhus/github-markdown-css/blob/gh-pages/license
+
+markdown {
+  width: 100%;
+  @apply p-2;
+  color: white !important;
+  @apply font-normal;
+
+  details {
+    display: block;
+  }
+
+  summary {
+    display: list-item;
+  }
+
+  a {
+    background-color: initial;
+  }
+
+  a:active,
+  a:hover {
+    outline-width: 0;
+  }
+
+  strong {
+    font-weight: inherit;
+    font-weight: bolder;
+  }
+
+  h1 {
+    font-size: 2rem;
+    margin: .67rem 0;
+  }
+
+  img {
+    border-style: none;
+  }
+
+  code,
+  kbd,
+  pre {
+    font-family: monospace, monospace;
+    font-size: 1rem;
+  }
+
+  hr {
+    box-sizing: initial;
+    height: 0;
+    overflow: visible;
+  }
+
+  input {
+    font: inherit;
+    margin: 0;
+  }
+
+  input {
+    overflow: visible;
+  }
+
+  [type=checkbox] {
+    box-sizing: border-box;
+    padding: 0;
+  }
+
+  * {
+    box-sizing: border-box;
+  }
+
+  input {
+    font-family: inherit;
+    font-size: inherit;
+    line-height: inherit;
+  }
+
+  a {
+    text-decoration: none;
+  }
+
+  a:hover {
+    text-decoration: underline;
+  }
+
+  strong {
+    font-weight: 600;
+  }
+
+  hr {
+    height: 0;
+    margin: 15px 0;
+    overflow: hidden;
+    background: transparent;
+    border: 0;
+    border-bottom: 1px solid #dfe2e5;
+  }
+
+  hr:after,
+  hr:before {
+    display: table;
+    content: "";
+  }
+
+  hr:after {
+    clear: both;
+  }
+
+  table {
+    border-spacing: 0;
+    border-collapse: collapse;
+  }
+
+  td,
+  th {
+    padding: 0;
+  }
+
+  details summary {
+    cursor: pointer;
+  }
+
+  kbd {
+    display: inline-block;
+    padding: 3px 5px;
+    font: 11px SFMono-Regular, Consolas, Liberation Mono, Menlo, monospace;
+    line-height: 10px;
+    vertical-align: middle;
+    background-color: #fafbfc;
+    border: 1px solid #d1d5da;
+    border-radius: 3px;
+    box-shadow: inset 0 -1px 0 #d1d5da;
+  }
+
+  h1,
+  h2,
+  h3,
+  h4,
+  h5,
+  h6 {
+    margin-top: 0;
+    margin-bottom: 0;
+  }
+
+  h1 {
+    font-size: 32px;
+  }
+
+  h1,
+  h2 {
+    font-weight: 600;
+  }
+
+  h2 {
+    font-size: 24px;
+  }
+
+  h3 {
+    font-size: 20px;
+  }
+
+  h3,
+  h4 {
+    font-weight: 600;
+  }
+
+  h4 {
+    font-size: 16px;
+  }
+
+  h5 {
+    font-size: 14px;
+  }
+
+  h5,
+  h6 {
+    font-weight: 600;
+  }
+
+  h6 {
+    font-size: 12px;
+  }
+
+  p {
+    margin-top: 0;
+    margin-bottom: 10px;
+  }
+
+  blockquote {
+    margin: 0;
+  }
+
+  ol,
+  ul {
+    padding-left: 0;
+    margin-top: 0;
+    margin-bottom: 0;
+  }
+
+  ol {
+    list-style-type: decimal;
+  }
+
+  ul {
+    list-style-type: circle;
+  }
+
+  ol ol,
+  ul ol {
+    list-style-type: lower-roman;
+  }
+
+  ol ol ol,
+  ol ul ol,
+  ul ol ol,
+  ul ul ol {
+    list-style-type: lower-alpha;
+  }
+
+  dd {
+    margin-left: 0;
+  }
+
+  code,
+  pre {
+    font-family: SFMono-Regular, Consolas, Liberation Mono, Menlo, monospace;
+    font-size: 12px;
+  }
+
+  pre {
+    margin-top: 0;
+    margin-bottom: 0;
+  }
+
+  input::-webkit-inner-spin-button,
+  input::-webkit-outer-spin-button {
+    margin: 0;
+    -webkit-appearance: none;
+    appearance: none;
+  }
+
+  a:not([href]) {
+    color: inherit;
+    text-decoration: none;
+  }
+
+  blockquote,
+  details,
+  dl,
+  ol,
+  p,
+  pre,
+  table,
+  ul {
+    margin-top: 0;
+    // be carefully when ever changing this!
+    margin-bottom: 16px;
+  }
+
+  hr {
+    height: .25rem;
+    padding: 0;
+    margin: 24px 0;
+    background-color: #e1e4e8;
+    border: 0;
+  }
+
+  blockquote {
+    padding: 0 1rem;
+    border-left: .25rem solid #dfe2e5;
+  }
+
+  blockquote>:first-child {
+    margin-top: 0;
+  }
+
+  blockquote>:last-child {
+    margin-bottom: 0;
+  }
+
+  h1,
+  h2,
+  h3,
+  h4,
+  h5,
+  h6 {
+    margin-top: 24px;
+    margin-bottom: 16px;
+    font-weight: 600;
+    line-height: 1.25;
+  }
+
+  h1 {
+    font-size: 2rem;
+  }
+
+  h1,
+  h2 {
+    padding-bottom: .3rem;
+    border-bottom: 1px solid #eaecef;
+  }
+
+  h2 {
+    font-size: 1.5rem;
+  }
+
+  h3 {
+    font-size: 1.25rem;
+  }
+
+  h4 {
+    font-size: 1rem;
+  }
+
+  h5 {
+    font-size: .875rem;
+  }
+
+  h6 {
+    font-size: .85rem;
+  }
+
+  ol,
+  ul {
+    padding-left: 2rem;
+  }
+
+  ol ol,
+  ol ul,
+  ul ol,
+  ul ul {
+    margin-top: 0;
+    margin-bottom: 0;
+  }
+
+  li {
+    word-wrap: break-all;
+  }
+
+  li>p {
+    margin-top: 16px;
+  }
+
+  li+li {
+    margin-top: .25rem;
+  }
+
+  dl {
+    padding: 0;
+  }
+
+  dl dt {
+    padding: 0;
+    margin-top: 16px;
+    font-size: 1rem;
+    font-style: italic;
+    font-weight: 600;
+  }
+
+  dl dd {
+    padding: 0 16px;
+    margin-bottom: 16px;
+  }
+
+  table {
+    display: block;
+    width: 100%;
+    overflow: auto;
+  }
+
+  table th {
+    font-weight: 600;
+  }
+
+  table td,
+  table th {
+    padding: 6px 13px;
+    border: 1px solid #dfe2e5;
+  }
+
+  table tr {
+    background-color: #fff;
+    border-top: 1px solid #c6cbd1;
+  }
+
+  table tr:nth-child(2n) {
+    background-color: #f6f8fa;
+  }
+
+  img {
+    max-width: 100%;
+    box-sizing: initial;
+    background-color: #fff;
+  }
+
+  img[align=right] {
+    padding-left: 20px;
+  }
+
+  img[align=left] {
+    padding-right: 20px;
+  }
+
+  code {
+    padding: .2rem .4rem;
+    margin: 0;
+    font-size: 95%;
+    background-color: rgba(27, 31, 35, .05);
+    border-radius: 3px;
+  }
+
+  pre {
+    word-wrap: normal;
+  }
+
+  pre>code {
+    padding: 0;
+    margin: 0;
+    font-size: 100%;
+    word-break: normal;
+    white-space: pre;
+    background: transparent;
+    border: 0;
+  }
+
+  .highlight {
+    margin-bottom: 16px;
+  }
+
+  .highlight pre {
+    margin-bottom: 0;
+    word-break: normal;
+  }
+
+  .highlight pre,
+  pre {
+    padding: 16px;
+    overflow: auto;
+    font-size: 90%;
+    line-height: 1.45;
+    background-color: #f6f8fa;
+    border-radius: 3px;
+  }
+
+  pre code {
+    display: inline;
+    max-width: auto;
+    padding: 0;
+    margin: 0;
+    overflow: visible;
+    line-height: inherit;
+    word-wrap: normal;
+    background-color: initial;
+    border: 0;
+  }
+}

desktop/angular/src/theme/_pill.scss

@@ -0,0 +1,7 @@
+@import 'mixins/_pill.scss';
+
+.pill-container {
+  @include pill-container;
+  @apply pl-2;
+  @apply bg-buttons-dark;
+}

desktop/angular/src/theme/_scroll.scss

@@ -0,0 +1,28 @@
+html,
+body {
+  scroll-behavior: smooth;
+}
+
+::-webkit-scrollbar {
+  @apply bg-buttons-dark;
+  width: 4px;
+}
+
+::-webkit-scrollbar-thumb {
+  @apply bg-buttons-light;
+  @apply rounded;
+  cursor: pointer;
+}
+
+.no-scroll {
+  overflow: hidden;
+}
+
+.scrollable {
+  width     : 100%;
+  max-height: 100%;
+  overflow  : auto;
+  overflow-x: hidden;
+  flex-grow : 1;
+  @apply px-3;
+}

desktop/angular/src/theme/_search.scss

@@ -0,0 +1,10 @@
+em.search-result {
+  @apply text-background;
+  @apply bg-yellow;
+  @apply border;
+  @apply border-yellow;
+  @apply rounded-sm;
+
+  text-decoration: none;
+  font-style: inherit;
+}

desktop/angular/src/theme/_table.scss

@@ -0,0 +1,41 @@
+table:not(.custom) {
+  width: 100%;
+
+  th,
+  tr,
+  td {
+    @apply text-xs;
+  }
+
+  th {
+    text-align: left;
+    @apply text-secondary;
+    z-index: 1;
+  }
+
+  td,
+  th {
+    @apply p-2;
+    @apply font-medium;
+  }
+
+  tr:nth-child(even) {
+    @apply bg-cards-secondary;
+    --bg-opacity: 0.5;
+  }
+
+  tr:nth-child(odd) {
+    @apply bg-cards-tertiary;
+    --bg-opacity: 0.6;
+  }
+
+  tr.cdk-header-row th {
+    @apply bg-cards-tertiary;
+    --bg-opacity: 1;
+
+    // we cannot use borders directly due to
+    // the sticky header. Use a box-shadow to
+    // simulate a border.
+    box-shadow: 0 2px rgba(0, 0, 0, 0.3);
+  }
+}

desktop/angular/src/theme/_tailwind.scss

@@ -0,0 +1,4 @@
+/** The tailwind post-processor will inject all tailwind styles here **/
+@import 'tailwindcss/base';
+@import 'tailwindcss/components';
+@import 'tailwindcss/utilities';

desktop/angular/src/theme/_trust-level.scss

@@ -0,0 +1,73 @@
+span.trust-level {
+  display    : inline-block;
+  position   : relative;
+  width      : 6px;
+  user-select: none;
+  overflow   : visible;
+
+  &~* {
+    @apply ml-2;
+  }
+
+  &:before {
+    content      : "";
+    display      : block;
+    position     : relative;
+    height       : 6px;
+    width        : 6px;
+    top          : -1px;
+    left         : 0px;
+    border-radius: 50%;
+  }
+
+  &.centered:before {
+    top: 0px;
+  }
+
+  &:before {
+    background-color: var(--bg-color);
+    @apply shadow-inner-xs;
+  }
+
+  &.pulse:before {
+    animation : pulsate-trust 1s ease-out infinite;
+    box-shadow: 0 0 10px var(--glow-color);
+  }
+
+  &.off {
+    --bg-color  : theme('colors.info.gray');
+    --glow-color: theme('colors.info.gray');
+  }
+
+  &.auto {
+    --bg-color  : theme('colors.info.blue');
+    --glow-color: theme('colors.info.blue');
+  }
+
+  &.low {
+    --bg-color  : theme('colors.info.green');
+    --glow-color: theme('colors.info.green');
+  }
+
+  &.medium {
+    --bg-color  : theme('colors.info.yellow');
+    --glow-color: theme('colors.info.yellow');
+  }
+
+  &.high {
+    --bg-color  : theme('colors.info.red');
+    --glow-color: theme('colors.info.red');
+  }
+}
+
+@keyframes pulsate-trust {
+  100% {
+    opacity: 0.8;
+  }
+
+  0% {
+    background: var(--glow-color);
+    box-shadow: 0 0 0 var(--glow-color);
+    opacity   : 1;
+  }
+}

desktop/angular/src/theme/_typography.scss

@@ -0,0 +1,61 @@
+html,
+body {
+  font-family: 'Roboto', sans-serif;
+  @apply text-primary;
+  @apply font-medium;
+}
+
+body,
+.primary-text,
+.secondary-text {
+  @apply text-xs;
+  @apply font-medium;
+}
+
+label,
+.secondary-text {
+  @apply text-secondary;
+}
+
+.primary-text {
+  @apply text-primary;
+}
+
+.tertiary-text {
+  @apply text-tertiary;
+}
+
+h1,
+h2,
+h3 {
+  @apply text-primary;
+}
+
+h1 {
+  display: block;
+
+  @apply mb-1;
+  @apply text-xl;
+  @apply font-normal;
+  @apply mb-2;
+}
+
+h2 {
+  @apply p-2;
+  @apply ml-2;
+  @apply text-lg;
+  @apply font-medium;
+  letter-spacing: -0.01rem;
+}
+
+h3 {
+  @apply mb-1;
+  @apply text-base;
+  @apply font-medium;
+}
+
+h4 {
+  @apply text-xs;
+  @apply font-medium;
+  @apply text-tertiary;
+}

desktop/angular/src/theme/_verdict.scss

@@ -0,0 +1,47 @@
+span.verdict {
+  display     : inline-block;
+  position    : relative;
+  width       : 12px;
+  height      : 9px;
+  align-self  : center;
+  justify-self: center;
+  user-select : none;
+  overflow    : visible;
+
+  &:before {
+    content         : "";
+    display         : block;
+    position        : absolute;
+    height          : 8px;
+    width           : 8px;
+    top             : 0px;
+    left            : 0px;
+    border-radius   : 50%;
+    background-color: var(--bg-color);
+    border          : 1px solid var(--bg-color);
+    @apply shadow-inner-xs;
+  }
+
+  &.failed {
+    --bg-color: theme('colors.info.yellow');
+  }
+
+  &.accept,
+  &.reroutetons,
+  &.reroutetotunnel {
+    --bg-color: theme('colors.info.green');
+  }
+
+  &.block,
+  &.drop {
+    --bg-color: theme('colors.info.red');
+  }
+
+  &.outdated {
+    &:before {
+      background-color: transparent;
+      border-color    : var(--bg-color);
+      opacity         : .85;
+    }
+  }
+}

desktop/angular/src/theme/mixins/_pill.scss

@@ -0,0 +1,42 @@
+@mixin pill-container {
+  display        : flex;
+  width          : auto;
+  height         : 18px;
+  align-items    : center;
+  justify-content: flex-end;
+  font-size      : 0.6rem;
+  line-height    : 18px;
+
+  border-radius: 0.5rem;
+  transform    : scale(0.95);
+
+  .counter {
+    flex-grow    : 1;
+    display      : inline-block;
+    text-align   : right;
+    padding-right: 4px;
+    padding-left : 2px;
+    color        : #999999ee;
+    font-size    : 0.65rem;
+    font-weight  : 800;
+    width        : max-content;
+  }
+
+  .pill {
+    display         : inline-block;
+    width           : 29px;
+    height          : 5px;
+    background-color: #686868;
+    border-radius   : 1rem;
+    overflow        : hidden;
+    margin-left     : 0.2rem;
+    margin-right    : 0.6rem;
+
+    .percentage {
+      display         : block;
+      height          : 100%;
+      width           : 75%;
+      background-color: #21ad58;
+    }
+  }
+}