chore: update slash description

README.md

@@ -2,7 +2,7 @@
 
 <img align="right" src="./resources/logo.png" height="64px" alt="logo">
 
-`Slash` is a bookmarking and link shortening service that enables easy saving and sharing of links. It allows you to store, categorize, and share links with custom short URLs. You can search, filter, and access your saved links from any device. It also supports team sharing of link libraries for easy collaboration.
+**Slash** is an open source, self-hosted bookmarks and link sharing solution. It allows you to organize your links with tags, and share them using custom shortened URLs. Slash also supports team sharing of link libraries for easy collaboration.
 
 Try it out on <a href="https://slash.stevenlgtm.com">Live Demo</a>.
 
@@ -15,8 +15,8 @@ Try it out on <a href="https://slash.stevenlgtm.com">Live Demo</a>.
 ## Features
 
 - Create customizable `/s/` short links for any URL.
-- Share short links privately or with others.
+- Share short links privately or with teammates.
-- View analytics on short link traffic and sources.
+- View analytics on link traffic and sources.
 - Open source self-hosted solution.
 
 ## Deploy with Docker in seconds

cmd/slash/main.go

@@ -30,7 +30,7 @@ var (
 
 	rootCmd = &cobra.Command{
 		Use:   "slash",
-		Short: `A bookmarking and url shortener, save and share your links very easily.`,
+		Short: `An open source, self-hosted bookmarks and link sharing solution.`,
 		Run: func(_cmd *cobra.Command, _args []string) {
 			ctx, cancel := context.WithCancel(context.Background())
 			db := db.NewDB(profile)

web/src/components/AboutDialog.tsx

@@ -19,7 +19,7 @@ const AboutDialog: React.FC<Props> = (props: Props) => {
         </div>
         <div className="max-w-full w-80 sm:w-96">
           <p>
-            <span className="font-medium">Slash</span>: A bookmarking and url shortener, save and share your links very easily.
+            <span className="font-medium">Slash</span>: An open source, self-hosted bookmarks and link sharing solution.
           </p>
           <div className="mt-1">
             <span className="mr-2">See more in</span>

web/src/components/CreateShortcutDialog.tsx

@@ -299,7 +299,7 @@ const CreateShortcutDialog: React.FC<Props> = (props: Props) => {
                   <Input
                     className="w-full"
                     type="text"
-                    placeholder="Slash - A bookmarking and url shortener"
+                    placeholder="Slash - An open source, self-hosted bookmarks and link sharing solution"
                     size="sm"
                     value={state.shortcutCreate.openGraphMetadata.title}
                     onChange={handleOpenGraphMetadataTitleChange}
@@ -309,7 +309,7 @@ const CreateShortcutDialog: React.FC<Props> = (props: Props) => {
                   <span className="mb-2 text-sm">Description</span>
                   <Textarea
                     className="w-full"
-                    placeholder="A bookmarking and url shortener, save and share your links very easily."
+                    placeholder="An open source, self-hosted bookmarks and link sharing solution."
                     size="sm"
                     maxRows={3}
                     value={state.shortcutCreate.openGraphMetadata.description}

web/src/components/DemoBanner.tsx

@@ -14,7 +14,7 @@ const DemoBanner: React.FC = () => {
   return (
     <div className="z-10 flex flex-row items-center justify-center w-full py-2 text-sm sm:text-lg font-medium dark:text-gray-300 bg-white dark:bg-zinc-700 shadow">
       <div className="w-full max-w-4xl px-4 flex flex-row justify-between items-center gap-x-3">
-        <span>✨A bookmarking and url shortener, save and share your links very easily.✨</span>
+        <span>✨Slash - An open source, self-hosted bookmarks and link sharing solution✨</span>
         <a
           className="shadow flex flex-row justify-center items-center px-2 py-1 rounded-md text-sm sm:text-base text-white bg-blue-600 hover:bg-blue-700"
           href="https://github.com/boojack/slash#deploy-with-docker-in-seconds"

web/src/components/FilterView.tsx

@@ -21,7 +21,8 @@ const FilterView = () => {
           className="ml-2 px-2 py-1 flex flex-row justify-center items-center bg-gray-100 rounded-full text-gray-500 text-sm hover:line-through"
           onClick={() => viewStore.setFilter({ tag: undefined })}
         >
-          <Icon.Tag className="w-4 h-auto mr-1" />#{filter.tag}
+          <Icon.Tag className="w-4 h-auto mr-1" />
+          <span className="max-w-[12rem] truncate">#{filter.tag}</span>
           <Icon.X className="w-4 h-auto ml-1" />
         </button>
       )}

web/src/pages/Home.tsx

@@ -23,6 +23,8 @@ const Home: React.FC = () => {
   const [state, setState] = useState<State>({
     showCreateShortcutDialog: false,
   });
+  const [selectedTab, setSelectedTab] = useState<string>("ALL");
+  const tags = shortcutList.map((shortcut) => shortcut.tags).flat();
   const filter = viewStore.filter;
   const filteredShortcutList = getFilteredShortcutList(shortcutList, filter, currentUser);
   const orderedShortcutList = getOrderedShortcutList(filteredShortcutList, viewStore.order);
@@ -43,6 +45,21 @@ const Home: React.FC = () => {
   return (
     <>
       <div className="mx-auto max-w-4xl w-full px-3 py-6 flex flex-col justify-start items-start">
+        <div className="w-full flex flex-row justify-start items-center gap-2 flex-wrap mb-4">
+          {tags.map((tag) => (
+            <Button
+              key={tag}
+              className="hover:shadow"
+              variant="plain"
+              color="neutral"
+              size="sm"
+              onClick={() => viewStore.setFilter({ tag: tag })}
+            >
+              <Icon.Tag className="w-4 h-auto mr-1" />
+              <span className="max-w-xs truncate">#{tag}</span>
+            </Button>
+          ))}
+        </div>
         <div className="w-full flex flex-row justify-between items-center mb-4">
           <span className="font-mono text-gray-400 mr-2">Shortcuts</span>
           <Input
@@ -73,7 +90,7 @@ const Home: React.FC = () => {
             >
               <TabList>
                 <Tab value={"ALL"}>All</Tab>
-                <Tab value={"PRIVATE"}>Mine</Tab>
+                <Tab value={"PRIVATE"}>My Own</Tab>
               </TabList>
             </Tabs>
           </div>