d45e21c Add settings dropdown — radicle-explorer

added public/fonts/JetBrainsMono-Bold.ttf

added public/fonts/JetBrainsMono-BoldItalic.ttf

added public/fonts/JetBrainsMono-Italic.ttf

added public/fonts/JetBrainsMono-Regular.ttf

added public/fonts/JetBrainsMono-SemiBold.ttf

added public/fonts/JetBrainsMono-SemiBoldItalic.ttf

modified public/typography.css

@@ -20,6 +20,52 @@

   src: url("fonts/Inter-Bold.otf");
 }
 @font-face {
   font-family: "JetBrains Mono";
   font-style: normal;
   font-weight: 400;
   font-display: swap;
   src: url("fonts/JetBrainsMono-Regular.ttf");
 }
 @font-face {
   font-family: "JetBrains Mono";
   font-weight: 600;
   font-display: swap;
   src: url("fonts/JetBrainsMono-SemiBold.ttf");
 }
 @font-face {
   font-family: "JetBrains Mono";
   font-weight: 700;
   font-display: swap;
   src: url("fonts/JetBrainsMono-Bold.ttf");
 }
 @font-face {
   font-family: "JetBrains Mono";
   font-style: italic;
   font-weight: 400;
   font-display: swap;
   src: url("fonts/JetBrainsMono-Italic.ttf");
 }
 @font-face {
   font-family: "JetBrains Mono";
   font-style: italic;
   font-weight: 600;
   font-display: swap;
   src: url("fonts/JetBrainsMono-SemiBoldItalic.ttf");
 }
 @font-face {
   font-family: "JetBrains Mono";
   font-style: italic;
   font-weight: 700;
   font-display: swap;
   src: url("fonts/JetBrainsMono-BoldItalic.ttf");
 }
 :root {
   --font-family-sans-serif: Inter, sans-serif;
   --font-family-monospace: monospace;

@@ -34,6 +80,14 @@

   --font-size-huge: 2rem;
 }
 [data-codefont="system"] {
   --font-family-monospace: monospace;
 }
 [data-codefont="jetbrains"] {
   --font-family-monospace: "JetBrains Mono";
 }
 html {
   -ms-text-size-adjust: 100%;
   -webkit-font-smoothing: antialiased;

modified src/Header.svelte

@@ -14,7 +14,7 @@

   import Search from "@app/Search.svelte";
   import SearchResults from "@app/components/Modal/SearchResults.svelte";
   import SeedDropdown from "@app/SeedDropdown.svelte";
   import ThemeToggle from "@app/ThemeToggle.svelte";
   import SettingsDropdown from "@app/components/SettingsDropdown.svelte";
   import { Profile, ProfileType } from "@app/profile";
   import { closeFocused } from "@app/Floating.svelte";

@@ -119,6 +119,7 @@

   .modal {
     background: var(--color-background);
     border-radius: var(--border-radius);
     box-shadow: var(--elevation-low);
     max-width: 22.5rem;
     min-width: 18rem;
     padding: 1.5rem;

@@ -127,12 +128,26 @@

     top: 5rem;
   }
   .modal-register {
     color: var(--color-foreground-6);
     color: var(--color-foreground);
     padding-left: 0.5rem;
   }
   .modal-register:hover {
     color: var(--color-foreground);
   }
   .toggle {
     width: 2.5rem;
     height: 2.5rem;
     border-radius: var(--border-radius-round);
     border: 1px solid var(--color-foreground);
     display: flex;
     justify-content: center;
     align-items: center;
   }
   .toggle:hover {
     background-color: var(--color-foreground);
     color: var(--color-background);
   }
 </style>
 <header>

@@ -217,9 +232,14 @@

         <Connect buttonVariant="foreground" {wallet} />
       </span>
     {/if}
     <ThemeToggle />
     <Floating>
       <div class="toggle" slot="toggle">
         <Icon name="gear" />
       </div>
       <SettingsDropdown slot="modal" />
     </Floating>
     <div class="layout-mobile">
       <Floating overlay>
       <Floating>
         <div slot="toggle">
           <span style="transform: scale(1.2);">
             <Icon name="ellipsis" />

modified src/Icon.svelte

@@ -9,8 +9,12 @@

     | "fork"
     | "github"
     | "moon"
     | "checkmark"
     | "sun"
     | "twitter"
     | "gear"
     | "chevron-down"
     | "chevron-up"
     | "url";
 </script>

@@ -70,6 +74,91 @@

     <path
       d="M7 12a2 2 0 1 1-4.001-.001A2 2 0 0 1 7 12zm12-2a2 2 0 1 0 .001
 .001A2 2 0 0 0 19 10zm-7 0a2 2 0 1 0 .001 4.001A2 2 0 0 0 12 10z" />
   {:else if name === "chevron-down"}
     <path
       fill-rule="evenodd"
       clip-rule="evenodd"
       d="m 16.353549 9.8535548 c 0.19527 0.1952622 0.19527 0.5118432 0
 .7071032 l -3.29289 3.2929 c -0.58579 0.58578 -1.53553 0.58578
       -2.12132 0 l -3.292894 -3.2929 c -0.195262 -0.19526 -0.195262
       -0.511841 0 -0.7071042 0.195263 -0.195262 0.511844 -0.195262
 .707104 0 l 3.2929 3.2928942 c 0.19526 0.19526 0.51184 0.19526
 .7071 0 l 3.2929 -3.2928932 c 0.19526 -0.195262 0.51184
       -0.195262 0.7071 0 z" />
   {:else if name === "chevron-up"}
     <path
       fill-rule="evenodd"
       clip-rule="evenodd"
       d="M7.64645 14.3536C7.45118 14.1583 7.45118 13.8417 7.64645
 .6464L10.9393 10.3536C11.5251 9.76777 12.4749 9.76777 13.0607
 .3536L16.3536 13.6464C16.5488 13.8417 16.5488 14.1583 16.3536
 .3536C16.1583 14.5488 15.8417 14.5488 15.6464 14.3536L12.3536
 .0607C12.1583 10.8654 11.8417 10.8654 11.6464 11.0607L8.35355
 .3536C8.15829 14.5488 7.84171 14.5488 7.64645 14.3536Z" />
   {:else if name === "gear"}
     <path
       fill-rule="evenodd"
       clip-rule="evenodd"
       d="M9.23219 2.01728C9.38084
 .97716 9.53969 2.00775 9.66279 2.10022L11.5852 3.5442C11.8032 3.53214
 .0218 3.53214 12.2398 3.5442L14.1622 2.10022C14.2851 2.00788 14.4437
 .97724 14.5922 2.01712C15.4415 2.24523 16.2573 2.58349 17.0188
 .02327C17.1517 3.10003 17.242 3.23359 17.2637 3.38554L17.5851
 .63541L20.5219 6.58028C20.6402 6.61834 20.7401 6.69907 20.8021
 .80675C21.2406 7.56841 21.5787 8.38367 21.8077 9.23219C21.8479 9.38084
 .8173 9.53969 21.7248 9.66279L20.2747 11.5933C20.2763 11.6489 20.278
 .7141 20.2792 11.7842C20.2816 11.9194 20.2827 12.0847 20.2779
 .236L21.7248 14.1622C21.8171 14.2851 21.8478 14.4437 21.8079
 .5922C21.5798 15.4415 21.2415 16.2573 20.8017 17.0188C20.7397 17.1262
 .64 17.2067 20.5219 17.2447L17.5851 18.1896L17.2637 20.4395C17.242 20.5916
 .1515 20.7253 17.0183 20.8021C16.2566 21.2406 15.4413 21.5787 14.5928
 .8077C14.4442 21.8479 14.2853 21.8173 14.1622 21.7248L12.2398
 .2808C12.0255 20.2927 11.8107 20.2929 11.5964 20.2814L9.72748
 .8005C9.60295 21.9017 9.4374 21.937 9.28241 21.8954C8.41326 21.6619
 .54437 21.228 6.8062 20.8017C6.67328 20.725 6.58299 20.5914 6.56128
 .4395L6.22012 18.0514C6.06864 17.9052 5.91981 17.7564 5.77364
 .6049L3.38554 17.2637C3.23337 17.242 3.09966 17.1515 3.02295
 .0183C2.58438 16.2566 2.24635 15.4413 2.01728 14.5928C1.97716 14.4442
 .00775 14.2853 2.10022 14.1622L3.55032 12.2317C3.54868 12.1761 3.54702
 .1109 3.54579 12.0409C3.5434 11.9056 3.54229 11.7403 3.5471
 .5891L2.10022 9.66279C2.00788 9.53986 1.97724 9.38129 2.01712
 .23281C2.24523 8.38352 2.58349 7.56772 3.02327 6.8062C3.10003 6.67328
 .23359 6.58299 3.38554 6.56128L5.77364 6.22012C5.91981 6.06864 6.06864
 .91981 6.22012 5.77364L6.56128 3.38554C6.58302 3.23337 6.67354 3.09966
 .80675 3.02295C7.56841 2.58438 8.38367 2.24635 9.23219 2.01728ZM4.55577
 .3686C4.56087 12.4844 4.52562 12.5983 4.45604 12.6909L3.04873
 .5645C3.22919 15.1693 3.47157 15.7538 3.77202 16.3088L6.08634
 .6394C6.19815 16.6554 6.30125 16.7087 6.37886 16.7908C6.59125 17.0153
 .8097 17.2338 7.03423 17.4461C7.11628 17.5238 7.16963 17.6269 7.1856
 .7387L7.51653 20.0552C8.09055 20.3755 8.70317 20.6699 9.30047
 .8589L11.119 19.3808C11.2199 19.2987 11.3489 19.2592 11.4784
 .2707C11.7672 19.2962 12.0578 19.2962 12.3466 19.2707C12.4696 19.2598
 .5922 19.2948 12.6909 19.369L14.5645 20.7763C15.1693 20.5958 15.7538
 .3534 16.3088 20.053L16.6394 17.7387C16.6665 17.5493 16.7992 17.392
 .9812 17.3334L20.0293 16.3527C20.3415 15.7851 20.5919 15.1857 20.7765
 .5648L19.369 12.6909C19.2948 12.5922 19.2598 12.4696 19.2707
 .3467C19.2822 12.2167 19.2829 12.0017 19.2794 11.8018C19.2777 11.7056
 .2751 11.6187 19.273 11.5559L19.2703 11.4822L19.2695 11.4626L19.2693
 .4577L19.2692 11.4566C19.2641 11.3409 19.2994 11.2267 19.369
 .1341L20.7763 9.26051C20.591 8.63973 20.3405 8.04027 20.029
 .47218L16.9812 6.4916C16.7992 6.43302 16.6665 6.27569 16.6394
 .08634L16.3087 3.77166C15.7541 3.47068 15.1696 3.22832 14.5648
 .04851L12.6909 4.45604C12.5922 4.53018 12.4696 4.56518 12.3466
 .55431C12.0578 4.52877 11.7672 4.52877 11.4784 4.55431C11.3554 4.56518
 .2328 4.53018 11.1341 4.45604L9.26051 3.04873C8.65575 3.22919 8.07123
 .47157 7.51622 3.77202L7.1856 6.08634C7.16963 6.19815 7.11628 6.30125
 .03423 6.37886C6.8097 6.59125 6.59125 6.8097 6.37886 7.03423C6.30125
 .11628 6.19815 7.16963 6.08634 7.1856L3.77166 7.51627C3.47068 8.07088
 .22832 8.65536 3.04851 9.26022L4.45604 11.1341C4.53016 11.2328 4.56517
 .3554 4.55432 11.4783C4.54285 11.6083 4.5421 11.8233 4.54563
 .0232C4.54733 12.1194 4.54988 12.2063 4.55201 12.2691L4.55471
 .3429L4.55551 12.3624L4.55577 12.3686ZM11.9121 8.41248C9.97912 8.41248
 .41211 9.97948 8.41211 11.9125C8.41211 13.8455 9.97912 15.4125 11.9121
 .4125C13.8451 15.4125 15.4121 13.8455 15.4121 11.9125C15.4121 9.97948
 .8451 8.41248 11.9121 8.41248ZM7.41211 11.9125C7.41211 9.4272 9.42683
 .41248 11.9121 7.41248C14.3974 7.41248 16.4121 9.4272 16.4121
 .9125C16.4121 14.3978 14.3974 16.4125 11.9121 16.4125C9.42683 16.4125
 .41211 14.3978 7.41211 11.9125Z" />
   {:else if name === "fork"}
     <path
       fill-rule="evenodd"

@@ -166,6 +255,15 @@

 .7506C3.58542 14.4094 3.58542 17.0978 5.24374 18.7566C6.90207 20.4145
 .59097 20.4145 11.2493 18.7566L13.5251 16.4809C12.6158 16.6146 11.6822
 .5234 10.8164 16.1865Z" />
   {:else if name === "checkmark"}
     <path
       fill-rule="evenodd"
       clip-rule="evenodd"
       d="M18.2941 6.59564C18.5174 6.75806 18.5668 7.07076 18.4044 7.29409L11.781
 .4012C10.8775 17.6436 9.07768 17.7848 7.99142 16.6985L5.64645 14.3536C5.45118
 .1583 5.45118 13.8417 5.64645 13.6465C5.84171 13.4512 6.15829 13.4512 6.35355
 .6465L8.69852 15.9914C9.35028 16.6432 10.4302 16.5584 10.9723 15.813L17.5956
 .70592C17.7581 6.48259 18.0708 6.43322 18.2941 6.59564Z" />
   {:else if name === "sun"}
     <path
       fill-rule="evenodd"

modified src/ThemeToggle.svelte

@@ -22,42 +22,29 @@

 <script lang="ts">
   import Icon from "@app/Icon.svelte";
   import Toggle from "@app/Toggle.svelte";
   $: document.documentElement.setAttribute("data-theme", $theme);
 </script>
 <style>
   .theme-button {
     border-radius: 50%;
     border: 1px solid var(--color-foreground);
     color: var(--color-foreground);
     cursor: pointer;
   .theme {
     display: flex;
     height: 40px;
     width: 40px;
     justify-content: center;
     align-items: center;
     user-select: none;
   }
   .theme-button:hover {
     color: var(--color-background);
     background-color: var(--color-foreground);
     border-color: transparent;
     gap: 0.5rem;
     cursor: pointer;
   }
 </style>
 <!-- svelte-ignore a11y-click-events-have-key-events -->
 <div
   class="theme-button"
   role="button"
   on:click={() => {
     theme.set($theme === "dark" ? "light" : "dark");
     storeTheme($theme);
   }}>
   {#if $theme === "dark"}
     <Icon name="sun" />
   {:else}
     <Icon name="moon" />
   {/if}
 <div class="theme">
   <Icon name="sun" on:click={() => theme.set("light")} />
   <Toggle
     checked={$theme === "dark"}
     on:change={() => {
       theme.set($theme === "dark" ? "light" : "dark");
       storeTheme($theme);
     }} />
   <Icon name="moon" on:click={() => theme.set("dark")} />
 </div>

added src/Toggle.svelte

@@ -0,0 +1,55 @@

 <script lang="ts">
   // Is not as good as crypto.randomUUID() but we need some kind of fallback
   const id = self.crypto.randomUUID
     ? self.crypto.randomUUID()
     : new Date().getTime().toString();
   export let checked: boolean;
 </script>
 <style>
   .toggle input[type="checkbox"] {
     display: none;
   }
   .toggle label {
     background-color: var(--color-background-1);
     border: 1px solid var(--color-foreground-6);
     border-radius: var(--border-radius-round);
     cursor: pointer;
     display: block;
     position: relative;
     transition: transform ease-in-out 0.2s;
     width: 2.5rem;
     height: 1.5rem;
   }
   .toggle label::after {
     background-color: var(--color-foreground-6);
     border-radius: var(--border-radius-round);
     content: " ";
     cursor: pointer;
     display: inline-block;
     position: absolute;
     left: 3px;
     top: 3px;
     transition: transform ease-in-out 0.2s;
     width: 1rem;
     height: 1rem;
   }
   .toggle input[type="checkbox"]:checked ~ label {
     background-color: var(--color-background-1);
     border-color: var(--color-foreground-6);
   }
   .toggle input[type="checkbox"]:checked ~ label::after {
     background-color: var(--color-foreground-6);
     transform: translateX(15px);
   }
 </style>
 <div class="toggle">
   <input type="checkbox" bind:checked on:change {id} />
   <label for={id} />
 </div>

added src/appearance.ts

@@ -0,0 +1,31 @@

 import { writable } from "svelte/store";
 export type CodeFont = "jetbrains" | "system";
 export const codeFont = writable<CodeFont>(loadCodeFont());
 export function storeCodeFont(codeFont: CodeFont): void {
   window.localStorage.setItem("codefont", codeFont);
 }
 function loadCodeFont(): CodeFont {
   const storedCodeFont = window.localStorage.getItem("codefont");
   if (storedCodeFont === null) {
     return "system";
   } else {
     return storedCodeFont as CodeFont;
   }
 }
 export const codeFonts: {
   storedName: CodeFont;
   fontFamily: string;
   displayName: string;
 }[] = [
   {
     storedName: "jetbrains",
     fontFamily: "JetBrains Mono",
     displayName: "JetBrains Mono",
   },
   { storedName: "system", fontFamily: "monospace", displayName: "system" },
 ];

modified src/base/projects/Blob.svelte

@@ -233,7 +233,7 @@

       {#if blob.html}
         <pre class="code no-scrollbar">{@html blob.content}</pre>
       {:else}
         <pre class="code no-scrollbar">{blob.content}</pre>
         <pre class="code txt-monospace no-scrollbar">{blob.content}</pre>
       {/if}
     {/if}
   </div>

added src/components/SettingsDropdown.svelte

@@ -0,0 +1,118 @@

 <script lang="ts">
   import type { CodeFont } from "@app/appearance";
   import Icon from "@app/Icon.svelte";
   import ThemeToggle from "@app/ThemeToggle.svelte";
   import { codeFont, storeCodeFont } from "@app/appearance";
   import { codeFonts } from "@app/appearance";
   import { quadIn } from "svelte/easing";
   import { slide } from "svelte/transition";
   let showFonts = false;
   $: document.documentElement.setAttribute("data-codefont", $codeFont);
   const switchFont = (font: CodeFont) => {
     codeFont.set(font);
     storeCodeFont(font);
   };
 </script>
 <style>
   .dropdown {
     position: absolute;
     top: 5rem;
     right: 1.5rem;
     width: 16.5rem;
     background: var(--color-foreground-1);
     border-radius: var(--border-radius);
     display: flex;
     flex-direction: column;
     align-items: center;
     color: var(--color-foreground-6);
     box-shadow: var(--elevation-low);
   }
   .dropdown:hover :last-child {
     border-bottom-left-radius: var(--border-radius);
     border-bottom-right-radius: var(--border-radius);
   }
   .item {
     width: 100%;
     display: flex;
     flex-direction: row;
     justify-content: space-between;
     align-items: center;
     height: 2.5rem;
     padding: 0 0.8rem;
     font-weight: 600;
     line-height: 2.5rem;
     user-select: none;
   }
   .item:first-of-type {
     border-bottom: 1px solid var(--color-foreground-3);
   }
   .selector {
     display: flex;
     flex-direction: row;
     align-items: center;
     justify-content: space-between;
     cursor: pointer;
   }
   .fonts {
     width: 100%;
   }
   .font {
     color: var(--color-foreground-5);
     cursor: pointer;
   }
   .font:last-of-type {
     border-bottom-left-radius: var(--border-radius);
     border-bottom-right-radius: var(--border-radius);
   }
   .selector:hover {
     background-color: var(--color-foreground-3);
     color: var(--color-foreground-6);
   }
   .font:hover {
     background-color: var(--color-foreground-3);
     color: var(--color-foreground-5);
   }
   .active,
   .active:hover {
     color: var(--color-foreground-6);
   }
 </style>
 <div class="dropdown">
   <div class="item">
     <span>Theme</span>
     <ThemeToggle />
   </div>
   <!-- svelte-ignore a11y-click-events-have-key-events -->
   <div
     class="item selector"
     on:click|stopPropagation={() => (showFonts = !showFonts)}>
     <div>Code font</div>
     <Icon name={`chevron-${showFonts ? "up" : "down"}`} />
   </div>
   {#if showFonts}
     <div
       class="fonts"
       transition:slide|local={{ duration: 150, easing: quadIn }}>
       {#each codeFonts as font}
         {@const isSelectedFont = $codeFont === font.storedName}
         <!-- svelte-ignore a11y-click-events-have-key-events -->
         <div
           on:click={() => switchFont(font.storedName)}
           class="item font"
           class:active={isSelectedFont}
           style:font-family={font.fontFamily}>
           {font.displayName}
           {#if isSelectedFont}
             <Icon name="checkmark" />
           {/if}
         </div>
       {/each}
     </div>
   {/if}
 </div>